/* =========================================================================
LA VITRINE, SECONDE VERSION
=========================================================================
La DISPOSITION vient du prototype, relevee sur ses valeurs reelles ; la
FORME est batie sur nos jetons. Le prototype portait 354 attributs `style=`
en ligne et aucune classe : le transcrire aurait fige la page hors de toute
regle, et la moindre retouche aurait demande de rouvrir chaque balise.
CE QUI FAIT SON RENDU, et qu'on reprend tel quel :
conteneur 1240 px, centre, 36 px de marge laterale
rythme 80 px en haut et en bas de chaque section
bandes une section sur deux se detache : filet en haut et fond
a 2 % de blanc, sur toute la largeur
colonnes deux colonnes appariees, 52 px d'ecart, avec des rapports
qui varient selon ce que porte chaque cote
marqueurs des rangees `12px 1fr` : une pastille, puis le texte
titres graisse 900, resserres
etiquettes monospace, capitales, tres espacees
DEUX ECARTS ASSUMES par rapport au prototype :
- Les polices restent celles du systeme. Le prototype appelait Lato et IBM
Plex Mono depuis un serveur distant ; la charte dit pile systeme, et une
vitrine ne doit pas attendre un fichier tiers pour s'afficher. On garde
le DISPOSITIF, une monospace pour les etiquettes, avec celle du systeme.
- Les couleurs prennent nos valeurs : son cyan #4CCBE8 devient #00CFEA,
son or #E7C27A devient #F2BE63, son fond #07111f devient #07111F.
========================================================================= */
/* Les mesures du gabarit vivent a la RACINE, pas sur `.lv`.
*
* Le bandeau est volontairement pose HORS de `.lv` (sans quoi son flou ne
* prend pas, voir `.lv-entete`). Declarees sur `.lv`, ces variables ne
* l'atteignaient donc pas : `padding-left: var(--lv-marge)` restait sans
* valeur, donc ignore, et `max-width: var(--lv-large)` aussi. Le bandeau
* touchait les bords pendant que le contenu gardait sa marge, et rien ne le
* signalait puisqu'une variable absente n'est pas une erreur.
*
* A la racine, tout ce qui porte `.lv-conteneur` s'aligne, dedans comme
* dehors. C'est aussi ce qui rend la marge reglable en un seul endroit. */
:root {
--lv-large: 1240px;
--lv-marge: 36px;
--lv-rythme: 80px;
--lv-ecart: 52px;
--lv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.lv {
/* Le fond vivant est en `position: fixed; z-index: 0`, donc il peint
au-dessus de tout contenu NON positionne. Sans ce plan, la moitie de la
vitrine disparait derriere les halos : seuls les blocs qui portent deja
un `position: relative` restent visibles. */
position: relative;
z-index: 1;
}
/* --- Le conteneur, partout le meme ------------------------------------ */
.lv-conteneur {
max-width: var(--lv-large);
margin: 0 auto;
padding-left: var(--lv-marge);
padding-right: var(--lv-marge);
}
.lv-section {
padding-top: var(--lv-rythme);
padding-bottom: var(--lv-rythme);
}
/* Une section sur deux se detache du fond : c'est ce qui donne son rythme a
la page quand on la parcourt vite. La bande va d'un bord a l'autre, le
contenu reste dans le conteneur. */
.lv-bande {
border-top: 1px solid rgba(var(--white-rgb), 0.08);
background: rgba(var(--white-rgb), 0.02);
}
/* --- La typographie --------------------------------------------------- */
.lv-etiquette {
display: block;
margin: 0 0 14px;
font-family: var(--lv-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(var(--portal-gold-rgb), 0.9);
}
/* La meme etiquette, en retrait : elle nomme un detail, pas une section. */
.lv-etiquette--sourde { color: rgba(var(--white-rgb), 0.42); }
.lv-titre {
margin: 0 0 16px;
font-size: clamp(26px, 2.4vw, 30px);
line-height: 1.14;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--texte-sur-sombre);
text-wrap: balance;
}
.lv-chapo {
margin: 0 0 26px;
max-width: 62ch;
font-size: 14.5px;
line-height: 1.6;
color: var(--texte-discret-sur-sombre);
}
.lv-chapo:last-child { margin-bottom: 0; }
/* --- Les colonnes appariees -------------------------------------------
Le rapport change d'une section a l'autre : le cote qui porte le plus de
texte prend un peu plus de place. Ce sont les valeurs du prototype. */
.lv-duo {
display: grid;
gap: var(--lv-ecart);
align-items: start;
}
@media (min-width: 900px) {
.lv-duo { grid-template-columns: 1fr 1fr; }
/* 1,35 et non 1,04 : le titre porte des insecables, donc il lui faut
la largeur d'une ligne entiere ou il debordera au lieu de se couper.
La demonstration perd 80 px, ce qui ne lui enleve rien. */
.lv-duo--hero { grid-template-columns: 1.35fr 1fr; align-items: center; }
.lv-duo--lecture { grid-template-columns: 1.15fr 0.85fr; }
.lv-duo--origine { grid-template-columns: 1.08fr 1fr; }
.lv-duo--demande { grid-template-columns: 0.9fr 1.1fr; }
/* Le propos a besoin de la place, l'objet non : il garde sa taille
quoi qu'il arrive et n'a rien a gagner a s'etaler. */
.lv-duo--regulation { grid-template-columns: 1.25fr 0.75fr; align-items: center; }
.lv-duo--serre { gap: 20px; }
}
.lv-quatre {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1000px) {
.lv-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Trois vignettes de meme rang. Elles portent une image : les serrer sous
860 px les rendrait illisibles, donc elles passent en pile d'un coup. */
.lv-trois {
display: grid;
gap: 20px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
.lv-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* --- L'ouverture ------------------------------------------------------ */
.lv-hero { padding-top: 70px; padding-bottom: 60px; }
.lv-hero__titre {
margin: 0 0 20px;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.06;
font-weight: 900;
letter-spacing: -0.015em;
color: var(--texte-sur-sombre);
text-wrap: balance;
}
.lv-hero__lead {
margin: 0 0 14px;
max-width: 56ch;
font-size: 16px;
line-height: 1.58;
color: rgba(var(--white-rgb), 0.82);
}
.lv-hero__precision {
margin: 0 0 28px;
max-width: 56ch;
font-size: 14.5px;
line-height: 1.6;
color: var(--texte-discret-sur-sombre);
}
.lv-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.lv-lien-second {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border-radius: 10px;
border: 1px solid rgba(var(--white-rgb), 0.14);
background: rgba(var(--white-rgb), 0.04);
color: var(--texte-sur-sombre);
font-size: 14.5px;
text-decoration: none;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lv-lien-second:hover {
transform: translateY(-1px);
background: rgba(var(--white-rgb), 0.08);
border-color: rgba(var(--white-rgb), 0.28);
color: var(--texte-sur-sombre);
}
.lv-note {
margin: 24px 0 0;
max-width: 54ch;
font-size: 13.5px;
line-height: 1.55;
color: rgba(var(--white-rgb), 0.5);
}
/* --- Les cartes -------------------------------------------------------
Le prototype leur donne 22px 20px 24px de rembourrage et un rayon de 16 :
assez pour se detacher, pas assez pour ressembler a des boutons. */
.lv-carte {
padding: 22px 20px 24px;
border: 1px solid rgba(var(--white-rgb), 0.10);
border-radius: 16px;
background: rgba(var(--white-rgb), 0.04);
}
.lv-carte__titre {
margin: 0 0 8px;
font-size: 14.5px;
font-weight: 700;
line-height: 1.3;
color: var(--texte-sur-sombre);
}
.lv-carte__texte {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--texte-discret-sur-sombre);
}
/* La pastille d'un domaine : une DONNEE, donc un point, jamais un aplat qui
se cliquerait. */
.lv-carte__point {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 0 0 14px;
background: rgb(var(--lv-teinte, var(--portal-blue-rgb)));
box-shadow: 0 0 0 4px rgba(var(--lv-teinte, var(--portal-blue-rgb)), 0.14);
}
/* --- Les rangees a marqueur -------------------------------------------
Une pastille, puis le texte. C'est le motif que le prototype emploie le
plus : `12px 1fr` pour une liste, `14px 1fr` pour un cadrage, `38px 1fr`
pour une etape numerotee. */
.lv-rang {
display: grid;
grid-template-columns: 12px 1fr;
gap: 11px;
align-items: start;
font-size: 13.5px;
line-height: 1.55;
color: var(--texte-discret-sur-sombre);
}
.lv-rang + .lv-rang { margin-top: 12px; }
.lv-rang__point {
width: 8px;
height: 8px;
margin-top: 6px;
border-radius: 50%;
background: rgb(var(--lv-teinte, var(--portal-blue-rgb)));
}
.lv-rang__quoi { color: var(--texte-sur-sombre); font-weight: 700; }
/* Le cadrage : meme motif, marqueur un peu plus large et signe. */
.lv-cadre { display: grid; grid-template-columns: 14px 1fr; gap: 13px; align-items: start; }
.lv-cadre + .lv-cadre { margin-top: 12px; }
.lv-cadre__signe { font-size: 13px; line-height: 1.5; margin-top: 1px; }
.lv-cadre__texte { font-size: 13.5px; line-height: 1.55; color: var(--texte-discret-sur-sombre); }
/* L'etape numerotee : le rang compte, ces quatre temps se suivent. */
.lv-etape { display: grid; grid-template-columns: 38px 1fr; gap: 18px; align-items: start; }
/* `.lv-etape + .lv-etape` etait declare deux fois. Ce premier bloc
etait entierement reecrit l.793 : a selecteur et poids egaux,
la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */
.lv-etape__rang {
display: grid;
place-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(var(--white-rgb), 0.14);
background: rgba(var(--white-rgb), 0.04);
font-family: var(--lv-mono);
font-size: 12px;
color: rgba(var(--white-rgb), 0.62);
font-variant-numeric: tabular-nums;
}
.lv-etape__titre { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--texte-sur-sombre); }
.lv-etape__texte { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texte-discret-sur-sombre); }
/* --- Le panneau lateral ------------------------------------------------
Le prototype pose a droite de plusieurs sections un bloc plus sombre, qui
porte un detail ou une precision. */
.lv-panneau {
padding: 22px 20px 24px;
border: 1px solid rgba(var(--white-rgb), 0.14);
border-radius: 16px;
background: rgba(var(--surface-sombre-rgb), 0.55);
}
.lv-panneau__ligne {
display: grid;
grid-template-columns: 112px 1fr;
gap: 13px;
align-items: start;
font-size: 13.5px;
line-height: 1.5;
}
.lv-panneau__ligne + .lv-panneau__ligne {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(var(--white-rgb), 0.08);
}
.lv-panneau__quoi {
font-family: var(--lv-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.42);
padding-top: 3px;
}
.lv-panneau__valeur { color: var(--texte-discret-sur-sombre); }
/* --- La demonstration du hero ---------------------------------------- */
/* L'ANNEAU DE LA MINI-DEMONSTRATION.
*
* Le cadre etait pose a plat sur le fond : rien ne le distinguait d'une image
* d'illustration, alors que c'est le seul endroit de la page ou le produit
* fonctionne sous les yeux du visiteur.
*
* Meme geometrie que l'anneau qui apparait au survol du bouton d'acces (4 px,
* faible opacite), mais en CYAN et non en or, et c'est un choix, pas un detail :
* la charte reserve l'or a ce qui APPELLE (marque, boutons, controles) et le
* cyan a ce qui se LIT (jauges, rail du parcours). Un anneau dore permanent
* ferait de ce cadre un bouton geant et inviterait a cliquer sur un module qui
* montre. Le cyan dit « instrument », ce qu'il est.
*
* Permanent, donc pose sur l'etat de repos : il ancre, il ne repond pas. */
.lv-demo {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(var(--white-rgb), 0.14);
background: rgba(var(--surface-sombre-rgb), 0.55);
/* L'ombre portee est ELARGIE de l'epaisseur de l'anneau (le quatrieme
nombre). Sans cela elle partait du bord du cadre, donc de dessous
l'anneau, et celui-ci semblait flotter devant une ombre qui n'etait pas
la sienne. Elargie, elle passe derriere l'ensemble. */
box-shadow:
0 0 0 4px rgba(var(--portal-accent-rgb), 0.10),
0 24px 60px 4px rgba(var(--black-rgb), 0.34);
}
/* Le format de la SOURCE : les images du test sont en 16/9, un cadre en
4/3 leur coupait les cotes sans raison. */
.lv-demo__cadre { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lv-demo__image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.lv-demo__voile { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.lv-demo__palette {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
padding: 8px;
background: rgba(var(--black-rgb), 0.42);
border-top: 1px solid rgba(var(--white-rgb), 0.10);
}
/* Pas de lettres : a cette taille elles ne se lisent pas, et ce qu'on doit
comprendre est le mouvement, pas le nom du canal. */
.lv-demo__canal {
height: 20px;
border-radius: 8px;
border: 1px solid rgba(var(--white-rgb), 0.16);
box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.14);
opacity: .42;
transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease;
}
.lv-demo__canal.is-active {
opacity: 1;
transform: scale(1.08);
box-shadow:
inset 0 1px 0 rgba(var(--white-rgb), 0.22),
0 0 0 2px rgba(var(--white-rgb), 0.72),
0 0 16px rgba(var(--white-rgb), 0.32);
}
.lv-demo__canal--r { background: linear-gradient(135deg, var(--red-mid), var(--couleur-danger)); }
.lv-demo__canal--j { background: linear-gradient(135deg, #a16207, var(--amber-bright)); }
.lv-demo__canal--v { background: linear-gradient(135deg, #166534, var(--couleur-succes)); }
.lv-demo__canal--c { background: linear-gradient(135deg, #0f766e, var(--portal-accent)); }
.lv-demo__canal--b { background: linear-gradient(135deg, #1d4ed8, rgb(var(--blue-rgb))); }
.lv-demo__canal--m { background: linear-gradient(135deg, #a21caf, #e879f9); }
.lv-demo__legende {
/* La legende passe DEVANT l'ombre du cadre.
Le cadre est `position: relative`, donc peint apres les elements non
positionnes du meme contexte : son ombre de 60 px de flou retombait sur
cette ligne et la ternissait. C'est le meme mecanisme qui faisait
disparaitre la vitrine derriere son fond vivant. */
position: relative;
z-index: 1;
margin: 12px 0 0;
font-family: var(--lv-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.42);
text-align: center;
}
/* --- Mise au point ---------------------------------------------------- */
.lv a:focus-visible,
.lv button:focus-visible,
.lv input:focus-visible,
.lv textarea:focus-visible {
outline: 3px solid rgba(var(--portal-accent-rgb), 0.44);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.lv-lien-second,
.lv-demo__canal { transition: none; }
}
/* --- Sous 900 px, tout se met en colonne ----------------------------- */
@media (max-width: 899px) {
/* A la racine comme la declaration d'origine, sinon le bandeau garderait
la marge large pendant que le contenu passe a la marge etroite. */
:root { --lv-rythme: 56px; --lv-marge: 20px; --lv-ecart: 32px; }
.lv-hero { padding-top: 44px; padding-bottom: 44px; }
}
/* =========================================================================
LE CHOIX DE LA LANGUE.
Exactement la barre du test d'entrainement (lk.css:5765) : coins a 12 px,
fond noir a 45 %, filet blanc a 14 %, drapeaux SVG du champ telephone. La
vitrine la rendait en pilule sur fond ardoise ; deux dessins pour un meme
reglage, sur deux pages que le meme visiteur enchaine.
========================================================================= */
body .portal-header .locale-switcher {
padding: 3px;
gap: 3px;
border-radius: 12px;
background: rgba(var(--black-rgb), 0.45);
border: 1px solid rgba(var(--white-rgb), 0.14);
backdrop-filter: blur(10px);
box-shadow: none;
}
body .portal-header .locale-switcher__button {
border-radius: 10px;
padding: 5px 10px;
font-size: 12px;
color: rgba(var(--white-rgb), 0.95);
}
body .portal-header .locale-switcher__button.is-active {
background: rgba(var(--white-rgb), 0.92);
color: var(--slate);
}
@media (max-width: 900px) {
body .portal-header .locale-switcher__button { padding: 5px 9px; }
}
/* =========================================================================
LES BLOCS DU PROTOTYPE QUE LA PREMIERE VERSION AVAIT LAISSES DE COTE.
Valeurs relevees sur le prototype rendu, pas devinees : la barre de
chiffres tient dans la colonne gauche de l'ouverture (569 px), quatre
colonnes de 134,7 px, 10 px d'ecart, 26 px de retrait sous un filet.
========================================================================= */
/* --- La navigation par ancres ----------------------------------------- */
.lv-nav {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
/* `.lv` devant : portal.css colore tous les liens en cyan, et une nav qui
brille autant que le bouton d'action se lit comme quatre appels. */
.portal-page .lv-nav a {
font-size: 14px;
color: rgba(var(--white-rgb), 0.78);
text-decoration: none;
white-space: nowrap;
transition: color .18s ease;
}
.portal-page .lv-nav a:hover { color: var(--texte-sur-sombre); }
/* Sous 1000 px la marque, la nav, la langue et la connexion ne tiennent plus
sur une ligne : la nav se retire plutot que de couper l'en-tete en deux. */
@media (max-width: 1000px) {
.lv-nav { display: none; }
}
/* --- Les chiffres de la recherche -------------------------------------- */
.lv-chiffres {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 26px;
padding-top: 26px;
border-top: 1px solid rgba(var(--white-rgb), 0.08);
}
.lv-chiffre__valeur {
display: block;
font-size: 26px;
font-weight: 900;
line-height: 1;
color: rgb(var(--portal-accent-rgb));
}
.lv-chiffre__quoi {
display: block;
margin-top: 6px;
font-family: var(--lv-mono);
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.55);
}
/* En dessous de 520 px, quatre colonnes donnent des chiffres a 60 px de
large : deux rangees de deux se lisent, une rangee de quatre non. */
@media (max-width: 520px) {
.lv-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
}
/* --- L'invitation, en huitieme case des domaines -----------------------
Doree et non bleue : ce n'est pas un domaine de plus, c'est un appel. */
.lv-carte--invite {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(rgba(var(--portal-gold-rgb), 0.14), rgba(var(--portal-gold-rgb), 0.05));
border-color: rgba(var(--portal-gold-rgb), 0.3);
}
.lv-carte--invite p {
margin: 0 0 12px;
font-size: 14.5px;
line-height: 1.5;
color: rgba(var(--white-rgb), 0.86);
}
.portal-page .lv-carte--invite a {
font-size: 14.5px;
font-weight: 700;
color: rgb(var(--portal-gold-rgb));
text-decoration: none;
}
/* --- L'entete d'une colonne -------------------------------------------- */
.lv-colonne__entete {
display: block;
margin: 0 0 18px;
font-family: var(--lv-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.42);
}
/* --- Le rang d'une vignette de capture --------------------------------- */
.lv-vignette__rang {
display: block;
margin-top: 10px;
font-family: var(--lv-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.55);
}
/* --- Le pied de page ---------------------------------------------------- */
.lv-pied {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 44px;
padding-top: 44px;
padding-bottom: 52px;
/* Le meme filet que le pied de l'interface : c'est la meme fin de page. */
border-top: 1px solid rgba(var(--white-rgb), 0.08);
}
@media (max-width: 820px) {
.lv-pied { grid-template-columns: 1fr; gap: 30px; }
}
.lv-pied__marque {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 13px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--texte-sur-sombre);
}
.lv-pied__marque svg,
.lv-pied__marque img { width: 32px; height: 32px; }
.lv-pied__mention {
margin: 0;
max-width: 36ch;
font-size: 14px;
line-height: 1.5;
color: rgba(var(--white-rgb), 0.45);
}
.lv-pied__liens {
display: grid;
gap: 8px;
font-size: 14px;
}
/* Les memes liens que dans le pied de l'interface : discrets au repos, francs
au survol. Ils etaient a 0,78 d'opacite, presque aussi affirmes que du texte
courant, alors qu'on ne les consulte qu'une fois. Le selecteur reste ancre
sur `.portal-page` : une classe seule ne l'emporterait pas sur les regles de
lien de `portal.css`. */
.portal-page .lv-pied__liens a {
color: rgba(var(--white-rgb), 0.52);
text-decoration: none;
transition: color .18s ease;
}
.portal-page .lv-pied__liens a:hover,
.portal-page .lv-pied__liens a:focus-visible {
color: rgba(var(--white-rgb), 0.92);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Le credit de realisation, dans la mention et non dans la liste de liens.
Il lui faut donc sa propre regle : sans elle, `portal.css` le reprend par
`.portal-page a:not([class])` et le rend cyan et souligne, comme un lien
brut. Trois classes dans le selecteur, pour l'emporter sans discussion sur
cette regle-la, qui en compte deux. */
.portal-page .lv-pied .lv-pied__mention a {
color: rgba(var(--white-rgb), 0.62);
text-decoration: none;
transition: color .18s ease;
}
.portal-page .lv-pied .lv-pied__mention a:hover,
.portal-page .lv-pied .lv-pied__mention a:focus-visible {
color: rgba(var(--white-rgb), 0.95);
text-decoration: underline;
text-underline-offset: 3px;
}
/* La mention de droit d'auteur, comme dans l'interface : elle ferme la page
sans peser, sous la ligne qui dit qui edite. */
.lv-pied__copyright {
margin: 14px 0 0;
font-size: 12px;
color: rgba(var(--white-rgb), 0.34);
}
/* =========================================================================
LES SECTIONS A PARTIR DU PROTOCOLE, REPRISES SUR LE PROTOTYPE.
Deux blocs ne bougent pas, l'Admin aime leur rendu : la liste des huit
reperes du decodage, et la grille des sept domaines.
========================================================================= */
/* L'air au-dessus du bandeau : les 22 px de la vitrine actuelle, pour que le
logo ne colle pas au bord haut de la fenetre. */
/* Le bandeau colle en haut de la fenetre. Au repos il est transparent : dans
l'ouverture, le fond vivant doit passer derriere lui sans coupure. */
.lv-entete {
/* FIXE ET NON COLLANT, et hors de `.lv`.
En `sticky` a l'interieur de `.lv` (qui porte `position: relative` et
`z-index: 1`), le `backdrop-filter` ne prenait pas : on voyait l'aplat
de couleur et jamais le flou, quels que soient le rayon et l'opacite.
Pose en `fixed` sur le corps, au-dessus de tout, il filtre ce qui defile
dessous, ce qui est la disposition habituelle d'un en-tete floute. */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
padding-top: 15px;
padding-bottom: 15px;
/* LE FLOU EST SUR LE BANDEAU, PAS SUR UN CALQUE.
Il etait d'abord porte par un `::before` en `position: absolute`, et il
n'agissait pas : dans un conteneur collant, Chromium ne compose pas le
fond d'un pseudo-element positionne. On lisait le titre a travers, et
tout ce qu'on voyait etait l'aplat de couleur.
Porte par l'element collant lui-meme, il fonctionne. Le fondu se fait
alors sur le rayon et sur la couleur, qui s'animent tous deux. */
background: rgba(var(--surface-sombre-rgb), 0);
border-bottom: 1px solid rgba(var(--white-rgb), 0);
backdrop-filter: blur(0) saturate(1);
-webkit-backdrop-filter: blur(0) saturate(1);
transition:
transform .34s cubic-bezier(.4, 0, .2, 1),
background .34s ease,
border-color .34s ease,
box-shadow .34s ease,
backdrop-filter .34s ease,
-webkit-backdrop-filter .34s ease;
}
/* LE FLOU DE LA FENETRE DE CONNEXION, DANS LA TEINTE DU SITE.
*
* Le bandeau montait a `blur(42px)` et masquait pourtant MOINS que cette
* fenetre, qui se contente de 10 px. Le flou n'etait pas en cause :
*
* `saturate(1.35)` ravivait les couleurs de ce qui traverse. Un flou rend
* les formes indistinctes, la saturation rend les couleurs franches : les
* deux se combattent, et l'oeil suit la couleur. C'est ce qui donnait
* l'impression de voir au travers malgre un flou tres fort.
*
* `brightness(0.9)` n'assombrissait que d'un dixieme, trop peu pour peser.
*
* On garde donc le voile bleu nuit du site, a son opacite d'origine, et on ne
* change que le filtre : un flou franc, et plus rien qui le contrarie.
* Assombrir n'etait pas le sujet, c'est le flou qui devait faire le travail. */
.lv-entete.is-pose {
background: rgba(var(--surface-sombre-rgb), 0.66);
border-bottom-color: rgba(var(--white-rgb), 0.08);
box-shadow: 0 12px 34px rgba(var(--black-rgb), 0.34);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* Le fond arrive en fondu, porte par un calque separe : anime sur l'opacite,
il ne declenche ni calcul de mise en page ni repeinture du bandeau. */
/* Efface, il remonte de sa propre hauteur. `translateY(-100%)` et non une
valeur en pixels : la hauteur change avec la langue et la largeur. */
.lv-entete.is-effacee { transform: translateY(-100%); }
/* Sans mouvement, le bandeau ne se cache plus : il garde son fond et reste la.
Un element qui disparait sans transition est une surprise, pas un confort. */
@media (prefers-reduced-motion: reduce) {
.lv-entete { transition: none; }
.lv-entete.is-effacee { transform: none; }
}
/* --- Le protocole : les quatre temps deviennent des cartes ---------------
Le prototype encadre chaque temps. Quatre lignes nues se lisaient comme un
paragraphe coupe ; encadrees, elles se lisent comme quatre moments. */
.lv-etape {
align-items: baseline;
padding: 14px 18px;
border: 1px solid rgba(var(--white-rgb), 0.08);
border-radius: 12px;
background: rgba(var(--white-rgb), 0.04);
}
.lv-etape + .lv-etape { margin-top: 10px; }
/* Le rang n'est plus une pastille : un nombre, en monospace, de la couleur de
l'outil. La pastille en faisait une etiquette d'etat. */
.lv-etape__rang {
width: auto;
height: auto;
padding: 0;
border: 0;
background: none;
border-radius: 0;
font-family: var(--lv-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: rgb(var(--portal-accent-rgb));
}
/* --- Le panneau des observations ----------------------------------------
Un filet entre chaque, pas de pastille : ce sont quatre choses observees,
pas une liste a puces de plus dans une page qui en compte deja. */
.lv-observation {
display: grid;
gap: 4px;
padding: 18px 0;
border-bottom: 1px solid rgba(var(--white-rgb), 0.10);
}
.lv-observation:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.lv-observation__quoi {
font-size: 19px;
font-weight: 700;
line-height: 1.25;
color: rgb(var(--portal-accent-rgb));
}
.lv-observation__texte {
font-size: 14.5px;
line-height: 1.5;
color: var(--texte-discret-sur-sombre);
}
.lv-observation__note {
margin: 0;
padding-top: 18px;
border-top: 1px solid rgba(var(--white-rgb), 0.10);
font-size: 14.5px;
line-height: 1.55;
color: rgba(var(--white-rgb), 0.5);
}
/* --- L'apercu du rapport -------------------------------------------------
Le cadre attend une page du document. En attendant, il porte le texte qui
dit ce qu'on y verra : un cadre vide ne promet rien. */
.lv-apercu {
display: grid;
align-content: center;
min-height: 380px;
padding: 32px 30px;
border: 1px solid rgba(var(--white-rgb), 0.10);
border-radius: 18px;
background: rgba(var(--white-rgb), 0.04);
}
.lv-apercu__texte {
margin: 0;
}
.lv-apercu__ligne {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
font-family: var(--lv-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.45);
}
/* --- La neuro-regulation -------------------------------------------------
Les intitules des quatre traits prennent la couleur de l'outil, comme dans
le prototype : ils nomment ce que fait la machine, pas un domaine. */
.lv-carte--outil .lv-carte__titre { color: rgb(var(--portal-accent-rgb)); }
/* La phrase qui ferme la section. Elle est dite en grand parce que c'est elle
qui separe une regulation d'un traitement. */
.lv-these {
margin: 34px 0 0;
max-width: 62ch;
font-size: 19px;
line-height: 1.45;
font-weight: 700;
color: var(--texte-sur-sombre);
text-wrap: balance;
}
/* --- Le cadre : ce que c'est, ce que ce n'est pas ------------------------
Le signe ne crie plus. Une croix rouge et une coche verte transformaient un
propos mesure en verdict ; le prototype pose un tiret et un plus. */
.lv-cadre__signe {
font-weight: 400;
color: rgba(var(--white-rgb), 0.34);
}
/* Le signe est DORE, comme dans la maquette : l'or est la couleur de la
marque, et c'est la colonne qu'on veut retenir. Le cyan reste pour
l'intitule, qui nomme la colonne au lieu d'appuyer chaque ligne. */
.lv-cadre--oui .lv-cadre__signe {
color: rgb(var(--portal-gold-rgb));
font-weight: 700;
}
/* Le texte y est plus clair qu'a gauche : c'est ce qui met la colonne en
avant, plus surement qu'un cadre plus epais. */
.lv-carte--oui .lv-cadre__texte { color: var(--texte-sur-sombre); }
.lv-colonne__entete--accent { color: rgba(var(--portal-accent-rgb), 0.85); }
/* La colonne de droite se detache : c'est celle qu'on veut retenir. */
/* La colonne de droite est celle qu'on veut retenir : elle prend un filet plus
franc, un fond un peu plus tenu, et un halo bas qui la decolle du fond. Les
deux cadres pesaient pareil, donc le lecteur ne savait pas lequel garder. */
.lv-carte--oui {
border-color: rgba(var(--portal-accent-rgb), 0.46);
background: linear-gradient(rgba(var(--portal-accent-rgb), 0.13), rgba(var(--white-rgb), 0.025));
box-shadow: inset 0 1px 0 rgba(var(--portal-accent-rgb), 0.16),
0 12px 32px rgba(var(--portal-accent-rgb), 0.10);
}
/* Son intitule aussi : il nomme la colonne qui compte. */
.lv-carte--oui .lv-colonne__entete--accent {
color: rgb(var(--portal-accent-rgb));
letter-spacing: 0.18em;
}
/* Le signe est dore et un peu plus grand : c'est le seul element colore d'une
liste de quatre lignes, il doit se voir sans crier. */
.lv-cadre--oui .lv-cadre__signe {
font-size: 15px;
font-weight: 700;
}
/* Et la colonne de gauche s'efface d'autant : sans elle en retrait, les deux
cadres pesaient pareil et le lecteur ne savait pas lequel retenir. */
.lv-carte--non { background: rgba(var(--white-rgb), 0.02); }
.lv-carte--non .lv-cadre__texte { color: var(--texte-discret-sur-sombre); }
/* --- Les chiffres, en quatre cases ---------------------------------------
Sous l'ouverture ils sont une ligne d'appuis ; ici ils sont le sujet de la
colonne, donc ils prennent la place et le cadre. */
.lv-chiffres--cases {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.lv-chiffres--cases .lv-chiffre {
padding: 26px 20px;
border: 1px solid rgba(var(--white-rgb), 0.10);
border-radius: 16px;
background: rgba(var(--white-rgb), 0.04);
text-align: center;
}
.lv-chiffres--cases .lv-chiffre__valeur { font-size: 40px; }
.lv-chiffres--cases .lv-chiffre__quoi {
margin-top: 8px;
font-family: inherit;
font-size: 13px;
letter-spacing: normal;
text-transform: none;
}
/* --- Le formulaire de demande -------------------------------------------
Le prototype le pose dans une carte. Sans elle, les champs flottaient sur le
fond vivant et la colonne n'avait pas de bord. */
.lv-formulaire .portal-access__inner {
padding: 28px 26px 30px;
border: 1px solid rgba(var(--white-rgb), 0.10);
border-radius: 18px;
background: rgba(var(--white-rgb), 0.04);
}
@media (max-width: 640px) {
.lv-formulaire .portal-access__inner { padding: 22px 18px 24px; }
}
/* « 15 000 » se coupait en deux sur un telephone : un chiffre qui passe a la
ligne n'est plus un chiffre, c'est deux. */
.lv-chiffre__valeur { white-space: nowrap; }
@media (max-width: 430px) {
.lv-chiffres--cases .lv-chiffre { padding: 22px 12px; }
.lv-chiffres--cases .lv-chiffre__valeur { font-size: 32px; }
}
/* =========================================================================
LA POLICE DES TITRES.
Le prototype titre en Lato Black, et c'est ce rendu qui plait. On l'embarque
au lieu de l'appeler chez Google : 57 Ko pour quatre fichiers, servis par
notre domaine, donc pas de requete vers un tiers et pas de titre qui attend
un fichier distant pour s'afficher.
`unicode-range` fait le tri tout seul : Lato ne publie pas le cyrillique,
donc un titre russe retombe sur la pile systeme sans qu'on ait a le prevoir.
Le corps de texte, lui, ne change pas : seuls les titres passent en Lato.
========================================================================= */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/lato/lato-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/lato/lato-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/fonts/lato/lato-900-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/fonts/lato/lato-900-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.lv-hero__titre,
.lv-titre,
.lv-these,
.lv-carte__titre,
.lv-etape__titre,
.lv-observation__quoi,
.lv-pied__marque {
font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* =========================================================================
L'EMPHASE DU TITRE D'OUVERTURE.
Deux syntagmes passent a l'or : « la perception » et « la couleur ». Ce sont
les deux termes qui portent la promesse, et l'or est la couleur de la marque.
On ne change ni la graisse ni la casse : une emphase de plus (soulignement,
fond, italique) ferait un titre bariole au lieu d'un titre appuye.
Le decoupage vient de la traduction elle-meme, ou les segments sont poses
entre doubles asterisques : la phrase reste une phrase dans le fichier de
langue, et chaque langue met l'accent ou sa syntaxe le demande.
========================================================================= */
.lv-or {
font-style: normal;
/* Le repli, et il doit rester lisible seul: un navigateur sans
`background-clip: text` affiche cette couleur et rien d'autre. */
color: rgb(var(--portal-gold-rgb));
/* L'or plat manquait de corps a 56 px. Un degrade dans le sens de la
lecture lui donne le comportement d'un metal : plus clair la ou la
lumiere arrive, plus cuivre a la fin du mot. Trois arrets et pas deux,
sinon le milieu s'affaisse.
Le point le plus sombre (#C08A3C) tient 6,3:1 sur notre fond, donc au-dela
du seuil AA meme pour du petit texte. */
background-image: linear-gradient(100deg, #FBE0A6 0%, #F2BE63 42%, #C08A3C 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* Chaque fragment reprend le degrade complet : sans cela, un syntagme
coupe en fin de ligne recevrait une moitie de degrade sur chaque bout. */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
/* Un halo tres bas, juste de quoi decoller les lettres du bleu nuit. Sans
lui, l'or fonce du bout de mot se fondait dans le fond. */
filter: drop-shadow(0 0 18px rgba(var(--portal-gold-rgb), 0.28));
}
/* La note sous la demonstration. Ce n'est plus une legende de trois mots mais
une phrase : les capitales monospace a 10 px la rendaient illisible. */
.lv-demo__legende {
max-width: 52ch;
margin: 14px auto 0;
font-family: inherit;
font-size: 13.5px;
letter-spacing: normal;
text-transform: none;
line-height: 1.55;
color: rgba(var(--white-rgb), 0.5);
text-align: left;
}
/* --- Les visuels de la vitrine ------------------------------------------
Des dessins, pas des captures : nets a toute taille, quelques kilo-octets,
et nos couleurs sans retouche. */
.lv-vignette__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
border: 1px solid rgba(var(--white-rgb), 0.08);
border-radius: 10px;
}
.lv-apercu {
min-height: 0;
place-items: stretch;
padding: 14px;
overflow: hidden;
}
.lv-apercu__image {
display: block;
width: 100%;
max-width: 380px;
height: auto;
}
.lv-apercu__texte {
margin-top: 12px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(var(--white-rgb), 0.5);
}
/* Un groupe de mots qui reste entier tant qu'il y a la place. C'est ce qui
evite le mot orphelin en fin de ligne, sans le defaut d'un vrai espace
insecable : celui-la ne se defait jamais, et sur un telephone il faisait
sortir le titre de l'ecran de 64 px au lieu de le couper. */
.lv-groupe { white-space: nowrap; }
/* Le relachement ne sert que pour les tres petites largeurs.
A 900 px il arrivait beaucoup trop tot : le groupe se coupait en « la » et
« perception » sur des ecrans ou les treize caracteres tenaient largement,
ce qui defait exactement ce que l'insecable protege. On ne relache que sous
380 px, ou un groupe indivisible deborderait vraiment de la colonne. */
@media (max-width: 380px) {
.lv-groupe { white-space: normal; }
}
/* =========================================================================
LE SECOND ACCENT DU TITRE : LE CYAN DU LOGO.
Le logo va du cyan a l'or ; le titre refait ce trajet. Ce n'est pas une
couleur de plus, c'est la meme paire, dans le meme ordre : « la perception »
est l'instrument (le cyan sert deja aux jauges, au rail du parcours et aux
observations), « la couleur » est ce qu'on en obtient.
Meme construction que l'or, et meme controle : le point le plus sombre
(#0F8FA6) tient 5,0:1 sur notre fond, donc au-dela du seuil AA.
========================================================================= */
.lv-cyan {
color: rgb(var(--portal-accent-rgb));
background-image: linear-gradient(100deg, #8BE9FF 0%, var(--portal-accent) 42%, #0F8FA6 100%);
filter: drop-shadow(0 0 18px rgba(var(--portal-accent-rgb), 0.26));
}
/* Le rang d'une vignette prend lui aussi le cyan : il numerote un ecran de
l'outil, pas une etape commerciale. */
.lv-vignette__rang { color: rgba(var(--portal-accent-rgb), 0.88); }
/* --- Les questions qui reviennent ----------------------------------------
Sous le cadre de la demarche, dans la place que le formulaire laissait vide
a sa gauche. Un `details` par question : pas de script, et l'etat ouvert
survit au clavier comme au lecteur d'ecran. */
.lv-faq {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid rgba(var(--white-rgb), 0.08);
}
.lv-faq__item {
border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}
.lv-faq__item > summary {
display: flex;
align-items: baseline;
gap: 10px;
padding: 13px 0;
font-size: 14.5px;
font-weight: 700;
line-height: 1.4;
color: var(--texte-sur-sombre);
cursor: pointer;
list-style: none;
transition: color .18s ease;
}
.lv-faq__item > summary::-webkit-details-marker { display: none; }
/* Le chevron est dessine, pas ecrit : un caractere aurait change de forme
d'une police systeme a l'autre. */
.lv-faq__item > summary::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-top: 4px;
border-right: 1.6px solid rgba(var(--portal-accent-rgb), 0.85);
border-bottom: 1.6px solid rgba(var(--portal-accent-rgb), 0.85);
transform: rotate(-45deg);
transition: transform .18s ease;
}
.lv-faq__item[open] > summary::before { transform: rotate(45deg); }
.lv-faq__item > summary:hover { color: rgb(var(--portal-accent-rgb)); }
.lv-faq__item > p {
margin: 0 0 15px 17px;
font-size: 13.5px;
line-height: 1.6;
color: var(--texte-discret-sur-sombre);
}
@media (prefers-reduced-motion: reduce) {
.lv-faq__item > summary,
.lv-faq__item > summary::before { transition: none; }
}
/* --- LE JEU DE CINQ PAGES ------------------------------------------------
Cinq pages du rapport, posees les unes sur les autres. Chacune remonte au
premier plan quand on la designe : on les regarde une a une sans quitter la
page, et l'epaisseur du document reste visible d'un coup d'oeil.
Les rangs vont du fond (1) au dessus (5). Chaque page garde sa rotation et
son decalage propres, ce qui evite l'effet « pile de rectangles alignes ».
------------------------------------------------------------------------ */
.lv-deck {
position: relative;
width: 100%;
max-width: 420px;
margin: 0 auto;
aspect-ratio: 1 / 0.94;
}
.lv-deck__page {
position: absolute;
top: 50%;
left: 50%;
width: 47%;
height: auto;
transform-origin: 50% 50%;
transition: transform .28s ease, opacity .28s ease;
will-change: transform;
}
/* Chaque page a sa place : translation d'abord, rotation ensuite. L'ordre
compte, l'inverse ferait pivoter la page autour du centre du jeu. */
.lv-deck__page--1 { transform: translate(-50%, -50%) translate(-46%, 3%) rotate(-13deg); opacity: .72; z-index: 1; }
.lv-deck__page--2 { transform: translate(-50%, -50%) translate( 46%, 4%) rotate( 12deg); opacity: .78; z-index: 2; }
.lv-deck__page--3 { transform: translate(-50%, -50%) translate(-24%, 2%) rotate( -6deg); opacity: .90; z-index: 3; }
.lv-deck__page--4 { transform: translate(-50%, -50%) translate( 24%, 1%) rotate( 6deg); opacity: .95; z-index: 4; }
.lv-deck__page--5 { transform: translate(-50%, -50%) translate( 0%, 0%) rotate( -1deg); opacity: 1; z-index: 5; }
/* La page designee se redresse, grandit d'un rien et passe devant les autres.
Le `z-index` monte au-dessus des cinq rangs, quelle que soit sa place. */
.lv-deck__page:hover {
z-index: 20;
opacity: 1;
}
.lv-deck__page--1:hover { transform: translate(-50%, -50%) translate(-46%, 3%) rotate(-13deg) rotate(13deg) scale(1.06); }
.lv-deck__page--2:hover { transform: translate(-50%, -50%) translate( 46%, 4%) rotate( 12deg) rotate(-12deg) scale(1.06); }
.lv-deck__page--3:hover { transform: translate(-50%, -50%) translate(-24%, 2%) rotate( -6deg) rotate(6deg) scale(1.06); }
.lv-deck__page--4:hover { transform: translate(-50%, -50%) translate( 24%, 1%) rotate( 6deg) rotate(-6deg) scale(1.06); }
.lv-deck__page--5:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.06); }
/* Sur un ecran etroit les pages se marchent dessus : on resserre l'ecartement
plutot que de les empiler exactement, sinon le jeu ne se lit plus. */
@media (max-width: 640px) {
.lv-deck__page { width: 54%; }
.lv-deck__page--1 { transform: translate(-50%, -50%) translate(-34%, 3%) rotate(-11deg); }
.lv-deck__page--2 { transform: translate(-50%, -50%) translate( 34%, 4%) rotate( 10deg); }
.lv-deck__page--3 { transform: translate(-50%, -50%) translate(-17%, 2%) rotate( -5deg); }
.lv-deck__page--4 { transform: translate(-50%, -50%) translate( 17%, 1%) rotate( 5deg); }
}
@media (prefers-reduced-motion: reduce) {
.lv-deck__page { transition: none; }
}
/* La seconde couche de la demonstration. Elle porte l'image a venir et monte
par-dessus la premiere : le fondu se fait d'une image a l'autre, jamais par
le noir. Le voile de derive reste au-dessus des deux. */
.lv-demo__image--suivante {
opacity: 0;
transition: opacity .7s ease;
}
@media (prefers-reduced-motion: reduce) {
.lv-demo__image--suivante { transition: none; }
}
/* La ligne sous le jeu de pages nomme un ecran du produit : elle prend donc le
cyan de l'outil, comme les rangs des vignettes, et non le gris d'une legende
ordinaire. */
.lv-apercu__ligne { color: rgba(var(--portal-accent-rgb), 0.85); }
/* Le chapo de l'origine porte un saut de ligne dans sa traduction : « PPS pour
Physio-Psycho Scanner. » est une seconde information, elle a sa ligne. Sans
`pre-line`, le HTML ecraserait le saut en simple espace. */
.lv-chapo--lignes { white-space: pre-line; }
/* Le titre casse avant la seconde phrase : sans cela, la premiere ligne se
terminait sur « Le » tout seul. En une colonne le saut disparait, la mesure
y est trop courte pour qu'on choisisse ou couper. */
/* Ce n'est pas un
mais un espace qui sait devenir un saut. Un
masque
en `display: none` emporte avec lui l'espace qu'il tenait, et les deux
phrases se collaient : « la perception.Le reguler ». Ici l'element CONTIENT
un espace : en bloc il coupe la ligne, en ligne il redevient l'espace, et la
phrase reste correcte dans les deux cas. */
.lv-saut { display: block; }
@media (max-width: 900px) {
.lv-saut { display: inline; }
}
/* En une colonne, les questions passent APRES le formulaire : quelqu'un qui
fait defiler veut d'abord le champ a remplir, les questions viennent quand
il hesite. */
@media (max-width: 900px) {
.lv-duo--demande { display: flex; flex-direction: column; }
.lv-duo--demande > *:first-child { display: contents; }
.lv-duo--demande .lv-faq { order: 3; margin-top: 34px; }
.lv-duo--demande .lv-formulaire { order: 2; }
}
/* --- Un domaine se choisit ----------------------------------------------
La carte est un bouton : elle ouvre son texte long sous la grille. Elle
garde l'aspect d'une carte, mais elle repond au pointeur et au clavier. */
.lv-carte--domaine {
display: block;
width: 100%;
text-align: left;
font: inherit;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.lv-carte--domaine .lv-carte__titre,
.lv-carte--domaine .lv-carte__texte { display: block; }
.lv-carte--domaine:hover {
transform: translateY(-2px);
border-color: rgba(var(--lv-teinte), 0.45);
}
/* Le domaine choisi porte sa propre teinte : c'est la couleur de sa pastille,
pas une couleur d'etat de plus. */
.lv-carte--domaine.is-choisi {
border-color: rgba(var(--lv-teinte), 0.62);
background: linear-gradient(rgba(var(--lv-teinte), 0.10), rgba(var(--white-rgb), 0.02));
}
.lv-domaine__texte {
/* Une hauteur mini, sinon les sections d'en dessous sautent d'un domaine
a l'autre selon la longueur du texte. */
min-height: 4.6em;
margin: 26px 0 0;
max-width: 92ch;
font-size: 13.5px;
line-height: 1.6;
color: rgba(var(--white-rgb), 0.5);
}
.lv-domaine__texte strong {
color: var(--texte-sur-sombre);
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.lv-carte--domaine { transition: none; }
}
/* Le contenu du bandeau passe devant son calque de fond. */
.lv-entete > .lv-conteneur {
position: relative;
z-index: 1;
}
/* --- LA LUEUR DE BORDURE -------------------------------------------------
La carte ne bouge pas : sa bordure s'allume la ou le pointeur se trouve. La
lueur prend la TEINTE de la carte, celle de sa pastille, ce qui en fait une
information de plus et non un vernis.
Deux couches de degrade masquees l'une par l'autre dessinent un liseré : le
fond peint le pourtour, `mask-composite: xor` en retire l'interieur. Il n'y
a donc qu'un seul element et aucun cadre supplementaire dans le balisage. */
.lv-carte[data-lueur] {
position: relative;
--lueur-x: 50%;
--lueur-y: 50%;
}
.lv-carte[data-lueur]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
opacity: 0;
transition: opacity .26s ease;
pointer-events: none;
/* La teinte porte plus loin et plus franchement: le coeur du halo est
plein, le palier intermediaire passe de 22 a 38 %, et la retombee va
jusqu'a 74 % du rayon au lieu de 68. La saturation ajoute le dernier
cran, la ou monter encore les opacites aurait donne un liseré dur. */
background: radial-gradient(
240px circle at var(--lueur-x) var(--lueur-y),
rgba(var(--lv-teinte, var(--portal-accent-rgb)), 1),
rgba(var(--lv-teinte, var(--portal-accent-rgb)), 0.38) 44%,
transparent 74%
);
filter: saturate(1.25);
-webkit-mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0);
mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.lv-carte[data-lueur]:hover::after { opacity: 1; }
/* La carte doree n'a pas de teinte de domaine : elle prend l'or de la marque. */
.lv-carte--invite[data-lueur] { --lv-teinte: var(--portal-gold-rgb); }
@media (prefers-reduced-motion: reduce) {
.lv-carte[data-lueur]::after { transition: none; }
}
/* Le contenu du bandeau se centre sur sa hauteur. Les 22 px de haut et les
10 px de bas le posaient plus haut que le milieu, ce qui se voyait des que
le fond apparaissait et lui donnait un bord. */
.lv-entete > .lv-conteneur {
display: flex;
align-items: center;
min-height: 56px;
}
/* Le bandeau ne prend plus de place dans le flux : la page se decale de sa
hauteur. 86 px = 15 + 56 + 15, les valeurs du bandeau lui-meme. */
.lv { padding-top: 88px; }
@media (max-width: 700px) {
.lv { padding-top: 96px; }
}
/* Le rang et l intitule partagent la meme premiere ligne : en , le
petit texte du rang remontait au-dessus du titre au lieu de s aligner
dessus. Meme hauteur de ligne, alignement en haut, et les deux se posent
sur le meme axe optique. */
.lv-etape { align-items: start; }
.lv-etape__rang {
line-height: 1.3;
padding-top: 1px;
}
/* Aucun lien de la vitrine ne porte de soulignement par defaut : il en prend un
au survol, quand il y a un geste. Les regles precedentes s'ancraient sur
`.lv` ; le bandeau en etant sorti, ses liens retombaient sur le style du
navigateur, cyan et souligne. */
.portal-page .lv-nav a,
.portal-page .lv-carte--invite a,
.portal-page .lv-pied__liens a,
.portal-page .lv-panneau__valeur a {
text-decoration: none;
}
.portal-page .lv-panneau__valeur a { color: rgba(var(--portal-accent-rgb), 0.92); }
.portal-page .lv-panneau__valeur a:hover { text-decoration: underline; }
/* Le lien de la carte doree ne change pas au survol : il est deja l'element
colore de la carte, et `portal.css` le repassait en cyan souligne. Seule sa
luminosite bouge, comme sur les autres surfaces dorees du produit. */
.portal-page .lv-carte--invite a:hover,
.portal-page .lv-carte--invite a:focus-visible {
color: rgb(var(--portal-gold-rgb));
text-decoration: none;
filter: brightness(1.12);
}
/* ===== Le positionnement, trois apports =====
TROIS NIVEAUX DANS CHAQUE CARTE, et c'est tout l'enjeu. La version
precedente empilait un titre generique (« Pour vous ») et un paragraphe ou
la promesse etait noyee : trois pavés de meme densité, aucun point
d'entrée pour l'oeil, et une section censée porter le positionnement qui se
lisait comme une grille de fonctionnalites.
Le surtitre dit A QUI, le titre porte la PROMESSE, le texte l'explique. En
diagonale on ne lit que les trois promesses, et elles suffisent.
PAS DE LISERE COLORE en haut des cartes : c'est le reflexe le plus vu, et
il pesait autant sur les trois registres alors qu'ils ne se valent pas. La
couleur passe sur le SURTITRE, ou elle ne fait que ranger. */
/* DEUX CARTES, et donc pas la grille a trois. Elles portent l'argument
central de la page : a deux, chacune tient une colonne large ou la
promesse passe sur une seule ligne, ce qui est exactement ce qu'on veut
qu'on lise en diagonale. */
.lv-apports {
display: grid;
gap: 20px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
.lv-apports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lv2-apport {
display: flex;
flex-direction: column;
gap: 8px;
}
.lv2-apport__pour {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(var(--white-rgb), 0.45);
}
.lv2-apport--client .lv2-apport__pour { color: rgba(var(--portal-accent-rgb), 0.92); }
.lv2-apport--vous .lv2-apport__pour { color: rgba(var(--portal-gold-rgb), 0.92); }
/* La promesse : c'est la seule ligne que beaucoup liront de cette section,
donc elle a la taille d'un sous-titre et non celle d'un intitule de carte. */
.lv2-apport__titre {
margin: 2px 0 0;
font-size: clamp(17px, 1.25vw, 20px);
font-weight: 650;
line-height: 1.3;
text-wrap: balance;
color: rgb(var(--white-rgb));
}
.lv2-apport__texte {
margin: 0;
font-size: 14.5px;
line-height: 1.62;
color: rgba(var(--white-rgb), 0.72);
}
/* ===== La demonstration : six pages du test, en miniature =====
L'autre demonstration montre le COMMENT (des images, une reponse en
couleur) ; celle-ci montre ce qu'on OBTIENT. Six ecrans reels defilent,
dessines a l'echelle d'un tiers.
LES SIX SONT SUPERPOSEES, pas remplacees. Changer la source d'une image
ferait clignoter le cadre a chaque rotation, le temps que la suivante
arrive du reseau. */
.lv-pages {
display: flex;
flex-direction: column;
gap: 12px;
}
/* La boite porte la bordure et l'ombre ; elle contient le dessin ET la
palette, exactement comme la demonstration d'images. Sans elle, la palette
flotterait sous un cadre ferme au lieu d'y etre collee.
MEME ANNEAU CYAN que la demonstration d'images, et pour la meme raison :
les deux occupent la meme place dans l'ouverture, une branche chacune. Un
cadre nu a cote d'un cadre cerne aurait fait passer l'un pour un brouillon.
L'ombre portee est ELARGIE de l'epaisseur de l'anneau (le quatrieme
nombre). Sans cela elle part du bord du cadre, donc de dessous l'anneau,
et celui-ci semble flotter devant une ombre qui n'est pas la sienne. */
.lv-pages__boite {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(var(--white-rgb), 0.14);
background: rgba(var(--surface-sombre-rgb), 0.55);
box-shadow:
0 0 0 4px rgba(var(--portal-accent-rgb), 0.10),
0 24px 60px 4px rgba(var(--black-rgb), 0.34);
}
.lv-pages__cadre {
position: relative;
/* Le rapport du dessin. Sans lui, le cadre nait plat puis saute a sa
hauteur quand la premiere image arrive, et toute la colonne bouge. */
aspect-ratio: 480 / 300;
}
.lv-pages__vue {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
/* UN FONDU CROISE, aux memes 700 ms que la demonstration d'images. Les
deux se repondent dans l'ouverture : deux rythmes differents auraient
trahi deux composants au lieu de deux vues d'un meme objet.
Pas de glissement : les six pages ont le meme chrome, et le faire
defiler de gauche a droite donne le tournis sans rien montrer de plus. */
transition: opacity .7s ease;
}
.lv-pages__vue.est-vue { opacity: 1; }
/* Le nom de la page, sous la boite. Il etait sur une barre avec les points ;
la palette ayant rejoint la boite, il reste seul et prend toute la ligne. */
.lv-pages__nom {
font-size: 13px;
font-weight: 600;
color: rgba(var(--white-rgb), 0.86);
}
/* La palette, reprise a l'identique de la demonstration d'images : meme
grille de six, meme hauteur, meme fond sombre sous un filet. Les deux
demonstrations se lisent ainsi comme deux vues d'un meme objet. */
.lv-pages__palette {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
padding: 8px;
background: rgba(var(--black-rgb), 0.42);
border-top: 1px solid rgba(var(--white-rgb), 0.10);
}
/* TOUTES CYAN, ET PAS SIX COULEURS. Sous la demonstration d'images, chaque
pastille EST son canal colore : la couleur y porte l'information. Ici les
six ne designent que des pages, et six teintes leur inventeraient un sens
qu'elles n'ont pas.
Elles se distinguent donc par l'intensite seule. C'est suffisant parce
qu'une seule est vive a la fois, et l'anneau blanc de la pastille active
fait le reste. */
/* Dix pixels et non vingt : la palette de la demonstration d'images porte
six COULEURS, qui ont besoin de surface pour se lire. Ici les six touches
sont identiques et ne servent qu'a se reperer parmi six pages ; a la meme
epaisseur, la bande pesait autant que ce qu'elle commande. */
.lv-pages__canal {
height: 10px;
padding: 0;
border-radius: 8px;
border: 1px solid rgba(var(--white-rgb), 0.16);
background: linear-gradient(135deg, #0f766e, rgb(var(--portal-accent-rgb)));
box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.14);
opacity: .34;
cursor: pointer;
transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease;
}
.lv-pages__canal:hover { opacity: .68; }
/* PAS D'ANNEAU BLANC sur la touche active. Sous la demonstration d'images il
sert a distinguer une couleur parmi six ; ici les six sont cyan, et
l'ecart d'intensite suffit deja. L'anneau n'ajoutait qu'une bague claire
au milieu d'une bande sombre. */
.lv-pages__canal.est-vue {
opacity: 1;
transform: scale(1.06);
box-shadow:
inset 0 1px 0 rgba(var(--white-rgb), 0.22),
0 0 14px rgba(var(--portal-accent-rgb), 0.5);
}
.lv-pages__canal:focus-visible {
outline: 2px solid rgba(var(--white-rgb), 0.9);
outline-offset: 2px;
}
.lv-pages__note {
margin: 0;
font-size: 11.5px;
line-height: 1.5;
color: rgba(var(--white-rgb), 0.42);
}
@media (prefers-reduced-motion: reduce) {
.lv-pages__vue { transition: none; }
.lv-pages__canal { transition: none; }
}
/* ===== La neuro-regulation, montree =====
LE RYTHME EST CELUI DU PRODUIT, pas un effet. L'alternance noir/couleur
entre 1 et 4 Hz EST le geste de regulation ; ici elle est posee a 0,5 Hz,
soit un battement toutes les deux secondes. C'est la borne basse, adoucie
par rapport a la seance : sur une page publique, personne n'a depose la
declaration de contre-indications que le produit exige avant un programme,
et l'epilepsie en fait partie. On montre le geste, on ne le pratique pas.
DEUX ANIMATIONS SUR LE MEME ELEMENT, et c'est ce qui rend la chose lisible
a la lecture. `battement` tient le rythme, `teinte` tient la couleur, et
elles ne se melangent jamais : la teinte change toutes les huit secondes,
soit exactement quatre battements, donc TOUJOURS pendant un noir. Le
changement de couleur ne se voit pas, on ne voit que la couleur suivante
arriver au battement d'apres.
Ecrites en une seule animation de vingt-quatre etapes, il aurait fallu
recompter tout le tableau a chaque reglage du rythme. */
.lv-neuro {
display: flex;
align-items: center;
justify-content: center;
}
/* 480 et non 340 : la boite du dessin a grandi pour laisser vivre le halo,
mais le portable, lui, n'a pas change de taille. Sans cette compensation il
aurait retreci d'un tiers a la premiere correction du flou.
Les marges negatives reprennent la place que le halo occupe autour de
l'objet : elle est transparente, et sans elles la section se serait ouverte
de soixante-dix pixels de vide de chaque cote. */
.lv-neuro svg {
width: 100%;
max-width: 480px;
height: auto;
margin: -46px -44px;
}
/* Le halo et la dalle partagent leurs deux animations : c'est la meme
lumiere, l'une dans l'ecran et l'autre autour. */
.lv-neuro__dalle,
.lv-neuro__halo {
animation:
lv-neuro-battement 2s ease-in-out infinite,
lv-neuro-teinte 24s linear infinite;
}
.lv-neuro__halo { opacity: 0; }
/* LE CHASSIS EST NEUTRE. Il etait dore, par report de l'icone dont ce trace
est parti. L'or est la couleur du bouton d'action sur cette page : un objet
qui la porte en entier en prend le poids sans le meriter. Et un cadre dore
se bat avec le vert et le rouge qu'il encadre, alors que sa fonction est de
les laisser parler.
Legerement chaud plutot que gris pur : c'est ce qui le fait lire comme de
l'aluminium et non comme un fil de fer. */
.lv-neuro__coque,
.lv-neuro__socle {
stroke: rgba(214, 224, 238, 0.40);
stroke-width: 2.2;
stroke-linejoin: round;
}
.lv-neuro__coque { fill: #070C15; }
.lv-neuro__socle { fill: #0B1626; }
.lv-neuro__camera { fill: rgba(214, 224, 238, 0.34); }
.lv-neuro__pave {
fill: none;
stroke: rgba(214, 224, 238, 0.22);
stroke-width: 1.4;
stroke-linejoin: round;
}
/* Les touches ne s'allument pas : elles sont dans l'ombre de l'ecran, et un
clavier qui battrait avec la dalle ferait un objet clignotant au lieu d'un
ecran allume dans une piece sombre. */
.lv-neuro__touches rect {
fill: rgba(214, 224, 238, 0.07);
stroke: rgba(214, 224, 238, 0.18);
stroke-width: 0.8;
}
@keyframes lv-neuro-battement {
/* Une montee et une descente adoucies, pas un creneau. Le geste garde sa
frequence mais perd son arete : c'est la seule liberte prise ici. */
0% { opacity: 0; }
22% { opacity: 1; }
50% { opacity: 1; }
72% { opacity: 0; }
100% { opacity: 0; }
}
/* Le halo suit le meme rythme, plus faible : une lumiere d'ecran n'eclaire
pas la piece autant qu'elle eclaire le visage. */
.lv-neuro__halo { animation-name: lv-neuro-halo, lv-neuro-teinte; }
@keyframes lv-neuro-halo {
0% { opacity: 0; }
22% { opacity: 0.34; }
50% { opacity: 0.34; }
72% { opacity: 0; }
100% { opacity: 0; }
}
/* Quatre battements de bleu, quatre de vert, quatre de rouge, puis on
recommence. Les bornes sont doublees a un centieme de pour cent l'une de
l'autre : c'est ce qui fait un changement net sans passer par un degrade
qui melangerait les trois. */
@keyframes lv-neuro-teinte {
0%, 33.32% { fill: #2D7DF6; }
33.33%, 66.65% { fill: #34C77B; }
66.66%, 100% { fill: #E2453D; }
}
/* Un battement lumineux ne se force a personne. Sans mouvement, la dalle
reste allumee sur sa premiere couleur : l'objet se lit toujours comme un
ecran, il ne bat simplement plus. */
@media (prefers-reduced-motion: reduce) {
.lv-neuro__dalle {
animation: none;
fill: #2D7DF6;
opacity: 0.9;
}
.lv-neuro__halo {
animation: none;
fill: #2D7DF6;
opacity: 0.28;
}
}