/* ============================================================
Les polices sont servies par le site, pas par Google.
Trois raisons, dans l'ordre : la page s'affiche dans sa vraie
typographie meme si Google est bloque — reseau d'entreprise,
bloqueur, pays filtrant — alors qu'avant elle basculait sur une
grasse de secours bien plus large, ce qui cassait les retours a
la ligne des titres. Ensuite, un aller-retour reseau de moins.
Enfin, aucune requete vers un tiers depuis la page d'un produit
qui promet que rien ne sort de la machine.
font-display:swap : le texte s'affiche tout de suite dans la
police de secours et bascule des qu'Anton arrive. Mieux vaut un
titre lisible tout de suite qu'une page blanche.
============================================================ */
/* ------------------------------------------------------------
font-display: block, et non swap — pour ce titre precisement.
Mesure de la ligne la plus large du titre, « AVANT QUE TU », en
multiples du corps :
Anton 5,01 -> tient dans 20 % de la colonne
Arial Narrow 7,13 -> il lui faut 27 %
Impact 7,13 -> 27 %
sans-serif 7,39 -> 28 %
Le titre est dimensionne sur Anton. Avec swap, le navigateur
affiche d'abord la police de secours — 48 % trop large — et le
titre se casse en « AVANT QUE » / « TU » sous les yeux du
visiteur, avant de se recoller quand Anton arrive. C'est ce
qu'on voyait, et ca ne se voit pas en test parce qu'en local la
police est deja la.
block : le texte reste invisible le temps que la police arrive,
puis s'affiche juste. Le fichier fait 30 Ko et vient du meme
domaine — l'attente se compte en dizaines de millisecondes. Mieux
vaut ca qu'un titre qui se casse puis se repare.
------------------------------------------------------------ */
@font-face{font-family:Anton;src:url('/fonts/anton-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
/* Et si Anton ne charge jamais — reseau coupe, fichier manquant —
le secours prend ses metriques : size-adjust ramene la police
systeme a la largeur d'Anton (5,01 / 7,39 = 67,8 %), pour que le
titre garde exactement la meme mise en page. */
@font-face{font-family:'Anton secours';
src:local('Arial Narrow'), local('Impact'), local('Haettenschweiler'), local('Arial Bold'), local('Arial');
size-adjust:67.8%; ascent-override:105%; descent-override:22%; line-gap-override:0%}
@font-face{font-family:'Space Grotesk';src:url('/fonts/grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Interlignes en Anton — mesure, pas gout.
A 100 px, l'encre d'un E accent monte a 111 px au-dessus de la ligne de
base quand un A plafonne a 86, et une virgule descend a 12. Il faut donc
1,23 d'interligne pour qu'un accent ne touche pas la virgule du dessus.
D'ou 1,24 sur tous les titres : c'est le minimum mesure, pas un reglage
a l'oeil. Le francais coute cet air-la ; le resserrer casse les accents. */
:root{
/* --ink3 portait les etiquettes en petites capitales — « SOURCE »,
« DETECTE », « LATENCE », les legendes, le pied de page. A
#8C9098 il donnait 2,79:1 sur le papier clair et 2,52:1 sur le
papier fonce des sections alternees : sous le seuil de
lisibilite dans les deux cas, et c'est exactement ce qui rendait
ces mots invisibles. #62656C tient 5,08:1 et 4,59:1 — au-dessus
du minimum sur les deux fonds, pas seulement sur le plus facile. */
--paper:#F2EFE6; --paper2:#E8E4D8; --ink:#141518; --ink2:#4F535A; --ink3:#62656C;
--rule:#D5D0C2; --blue:#1F35D8; --blueLit:#4459FF; --red:#E8402A; --white:#fff;
/* Sur les blocs inverses — manifeste, offre mise en avant, pied
de page — le fond est var(--ink) et le texte var(--paper). Ces
deux tons intermediaires suivent donc le fond du bloc, pas
celui de la page : en mode nuit le bloc devient clair, et un
gris clair y serait invisible. */
/* #6B6E75 ne donnait que 3,58:1 sur le pied de page sombre : les
mentions du bas etaient la sans etre lisibles. Aucun gris ne
tient sur les deux fonds a la fois — le pied s'inverse avec le
theme — donc chaque theme a le sien. */
--sur:#A5A8AE; --surFaible:#7C8088; --surFilet:#3A3D44;
--d:Anton,'Anton secours','Arial Narrow',Impact,sans-serif;
--b:'Space Grotesk',system-ui,-apple-system,sans-serif;
--m:'Space Mono',ui-monospace,Menlo,monospace;
}
/* ============================================================
Mode nuit.
Le site est sur papier creme, et c'est son identite. Mais on le
consulte aussi a 2 h du matin depuis une cabine, ou au lit — et
la, une page creme plein ecran fait mal. Le theme ne redefinit
que les variables : chaque regle de la feuille suit toute seule.
Les valeurs sont verifiees au ratio de contraste, pas choisies
a l'oeil. Le tertiaire monte a #7C7F86 (4,63:1) et le bleu vif
a #5C70FF (4,61:1) : sous ces valeurs, les legendes en petites
capitales devenaient illisibles sur fond sombre.
Trois etats : clair, sombre, ou celui du systeme quand le
visiteur n'a rien choisi.
============================================================ */
:root[data-theme="nuit"]{
--paper:#121316; --paper2:#191B1F; --ink:#EFEAE0; --ink2:#A9ACB3; --ink3:#7C7F86;
--rule:#2A2C33; --blue:#5C70FF; --blueLit:#7C8CFF; --red:#FF5A42; --white:#1D1F24;
--sur:#4A4E56; --surFaible:#5E6168; --surFilet:#C6C0B0;
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="jour"]){
--paper:#121316; --paper2:#191B1F; --ink:#EFEAE0; --ink2:#A9ACB3; --ink3:#7C7F86;
--rule:#2A2C33; --blue:#5C70FF; --blueLit:#7C8CFF; --red:#FF5A42; --white:#1D1F24;
--sur:#4A4E56; --surFaible:#5E6168; --surFilet:#C6C0B0;
}
}
/* Le bouton de bascule, dans la barre du haut. */
.themeBtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--rule);border-radius:2px;background:transparent;color:var(--ink2);
font-size:14px;line-height:1;cursor:pointer;flex:none}
.themeBtn:hover{color:var(--ink);border-color:var(--ink)}
*{box-sizing:border-box}
/* .btn pose un display:inline-flex, qui l'emporte sur le
display:none implicite de [hidden] : sans cette regle, les deux
boutons d'achat — mensuel et annuel — s'affichent l'un sur
l'autre. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;color-scheme:light dark}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3.4vw,44px)}
.dsp{font-family:var(--d);font-weight:400;text-transform:uppercase;line-height:1.24;letter-spacing:.02em}
/* Une etiquette en capitales espacees se lit moins bien qu'un texte
courant au meme corps : les capitales n'ont pas de hampes ni de
jambages, l'oeil n'a plus de silhouette a reconnaitre, et
l'espacement casse le mot en lettres separees. Ces etiquettes
passent donc de 10 a 11,5 px et l'espacement de 0,2 a 0,16em. */
.lbl{font-family:var(--m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
/* ------------------------------------------------------------
Le nom, dans le corps du texte.
« Liaison » est un mot francais courant — l'app s'appelle comme
ca exprès. L'inconvenient est qu'au fil d'un paragraphe, le nom
du produit se confond avec le nom commun. On le marque donc,
mais sans crier : pas de capitales, pas de couleur pleine. Le
bleu du drapeau, le gras, et un leger espacement — assez pour
que l'oeil l'accroche en balayant la page, pas assez pour
hacher la lecture.
------------------------------------------------------------ */
.lsn{font-weight:700;color:var(--blue);letter-spacing:.012em;font-style:normal}
/* sur les fonds sombres, le bleu profond disparait : on prend le vif */
.manif .lsn,.cta .lsn,footer .lsn,.sig2 .lsn{color:var(--blueLit)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}.rv[data-d="3"]{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- barre ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:18px;height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;user-select:none}
.mark svg{width:22px;height:22px;display:block}
.mark span{font-family:var(--m);font-weight:700;font-size:13px;letter-spacing:.3em}
.nav{display:none;gap:20px;margin-left:16px}
@media(min-width:940px){.nav{display:flex}}
.nav a{font-family:var(--m);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
.nav a:hover{color:var(--blue)}
.btn{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;
border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;display:inline-block;cursor:pointer;transition:.14s}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.g{background:transparent;color:var(--ink)}
.btn.g:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.r{background:var(--red);border-color:var(--red);color:#fff}
.btn.r:hover{background:var(--ink);border-color:var(--ink)}
.top .btn{margin-left:auto;padding:9px 15px}
/* ---------- drapeau ---------- */
.flag{display:inline-flex;height:11px;width:22px;border:1px solid var(--ink);vertical-align:-1px}
.flag i{flex:1}.flag i:nth-child(1){background:var(--blue)}.flag i:nth-child(2){background:#fff}.flag i:nth-child(3){background:var(--red)}
/* ---------- hero ---------- */
.hero{padding-block:clamp(30px,4.6vw,60px) clamp(34px,5vw,68px);border-bottom:1.5px solid var(--ink)}
.hcols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.4vw,44px);align-items:start}
@media(min-width:1000px){.hcols{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
/* Interlettrage — mesure au pixel, comme l'interligne.
A 50 px (le titre sur telephone) le -0,012em qu'on avait donnait
zero pixel d'encre entre « T » et « A » : les deux lettres se
touchaient. A +0,015em, la paire la plus serree garde 2 px a
toutes les tailles, du telephone au grand ecran. */
/* ------------------------------------------------------------
La taille du titre : liee a SA colonne, pas a la fenetre.
Le defaut, mesure : en dessous de 270 px de large — ce qui
arrive des qu'on zoome le navigateur, pas seulement sur un
petit ecran — le plancher de 46 px cessait de suivre pendant
que la colonne, elle, continuait de retrecir. « AVANT QUE TU »
ne tenait plus et se cassait en « AVANT » / « QUE TU », « LE
CHERCHES. » en « LE » / « CHERCHES. ». Quatre lignes voulues,
sept obtenues, et une colonne qui parait vide parce qu'elle est
pleine de blancs.
La cause est que vw mesure la FENETRE alors que le titre vit
dans une colonne qui ne fait pas toute la fenetre. On mesure
donc la colonne elle-meme (cqw).
Le coefficient n'est pas choisi, il est mesure : « avant que
tu » — la ligne la plus large — occupe 5,19 fois le corps en
Anton. Pour qu'elle tienne, le corps doit valoir au plus
colonne / 5,19, soit 19,2 % de la colonne. On prend 18,5 %,
la marge servant aux fontes de secours, plus larges qu'Anton.
------------------------------------------------------------ */
.hcols > div:first-child{container-type:inline-size}
/* ------------------------------------------------------------
L'interligne.
1,24 sur une Anton de 110 px laissait 26 px de blanc entre
chaque ligne, pour un titre de 546 px de haut : d'ou
l'impression de vide. Anton est une capitale haute et etroite,
elle est dessinee pour etre serree. A 0,98 les lignes se
touchent presque, le bloc devient une masse, et on recupere
plus de cent pixels de hauteur.
------------------------------------------------------------ */
/* ------------------------------------------------------------
L'interligne, et l'accent qui le commandait.
Mesure de l'encre reelle d'Anton a 110 px : une capitale monte
96 px au-dessus de la ligne de base. Sauf « D'APRES, », dont le
E accent grave monte a 123 px — vingt-sept pixels de plus, pour
un seul signe.
Comme line-height est uniforme, cet accent imposait son ecart a
TOUTES les lignes : il fallait 1,24 pour lui, donc 1,24 partout,
donc 27 px de blanc inutile sous chacune des trois autres. C'est
exactement l'impression de vide — le titre n'etait pas trop
petit, il etait trop espace, a cause d'un accent.
On separe donc les deux : un interligne serre pour les lignes
ordinaires (1,06 : 13 px de descente + 96 px de montee + 8 px de
marge), et un supplement pose UNIQUEMENT sur la ligne accentuee.
------------------------------------------------------------ */
h1{margin:0;font-family:var(--d);line-height:1.06;
text-transform:uppercase;letter-spacing:.015em;
/* repli pour les navigateurs sans unites de conteneur */
font-size:clamp(40px,7.9vw,110px);
font-size:clamp(34px,18.5cqw,110px)}
/* Une ligne du titre est une ligne : elle ne se coupe pas. Les
disaient ou couper, mais rien n'interdisait au navigateur de
couper AILLEURS quand ca ne tenait pas — d'ou les « TU » et
« LE » orphelins. Avec nowrap, c'est structurellement impossible :
soit la ligne tient, soit elle deborde visiblement et on le voit
tout de suite au lieu de le decouvrir sur une capture. */
h1 .l{display:block;white-space:nowrap}
/* la place de l'accent grave, et rien de plus */
h1 .acc{margin-top:.13em}
h1 .b{color:var(--blue)}
h1 .r{color:var(--red)}
.tape{display:inline-block;font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
background:var(--red);color:#fff;padding:6px 11px;transform:rotate(-1.6deg);margin-bottom:16px}
.lede{margin:24px 0 0;max-width:46ch;font-size:clamp(15.5px,1.25vw,18px);color:var(--ink2)}
.acts{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:26px}
.fine{font-family:var(--m);font-size:11px;color:var(--ink3)}
.banner{border:1.5px solid var(--red);padding:13px 16px;margin-top:20px;display:none;font-size:14px}
.banner.on{display:block}.banner b{color:var(--red)}
.hmeta{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid var(--rule)}
.hmeta div{min-width:96px}
.hmeta .k{font-family:var(--d);font-size:26px;line-height:1}
.hmeta .v{font-family:var(--m);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-top:5px}
/* ---------- cabine (maquette) ---------- */
.booth{background:#101114;border:1.5px solid var(--ink);color:#EFEAE0;overflow:hidden;display:flex;flex-direction:column}
.bbar{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid #26282E}
.bdot{width:8px;height:8px;border-radius:50%;background:#2A303A}
.btitle{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#63666D;margin-left:8px}
.decks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#26282E}
.deck{background:#101114;padding:13px 14px}
.dname{font-family:var(--m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#63666D}
.dtitle{font-family:var(--d);font-size:17px;text-transform:uppercase;margin-top:6px;line-height:1.12;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dartist{font-family:var(--m);font-size:9.5px;color:#63666D;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmeta{display:flex;gap:6px;margin-top:9px}
.chip2{font-family:var(--m);font-size:9.5px;padding:3px 6px;border:1px solid #33363E;color:#9A9DA4}
.chip2.on{border-color:var(--blueLit);color:#fff;background:var(--blueLit)}
.wave{height:26px;margin-top:10px;display:flex;align-items:flex-end;gap:2px;overflow:hidden}
.wave i{flex:1;background:#242A33;min-height:3px;transition:height .3s ease}
.deck.live .wave i{background:#3B4453}
.deck.live .wave i.hot{background:var(--blueLit)}
.bstrip{padding:12px 14px;border-top:1px solid #26282E}
.sbar{height:15px;position:relative;background:#1D1F24;overflow:hidden}
.sbar .body{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#243056,#1B2440)}
.sbar .brk{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,#1D1F24 0 3px,#20232A 3px 6px)}
.sbar .mk{position:absolute;top:0;bottom:0;width:2px}
.sbar .mk.s{background:var(--blueLit)}.sbar .mk.w{background:#EFEAE0}.sbar .mk.o{background:#FF5A42}
.slbl{display:flex;justify-content:space-between;font-family:var(--m);font-size:8.5px;letter-spacing:.1em;
text-transform:uppercase;color:#63666D;margin-top:5px}
.wdg{border-top:1px solid #26282E;padding:12px 14px 14px}
.wtop{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid #26282E;margin-bottom:10px}
.wtop svg{width:15px;height:15px;flex:none}
.wtop .n2{font-family:var(--m);font-weight:700;font-size:9px;letter-spacing:.28em;color:#9A9DA4}
.wtop .live{margin-left:auto;font-family:var(--m);font-size:9px;letter-spacing:.12em;color:var(--blueLit);display:flex;align-items:center;gap:5px}
.wtop .live b{width:5px;height:5px;border-radius:50%;background:var(--blueLit);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.wrow{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid #1D1F24;
opacity:0;transform:translateX(8px);animation:pop .42s cubic-bezier(.16,1,.3,1) forwards}
.wrow:first-of-type{border-top:0}
@keyframes pop{to{opacity:1;transform:none}}
.wsc{font-family:var(--d);font-size:22px;line-height:.85;color:#63666D;text-align:right}
.wrow:first-of-type .wsc{color:var(--blueLit)}
.wtxt b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtxt small{display:block;font-family:var(--m);font-size:9px;color:#63666D;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wplan{display:flex;gap:10px;margin-top:6px;padding-top:6px;border-top:1px solid #1D1F24;
font-family:var(--m);font-size:9px;white-space:nowrap;overflow:hidden}
.wplan em{font-style:normal;color:#63666D;letter-spacing:.1em;text-transform:uppercase;font-size:8.5px}
.wplan .a{color:var(--blueLit)}.wplan .c{color:#FF5A42}
.bcap{font-family:var(--m);font-size:10px;color:var(--ink3);text-align:center;margin-top:12px}
/* ---------- bande manifeste ---------- */
.manif{background:var(--ink);color:var(--paper);padding-block:clamp(40px,5.4vw,74px)}
.manif .g{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media(min-width:900px){.manif .g{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}}
.manif h2{margin:0;font-family:var(--d);font-size:clamp(27px,4.1vw,52px);line-height:1.24;letter-spacing:.02em;text-transform:uppercase}
.manif h2 em{font-style:normal;color:var(--red)}
.manif p{color:var(--sur);margin:0 0 14px;font-size:15.5px;max-width:46ch}
.manif p:last-child{margin-bottom:0}
.manif .lbl{color:var(--surFaible)}
/* ---------- sections ---------- */
section{padding-block:clamp(40px,5.4vw,80px)}
.shead{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:clamp(24px,3.4vw,42px)}
@media(min-width:860px){.shead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:end}}
.shead h2{margin:0;font-family:var(--d);font-size:clamp(29px,4.6vw,58px);line-height:1.24;letter-spacing:.02em;text-transform:uppercase;max-width:15ch}
.shead p{margin:0;color:var(--ink2);max-width:48ch;font-size:15.5px}
.rule{height:1.5px;background:var(--ink);margin-bottom:24px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
@media(max-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cols{grid-template-columns:minmax(0,1fr)}}
.col{padding:22px 20px 26px;border-right:1px solid var(--rule)}
.col:last-child{border-right:0}
@media(max-width:900px){.col:nth-child(2n){border-right:0}}
/* Ces etiquettes ne decorent pas : « A passer » et « A eviter »
sont ce qui distingue les deux colonnes. A 10 px en capitales
tres espacees, on les survolait. Elles reviennent a 12,5 px,
avec un filet sous elles pour les tenir a la colonne. */
.col .no{display:inline-block;font-family:var(--m);font-weight:700;font-size:13px;
letter-spacing:.12em;color:var(--red);padding-bottom:5px;border-bottom:2px solid var(--red);margin-bottom:4px}
.col h3{margin:12px 0 0;font-family:var(--d);font-size:18px;text-transform:uppercase;line-height:1.24}
.col p{margin:9px 0 0;color:var(--ink2);font-size:14px;line-height:1.6}
/* ---------- points de mix ---------- */
.mix{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media(min-width:900px){.mix{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}}
.timeline{border:1.5px solid var(--ink);padding:20px 20px 24px;background:var(--white)}
.tl{position:relative;height:52px;background:var(--paper2);margin-top:14px}
.tl .zone{position:absolute;top:0;bottom:0}
.tl .zone.corps{background:var(--blue);opacity:.16}
.tl .zone.brk{background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(20,21,24,.14) 4px 8px)}
.tl .cut{position:absolute;top:-8px;bottom:-8px;width:2px}
.tl .cut.a{background:var(--blue)}.tl .cut.b{background:var(--ink)}.tl .cut.c{background:var(--red)}
.tl .cut span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-family:var(--m);
font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-align:center}
/* Les trois reperes sont proches par nature : celui du milieu passe
sous la barre, sinon les etiquettes se chevauchent. */
.tl .cut.b span{top:auto;bottom:-34px}
.tl .cut.a span{color:var(--blue)}.tl .cut.b span{color:var(--ink)}.tl .cut.c span{color:var(--red)}
.tl .cut span b{display:block;font-weight:700;font-size:11px;text-align:center;letter-spacing:0}
.tlfoot{display:flex;justify-content:space-between;font-family:var(--m);font-size:9.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:10px;font-size:11px}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;padding:15px 0 15px 44px;border-top:1px solid var(--rule);position:relative;color:var(--ink2);font-size:14.5px;line-height:1.6}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;
font-family:var(--m);font-size:10px;letter-spacing:.14em;color:var(--red)}
.steps b{color:var(--ink)}
/* ---------- signaux ---------- */
.sig2{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:900px){.sig2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) 210px;column-gap:30px}}
.sigwords{padding-right:24px}
.sigwords h3{margin:0;font-family:var(--d);font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;line-height:1.24}
.sigwords p{color:var(--ink2);font-size:14.5px;margin:12px 0 0}
.sigrows{border-top:1px solid var(--rule)}
.sigrow{display:grid;grid-template-columns:104px minmax(0,1fr) 34px;gap:14px;align-items:center;
padding:13px 0;border-bottom:1px solid var(--rule)}
.sigrow .nm2{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.track{height:4px;background:var(--paper2)}
.track i{display:block;height:100%;width:0;background:var(--ink);transition:width 1s cubic-bezier(.16,1,.3,1)}
.sigrow:nth-child(1) .track i{background:var(--blue)}
.sigrow:nth-child(2) .track i{background:var(--blue)}
.sigrow:nth-child(6) .track i{background:var(--red)}
.sigval{font-family:var(--m);font-size:11px;text-align:right}
.aside{background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px;min-height:210px}
.aside svg{width:56px;height:56px}
.aside p{margin:0;font-family:var(--d);font-size:19px;text-transform:uppercase;line-height:1.24}
/* ---------- contexte ---------- */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
@media(max-width:520px){.picker{grid-template-columns:1fr}}
select{width:100%;padding:13px 13px;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);
font-family:var(--b);font-size:15px;appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:focus{outline:2px solid var(--blue);outline-offset:1px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;min-height:32px}
.tag{font-family:var(--m);font-size:11px;padding:6px 10px;border:1.5px solid var(--blue);color:var(--blue);
animation:pop .35s cubic-bezier(.16,1,.3,1) both}
.tag.no{border-color:var(--rule);color:var(--ink3);text-decoration:line-through}
/* ---------- courbe d'energie ----------
Une seule serie : pas de legende, l'intitule suffit. Aire discrete,
trait de 2 px, grille en retrait, et le seul point etiquete est le pic. */
.arcwrap{margin-top:14px}
.arc{display:block;width:100%;height:auto;overflow:visible}
.arc .grid{stroke:var(--ink);stroke-width:1;opacity:.13}
.arc .axis{font-family:var(--m);font-size:7.5px;fill:var(--ink3);letter-spacing:.06em}
.arc .fill{fill:var(--blue);opacity:.13}
.arc .line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.arc .dot{fill:var(--blue)}
.arc .peak{fill:var(--red);stroke:var(--paper2);stroke-width:2}
.arc .peaklbl{font-family:var(--m);font-size:7.5px;fill:var(--red);letter-spacing:.14em;text-anchor:middle}
.arc .hit{fill:transparent;cursor:crosshair}
.arc .hit:hover ~ .cursor,.arc .band.on .cursor{opacity:1}
.arc .cursor{stroke:var(--ink);stroke-width:1;opacity:0;transition:opacity .12s}
.arcread{font-family:var(--m);font-size:9.5px;color:var(--ink2);height:14px;margin-top:6px;letter-spacing:.06em}
.arccap{color:var(--ink2);font-size:13.5px;margin:10px 0 0;line-height:1.55}
.moments{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.moments li{font-size:14px;color:var(--ink2);padding-left:14px;position:relative;line-height:1.55}
.moments li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--red)}
.moments b{color:var(--ink)}
/* ---------- la salle demande ---------- */
/* La colonne de gauche tenait quatre colonnes de texte dans la
place d'une : chacune faisait 180 px, le texte y tombait en
drapeau sur cinq mots par ligne, et l'ensemble s'arretait bien
avant le QR et le telephone d'a cote — d'ou le grand vide en bas
a gauche. En deux colonnes sur deux rangees, chaque colonne
double de largeur, le texte respire, et les deux cotes de la
section se terminent a peu pres ensemble. */
/* ------------------------------------------------------------
L'air entre les colonnes et les cadres.
Mesure sur grand ecran : 2 px entre le bas des filets verticaux
des quatre colonnes et le haut du cadre du QR. Deux pixels. Le
cadre semblait donc pose SUR les filets, entasse, alors que la
page a de la place a revendre juste au-dessus.
La cause : .salle n'avait aucune marge haute, et sa colonne de
droite — le QR et le telephone — commence tout en haut de la
grille. En dessous de 1000 px la section s'empile et le probleme
disparait de lui-meme, ce qui explique qu'il soit passe.
On donne donc a la section la meme respiration que les autres
blocs de la page, mesuree sur le meme rapport.
------------------------------------------------------------ */
.salle{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;
margin-top:clamp(38px,4.4vw,72px)}
/* Entre 900 et 1150 px, deux colonnes laissaient le meme vide en
plus petit. On empile jusqu'a 1150, ou la mise cote a cote
devient possible : une seule bascule, pas deux mises en page
bancales. */
/* Empiles, le QR et le telephone font 890 px de haut face a 500 px
de texte : un demi-ecran de vide sous la colonne de gauche. Des
qu'il y a la place, on les met cote a cote — la hauteur est
divisee par deux et les deux cotes se terminent ensemble. */
@media(min-width:1150px){
.salle{grid-template-columns:minmax(0,1fr) 600px;gap:clamp(28px,4vw,56px);align-items:start}
.salle>div:last-child{display:grid;grid-template-columns:280px 280px;gap:20px;align-items:start}
.salle .phone{margin-top:0!important}
}
.salle .sdit{font-size:clamp(19px,2vw,25px);line-height:1.45;margin:14px 0 0;max-width:30ch;font-weight:500}
.salle .sdit2{color:var(--ink2);font-size:15.5px;line-height:1.65;margin:14px 0 0;max-width:46ch}
/* Trois chiffres, la ou la colonne s'arretait dans le vide. Ils
ne repetent pas le texte : ils le resument pour qui ne lit que
les gros caracteres. */
.salle .schif{display:flex;gap:clamp(20px,3vw,40px);margin-top:26px;padding-top:20px;border-top:1.5px solid var(--ink);flex-wrap:wrap}
.salle .schif b{display:block;font-family:var(--d);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:.01em}
.salle .schif span{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:7px}
.qrcard{border:1.5px solid var(--ink);background:var(--white);padding:22px;text-align:center}
.qrcard img{width:100%;max-width:200px;height:auto;display:block;margin:0 auto;image-rendering:pixelated}
.qrcard .n{font-family:var(--d);font-size:20px;text-transform:uppercase;line-height:1.24;margin-top:16px}
.qrcard .s{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.qrcard .share{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.qrcard .share span{font-family:var(--m);font-size:9.5px;letter-spacing:.08em;padding:5px 8px;border:1px solid var(--rule);color:var(--ink2)}
.phone{background:#101114;border:1.5px solid var(--ink);border-radius:22px;padding:16px 14px 20px;color:#EFEAE0;max-width:280px;margin:0 auto}
.phone .ph{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.phone .ph svg{width:15px;height:15px}
.phone .ph span{font-family:var(--m);font-size:8.5px;letter-spacing:.3em;color:#63666D}
.phone h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.phone .sub{color:#9A9DA4;font-size:11.5px;margin:4px 0 12px}
.phone .inp{border:1.5px solid #33363E;background:#17181C;border-radius:3px;padding:10px 11px;
font-size:12px;color:#EFEAE0;font-family:var(--m)}
.phone .inp i{font-style:normal;color:#63666D}
.phone .lbl2{font-family:var(--m);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#63666D;margin:14px 0 7px;display:block}
.phone .q{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid #26282E;background:#17181C;margin-top:6px}
.phone .q b{display:block;font-size:12px;font-weight:700}
.phone .q small{display:block;font-family:var(--m);font-size:9px;color:#63666D}
.phone .q em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:10.5px;color:#63666D;white-space:nowrap}
.phone .q em.hot{color:#FF5A42;font-weight:700}
.phone .foot2{font-family:var(--m);font-size:8.5px;color:#4A4D53;line-height:1.7;margin:14px 0 0}
/* ---------- tableau ---------- */
/* Le tableau des sources est plus large qu'un telephone. Il defile
— mais rien ne le disait, et un tableau coupe net a l'air casse.
Une ombre au bord droit apparait tant qu'il reste a voir. */
.scrollx{overflow-x:auto;border-top:1.5px solid var(--ink);-webkit-overflow-scrolling:touch}
@media(max-width:760px){
.scrollx{position:relative;
background:linear-gradient(to right,var(--paper) 30%,transparent) left/40px 100% no-repeat,
linear-gradient(to left,var(--paper) 30%,transparent) right/40px 100% no-repeat,
radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),transparent) left/14px 100% no-repeat,
radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),transparent) right/14px 100% no-repeat;
background-attachment:local,local,scroll,scroll}
.scrollx table{min-width:600px}
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
/* SOURCE / DETECTE / LATENCE / REGLAGE : ces quatre mots disent au
lecteur ce qu'il regarde. A 9,5 px en gris clair on ne les voyait
pas, et le tableau devenait quatre colonnes sans titre. */
th{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
td.k{font-family:var(--m);font-size:12.5px}
/* ---------- tarifs ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--ink)}
@media(max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{padding:24px 20px;display:flex;flex-direction:column;border-right:1px solid var(--rule)}
.tier:last-child{border-right:0}
@media(max-width:1000px){.tier:nth-child(2n){border-right:0}.tier:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:560px){.tier{border-right:0;border-bottom:1px solid var(--rule)}}
/* ---------- bascule mois / annee ----------
Deux boutons plutot qu'une case a cocher : le DJ voit les deux
options d'un coup et compare, au lieu de decouvrir un prix
apres avoir clique. L'economie est ecrite sur le bouton, pas
dans une note de bas de page. */
.bascule{display:flex;gap:0;margin:0 0 14px;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
/* Colonne et non ligne : dans une carte de tarif etroite,
« A l'annee » plus sa pastille ne tiennent pas cote a cote et le
texte se coupait en plein milieu. Empiles, les deux boutons
restent lisibles a toutes les largeurs. */
.bascule button{flex:1;font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
padding:8px 6px;border:0;background:transparent;color:var(--ink3);cursor:pointer;white-space:nowrap;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;line-height:1.2}
.bascule button:hover{color:var(--ink)}
.bascule button.on{background:var(--ink);color:var(--paper)}
.bascule .eco{font-size:8.5px;letter-spacing:.04em;padding:2px 4px;border-radius:2px;
background:var(--red);color:#fff;white-space:nowrap}
.bascule button.on .eco{background:var(--paper);color:var(--red)}
/* dans la colonne mise en avant, le fond est deja sombre : on inverse */
.tier.feat .bascule{border-color:var(--surFilet)}
.tier.feat .bascule button{color:var(--sur)}
.tier.feat .bascule button:hover{color:var(--paper)}
.tier.feat .bascule button.on{background:var(--paper);color:var(--ink)}
.tier.feat .bascule button.on .eco{background:var(--red);color:#fff}
.eco2{font-family:var(--m);font-size:10px;line-height:1.6;color:var(--ink3);margin:10px 0 0}
.tier.feat .eco2{color:var(--sur)}
.tier.feat{background:var(--ink);color:var(--paper)}
.tier.feat .lbl,.tier.feat li{color:var(--sur)}
.tier.feat li::before{background:var(--red)}
.tier h3{margin:0;font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.price{font-family:var(--d);font-size:44px;margin-top:14px;line-height:.9}
.price small{font-family:var(--m);font-size:10.5px;color:var(--ink3);letter-spacing:0;display:block;margin-top:7px}
.tier.feat .price small{color:var(--sur)}
.price.q{font-size:26px}
.tier ul{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.tier li{font-size:13.5px;color:var(--ink2);padding-left:14px;position:relative;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--blue)}
.tier .btn{text-align:center}
.tier.feat .btn.g{color:var(--paper);border-color:var(--surFilet)}
.tier.feat .btn.g:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* ---------- pied ---------- */
.cta{background:var(--blue);color:#fff;padding-block:clamp(38px,5vw,68px)}
.cta h2{margin:0;font-family:var(--d);font-size:clamp(32px,5.6vw,70px);line-height:1.24;letter-spacing:.018em;text-transform:uppercase;max-width:16ch}
.cta .row2{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.cta .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta .fine{color:rgba(255,255,255,.72)}
footer{background:var(--ink);color:var(--paper);padding-block:34px}
.fg{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-end}
/* Sur telephone, la colonne de droite gardait son alignement a
droite : trois lignes en drapeau, sous un bloc aligne a gauche.
Des que les colonnes s'empilent, tout revient a gauche. */
@media(max-width:700px){
.fg{flex-direction:column;align-items:stretch;gap:26px}
}
/* Les mentions du pied de page etaient une seule phrase coupee par
des
: sur telephone, « Windows 11 » se retrouvait tout seul
sur une ligne, apres un point median orphelin. Une liste ne peut
pas casser au milieu d'un item — chaque mention tient sur sa
ligne, ou passe entiere a la suivante. */
.fmeta{list-style:none;margin:0;padding:0;text-align:right;line-height:2.1}
.fmeta li{white-space:nowrap}
.fmeta a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
.fmeta{text-align:left;line-height:2.3}
}
footer .lbl{color:var(--surFaible)}
footer a{color:var(--sur)}
.eehint{font-family:var(--m);font-size:9.5px;color:#4A4D53}
/* ---------- dedicace ---------- */
.ee{position:fixed;inset:0;background:rgba(10,11,13,.72);display:none;align-items:center;justify-content:center;padding:24px;z-index:90}
.ee.on{display:flex}
.eecard{background:var(--paper);border:1.5px solid var(--ink);padding:clamp(26px,4vw,42px);max-width:470px;width:100%;
text-align:center;animation:rise .45s cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eecard .disc{width:74px;height:74px;border-radius:50%;margin:0 auto 20px;
background:conic-gradient(from 0deg,var(--blue),var(--red),var(--blue));position:relative;animation:spin 3.6s linear infinite}
.eecard .disc::after{content:"";position:absolute;inset:31px;border-radius:50%;background:var(--paper)}
@keyframes spin{to{transform:rotate(360deg)}}
.eecard h3{margin:0;font-family:var(--d);font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;line-height:1.24}
.eecard p{color:var(--ink2);font-size:14.5px;margin:12px 0 0}
.eesig{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:20px}