/* =========================================================================
Lupa, feuille de style du site.
Extraite de index.html le 22 aout 2026, sans qu'une seule regle change,
pour que la page d'accueil et les quatre pages interieures partagent la
MEME source de verite : les couleurs du guide de normes, la typographie,
la barre de navigation, les boutons, le pied de page et les entrees.
Si tu changes une couleur ou une police, c'est ICI et nulle part ailleurs.
========================================================================= */
/* ============================================================
LUPA. Jetons de marque.
Palette prélevée dans le monde de la vidéo : matin d'hiver,
plâtre bleu-gris, chêne miel, lin, lumière givrée.
============================================================ */
:root{
/* PALETTE OFFICIELLE, guide de normes de la cliente, 21 août 2026.
Elle remplace la palette bleue choisie avant qu'on sache que ce guide
existait. C'est elle qui rendait le site froid : sa couleur de marque
est un terracotta chaud, nommé « proximité » dans son guide, et on
l'avait remplacée par la couleur la plus froide du nuancier.
Officiel : charcoal #353434, terracotta #B75C5A, crème #F0EEE8, blanc.
Les sables et les gris ci-dessous sont dérivés de ces trois-là.
Contrastes mesurés : charcoal sur crème 10,7. Gris chaud sur crème 6,25.
Crème sur charcoal 10,7. Terracotta clair sur charcoal 6,01.
ATTENTION : le terracotta officiel ne peut pas servir de texte courant,
il tombe à 3,86 sur le crème. Accent, trait, bouton, rien de plus. */
--canvas:#F0EEE8;
--panel:#E7E3D9;
--panel-2:#EBE7DE;
--ink-deep:#353434;
--ink-deep-2:#3F3D3B;
--accent:#B75C5A; /* terracotta officiel du guide, page 8 */
--accent-text:#A04846; /* le terracotta assombri pour le petit texte. Mesuré : 5,16 sur
le crème et 4,67 sur le sable, contre 3,86 et 3,26 pour le
terracotta pur, qui échouait le seuil de 4,5 sur les deux fonds. */
--accent-btn:#B55A58; /* le terracotta assombri de deux points pour le FOND des boutons.
Le blanc sur le #B75C5A officiel donnait 4,48, soit deux
centièmes sous le seuil. Question laissée ouverte au dossier
depuis le 21 août, tranchée le 22 : on fonce le bouton, on ne
touche pas au logo. L'écart est invisible à l'œil. */
--accent-hover:#8F3D3B;
--accent-muted:#CE9591;
--text-primary:#353434;
--text-secondary:#5A5654;
/* La couleur du texte surligné, 16 septembre 2026. AUCUNE COULEUR NEUVE
HORS DU GUIDE : c'est la terracotta officielle #B75C5A mélangée au crème
officiel #F0EEE8 à 75 %. C'est la seule teinte qui garde lisibles LES
DEUX couleurs de texte du site, mesuré : charbon 7,97 et gris secondaire
4,66, pour un seuil de 4,5. Le #E7C2BF déjà présent dans la feuille
donnait 4,45 avec le gris, deux centièmes sous le seuil, exactement la
tolérance que le projet a refusée sur le bouton le 22 août. */
--select:#E2CAC4;
/* --oak:#B08856 retire le 23 aout 2026 : le chene ne figure nulle part dans le
guide de normes, il avait deja quitte les etoiles d'avis le 22, et le jeton
restait declare sans aucun usage. Ne pas le reintroduire. */
--line:rgba(53,52,52,.16);
--line-strong:rgba(53,52,52,.34);
--field-line:rgba(53,52,52,.52);
--field-line-dark:rgba(240,238,232,.42);
/* Quatrième et dernière révision typographique, 22 août 2026. Le guide de
normes officiel de la cliente, réalisé par l'agence Monument, gouverne
désormais, au-dessus de toute décision de design prise avant sa réception.
Sa page 10 nomme trois polices et donne leurs équivalents Google Fonts :
Titres et sous-titres : Things Regular -> Playfair Display
Texte courant : Neuvetica Regular -> Inter extralight
Slogan : Authenia Regular -> aucun équivalent
Le guide ne contient AUCUNE police à chasse fixe, donc il n'y en a plus
nulle part : les étiquettes techniques passent à Inter en majuscules
espacées. Le mot-symbole Lupa passe lui aussi à Playfair, en attendant
les vrais fichiers du logo, que le guide interdit de recomposer dans une
autre police.
Décision du client, 22 août : appliquer le guide à la lettre, extralight
compris. La réserve sur la finesse du texte courant a été dite et écartée.
ATTENTION : typographie et voile du héros sont liés. Si l'une bouge,
refaire lupa-tests/t8-legib.mjs au complet avant de montrer quoi que ce
soit au client. */
--display:"Playfair Display",Georgia,"Times New Roman",serif;
--mark:"Playfair Display",Georgia,"Times New Roman",serif;
--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-soft:cubic-bezier(.4,.14,.3,1);
--tshadow:0 1px 2px rgba(5,8,14,.95),0 3px 12px rgba(5,8,14,.78),0 10px 44px rgba(5,8,14,.8);
--gut:clamp(1.25rem,5vw,5rem);
--maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--canvas);color:var(--text-primary);
font-family:var(--body);font-weight:200;font-size:clamp(1rem,.55vw + .88rem,1.125rem);
line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.02em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* ---------- Les surfaces du navigateur, 16 septembre 2026 -----------------
Demande de Mathieu après le contrôle mené avec les skills du studio. Le
plancher de qualité d'impeccable nomme un angle mort précis : les pièces
que le NAVIGATEUR dessine et qu'aucune feuille n'habille. Il en restait
trois ici, et la sélection était la plus voyante : surligner une phrase
pour la copier posait le bleu du système en plein milieu d'une page crème
et terracotta. C'était la seule couleur de la page qui n'appartenait pas
à la cliente.
RIEN D'AUTRE NE CHANGE. Aucune géométrie, aucune mise en page, aucun
pixel déplacé : seules les couleurs de trois pièces du navigateur.
DEUX FAMILLES DE FOND, DONC DEUX SÉLECTIONS. Les sections foncées portent
du texte crème : une sélection pâle y serait crème sur crème, illisible.
La liste des fonds foncés est celle de `FONCES` dans `pages.js`
(pagehead, lupa, zones, cta, foot). SI TU AJOUTES UNE SECTION FONCÉE,
ajoute sa classe ici AUSSI, comme pour la barre de navigation.
Mesuré : crème #EFECE4 sur la terracotta sombre, 6,14. */
::selection{background:var(--select);color:var(--text-primary)}
.pagehead::selection,.lupa::selection,.zones::selection,.cta::selection,.foot::selection,
.pagehead ::selection,.lupa ::selection,.zones ::selection,.cta ::selection,.foot ::selection{
background:var(--accent-hover);color:#EFECE4}
/* La barre de défilement suit la marque, mais GARDE SA LARGEUR NATIVE.
`scrollbar-width` n'est volontairement pas déclaré : une barre plus mince
décalerait la mise en page de quelques pixels sur toute la largeur, et ce
lot ne doit rien déplacer. Propriété standard seulement, comprise par
Chrome, Edge et Firefox ; un vieux Safari garde sa barre d'origine, ce qui
est un repli propre. Mesuré : le pouce sur son rail donne 4,85. */
html{scrollbar-color:var(--accent-text) var(--panel-2)}
/* `color-scheme` n'était pas déclaré et sa valeur calculée était `normal`,
donc le navigateur décidait seul. Un visiteur dont le téléphone ou
l'ordinateur est réglé en mode sombre pouvait voir les SEIZE menus
déroulants du site s'ouvrir en noir sur une page crème. Le site n'a qu'un
seul monde, celui du guide, et il est clair : on le dit. */
:root{color-scheme:light}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-btn);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:.5rem;top:.5rem}
/* ---------- L'environnement fixe : la feuille de dessin ---------- */
.sheet{position:fixed;inset:0;z-index:0;pointer-events:none}
.sheet__grid{position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:clamp(64px,7vw,116px) clamp(64px,7vw,116px);
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 10%,transparent 78%);
mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 10%,transparent 78%);
}
.sheet__glow{position:absolute;inset:-20%;
background:radial-gradient(ellipse 46% 40% at 22% 18%,rgba(183,92,90,.22),transparent 62%),
radial-gradient(ellipse 40% 46% at 84% 74%,rgba(176,136,86,.14),transparent 66%);
/* L animation `drift` est retiree le 17 septembre 2026, a la demande de la
cliente (« des animations inutiles qui ne servent a rien »). Elle faisait
deriver ce halo pendant 96 s en boucle infinie sur un degrade que personne
ne remarque, et elle forcait un redessin permanent. C est aussi elle qui
rendait toute comparaison pixel a pixel du site inutilisable : voir
LUPA-REPRISE, 24 aout. Le halo reste, immobile. */
}
/* ---------- Barre de navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
/* 1.3rem = 20,8 px : la ZONE DE PROTECTION du logo, page 05 du guide.
Elle vaut 0,391 fois la hauteur du verrouillage, soit 20,3 px a 52 px de
haut. Les liens du menu etaient mesures a 16,5 px, donc en conflit.
NE DESCENDS PAS SOUS CETTE VALEUR sans reduire le logo d autant. */
gap:1.3rem;padding:.9rem var(--gut);transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
border-bottom:1px solid transparent}
/* Aucune barre derrière la navigation, jamais. Demande du collègue de
Marie-Claude, relayée par le client le 22 août 2026 : la bande claire qui
apparaissait sous l'écriture une fois le héros passé se voyait comme un
bandeau posé sur la page. Elle est retirée.
Ce qui la remplace : l'écriture change de couleur selon la section qu'elle
survole. Quatre sections sur huit ont un fond foncé, donc une écriture
charbon fixe y serait invisible. La classe est posée par navUpdate(), qui
lit la section située sous la barre et n'écrit dans le DOM qu'au changement,
comme tout le reste du site. */
.nav.solid{background:none;backdrop-filter:none;border-bottom-color:transparent}
/* SUR TÉLÉPHONE SEULEMENT, la barre reprend un fond DÈS QU'ELLE A QUITTÉ LE
HÉROS. Le collègue de Marie-Claude avait demandé « pas de petite bande
beige quand tu scrolles » : sa demande visait le héros, l'image plein
écran, et celui-ci reste absolument intact (.nav sans .solid = aucun fond).
Dans le contenu, l'absence de fond faisait passer le mot Lupa par-dessus
les phrases, illisible des deux côtés. Vu sur le vrai téléphone du client. */
@media (max-width:760px){
.nav.solid{background:rgba(240,238,232,.92);backdrop-filter:blur(14px) saturate(1.1);
border-bottom:1px solid var(--line)}
.nav.solid:not(.on-light){background:rgba(21,26,33,.92);border-bottom-color:rgba(240,238,232,.14)}
}
/* --- La barre s'efface quand on descend, sur téléphone seulement ---
Décision du client, 22 août 2026. La barre n'a aucun fond, demande du
collègue, et du texte lui passait donc dessous à 76 pour cent des positions
de défilement à 390 px, contre 35 pour cent à 1440. L'effacer règle la
collision sans remettre la bande claire dont le collègue ne voulait pas.
Le héros reste plein écran et l'ordinateur ne change pas d'un pouce.
Le seuil est à 900 px : au-dessus, la collision retombe au niveau de
l'ordinateur et le comportement serait déroutant sur un portable.
La règle de base est écrite AVANT le media, jamais après : voir les deux
défauts du 22 août causés exactement par l'ordre inverse. */
/* 25 AOUT : LE REPLI S'APPLIQUE MAINTENANT A TOUTES LES LARGEURS.
Il etait enferme dans ce media, donc sur ordinateur la classe `repliee`
s'ajoutait et ne faisait RIEN. Mesure : 209 collisions barre/texte sur neuf
pages a 1440 px, dont le mot Lupa par-dessus le titre de la page Outils,
creme sur creme, photographie par le client.
C'est le meme remede que sur telephone, et il n'ajoute AUCUNE bande claire :
la demande du collegue tient toujours. Le declenchement, lui, reste garde
par le script : jamais pendant le heros, jamais sur le bandeau de titre. */
.nav{will-change:transform;
transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
border-color .5s var(--ease),transform .34s var(--ease)}
.nav.repliee{transform:translateY(-100%)}
.nav__mark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:#fff;transition:color .5s var(--ease)}
.nav.on-light .nav__mark{color:var(--text-primary)}
/* Taille minimale du mot-symbole : le guide de normes, page 7, exige 30 px à
l'écran pour « Lupa » seul. Le plancher du clamp est donc 1.875rem, soit
exactement 30 px. Ne le descends jamais, ici ni dans la règle téléphone. */
/* 52 px, CHOISI PAR MATHIEU le 17 septembre 2026 pour que le petit texte du
verrouillage se lise (« 52 px, plus lisible »). Il connaissait le prix : la
barre passe de 76 a 82 px, donc tout le haut des treize pages descend de
six pixels.
Le verrouillage fait alors 197,6 px de large, 2,5 fois le minimum de 78 px
de la page 07. Sa zone protegee vaut 0,391 x 52 = 20,3 px : le rembourrage
de la barre est porte a 1.3rem pour la couvrir, parce que la barre porte
une bordure inferieure, qui EST un element graphique. */
.nav__logo{display:block;height:52px;width:calc(52px * 3.8003);
background-color:currentColor;
-webkit-mask:url("logo-lupa-exp.svg") no-repeat left center;-webkit-mask-size:contain;
mask:url("logo-lupa-exp.svg") no-repeat left center;mask-size:contain}
/* Repli : si le masque n est pas gere, on revoit le mot compose, jamais un
rectangle plein de la couleur du texte. */
@supports not ((mask-size:contain) or (-webkit-mask-size:contain)){
.nav__logo{width:auto;background:none;font-family:var(--mark);font-weight:500;
font-size:1.875rem;letter-spacing:.02em;line-height:1;text-indent:0}
.nav__logo::before{content:"Lupa"}
}
/* LE VERROUILLAGE « Lupa X exp » AILLEURS QUE DANS LA BARRE, 17 septembre 2026.
Demande de Mathieu : « partout où il y a le signe Lupa courtiers immobiliers
il faut rajouter eXp agence immobilière, comme tu as fait pour l'entête ».
Même fichier et même masque que .nav__logo. La hauteur se calcule TOUJOURS
depuis la largeur (aspect-ratio 336,97 / 88,67 = 3,8003), donc le dessin ne
peut pas être déformé, et chaque largeur reste au-dessus des 78 px de la
page 07 du guide.
COULEURS, page 09 : BLANC sur la vidéo du héros et sur le fond du pied de
page (#3F3D3B, qui n'est pas une couleur du guide), CRÈME sur le charbon
officiel de l'intro (#353434).
AUCUN EFFET, page 06 : pas d'ombre, pas de lettre par lettre, pas
d'écrasement. Le logo apparaît en fondu, rien d'autre. */
.logo-exp{display:block;aspect-ratio:336.97/88.67;height:auto;margin:0;
-webkit-mask:url("logo-lupa-exp.svg") no-repeat left center;-webkit-mask-size:contain;
mask:url("logo-lupa-exp.svg") no-repeat left center;mask-size:contain}
/* Bande 1 du héros : la largeur suit celle de la bande, plafonnée. */
.band__logo{width:min(100%,520px);background-color:#fff}
.e-logo .band__logo{opacity:var(--k,1)}
/* Héros fixe (téléphone couché, mouvement réduit). */
.static-hero__logo{width:min(78vw,400px);background-color:#fff}
/* Pied de page : 44 px de haut, 167 px de large. Sa zone de protection vaut
0,391 x 44 = 17 px. */
.foot__logo{width:calc(44px * 3.8003);background-color:#fff}
/* Repli : si le masque n'est pas géré, le mot composé revient, jamais un
rectangle plein. */
@supports not ((mask-size:contain) or (-webkit-mask-size:contain)){
.logo-exp{aspect-ratio:auto;width:auto;background:none!important;
font-family:var(--mark);font-weight:500;font-size:2.4rem;line-height:1;color:#fff}
.logo-exp::before{content:"Lupa"}
}
.nav__sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,1.85rem)}
.nav__links a{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:#fff;opacity:.9;white-space:nowrap;
transition:color .5s var(--ease),opacity .3s var(--ease)}
.nav.on-light .nav__links a{color:var(--text-primary);opacity:.72}
.nav__links a:hover{opacity:1}
.nav__links .btn{opacity:1}
/* Les liens du menu ne se coupent jamais en deux, et ils disparaissent avant
d'être à l'étroit. Entre les deux, la barre garde le mot-symbole et le
bouton, qui est de toute façon la seule action de la page. */
/* Seuil monte de 1180 a 1320 le 23 aout 2026, quand l'onglet Outils a fait
sept liens plus le bouton. Mesure a l'appui : a 1200px la barre debordait
de 10px. Choix du client : garder tous les libelles au long et sortir le
menu compact plus tot. Ce seuil existe a TROIS endroits, voir pages.js et
le script en ligne de index.html. */
@media (max-width:1320px){.nav__links a:not(.btn){display:none}}
/* --- Le menu déroulant des Outils, 27 août 2026 ---------------------------
Demande du client : « j'aimerais avoir un menu déroulant pour les outils
étant donné qu'il y en a plusieurs ». Ils sont passés de deux à cinq.
Le mot Outils RESTE un vrai lien vers la page : un menu déroulant dont la
tête ne mène nulle part oblige à viser un sous-lien, et au doigt comme au
clavier c'est une régression. Ici, cliquer va à la page, survoler ouvre la
liste, et les deux marchent.
Tout est en CSS, sans une ligne de script : `:hover` pour la souris,
`:focus-within` pour le clavier. Le déroulant descend donc même si le
JavaScript ne charge pas. */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop__tete::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.5em;
border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:translateY(-.15em) rotate(45deg);transition:transform .3s var(--ease)}
.nav__drop:hover .nav__drop__tete::after,
.nav__drop:focus-within .nav__drop__tete::after{transform:translateY(.05em) rotate(225deg)}
/* Le `padding-top` fait le pont entre le mot et la liste : sans lui, le curseur
traverse un trou en descendant et le menu se referme sous la souris. */
.nav__drop__menu{position:absolute;top:100%;left:-1rem;z-index:90;
padding-top:.9rem;min-width:15rem;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s var(--ease)}
.nav__drop:hover .nav__drop__menu,
.nav__drop:focus-within .nav__drop__menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav__drop__in{background:var(--ink-deep);border:1px solid rgba(240,238,232,.16);
box-shadow:0 24px 60px -28px rgba(5,8,14,.7);padding:.5rem 0}
/* Ces liens vivent toujours sur l'encre, même quand la barre est passée en
version claire sur fond crème : ils gardent donc leur propre couleur, et la
règle `.nav.on-light` ne doit pas les rattraper. */
.nav__links .nav__drop__in a,
.nav.on-light .nav__links .nav__drop__in a{display:block;padding:.62rem 1.2rem;
font-size:.72rem;letter-spacing:.12em;color:rgba(240,238,232,.82);opacity:1;white-space:nowrap}
.nav__links .nav__drop__in a:hover,
.nav__links .nav__drop__in a:focus-visible{background:rgba(240,238,232,.08);color:#F0EEE8}
/* Sous le seuil, la barre passe au menu plein écran : le déroulant disparaît
avec les autres liens. Les cinq outils restent atteignables, la page Outils
les montre tous. */
@media (max-width:1320px){.nav__drop{display:none}}
/* Le menu du téléphone et de la tablette. Sous 1320 pixels les liens de la
barre disparaissent : sans ce bouton il ne restait aucune navigation, et
c'est exactement ce que le client a vu sur son cellulaire. */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;
width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;flex:0 0 auto}
.burger__bar{display:block;width:24px;height:2px;margin:0 auto;background:#fff;
transition:transform .4s var(--ease),opacity .3s var(--ease),background .5s var(--ease)}
.nav.on-light .burger__bar{background:var(--text-primary)}
.menu.on ~ .nav .burger__bar,.burger[aria-expanded="true"] .burger__bar{background:#F6F4EF}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1320px){.burger{display:flex}}
@media (max-width:600px){.nav__links{display:none}}
.menu{position:fixed;inset:0;z-index:80;background:var(--ink-deep);
opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.menu.on{opacity:1;visibility:visible}
/* `safe center` et non `center` : signalé par le client le 25 août, capture à
l'appui. Le menu a gagné deux liens depuis sa conception (Outils, Conseils)
et ne tient plus dans un petit écran. Avec `center` tout court, un contenu
plus haut que la fenêtre déborde PAR LE HAUT, sous le mot Lupa, et cette
partie est inatteignable même en défilant : « Propriétés » s'écrivait sous
le logo. `safe` bascule en alignement haut dès que ça déborde, le rembourrage
de 5,5 rem reprend son rôle et tout se défile. La première ligne est le
filet des vieux navigateurs, qui centrent comme avant. */
.menu__in{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;justify-content:safe center;
gap:.2rem;padding:5.5rem var(--gut) 2rem;overflow-y:auto}
.menu__in a{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,6.5vw,2.1rem);
letter-spacing:-.01em;text-decoration:none;color:#F6F4EF;padding:.5rem 0;
opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
/* Sur un écran bas, on resserre aussi : neuf liens à 2rem de police ne
rentreront jamais dans 700px, autant leur donner une chance.
CE BLOC DOIT RESTER APRÈS la règle générale ci-dessus. Écrit avant elle, il
avait exactement la même spécificité et perdait donc la cascade : le
resserrement ne s'appliquait JAMAIS, sur aucun écran, et rien ne le signalait.
Corrigé le 26 août 2026, trouvé par balayage-cascade.mjs. */
@media (max-height:900px){
.menu__in a{font-size:clamp(1.3rem,5.2vw,1.7rem);padding:.38rem 0}
}
.menu.on .menu__in a{opacity:1;transform:none}
.menu.on .menu__in a:nth-child(1){transition-delay:.08s}
.menu.on .menu__in a:nth-child(2){transition-delay:.13s}
.menu.on .menu__in a:nth-child(3){transition-delay:.18s}
.menu.on .menu__in a:nth-child(4){transition-delay:.23s}
.menu.on .menu__in a:nth-child(5){transition-delay:.28s}
.menu.on .menu__in a:nth-child(6){transition-delay:.33s}
.menu__in a:hover{color:var(--accent-muted)}
/* Le sélecteur doit battre .menu__in a, sinon le bouton hérite de la taille
des grands liens et déborde de son cadre. */
.menu__in a.menu__cta{font-family:var(--body);font-weight:400;font-size:.86rem;letter-spacing:.14em;
line-height:1;margin-top:1.8rem;align-self:flex-start;color:#fff;padding:1rem 1.7rem}
.menu.on .menu__in a.menu__cta{transition-delay:.38s}
.menu__in a.menu__cta:hover{color:#fff;background:var(--accent-hover)}
.menu__tel,.menu__mail{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em}
.menu__mail{margin-top:.5rem;font-size:.68rem}
.menu__tel a,.menu__mail a{font-family:var(--mono);font-size:inherit;font-weight:400;letter-spacing:inherit;
color:var(--accent-muted);padding:.35rem 0;opacity:1;transform:none}
body.menu-ouvert{overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
background:var(--accent-btn);color:#fff;text-decoration:none;border:0;cursor:pointer;
padding:.78rem 1.5rem;font-family:var(--body);font-weight:400;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
box-shadow:0 1px 0 rgba(53,52,52,.06)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(53,52,52,.16)}
.btn--ghost{background:transparent;color:inherit;border:1px solid currentColor;box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
/* ============================================================
LE HÉROS DÉFILANT
============================================================ */
/* 350vh DEPUIS LE 1er OCTOBRE 2026, et trois bandes au lieu de quatre.
Mathieu, sur la maquette de l'accueil court : « on garde le principe
actuel du héros, mais raccourci ». C'était 800vh en août, 500vh le
17 septembre. La vidéo joue au complet pareil, c'est la distance de
défilement qui change : 2250 px de course à 1440 x 900, environ 630 px par
bande, cinq coups de molette de 120 px chacune. Si c'est trop vif, c'est
cette ligne qu'on tourne, et `t6-gates.mjs` relit les plages. */
.hero{position:relative;height:350vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0E1218}
.stage__media{position:absolute;inset:0}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-ready .poster{opacity:0;transition:opacity 1.1s var(--ease)}
.scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to right,rgba(8,11,17,.34) 0%,rgba(8,11,17,.26) 30%,rgba(8,11,17,.1) 48%,rgba(8,11,17,0) 62%),
radial-gradient(ellipse 120% 90% at 34% 45%,rgba(10,12,20,0) 30%,rgba(10,12,20,.55) 100%)}
.scrim--floor{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to bottom,rgba(10,12,20,.5) 0%,rgba(10,12,20,0) 26%,rgba(10,12,20,0) 62%,rgba(10,12,20,.42) 100%)}
/* Grain fin : casse la bande de dégradé sur 8 bits et donne du grain de pellicule */
.grain{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.06;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px}
/* L'anneau de chargement */
.ring{position:absolute;right:calc(var(--gut) - .25rem);bottom:calc(var(--gut) - .25rem);width:48px;height:48px;color:rgba(255,255,255,.82);
transform:rotate(-90deg);transition:opacity .6s var(--ease);z-index:6}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;right:var(--gut);bottom:var(--gut);z-index:6;display:flex;align-items:center;gap:.6rem;
font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.cue__line{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.85));
animation:cueSlide 2.8s var(--ease-soft) -.6s infinite}
@keyframes cueSlide{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* Les bandes de texte */
.bands{position:absolute;inset:0;z-index:5;pointer-events:none}
.band{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
width:min(50ch,52vw);opacity:0;text-shadow:var(--tshadow);color:#F6F4EF}
/* Pas de panneau derrière le texte. Une ombre de colonne uniforme de haut en
bas, ancrée au bord gauche de l'écran et éteinte avant la fenêtre : la
lumière tombe du côté de la fenêtre, comme dans la pièce filmée, et il n'y
a aucune forme visible sur le mur. Le facteur --sf règle toute la famille.
Forme revue le 22 août 2026, quand la nouvelle vidéo est entrée. L'ancienne
chute était trop rapide : à 46 pour cent de l'écran le voile n'avait déjà
plus que la moitié de sa force, et c'est exactement là que finit le dernier
mot des bandes 3 et 4. Elles tombaient à 2,80 sur l'intérieur du salon.
La chute est maintenant plus lente et s'éteint à 82 pour cent au lieu de 76.
Le bord gauche ne bouge presque pas, donc toujours aucun panneau visible,
mais le texte est protégé jusqu'à sa dernière lettre. Les cinq bandes sont
remontées entre 3,93 et 6,98, sans toucher aux alphas --sa par bande.
Si la vidéo change encore, refaire l'audit avec lupa-tests/audit-reel.mjs. */
.band::before{content:"";position:absolute;left:calc(-1*var(--gut));width:100vw;top:-160vh;height:420vh;
pointer-events:none;z-index:-1;
opacity:calc(.3 + .7*var(--k,1));
background:linear-gradient(to right,
rgba(6,9,15,calc(var(--sa,.7)*var(--sf,.74))) 0%,
rgba(6,9,15,calc(var(--sa,.7)*var(--sf,.74)*.92)) 30%,
rgba(6,9,15,calc(var(--sa,.7)*var(--sf,.74)*.72)) 50%,
rgba(6,9,15,calc(var(--sa,.7)*var(--sf,.74)*.30)) 68%,
rgba(6,9,15,0) 82%)}
.band .btn{text-shadow:none}
@media (max-width:1100px){.band{width:min(46ch,74vw)}}
.band__kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
color:rgba(246,244,239,.78);margin-bottom:1.1rem}
.band__word{font-family:var(--mark);font-weight:500;font-size:clamp(4.2rem,12.5vw,11rem);line-height:.9;letter-spacing:.03em;margin:0}
.band__sub{font-family:var(--mono);font-size:clamp(.62rem,.7vw,.76rem);letter-spacing:.3em;text-transform:uppercase;
margin-top:2.6rem;color:rgba(246,244,239,.86)}
.band__h{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.5vw,3rem);line-height:1.16;letter-spacing:-.02em;max-width:19ch}
/* La bande du nom : courte, donc elle a le droit d'être grande. */
/* 23 aout 2026 : la bande 4 ne porte plus un nom mais le slogan de la marque,
qui est plus long. La largeur passe de 12ch a 19ch pour qu'il tombe en deux
lignes au lieu de trois, et la taille baisse d'un cran pour que la surface de
texte protegee par le voile n'explose pas. Lisibilite remesuree apres coup. */
.band__h--name{font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.08;max-width:19ch}
.band__sub--tight{margin-top:1.4rem}
.e-depth .band__sub{--ks:clamp(0,(var(--k,0) - .42)*3,1);opacity:var(--ks);
transform:translateY(calc((1 - var(--ks))*12px))}
.band__lede{margin-top:1.1rem;font-size:clamp(1rem,1vw + .7rem,1.2rem);color:rgba(246,244,239,.94);max-width:34ch;font-weight:400}
.band__row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem;pointer-events:auto}
/* Découpage du texte pour les entrées */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}
/* (a) Éparpillement, écho de la poussière qui s'assemble dans le rayon */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (b) Montée mot par mot, écho de la lumière qui grimpe */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
transform:translateY(calc((1 - var(--kc))*26px))}
/* (c) Flou vers net, écho de la mise au point qui arrive */
.e-focus .ln{position:relative;display:block}
.e-focus .ln .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--kc,0));pointer-events:none}
.e-focus .ln .sharp{opacity:var(--kc,0)}
.e-focus .ln{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
transform:translateY(calc((1 - var(--kc))*10px))}
/* (d) Approche depuis la profondeur */
.e-depth .inner{display:block;--kc:clamp(0,var(--k,0)*1.9,1);opacity:var(--kc);
transform:scale(calc(.86 + .14*var(--kc)))}
/* (e) Repos : montée, puis sous-ligne, puis boutons */
.e-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
transform:translateY(calc((1 - var(--kc))*24px))}
.e-settle .band__lede{--ks:clamp(0,(var(--k,0) - .5)*3.4,1);opacity:var(--ks);
transform:translateY(calc((1 - var(--ks))*14px))}
.e-settle .band__row{--kb:clamp(0,(var(--k,0) - .68)*3.6,1);opacity:var(--kb);
transform:translateY(calc((1 - var(--kb))*16px))}
/* LE HÉROS RACCOURCI, 1er octobre 2026 : trois bandes au lieu de quatre.
Le slogan de la marque quitte sa propre bande et se pose sous le
verrouillage de la bande 1. LA ZONE DE PROTECTION DU GUIDE, page 05, vaut
0,391 fois la hauteur du verrouillage. Le logo fait min(100 %, 520 px) de
large et 3,8003 fois moins de haut ; la zone vaut donc la largeur divisée
par 9,72. Le pseudo-élément ci-dessous a exactement la largeur du logo et
un rapport de 9,2, un peu plus haut que la zone : elle est tenue à toutes
les tailles, sans un chiffre écrit de tête. */
.band__sub--slogan{margin-top:0}
.band__sub--slogan::before{content:"";display:block;width:min(100%,520px);aspect-ratio:9.2}
.e-logo .band__sub--slogan{opacity:var(--k,1)}
/* Les noms de l'équipe, sous les boutons du repos. Ils arrivent en dernier. */
.band__noms{margin-top:1.4rem;font-size:.9rem;line-height:1.5;color:rgba(246,244,239,.86);pointer-events:auto;max-width:40ch}
.band__noms a{display:inline-block;margin-left:.35rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
text-transform:uppercase;color:#F6F4EF;text-decoration:none;border-bottom:1px solid rgba(246,244,239,.5);
padding-bottom:2px;white-space:nowrap;position:relative}
.band__noms a:hover{border-bottom-color:#F6F4EF}
.band__noms a::after{content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:46px}
.e-settle .band__noms{--kn:clamp(0,(var(--k,0) - .76)*3.6,1);opacity:var(--kn);
transform:translateY(calc((1 - var(--kn))*12px))}
/* Le cadre signature, dans le héros */
.hero-frame{position:absolute;left:calc(var(--gut) - 1.4rem);right:34%;top:14%;bottom:14%;pointer-events:none;z-index:4}
.cnr{position:absolute;width:clamp(30px,3.4vw,48px);height:clamp(30px,3.4vw,48px);overflow:visible}
.cnr path{fill:none;stroke:rgba(246,244,239,.62);stroke-width:1.4;vector-effect:non-scaling-stroke}
.cnr--tl{left:0;top:0}
.cnr--tr{right:0;top:0;transform:scaleX(-1)}
.cnr--bl{left:0;bottom:0;transform:scaleY(-1)}
.cnr--br{right:0;bottom:0;transform:scale(-1)}
@media (max-width:1100px){.hero-frame{right:12%}}
/* Le même cadre, réutilisable sur n'importe quelle boîte */
.marks{position:absolute;inset:clamp(.5rem,1vw,.9rem);pointer-events:none;z-index:3}
.marks .cnr{width:clamp(18px,2.2vw,30px);height:clamp(18px,2.2vw,30px)}
.marks .cnr path{stroke:rgba(242,239,232,.85);stroke-width:1.2}
.marks--ink .cnr path{stroke:var(--line-strong)}
/* ============================================================
LE SITE SOUS LE PLI
============================================================ */
/* Pas de fond opaque ici : la feuille de dessin et la lumière qui dérive sont
posées derrière, et un fond plein sur main les cachait complètement. Le lin
vient de body, les sections qui ont besoin d'un fond le déclarent elles-mêmes. */
main{position:relative;z-index:2}
/* Le vide entre deux sections était de 259 px sur un écran de 900 : presque un
tiers d'écran de rien, entre chaque bloc de texte. Signalé par le client le
26 août 2026, « moins de grosse espace inutile entre les textes ». Mesuré
avant de couper, et coupé d'un tiers plutôt qu'à vue : 161 px entre deux
sections, ce qui laisse encore la page respirer sans la faire bâiller. */
/* RYTHME RESSERRE, 19 septembre 2026, demande de Mathieu : « revois aussi les
espaces sur tout le site, je trouve qu'il en a encore beaucoup ».
Le remplissage d'une section valait 80,6 px a 1440, donc 161 px de BANDE
MORTE entre deux sections avant meme leurs marges internes. Il vaut 49 px,
donc 98 px entre deux. Mesure des treize pages avant et apres, par
lupa-tests/espaces.mjs : 18,8 pour cent de la hauteur du site en bande
morte, 13,3 apres, et 4797 px de hauteur en moins sans qu'une ligne de
texte soit retiree.
LE PLANCHER DU TELEPHONE DESCEND MOINS QUE LE PLAFOND DE L'ORDINATEUR
(48 -> 34 px contre 81 -> 49) : un ecran de 390 px n'a jamais eu trop
d'air, et c'est la que le texte a le plus besoin de respirer. */
.sec{position:relative;padding:clamp(2.1rem,3.4vw,3.1rem) var(--gut)}
:target,section[id],#main{scroll-margin-top:5.5rem}
.wrap{max-width:var(--maxw);margin:0 auto}
/* Les étiquettes de section utilisent le terracotta ASSOMBRI, pas le terracotta
du guide. Mesuré le 22 août 2026 : le #B75C5A officiel donne 3,86 de contraste
sur le crème, sous le seuil de 4,5 exigé pour du texte de cette taille. Le
#A94F4D donne 4,63 et reste visiblement la même couleur.
Le guide interdit de modifier les couleurs DU LOGO, page 6. Il ne dit rien
d'un texte d'interface, et le terracotta pur reste intact partout où il est
grand ou n'est pas du texte : le bouton, le trait du cadre, la signature,
les étoiles des avis, l'anneau de focus. */
.kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-text);
display:flex;align-items:center;gap:.9rem}
.kick::after{content:"";height:1px;flex:1;max-width:9rem;background:var(--line-strong)}
.h2{font-size:clamp(2.15rem,4.4vw,3.8rem);margin-top:1.1rem;max-width:15ch}
.lede{margin-top:1.05rem;max-width:56ch;color:var(--text-secondary)}
/* Trait de cote, séparateur */
.rule{display:block;width:100%;height:18px;overflow:visible}
.rule line,.rule path{stroke:var(--line-strong);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
/* --- 1. La recherche --- */
/* LA REMONTEE DE 5,5 rem N'EXISTE QUE SOUS LE HEROS. Le panneau de recherche
ouvrait la page et mordait sur la video : c'est de la que vient ce
margin-top negatif. Le 18 septembre 2026 Mathieu a fait descendre la
recherche sous l'equipe et sous les trois chemins, et la remontee est
devenue un defaut : le panneau passait 88 px PAR-DESSUS les trois vignettes,
mesure. On ne remonte donc que quand la section precedente est le heros. */
.search{position:relative;z-index:3;padding:0 var(--gut) clamp(3rem,6vw,5rem);
margin-top:clamp(0rem,3vw,2.6rem)}
.hero + .search,.static-hero + .search{margin-top:-5.5rem}
.search__panel{max-width:var(--maxw);margin:0 auto;background:var(--panel);border:1px solid var(--line);
padding:clamp(1.5rem,3vw,2.6rem);box-shadow:0 26px 60px -34px rgba(21,26,33,.5)}
.search__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
/* Les quatre menus ne portent pas des mots de même longueur : « Salles de bain »
se faisait couper quand les colonnes étaient égales. Chacune a sa part. */
.search__grid{display:grid;gap:.9rem;grid-template-columns:2fr .85fr .85fr 1.05fr 1.3fr auto}
@media (max-width:1200px){.search__grid{grid-template-columns:1fr 1fr}.search__grid .btn{grid-column:1/-1}}
@media (max-width:560px){.search__grid{grid-template-columns:1fr}}
.field{position:relative;display:block}
.field input,.field select{width:100%;background:var(--canvas);border:1px solid var(--field-line);
padding:.85rem .95rem;font-weight:400;font-size:.95rem;border-radius:0;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease);appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.field input:hover,.field select:hover{border-color:var(--text-secondary)}
.field input::placeholder{color:var(--text-secondary)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,92,90,.16)}
.search__note{margin-top:1.2rem;padding:1rem 1.15rem;background:var(--canvas);border-left:2px solid var(--accent);
font-size:.95rem;color:var(--text-secondary);display:none}
.search__note.on{display:block}
.search__note a{color:var(--accent-text);text-underline-offset:3px}
/* --- 2. La courtière --- */
.broker{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.broker{grid-template-columns:1fr}}
/* margin-block:0 est ici depuis le 23 août, en remplacement d'un style="margin:0"
qui était écrit dans le HTML. Un style en ligne bat toutes les règles de cette
feuille : il empêchait le décalage de la photo de s'appliquer, et il aurait
bloqué n'importe quel réglage futur de marge sur cette figure. */
.broker__figure{position:relative;max-width:min(100%,440px);margin-block:0;margin-inline:auto;padding-top:2.6rem}
.broker__figure img{width:100%;position:relative;z-index:2}
/* Legende de la photo : depuis le virage equipe du 23 aout, le titre de la
section parle des trois courtiers, donc la personne en photo doit se nommer. */
.broker__figure figcaption{position:relative;z-index:2;margin-top:.9rem;font-family:var(--mono);
font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.broker__plate{position:absolute;left:0;right:0;bottom:0;top:2.6rem;background:var(--panel);z-index:1}
.broker__plate .marks{inset:.8rem}
/* --- Les trois portraits en escalier, accueil, 26 août 2026 ---------------
Remplace le portrait de Marie-Claude seule. L'escalier est un choix, pas un
hasard : la rangée de trois cartes existe déjà sur Vendre et Acheter, et le
client demandait dans le même souffle un site moins répétitif. Ici les
portraits descendent en diagonale et le nom se pose dans le vide laissé à
côté, ce qui remplit une colonne haute et étroite sans allonger la section. */
.trio{position:relative;max-width:min(100%,440px);margin-inline:auto;padding:2.6rem 0 1.6rem}
.trio__plate{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--panel);z-index:1}
.trio__plate .marks{inset:.8rem}
.trio__liste{position:relative;z-index:2;display:grid;gap:clamp(.9rem,1.8vw,1.4rem);padding:0 1.4rem}
.trio__p{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:center;
gap:clamp(.9rem,1.8vw,1.25rem)}
/* L'escalier. Chaque portrait part un cran plus à droite que le précédent.
Le pas est volontairement court : mesuré à 5,2rem, le rôle du troisième
(« Résidentiel et commercial », le plus long des trois) passait sur deux
lignes et touchait le bord du cadre. Le pas se règle ici, jamais en
raccourcissant les libellés, qui sont ceux des cartes de Vendre et Acheter. */
.trio__p:nth-child(2){margin-left:clamp(.9rem,2.2vw,1.7rem)}
.trio__p:nth-child(3){margin-left:clamp(1.8rem,4.4vw,3.4rem)}
.trio__p a{display:block;position:relative;width:clamp(92px,12vw,122px);
transition:transform .5s var(--ease)}
.trio__p a:hover{transform:translateY(-4px)}
.trio__p img{width:100%;display:block}
.trio__p figcaption{display:grid;gap:.28rem;min-width:0}
.trio__nom{font-weight:600;font-size:clamp(.86rem,1.15vw,.98rem);line-height:1.25;color:var(--text-primary)}
.trio__role{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-secondary);line-height:1.35}
/* Sous 900px la section passe en une colonne : l'escalier se redresse, sinon le
troisième portrait part chercher le bord droit de l'écran. */
@media (max-width:900px){
.trio{max-width:min(100%,420px)}
.trio__p:nth-child(2),.trio__p:nth-child(3){margin-left:0}
}
@media (prefers-reduced-motion:reduce){
.trio__p a,.trio__p a:hover{transition:none;transform:none}
}
.broker__sig{font-family:var(--mark);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.5rem);margin-top:1.8rem;color:var(--accent)}
.broker p + p{margin-top:1.05rem}
.broker__facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
border:1px solid var(--line-strong);padding:.5rem .8rem;color:var(--text-secondary)}
/* --- 3. Le moment Lupa --- */
.lupa{background:var(--ink-deep);color:#EFECE4}
.lupa .kick{color:var(--accent-muted)}
.lupa .kick::after{background:rgba(239,236,228,.26)}
.lupa .lede{color:rgba(239,236,228,.72)}
/* ==== L'ORBITE, 27 août 2026 ==============================================
Elle remplace le lecteur, la photo de salon avec ses quatre points. Le
client a apporté le composant « Radial Orbital Timeline » de 21st.dev, qui
est écrit en React avec Tailwind et shadcn/ui ; ceci en est la traduction
en CSS et en JavaScript ordinaire, sans une seule librairie ajoutée.
LES QUATRE OBSERVATIONS SONT CELLES DU LECTEUR, MOT POUR MOT. Elles ont
survécu à trois formes successives, ce sont les textes du client, et elles
ne se retouchent pas. Ce qui est neuf : chaque point porte une photo qui
montre sa preuve, et les points se relient deux à deux.
Tout est préfixé `orb` : rien ici ne peut entrer en collision avec le
reste de la feuille, qui est partagée par les treize pages.
========================================================================= */
/* La scène carrée qui porte l'orbite. La taille suit l'écran : le composant
d'origine est en pleine hauteur d'écran avec un rayon fixe de 200 px, ce
qui déborde d'un téléphone. */
/* LA PHOTO EST AU CENTRE DE L'ORBITE, ET L'ORBITE GRANDIT AUTOUR D'ELLE.
Demande du client le 27 août au soir : « l'animation prend trop de place ».
Elle en prenait beaucoup, en effet : la photo vivait dans la fiche, sous
l'orbite, et lui ajoutait sa hauteur entière. En la posant au centre, la
fiche n'est plus que du texte, et la section perd environ 350 px de haut
malgré l'orbite agrandie. Le cœur terracotta s'efface derrière elle. */
/* L'ORBITE ENTIÈRE A GRANDI LE 28 AOÛT AU SOIR, deuxième demande du client
dans la même soirée : « même l'outil au complet on peut le grossir, il est
trop petit ». Fermée : de 30 à 34 rem sur ordinateur, et 86vw au lieu de
72 sur téléphone. Ouverte : de 38 à 40 rem, et 92vw. Le cœur, les ondes et
le mot suivent, plus bas. L'ouverte doit TOUJOURS dépasser la fermée d'au
moins 20 px à toutes les largeurs, c'est mesuré par `orbite.mjs`. */
.orb{--taille:clamp(19rem,86vw,34rem);
position:relative;width:var(--taille);height:var(--taille);
margin:clamp(1.8rem,4vw,2.8rem) auto 0;
/* AUCUNE SÉLECTION DE TEXTE DANS L'ORBITE, retour du client du 28 août :
sur téléphone, un doigt tenu deux secondes sur un point passait en mode
sélection, et la photo comme les orbes se retrouvaient surlignées en
bleu. Rien ne se lit dans ce cercle, tout s'y touche : la sélection n'y a
aucun rôle. La fiche de lecture, elle, vit SOUS l'orbite et reste
sélectionnable. Le -webkit-touch-callout coupe le menu d'appui long
d'iOS sur la photo du centre. */
-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent;
transition:width .62s var(--ease),height .62s var(--ease)}
/* L'orbite ouverte. L'anneau garde le même retrait, donc son rayon grandit
avec la boîte et les quatre points s'écartent pour laisser la place. */
.orb[data-ouvert="1"]{--taille:clamp(23rem,92vw,40rem)}
/* Le rayon n'est PAS un jeton calculé ici : le script le lit sur l'anneau
réel. C'est la seule façon d'être certain que les points tombent sur le
cercle qu'on voit, à toutes les largeurs, même si ce retrait change. */
.orb__anneau{position:absolute;inset:clamp(2.6rem,7vw,3.4rem);
border:1px solid rgba(240,238,232,.16);border-radius:50%}
/* Meme raison que pour le bouton : le coeur retrecit quand la photo arrive,
donc son centrage doit vivre dans `translate` et pas dans `transform`. */
.orb__coeur{position:absolute;left:50%;top:50%;translate:-50% -50%;
width:clamp(4.6rem,14vw,6.1rem);height:clamp(4.6rem,14vw,6.1rem);
border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 40% 35%,#C9706E,#A04846 62%,#8F3D3B);
box-shadow:0 0 0 1px rgba(240,238,232,.14),0 10px 34px rgba(0,0,0,.45)}
.orb__coeur svg{width:46%;height:46%;display:block}
.orb__coeur svg circle,.orb__coeur svg path{stroke:#F6F4EF;stroke-width:2.4;
fill:none;stroke-linecap:round}
.orb__mot{position:absolute;left:50%;top:calc(50% + clamp(3.1rem,8.5vw,3.9rem));
transform:translateX(-50%);font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(240,238,232,.62);white-space:nowrap}
/* Les deux ondes remplacent le `animate-ping` de l'original, mais lentement :
c'est une maison qu'on regarde, pas un signal radar. */
.orb__onde{position:absolute;left:50%;top:50%;
width:clamp(4.6rem,14vw,6.1rem);height:clamp(4.6rem,14vw,6.1rem);
margin:0;border-radius:50%;border:1px solid rgba(207,149,145,.5);
transform:translate(-50%,-50%);pointer-events:none;
/* Les deux ondes sont retirees le 17 septembre 2026. C etait un battement
decoratif qui n annoncait rien : le coeur de l orbite se clique deja, et
le curseur le dit. L ELEMENT EST MASQUE, pas seulement fige : c est
l animation qui portait son opacite, donc l enlever seule laissait un
anneau opaque immobile au milieu de l outil. */
display:none}
.orb__piste{position:absolute;inset:0}
/* `--x` et `--y` sont posés par le script, en pixels.
PREMIÈRE VERSION ÉCARTÉE : la position se calculait en CSS avec `cos()` et
`sin()`. C'est élégant, mais ces fonctions sont récentes, et si elles ne
sont pas comprises le transform devient invalide et LES QUATRE POINTS
S'EMPILENT AU CENTRE, sans la moindre erreur nulle part. */
.orb__noeud{position:absolute;left:50%;top:50%;width:0;height:0;
transform:translate(var(--x,0px),var(--y,0px))}
/* `translate` EN PROPRIETE, PAS EN `transform`, ET CE N'EST PAS UN DETAIL.
Le navigateur compose dans cet ordre : translate, rotate, scale, transform.
Avec `transform:translate(-50%,-50%)` et `scale:1.24`, le deplacement est
applique AVANT l'agrandissement, donc il est multiplie par 1,24 : le point
ouvert se retrouvait decale de 5 px vers le haut a gauche. Mesure par
`orbite.mjs`, qui a vu un point a 147 px du centre pour un rayon de 142.
En propriete `translate`, l'agrandissement ne le touche plus. */
.orb__btn{position:absolute;left:50%;top:50%;translate:-50% -50%;
width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
display:grid;place-items:center;padding:0;
background:var(--ink-deep);border:1px solid rgba(240,238,232,.42);
color:#F0EEE8;font:inherit;
transition:background .3s var(--ease),border-color .3s var(--ease),
box-shadow .3s var(--ease),scale .3s var(--ease)}
.orb__btn:hover{border-color:var(--accent-muted);background:#3F3D3B}
.orb__btn:focus-visible{outline:2px solid var(--accent-muted);outline-offset:3px}
.orb__pt{width:.5rem;height:.5rem;border-radius:50%;
background:var(--accent-muted);transition:background .3s var(--ease)}
/* `scale` est une propriété à part, PAS un `transform` : le transform du
bouton porte déjà son centrage, et le piège déjà payé dans ce projet est
qu'un second transform efface le premier. */
.orb__noeud[data-ouvert="1"] .orb__btn{background:#F0EEE8;border-color:#F0EEE8;
scale:1.24;box-shadow:0 0 0 6px rgba(240,238,232,.12)}
.orb__noeud[data-ouvert="1"] .orb__pt{background:var(--accent-hover)}
.orb__noeud[data-lie="1"] .orb__btn{border-color:var(--accent);background:#4A3634}
.orb__noeud[data-lie="1"] .orb__pt{background:#F0EEE8}
.orb__nom{position:absolute;left:50%;top:calc(50% + 1.85rem);
transform:translateX(-50%);white-space:nowrap;
font-size:.7rem;letter-spacing:.06em;color:rgba(240,238,232,.72);
transition:color .3s var(--ease)}
.orb__noeud[data-ouvert="1"] .orb__nom{color:#F0EEE8}
.orb__noeud[data-lie="1"] .orb__nom{color:var(--accent-muted)}
/* LE PANNEAU DE LECTURE EST FIXE, SOUS L'ORBITE, et c'est un choix mesuré.
Dans l'original la fiche s'ouvre juste sous le nœud, en absolu. Avec un
point qui tourne, elle sort de l'écran une fois sur deux, et à 390 px elle
déborde toujours. C'était déjà le choix du lecteur qu'elle remplace : le
point reste en place, la note va où elle est lisible. */
.orb__lecture{max-width:34rem;margin:clamp(1.6rem,4vw,2.4rem) auto 0;
min-height:9.5rem;text-align:left}
/* LE FOND FONCE LE CHARCOAL, IL NE L'ÉCLAIRCIT PAS, et c'est mesuré, pas un
goût. Un premier essai en crème à 5,5 pour cent paraissait anodin : il
éclaircissait le fond juste assez pour faire tomber le terracotta clair de
4,92 à 4,22, sous le seuil. Deux issues, inventer un terracotta plus pâle
hors du guide de normes, ou foncer le fond. On fonce, la palette reste
celle de la cliente, et le contraste remonte à 5,63. */
.orb__fiche{background:rgba(0,0,0,.18);border:1px solid rgba(240,238,232,.16);
border-radius:3px;padding:clamp(1.1rem,3vw,1.5rem)}
/* Le rapport fixe et le fond sombre évitent que la fiche saute de hauteur
pendant que la photo arrive. */
/* LA PHOTO DU CENTRE. Ronde, parce que tout le reste de la section l'est :
une photo carrée au milieu d'une orbite se lit comme une erreur.
`scale` et non `width` : on anime une propriété que le navigateur compose,
donc l'apparition reste fluide pendant que la boîte de l'orbite grandit. */
/* AGRANDIE LE 27 AOÛT AU SOIR, demande du client : « on ne voit pas bien ».
Elle passait de 208 à 336 px de diamètre à 1440, soit 61 pour cent de plus,
ET SANS REPRENDRE UN SEUL PIXEL DE HAUTEUR : l'orbite ne change pas de
taille, c'est le vide entre la photo et les points qui est récupéré.
AGRANDIE LE 28 AOÛT AU SOIR, demande du client : « il est difficile de
voir ce que c'est pour certaines ». La photo se mesure maintenant EN PART
DE L'ORBITE, pas en part de l'écran : une part d'écran donnait 164 px sur
téléphone et cassait aux largeurs moyennes, où l'orbite est presque aussi
large que l'écran. 57 % de l'orbite partout, 62 % sur ordinateur où les
points ont plus de marge, et l'orbite ouverte d'ordinateur passe de 36 à
38 rem pour donner l'espace. Téléphone : 164 devient 210 px. Ordinateur :
336 devient 377 px. La seule règle qui compte est mesurée par
`orbite.mjs` : la photo ne touche jamais le bord intérieur des points. */
.orb__centre{position:absolute;left:50%;top:50%;
width:clamp(9rem,calc(var(--taille)*.62),24rem);
height:clamp(9rem,calc(var(--taille)*.62),24rem);
border-radius:50%;object-fit:cover;background:rgba(0,0,0,.3);
translate:-50% -50%;scale:0;opacity:0;pointer-events:none;
box-shadow:0 0 0 1px rgba(240,238,232,.18),0 14px 40px rgba(0,0,0,.5);
transition:scale .5s var(--ease),opacity .38s var(--ease)}
.orb[data-ouvert="1"] .orb__centre{scale:1;opacity:1}
/* Le cœur s'efface derrière elle, il ne se bat pas avec. */
.orb__coeur,.orb__mot{transition:opacity .34s var(--ease),scale .5s var(--ease)}
.orb[data-ouvert="1"] .orb__coeur{opacity:0;scale:.6}
.orb[data-ouvert="1"] .orb__mot{opacity:0}
/* Et les ondes se taisent : elles battaient autour du cœur, pas de la photo. */
.orb[data-ouvert="1"] .orb__onde{opacity:0;transition:opacity .3s linear}
.orb__cat{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent-muted);font-weight:500;margin:0 0 .5rem}
.orb__t{font-family:var(--display);font-weight:400;font-size:1.28rem;
margin:0 0 .6rem;color:#F0EEE8;line-height:1.25}
.orb__note{margin:0;line-height:1.62;color:rgba(240,238,232,.86)}
.orb__lien{margin:1rem 0 0;padding-top:.9rem;
border-top:1px solid rgba(240,238,232,.14)}
.orb__lien h4{margin:0 0 .5rem;font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(240,238,232,.62);font-weight:500}
.orb__lien p{margin:0 0 .7rem;line-height:1.6;font-size:.92rem;
color:rgba(240,238,232,.78)}
.orb__aller{font:inherit;font-size:.84rem;cursor:pointer;background:transparent;
color:var(--accent-muted);border:1px solid rgba(240,238,232,.3);
border-radius:2px;padding:.42rem .8rem;
transition:color .25s var(--ease),border-color .25s var(--ease),
background .25s var(--ease)}
.orb__aller:hover{color:#F0EEE8;border-color:var(--accent-muted);
background:rgba(240,238,232,.08)}
.orb__aller:focus-visible{outline:2px solid var(--accent-muted);outline-offset:2px}
.orb__aller span{color:rgba(240,238,232,.55);margin-left:.35rem}
/* L'invite. Règle du site depuis le 26 août : le geste ne doit RIEN demander
à deviner. Elle dit aussi ce qui est propre à cette forme, que les points
s'allument entre eux. */
.orb__invite{text-align:center;color:rgba(240,238,232,.6);
padding:clamp(1.4rem,3vw,2rem) 0;line-height:1.6;margin:0}
.orb__invite .surTel{display:none}
@media (hover:none){
.orb__invite .surSouris{display:none}
.orb__invite .surTel{display:inline}
}
/* LA LISTE DE SECOURS, ET ELLE N'EST PAS DÉCORATIVE.
Les quatre observations sont écrites dans la page, pas dans le script :
c'est elle que le script lit pour bâtir l'orbite, puis qu'il masque. Si le
JavaScript ne se charge pas, on lit donc les quatre observations en liste
au lieu de regarder un cercle vide. Elle est stylée pour de vrai, parce
qu'un visiteur pourrait la voir. */
.orb__source{list-style:none;margin:clamp(1.8rem,4vw,2.6rem) auto 0;padding:0;
max-width:34rem;text-align:left;display:grid;gap:1.1rem}
/* CES DEUX LIGNES NE SONT PAS FACULTATIVES, et leur absence a produit un vrai
défaut, vu à l'œil et raté par le test. L'attribut `hidden` ne fait que
poser `display:none` depuis la feuille du navigateur : n'importe quelle
règle d'auteur qui déclare un `display` le bat. Les deux règles ci-dessus
en déclarent un, donc `hidden` ne masquait rien et la liste de secours
restait affichée SOUS l'orbite, en double du contenu des fiches.
Le test disait pourtant vrai : il vérifiait l'ATTRIBUT et pas l'EFFET.
Il mesure maintenant le `display` calculé. */
.orb__source[hidden]{display:none}
.orb[hidden]{display:none}
.orb__source li{padding-bottom:1.1rem;border-bottom:1px solid rgba(240,238,232,.14)}
.orb__source li:last-child{border-bottom:0;padding-bottom:0}
.orb__source b{display:block;font-family:var(--display);font-weight:400;
font-size:1.2rem;color:#F0EEE8;margin-bottom:.35rem}
.orb__source span{display:block;line-height:1.6;color:rgba(240,238,232,.82)}
/* Sous 430 px, les noms sous les points se marchent dessus : « La porte
patio » fait 92 px de large et deux points voisins ne sont plus qu'à 70 px
l'un de l'autre en bas de l'orbite. Le nom part donc dans la fiche, et le
bouton grossit pour rester une bonne cible au doigt. */
@media (max-width:430px){
.orb__nom{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.orb__btn{width:2.9rem;height:2.9rem}
}
/* Sous 720 px, la photo prend 55 % de l'orbite et non 62 : l'orbite ouverte
y est presque aussi large que l'écran, donc les points n'ont pas la marge
de l'ordinateur, et le point OUVERT y est le plus gourmand de tous, un
bouton de 2,9 rem gonflé de 24 %. À 57 % la photo frôlait son bord au
pixel près, mesuré par `orbite.mjs`. */
@media (max-width:720px){
.orb__centre{width:clamp(9rem,calc(var(--taille)*.55),24rem);
height:clamp(9rem,calc(var(--taille)*.55),24rem)}
}
/* `--len` vit ICI et non sur `.pin`, parce que la note en a besoin elle aussi
depuis qu'elle a été sortie du point, et qu'elle n'est plus sa descendante. */
.reader{position:relative;margin-top:clamp(2rem,4vw,3.2rem);aspect-ratio:16/9;overflow:hidden;background:#0E1218;
--len:clamp(48px,7vw,120px);
border:1px solid rgba(239,236,228,.14);touch-action:manipulation;user-select:none}
/* ATTENTION : `--hz` DOIT rester dans cette liste. Le zoom au survol est porté
par `.zoomable{transition:--hz .85s}`, plus bas. Cette règle-ci est plus
spécifique (0,1,1 contre 0,1,0), donc elle REMPLACE la liste au complet :
sans `--hz` ici, la variable n'est plus animée et la photo du moment Lupa
grossit d'un coup sec au survol. Signalé par le client le 25 août 2026.
Aucune erreur nulle part, aucun test ne tombait : `transition` ne se cumule
pas entre règles, la plus forte gagne et efface le reste.
`transform` reste volontairement HORS de la liste : c'est `--z` qui l'écrit
au défilement, et il doit suivre le doigt sans retard. */
.reader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:saturate(calc(.82 + .18*var(--h,0))) brightness(calc(.84 + .16*var(--h,0)));
transition:filter .18s linear, --hz .85s var(--ease)}
.reader__veil{position:absolute;inset:0;background:rgba(14,18,24,.4);opacity:calc(1 - .55*var(--h,0));transition:opacity .18s linear}
/* --- Les points et leurs notes, refaits en survol le 26 août 2026 ----------
`--n` garde le sens qu'il avait : l'ARRIVÉE du point quand la section entre à
l'écran, en séquence. Ce qui est nouveau, c'est que le trait et la note ne
suivent plus `--n` mais l'état du point : survol, focus clavier, ou touche.
Tout le survol est en CSS, comme sur les bulles ; le script ne sert qu'au
tactile, qui n'a pas de survol, et au compte des quatre. */
.pins{position:absolute;inset:0;z-index:5}
.pin{position:absolute;left:var(--x);top:var(--y);
z-index:5;background:none;border:0;padding:0;cursor:pointer;color:inherit}
/* La zone à viser fait 44 px, le minimum tactile, alors que le point n'en fait
que 10. Elle est invisible et centrée sur le point. Sans elle, le point est
une cible de 10 px au doigt, donc une cible qu'on rate. */
.pin::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
transform:translate(-50%,-50%)}
/* LE POINT DOIT SE VOIR DE LOIN, ET LA PREMIÈRE VERSION NE SE VOYAIT PAS.
Un rond de 10 px, bordure rose pâle sur fond translucide, disparaissait
littéralement dans le mur crème de la photo : à la capture, on devinait deux
points sur quatre. C'était le maintien enfoncé qui revenait par la fenêtre,
un geste à deviner. Le point est donc plein, dans le terracotta de la marque,
cerclé de crème pour tenir sur un fond clair comme sur un fond sombre, et
posé sur une ombre. Il se voit sur le mur, sur le plancher et dans le jardin. */
.pin .dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
background:var(--accent);border:2px solid rgba(240,238,232,.92);
box-shadow:0 2px 10px rgba(5,8,14,.55);
opacity:var(--n,0);transform:scale(calc(.3 + .7*var(--n,0)));
/* `transform` DOIT rester dans cette liste : c'est le survol qui l'écrit
ensuite, et sans elle le point saute d'un coup au lieu de grossir. */
transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
/* Le halo qui respire. Il est sur un pseudo-élément et n'anime que opacity et
transform, donc il ne coûte rien. C'est LUI qui dit au visiteur qu'il y a
quelque chose ici, et il bat en crème plutôt qu'en rose pâle pour la même
raison que le point : le rose pâle se noie dans une pièce claire. */
.pin .dot::after{content:"";position:absolute;inset:-9px;border:2px solid rgba(240,238,232,.75);border-radius:50%;
opacity:0;animation:respire 3.4s var(--ease) infinite}
.pin:nth-child(2) .dot::after{animation-delay:-.9s}
.pin:nth-child(3) .dot::after{animation-delay:-1.8s}
.pin:nth-child(4) .dot::after{animation-delay:-2.6s}
@keyframes respire{
0%{opacity:0;transform:scale(.72)}
35%{opacity:.55}
100%{opacity:0;transform:scale(1.5)}
}
.pin:hover .dot,.pin:focus-visible .dot,.pin.ouvert .dot{background:#F0EEE8;border-color:var(--accent);transform:scale(1.25)}
.pin:hover .dot::after,.pin:focus-visible .dot::after,.pin.ouvert .dot::after{animation:none;opacity:0}
.pin:focus-visible{outline:2px solid var(--accent-muted);outline-offset:12px;border-radius:50%}
/* Le trait ne se dessine plus à l'arrivée : il part du point vers sa note au
moment où on la demande. `--n` le garde à zéro tant que le point n'est pas né. */
/* Le trait est crème cerclé de sombre, pour la même raison que le point : en
rose pâle d'un pixel, il disparaissait dans le mur et la note semblait
flotter sans lien avec ce qu'elle désigne. */
.pin .line{position:absolute;top:0;height:2px;width:var(--len);background:rgba(240,238,232,.95);
box-shadow:0 0 0 1px rgba(5,8,14,.35);
opacity:0;transition:opacity .3s var(--ease),transform .45s var(--ease)}
.pin--r .line{left:0;transform:scaleX(0);transform-origin:left}
.pin--l .line{right:0;transform:scaleX(0);transform-origin:right}
.pin:hover .line,.pin:focus-visible .line,.pin.ouvert .line{opacity:calc(var(--n,0)*.85);transform:scaleX(var(--n,0))}
.notes{position:absolute;inset:0;pointer-events:none;z-index:4}
.note{position:absolute;left:var(--x);top:var(--y);margin:0;width:min(26ch,34vw);
margin-top:-1.1em;
font-family:var(--mono);font-size:clamp(.56rem,.7vw,.72rem);line-height:1.55;letter-spacing:.03em;color:#F0EEE8;
background:rgba(8,11,16,.72);border:1px solid rgba(206,149,145,.34);backdrop-filter:blur(10px);padding:.5rem .7rem;
text-shadow:0 1px 3px rgba(5,8,14,.85);
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s var(--ease)}
.note--r{margin-left:calc(var(--len,clamp(48px,7vw,120px)) + .75rem)}
.note--l{margin-left:calc(-1 * (var(--len,clamp(48px,7vw,120px)) + .75rem));transform:translate(-100%,6px);text-align:right}
.note.on{opacity:1;visibility:visible;transform:none}
.note--l.on{transform:translateX(-100%)}
/* L'invite au repos. Sur ordinateur elle se pose sous l'image, discrète ; sur
téléphone elle occupe la case des notes et se fait recouvrir par la première
note ouverte. */
/* L'invite est une pastille et non du texte nu : posée à même une photo claire,
du texte crème translucide ne se lisait pas. Même traitement que les petites
étiquettes sur vidéo ailleurs sur le site. */
.reader__invite{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);margin:0;
padding:.5rem .9rem;text-align:center;
font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
color:#F0EEE8;background:rgba(8,11,16,.62);border:1px solid rgba(240,238,232,.28);
backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,8,14,.9);
transition:opacity .4s var(--ease)}
.reader.explore .reader__invite{opacity:0}
.reader__invite .surTel{display:none}
@media (hover:none){
.reader__invite .surSouris{display:none}
.reader__invite .surTel{display:inline}
}
/* La pastille « Maintenez enfoncé » vivait ici. Elle a été retirée avec le
maintien enfoncé le 22 août 2026, décision du client : les quatre annotations
se dessinent maintenant toutes seules à l'arrivée de la section.
ELLE AVAIT SERVI DE LEÇON, ET LA LEÇON RESTE : sa règle de base était écrite
APRÈS son exception téléphone, et comme une parenthèse de largeur ne pèse pas
plus lourd dans la cascade, l'exception était perdue. « top » et « bottom »
devenaient actifs ensemble sur un élément en position absolue, donc il
s'étirait de l'un à l'autre, 363 px de haut au lieu de 46, et cachait toute
la photo. Le même piège vivait sur `.faq-grid__head`, plus bas, où il est
commenté aussi. `node lupa-tests/balayage-cascade.mjs 390` les détecte. */
@media (max-width:720px){
/* L'image était recadrée en portrait et les annotations posées par-dessus :
on ne voyait plus qu'un bout de mur vide, et les meubles disparaissaient.
Sur téléphone l'image garde sa forme entière et les annotations passent
dessous, en liste. La pièce se voit au complet. */
/* overflow:hidden et non visible depuis le 24 août : le zoom au défilement
est arrivé APRÈS cette règle, et son agrandissement débordait du cadre,
l'image sortait par les côtés. Vu sur le vrai téléphone d'un ami du
client. Rien n'est coupé pour autant : la hauteur suit le contenu, donc
les annotations en liste dessous restent entières. */
.reader{aspect-ratio:auto;overflow:visible;border:0;background:none}
.reader img{position:relative;width:100%;height:auto;aspect-ratio:16/9;
object-fit:cover;object-position:56% center;border:1px solid rgba(239,236,228,.14)}
/* Le voile et les points couvrent la PHOTO seule, pas la zone des notes qui
vient dessous : d'où la hauteur en padding-bottom plutôt que `inset:0`. */
.reader__veil{bottom:auto;height:0;padding-bottom:56.25%;border:0}
.pins{bottom:auto;height:0;padding-bottom:56.25%}
/* Les points RESTENT sur l'image et se touchent, c'est la demande du client.
Ce sont les notes qui descendent : une note de trois lignes posée sur une
image de 219 px de haut couvrirait la moitié de la pièce. Elles sont donc
toutes empilées dans la MÊME case sous la photo, une seule visible à la
fois, ce qui donne une zone de hauteur fixe où rien ne saute quand on
passe d'un point à l'autre. */
.notes{position:static;display:grid;margin-top:.7rem;min-height:5.2rem}
.note,.reader__invite{grid-area:1/1}
.note{position:static;width:auto;max-width:none;margin:0;text-align:left;font-size:.68rem;
transform:translateY(6px)}
.note--l,.note--r{margin-left:0;text-align:left}
.note--l{transform:translateY(6px)}
.note--l.on,.note.on{transform:none}
.reader__invite{position:static;align-self:center;padding:.7rem 0;
border:1px dashed rgba(239,236,228,.22)}
/* Mouvement réduit : les quatre notes sont montrées ensemble, donc elles ne
peuvent plus partager une case. Elles reprennent le flux et s'empilent. */
.reader.tout .notes{display:block;min-height:0}
.reader.tout .note{margin-bottom:.4rem}
.reader.tout .reader__invite{display:none}
/* Le trait qui relie le point à sa note n'a plus de note à rejoindre sur
l'image : il ne sert plus à rien et il salirait la photo. */
.pin .line{display:none}
}
@media (max-width:760px){
.nav{padding:.85rem 1.1rem}
.nav__sub{display:none}
/* 34 px de haut -> 129,2 px de large, 1,7 fois le minimum du guide. Le
minimum est une LARGEUR de 78 px, pas une taille de police : verifie dans
le PDF le 17 septembre, ou le filet rouge de la page 07 mesure la largeur
du verrouillage. Le rembourrage passe a .85rem (13,6 px) pour couvrir la
zone de protection de 0,391 x 34 = 13,3 px. */
.nav__logo{height:34px;width:calc(34px * 3.8003)}
.nav .btn{font-size:.66rem;padding:.62rem .85rem;letter-spacing:.1em;white-space:nowrap}
}
.reader__done{margin-top:1.4rem;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.45rem);letter-spacing:-.01em;
opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reader__done.on{opacity:1;transform:none}
/* --- 4. Comment ça se passe --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
.step__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel)}
/* Même piège que sur `.reader img` ci-dessus, et il cachait un second défaut.
Cette règle transitionnait `transform` sur 1,2 s, pour le survol de la ligne
suivante, qui a été neutralisé plus bas le 24 août. Depuis, `transform` est
écrit par `--z` au défilement : la transition faisait donc TRAÎNER le zoom
d'une seconde et deux dixièmes derrière le doigt, sans que rien ne le
signale. Elle est remplacée par `--hz`, qui est ce qu'il fallait animer. */
.step__media img{width:100%;height:100%;object-fit:cover;transition:--hz .85s var(--ease)}
.step:hover .step__media img{transform:scale(1.045)}
.step__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.step__frame path{fill:none;stroke:rgba(242,239,232,.7);stroke-width:1;vector-effect:non-scaling-stroke}
/* Trois cartes identiques alignées, c'est un gabarit. Décalées en escalier,
c'est une progression, et ça dit la même chose que le texte. */
@media (min-width:881px){
.step:nth-child(2){margin-top:clamp(1.8rem,3.4vw,3.4rem)}
.step:nth-child(3){margin-top:clamp(3.6rem,6.8vw,6.8rem)}
}
.step__no{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--accent-text);margin-top:1.3rem}
.step h3{font-family:var(--body);font-weight:500;letter-spacing:0;line-height:1.2;
font-size:clamp(1.55rem,2vw,2rem);margin-top:.55rem}
.step p{margin-top:.7rem;color:var(--text-secondary);font-size:1rem}
/* --- 5. Les secteurs ---
C'était la section la plus plate de la page : du texte noir sur du sable.
Elle devient une bande photo pleine largeur, et les municipalités sont
cadrées par l'élément signature, à sa plus grande taille du site. */
.zones{background:var(--ink-deep);color:#EFECE4;overflow:hidden}
.zones__bg{position:absolute;inset:0;pointer-events:none;
background:url('hero-poster.jpg') center 42%/cover no-repeat;opacity:.62} /* chemin relatif au dossier assets, pas a la page */
.zones__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,rgba(11,15,21,.88) 0%,rgba(11,15,21,.58) 48%,rgba(11,15,21,.74) 100%)}
.zones .wrap{position:relative;z-index:2}
.zones .kick{color:var(--accent-muted)}
.zones .kick::after{background:rgba(239,236,228,.3)}
.zones__frame{position:relative;margin-top:clamp(2.2rem,4vw,3.4rem);
padding:clamp(1.8rem,3.4vw,3.2rem) clamp(1.4rem,3vw,2.8rem)}
.zones__frame .marks{inset:0}
.zones__frame .marks .cnr{width:clamp(26px,3.4vw,46px);height:clamp(26px,3.4vw,46px)}
.zones__frame .marks .cnr path{stroke:rgba(239,236,228,.55);stroke-width:1.2}
.zones__note{color:rgba(239,236,228,.74)}
.zones__list{display:flex;flex-wrap:wrap;gap:.55rem 0;margin:0;padding:0}
.zones__list li{list-style:none;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.95rem);line-height:1.34;letter-spacing:-.01em;
display:flex;align-items:baseline}
.zones__list li::after{content:"";display:inline-block;width:clamp(1.1rem,2.4vw,2.6rem);height:1px;
background:rgba(239,236,228,.45);margin:0 clamp(.7rem,1.4vw,1.4rem);transform:translateY(-.35em)}
.zones__list li:last-child::after{display:none}
/* Sur téléphone les noms composés se cassaient en plein milieu. Une ville par
ligne, le trait de cote passe devant au lieu de suivre. */
@media (max-width:620px){
.zones__list{display:block}
.zones__list li{font-size:clamp(1.4rem,5.4vw,1.7rem)}
.zones__list li::after{display:none}
.zones__list li::before{content:"";flex:0 0 auto;display:inline-block;width:1.1rem;height:1px;
background:rgba(239,236,228,.45);margin-right:.75rem;transform:translateY(-.35em)}
}
.zones__note{margin-top:2.2rem;max-width:52ch;color:rgba(239,236,228,.74)}
/* --- 6. Témoignages ---
Posés sur le sable au lieu du lin, pour que la section se détache de ses
deux voisines, et une grande guillemet en filigrane derrière chaque mot. */
.tem{background:var(--panel)}
.quotes{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,3vw,3rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.q{position:relative;border-top:1px solid var(--line-strong);padding-top:1.5rem}
.q::before{content:"";position:absolute;left:0;top:-1px;width:clamp(2.4rem,4.5vw,3.8rem);height:2px;
background:var(--accent);transform-origin:left;transform:scaleX(var(--qn,0));
transition:transform .9s var(--ease)}
.q.in::before,.stg.in .q::before{--qn:1}
.q:nth-child(1){grid-column:1/span 7}
.q:nth-child(2){grid-column:8/span 5}
.q:nth-child(3){grid-column:1/span 5}
.q:nth-child(4){grid-column:6/span 7}
@media (max-width:820px){.q,.q:nth-child(n){grid-column:1/-1}}
.q blockquote{margin:0;font-family:var(--body);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.42rem);line-height:1.52}
.q figcaption{margin-top:1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
/* La note et le nombre d'avis. C'est le vrai poids de preuve : soixante-dix-neuf
avis se disent en une ligne, pas en soixante-dix-neuf encadrés. Chiffres réels
relevés sur le module d'avis de son site actuel, jamais inventés. */
.score{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:1.5rem}
/* Étoiles en terracotta, pas en chêne : le guide de normes ne contient que le
charbon, le terracotta, le crème et le blanc. Le chêne venait d'une décision
de design antérieure au guide, qui gouverne au-dessus d'elle. */
.score__stars{display:inline-flex;color:var(--accent);line-height:0}
.score__stars svg{width:clamp(96px,10vw,124px);height:auto}
.score__line{font-size:clamp(.95rem,1vw + .6rem,1.05rem);color:var(--text-secondary)}
.score__line strong{font-weight:700;color:var(--text-primary);font-size:1.18em;letter-spacing:-.01em}
/* Les douze autres avis, repliés par défaut : la preuve du nombre est là pour
qui la cherche, sans allonger la page pour qui ne la cherche pas. */
.more{margin-top:clamp(2.4rem,4vw,3.4rem);border-top:1px solid var(--line-strong)}
.more__btn{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
padding:1.35rem 0;cursor:pointer;font-family:var(--body);font-weight:500;
font-size:clamp(.95rem,1.1vw,1.05rem);transition:color .3s var(--ease)}
.more__btn:hover{color:var(--accent-text)}
.more__btn::-webkit-details-marker{display:none}
.more__sign{flex:0 0 auto;width:12px;height:12px;position:relative}
.more__sign::before,.more__sign::after{content:"";position:absolute;background:var(--accent);
transition:transform .45s var(--ease),opacity .45s var(--ease)}
.more__sign::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.more__sign::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.more[open] .more__sign::after{transform:rotate(90deg);opacity:0}
.more__body{overflow:hidden;height:0;transition:height .5s var(--ease)}
.more__flow{columns:3 22rem;column-gap:clamp(1.6rem,2.6vw,2.6rem);padding-bottom:.5rem}
.mq{break-inside:avoid;margin:0 0 1.5rem;padding-left:1rem;border-left:1px solid var(--line)}
.mq blockquote{margin:0;font-size:.94rem;line-height:1.62;color:var(--text-secondary)}
.mq figcaption{margin-top:.55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--text-primary)}
/* --- 7. Questions ---
Deux colonnes : le titre reste accroché à gauche pendant que les questions
défilent à droite. Ça remplit le vide et ça casse le gabarit répété
étiquette, titre, contenu empilés que toutes les autres sections suivaient. */
.faq-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);
gap:clamp(2rem,5vw,5.5rem);align-items:start}
/* MÊME PIÈGE QUE .reader__hint, ET IL DOIT RESTER RÉGLÉ PAREIL : la règle de
base vient AVANT son exception téléphone. Écrite après, elle remettait le
titre en « collant » sous 940 px, où la grille n'a pourtant plus qu'une
colonne. Le titre se décrochait donc et flottait par-dessus les questions,
trois textes superposés. Corrigé le 22 août 2026. */
.faq-grid__head{position:sticky;top:7.5rem}
@media (max-width:940px){.faq-grid{grid-template-columns:1fr;gap:2rem}.faq-grid__head{position:static}}
.faq-grid__note{margin-top:1.8rem;max-width:34ch;color:var(--text-secondary)}
.faq-grid__note a{color:var(--accent-text);font-weight:500;text-underline-offset:3px}
.faq{max-width:none;margin:0}
.qa{border-bottom:1px solid var(--line)}
.qa__btn{list-style:none;width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
background:none;border:0;padding:1.35rem 0;text-align:left;cursor:pointer;
font-family:var(--body);font-weight:500;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.4;
transition:color .3s var(--ease)}
.qa__btn:hover{color:var(--accent-text)}
.qa__btn::-webkit-details-marker{display:none}
.qa__sign{flex:0 0 auto;width:12px;height:12px;position:relative;transform:translateY(-.1em)}
.qa__sign::before,.qa__sign::after{content:"";position:absolute;background:var(--accent);
transition:transform .45s var(--ease),opacity .45s var(--ease)}
.qa__sign::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.qa__sign::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.qa[open] .qa__sign::after{transform:rotate(90deg);opacity:0}
.qa__body{overflow:hidden;height:0;transition:height .5s var(--ease)}
.qa__body p{padding-bottom:1.5rem;color:var(--text-secondary);max-width:62ch}
/* --- 8. Évaluation --- */
.cta{background:var(--ink-deep);color:#EFECE4}
.cta .kick{color:var(--accent-muted)}
.cta .kick::after{background:rgba(239,236,228,.26)}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}}
/* La version miroir, 26 août 2026 : le formulaire à gauche, le texte à droite.
Relevé qui l'a motivée : sur presque chaque page, la fin était le formulaire
PUIS le FAQ, et les deux commençaient exactement à la même verticale. Toutes
les pages finissaient donc de la même façon, ce qui est une bonne part du
« tout est à gauche » du client. Posée sur deux pages seulement, pas sur
toutes : lire le titre avant de remplir reste l'ordre naturel, c'est
l'alternance qui est recherchée, pas l'inversion générale.
En une colonne l'ordre de lecture doit redevenir le naturel, sinon le
visiteur du téléphone tombe sur le formulaire sans savoir ce qu'il demande. */
.cta__grid--inverse > *:first-child{order:2}
.cta__grid--inverse > *:last-child{order:1}
@media (max-width:900px){
.cta__grid--inverse > *:first-child{order:1}
.cta__grid--inverse > *:last-child{order:2}
}
.cta__lede{margin-top:1.4rem;color:rgba(239,236,228,.76);max-width:44ch}
/* La fermeture courte de l'accueil, 27 août 2026, depuis que le grand
formulaire d'évaluation est parti dans Outils. */
.cta__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:center}
.cta__lien{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
color:rgba(239,236,228,.82);text-decoration:none;border-bottom:1px solid rgba(239,236,228,.4);
padding-bottom:3px;white-space:nowrap}
.cta__lien:hover{color:#EFECE4;border-bottom-color:#EFECE4}
.cta__phone{margin-top:2.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,236,228,.66)}
.cta__phone a{color:#EFECE4;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(239,236,228,.4)}
.form{display:grid;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
color:rgba(239,236,228,.6);margin-bottom:.5rem}
.form input,.form textarea,.form select{width:100%;background:rgba(239,236,228,.05);border:1px solid var(--field-line-dark);
color:#EFECE4;padding:.85rem .95rem;font-weight:400;transition:border-color .3s var(--ease),background .3s var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:rgba(239,236,228,.52)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent-muted);background:rgba(239,236,228,.09)}
.form textarea{resize:vertical;min-height:92px}
/* Le bouton du formulaire garde la vraie terracotta de la marque plutôt qu'un
rose éclairci : c'est l'action principale de toute la page. Sur le charcoal
la terracotta seule ne se détacherait pas assez du fond, alors un filet clair
lui donne son contour. */
.form .btn{background:var(--accent-btn);color:#fff;border:1px solid var(--accent-muted);
margin-top:.4rem;justify-self:start}
/* Une deuxieme regle de survol traînait ici avec un bleu pale #C3D4DE, reste de
la palette d'avant le guide de normes. Elle ecrasait le terracotta et
donnait du blanc sur bleu pale au survol. Supprimee le 22 aout 2026. */
.form .btn:hover{background:var(--accent-hover);border-color:var(--accent-muted)}
.form__ok{display:none;border-left:2px solid var(--accent-muted);padding:1rem 1.15rem;background:rgba(239,236,228,.06);font-size:.95rem;line-height:1.6}
.form__ok a{color:var(--accent-muted);text-underline-offset:3px;white-space:nowrap}
.form__ok.on{display:block}
/* --- Le message d'erreur sous un champ, 27 août 2026 ---------------------
Ajouté parce que les six formulaires acceptaient un envoi vide sans rien
dire : `novalidate` éteint la vérification du navigateur, et rien ne la
remplaçait. Le seul qui vérifiait, celui des alertes, se contentait de
déplacer le curseur : pour le visiteur, cliquer ne faisait rien du tout.
LA COULEUR DÉPEND DU FOND, et c'est exactement le piège du 26 août, quand
`.form__note` portait un gris fait pour le crème et se retrouvait sur le
charcoal à 1,71 pour 1. Le jeton `--err` porte donc la bonne valeur selon
la section. Mesuré : `--accent-text` 5,16 sur le crème, `--accent-muted`
4,92 sur le charcoal, pour un plancher de 4,5.
L'ORDRE DES DEUX RÈGLES COMPTE. La règle de base vise le fond clair et
l'exception sombre vient APRÈS, sinon elle perd la cascade à spécificité
égale. C'est la leçon du menu mobile du 25 août, qui n'a jamais rien
appliqué pendant deux jours pour cette raison. */
.form{--err:var(--accent-text)}
.cta .form,.zones .form{--err:var(--accent-muted)}
.form__err{display:flex;gap:.45rem;align-items:flex-start;margin-top:.45rem;
font-size:.82rem;line-height:1.45;color:var(--err)}
.form__err[hidden]{display:none}
/* La pastille porte le point d'exclamation : la couleur seule ne doit jamais
être le seul signal, sinon un visiteur daltonien ne voit aucune différence
entre un champ correct et un champ fautif. */
.form__err::before{content:"!";flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.08rem;
border-radius:50%;border:1.5px solid currentColor;font-family:var(--mono);
font-size:.68rem;font-weight:700;line-height:1;
display:flex;align-items:center;justify-content:center}
.form [aria-invalid="true"]{border-color:var(--err)}
/* --- Pied de page --- */
.foot{background:var(--ink-deep-2);color:rgba(239,236,228,.72);padding:clamp(2.2rem,3.6vw,3.4rem) var(--gut) 1.6rem}
/* Quatre colonnes depuis le 22 août 2026, quand les pages intérieures sont
arrivées : la marque, les pages, les coordonnées, les secteurs. */
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
@media (max-width:1080px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr}}
.foot__word{font-family:var(--mark);font-weight:500;font-size:2rem;color:#EFECE4;letter-spacing:.02em}
.foot__sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;margin-top:.4rem}
/* h3 ET NON h4 depuis le 19 septembre 2026 : le titre juste au-dessus du pied
est le
de la fermeture, donc un
sautait le niveau 3. Trouve par le
detecteur d'impeccable sur la version finale, sur les treize pages. Rien ne
change a l'oeil : ce sont les memes petites capitales. */
.foot h3{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
color:rgba(239,236,228,.5);margin-bottom:1rem}
.foot a{color:rgba(239,236,228,.82);text-decoration:none;transition:color .3s var(--ease)}
.foot a:hover{color:#EFECE4}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem}
.foot__bar{max-width:var(--maxw);margin:clamp(1.8rem,3vw,2.6rem) auto 0;padding-top:1.2rem;
border-top:1px solid rgba(239,236,228,.14);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,236,228,.6)}
/* ==== LES CIBLES AU DOIGT, 27 août 2026 ==================================
Trouvées par `lupa-tests/mobile-qualite.mjs`, qui passe les treize pages à
390 px avec le tactile émulé. Trois cibles étaient sous le seuil de 44 px.
LA TECHNIQUE : un pseudo-élément invisible qui agrandit la zone de touche,
SANS toucher à la boîte de l'élément. Rien ne bouge à l'écran, pas un
pixel : ni la taille du texte, ni son alignement, ni l'espacement autour.
C'est ce qui permet de corriger un site déjà approuvé par la cliente.
POURQUOI 46 px ET NON 44 : le seuil est bien 44, mais la sonde qui le
vérifie part du centre de la cible et avance d'un pixel à la fois, donc
elle en perd un sur chaque bord et lisait 43 sur une cible de 44. Plutôt
que d'assouplir la mesure pour qu'elle passe, on donne deux pixels de
marge à la cible. Ça ne coûte rien, la barre fait 67 px de haut.
POURQUOI PAS UN `padding` : il agrandirait la boîte, donc décalerait ses
voisins. Sur une barre dont l'écriture suit la section qu'elle survole, et
sur un mot-symbole dont le guide de normes fixe la taille au pixel, c'est
exactement ce qu'il ne faut pas faire.
CE QUI N'EST PAS TOUCHÉ, ET POURQUOI. Les liens téléphone EN LIGNE au
milieu d'une phrase gardent leur taille : une zone de 44 px y mordrait sur
les lignes voisines et volerait leurs touches. Les normes les exemptent
pour cette raison même. Idem pour les liens du pied de page, qui ne sont
qu'à 26 px les uns des autres. */
/* 1. Le mot Lupa de la barre, sur les treize pages. Il mesure 71 x 30 px,
et sa hauteur est fixée par le guide de normes, page 7 : on ne la
touche pas. La barre fait 67 px de haut, donc une zone de 44 px y tient
sans déborder sur le contenu. */
.nav__mark{position:relative}
/* Absolu, donc PAS un élément flex : `.nav__mark` est un conteneur flex, et
un pseudo en flux y deviendrait une case de plus. */
.nav__mark::after{content:"";position:absolute;left:0;right:0;
top:50%;translate:0 -50%;height:46px}
/* 2. Les liens téléphone qui sont une action à eux seuls. Sur un téléphone
c'est un appel en un doigt, l'action la plus utile du site pour un
courtier, et ils mesuraient de 20 à 25 px de haut. */
.cta__lien,.aside__tel a[href^="tel:"],.menu__tel a[href^="tel:"]{position:relative}
.cta__lien::after,.aside__tel a[href^="tel:"]::after,.menu__tel a[href^="tel:"]::after{
content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:46px}
/* 3. Les cartes du blogue. Le titre seul était cliquable, sur 25 px de haut,
alors que la carte entière en a l'air. La carte entière le devient.
Elle ne contient qu'UN lien, donc rien n'est recouvert : c'est ce qui
rend ce procédé sûr ici et le rendrait faux sur les cartes de nouvelles
de l'OACIQ, qui en portent deux. */
.pcard{position:relative}
.pcard h3 a::after{content:"";position:absolute;inset:0}
/* --- Entrées au défilement --- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}
.stg > *{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stg.in > *{opacity:1;transform:none}
.stg.in > *:nth-child(1){transition-delay:0ms}
.stg.in > *:nth-child(2){transition-delay:60ms}
.stg.in > *:nth-child(3){transition-delay:120ms}
.stg.in > *:nth-child(4){transition-delay:180ms}
.stg.done > *,.stg.done > *:nth-child(1),.stg.done > *:nth-child(2),.stg.done > *:nth-child(3),.stg.done > *:nth-child(4){transition-delay:0ms}
.draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.7s var(--ease)}
.in .draw,.draw.in{stroke-dashoffset:0}
/* --- LE TITRE QUI SE PRÉCISE, 27 août 2026 -------------------------------
Approuvé par le client sur maquette. Traduit de la famille « Blur Reveal »
de 21st.dev, qui l'écrit en React avec framer-motion : ici c'est du CSS.
IL SE GREFFE SUR LE SYSTÈME EXISTANT, il n'en ajoute pas un second. Les
titres portent déjà `.rv` individuellement dans les treize pages, donc
l'observateur de `pages.js` leur pose déjà `.in`. Aucune page n'a été
modifiée pour cet effet.
POURQUOI VISER LE TEXTE ET PAS `.rv` TOUT COURT : `.rv` enveloppe aussi
des blocs entiers, cartes et photos comprises. Un flou sur ces blocs-là
coûte cher à calculer sur téléphone, pour un effet que personne n'a
demandé. Le client a approuvé « le titre qui se précise », c'est donc le
texte de titre, et lui seul.
PIÈGE DE CASCADE, celui déjà noté au dossier : `transition` NE SE CUMULE
PAS. Ces sélecteurs sont plus spécifiques que `.rv`, donc ils EFFACENT sa
liste de transitions. Il faut donc réécrire `opacity` et `transform` ici,
sinon le fondu et la montée disparaissent sans la moindre erreur nulle
part. Le flou est plus léger sur les petits textes : 8 px sur un titre
Playfair se lit comme une mise au point, 8 px sur la surtitre en petites
capitales l'effacerait complètement. */
/* LE FLOU A L ENTREE EST RETIRE le 17 septembre 2026. C etait l effet du
27 aout « le titre qui se precise » : les titres arrivaient hors foyer et
se faisaient la mise au point. Approuve sur maquette a l epoque, mais c est
le plus gros signe du « blog » que la cliente a nomme : un site de courtier
AFFICHE son texte, il ne le developpe pas comme une photographie. Les
titres gardent leur montee et leur fondu, qui sont plus courts qu avant. */
/* --- LA PHOTO QUI SE DÉVOILE, 27 août 2026 -------------------------------
Approuvé sur maquette. Traduit de « Reveal Image Mask » de 21st.dev.
Réservé aux GRANDES photos, comme le client l'a accepté. Mesuré avant de
choisir : les étapes montent à 1488x836 et la photo d'équipe à 1296x479,
tout le reste du site est sous 460 px de large, donc des vignettes.
CLIP-PATH SEULEMENT, JAMAIS `transform`, ET CE N'EST PAS UN DÉTAIL.
`.zoomable` porte DEUX zooms empilés dans un seul `transform` : `--z` qui
suit le doigt au défilement et `--hz` qui vient du survol. Y écrire un
`transform` les écraserait tous les deux d'un coup.
ET `--hz` DOIT RESTER DANS LA LISTE DE TRANSITIONS ci-dessous, pour la
même raison qu'au commentaire de la ligne 557 : ces sélecteurs sont plus
spécifiques que `.step__media img` et que `.zoomable`, donc ils effacent
leur liste. Sans `--hz` ici, le zoom au survol des étapes meurt en
silence. */
.stg .step__media img,.equipe.rv img{clip-path:inset(0 0 100% 0);
transition:--hz .85s var(--ease),clip-path 1.15s var(--ease)}
.stg.in .step__media img,.equipe.rv.in img{clip-path:inset(0 0 0 0)}
/* La photo suit la carte qui la porte. Les cartes d'un `.stg` entrent en
cascade à 0, 90 et 180 ms : sans ces deux lignes, les trois photos se
dévoileraient ensemble, donc celles des cartes 2 et 3 finiraient leur
ouverture avant même que leur carte soit visible, et l'effet serait perdu
sur deux des trois.
ET LE RETOUR À ZÉRO N'EST PAS FACULTATIF, c'est la raison d'être de la
classe `.done` juste au-dessus : sans lui, le délai d'entrée resterait
collé à la photo pour toujours et le zoom au survol attendrait 180 ms
avant de démarrer. La règle `.done` doit être PLUS spécifique que la règle
d'entrée pour gagner, d'où le `:nth-child` répété des deux côtés. */
.stg > *:nth-child(2) .step__media img{transition-delay:90ms}
.stg > *:nth-child(3) .step__media img{transition-delay:180ms}
.stg.done > *:nth-child(2) .step__media img,
.stg.done > *:nth-child(3) .step__media img{transition-delay:0ms}
/* Poussière au niveau du murmure */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(176,136,86,.5);
animation:mote 22s linear infinite}
.live .mote{animation-play-state:running}
@keyframes mote{
0%{transform:translate3d(0,20px,0);opacity:0}
12%{opacity:.75}
88%{opacity:.55}
100%{transform:translate3d(26px,-140px,0);opacity:0}
}
/* --- Le héros statique : les cinq portes --- */
.static-hero{display:none;position:relative;min-height:100svh;align-items:flex-end;
background:var(--ink-deep) center/cover no-repeat;padding:var(--gut);color:#F6F4EF}
/* La vidéo du téléphone. Un recadrage portrait de la même prise, qui joue en
boucle aller-retour au lieu d'être pilotée par le défilement : sur un petit
écran, huit cents pour cent de hauteur à faire défiler est une corvée, et
une boucle muette est fiable sur tous les téléphones. Elle n'est chargée
que dans la branche du héros statique, donc un ordinateur ne la voit jamais,
et le mouvement réduit garde l'image fixe. */
.static-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 1.1s var(--ease);will-change:transform;transform:translateZ(0)}
.static-hero.video-on .static-hero__video{opacity:1}
.static-hero__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,13,19,.62) 0%,rgba(10,13,19,0) 24%),linear-gradient(to top,rgba(10,13,19,.9) 4%,rgba(10,13,19,.46) 46%,rgba(10,13,19,.24) 100%)}
.static-hero__in{position:relative;z-index:2;max-width:34ch;text-shadow:var(--tshadow);padding-bottom:2vh}
.static-hero__word{font-family:var(--mark);font-weight:500;font-size:clamp(3.4rem,15vw,6rem);line-height:.92;letter-spacing:.03em}
.static-hero__sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;margin-top:1.5rem;opacity:.86;text-wrap:balance}
@media (max-width:430px){.static-hero__sub{letter-spacing:.16em;font-size:.58rem}}
.static-hero__h{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,5.2vw,2.1rem);line-height:1.2;letter-spacing:-.02em;margin-top:2.2rem}
.static-hero__p{margin-top:1rem;font-size:1rem;color:rgba(246,244,239,.88)}
.static-hero .btn{margin-top:1.8rem}
/* 24 août : le héros défilant joue AUSSI sur téléphone, décision du client.
Les portes passent de cinq à DEUX, identiques à la liste GATES du script de
l'accueil : le téléphone couché sans hauteur, et le mouvement réduit. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
(prefers-reduced-motion:reduce){
.hero{display:none}
.static-hero{display:flex}
.search{margin-top:0;padding-top:clamp(2.5rem,6vw,4rem)}
}
/* Sur téléphone, le voyage raccourcit encore. 400vh jusqu'au 30 septembre
2026, 300vh depuis l'accueil court du 1er octobre : trois bandes au lieu de
quatre, donc la même lecture par bande sur moins de pouce. */
@media (max-width:720px){
.hero{height:300vh}
}
@media (max-height:560px){.cue,.ring{display:none}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
.rv,.stg > *{opacity:1;transform:none}
/* Les tuiles des municipalités sont visibles ici même sans .in : leur grille
doit donc garder ses filets, sinon elles se touchent sans séparation. */
.villes.stg:not(.in){background-color:var(--line);border-color:var(--line)}
/* Les deux effets du 27 août doivent être annulés ICI AUSSI, et il faut
nommer l'état `.in` explicitement. Un @media n'ajoute AUCUNE spécificité :
écrire seulement `.h2.rv` ne suffirait pas, parce que `.h2.rv.in` est plus
spécifique et reprendrait la main dès que le script pose la classe. C'est
le piège déjà payé deux fois dans ce projet. Sans ces deux lignes, et avec
le `transition:none!important` juste au-dessus, un visiteur en mouvement
réduit garderait un titre flou et une photo coupée POUR TOUJOURS. */
.h2.rv,.kick.rv,.lede.rv,.h2.rv.in,.kick.rv.in,.lede.rv.in{filter:none}
.stg .step__media img,.equipe.rv img,
.stg.in .step__media img,.equipe.rv.in img{clip-path:none}
.draw{stroke-dashoffset:0}
.note{opacity:1;transform:none}
html{scroll-behavior:auto}
}
/* =========================================================================
PAGES INTÉRIEURES, ajoutées le 22 août 2026.
Le collègue de Marie-Claude : « elle est montée comme une landing page,
ça va prendre d'autres onglets ». Quatre pages sont nées de là : la
courtière, vendre, acheter, contact.
Tout ci-dessous réutilise les jetons du guide de normes déclarés en haut
de ce fichier. Aucune nouvelle couleur, aucune nouvelle police.
========================================================================= */
/* --- La bande de titre en haut de chaque page intérieure ---
Elle est foncée, donc la barre de navigation y passe automatiquement en
écriture claire : la classe pagehead est dans la liste des fonds foncés
de assets/pages.js. */
.pagehead{position:relative;background:var(--ink-deep);color:#EFECE4;overflow:hidden;
/* 176 px en haut a 1440, dont 82 px passent SOUS la barre de navigation :
l'air reellement visible au-dessus du surtitre etait de 94 px, et le bas
en avait 80 de plus. 19 septembre 2026, demande de Mathieu sur les
espaces. Le minimum de 8rem reste sur telephone, ou la barre mange la
meme hauteur sans que l'ecran soit plus grand. */
padding:clamp(7.4rem,11vw,9rem) var(--gut) clamp(2.6rem,4.4vw,3.6rem)}
.pagehead__in{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.pagehead .kick{color:var(--accent-muted)}
.pagehead .kick::after{background:rgba(239,236,228,.28)}
.pagehead h1{font-size:clamp(2.2rem,5.2vw,4.2rem);margin-top:1.2rem;max-width:17ch}
.pagehead__lede{margin-top:1.4rem;max-width:52ch;color:rgba(239,236,228,.78)}
/* L'image de fond de la bande, très assombrie : le texte passe devant sans
qu'aucun panneau ne soit posé, comme dans le héros. */
.pagehead__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 45%;
opacity:.30}
/* La video d'ambiance du bandeau, 24 aout. Elle se glisse ENTRE la photo de
fond et le voile : meme calque, meme opacite que la photo, donc le voile et
les contrastes mesures au-dessus ne changent pas d'un cheveu. Elle apparait
en fondu quand elle est prete ; avant et sans elle, la photo fait le travail. */
.pagehead__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:center 45%;opacity:0;transition:opacity 1.2s var(--ease)}
.pagehead__video.on{opacity:.30}
/* CORRECTIF DU 24 AOÛT, signalé par le client : la vidéo se posait PAR-DESSUS
la photo de fond, et les deux images se voyaient en même temps, en double
exposition. Quand la vidéo joue, la photo s'efface en fondu croisé. Elle
revient si la vidéo est retirée (mouvement réduit, échec de lecture). */
.pagehead__bg{transition:opacity 1.2s var(--ease)}
.pagehead--joue .pagehead__bg{opacity:0}
.pagehead__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to right,rgba(53,52,52,.92) 0%,rgba(53,52,52,.86) 34%,rgba(53,52,52,.62) 68%,rgba(53,52,52,.5) 100%)}
/* --- Où se pose le titre de la page, 26 août 2026 -------------------------
Le client : « il faut mélanger où est situé l'écriture, en ce moment tout
est à gauche, on veut un site un peu moins identique ». Le bandeau de titre
est la PREMIÈRE chose qu'on voit sur chacune des douze pages intérieures,
et il était au même endroit sur les douze. C'est le levier le plus visible.
Posé en système, pas au hasard : dans l'ordre du menu, ça donne centre,
gauche, décalé, centre, gauche, décalé, centre, gauche. Deux pages voisines
n'ouvrent donc jamais pareil.
ATTENTION, ET C'EST LA PARTIE QUI COMPTE : le voile de ce bandeau est un
dégradé de gauche à droite, sombre à gauche et clair à droite. Il a été
dessiné pour protéger un texte à gauche. Déplacer le texte sans déplacer le
voile le poserait sur la partie claire de la photo, donc chaque posture
emmène SON voile. Contrastes remesurés page par page après la pose. */
.pagehead--centre .pagehead__in{text-align:center}
.pagehead--centre .kick{justify-content:center}
.pagehead--centre .kick::before{content:"";height:1px;flex:1;max-width:5rem;background:rgba(239,236,228,.28)}
.pagehead--centre .kick::after{max-width:5rem}
.pagehead--centre h1{margin-inline:auto;max-width:20ch}
.pagehead--centre .pagehead__lede{margin-inline:auto}
.pagehead--centre .pagehead__veil{
background:linear-gradient(to right,rgba(53,52,52,.58) 0%,rgba(53,52,52,.88) 26%,rgba(53,52,52,.9) 74%,rgba(53,52,52,.58) 100%)}
.pagehead--decale .pagehead__in{padding-left:clamp(0rem,16vw,15rem)}
.pagehead--decale .pagehead__veil{
background:linear-gradient(to right,rgba(53,52,52,.5) 0%,rgba(53,52,52,.66) 26%,rgba(53,52,52,.88) 56%,rgba(53,52,52,.92) 100%)}
@media (max-width:900px){
/* En une colonne, le décalage n'a plus de place : le titre revient à gauche
et reprend le voile d'origine, sinon il tombe sur la zone claire. */
.pagehead--decale .pagehead__in{padding-left:0}
.pagehead--decale .pagehead__veil{
background:linear-gradient(to right,rgba(53,52,52,.92) 0%,rgba(53,52,52,.86) 34%,rgba(53,52,52,.62) 68%,rgba(53,52,52,.5) 100%)}
}
/* --- Le fil d'Ariane, sous le titre --- */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:1.4rem var(--gut) 0;
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.crumbs a{color:var(--accent-text);text-decoration:none;text-underline-offset:3px}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.6;margin:0 .5rem}
/* --- Le corps de texte long des pages --- */
.prose{max-width:64ch}
/* UN BLOC DE TEXTE SEUL, CENTRÉ SUR LA PAGE MAIS LU DE GAUCHE À DROITE.
Demandé le 28 août pour la page des courtiers, quand l'encadré d'évaluation
qui occupait la deuxième colonne est parti : sans ça le texte serait resté
collé à gauche avec un trou à droite.
Le BLOC est centré, pas les lignes. Centrer les lignes d'un texte de trois
paragraphes et d'une liste à cinq points le rendrait pénible à lire, et la
liste surtout. Si le client veut vraiment les lignes centrées, c'est
`wrap--centre` qu'il faut poser sur le conteneur, et c'est un mot à changer. */
.prose--seul{margin-inline:auto}
.prose p{margin-top:1.15rem}
.prose p:first-child{margin-top:0}
/* h2 ET h3 SE RESSEMBLENT AU PIXEL PRES, et c'est voulu. Le premier bloc de
texte d'une page porte des
depuis le 19 septembre 2026, pour que le plan
des titres ne saute pas du