/* ============================================================ POLICES — Anton / Archivo / Playfair, OFL verifiee, embarquees. La chasse fixe est celle du systeme : rien a licencier, zero reseau. ============================================================ */ @font-face{font-family:'AntonSigns';src:url(Anton-Regular.8b7b1c61.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'ArchivoSigns';src:url(Archivo-Variable.0dc388a8.woff2) format('woff2');font-weight:100 900;font-display:swap} @font-face{font-family:'PlayfairSigns';src:url(PlayfairDisplay-Italic.dec5c771.woff2) format('woff2');font-style:italic;font-weight:400 700;font-display:swap} /* ================= DIRECTION A — NUIT (la charte de l'app) ================= */ :root{ --bg:#06070D; --bg2:#0A0C15; --panel:#0D0F1A; --panel2:#121522; --ink:#FFFAEE; --dim:rgba(255,250,238,.66); --faint:rgba(255,250,238,.56); --rule:rgba(150,178,255,.16); --rule-2:rgba(150,178,255,.30); --dot:rgba(120,155,255,.14); --halo:rgba(43,92,255,.17); /* --accent : les aplats, il porte du blanc a 5,1:1. --accent-ink : le meme bleu eclairci pour le PETIT texte sur noir, ou #2B5CFF tombe a 3,82:1, sous le 4,5 exige. */ --accent:#2B5CFF; --accent-ink:#5B84FF; --accent-on:#FFFFFF; --radius:2px; --pill:999px; --display:'AntonSigns',Impact,'Arial Narrow',sans-serif; --body:'ArchivoSigns',system-ui,-apple-system,Segoe UI,sans-serif; --serif:'PlayfairSigns',Georgia,serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; } /* ========================================================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body::before{content:"";position:fixed;left:-10%;right:-10%;top:-20%;height:130vh; pointer-events:none;z-index:0;background: radial-gradient(56% 40% at 76% 4%,var(--halo),transparent 62%), radial-gradient(44% 32% at 10% 32%,var(--halo),transparent 66%)} main,header,footer,.bande,.split{position:relative;z-index:1} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{margin:0;font-weight:400} p{margin:0 0 1em} p:last-child{margin-bottom:0} .wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto} .narrow{width:min(860px,calc(100% - 48px));margin-inline:auto} .dots{background-image:radial-gradient(var(--dot) 1px,transparent 1px); background-size:24px 24px;background-position:-1px -1px} .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--faint)} .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule-2); border-radius:var(--pill);padding:6px 13px;font-family:var(--mono);font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .pill.on{border-color:var(--accent);color:var(--accent-ink)} .dot{width:6px;height:6px;border-radius:999px;background:var(--accent);flex:0 0 auto} /* entete */ .nav{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;background:var(--bg)} .nav .in{display:flex;align-items:center;gap:30px;padding:16px 0} .logo{font-family:var(--display);font-size:22px;letter-spacing:.14em;text-transform:uppercase;line-height:1} a.logo{text-decoration:none;color:var(--ink);display:inline-flex; align-items:center;gap:11px} .logo .sym{width:24px;height:24px;display:block;flex:0 0 auto} a.logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .logo i{font-style:normal;color:var(--accent-ink)} /* 2026-08-22 : neuf liens ont fait replier la barre sur deux lignes. Metriques resserrees, bouton insecable, et sous 1180 px les liens s'effacent : les paliers du haut font le meme travail. */ .nav nav{display:flex;gap:clamp(12px,1.4vw,22px);margin-left:auto;flex-wrap:nowrap} .nav nav a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px; color:var(--dim);text-decoration:none;padding:8px 0;min-height:26px;display:inline-flex; align-items:center;white-space:nowrap} .nav nav a:hover{color:var(--ink)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:13px; padding:15px 26px;min-height:48px;border-radius:var(--pill);text-decoration:none; border:1px solid transparent;cursor:pointer} .btn-primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)} .btn-primary:hover{filter:brightness(1.12)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn-ghost:hover{border-color:var(--ink)} .btn-sm{padding:9px 18px;min-height:36px;font-size:11px;white-space:nowrap} /* 2026-08-22, Maxime : « une brillance bleue qui tourne autour » du bouton d'essai de la barre. Un CARRE conique qui tourne derriere le bouton, un fond interieur par-dessus, et la pilule qui decoupe : seule la bordure d'un pixel laisse passer la lueur. Le carre fait 220 % de la largeur, plus que la diagonale, pour qu'aucun angle ne se decouvre en tournant. Coupe pour qui demande moins de mouvement. */ .btn-lueur{position:relative;isolation:isolate;overflow:hidden;border-color:transparent} .btn-lueur::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:220%;aspect-ratio:1; transform:translate(-50%,-50%) rotate(0deg); background:conic-gradient(from 0deg,var(--rule-2) 0 58%,rgba(43,92,255,.25) 72%, var(--accent) 88%,#dbe6ff 92%,var(--rule-2) 100%); animation:lueur-tourne 3.2s linear infinite} .btn-lueur::after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;background:var(--bg)} @keyframes lueur-tourne{to{transform:translate(-50%,-50%) rotate(360deg)}} @media (prefers-reduced-motion:reduce){.btn-lueur::before{animation:none}} /* ========================================================================== 🔴 LES DEUX REGISTRES · c'est le seul vrai changement de graphisme. La v1 portait DOUZE titres construits a l'identique — Anton capitales, creme puis bleu, meme noir, 3 a 5 lignes, de 198 a 330 px de haut. Rien ne dominait, donc la FAQ criait aussi fort que le climax. R1 · les TROIS moments qui portent le recit. Anton plein cadre, le bleu d'aplat, un seul objet a l'ecran, beaucoup d'air autour. R2 · tout le reste. Le titre s'efface en Archivo, deux fois plus petit, SANS bleu : l'accent est rendu au CHIFFRE, qui est l'argument. ⚠️ UNE SEULE EXCEPTION, et elle a grandi. Le titre du calcul etait deja l'exception de TAILLE (46 px). Depuis le 2026-08-16 il prend aussi la FACE et le BLEU du haut de page, sur demande de Maxime. Ca porte le registre 1 a QUATRE moments ; il est tenu sous les trois autres. Cherchez `h2.grand` : c'est le seul, et il doit le rester. ========================================================================== */ section{border-top:1px solid var(--rule);position:relative} section.r1{padding:clamp(92px,14vh,180px) 0} section.r2{padding:clamp(62px,9vh,112px) 0} .sec-head{max-width:52ch;margin-bottom:clamp(34px,4.6vh,58px)} /* 🔴 Les trois chapeaux qui portent un `h2.grand` ont besoin de plus large. Le 52ch ci-dessus se calcule sur la police du CORPS, soit environ 470 px, quand le titre en Anton 59 px en demande 700 : « Vous écrivez les chapitres. » tombait sur trois lignes au lieu de deux. C'est le parent qui serrait, pas le titre, et seule la capture le montrait. */ .sec-head.large{max-width:none} .sec-head.large>p{max-width:56ch} .sec-head .mono{display:block;margin-bottom:14px} .r1 .sec-head{max-width:50ch;margin-bottom:clamp(46px,6vh,86px)} .r1 .sec-head h2{font-family:var(--display);text-transform:uppercase; font-size:clamp(34px,5.6vw,74px);line-height:.92;letter-spacing:.01em} .r1 .sec-head h2 em{font-style:normal;color:var(--accent-ink)} .r1 .sec-head p{margin-top:22px;color:var(--dim);font-size:18px;max-width:46ch} .r2 .sec-head h2{font-family:var(--body);font-weight:600;text-transform:none; font-size:clamp(23px,2.3vw,31px);line-height:1.20;letter-spacing:-.005em; color:var(--ink);max-width:26ch} /* pas de bleu dans un titre de registre 2 : il ferait doublon avec le chiffre, et le chiffre perdrait sa fonction. ⚠️ « jamais » n'est plus vrai depuis le 2026-08-16 : `h2.grand`, et lui seul, porte le bleu. La regle ci-dessous tient donc tous les AUTRES titres de R2. */ .r2 .sec-head h2 em{font-style:normal;color:var(--ink)} .r2 .sec-head p{margin-top:12px;color:var(--dim);font-size:16.5px;max-width:54ch} /* ---------- 1 · haut de page (R1) ---------- */ /* section.hero.r1 : il faut battre `section.r1` (0,1,1), y compris sa variante mobile ecrite PLUS BAS dans la feuille — `.hero` seul perdait, et la bande timeline flottait sur ~126 px de points vides. */ section.hero.r1{padding:clamp(52px,8vh,96px) 0 0;border-top:0;position:relative;overflow:hidden} .hero .kicker{display:flex;gap:9px;margin-bottom:28px;flex-wrap:wrap} .hero h1{font-family:var(--display);text-transform:uppercase; font-size:clamp(36px,5.6vw,76px);line-height:.92;letter-spacing:.005em} .hero h1 span{display:block} /* 2026-08-23, Maxime : « aligner ces deux phrases si c'est plus esthetique ». Le titre devient un bloc d'affiche : a corps egal la seconde ligne est 5,05 % plus courte (mesure au Range, polices chargees), son corps monte d'autant et les deux bords tombent ensemble. Sous 560 px les phrases se replient : le calage n'a plus d'objet, il se coupe. */ .hero h1 span:last-child{font-size:1.0505em} @media (max-width:560px){.hero h1 span:last-child{font-size:1em}} .hero h1 em{font-style:normal;color:var(--accent-ink)} /* le sous-titre est retire de la page : sa regle part avec lui. Du CSS qui ne style plus rien est ce qui se fait rattraper par la collision suivante. */ .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,4vh,44px);align-items:center} /* ======== LE PREMIER ECRAN, variante D (2026-08-22) ======== Une action et ses conditions, le sommaire des quatre gains, le lien vers le calcul, les deux atouts. Un etage = une categorie. */ /* 2026-08-23, Maxime : le compte des modeles dans un encart. La plaque reprend le langage des cases juste dessous (rayon 14, fond releve) ; les deux filets la rattachent a la largeur de l'ecran au lieu de la laisser flotter. Second passage le meme jour (« plus visible, plus marquant ») : le lisere passe a l'accent, la plaque prend la lueur a deux couches du « 5 » et du bouton d'essai, un voile bleu dans le fond, et les filets deviennent des degrades qui menent a la plaque. Lueur STATIQUE, exprès : rien ne boucle. */ .hero .cinq-encart{display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);margin-top:clamp(44px,6vh,72px)} .hero .cinq-encart::before,.hero .cinq-encart::after{content:"";flex:1;height:1px} .hero .cinq-encart::before{background:linear-gradient(90deg,rgba(150,178,255,0),var(--accent))} .hero .cinq-encart::after{background:linear-gradient(270deg,rgba(150,178,255,0),var(--accent))} .hero .cinq{text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.02em; font-size:clamp(37px,4.7vw,63px);line-height:1;color:var(--ink); border:1px solid var(--accent);border-radius:14px; background:linear-gradient(180deg,rgba(43,92,255,.16),rgba(43,92,255,.04) 55%,rgba(13,15,26,.55)); box-shadow:0 0 30px rgba(43,92,255,.32),0 0 80px rgba(43,92,255,.16); padding:clamp(16px,2.3vh,23px) clamp(30px,4vw,52px) clamp(14px,2vh,21px)} .hero .cinq b{font-weight:400;color:var(--accent-ink);text-shadow:0 0 22px rgba(43,92,255,.45), 0 0 52px rgba(43,92,255,.20)} .hero .cinq-encart + .sommaire{margin-top:clamp(18px,2.4vh,28px)} .hero .cta-centre{flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,5.6vh,64px)} .hero .cta .cond{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .sommaire{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(34px,4.8vh,54px)} .sommaire a{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--rule-2); border-radius:14px;padding:16px 18px 18px;background:rgba(13,15,26,.55);transition:border-color .18s} .sommaire a:hover,.sommaire a:focus-visible{border-color:var(--accent);outline:none} .sommaire .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent-ink)} .sommaire .nom{font-weight:600;font-size:15px;color:var(--ink);line-height:1.2} .sommaire .g{font-family:var(--display);font-size:clamp(26px,2.6vw,36px);line-height:.92;color:var(--accent-ink); margin-top:6px;text-shadow:0 0 22px rgba(43,92,255,.40)} .sommaire .g s{font-size:.55em;color:var(--dim);text-shadow:none;margin-right:.3em; text-decoration-thickness:.1em;vertical-align:.3em} .sommaire .q{font-size:12.5px;color:var(--dim);line-height:1.35} /* TAKES porte sa mention en haut a droite, en PASTILLE (Maxime, 2026-08-22 : pas une italique, une pastille) : « Pour cinema-television », la meme forme que les pastilles « en developpement » des cartes d'outils. */ .sommaire a.cinema{position:relative} .sommaire .tag{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px; letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent); border-radius:var(--pill);padding:4px 9px;line-height:1.4;white-space:nowrap} .lien.calcul{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.09em; font-size:13px;color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px} .lien.calcul:hover{color:var(--ink);border-color:var(--ink)} .autour{margin-top:clamp(40px,5.6vh,64px);display:grid;grid-template-columns:1fr 1fr;gap:12px} .autour-t{grid-column:1 / -1;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-ink);margin-bottom:0} .atout{text-decoration:none;display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule-2);border-radius:14px; padding:24px 26px 26px;background:var(--panel);transition:border-color .18s} .atout:hover,.atout:focus-visible{border-color:var(--accent);outline:none} .atout .k{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(28px,2.8vw,38px); line-height:.95;color:var(--accent-ink);text-shadow:0 0 22px rgba(43,92,255,.45), 0 0 52px rgba(43,92,255,.20)} .atout .p{font-size:16px;color:var(--ink);line-height:1.45;max-width:44ch;margin-top:4px} .atout .s{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);line-height:1.5} @media (max-width:980px){.sommaire{grid-template-columns:repeat(2,1fr)}.autour{grid-template-columns:1fr}} @media (max-width:560px){.sommaire{grid-template-columns:1fr}} /* la phrase qui relie les cinq pastilles du haut aux cartes du bas */ /* 🔴 La jauge « 5 films / 94 films » a ete retiree le 2026-08-16, ET SA REGLE AVEC. Maxime : « c'est trop abscons pour un utilisateur, reste marketing ». Elle etait juste et mesuree, et c'est justement le probleme : « la marge d'erreur sur la tenue d'un visage » est une phrase de banc, pas de page de vente. Le fait survit en toutes lettres sur la carte et, chiffre, dans l'ecran « Ce qu'il apprend de vous », qui est l'endroit pour ca. */ /* 2026-08-22, Maxime : le duel devient UNE PHRASE, « Passez de 4 à 6 h en montage ordinaire à 45 min avec FULLCUT » (ses mots). Trois dispositions essayees et rejetees le meme jour : chiffres Anton dans une phrase Archivo (deux voix dans une ligne), grille a trois colonnes (un trou apres « Passez de »), phrase entiere en Archivo (« la police pas sur »). Retenu : LA VOIX DU HERO, juste au-dessus — Anton capitales, une ligne creme, une ligne bleue, memes interlignage et approche que `.hero h1`, a taille reduite pour rester son sous-titre et non son rival. Le chiffre manuel est gris et barre dans la ligne creme (regle 3) ; la ligne FULLCUT porte la lueur des chiffres voisins (« 20 min », « 4 outils »). ⚠️ Regle 1 : c'est un QUATRIEME bloc en registre display, assume parce qu'il est le sous-titre direct du hero et que le carre portait deja ses chiffres en Anton. ⚠️ Les 4 a 6 h sont la colonne DERUSHAGE du tableau du calcul : « montage ordinaire » tient parce que le carre dit « Derush » au-dessus et « entierement derushee » en dessous. */ .duel{font-family:var(--display);text-transform:uppercase;font-weight:400; font-size:clamp(34px,4.5vw,64px);line-height:.95;letter-spacing:.005em} .duel .ligne{display:block} .duel .ligne.avant-l{color:var(--ink)} .duel .avant{color:var(--dim)} .duel .avant s{text-decoration:line-through;text-decoration-thickness:.07em; text-decoration-color:var(--dim)} .duel .ligne.apres-l{color:var(--accent-ink); text-shadow:0 0 22px rgba(43,92,255,.45), 0 0 52px rgba(43,92,255,.20)} /* ================= LA TIMELINE QUI SE REMPLIT ================= */ /* plus de border-bottom : la bande est collee au film, dont le border-top fait le seul filet — deux filets a 1 px d'ecart faisaient un double trait. */ .tlwrap{border-top:1px solid var(--rule); background:var(--panel);padding:22px 0 26px;overflow:hidden} .hero .sommaire + .tlwrap{margin-top:12px;border:1px solid var(--rule-2);border-radius:14px; background:rgba(13,15,26,.55);padding:18px 20px 20px} .tlhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .tlhead .st{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap} .tl{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg); position:relative;overflow:hidden} .tl .ruler{display:flex;height:24px;border-bottom:1px solid var(--rule); background:var(--panel2);padding-left:132px;position:relative} .tl .ruler .t{flex:1;border-left:1px solid var(--rule);font-family:var(--mono); font-size:9.5px;letter-spacing:.05em;color:var(--faint);padding:6px 0 0 5px} .tl .row{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);height:38px} .tl .row:last-child{border-bottom:0} .tl .hdr{width:132px;flex:0 0 132px;border-right:1px solid var(--rule); display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:9.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--panel2)} .tl .lane{flex:1;position:relative;padding:5px 0} /* 🔴 L'etat par defaut est l'etat FINAL, pas l'etat vide. Si le declencheur ne part pas (onglet en arriere-plan, page non composee, observateur muet), le visiteur voit une timeline REMPLIE, jamais une timeline vide. */ .tl .lane b{position:absolute;top:5px;bottom:5px;border-radius:1px;display:block; transform:scaleX(1);transform-origin:left center} /* 2026-08-22, demande de Maxime : la pose dure ~5,5 s au lieu de 0,9 et la tete de lecture ECRIT la timeline : chaque plan apparait quand elle passe (le retard vient de la POSITION du plan, calcule dans batirTimeline). */ .tl.go .lane b{animation:grow .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d)} @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* 01 Clean : les rushes ranges, contigus, gris — tout est la, rien n'est trie */ .tl .lane[data-lane="clean"] b{background:#262b3a;top:9px;bottom:9px;border-radius:1px} /* 02 Derush : chaque phrase, datee — les tirets creme du verbatim */ .tl .lane[data-lane="derush"] b{background:var(--ink);opacity:.72;top:14px;bottom:14px;border-radius:1px} /* 03 First Cut : la parole montee, en bleu, qui respire */ .tl .lane[data-lane="first"] b{border-radius:2px;overflow:hidden; background:linear-gradient(180deg,#5c85ff,#1d43cf); box-shadow:0 0 22px rgba(43,92,255,.50), inset 0 1px 0 rgba(255,255,255,.28); animation:lueur 5.5s ease-in-out infinite alternate;animation-delay:var(--ld,0s)} .tl.go .lane[data-lane="first"] b{animation:grow .5s cubic-bezier(.2,.7,.3,1) both, lueur 5.5s ease-in-out infinite alternate;animation-delay:var(--d),var(--ld,0s)} @keyframes lueur{from{box-shadow:0 0 16px rgba(43,92,255,.34), inset 0 1px 0 rgba(255,255,255,.28)} to{box-shadow:0 0 30px 4px rgba(43,92,255,.62), inset 0 1px 0 rgba(255,255,255,.28)}} /* 04 Next Cut : les plans de coupe par-dessus, et la musique dessous */ .tl .lane[data-lane="next"] b{border-radius:2px;overflow:hidden;background:#232329;top:5px;bottom:12px} .tl .lane[data-lane="next"] b::after{content:"";position:absolute;inset:0; background:linear-gradient(107deg,#4c5570,#232a3d 26%,#6b5570 52%,#2b3348 74%,#55617f); background-size:280% 100%;background-position:var(--o,0%) 50%; animation:panner 9s linear infinite alternate;animation-delay:calc(var(--d) * -3)} @keyframes panner{from{background-position:0% 50%}to{background-position:100% 50%}} .tl .lane[data-lane="next"] b.mus{top:auto;bottom:5px;height:5px;border-radius:2px; background:linear-gradient(90deg,rgba(43,92,255,.36),rgba(43,92,255,.16) 35%, rgba(43,92,255,.40) 55%,rgba(43,92,255,.18) 80%,rgba(43,92,255,.36)); background-size:200% 100%;animation:houle 9s linear infinite alternate} .tl .lane[data-lane="next"] b.mus::after{content:none} .tl.go .lane[data-lane="next"] b.mus{animation:grow 5.2s linear both, houle 9s linear 5.2s infinite alternate;animation-delay:var(--d),5.2s} @keyframes houle{from{background-position:0% 50%}to{background-position:100% 50%}} /* 05 TAKES : les prises groupees par replique — des grappes, deux teintes */ .tl .lane[data-lane="takes"] b{top:8px;bottom:8px;border-radius:2px; background:rgba(91,132,255,.20);border:1px solid rgba(91,132,255,.48)} .tl .lane[data-lane="takes"] b.g2{background:rgba(255,250,238,.08);border-color:rgba(255,250,238,.30)} /* Studio IA : les plans qui n'ont jamais ete tournes — rares, en pointille */ .tl .lane[data-lane="ia"] b{top:7px;bottom:7px;border-radius:2px;background:rgba(43,92,255,.10); border:1px dashed var(--accent-ink);box-shadow:0 0 14px rgba(43,92,255,.35)} /* Votre style : les reperes de coupe appris, un par raccord du First Cut */ .tl .lane[data-lane="style"] b{top:15px;bottom:15px;border-radius:2px;background:var(--accent-ink); box-shadow:0 0 10px rgba(43,92,255,.65)} .tl .play{position:absolute;left:132px;top:24px;bottom:0;width:2px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.5)); box-shadow:0 0 18px 3px rgba(255,255,255,.45);opacity:0;pointer-events:none} /* sans .go la tete tourne DEJA : l'etat par defaut est rempli ET vivant. */ .tl .play{animation:lecture 16s linear infinite} /* lineaire, pas d'aisance : les retards des plans sont lineaires en position, une tete acceleree prenait 10 % d'avance sur ce qu'elle ecrit. */ .tl.go .play{animation:ecrit 5.6s linear 1 both, lecture 16s linear 6.1s infinite} @keyframes ecrit{0%{opacity:.95;left:132px}96%{opacity:.95}100%{opacity:0;left:calc(100% - 3px)}} @keyframes lecture{0%{opacity:0;left:132px}4%{opacity:.5}92%{opacity:.5} 100%{opacity:0;left:calc(100% - 3px)}} /* la regle s'allume au passage de la tete pendant la pose */ .tl.go .ruler .t{animation:tictac 1.1s ease-out 1 both;animation-delay:var(--d)} @keyframes tictac{0%{color:var(--faint)}25%{color:var(--accent-ink)}100%{color:var(--faint)}} @media (prefers-reduced-motion:reduce){ .tl .play,.tl.go .play{animation:none;opacity:0} .tl .lane b,.tl.go .lane b,.tl.go .ruler .t{animation:none} } .replay{appearance:none;background:transparent;cursor:pointer} .replay:hover{border-color:var(--accent);color:var(--accent-ink)} /* ---------- le film ---------- */ .film{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); background:var(--bg2);padding:clamp(34px,5vh,64px) 0} /* 🔴 « Le film · 19 secondes · avec le son » est parti le 2026-08-16, sur demande de Maxime, ET SES DEUX REGLES AVEC (regle n4). `.hd` ne servait qu'ici : verifie avant de retirer, une seule occurrence dans toute la page. Le lecteur voit un lecteur video, il n'a pas besoin qu'on le lui annonce. */ .film .cadre{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden; background:#000;line-height:0;position:relative} .film video{width:100%;height:auto;display:block} /* ================= LE MUR DE RUSHES ANALYSES ================= */ .wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .rush{border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel); overflow:hidden;position:relative;aspect-ratio:16/10} .rush .img{position:absolute;inset:-8%; background:linear-gradient(112deg,#3d4560,#1c2231 24%,#6a5170 50%,#242c42 72%,#4b5674); background-size:300% 100%; animation:panner 11s linear infinite alternate, respire 14s ease-in-out infinite alternate; animation-delay:var(--o,0s), var(--o2,0s)} @keyframes respire{from{transform:scale(1.02)}to{transform:scale(1.14)}} .rush .img::after{content:"";position:absolute;inset:0; background:radial-gradient(58% 68% at var(--px,40%) 45%,rgba(43,92,255,.26),transparent 70%)} .rush .vig{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.45))} .rush .sc{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent); opacity:0;box-shadow:0 0 14px 2px rgba(43,92,255,.55)} .wall.go .rush .sc{animation:scan 1.05s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--d)} @keyframes scan{0%{opacity:0;transform:translateY(0)} 12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(1000%)}} .rush .vd{position:absolute;left:7px;bottom:7px;right:7px;display:flex;gap:5px; align-items:center;opacity:1} .wall.go .rush .vd{animation:pop .3s ease-out both;animation-delay:calc(var(--d) + .95s)} @keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .rush .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase; border-radius:var(--pill);padding:3px 7px;border:1px solid var(--rule-2); background:var(--bg);color:var(--dim);white-space:nowrap} .rush .tag.itw{border-color:var(--accent);color:var(--accent-ink)} .rush .tag.mute{opacity:.7} .rush .sco{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:var(--faint)} .rush .wv{position:absolute;left:7px;right:7px;top:8px;height:14px;display:flex; gap:1.5px;align-items:flex-end;opacity:1} .wall.go .rush .wv{animation:pop .3s ease-out both;animation-delay:calc(var(--d) + .8s)} .rush .wv i{flex:1;background:var(--ink);opacity:.30;border-radius:1px} .rush.speech .wv i{background:var(--accent);opacity:.75} .wallhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .wallhead .ct{font-family:var(--display);font-size:26px;line-height:1;color:var(--accent-ink)} /* ---------- 2 · le calcul ---------- */ .calc{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .calc .top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:18px 22px; border-bottom:1px solid var(--rule);background:var(--panel2)} .ctable{width:100%;border-collapse:collapse} .ctable th,.ctable td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--rule)} .ctable th{font-family:var(--mono);font-weight:400;font-size:10.5px;text-transform:uppercase; letter-spacing:.09em;color:var(--faint)} .ctable td.task{font-size:16px} .ctable td.man,.ctable td.us{font-family:var(--mono);font-size:13px;letter-spacing:.03em; white-space:nowrap;text-align:right;width:1%} .ctable td.man{color:var(--dim)} .ctable td.us{color:var(--accent-ink)} .ctable tr.total td{border-bottom:0;padding-top:22px;padding-bottom:24px; border-top:1px solid var(--rule-2);background:var(--bg2)} .ctable tr.total .task{font-family:var(--display);text-transform:uppercase; font-size:19px;letter-spacing:.04em} .ctable tr.total .man,.ctable tr.total .us{font-family:var(--display);font-size:30px;letter-spacing:.02em} .ctable tr.total .man{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px} .calc .foot{padding:20px 22px 22px;border-top:1px solid var(--rule);background:var(--panel2)} .calc .foot .refrain{font-weight:600;font-size:clamp(20px,2.2vw,27px); line-height:1.2;color:var(--ink);margin:0 0 10px} /* 🔴 Ce titre est le seul du registre 2 a monter : il porte la preuve du chiffre qui ouvre la page. Il reste en Archivo, donc il ne devient pas un quatrieme moment de registre 1, qui n'en compte que trois. */ /* 🔴 L'EXCEPTION DU CALCUL, ELARGIE LE 2026-08-16 SUR DEMANDE DE MAXIME. Ce titre etait deja l'exception de taille du registre 2 (46 px la ou les autres font 31). Il prend maintenant la FACE du haut de page : Anton, capitales, deux lignes, la seconde en bleu. Le motif est le meme qu'avant, en plus fort : c'est la ligne que le tableau PROUVE, et la seule de la page a etre reprise mot pour mot en sortie de section. ⚠️ Ca fait donc un QUATRIEME moment en registre 1, la ou la regle n1 en donne trois. Il est tenu SOUS les trois autres pour que la hierarchie tienne : FULL/CUT 120 px > haut de page 84 > appel final 69 > celui-ci ~59. Le bleu ne porte que « est fait. », le mot qui bascule (charte video §7.2). */ .r2 .sec-head h2.grand{font-family:var(--display);text-transform:uppercase; font-size:clamp(32px,4.6vw,60px);line-height:.92;letter-spacing:.005em;max-width:30ch} /* ⚠️ 30ch et non 16 : chaque ligne est deja un en display:block, donc la largeur ne sert qu'a EMPECHER une ligne de casser en deux. A 16ch, « Vous écrivez les chapitres. » tombait sur trois lignes au lieu de deux. Vu a l'ecran, invisible au balayage du DOM. */ .r2 .sec-head h2.grand>span{display:block} .r2 .sec-head h2.grand>span>em{font-style:normal;color:var(--accent-ink)} .ctable th.nous{color:var(--accent-ink)} /* ---------- 3 · chercher une phrase ---------- */ .finder{border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel);overflow:hidden} .finder .bar{display:flex;align-items:center;gap:12px;padding:14px 18px; border-bottom:1px solid var(--rule);background:var(--panel2)} .finder .bar .q{flex:1;font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.02em} .finder .bar .q s{text-decoration:none;color:var(--accent-ink)} .frow{display:grid;grid-template-columns:118px 74px 1fr 78px;gap:16px;align-items:center; padding:15px 18px;border-bottom:1px solid var(--rule)} .frow:last-of-type{border-bottom:0} .frow .tc,.frow .cam,.frow .len{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint)} .frow .tc{color:var(--accent-ink)} .frow .len{text-align:right} .frow .txt{font-size:15.5px;color:var(--ink)} .frow .txt mark{background:transparent;color:var(--accent-ink)} .finder .foot{padding:14px 18px;border-top:1px solid var(--rule);background:var(--panel2); display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* 2026-08-23, Maxime : le finder se joue comme les fenetres Resolve. Etat par defaut REMPLI (regle payee) ; `.go` tape la requete (11 pas sur une chasse fixe), fait glisser les trois reponses, allume le mot trouve, puis le pied. Le curseur cligne par defaut : l'etat rempli reste vivant, comme la tete de lecture de la timeline. Le compteur monte cote script (`_compter`). */ .finder .bar .q b{font-weight:inherit;display:inline-block;white-space:nowrap;vertical-align:bottom} .finder .bar .q s{animation:clignote 1.1s linear infinite} .finder.go .bar .q b{overflow:hidden;width:calc(11ch + .25em);animation:tape .9s steps(11,end) .15s both} .finder.go .frow{animation:glisse .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d)} .finder.go .frow mark{animation:allume .5s ease-out both;animation-delay:calc(var(--d) + .45s)} .finder.go .foot .pill{animation:pop .3s ease-out both;animation-delay:2.05s} .finder.go .foot .mono{animation:pop .3s ease-out both;animation-delay:2.2s} @keyframes tape{from{width:0}} @keyframes clignote{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes allume{from{color:var(--ink)}} @media (prefers-reduced-motion:reduce){ .finder .bar .q s,.finder.go .bar .q b,.finder.go .frow,.finder.go .frow mark, .finder.go .foot .pill,.finder.go .foot .mono{animation:none} } /* 🔴 REGLE DE LA MAISON · `>` ET NON L'ESPACE des qu'un bloc a des enfants stylés. Ecrit `.bloc div`, le selecteur prend AUSSI les petits-enfants, qui heritent alors du padding. Mesure faite sur un bloc qui portait le defaut : une etiquette de 18 px de texte rendue sur 66 px de haut, un chiffre de 26 sur 74. C'est le grand blanc qu'on voit sans savoir le nommer. ⚠️ Cette note citait `.against`, `.pont` et `.privacy .row` en exemple. Les trois ont ete supprimes le 2026-08-16, et c'etaient les trois SEULS blocs de la page a utiliser `>`. Il n'en reste qu'un, `h2.grand>span`. La regle vaut toujours ; ce sont ses exemples qui sont partis avec les blocs. */ /* ---------- 4 · le split FULL / CUT (R1) ---------- */ .split{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .split .grid{display:grid;grid-template-columns:1fr 1fr} .split .cell{padding:clamp(34px,4.4vw,60px) clamp(20px,3vw,46px)} .split .cell+.cell{border-left:1px solid var(--rule)} .split .word{font-family:var(--display);font-size:clamp(54px,9.4vw,128px);line-height:.84; text-transform:uppercase;letter-spacing:.02em} .split .full .word{color:var(--accent);text-shadow:0 0 44px rgba(43,92,255,.45)} .split .lead{margin-top:20px;font-size:clamp(17px,1.6vw,21px);max-width:36ch} /* 🔴 Les deux phrases du climax etaient entierement cremes : le bleu de FULL et de CUT ne redescendait nulle part, et le texte lisait comme une legende. Une proposition par cote passe en accent, jamais plus : deux bleus dans un meme paragraphe n'en font plus aucun. */ .split .lead em{font-style:normal;color:var(--accent-ink)} /* `.split .fig` portait les deux chiffres sous FULL et sous CUT. Ils sont partis le 2026-08-16 avec la reecriture de l'ecran, la regle avec eux. */ /* ========================================================================== L'OUTIL · V1 propos et versions avancees. DEUX cartes, pas trois. 🔴 Elle s'appelle `.outil` et NON `.etapes`, qui etait mon premier nom : `class="claim etapes"` existe deja sur la carte « Montage » du haut de page, et `.etapes{display:grid}` la reprenait en entier. Trouve par le balayage des liens, pas a la relecture. 🔴 C'est la geometrie de feu `.pont`, revenue sous le nom de son nouveau travail, et il faut le dire plutot que de faire semblant : `.pont`, `.against` et `.privacy .row` ont ete supprimes le matin meme, et c'etaient les seules grilles de cartes generiques de la page. Rien de reutilisable n'a survecu, donc la regle est reecrite au lieu d'etre detournee. ⚠️ `.deux` et `.caveat` sont partis avec l'ecran 5 · LES MESURES, supprime le meme jour. Leur commentaire disait pourquoi les deux colonnes avaient la meme taille ; l'ecran n'existe plus, l'argument est dans les cahiers. ========================================================================== */ /* Une capture du LOGICIEL a gauche, quatre points numerotes a droite, et `.inv` renvoie l'image de l'autre cote pour la seconde section. Le chiffre est en Anton et en bleu : c'est le seul endroit ou la page se permet un ornement, et il porte le rythme de lecture au lieu de le decorer. ⚠️ Les captures sont ANONYMISEES a la fabrication : la maquette d'app porte de vrais noms de projets clients, et H4 leur interdit de sortir. */ /* 🔴 LA CAPTURE EST UNE FENETRE, PAS UNE IMAGE POSEE. Maxime : « trop gros, ça prend trop de place, il faut du texte à côté », et « au lieu d'avoir juste une capture tu pourrais l'animer, un défilement dans le menu ». La colonne de l'image passe donc SOUS celle du texte (0,92 contre 1,08), et l'image, qui est deux fois plus haute que sa fenetre, defile lentement dedans. Le voyage est exprime en pourcentage de l'IMAGE (`-100%`) plus la hauteur de la fenetre : il s'ajuste tout seul a la largeur du navigateur, sans une ligne de JavaScript et sans que la fin du defilement depende d'un chiffre en dur. */ .demo{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,3.4vw,52px); align-items:start;--fen:clamp(300px,44vh,460px)} .demo.inv>.ecran-app{order:2} .ecran-app{margin:0;border:1px solid var(--rule-2);border-radius:var(--radius); overflow:hidden;background:var(--panel);box-shadow:0 30px 90px rgba(0,0,0,.45)} .ecran-app .vue{position:relative;overflow:hidden;height:var(--fen)} .ecran-app .vue img{display:block;width:100%;height:auto; animation:defileEcran 26s ease-in-out infinite alternate} .demo.inv .ecran-app .vue img{animation-duration:21s;animation-delay:-4s} .ecran-app .vue::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px; pointer-events:none;background:linear-gradient(to top,var(--panel),transparent)} @keyframes defileEcran{ 0%,7% {transform:translateY(0)} 93%,100% {transform:translateY(calc(-100% + var(--fen)))} } .ecran-app figcaption{padding:12px 16px;border-top:1px solid var(--rule); font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--faint);background:var(--panel2)} .pts{display:grid;gap:clamp(18px,2.4vh,26px)} .pts.large{grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vh,26px) clamp(32px,4vw,64px)} @media (max-width:820px){.pts.large{grid-template-columns:1fr}} .pt{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start; border-top:1px solid var(--rule);padding-top:18px} .pt>.n{font-family:var(--display);font-size:32px;line-height:.86;color:var(--accent-ink)} .pt b{display:block;font-size:17px;font-weight:600;line-height:1.25} .pt p{margin-top:6px;color:var(--dim);font-size:15px} .catalogue{margin-top:clamp(34px,4.4vh,58px);border:1px solid var(--rule); border-radius:var(--radius);background:var(--panel);overflow:hidden} .catalogue .tete{padding:22px 24px;border-bottom:1px solid var(--rule);background:var(--panel2)} .catalogue .tete h3{margin-top:10px;font-family:var(--body);font-weight:600; font-size:clamp(18px,1.9vw,23px);line-height:1.25} .catalogue .tete h3 b{font-weight:600;color:var(--accent-ink)} .catalogue ul{list-style:none;margin:0;padding:6px 24px 4px; display:grid;grid-template-columns:1fr 1fr;gap:0 32px} .catalogue li{padding:13px 0;border-top:1px solid var(--rule);font-size:15px;color:var(--dim)} .catalogue li:first-child,.catalogue li:nth-child(2){border-top:0} .catalogue li b{color:var(--ink);font-weight:600} .catalogue>p{padding:14px 24px;border-top:1px solid var(--rule);background:var(--panel2);color:var(--dim)} @media (max-width:820px){.catalogue ul{grid-template-columns:1fr} .catalogue li:nth-child(2){border-top:1px solid var(--rule)}} /* la barre qui suit le defilement, seule survivante de l'eventail */ nav a.on{color:var(--accent-ink)} /* la chute, juste avant le prix. Registre 2, centree, un seul mot en bleu. */ .chute{border-top:1px solid var(--rule);padding:clamp(46px,7vh,82px) 0;text-align:center} .chute p{font-family:var(--serif);font-style:italic;font-weight:500; line-height:1.22;letter-spacing:.005em; font-size:clamp(27px,3.5vw,48px);max-width:34ch;margin-inline:auto} .chute em{color:var(--accent-ink)} /* ---------- l'assistant, troisieme partie de l'ecran 3 ---------- Il vivait dans l'ecran 6 · le pont, supprime le 2026-08-16. Les six regles de `.pont` sont parties avec ses trois cartes ; celles de `.chat` l'ont suivi vers le haut. */ .chat{border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel);overflow:hidden} .chat .bar{display:flex;align-items:center;gap:12px;padding:14px 18px; border-bottom:1px solid var(--rule);background:var(--panel2)} .chat .msg{padding:18px 20px;border-bottom:1px solid var(--rule);display:grid; grid-template-columns:96px 1fr;gap:18px} .chat .msg:last-child{border-bottom:0} .chat .msg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);padding-top:3px} .chat .msg.bot{background:var(--bg)} .chat .msg.bot .who{color:var(--accent-ink)} .chat .msg .txt{font-size:15.5px} .chat .msg .txt em{font-style:normal;font-family:var(--mono);font-size:12.5px; color:var(--accent-ink);letter-spacing:.03em} .chat .msg .txt q{color:var(--dim)} /* 2026-08-23 : la conversation se joue au rythme d'un echange — vous, puis la reponse, deux fois — et les timecodes s'allument quand la reponse est posee. */ .chat.go .msg{animation:pop .38s ease-out both;animation-delay:var(--d)} .chat.go .msg.bot .txt em{animation:allume .5s ease-out both;animation-delay:calc(var(--d) + .5s)} @media (prefers-reduced-motion:reduce){ .chat.go .msg,.chat.go .msg.bot .txt em{animation:none} } /* 🔴 pose deja ses guillemets, la page etant en lang="fr" : les ecrire dans le markup en rendait DEUX paires. Et les guillemets par defaut collent au mot ; la typographie francaise demande une espace insecable. */ q{quotes:"\00AB\00A0" "\00A0\00BB"} /* ---------- 7 · prix, qui, FAQ ---------- */ /* 🔴 LA MATRICE DE COMPATIBILITE, en TEXTE et non en logos. Maxime demandait « les logos DaVinci, Premiere et Final Cut, avec logo mac et pc ». Les noms sont ecrits, les logos non, et pour la meme raison que les marques clientes du bloc SIGNS restent en texte (site/CLAUDE.md §4.2) : citer un nom pour dire avec quoi on marche est un usage nominatif ordinaire, reproduire un logo sur une page qui VEND laisse entendre un partenariat qu'on n'a pas. ⚠️ C'est une decision de prudence, pas une mesure. A rouvrir avec un conseil en PI, en meme temps que la question des trente logos clients du kit. */ .compat{margin-top:clamp(32px,4vh,52px);border:1px solid var(--rule); border-radius:var(--radius);overflow:hidden;background:var(--panel)} .compat .ligne{display:grid;grid-template-columns:1fr 150px 150px;gap:12px; align-items:center;padding:15px 20px;border-top:1px solid var(--rule)} .compat .ligne:first-child{border-top:0;background:var(--panel2)} .compat .quoi{font-size:16px} .compat .quoi b{font-weight:600;color:var(--ink)} .compat .os{font-family:var(--mono);font-size:11px;letter-spacing:.07em; text-transform:uppercase;text-align:right} .compat .ligne.tete .os{color:var(--dim)} .compat .os.oui{color:var(--accent-ink)} .compat .os.non{color:var(--faint)} /* le gris ne veut dire qu'une chose : ca n'existe pas encore. Jamais rouge : un manque n'est pas une panne (CHARTE_UX §2.3). */ .compat .gris,.compat .ligne.gris .quoi{color:var(--faint)} .compat>p{padding:15px 20px;border-top:1px solid var(--rule); background:var(--panel2);color:var(--dim)} @media (max-width:1180px){ .nav nav{display:none} } @media (max-width:640px){ .compat .ligne{grid-template-columns:1fr;gap:4px} .compat .os{text-align:left} .compat .ligne.tete{display:none} .compat .os::after{content:" · " attr(data-os)} } .plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);align-items:stretch} .plan{border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(26px,2.8vw,38px); background:var(--panel);display:flex;flex-direction:column} .plan.lead{border-color:var(--accent)} /* 🔴 Le NOM de l'offre descend en registre 2 (decision de Maxime, 2026-08-16) : la regle n1 donne trois moments au registre 1, et le prix n'en est pas un. Le CHIFFRE, lui, reste en Anton juste dessous, parce que toute la page ecrit ses nombres comme ca : le compteur du mur, la ligne de total, le duel. */ .plan h3{font-family:var(--body);font-weight:600;text-transform:none;font-size:22px; letter-spacing:-.005em;margin:12px 0 4px} .plan .price{font-family:var(--display);font-size:56px;line-height:1;margin:16px 0 6px; display:flex;align-items:baseline;gap:14px} .plan .price s{font-size:25px;color:var(--faint);text-decoration:line-through} .plan ul{list-style:none;margin:20px 0 0;padding:0;flex:1} .plan li{padding:12px 0;border-top:1px solid var(--rule);font-size:15px;color:var(--dim)} .plan li b{color:var(--ink);font-weight:600} .plan .btn{margin-top:24px;width:100%} /* 2026-08-22 au soir · la grille de lancement de Maxime : la bande d'offre avec son decompte, quatre packs cumulatifs, puis le Module IA et le Complet. Les regles de la grille precedente sont parties avec elle. */ .offre{position:relative;display:flex;gap:clamp(16px,2.4vw,34px);align-items:center; flex-wrap:wrap;border:1px solid var(--rule-2);border-radius:var(--radius); background:var(--panel2);overflow:hidden; padding:clamp(16px,2vh,22px) clamp(18px,2.4vw,30px); margin-bottom:clamp(22px,3vh,34px)} /* le filet d'accent en tete : le meme geste que la carte phare du haut de page */ .offre::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--accent)} .offre::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 130% at 8% 50%,rgba(43,92,255,.14),transparent 60%)} .offre .quoi{position:relative;display:flex;flex-direction:column;gap:7px} .offre .k{display:inline-flex;align-self:flex-start;border:1px solid var(--accent); border-radius:var(--pill);padding:4px 12px;color:var(--accent-ink); font-size:10px;letter-spacing:.12em;text-transform:uppercase} .offre .txt{font-size:16px;color:var(--ink);font-weight:600} /* ---------- la fenetre de la liste d'attente ---------- 🔴 `hidden` porte l'etat, et `[hidden]{display:none}` n'est PAS acquis : `display:flex` sur `.fenetre` l'ecraserait. La regle vient donc APRES. */ .fenetre{position:fixed;inset:0;z-index:60;display:flex;align-items:center; justify-content:center;padding:20px} .fenetre[hidden]{display:none} .fenetre .voile{position:absolute;inset:0;background:rgba(6,7,13,.82); backdrop-filter:blur(3px)} .fenetre .boite{position:relative;width:min(520px,100%);max-height:90vh; overflow:auto;border:1px solid var(--rule-2);border-radius:var(--radius); background:var(--panel);padding:clamp(22px,3vw,34px)} .fenetre .boite::before{content:"";position:absolute;left:0;right:0;top:0; height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)} .fenetre h2{font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:.02em;font-size:clamp(24px,3.4vw,32px);line-height:1.02; margin:0 0 10px} .fenetre .dit{margin:0 0 18px;font-size:15.5px;color:var(--dim);line-height:1.55} .fenetre form{display:flex;flex-direction:column;gap:8px} .fenetre label{font-family:var(--mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} .fenetre input{width:100%;padding:13px 14px;border-radius:var(--radius); border:1px solid var(--rule-2);background:var(--bg);color:var(--ink); font-family:var(--body);font-size:16px} .fenetre input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} .fenetre form .btn{margin-top:4px;justify-content:center} .fenetre .etat{min-height:1.4em;margin:12px 0 0;font-size:14px;color:var(--ink)} .fenetre .etat.refus{color:var(--accent-ink)} .fenetre .fine{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--faint)} .fenetre .fine a{color:var(--accent-ink)} .fenetre [data-fermer-liste].btn{margin-top:16px} body.fige{overflow:hidden} /* ---------- le bandeau d'annonce, sous la barre ---------- Il ne porte AUCUN bouton : la charte n'admet qu'un seul bleu a l'ecran, et c'est celui du haut de page. Un bandeau qui crie a cote du titre lui prend son accent. */ .annonce{position:relative;z-index:1;border-bottom:1px solid var(--rule); background:var(--panel);padding:14px 22px;text-align:center} /* 🔴 14px et non 11, demande de Maxime le 2026-08-25 : « un peu plus gros ». La COULEUR ne bouge pas. Le grossir ET l'eclaircir lui ferait prendre l'accent du haut de page, qui est le seul bleu de l'ecran. */ .annonce .mono{font-size:14px;letter-spacing:.10em;text-transform:uppercase; color:var(--dim)} .annonce::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent)} /* ⚠️ L'espagnol est la phrase la plus longue des trois (48 signes contre 44) : c'est LUI qui decide du palier etroit, pas le francais. */ @media (max-width:520px){.annonce{padding:11px 14px} .annonce .mono{font-size:12px;letter-spacing:.05em}} /* ⚠️ Mesure a 390 px : l'espagnol tenait sur 360 px pour 362 disponibles, soit DEUX pixels de marge. Une ligne qui passe de justesse passe jusqu'au jour ou une police de repli se charge. Un cran de plus, et il reste 30 px. */ @media (max-width:410px){.annonce{padding:11px 10px} .annonce .mono{font-size:11px;letter-spacing:.04em}} .packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);align-items:stretch} .packs.bas{grid-template-columns:minmax(0,1fr) minmax(0,2fr); margin-top:clamp(14px,1.8vh,22px)} .pack{border:1px solid var(--rule);border-radius:var(--radius); background:var(--panel);padding:clamp(20px,2vw,26px); display:flex;flex-direction:column} .pack.reco{border-color:var(--accent);background:var(--panel2)} /* meme geste que les cartes d'outils : Anton creme, la lumiere derriere */ .pack h3{margin-top:10px;font-family:var(--display);font-weight:400;font-size:22px; letter-spacing:.05em;text-transform:uppercase;line-height:1.15;color:var(--ink); text-shadow:0 0 20px rgba(43,92,255,.55), 0 0 44px rgba(43,92,255,.25)} .pack>p{margin-top:8px;font-size:13.5px;color:var(--dim);line-height:1.5;flex:1} .pack .prix{margin-top:16px;font-family:var(--display);font-size:46px; line-height:1;color:var(--accent-ink);text-shadow:0 0 26px rgba(43,92,255,.35)} .pack .puis{margin-top:7px;font-size:10px;color:var(--faint)} .pack .btn{margin-top:16px;width:100%} .pack.mini .prix.petitprix{font-size:46px} .pack.complet .ctete{display:flex;gap:24px;align-items:flex-start;flex:1} .pack.complet .ctete>div:first-child{flex:1} .pack.complet .ctete p{margin-top:8px;font-size:13.5px;color:var(--dim);line-height:1.5} .pack.complet .cprix{text-align:right} .pack.complet .prix{font-size:56px} .souligne-prix{margin-top:18px;color:var(--faint)} @media (max-width:1000px){ .packs{grid-template-columns:1fr 1fr} .packs.bas{grid-template-columns:1fr} .pack.complet .ctete{flex-wrap:wrap} .pack.complet .cprix{text-align:left} } @media (max-width:540px){ .packs{grid-template-columns:1fr} } .credits{margin-top:26px;border:1px dashed var(--rule-2);padding:24px;border-radius:var(--radius); font-size:15px;color:var(--dim)} .credits strong{color:var(--ink);font-weight:600} /* 🔴 Ce bloc s'appelait `.who` en v1, et le libelle de chaque message de l'assistant AUSSI (`.chat .msg .who`). La regle generique lui posait donc un `border-top`, 80 px de marge et 64 px de retrait : le mot « Vous » tombait en bas de sa cellule, sous un filet. C'est la meme collision que `.claim` et que `.hero .sub` avant elle. Renomme, jamais rescope : un nom distinct ne peut pas se reproduire, une portee si. */ .equipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,66px);align-items:center;margin-top:clamp(46px,6vh,80px); border-top:1px solid var(--rule);padding-top:clamp(40px,5vh,64px)} .equipe .say{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.3vw,30px); line-height:1.26;margin-top:16px} .equipe .body{color:var(--dim);margin-top:20px;font-size:15.5px} .equipe .body b{color:var(--ink);font-weight:600} /* ========================================================================== LA PLAQUE DU STUDIO · elle remplace les deux portraits, qui etaient des cases vides. Le logo seul, en grand, et l'adresse ECRITE NULLE PART tant que la souris n'est pas dessus : un lien affiche en toutes lettres au milieu d'un bloc de marque l'alourdit pour rien. Ce qui dit qu'on peut cliquer, c'est donc le survol, et il porte trois choses a la fois : le halo bleu s'allume, le dessin avance d'un cheveu, et l'adresse monte. Une seule d'entre elles ne suffirait pas sur un ecran tactile, ou le survol n'existe pas : le lien, lui, marche quand meme, et le nom accessible est sur le lien. ========================================================================== */ .studio{position:relative;display:grid;place-items:center; aspect-ratio:4/3;overflow:hidden;text-decoration:none; border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel); transition:border-color .25s ease, background-color .25s ease} .studio::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none; background:radial-gradient(58% 58% at 50% 44%,rgba(43,92,255,.30),rgba(43,92,255,0) 70%); transition:opacity .25s ease} /* le viewBox est recadre a la construction, donc cette largeur est celle du DESSIN, pas celle d'une boite au tiers pleine. */ .studio img{position:relative;width:min(56%,270px);height:auto; transition:transform .25s ease} .studio .allee{position:absolute;left:0;right:0;bottom:18px;text-align:center; font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase; color:var(--dim);opacity:0;transform:translateY(6px); transition:opacity .25s ease, transform .25s ease} .studio:hover{border-color:var(--accent);background:var(--panel2)} .studio:hover::before{opacity:1} .studio:hover img{transform:scale(1.045)} .studio:hover .allee{opacity:1;transform:none} .studio:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* le nom du fichier designe le FOND : `noir` sur la direction Nuit. */ .studio .sur-jour{display:none} @media (prefers-reduced-motion:reduce){ .studio,.studio img,.studio .allee{transition:none} .studio:hover img{transform:none} /* la fenetre garde sa hauteur, l'image cesse de defiler et reste en haut : le lecteur voit le titre de l'onglet, pas un fragment au hasard. */ .ecran-app .vue img{animation:none} } .refs{margin-top:26px;border-top:1px solid var(--rule);padding-top:18px} .refs .v{margin-top:12px;font-size:15px;color:var(--dim);line-height:1.95} .faq{border-top:1px solid var(--rule);margin-top:clamp(46px,6vh,80px)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;gap:18px;align-items:baseline; font-family:var(--body);font-weight:600;font-size:16.5px;min-height:48px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;color:var(--accent-ink);font-family:var(--mono)} .faq details[open] summary::after{content:"\2013"} .faq .a{padding:0 0 24px;color:var(--dim);max-width:84ch;font-size:16px} /* ---------- la bande pleine largeur ---------- */ .bande{position:relative;overflow:hidden;background:#000;border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);height:clamp(300px,46vh,560px)} .bande video,.bande img.anime{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* 🔴 LE CADRAGE DU VISAGE, corrige le 2026-08-16. `cover` recadre au CENTRE, et selon l'ecran la bande ne garde que 38 a 78 % de la hauteur de l'image. L'oeil du monteur est a 23 % du haut, mesure sur une grille au dixieme : sur un ecran large et court il sortait par le haut, et il ne restait que le bas du visage, alors que c'est l'oeil que la phrase accompagne. `object-position` en POURCENTAGE garantit le contraire d'un recadrage centre : il aligne le point X % de l'image sur le point X % de la bande, donc ce point est TOUJOURS dans le cadre. A 12 %, l'oeil tombe entre 26 et 41 % de la hauteur de la bande selon l'ecran, calcule aux deux extremes du `clamp`. */ .bande.visage video,.bande.visage img.anime{object-position:50% 12%} .bande .voile{position:absolute;inset:0; background:linear-gradient(92deg,rgba(0,0,0,.86),rgba(0,0,0,.30) 58%,rgba(0,0,0,.05))} .bande .mot{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(30px,6vh,72px)} .bande .mot .l{font-family:var(--display);text-transform:uppercase;color:#FFFAEE; font-size:clamp(30px,5.2vw,72px);line-height:.94;max-width:16ch} .bande .mot .l em{font-style:normal;color:#5B84FF} .bande .mot .s{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:rgba(255,250,238,.62)} /* ---------- 8 · appel final (R1) ---------- */ .signoff{max-width:560px;margin:0 auto 40px;border:1px solid var(--rule); border-radius:var(--radius);overflow:hidden;background:#0A0A0B;line-height:0} .signoff video,.signoff img.anime{width:100%;height:auto;display:block} .signoff-fixe{display:none;font-family:var(--display);font-size:clamp(46px,7vw,86px); letter-spacing:.13em;text-transform:uppercase;line-height:1;margin-bottom:40px} .signoff-fixe i{font-style:normal;color:var(--accent)} .final{text-align:center;padding:clamp(72px,11vh,144px) 0;position:relative;overflow:hidden} .final .fondv{position:absolute;inset:0;z-index:0;overflow:hidden} .final .fondv video,.final .fondv img.anime{width:100%;height:100%;object-fit:cover;display:block;opacity:.42} .final .fondv::after{content:"";position:absolute;inset:0; background:radial-gradient(70% 70% at 50% 50%,rgba(6,7,13,.55),rgba(6,7,13,.94))} .final .narrow{position:relative;z-index:1} .final h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(32px,5.4vw,70px);line-height:.95} .final h2 em{font-style:normal;color:var(--accent-ink)} .final p{color:var(--dim);margin:22px auto 0;max-width:54ch} .final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .final .fine{margin-top:20px} /* ---------- pied ---------- */ footer{border-top:1px solid var(--rule);padding:44px 0 62px;color:var(--faint)} footer .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between} /* 🔴 min-width autant que min-height : « CGV » faisait 20 px de large pour 24 exiges. Un lien court echappe a une regle qui ne borne que la hauteur. */ footer a{color:var(--dim);text-decoration:none;display:inline-block;padding:6px 0; min-height:26px;min-width:24px; font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase} footer a:hover{color:var(--ink)} footer .lk{display:flex;gap:24px;flex-wrap:wrap} /* 🔴 `align-items:center` : sans lui l'icone se pose sur la ligne de base du texte et flotte deux pixels trop bas a cote de « CGV ». */ footer .lk{align-items:center} footer .insta svg{width:18px;height:18px;display:block;fill:currentColor} footer .fine{margin-top:14px;font-size:13px;line-height:1.7;max-width:46ch} /* ---------- notes de maquette, hors design ---------- */ .notes{background:#000;color:#FFFAEE;border-top:3px solid #2B5CFF;padding:58px 0 92px} .notes h2{font-family:'AntonSigns',sans-serif;text-transform:uppercase;font-size:26px;letter-spacing:.06em} .notes h3{font-family:'AntonSigns',sans-serif;text-transform:uppercase;font-size:15px; letter-spacing:.10em;margin:32px 0 12px;color:#7f9bff} .notes p,.notes li{font-size:14.5px;color:rgba(255,250,238,.76);line-height:1.7} .notes ul{padding-left:20px;margin:0} .notes li{margin-bottom:9px} .notes code{background:rgba(255,250,238,.08);padding:1px 5px;font-size:13px; font-family:ui-monospace,Consolas,monospace} .notes .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .notes .red{color:#ff8a80} .notes .green{color:#8ab4ff} @media (max-width:1000px){ .equipe,.demo{grid-template-columns:1fr} .plans,.notes .grid3{grid-template-columns:1fr} .wall{grid-template-columns:repeat(3,minmax(0,1fr))} .split .grid{grid-template-columns:1fr} .split .cell+.cell{border-left:0;border-top:1px solid var(--rule)} .frow{grid-template-columns:104px 1fr;gap:10px} /* sur un telephone la colonne d'entete mangeait 132 px sur 327 */ .tl .hdr{width:52px;flex:0 0 52px;padding:0 6px;font-size:9px;letter-spacing:.04em} .tl .ruler{padding-left:52px} .tl .play{left:52px} .tl .hdr span{display:none} .tl .row{height:34px} section.r1{padding:clamp(56px,8vh,96px) 0} section.r2{padding:clamp(46px,6vh,74px) 0} .sec-head{margin-bottom:28px} .bande{height:clamp(220px,32vh,300px)} .frow .cam,.frow .len{display:none} .ctable th:nth-child(2),.ctable td.man{display:none} .nav nav{display:none} } /* ========================================================================== RETOUCHE · l'ecran RANGEMENT + DERUSH, et la ligne de paliers du haut. Aucune couleur neuve, aucune police neuve : tout se sert des variables de la v2. Ce qui est ajoute est un DECOR RESOLVE, parce que le reproche fait a l'ecran precedent etait exact : on ne reconnaissait pas le logiciel. ========================================================================== */ /* ---------- la ligne des cinq paliers, numerotee ---------- */ /* 🔴 TROIS titres en Anton dans un meme ecran demandaient une hierarchie : le titre d'ecran garde sa taille, ses deux sous-parties tombent a 0,72. « Plus gros » est tenu, sans que l'ecran devienne trois ecrans. */ .r2 .sec-head h2.grand.sous{font-size:clamp(26px,3.4vw,44px)} /* ---------- le decor RESOLVE, commun aux deux fenetres ---------- */ .reso{border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden; background:#1F1F23;box-shadow:0 30px 90px rgba(0,0,0,.45)} .reso .barre{display:flex;align-items:center;gap:10px;padding:9px 12px; background:#2A2A30;border-bottom:1px solid rgba(0,0,0,.45)} .reso .barre .t{font-family:var(--mono);font-size:10px;letter-spacing:.07em; text-transform:uppercase;color:#9BA0AC} .reso .barre .chemin{font-family:var(--mono);font-size:10px;color:#C9CDD6;margin-left:auto} .reso .corps{padding:12px;min-height:286px} /* ---------- fenetre 1 · le projet se range ---------- */ .rangeur{display:grid;grid-template-columns:172px 1fr;gap:12px} .arbre{border-right:1px solid rgba(255,255,255,.07);padding-right:10px} .arbre .n{display:flex;align-items:center;gap:7px;padding:5px 0; font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#C9CDD6;white-space:nowrap} .arbre .n.f{padding-left:14px;color:#9BA0AC} .arbre .n i{width:11px;height:9px;border-radius:1px;background:#6E7482;flex:0 0 auto} .arbre .n.f i{background:#4E5462} /* 🔴 L'etat par defaut est l'etat FINAL, pas l'etat vide. C'est la regle que la timeline du haut de page s'impose deja : si le declencheur ne part pas (onglet en arriere-plan, capture sans interaction, observateur muet), le visiteur doit voir un projet RANGE, jamais un panneau a moitie vide. */ .reso.go .arbre .n.neuf{animation:apparait .34s ease-out both;animation-delay:var(--d)} @keyframes apparait{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} .vrac{display:flex;flex-direction:column;gap:3px} .vrac .l{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:1px; background:#26262C;font-family:var(--mono);font-size:10.5px;color:#C9CDD6;white-space:nowrap} .vrac .l i{width:16px;height:10px;border-radius:1px;background:linear-gradient(135deg,#4a5570,#2a3145);flex:0 0 auto} .vrac .l .vers{margin-left:auto;font-size:9.5px;color:var(--accent-ink)} .reso.go .vrac .l .vers{animation:apparait .3s ease-out both;animation-delay:calc(var(--d) + .5s)} .reso.go .vrac .l{animation:glisse .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d)} @keyframes glisse{from{opacity:.25;transform:translateX(16px)}to{opacity:1;transform:none}} /* ---------- fenetre 2 · chaque plan est ecoute ---------- */ .grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .vgn{position:relative} .vgn .im{position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden; background:linear-gradient(112deg,#3d4560,#1c2231 24%,#6a5170 50%,#242c42 72%,#4b5674); background-size:300% 100%;animation:panner 11s linear infinite alternate;animation-delay:var(--o,0s)} .vgn .im::after{content:"";position:absolute;inset:0; background:radial-gradient(58% 68% at var(--px,40%) 45%,rgba(43,92,255,.22),transparent 70%)} .vgn .sc{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:0; box-shadow:0 0 14px 2px rgba(43,92,255,.55)} .reso.go .vgn .sc{animation:scan 1s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--d)} .vgn .wv{position:absolute;left:6px;right:6px;top:7px;height:12px;display:flex;gap:1.5px;align-items:flex-end} .vgn .wv i{flex:1;background:#FFFAEE;opacity:.28;border-radius:1px} .vgn.parle .wv i{background:var(--accent);opacity:.8} .vgn .et{display:flex;gap:5px;align-items:center;margin-top:6px} .reso.go .vgn .et{animation:apparait .3s ease-out both;animation-delay:calc(var(--d) + .85s)} .vgn .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.03em;text-transform:uppercase; border-radius:var(--pill);padding:2px 7px;border:1px solid rgba(255,255,255,.22); background:rgba(15,15,18,.82);color:#C9CDD6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vgn .tag.itw{border-color:var(--accent);color:#8FA9FF} .vgn .sco{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:#9BA0AC} .vgn .nom{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.02em; color:#9BA0AC;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:900px){.grille{grid-template-columns:repeat(4,minmax(0,1fr))}} /* a deux colonnes sur un telephone, la pastille de verdict n'a plus que ~150 px : elle perd sa chasse avant de perdre son mot. */ @media (max-width:560px){.vgn .tag{font-size:8px;letter-spacing:0;padding:2px 5px}} @media (max-width:560px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))} .rangeur{grid-template-columns:1fr} .arbre{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:0 0 8px}} /* ---------- les deux fenetres cote a cote ---------- */ .deuxfen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.4vh,44px);align-items:stretch} .fen{display:flex;flex-direction:column;margin:0} .fen .reso{flex:1;display:flex;flex-direction:column} .fen .reso .corps{flex:1} @media (max-width:1000px){.deuxfen{grid-template-columns:1fr}} .fen .tete{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap} .fen .tete .no{font-family:var(--display);font-size:26px;line-height:1;color:var(--accent-ink)} .fen .tete b{font-weight:600;font-size:17px} .fen .sous{margin-top:12px;color:var(--dim);font-size:15px} .fen .rej{margin-top:12px} /* ---------- la chute de fin d'ecran ---------- */ .memoire{margin-top:clamp(40px,5.4vh,72px);border-top:1px solid var(--rule); padding-top:clamp(30px,4vh,52px);text-align:center} .memoire p.gr{font-family:var(--serif);font-style:italic;font-weight:500; line-height:1.22;letter-spacing:.005em; font-size:clamp(25px,3.2vw,44px);max-width:30ch;margin:0 auto} .memoire em{color:var(--accent-ink)} .memoire p.pt{margin-top:18px;color:var(--dim);font-size:16.5px;max-width:62ch; margin-inline:auto} /* ========================================================================== RETOUCHE 2026-08-22 · demandes de Maxime du jour : les paliers du haut deviennent des LIENS, une section TAKES, une section COMMENT CA MARCHE, la signature du studio, les six outils nommes. Aucune police neuve. ========================================================================== */ /* ---------- les paliers : des liens reels ---------- */ /* 🔴 Des , jamais des ecoutes : un lien se copie, s'ouvre dans un onglet, se lit au clavier, s'annonce a un lecteur d'ecran. Cible tactile montee de 34 a 44 px. ⚠️ Ils ne vivent PAS dans