/* ═══════════════════════════════════════════════════════════════════════════ LA FEUILLE DE STYLE DE koulisse.com — PARTAGEE PAR TOUTES LES PAGES. Elle sort de `index.html`, ou elle vivait en ligne : le site passe a plusieurs pages (accueil, fonctionnalites, modules, tarifs, securite, questions, a propos, legal), et une direction artistique recopiee dans dix fichiers diverge au premier changement. Les pages sont FABRIQUEES par `scripts/construire.py` a partir d'un gabarit commun et d'un fragment de contenu par page : l'en-tete et le pied ne sont ecrits qu'une fois. On edite les fragments dans `pages/`, jamais les .html a la racine. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ KOULISSE · LA PAGE MERE — VERSION SOMBRE (22/08/2026) la direction, sur la premiere version : « je t'ai montré un exemple hyper moderne voire futuriste, et tu me sors un truc cheap ». Il avait raison, et voici POURQUOI c'etait cheap, pour ne pas y revenir : · des cartes blanches a filet gris de 1 px sur fond blanc. C'est le gabarit par defaut de n'importe quel site : aucune matiere, aucune profondeur ; · des titres trop petits (48 px) pour une page d'accueil ; · une seule animation, un fondu. CE QUI FAIT « CHER » EN 2026, et que font Linear, Attio, Breakly et Wispr Flow : 1. LE SOMBRE. La page vit dans le noir et la couleur devient une SOURCE DE LUMIERE. Notre jaune n'a jamais l'air aussi vif que sur du noir. 2. LA MATIERE. Une carte n'est pas un rectangle : c'est du verre pose sur de la lumiere, avec un lisere clair sur le bord haut (la ou la lumiere frappe) et une ombre large et basse. 3. LES CAPTURES RESTENT CLAIRES. Le produit est une appli blanche : posee sur du noir, elle brille toute seule. C'est le contraste qui vend, pas le fond. 4. LE MOUVEMENT REPOND. La capture s'incline vers la souris, les lueurs derivent lentement, les modules s'allument. Rien ne clignote. 5. L'ECHELLE. Un titre d'accueil monte a 92 px. En dessous, ca ressemble a un article. Ce qui ne change pas : la structure validee (pour qui / c'est quoi / comment, puis la preuve a l'ecran), les mots simples, et zero faux logo de client. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* LA TYPO EST LE VRAI COUPABLE DU « CHEAP » (22/08). Unbounded est une police d'AFFICHE : large, ronde, joueuse. Sur une affiche de spectacle, elle est juste ; sur une page de logiciel, elle dit « fanzine », pas « outil de travail ». Toutes les references citees (Breakly, Linear, Attio, Vercel) tiennent un grotesque neutre. Unbounded ne garde donc QUE le mot-marque, la ou elle porte l'identite. Tout le reste, titres compris, passe en Inter serre. C'est le changement qui fait le plus de chemin. */ --display:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --marque:"Unbounded", system-ui, sans-serif; --sans:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --jaune:#f6c744; --jaune-clair:#ffe9a3; --jaune-chaud:#ffb648; --nuit:#141011; --nuit-2:#1c1618; --creme:#fdf7e8; --blanc:#fff; /* LE SOMBRE N'EST PAS AU DEBUT (retour produit, 22/08 : « Breakly sont pas en fond noir », puis « en tous cas pas au debut »). Leur premier ecran est un VIOLET VIF en degrade, avec un en-tete blanc et le titre a gauche ; le sombre n'arrive jamais en haut. Chez nous, la couleur vive est le JAUNE, et sur du jaune on ecrit en ENCRE, jamais en blanc (c'est deja la loi de l'application : le jaune est un fond, pas une couleur de texte). Le premier ecran est donc un degrade chaud creme -> or, texte encre, capture posee a droite. Le sombre reste, mais il descend : il sert aux MODULES, ou chaque couleur brille sur le noir, et au dernier appel. */ /* LISIBILITE (retour produit, 22/08 : « c'est deja mieux mais pas assez lisible »). Les trois niveaux etaient regles trop bas (94 / 62 / 38 %) : sur du noir, un gris a 38 % passe sous le seuil de confort des que l'ecran n'est pas parfait. On remonte a 96 / 82 / 62, et le texte courant grossit d'un point partout. C'est ce que fait la reference : leur paragraphe est en blanc a ~85 %, pas en gris. */ /* TOUTE LA PAGE EST SOMBRE (retour produit, 22/08 : « t'avais fait un truc super tout a l'heure, en sombre, c'etait top »). La nuit est TEINTEE, jamais noire : un brun encre, la couleur d'une salle rideau ferme, ou le jaune se pose comme une lumiere de service. Les captures du produit, elles, restent blanches : c'est le contraste qui les fait briller, et c'est le meme principe chez toutes les references citees. */ --texte:rgba(255,252,246,.96); --texte-2:rgba(253,247,232,.82); --texte-3:rgba(253,247,232,.62); --bord:rgba(255,255,255,.12); --bord-fort:rgba(255,255,255,.22); --radar:#1d9bf0; --pointage:#e11d48; --ads:#2563eb; --form:#6366f1; --visio:#14b8a6; --resa:#f97316; --max:1220px; --r-xl:32px; --r-l:24px; --r-m:18px; --r-s:12px; --ressort:cubic-bezier(.2,.9,.25,1); /* LA MATIERE, definie une fois : du verre pose sur la lumiere. Le lisere clair du haut (`inset 0 1px 0`) est le detail qui separe une vraie carte d'un rectangle. */ --verre:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%); --ombre:0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:var(--sans);background:var(--nuit);color:var(--texte); line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block} ::selection{background:var(--jaune);color:var(--nuit)} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:2} /* ── LE FOND VIVANT : trois lueurs qui derivent tres lentement sous toute la page. Elles sont FIXES : le fond ne defile pas avec le contenu, ce qui donne la profondeur (le contenu glisse DEVANT une lumiere). ─────────────────────────────────────────── */ .fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* LES LUEURS RESTENT DERRIERE LES VISUELS, PAS DERRIERE LES MOTS : a 50 % elles traversaient les paragraphes et le fond changeait de couleur au milieu d'une phrase, ce qui fatigue sans qu'on sache pourquoi. */ .fond b{position:absolute;display:block;border-radius:50%;filter:blur(110px);opacity:.34} .fond .b1{width:820px;height:820px;top:-380px;left:50%;margin-left:-500px; background:radial-gradient(circle,rgba(246,199,68,.55),transparent 66%); animation:derive1 26s ease-in-out infinite alternate} .fond .b2{width:700px;height:700px;top:12%;right:-260px; background:radial-gradient(circle,rgba(29,155,240,.4),transparent 68%); animation:derive2 32s ease-in-out infinite alternate} .fond .b3{width:640px;height:640px;top:52%;left:-240px; background:radial-gradient(circle,rgba(225,29,72,.3),transparent 68%); animation:derive3 38s ease-in-out infinite alternate} @keyframes derive1{to{transform:translate(90px,60px) scale(1.12)}} @keyframes derive2{to{transform:translate(-110px,80px) scale(1.08)}} @keyframes derive3{to{transform:translate(80px,-70px) scale(1.14)}} .trame{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 70%)} /* ── Echelle de type ───────────────────────────────────────────────────── */ /* Des tailles de LOGICIEL : 54 px pour le titre d'accueil, 38 pour une section. Au-dessus, on tombe dans l'affiche, et c'est exactement ce qui faisait « pas serieux ». */ .h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.08; font-size:clamp(31px,4vw,54px);overflow-wrap:break-word} .h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.12; font-size:clamp(24px,3vw,38px);overflow-wrap:break-word} .h3{font-weight:600;letter-spacing:-.015em;font-size:18px;line-height:1.32} .lead{font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--texte-2)} .corps{font-size:16.5px;line-height:1.6;color:var(--texte-2)} .oeil{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3)} .pt{color:var(--jaune)} /* ── L'EN-TETE : une pilule de verre qui flotte ────────────────────────── */ header.top{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90; width:min(var(--max),calc(100% - 28px));height:60px;display:flex;align-items:center; justify-content:space-between;padding:0 10px 0 20px;border-radius:999px; /* PILULE BLANCHE, comme la reference : sur un premier ecran colore, un en-tete sombre fait une barre qui coupe la page en deux. Le blanc s'y pose et disparait. */ background:rgba(24,18,21,.6);border:1px solid rgba(255,255,255,.12);color:var(--texte); backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:0 4px 20px -8px rgba(20,16,17,.22); transition:background .35s ease, box-shadow .35s ease} header.top.pose{background:rgba(24,18,21,.88);box-shadow:0 14px 40px -18px #000} header.top .kmark{color:var(--jaune)} header.top .btn-verre{background:rgba(255,255,255,.08);color:var(--texte);border-color:rgba(255,255,255,.16)} header.top .btn-jaune{background:linear-gradient(180deg,var(--jaune-clair),var(--jaune) 55%,var(--jaune-chaud)); color:#1a1405;box-shadow:0 8px 24px -8px rgba(246,199,68,.6), inset 0 1px 0 rgba(255,255,255,.6)} .brand{font-family:var(--marque);font-weight:800;font-size:22px;letter-spacing:-.05em; display:inline-flex;align-items:center;gap:3px;cursor:pointer; padding:11px 6px;margin:-11px -6px;border-radius:14px; transition:opacity .2s ease,transform .3s var(--ressort)} .brand:hover{opacity:.86} .brand:active{transform:scale(.97)} .kmark{height:.9em;width:auto;color:var(--jaune);margin-right:.3em} .nav-actions{display:flex;align-items:center;gap:8px} /* ── Boutons ───────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600; border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative; transition:transform .3s var(--ressort), box-shadow .3s var(--ressort), background .25s ease} .btn:hover{transform:translateY(-2px)} .btn-jaune{background:linear-gradient(180deg,var(--jaune-clair),var(--jaune) 55%,var(--jaune-chaud)); color:#1a1405;box-shadow:0 10px 34px -8px rgba(246,199,68,.65), inset 0 1px 0 rgba(255,255,255,.6)} .btn-jaune:hover{box-shadow:0 16px 46px -8px rgba(246,199,68,.85), inset 0 1px 0 rgba(255,255,255,.7)} .btn-verre{background:var(--verre);color:var(--texte);border-color:var(--bord-fort); box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} .btn-verre:hover{border-color:rgba(255,255,255,.3)} .btn-sm{height:40px;padding:0 18px;font-size:14px} /* ── LA CARTE DE VERRE : une seule definition pour toute la page ────────── */ .carte{background:var(--verre);border:1px solid var(--bord);border-radius:var(--r-l); box-shadow:var(--ombre); transition:transform .4s var(--ressort), border-color .4s ease, box-shadow .4s var(--ressort)} /* ═══ 1. LE PREMIER ECRAN ════════════════════════════════════════════════ Degrade CHAUD, jamais sombre (cf. le bloc du haut). Le titre est a gauche, la capture a droite : c'est la disposition qui laisse lire une phrase longue tout en montrant le produit, et c'est ce que fait la reference. Le texte est en ENCRE : sur du jaune, un texte blanc ne se lit pas. */ /* CE QUI FAISAIT « CHEAP » : un degrade PALE. La reference tient un violet profond et SATURE, edge to edge, qui porte du texte blanc. Un jaune clair ne peut pas faire ca : le blanc n'y tient pas, et le pale lit comme un fond de brochure. La version saturee de notre palette n'est pas le jaune citron, c'est le CHEMIN DU JAUNE VERS L'AMBRE BRULE : brun dore a gauche (la ou vit le texte, donc le blanc y tient), or a droite (derriere la capture, qui reste blanche et y brille). C'est aussi, litteralement, la lumiere d'une salle : un ambre chaud qui vient de cote. */ .hero{position:relative;padding:136px 0 96px;overflow:hidden;color:var(--texte); /* PLUS D'ORANGE (retour produit, 22/08 : « le jaune orange degeu, c'est pas possible »). Il avait raison sur le fond : l'ambre plein ecran tirait vers le roux, et ce n'est nulle part dans la charte. La charte de Koulisse, c'est le CREME (#fdf7e8) avec des panneaux blancs qui flottent et le jaune en accent, exactement ce que le client verra en ouvrant l'application. Le premier ecran doit ressembler au produit, pas a une affiche. Le jaune ne sert plus de fond : il surligne, il remplit une jauge, il eclaire un bord. */ background: radial-gradient(1000px 640px at 74% 2%, rgba(246,199,68,.3), transparent 62%), radial-gradient(760px 560px at 8% 88%, rgba(225,29,72,.16), transparent 66%), linear-gradient(168deg,#1b1518 0%,var(--nuit) 60%,#120e10 100%)} /* le grain de lumiere : sans lui, un degrade est un aplat de peinture */ .hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6; background-image:radial-gradient(circle at 22% 30%,rgba(29,155,240,.14),transparent 48%)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000,transparent 70%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 20%,#000,transparent 70%)} .hero-grille{display:grid;grid-template-columns:1.02fr 1.08fr;gap:52px;align-items:center; position:relative;z-index:2} /* Dans une colonne (et non plus en pleine largeur), le titre doit descendre : a 80 px il tombait sur QUATRE lignes. */ .hero .hero .lead{margin:22px 0 0;max-width:560px;color:var(--texte-2)} .qui{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 17px; border-radius:999px;background:var(--verre);border:1px solid var(--bord); font-size:14px;font-weight:600;color:var(--texte);margin-bottom:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .qui .pastille{width:7px;height:7px;border-radius:50%;background:#10b981; box-shadow:0 0 10px 1px rgba(16,185,129,.55);animation:pulse 2.6s ease-in-out infinite} @keyframes pulse{50%{opacity:.4}} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .sous-cta{margin-top:18px;font-size:14.5px;color:var(--texte-2);display:flex; align-items:center;gap:8px;flex-wrap:wrap} .sous-cta b{color:var(--texte);font-weight:600} .hero .btn-verre{background:var(--verre);color:var(--texte);border-color:var(--bord-fort)} .hero .btn-verre:hover{border-color:rgba(255,255,255,.4)} /* ═══ LA DATE, ET TOUT CE QUI S'Y ACCROCHE ═══════════════════════════════ Retour produit : « c'est tres IA, je te pensais plus creatif. Il faut que ce soit visuel, qu'on comprenne de suite c'est quoi Koulisse. » Ce que le produit est vraiment tient en un objet : LA DATE. Un soir, dans une salle. Tout le reste s'y accroche. Une capture d'ecran ne montre pas ca ; une liste de fonctions non plus. Un schema vivant, si : la date au centre, et les sept choses qui viennent s'y attacher une par une, reliees par un fil. En trois secondes, on a compris le produit, et aucun concurrent ne peut montrer la meme image parce qu'aucun ne tient toute la chaine. Tout est dessine en CSS : rien a telecharger, net sur tous les ecrans. */ .constellation{position:relative;height:640px;display:flex;align-items:center;justify-content:center} .fils{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} /* Le fil ACTIF passe au jaune : c'est l'information qui circule vers la date. */ .fils path.actif{stroke:var(--jaune);stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(246,199,68,.7))} .fils path{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.5;stroke-linecap:round; transition:stroke .5s ease, stroke-width .5s ease, filter .5s ease; animation:trace .8s var(--ressort) both} @keyframes trace{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}} /* LE NOYAU : la date. Il est plus grand, plus contraste, et il ne bouge pas. */ /* LE NOYAU EST UNE CARTE BLANCHE SUR UNE PAGE SOMBRE : sa couleur de texte doit etre ECRITE, pas heritee, sinon elle prend le creme de la page et disparait. */ .noyau{position:relative;z-index:3;width:270px;padding:20px 22px;border-radius:20px; background:#fff;color:#141011;text-align:left; box-shadow:0 30px 70px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.6), 0 0 60px -20px rgba(246,199,68,.5); animation:noyauEntre .8s var(--ressort) both} @keyframes noyauEntre{from{opacity:0;transform:scale(.9)}} .noyau .et{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--jaune-fonce);margin-bottom:8px;display:block} .noyau .nom{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2} .noyau .quand{font-size:13px;white-space:nowrap;color:rgba(20,16,17,.66);margin-top:4px} .noyau .jauge{margin-top:14px;height:7px;border-radius:99px;background:rgba(20,16,17,.1);overflow:hidden} .noyau .jauge i{display:block;height:100%;border-radius:99px;width:97%; background:linear-gradient(90deg,var(--jaune),var(--jaune-chaud)); animation:remplit 1.6s .6s var(--ressort) both; transition:width .9s var(--ressort)} @keyframes remplit{from{width:0}} .noyau .chiffre{display:flex;justify-content:space-between;font-size:12px;margin-top:7px; color:rgba(20,16,17,.66)} .noyau .chiffre b{color:#141011} /* LES SATELLITES DISENT CE QUI VIENT DE SE PASSER, PAS UN MOT-CLEF (retour produit : « la t'as juste des pills avec des infos, on comprend pas, et en info ca peut etre mieux »). Chacune porte donc trois choses : son icone (le vrai logo quand il s'agit d'une plateforme), ce qui s'est passe, et QUAND ou COMBIEN. « Pub coupee » ne dit rien ; « Pub Instagram et Facebook coupee, c'est complet » raconte le produit. */ .sat{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px; padding:9px 14px;border-radius:16px;white-space:nowrap; background:var(--verre);border:1px solid var(--bord-fort);color:var(--texte); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:0 14px 30px -16px #000, inset 0 1px 0 rgba(255,255,255,.12); animation:satEntre .6s var(--ressort) both; transition:border-color .5s ease, box-shadow .5s ease, transform .5s var(--ressort)} .sat.actif{border-color:rgba(246,199,68,.6);transform:translateY(-2px); box-shadow:0 0 28px -6px rgba(246,199,68,.65), inset 0 1px 0 rgba(255,255,255,.16)} /* LE LOGO DU MODULE, DANS SA COULEUR (retour produit : « faut voir le logo du module, faut un peu de couleur »). Chaque pastille porte une tuile a la teinte de son module : bleu pour le Radar, crimson pour le Pointage, bleu Meta pour la Publicite, jaune pour le CRM. C'est la meme regle que dans l'application, ou un module porte sa couleur partout. */ .sat .ico{flex:none;width:30px;height:30px;border-radius:10px;display:flex;align-items:center; justify-content:center;gap:3px; background:var(--m,var(--jaune));color:#fff; box-shadow:0 6px 16px -8px var(--m,var(--jaune)), inset 0 1px 0 rgba(255,255,255,.35)} /* le jaune du CRM porte du texte ENCRE, jamais du blanc (loi de la charte) */ /* pastille jaune : l'icone dedans est en ENCRE (le jaune ne porte pas de blanc) */ .sat .ico.enc{color:#1a1405} /* la tuile des plateformes garde SES couleurs : un logo Meta repeint perd sa raison d'etre */ /* PAS DE TUILE SOUS UN LOGO DE MARQUE : il porte deja sa couleur, et un fond blanc au milieu d'une pastille sombre devient la chose la plus voyante de l'ecran. */ .sat .ico.nu,.sat .ico.match{background:none;box-shadow:none;width:auto;gap:6px;padding:0} .sat .ico.nu svg{width:19px;height:19px} .sat .ico.match img{width:auto;height:22px;display:block} .sat .ico.match img[src$=".svg"]{height:20px} /* LES LOGOS DE CLUBS SONT CEUX QUE LA DIRECTION A FOURNIS (fichiers officiels, 22/08). Ce sont des marques deposees : ils ne sont la QUE comme contenu d'une alerte du Radar (« ce soir-la, il y a ce match a cote »), jamais comme une reference client ni un partenariat. Meme raison pour Instagram et Facebook : ce sont les plateformes ou le produit publie vraiment. Le vrai logo est ce qui rend l'alerte credible ; un pictogramme generique ferait « fait maison ». */ .sat .ico.foot svg{width:17px;height:17px} .sat .ico svg{width:15px;height:15px} .sat .ico.duo{width:auto;padding:0 8px;gap:5px} .sat .ico.duo svg{width:13px;height:13px} .sat{border-left:2px solid color-mix(in srgb,var(--m,var(--jaune)) 55%,transparent)} .sat .ok{width:17px;height:17px;border-radius:50%;background:#10a34a;flex:none; display:flex;align-items:center;justify-content:center} .sat .ok svg{width:10px;height:10px;color:#fff} .sat .txt{display:flex;flex-direction:column;line-height:1.2} .sat .txt b{font-size:13px;font-weight:600;white-space:nowrap} .sat .txt em{font-style:normal;font-size:11.5px;color:var(--texte-3);margin-top:2px; white-space:normal;max-width:27ch;line-height:1.35; white-space:normal;max-width:210px;line-height:1.25} /* la pastille du pointage porte sa propre jauge, qui monte avec le chiffre */ .sat .mini-jauge{width:54px;height:5px;border-radius:99px;background:rgba(255,255,255,.14); overflow:hidden;margin-top:5px} .sat .mini-jauge i{display:block;height:100%;border-radius:99px;width:97%; background:var(--pointage);transition:width .9s var(--ressort)} @keyframes satEntre{from{opacity:0;transform:translateY(10px) scale(.94)}} /* Les positions sont posees par `placerLesSatellites()` : ces valeurs ne sont qu'un point de depart pour le premier rendu, avant que le script ne mesure les boites. */ .s1{top:2%;left:0} .s2{top:0;right:0} .s3{top:30%;left:-4%} .s4{top:26%;right:-4%} .s5{bottom:26%;left:0} .s6{bottom:12%;right:-2%} .s7{bottom:2%;left:28%} /* LA CAPTURE S'INCLINE VERS LA SOURIS : sans ce geste, une capture posee a plat reste une image collee. */ .scene{perspective:1600px;position:relative;z-index:2} /* L'ecran deborde de sa colonne : une capture de logiciel reduite a 500 px ne se lit plus. On la sort du cadre a droite, comme le font les landings qui montrent un vrai produit. */ .capture img{width:128%;max-width:none;height:auto;display:block} .cadre img{width:100%;height:auto;display:block} .capture{text-align:left;position:relative;border-radius:var(--r-xl);overflow:hidden; background:var(--blanc);color:#141011;border:1px solid rgba(255,255,255,.7); box-shadow:0 50px 90px -34px rgba(70,45,0,.55), 0 6px 20px -8px rgba(70,45,0,.2); transform:rotateY(-4deg) rotateX(4deg);transform-style:preserve-3d; transition:transform .6s var(--ressort); animation:monte 1s var(--ressort) both} @keyframes monte{from{opacity:0;transform:rotateY(-9deg) rotateX(9deg) translateY(34px) scale(.95)}} .capture-barre{height:40px;display:flex;align-items:center;gap:7px;padding:0 16px; background:#f7f7f8;border-bottom:1px solid rgba(10,10,11,.07)} .capture-barre i{width:9px;height:9px;border-radius:50%;background:#dcdce0;display:block} .capture-barre span{margin-left:10px;font-size:11.5px;color:#a0a0a8} /* Quatre chiffres dans une demi-largeur d'ecran s'ecrasaient (« 42 300 € » sur trois lignes) : deux par ligne, et ils redeviennent lisibles. */ .capture .kpis{grid-template-columns:repeat(2,1fr)} /* LA SORTIE DU PREMIER ECRAN : le jaune s'eteint vers le blanc de la section suivante, sinon la coupure est une ligne droite en travers de la page. */ /* LE VOILE PASSE SOUS LE CONTENU (z-index 1, pas 3) : au-dessus, il estompait la derniere ligne du texte et coupait le bas de la capture. Il n'est la que pour eteindre l'ambre vers le blanc de la section suivante. */ .hero-sortie{position:absolute;left:0;right:0;bottom:0;height:80px;z-index:1; pointer-events:none;background:linear-gradient(180deg,transparent,var(--nuit))} /* ═══ 1bis. TOUT CE QUE CA FAIT ══════════════════════════════════════════ la direction, 22/08 : « des le debut, quand tu arrives sur la page, il faut qu'on comprenne TOUT ce que ca fait ». C'etait le vrai manque : la page disait « un seul outil » sans jamais dire ce qu'il y a dedans, alors que l'etendue EST l'argument. Quatre familles, dans l'ordre du metier : vendre, organiser, remplir, compter. */ .tout{padding:100px 0 110px} .familles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px} .fam{padding:26px 24px;border-radius:var(--r-l);background:var(--verre); border:1px solid var(--bord);box-shadow:var(--ombre);position:relative;overflow:hidden; transition:transform .4s var(--ressort), border-color .4s ease} .fam:hover{transform:translateY(-4px);border-color:var(--bord-fort)} /* PLUS DE HALO DE COULEUR DERRIERE CHAQUE CARTE : quatre cartes, quatre teintes pastel, ca faisait un paquet de bonbons. La couleur ne reste que sur l'icone. */ .fam .tete{display:flex;align-items:center;gap:11px;margin-bottom:16px;position:relative} .fam .ico{width:36px;height:36px;border-radius:11px;display:flex;align-items:center; justify-content:center;color:#fff;flex:none; background:linear-gradient(180deg,color-mix(in srgb,var(--c) 88%,white 12%),var(--c)); box-shadow:0 8px 20px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.45)} .fam .ico svg{width:19px;height:19px} .fam h3{font-size:17px;font-weight:600;letter-spacing:-.02em} .fam ul{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative} .fam li{font-size:15px;line-height:1.45;color:var(--texte-2);display:flex;gap:9px;align-items:flex-start} .fam li b{color:var(--texte);font-weight:600} .fam li svg{flex:none;margin-top:4px;color:var(--c)} /* la phrase qui compare, sous la grille */ .remplace{margin-top:30px;padding:24px 28px;border-radius:var(--r-l); background:var(--verre);border:1px solid var(--bord); display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between} .remplace p{font-size:17px;line-height:1.5;max-width:760px} .remplace b{color:var(--jaune)} /* ═══ 2. LES TROIS REPONSES ══════════════════════════════════════════════ */ .reponses{padding:130px 0 0} .trois{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rep{padding:30px} .rep:hover{transform:translateY(-4px);border-color:var(--bord-fort)} .rep .q{font-size:13px;font-weight:600;color:var(--jaune);margin-bottom:12px} .rep h3{margin-bottom:10px} /* ═══ 2bis. LES CHIFFRES ═════════════════════════════════════════════════ */ .preuves{padding:64px 0 0} .preuves-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 34px; border-radius:var(--r-l);background:var(--verre);border:1px solid var(--bord); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .pv{text-align:center} .pv .v{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,28px); letter-spacing:-.03em} .pv .k{font-size:14px;color:var(--texte-2);margin-top:5px} /* ═══ 3. LE PARCOURS ═════════════════════════════════════════════════════ */ .parcours{padding:140px 0 0} .etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px} .etape{padding:28px 24px;position:relative;overflow:hidden} .etape:hover{transform:translateY(-4px);border-color:var(--bord-fort)} .etape .n{width:30px;height:30px;border-radius:50%; background:linear-gradient(180deg,var(--jaune-clair),var(--jaune-chaud));color:#1a1405; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700; margin-bottom:16px;box-shadow:0 6px 18px -4px rgba(246,199,68,.7)} .etape h3{font-size:17px;margin-bottom:7px} .etape p{font-size:15.5px;line-height:1.55;color:var(--texte-2)} /* ═══ 3bis. LES BLOCS PRODUIT ════════════════════════════════════════════ */ .bloc{padding:140px 0 0} .bloc-in{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center} .bloc.inverse .bloc-in{grid-template-columns:1.1fr 1fr} .bloc.inverse .bloc-txt{order:2} .bloc-txt .h2{font-size:clamp(24px,2.6vw,34px);margin:12px 0 14px} .bloc-txt ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px} .bloc-txt li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--texte-2)} .bloc-txt li svg{flex:none;margin-top:4px;color:var(--jaune)} /* ═══ LA LIGNE DE PROMESSE ═══════════════════════════════════════════════ Sept phrases, une par module, ecrites pour etre comprises sans rien connaitre : « Tu ne paies plus de publicite pour une salle deja pleine. » C'est le meilleur texte du site, et il n'avait AUCUN style : meme corps, meme gris que le paragraphe d'explication en dessous. Un lecteur qui survole ne pouvait pas la distinguer. Breakly colore cette ligne-la. Nous, on ne peut pas : le jaune est un fond, jamais un texte. Donc le texte passe en blanc franc et c'est un FILET jaune qui porte la couleur, a gauche. Le socle dit de quel module on parle ; le filet dit que la promesse est celle de Koulisse. */ .promesse{font-size:clamp(17px,1.4vw,19.5px);font-weight:650;line-height:1.45; letter-spacing:-.015em;color:var(--texte); margin:0 0 15px;padding-left:15px;border-left:3px solid var(--jaune)} /* ═══ LE SOCLE ═══════════════════════════════════════════════════════════ Chez Breakly, aucune capture n'est posee nue sur la page : elle est TOUJOURS dans un rectangle lilas arrondi, avec de la marge tout autour. C'est ce cadre qui fait « pose, dessine » au lieu de « colle ». On reprend le geste, avec notre nuit a nous. Le socle porte la couleur DU MODULE (--lueur, deja definie scene par scene) : le rouge du Pointage, l'orange de la Reservation, le bleu du Radar. Une page qui ne connait que le jaune se lit comme un gabarit ; c'est la couleur qui dit « ici, on change de sujet ». La teinte est A L'INTERIEUR du socle (overflow:hidden), plus un halo dehors, sinon elle bave sur la section et se melange au fond. */ .visuel{position:relative;isolation:isolate;overflow:hidden; padding:clamp(18px,2.4vw,34px);border-radius:34px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} /* La teinte se tient AUX BORDS. Posee au centre elle passe derriere l'ecran, ou on ne la voit pas, et sur les coins libres elle vire au brun. Aux bords elle fait ce qu'on lui demande : dire de quel module on parle, sans salir. */ .visuel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.34; background: radial-gradient(60% 46% at 6% -4%,var(--lueur,rgba(246,199,68,.5)),transparent 72%), radial-gradient(52% 44% at 104% 104%,var(--lueur,rgba(246,199,68,.5)),transparent 74%)} /* un filet de la couleur du module sur l'arete : c'est peu, mais c'est ce qui fait « choisi » plutot que « gris par defaut ». */ .visuel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px var(--lueur,rgba(246,199,68,.5));opacity:.3} .cadre{position:relative;z-index:1;border-radius:var(--r-l);overflow:hidden;background:var(--blanc); color:#0a0a0b;border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .5s var(--ressort)} .visuel:hover .cadre{transform:translateY(-6px)} /* ═══ LES DEUX COTES D'UN MEME GESTE, REJOUES ════════════════════════════ Retour produit : « c'est des screenshots, beurk. Copie-colle le module exact pour le montrer en ANIMATION ». Deux images fixes reliees par un fil ne montrent pas le geste : elles le racontent. Les deux ecrans sont donc REJOUES en HTML, avec les memes mots et les memes couleurs que le produit (crimson du module Pointage a gauche, rapport a droite), et la sequence tourne en boucle : le chiffre se tape chez la salle, le bouton part, la bille traverse, et chez toi le taux monte, la jauge se remplit, une ligne s'ajoute a l'historique. Aucune image : c'est net partout, ca pese quelques kilo-octets, et ca reste vrai le jour ou l'ecran change (c'est le MECANISME qui est montre, pas une photo d'une version). */ /* Les deux cartes s'alignent EN HAUT et gardent leur hauteur propre : etirer la plus courte pour egaliser creait un vide de 90 px au-dessus de son bouton. */ .demo{display:grid;grid-template-columns:1fr 88px 1fr;align-items:start;margin-top:52px} .demo .tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px; font-size:13px;font-weight:700;padding:7px 15px 7px 7px;border-radius:999px; background:var(--pointage);color:#fff;border:0} .demo .tag .p{display:flex;align-items:center;justify-content:center;flex:none; width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22); font-size:12px;font-weight:800} /* le deuxieme ecran est le TIEN : il porte le jaune de l'app, et le jaune ne porte jamais du texte blanc (loi de la charte). */ .demo .mien .tag{background:var(--jaune);color:#1a1405} .demo .mien .tag .p{background:rgba(26,20,5,.16)} /* la carte blanche commune aux deux ecrans */ .ecran{position:relative;z-index:1;background:#fff;color:#141011;border-radius:20px;padding:22px 22px 20px; box-shadow:0 30px 70px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.5); display:flex;flex-direction:column} .ecran .haut{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--pointage);border-bottom:2px solid var(--pointage);display:inline-block; padding-bottom:3px;margin-bottom:10px;align-self:flex-start} .ecran .titre{font-size:18px;font-weight:700;letter-spacing:-.02em} .ecran .sous{font-size:12.5px;color:rgba(20,16,17,.6);margin-top:3px} .tete-rapport{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} /* l'etat en un mot, avec sa pastille : c'est le vocabulaire du produit */ .etat{flex:none;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px; background:#10a34a;color:#fff;box-shadow:0 6px 16px -8px rgba(16,163,74,.9); transition:background .4s ease, color .4s ease} .etat.neuf{background:var(--jaune);color:#1a1405;box-shadow:0 6px 16px -8px rgba(246,199,68,.9)} /* LA LIGNE « AUTOMATIQUE » : elle explique le produit a quelqu'un qui ne le connait pas. Sans elle, l'ecran de droite n'est qu'un tableau de chiffres de plus ; avec elle, on comprend que le logiciel va CHERCHER le chiffre a la place de l'utilisateur. */ .auto{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 14px; border-radius:14px;background:#faf7ef;border:1px solid rgba(20,16,17,.07)} .auto .ico{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center; justify-content:center;background:var(--jaune);color:#1a1405} .auto .ico svg{width:17px;height:17px} .auto .t{font-size:13.5px;font-weight:600;line-height:1.25} .auto .d{font-size:12px;color:rgba(20,16,17,.58);margin-top:2px} .auto .on{flex:none;margin-left:auto;font-size:11.5px;font-weight:700;padding:5px 11px; border-radius:999px;background:rgba(20,16,17,.06);color:rgba(20,16,17,.75)} .histo .ht{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(20,16,17,.45);margin-bottom:6px} /* ── L'ecran de la salle ── */ .salle-quand{font-size:16px;font-weight:700;text-align:center;margin-bottom:14px} .salle-lab{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(20,16,17,.55);text-align:center;margin-bottom:8px} .champ{cursor:text;height:62px;border-radius:14px;border:2px solid var(--pointage);display:flex; align-items:center;justify-content:center;font-size:26px;font-weight:700; letter-spacing:-.02em;box-shadow:0 0 0 4px rgba(225,29,72,.1)} .champ #saisie{outline:none;min-width:8px} .champ.saisi .curseur{display:none} .champ .curseur{display:inline-block;width:2px;height:26px;margin-left:3px; background:var(--pointage);animation:clignote 1s steps(2) infinite} @keyframes clignote{50%{opacity:0}} .salle-aide{font-size:11.5px;color:rgba(20,16,17,.55);text-align:center;margin-top:9px} /* L'AVERTISSEMENT DE SURCOMPLET : ambre, pas rouge. Rien n'est casse, rien n'est refuse ; on prévient, et la salle decide. Un rouge ici ferait croire a une erreur bloquante. */ .alerte{max-height:0;overflow:hidden;text-align:center;font-size:12.5px;font-weight:600; color:#8a6a08;transition:max-height .35s var(--ressort), margin .35s var(--ressort)} .alerte.on{max-height:44px;margin-top:10px} .piste.trop i{background:var(--jaune)} .etat.trop{background:var(--jaune);color:#1a1405;box-shadow:0 6px 16px -8px rgba(246,199,68,.9)} .salle-jauge{display:flex;align-items:center;justify-content:center;gap:8px; font-size:13px;color:rgba(20,16,17,.6);margin-top:14px;margin-bottom:18px} .salle-jauge b{background:#f4f4f5;border-radius:9px;padding:5px 11px;font-weight:700;color:#141011} .bouton-salle{cursor:pointer;user-select:none;height:46px;border-radius:13px;background:var(--pointage); color:#fff;font-size:14.5px;font-weight:700;display:flex;align-items:center; justify-content:center;box-shadow:0 12px 26px -10px rgba(225,29,72,.7); transition:transform .25s var(--ressort), box-shadow .25s var(--ressort)} .bouton-salle.presse{transform:scale(.96);box-shadow:0 6px 14px -8px rgba(225,29,72,.7)} .propulse{text-align:center;font-size:10.5px;color:rgba(20,16,17,.4);margin-top:10px} /* ── L'ecran du rapport ── */ /* UN SEUL CHIFFRE, EN GRAND (retour produit : « epure, que les infos essentielles pour une landing »). Deux cases cote a cote partageaient l'attention ; sur une landing, le taux de remplissage est LE chiffre, le reste est du detail d'application. */ .kpi-plein{margin-top:18px;border:1px solid rgba(20,16,17,.09);border-radius:15px;padding:16px 18px} .kpi-plein .v{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1} .kpi-plein .s{font-size:13px;color:rgba(20,16,17,.6);margin-top:6px} .piste{height:6px;border-radius:99px;background:rgba(20,16,17,.09);margin-top:8px;overflow:hidden} .piste i{display:block;height:100%;border-radius:99px;background:var(--pointage); width:71%;transition:width 1.1s var(--ressort)} .histo{margin-top:16px} .histo .l{font-size:13px;color:rgba(20,16,17,.62);padding:8px 0; border-bottom:1px solid rgba(20,16,17,.06);display:flex;justify-content:space-between} .histo .l b{color:#141011} .histo .l.neuve{animation:ligneEntre .6s var(--ressort) both} @keyframes ligneEntre{from{opacity:0;transform:translateY(-6px)}} .histo .l.neuve b{color:var(--pointage)} /* le fil et sa bille */ .flux{position:relative;height:3px;border-radius:99px;margin-top:140px; background:linear-gradient(90deg,rgba(225,29,72,.4),rgba(246,199,68,.5))} .flux .bille{position:absolute;top:50%;left:0;width:13px;height:13px;margin-top:-6.5px; border-radius:50%;background:var(--jaune);opacity:0; box-shadow:0 0 18px 5px rgba(246,199,68,.8)} .flux .bille.part{animation:voyage 1.1s cubic-bezier(.4,0,.2,1) forwards} @keyframes voyage{0%{left:-6px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}} @media(max-width:900px){ .demo{grid-template-columns:1fr;gap:22px} .flux{width:3px;height:120px;margin:0 auto; background:linear-gradient(180deg,rgba(225,29,72,.4),rgba(246,199,68,.5))} .flux .bille.part{animation:voyageV 1.1s cubic-bezier(.4,0,.2,1) forwards;left:50%;margin-left:-6.5px} @keyframes voyageV{0%{top:-6px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 7px);opacity:0}} } /* ═══ LES QUATRE ECRANS QUI PARLENT LE MIEUX ═════════════════════════════ Retour produit : « mets les meilleures interfaces, les plus parlantes, les plus novatrices », « la vraie interface a chaque fois, epuree avec l'essentiel pour le sujet ». Une capture pleine page montre TOUT, donc rien : on y cherche l'argument. Pour chaque chapitre on rejoue donc l'endroit du produit qui porte l'idee, et lui seul : · vendre -> le rail d'une date qui avance jusqu'a l'argent ; · organiser -> le deroule d'un jour de tournee ; · compter -> ce qu'il reste une fois tout paye ; · l'IA -> une phrase tapee, une fiche creee. Chacun s'anime a l'arrivee a l'ecran, une seule fois, et jamais en boucle : au-dela du pointage (ou la boucle EST le sujet), une animation qui tourne sans fin devient un papier peint. */ .mini{position:relative;z-index:1;background:#fff;color:#141011;border-radius:20px;padding:24px; box-shadow:0 30px 70px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.5)} .mini .t{font-size:17px;font-weight:700;letter-spacing:-.02em} .mini .st{font-size:12.5px;color:rgba(20,16,17,.6);margin-top:3px} /* ── 01 · le rail d'une date ── */ /* LA FRISE : cinq points sur une ligne se lisent comme une progression, et tiennent en 90 px la ou cinq lignes empilees en prenaient plus de 300. */ .rail-e{list-style:none;margin:16px 0 0;padding:0;display:grid; grid-template-columns:repeat(5,1fr);position:relative} .rail-e::before{content:"";position:absolute;top:11px;left:10%;right:10%;height:2px; background:rgba(20,16,17,.1);border-radius:2px} .rail-e li{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative; text-align:center;color:rgba(20,16,17,.45)} .rail-e li .rond{width:22px;height:22px;border-radius:50%;border:2px solid rgba(20,16,17,.15); background:#fff;display:flex;align-items:center;justify-content:center;position:relative;z-index:1} .rail-e li .rond svg{width:11px;height:11px;opacity:0} .rail-e li .lab{font-size:11.5px;line-height:1.3;display:flex;flex-direction:column;gap:2px} .rail-e li .lab em{font-style:normal;font-weight:700;color:#141011;font-size:12px} .anim .rail-e li{opacity:1} /* ── LE PARCOURS AVANCE, IL NE CLIGNOTE PAS ───────────────────────────── Premiere version : chaque etape avait SA propre boucle, decalee. Resultat, quand la premiere se remettait a zero les autres etaient encore allumees, et on voyait des cases s'eteindre au hasard au lieu d'un parcours qui avance. Cinq etapes qui racontent UNE progression doivent partager UNE horloge : c'est le script qui les allume l'une apres l'autre, puis les eteint toutes d'un coup avant de recommencer. */ .rail-e li{transition:color .45s ease} .rail-e li .rond{transition:background .45s var(--ressort),border-color .45s ease, color .3s ease,box-shadow .45s ease,transform .45s var(--ressort)} .rail-e li.ok{color:rgba(20,16,17,.68)} .rail-e li.ok .rond{background:#10a34a;border-color:#10a34a;color:#fff; box-shadow:0 4px 12px -6px rgba(16,163,74,.9)} .rail-e li.ok .rond svg{opacity:1} .rail-e li.pose .rond{transform:scale(1.2)} /* la derniere etape est la RECOMPENSE : elle s'allume en jaune, pas en vert de plus. */ .rail-e li:last-child.ok .rond{background:var(--jaune);border-color:var(--jaune);color:#1a1405; box-shadow:0 0 0 6px rgba(246,199,68,.2)} .rail-e li:last-child.ok{color:#141011;font-weight:600} /* LE MAIL A LA FORME D'UN MAIL : pastille d'initiales, expediteur, ADRESSE, heure, objet en gras, corps, signature. Personne n'a besoin qu'on lui explique ce que c'est. Ce que Koulisse en fait est ecrit EN DEHORS, parce que ce n'est pas le mail qui parle. */ .mail-d{display:block;padding:14px 16px;border-radius:16px;margin-top:0; background:#f7f6f8;border:1px solid rgba(20,16,17,.07); opacity:0;transform:translateY(8px);transition:all .6s var(--ressort)} .mail-d.la{opacity:1;transform:none} .mail-tete{display:flex;align-items:center;gap:11px} .mail-tete .av{flex:none;width:36px;height:36px;border-radius:50%;background:#141011; color:var(--creme);display:flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:700} .mail-tete .qui{display:block;line-height:1.25;min-width:0;flex:1} .mail-tete .qui b{display:block;font-size:13.5px;font-weight:700;color:#141011} .mail-tete .qui em{display:block;font-style:normal;font-size:11.5px;line-height:1.4; color:rgba(20,16,17,.45);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail-tete .h{margin-left:auto;flex:none;font-size:11.5px;color:rgba(20,16,17,.42); font-variant-numeric:tabular-nums} .mail-objet{margin-top:12px;font-size:14px;font-weight:700;color:#141011;line-height:1.35} .mail-corps{margin-top:7px;font-size:13px;color:rgba(20,16,17,.66);line-height:1.5} .mail-corps b{font-weight:600;color:#141011} .mail-sign{margin-top:9px;padding-top:9px;border-top:1px solid rgba(20,16,17,.07); font-size:11.5px;color:rgba(20,16,17,.45)} .mail-fait{display:flex;flex-direction:column;align-items:center;margin-top:7px; opacity:0;transform:translateY(6px);transition:all .55s var(--ressort)} .mail-fait.la{opacity:1;transform:none} .mail-fait .fl{color:rgba(20,16,17,.25)} .mail-fait .fl svg{width:17px;height:17px;display:block} /* CE QUI A ETE RANGE, CHAMP PAR CHAMP. Une pilule « date creee » affirme ; des champs qui se posent l'un apres l'autre prouvent. Ce sont les informations que le produit extrait vraiment d'un message : la structure, le contact, son telephone, ce qu'il demande. L'ANIMATION EST CELLE DU PRODUIT, pas une imitation : `.k-intel-bloc`, `.k-intel-valeur` et la pilule `.k-intel` sont les classes de l'application, copiees telles quelles dans cette page. On les compose, on ne les redessine pas. */ .range{margin-top:7px;padding:12px 14px;border-radius:16px;background:#fbfaf5; border:1px solid rgba(246,199,68,.4)} .range-t{margin-bottom:7px} .range-g{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} .range-l{display:flex;align-items:baseline;gap:10px;padding:6px 8px;margin:0 -8px; font-size:13px;border-top:1px solid rgba(20,16,17,.06);min-width:0} .range-g .range-l:nth-child(1),.range-g .range-l:nth-child(2){border-top:0} .range-l .q{flex:none;width:78px;color:rgba(20,16,17,.45);font-size:12px} .range-l b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .range-l b{font-weight:600;color:#141011} /* tant que l'intelligence n'a pas parle, ses valeurs ne sont pas la */ .range:not(.anim-ia) .k-intel-valeur{opacity:0} @media(max-width:900px){ .range-g{grid-template-columns:1fr} .range-g .range-l:nth-child(2){border-top:1px solid rgba(20,16,17,.06)} } @media(max-width:640px){ .range-l{flex-direction:column;gap:2px;align-items:flex-start} .range-l .q{width:auto} } /* ── 02 · le deroule d'un jour ── */ .jour{list-style:none;margin:18px 0 0;display:flex;flex-direction:column} .jour li{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:14.5px; border-bottom:1px solid rgba(20,16,17,.06);opacity:0;transform:translateY(8px); transition:opacity .5s var(--ressort), transform .5s var(--ressort)} .jour li:last-child{border-bottom:0} .anim .jour li{opacity:1;transform:none} .jour li:nth-child(1){transition-delay:.85s} .jour li:nth-child(2){transition-delay:1s} .jour li:nth-child(3){transition-delay:1.15s} .jour li:nth-child(4){transition-delay:1.3s} .jour .h{flex:none;width:52px;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums} .jour .q{flex:none;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px} .jour .q.voyage{background:rgba(29,155,240,.13);color:#0e7ac0} .jour .q.montage{background:rgba(20,16,17,.07);color:rgba(20,16,17,.62)} .jour .q.scene{background:rgba(246,199,68,.3);color:#7a5c05} /* ── 02bis · LA FEUILLE DE ROUTE, COMME DANS LE PRODUIT ───────────────── la direction a montre la vraie page (`/feuille/[token]`) : c'est un DOCUMENT, pas une liste. Ses codes sont repris tels quels : la pilule encre « FEUILLE DE ROUTE » a pastille jaune, le titre centre avec son point, les sections en capitales precedees d'une pastille ronde, la grille de « L'ESSENTIEL », le bandeau de jour creme et le tableau du deroule dont la ligne du SPECTACLE est un aplat jaune plein. Les valeurs, elles, arrivent avec le signe de Koulisse Intelligence (`k-intel-valeur`) : c'est exactement ce que fait le produit quand une information se pose toute seule. */ /* CA DOIT SE LIRE COMME UNE PAGE (retour produit : « faut voir que c'est vraiment une feuille de route, la c'est meme pas le bon format »). Une feuille est PORTRAIT, dense, et elle continue en bas : on garde donc le ratio d'une page, et le bas s'estompe au lieu de se couper net, pour dire qu'il y a la suite. */ .doc{position:relative;z-index:1;background:#fff;color:#1a1a1a;border-radius:14px; padding:26px 26px 0;max-height:620px;overflow:hidden; box-shadow:0 30px 70px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.5)} .doc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px; background:linear-gradient(180deg,transparent,#fff 78%);pointer-events:none} .doc-tete{display:flex;justify-content:flex-end} .doc-pil{display:inline-flex;align-items:center;gap:7px;background:#1a1a1a;color:#fff; padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:800; letter-spacing:.08em;text-transform:uppercase} .doc-pil i{width:6px;height:6px;border-radius:50%;background:var(--jaune)} .doc-org{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:#1a1a1a;text-align:right;max-width:150px;line-height:1.3} .doc-titre{text-align:center;font-size:22px;font-weight:800;letter-spacing:-.025em;margin-top:10px} .doc-titre .pt{color:var(--jaune)} .doc-date{text-align:center;font-size:14px;font-weight:700;margin-top:3px} .doc-lieu{text-align:center;font-size:12px;color:#555;margin-top:6px; display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap} .doc-lieu svg{width:12px;height:12px;color:var(--jaune)} .doc-sec{display:flex;align-items:center;gap:8px;margin:18px 0 9px; font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1a1a1a} .doc-sec .r{width:20px;height:20px;border-radius:50%;background:#faf4e4; display:flex;align-items:center;justify-content:center} .doc-sec .r svg{width:11px;height:11px;color:#9a8a5f} .doc-grille{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e7dcc4; border-radius:14px;overflow:hidden} .doc-case{padding:10px 12px;border-bottom:1px solid #f2ebdb} .doc-case:nth-child(odd){border-right:1px solid #f2ebdb} .doc-case:nth-last-child(-n+2){border-bottom:0} .doc-case .l{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:#a08b52} .doc-case .v{font-size:12.5px;font-weight:700;margin-top:2px;line-height:1.3} .doc-jour{border:1px solid #e7dcc4;border-radius:14px;overflow:hidden} .doc-bloc{border:1px solid #e7dcc4;border-radius:12px;padding:11px 13px;font-size:12px; display:flex;flex-direction:column;gap:3px} .doc-bloc b{font-size:13px;font-weight:700} .doc-bloc span{color:#555;line-height:1.35} .doc-jour .bandeau{background:#faf4e4;color:#6b5a2e;padding:6px 12px; font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; border-bottom:1px solid #e7dcc4} .doc-l{display:flex;border-bottom:1px solid #f2ebdb;font-size:11.5px} .doc-l:last-child{border-bottom:0} .doc-l .h{flex:none;width:64px;padding:8px 10px;font-weight:700;font-variant-numeric:tabular-nums; border-right:1px solid #f2ebdb;line-height:1.3} .doc-l .q{flex:none;width:132px;padding:8px 10px;font-weight:600; border-right:1px solid #f2ebdb;line-height:1.3} .doc-l .d{flex:1;padding:8px 10px;color:#555;line-height:1.35} /* la ligne du spectacle est un APLAT JAUNE PLEIN, comme dans le document */ .doc-l.show{background:var(--jaune)} .doc-l.show .q,.doc-l.show .d,.doc-l.show .h{color:#1a1a1a;font-weight:700} .doc-l .badge{display:inline-block;margin-top:3px;font-size:8.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:#8a7a52;background:#faf4e4; padding:2px 6px;border-radius:5px} /* les sources qui alimentent le document */ .sources{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .src{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700; padding:5px 10px;border-radius:999px;background:#faf4e4;color:#6b5a2e; opacity:0;transform:translateY(6px) scale(.94);transition:all .45s var(--ressort)} .src svg{width:12px;height:12px} .src{border:0;cursor:pointer;font-family:inherit;transition:all .3s var(--ressort)} .src:hover{background:#f3e9cd} .src.vise{background:#1a1a1a;color:#fff} /* la ligne que la source a remplie se designe, le reste s'efface */ .doc-l.pale{opacity:.32} .doc-l.vise{background:#faf4e4} .doc-l.vise.show{background:var(--jaune)} .anim .src{opacity:1;transform:none} .anim .src:nth-child(1){transition-delay:.1s} .anim .src:nth-child(2){transition-delay:.3s} .anim .src:nth-child(3){transition-delay:.5s} .pret{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:#555; opacity:0;transform:translateY(6px);transition:all .5s var(--ressort)} .anim .pret{opacity:1;transform:none;transition-delay:2.2s} .pret .st{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11px; font-weight:700;padding:5px 12px;border-radius:999px;background:#10a34a;color:#fff; box-shadow:0 6px 16px -8px rgba(16,163,74,.9)} .pret .st i{width:6px;height:6px;border-radius:50%;background:#fff} /* ── 04 · LE MODULE BUDGET, EN ENTIER ─────────────────────────────────── Retour produit : « ca c'est super incomplet, faut voir le module de budget, c'est comme ca que les gens seront plus contents de venir chez nous plutot que Breakly : notre interface est plus moderne, plus complete et plus belle ». Quatre lignes et un total ne prouvent rien. Le vrai module tient TROIS colonnes cote a cote sur chaque poste (prevu, engage, reel), un seuil de rentabilite EN BILLETS, la recette moyenne par billet et le haut des charges. C'est cet ecart-la qui se voit. La couleur du module est son violet, et le REEL se remplit tout seul depuis la banque, avec le signe de Koulisse Intelligence. */ .bud{--c:#6c48f2} .bud-tete{display:flex;align-items:center;justify-content:space-between;gap:12px} .bud-t{font-size:17px;font-weight:700;letter-spacing:-.02em} .bud-t .sur{background:linear-gradient(180deg,transparent 58%,rgba(108,72,242,.28) 58%); padding:0 .12em;border-radius:4px} .bud-st{font-size:12px;color:rgba(20,16,17,.55);margin-top:3px;max-width:330px;line-height:1.35} .bascule{flex:none;display:flex;padding:3px;border-radius:999px;background:#f2f2f4} .bascule span{font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px; color:rgba(20,16,17,.5);cursor:pointer;user-select:none; transition:background .3s var(--ressort), color .3s ease} .bascule .on{background:#fff;color:#141011;box-shadow:0 2px 6px -2px rgba(20,16,17,.25)} /* les onglets du module, en petit : ils disent qu'on regarde les PROJETS, pas la structure */ .bud-onglets{display:flex;gap:16px;margin-top:14px;padding-bottom:2px; border-bottom:1px solid rgba(20,16,17,.08)} .bud-onglets span{font-size:12.5px;font-weight:600;color:rgba(20,16,17,.42);padding-bottom:7px; cursor:pointer;user-select:none;transition:color .25s ease, box-shadow .25s ease} .bud-onglets span:hover{color:rgba(20,16,17,.75)} .bud-onglets .on{color:#141011;box-shadow:inset 0 -2px 0 #141011} /* le relais d'un perimetre a l'autre : le cadre reste, les chiffres se relaient. Court (260 ms), sans deplacement lateral : on change de LECTURE, pas d'ecran. */ @keyframes k-relais{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}} .bud.relais .bud-k .v,.bud.relais .bud-k .s,.bud.relais .bud-vue,.bud.relais .bud-bil, .bud.relais .bud-charges .l{animation:k-relais 260ms cubic-bezier(.22,1,.36,1) both} .bud.relais .bud-charges .l:nth-child(3){animation-delay:40ms} .bud.relais .bud-charges .l:nth-child(4){animation-delay:80ms} /* la vue d'ensemble : trois faits qui cadrent les montants */ .bud-vue{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:12px; border:1px solid rgba(20,16,17,.09);border-radius:14px;overflow:hidden} .bud-vue > div{padding:11px 13px;border-right:1px solid rgba(20,16,17,.07)} .bud-vue > div:last-child{border-right:0} .bud-vue span{display:block;font-size:11px;color:rgba(20,16,17,.5)} .bud-vue b{font-size:14px;font-weight:700;margin-top:2px;display:block} .bud-legende i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px} .bud-legende i.p1{background:var(--c)} .bud-legende i.p2{background:#10a34a} .bud-kpis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px; border:1px solid rgba(20,16,17,.09);border-radius:14px;overflow:hidden} .bud-k{padding:13px 14px;border-right:1px solid rgba(20,16,17,.07)} .bud-k:last-child{border-right:0} .bud-k .v{font-size:18px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .bud-k .l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(20,16,17,.45);margin-top:3px} .bud-k .d{font-size:10.5px;color:rgba(20,16,17,.55);margin-top:5px;font-variant-numeric:tabular-nums} .bud-k.res .v{color:var(--c)} .bud-bil{margin-top:14px;padding:14px;border:1px solid rgba(20,16,17,.09);border-radius:14px} .bud-bil .h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px; color:rgba(20,16,17,.55);gap:10px} .bud-bil .h b{color:#141011;font-weight:700;white-space:nowrap} .bud-piste{height:8px;border-radius:99px;background:rgba(20,16,17,.08);margin-top:10px; position:relative} .bud-piste i{display:block;height:100%;border-radius:99px;width:0; background:linear-gradient(90deg,var(--c),#9b8cf8);transition:width 1.3s var(--ressort)} .anim .bud-piste i{width:82%} /* le trait du seuil : a droite de lui, la date est rentable */ .bud-seuil{position:absolute;top:-4px;bottom:-4px;left:62%;width:2px;background:#141011;border-radius:2px} .bud-legende{display:flex;justify-content:space-between;font-size:10.5px; color:rgba(20,16,17,.5);margin-top:8px;gap:8px;flex-wrap:wrap} .bud-charges{margin-top:14px} .bud-charges .t{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(20,16,17,.45);margin-bottom:7px} .bud-charges .l{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px; border-bottom:1px solid rgba(20,16,17,.06)} .bud-charges .l:last-child{border-bottom:0} .bud-charges .l span:first-child{min-width:98px;color:rgba(20,16,17,.62)} .bud-charges .l .b{flex:1;height:6px;border-radius:99px;background:rgba(20,16,17,.07);overflow:hidden} .bud-charges .l .b i{display:block;height:100%;border-radius:99px;background:var(--c);opacity:.75; width:0;transition:width 1.1s var(--ressort)} .anim .bud-charges .l:nth-child(2) .b i{width:74%} .anim .bud-charges .l:nth-child(3) .b i{width:46%} .anim .bud-charges .l:nth-child(4) .b i{width:28%} .bud-charges .l b{font-variant-numeric:tabular-nums;font-weight:600;min-width:60px;text-align:right} /* ── KOULISSE INTELLIGENCE : LE SIGNE DU PRODUIT, PAS UN DE PLUS ──────── Retour produit : « fais la vraie animation de Koulisse Intelligence, avec son vrai logo. Quand les informations sont comprises, il y a une animation precise qui se passe. » Elle existe, elle est dans `globals.css` du CRM, et son commentaire porte deja la lecon : « on parle de CA pour l'animation, TU L'AS DEJA, ne la recree pas ». Ces regles sont donc RECOPIEES du produit, pas reinventees : · `.k-intel` la pilule : contour degrade cyan -> violet dont l'ANGLE tourne en 22 s (lent expres : un tour rapide devient un clignotant) ; · `.k-intel-bloc` le cadre degrade pose sur ce qui vient de l'intelligence ; · `.k-intel-valeur` chaque valeur ARRIVE : elle vient de plus bas, floue, depasse d'un cheveu puis se pose, avec un balayage irise. 70 ms d'ecart entre deux, « comme si elle etait intelligente et venait se placer ». Et le jaune n'est PAS dans ce degrade : c'est la couleur du CRM, l'intelligence a la sienne. */ @property --k-intel-angle { syntax: ""; initial-value: 115deg; inherits: false; } @keyframes k-intel-aura { from { --k-intel-angle: 0deg; } to { --k-intel-angle: 360deg; } } @keyframes k-intel-pose { from{opacity:0;transform:translateY(-4px) scale(.94)} to{opacity:1;transform:none} } @keyframes k-intel-contour { from{opacity:0} to{opacity:1} } @keyframes k-intel-valeur-pose{ 0%{opacity:0;transform:translateY(10px) scale(.9);filter:blur(3px)} 60%{opacity:1;transform:translateY(-2px) scale(1.02);filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)} } @keyframes k-intel-balayage{ 0%{background-position:130% 50%;opacity:1} 70%{opacity:1} 100%{background-position:-40% 50%;opacity:0} } .k-intel{position:relative;display:inline-flex;border-radius:999px;padding:1.5px; background:linear-gradient(var(--k-intel-angle) in oklab,#22d3ee 0%,#4cc3f5 28%,#6ba0f2 58%,#9b8cf8 82%,#b78bfa 100%); box-shadow:0 3px 16px -5px rgba(107,160,242,.6), 0 1px 3px rgba(20,22,29,.28); animation:k-intel-aura 22s linear infinite, k-intel-pose 420ms cubic-bezier(.34,1.56,.64,1) both; opacity:0} .anim-ia .k-intel{opacity:1} .k-intel-corps{display:inline-flex;align-items:center;gap:6px;border-radius:inherit; padding:5px 12px;font-size:12.5px;font-weight:600; background:linear-gradient(135deg,#1b2440 0%,#14161d 100%);color:#eef2ff} .k-intel-etincelle{color:#67e8f9;width:14px;height:14px} .k-intel-bloc{position:relative;box-shadow:0 6px 26px -16px rgba(107,160,242,.75)} .k-intel-bloc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:linear-gradient(var(--k-intel-angle) in oklab,#22d3ee 0%,#4cc3f5 28%,#6ba0f2 58%,#9b8cf8 82%,#b78bfa 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none; animation:k-intel-aura 22s linear infinite, k-intel-contour 620ms cubic-bezier(.22,1,.36,1) both} .k-intel-valeur{position:relative;overflow:hidden} [data-ia]:not(.anim-ia):not(.joue) .k-intel-valeur{opacity:0} .anim-ia .k-intel-valeur{animation:k-intel-valeur-pose 620ms cubic-bezier(.34,1.56,.64,1) both} .anim-ia .k-intel-valeur:nth-child(2){animation-delay:190ms} .anim-ia .k-intel-valeur:nth-child(3){animation-delay:380ms} .anim-ia .k-intel-valeur:nth-child(4){animation-delay:570ms} .anim-ia .k-intel-valeur:nth-child(5){animation-delay:760ms} .anim-ia .k-intel-valeur:nth-child(6){animation-delay:950ms} .anim-ia .k-intel-valeur:nth-child(7){animation-delay:1140ms} .anim-ia .k-intel-valeur:nth-child(n+8){animation-delay:1330ms} .k-intel-valeur::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 18%,rgba(34,211,238,.36) 34%,rgba(107,160,242,.34) 54%,rgba(167,139,250,.38) 70%,transparent 86%); background-size:260% 100%;opacity:0} .anim-ia .k-intel-valeur::after{animation:k-intel-balayage 2s cubic-bezier(.22,1,.36,1) forwards} .anim-ia .k-intel-valeur:nth-child(2)::after{animation-delay:190ms} .anim-ia .k-intel-valeur:nth-child(3)::after{animation-delay:380ms} .anim-ia .k-intel-valeur:nth-child(4)::after{animation-delay:570ms} .anim-ia .k-intel-valeur:nth-child(5)::after{animation-delay:760ms} .anim-ia .k-intel-valeur:nth-child(6)::after{animation-delay:950ms} .anim-ia .k-intel-valeur:nth-child(7)::after{animation-delay:1140ms} .anim-ia .k-intel-valeur:nth-child(n+8)::after{animation-delay:1330ms} /* le micro qui ecoute, avant la comprehension */ .ia-micro{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px; background:#f7f7f8;margin-bottom:10px} .ia-micro .b{flex:none;width:38px;height:38px;border-radius:50%;background:var(--pointage); color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 0 rgba(225,29,72,.45)} .ia-micro.ecoute .b{animation:ondeMicro 1.6s ease-out infinite} @keyframes ondeMicro{0%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}100%{box-shadow:0 0 0 16px rgba(225,29,72,0)}} .ia-micro .b svg{width:18px;height:18px} .ia-micro .onde{display:flex;align-items:center;gap:3px;height:26px} .ia-micro .onde i{width:3px;border-radius:99px;background:rgba(20,16,17,.2);height:6px} .ia-micro.ecoute .onde i{animation:vague .9s ease-in-out infinite;background:var(--pointage)} .ia-micro.ecoute .onde i:nth-child(2){animation-delay:.1s} .ia-micro.ecoute .onde i:nth-child(3){animation-delay:.2s} .ia-micro.ecoute .onde i:nth-child(4){animation-delay:.3s} .ia-micro.ecoute .onde i:nth-child(5){animation-delay:.15s} .ia-micro.ecoute .onde i:nth-child(6){animation-delay:.25s} .ia-micro.ecoute .onde i:nth-child(7){animation-delay:.05s} @keyframes vague{0%,100%{height:6px}50%{height:22px}} .ia-micro .e{margin-left:auto;font-size:12.5px;font-weight:600;color:rgba(20,16,17,.5)} .ia-micro.ecoute .e{color:var(--pointage)} .ia-dit{padding:14px 16px;border-radius:15px;background:#141011;color:#fff; font-size:14.5px;line-height:1.45;min-height:56px} .ia-dit .cur{display:inline-block;width:2px;height:16px;margin-left:2px;vertical-align:-2px; background:#67e8f9;animation:clignote 1s steps(2) infinite} /* LE MICRO SE CLIQUE VRAIMENT, LE CHAMP S'ECRIT VRAIMENT (retour produit : « il peut cliquer et parler ou ecrire a la main »). Donc ce sont de vrais elements interactifs, pas des dessins : un bouton qui se met au net, un champ qui prend le focus. */ .ia-micro{width:100%;border:0;font:inherit;text-align:left;cursor:pointer; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease} .ia-micro:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,16,17,.08)} .ia-micro:active{transform:translateY(0) scale(.995)} .ia-dit{position:relative;padding-right:54px} #ia-texte{outline:none;display:inline} #ia-texte:empty::before{content:"Crée une date à…";color:rgba(255,255,255,.34)} .ia-dit.ecrit .cur{display:none} .ia-go{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:0;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center; opacity:.4;transition:opacity .2s ease,background .2s ease,transform .18s cubic-bezier(.34,1.56,.64,1)} .ia-go svg{width:16px;height:16px} .ia-dit.ecrit .ia-go{opacity:1;background:var(--jaune);color:#141011} .ia-go:hover{transform:scale(1.06)} .ia-aide{margin-top:9px;font-size:12px;color:rgba(20,16,17,.42)} .ia-compris .v.vide{display:none} /* le bloc de ce qui a ete compris */ .ia-compris{margin-top:14px;border-radius:16px;background:#fbfbfc;padding:6px 4px;opacity:0; transition:opacity .4s ease} .anim-ia .ia-compris{opacity:1} .ia-compris .v{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px; font-size:13.5px} .ia-compris .v .q{color:rgba(20,16,17,.5);min-width:78px} .ia-compris .v b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums} /* L'ETAT SE DIT COMME DANS LE PRODUIT : une pilule pleine, pastille + mot, la meme que « Confirme » sur une fiche date. Le texte a cote reste en encre. */ .ia-fait{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13.5px; color:rgba(20,16,17,.62);opacity:0;transform:translateY(6px); transition:all .5s cubic-bezier(.22,1,.36,1)} .anim-ia .ia-fait{opacity:1;transform:none;transition-delay:.9s} .ia-fait .st{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px; font-weight:700;padding:5px 12px;border-radius:999px; background:#10a34a;color:#fff;box-shadow:0 6px 16px -8px rgba(16,163,74,.9)} .ia-fait .st i{width:6px;height:6px;border-radius:50%;background:#fff} @media (prefers-reduced-motion:reduce){ .rail-e li,.jour li,.elle{opacity:1!important;transform:none!important;transition:none!important} } /* ═══ KOULISSE INTELLIGENCE ══════════════════════════════════════════════ */ .intel-tag{display:block;height:30px;width:auto;margin-bottom:22px} .dits{display:flex;flex-direction:column;gap:10px;margin-top:26px} .dit{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:14px; background:var(--verre);border:1px solid var(--bord);font-size:15px} .dit b{color:var(--jaune);font-weight:600;flex:none} @media(max-width:900px){ .duo{grid-template-columns:1fr;gap:26px} .flux{width:3px;height:120px;margin:0 auto;background:linear-gradient(180deg, rgba(225,29,72,.45),rgba(246,199,68,.55))} .flux .bille{animation:voyageV 2.4s var(--ressort) infinite;left:50%;margin-left:-6px} @keyframes voyageV{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}} .flux::after{right:auto;left:50%;margin-left:-4.5px;top:auto;bottom:-5px} } /* ═══ 4. LES MODULES ═════════════════════════════════════════════════════ CHAQUE TUILE EST ALLUMEE PAR SA COULEUR : un halo de la couleur du module, un lisere qui prend sa teinte au survol, l'icone posee sur un aplat de cette couleur. C'est ce qui remplace les rectangles blancs a filet gris. */ .modules{padding:140px 0 0} .mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px} .mod{position:relative;display:block;padding:28px;border-radius:var(--r-l);overflow:hidden; background:var(--verre);border:1px solid var(--bord);box-shadow:var(--ombre); transition:transform .4s var(--ressort), border-color .4s ease, box-shadow .4s var(--ressort)} .mod::after{content:"";position:absolute;top:-90px;right:-90px;width:240px;height:240px; border-radius:50%;background:radial-gradient(circle,var(--c),transparent 66%); opacity:.22;transition:opacity .45s ease, transform .55s var(--ressort);filter:blur(14px)} .mod:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,transparent); box-shadow:0 40px 80px -28px rgba(0,0,0,.9), 0 0 60px -24px var(--c), inset 0 1px 0 rgba(255,255,255,.12)} .mod:hover::after{opacity:.45;transform:scale(1.2)} .mod .ico{position:relative;width:44px;height:44px;border-radius:13px;display:flex; align-items:center;justify-content:center;color:#fff;margin-bottom:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--c) 88%,white 12%),var(--c)); box-shadow:0 10px 26px -8px var(--c), inset 0 1px 0 rgba(255,255,255,.45)} .mod .ico svg{width:22px;height:22px} .mod h3{margin-bottom:8px;position:relative} .mod p{font-size:15.5px;line-height:1.55;color:var(--texte-2);margin-bottom:18px;position:relative} .mod .prix{font-size:14px;font-weight:600;color:var(--texte-2);position:relative} .mod .fleche{position:absolute;right:24px;bottom:26px;color:var(--texte-3); transition:transform .35s var(--ressort), color .35s ease} .mod:hover .fleche{transform:translateX(5px);color:var(--c)} /* ═══ LA VIGNETTE D'UN MODULE ════════════════════════════════════════════ Retour produit : « toutes les animations, toutes les interfaces, fais vraiment bien et creatif, et ludique ». Six cartes de texte disaient six modules sans en montrer aucun. Chacune porte desormais une petite SCENE, dessinee en CSS, qui joue ce que le module fait : le radar balaie, la jauge se remplit, le budget de pub retombe a zero quand c'est complet, la question se coche, l'enregistrement tourne, le bouton bascule sur complet. Elles ne s'animent QU'AU SURVOL (et une fois a l'arrivee sur mobile) : six boucles simultanees en permanence, ce serait une vitrine de televiseurs. */ .vig{position:relative;height:104px;border-radius:14px;overflow:hidden;margin-bottom:18px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--bord);display:flex;align-items:center;justify-content:center} /* ══ LES VIGNETTES DES MODULES RACONTENT UN GESTE, TOUTES SEULES ═════════════════ Elles ne demarraient qu'au SURVOL : sur un telephone, ou personne ne survole rien, elles ne bougeaient jamais, et sur un ordinateur il fallait deviner qu'il y avait quelque chose a voir. Chacune tourne desormais en boucle, sur SA duree, pour qu'elles ne battent pas toutes la mesure ensemble. Et chacune montre LE geste du module, pas une decoration. Radar : il balaye, et il TROUVE. */ .v-radar{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:0 14px} .v-radar .cercle{flex:none;width:60px;height:60px;border-radius:50%; border:1px solid rgba(29,155,240,.4);position:relative;overflow:hidden} .v-radar .cercle::before{content:"";position:absolute;inset:12px;border-radius:50%; border:1px solid rgba(29,155,240,.26)} .v-radar .aig{position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,rgba(29,155,240,.5),transparent 70deg); animation:balaye 3.2s linear infinite} @keyframes balaye{to{transform:rotate(360deg)}} .v-radar .pt{position:absolute;width:7px;height:7px;border-radius:50%;background:#f6c744; box-shadow:0 0 10px 3px rgba(246,199,68,.55);opacity:0} .v-radar .pt.p1{top:15px;left:17px;animation:radarPt 3.2s linear infinite} .v-radar .pt.p2{bottom:13px;right:15px;animation:radarPt 3.2s linear infinite 1.1s} .v-radar .pt.p3{top:25px;right:12px;animation:radarPt 3.2s linear infinite 2.1s} @keyframes radarPt{0%{opacity:1}70%,100%{opacity:0}} .v-radar .tx{display:flex;flex-direction:column;gap:5px;min-width:0} .v-radar .tt{font-size:11.5px;font-weight:600;color:var(--texte-2)} .v-radar .li{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--texte-3); opacity:0;animation:radarLi 6.4s ease-in-out infinite} .v-radar .li em{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--radar);flex:none} .v-radar .li:nth-of-type(3){animation-delay:.6s} @keyframes radarLi{0%,6%{opacity:0;transform:translateY(4px)}16%,88%{opacity:1;transform:none}100%{opacity:0}} /* Pointage : la jauge monte toute seule, et le chiffre monte AVEC elle. Un chiffre qui ne suit pas sa jauge est le defaut qu'on a corrige partout ailleurs. */ .v-jauge{width:100%;padding:0 14px} .v-jauge .c{display:flex;justify-content:space-between;font-size:11px; color:var(--texte-3);margin-bottom:9px} .v-jauge .c b{color:var(--texte);position:relative;display:inline-block;width:60px;height:15px; overflow:hidden} .v-jauge .c b i{position:absolute;inset:0;font-style:normal;font-weight:600;opacity:0; display:flex;align-items:center;justify-content:flex-end;font-variant-numeric:tabular-nums} .v-jauge .b{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden} .v-jauge .b i{display:block;height:100%;border-radius:99px;background:var(--pointage); width:24%;animation:jaugeMonte 7.4s cubic-bezier(.22,1,.36,1) infinite} @keyframes jaugeMonte{0%,6%{width:24%}52%,100%{width:88%}} @keyframes jaugeA{0%,44%{opacity:1}50%,100%{opacity:0}} @keyframes jaugeB{0%,44%{opacity:0}50%,100%{opacity:1}} .v-jauge .c b .a{animation:jaugeA 7.4s ease-in-out infinite} .v-jauge .c b .z{animation:jaugeB 7.4s ease-in-out infinite} .v-jauge .d{margin-top:9px;font-size:10px;color:var(--texte-3)} /* Formulaires : une reponse arrive, et elle DEVIENT quelque chose. C'est tout le module : zero ressaisie, chaque reponse cree le contact et ouvre l'opportunite. */ .v-form{width:100%;padding:0 14px;display:flex;flex-direction:column;gap:7px} .v-form .tt{font-size:11px;color:var(--texte-3)} .v-form .q{height:9px;border-radius:99px;background:rgba(255,255,255,.13);width:100%; transform-origin:left;animation:formQ 8.2s ease-in-out infinite} .v-form .q:nth-of-type(3){width:68%;animation-delay:.25s} @keyframes formQ{0%,4%{transform:scaleX(0);opacity:0}14%,100%{transform:scaleX(1);opacity:1}} .v-form .ok{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--texte-2); opacity:0;animation:formOk 8.2s ease-in-out infinite} .v-form .ok:nth-of-type(5){animation-delay:.5s} @keyframes formOk{0%,30%{opacity:0;transform:translateY(5px)}40%,92%{opacity:1;transform:none}100%{opacity:0}} .v-form .ok span{width:15px;height:15px;border-radius:50%;background:var(--form);color:#fff; display:flex;align-items:center;justify-content:center;flex:none} .v-form .ok svg{width:9px;height:9px} /* Visio : le bot ecoute, puis le compte rendu se RANGE. La deuxieme moitie est le module ; la premiere n'est qu'une reunion. */ .v-visio{width:100%;padding:0 14px;display:flex;flex-direction:column;gap:9px} .v-visio .r{position:relative;height:16px;font-size:11px;color:var(--texte-2)} .v-visio .r > i{position:absolute;inset:0;display:flex;align-items:center;gap:7px; font-style:normal;opacity:0;white-space:nowrap;overflow:hidden} .v-visio .pastille{width:7px;height:7px;border-radius:50%;flex:none} .v-visio .r .a .pastille{background:#e11d48;animation:pulse 1.6s ease-in-out infinite} .v-visio .r .z .pastille{background:var(--visio)} @keyframes visioA{0%,46%{opacity:1}52%,100%{opacity:0}} @keyframes visioB{0%,46%{opacity:0}52%,100%{opacity:1}} .v-visio .r .a{animation:visioA 9s ease-in-out infinite} .v-visio .r .z{animation:visioB 9s ease-in-out infinite} .v-visio .t{height:8px;border-radius:99px;background:rgba(255,255,255,.13);width:0; animation:visioT 9s ease-in-out infinite} .v-visio .t2{height:8px;border-radius:99px;background:rgba(255,255,255,.09);width:0; animation:visioT 9s ease-in-out infinite .4s} @keyframes visioT{0%,4%{width:0}44%,100%{width:100%}} .v-visio .d{font-size:10px;color:var(--texte-3);opacity:0;animation:visioD 9s ease-in-out infinite} @keyframes visioD{0%,48%{opacity:0}56%,94%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .v-radar .aig,.v-radar .pt,.v-radar .li,.v-jauge .b i,.v-jauge .c b i, .v-form .q,.v-form .ok,.v-visio .r > i,.v-visio .t,.v-visio .t2,.v-visio .d{animation:none} .v-radar .li,.v-form .q,.v-form .ok,.v-visio .d{opacity:1;transform:none} .v-radar .pt{opacity:1} .v-jauge .b i{width:88%} .v-jauge .c b .z,.v-visio .r .z{opacity:1} .v-visio .t,.v-visio .t2{width:100%} } /* Publicite : le budget qui monte puis se coupe */ .v-pub{width:100%;padding:0 13px;display:flex;flex-direction:column;gap:9px} .v-pub .haut{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--texte-2)} .v-pub .haut svg{width:14px;height:14px;flex:none} .v-pub .haut .q{font-weight:600} /* l'etat de la campagne : deux mots au meme endroit, un seul a la fois. Cases PLEINES. */ .v-pub .et{margin-left:auto;position:relative;flex:none;width:76px;height:18px; overflow:hidden;border-radius:999px} .v-pub .et i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-style:normal;font-size:9px;font-weight:700;border-radius:999px;opacity:0} .v-pub .et .on{background:var(--ads);color:#fff} .v-pub .et .off{background:#efe9dd;color:#1a1405} /* la jauge de la SALLE : c'est elle qui commande, pas la pub. */ .v-pub .jauge{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden} .v-pub .jauge b{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--pointage),#fb7185);width:62%} .v-pub .bas{display:flex;align-items:center;justify-content:space-between;font-size:10px; color:var(--texte-3);position:relative;height:13px} .v-pub .bas i{position:absolute;left:0;right:0;font-style:normal;opacity:0; display:flex;justify-content:space-between} @keyframes pubMonte{0%,8%{width:62%}46%,100%{width:100%}} @keyframes pubOn{0%,48%{opacity:1}54%,100%{opacity:0}} @keyframes pubOff{0%,48%{opacity:0}54%,100%{opacity:1}} .v-pub .jauge b{animation:pubMonte 8s cubic-bezier(.22,1,.36,1) infinite} .v-pub .et .on,.v-pub .bas .a{animation:pubOn 8s ease-in-out infinite} .v-pub .et .off,.v-pub .bas .b{animation:pubOff 8s ease-in-out infinite} @media (prefers-reduced-motion:reduce){ .v-pub .jauge b,.v-pub .et i,.v-pub .bas i{animation:none} .v-pub .et .off,.v-pub .bas .b{opacity:1} .v-pub .jauge b{width:100%} } /* Formulaires : la question qui se coche */ .v-form{width:78%;display:flex;flex-direction:column;gap:7px} .v-form .q{height:11px;border-radius:99px;background:rgba(255,255,255,.13)} .v-form .q:nth-child(2){width:72%} .v-form .q:nth-child(3){width:54%} .v-form .ok{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--texte-2); opacity:0;transform:translateY(4px);transition:all .5s var(--ressort) .3s} .mod:hover .v-form .ok{opacity:1;transform:none} .v-form .ok span{width:15px;height:15px;border-radius:50%;background:var(--form);color:#fff; display:flex;align-items:center;justify-content:center} .v-form .ok svg{width:9px;height:9px} /* Visio : l'enregistrement et la transcription */ .v-visio{width:76%;display:flex;flex-direction:column;gap:8px} .v-visio .r{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--texte-2)} .v-visio .r i{width:8px;height:8px;border-radius:50%;background:#e11d48; animation:pulse 1.6s ease-in-out infinite} .v-visio .t{height:9px;border-radius:99px;background:rgba(255,255,255,.13);width:0; transition:width 1.4s linear} .mod:hover .v-visio .t{width:100%} .v-visio .t2{height:9px;border-radius:99px;background:rgba(255,255,255,.09);width:0; transition:width 1.4s linear .5s} .mod:hover .v-visio .t2{width:66%} /* Reservation : le bouton qui bascule */ .v-resa{width:100%;padding:0 13px;display:flex;flex-direction:column;gap:5px} .v-resa .rz{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px; background:rgba(255,255,255,.05);font-size:10.5px;color:var(--texte-2)} .v-resa .rz .q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v-resa .rz .n{margin-left:auto;position:relative;flex:none;width:54px;height:14px;overflow:hidden} .v-resa .rz .n i{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end; font-style:normal;font-variant-numeric:tabular-nums;color:var(--texte-3);opacity:0} /* le bouton : trois mots empiles au meme endroit, un seul visible a la fois. C'est le bouton qui se REECRIT, pas trois boutons cote a cote. Les cases sont PLEINES (loi DA). */ .v-resa .cta{position:relative;flex:none;width:88px;height:19px;overflow:hidden;border-radius:999px} .v-resa .cta i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; border-radius:999px;font-size:9.5px;font-weight:700;font-style:normal;letter-spacing:.01em; opacity:0;color:#fff} .v-resa .cta .a{background:var(--resa)} .v-resa .cta .b{background:#f6c744;color:#1a1405} .v-resa .cta .c{background:#3b3538} /* trois temps, et la deuxieme ligne vit sa vie en decale : deux lignes qui basculent a la meme seconde, ca fait un clignotant, pas un produit. */ @keyframes resaA{ 0%,30%{opacity:1;transform:translateY(0)} 35%{opacity:0;transform:translateY(-6px)} 35.01%,95%{opacity:0;transform:translateY(6px)} 100%{opacity:1;transform:translateY(0)}} @keyframes resaB{ 0%,30%{opacity:0;transform:translateY(6px)} 35%,62%{opacity:1;transform:translateY(0)} 67%{opacity:0;transform:translateY(-6px)} 67.01%,100%{opacity:0;transform:translateY(6px)}} @keyframes resaC{ 0%,62%{opacity:0;transform:translateY(6px)} 67%,95%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-6px)}} .v-resa .cta .a,.v-resa .n .a{animation:resaA 9s ease-in-out infinite} .v-resa .cta .b,.v-resa .n .b{animation:resaB 9s ease-in-out infinite} .v-resa .cta .c,.v-resa .n .c{animation:resaC 9s ease-in-out infinite} .v-resa .rz.deux .cta i,.v-resa .rz.deux .n i{animation-delay:-4.4s} /* ou le lien est pose : le meme, aux trois endroits */ .v-resa .ou{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--texte-3); padding:0 2px} .v-resa .ou svg{width:11px;height:11px;flex:none} .v-resa .ou .sep{opacity:.45} /* ═══ LA PAGE DE RESERVATION, EN GRAND ═══════════════════════════════════ Le meme ecran que la page publique du produit : l'affiche, le nom, le lien, puis une ligne par date. Le mot du bouton et le chiffre de la jauge montent ENSEMBLE, sinon l'ecran promet un « Complet » qu'il contredit deux colonnes plus loin. */ /* ── LA PAGE DU SPECTACLE, DANS SA FENETRE ────────────────────────────── Retour produit : « pas fond blanc, fais un truc joli ». Une page de spectacle n'est pas un formulaire : c'est une AFFICHE. Elle sert donc de decor, floutee derriere le verre, et c'est elle qui donne sa couleur a la page. Le produit fait exactement ca : l'accent de la page publique est choisi par le producteur, pas par nous. PIEGE CONNU (21/08) : un ::before positionne peint PAR-DESSUS les enfants non positionnes. Le decor est donc en z-index 0 et tout le contenu passe en position:relative;z-index:1. */ .fen{padding:0;overflow:hidden;background:#17131a;border-color:rgba(255,255,255,.14); box-shadow:0 50px 100px -40px #000, 0 0 0 1px rgba(255,255,255,.05)} .fen-barre{position:relative;z-index:2;display:flex;align-items:center;gap:12px; padding:11px 14px;background:#221d24;border-bottom:1px solid rgba(255,255,255,.08)} .fen-pt{display:flex;gap:6px;flex:none} .fen-pt i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)} .fen-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11.5px; color:rgba(255,255,255,.62);max-width:280px;margin:0 auto} .fen-url svg{width:11px;height:11px;flex:none;opacity:.55} .vit{position:relative;padding:22px 22px 18px;color:#fdf7e8;isolation:isolate} /* le decor : l'affiche elle-meme, agrandie et floutee */ .vit::before{content:"";position:absolute;inset:-40px;z-index:0; background:url("/assets/spectacle/le-grand-ecart.jpg") center/cover no-repeat; filter:blur(46px) saturate(150%);opacity:.5} .vit::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(165deg,rgba(23,19,26,.55),rgba(23,19,26,.93) 62%)} .vit > *{position:relative;z-index:1} .vit-tete{display:flex;align-items:center;gap:16px;padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1)} /* L'AFFICHE EST L'AFFICHE : fournie par la direction le 22/08 (spectacle invente). */ .vit-aff{flex:none;width:104px;height:auto;border-radius:9px;display:block; box-shadow:0 20px 40px -16px #000, 0 0 0 1px rgba(255,255,255,.14)} .vit-id{display:flex;flex-direction:column;line-height:1.2} .vit-id b{font-family:var(--marque);font-size:26px;font-weight:800;letter-spacing:-.03em} .vit-id em{font-style:normal;font-size:13px;color:rgba(253,247,232,.6);margin-top:6px} .vit-pt{margin-top:12px;align-self:flex-start;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--jaune); padding:5px 11px;border-radius:999px;background:rgba(246,199,68,.14)} .vit-l{display:flex;align-items:center;gap:12px;padding:14px 2px; border-bottom:1px solid rgba(255,255,255,.07)} .vit-d{display:flex;flex-direction:column;line-height:1.25;min-width:0} .vit-d b{font-size:14px;font-weight:600} .vit-d em{font-style:normal;font-size:12px;color:rgba(253,247,232,.55);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vit-j{margin-left:auto;position:relative;flex:none;width:74px;height:16px;overflow:hidden; font-size:11.5px;color:rgba(253,247,232,.55);font-variant-numeric:tabular-nums} .vit-j i{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end; font-style:normal;opacity:0} .vit-j.fixe{width:auto;height:auto;font-size:11px;text-align:right;white-space:nowrap; color:rgba(253,247,232,.4)} /* LES CASES SONT PLEINES, jamais un contour : loi de la charte, et c'est ce que voit l'acheteur sur la vraie page. Sur fond sombre, « Complet » devient un gris CLAIR : un gris fonce sur du sombre ne se lit pas, et l'etat doit rester une case pleine. */ .vit-b{position:relative;flex:none;width:132px;height:38px;overflow:hidden;border-radius:999px} .vit-b i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; border-radius:999px;font-size:12.5px;font-weight:700;font-style:normal;opacity:0;color:#fff} .vit-b .a{background:var(--resa)} .vit-b .b{background:var(--jaune);color:#1a1405} .vit-b .c{background:#efe9dd;color:#1a1405} /* eteint : le produit n'affiche JAMAIS un bouton qui n'ouvre rien. */ .vit-b .z{opacity:1;background:rgba(255,255,255,.09);color:rgba(253,247,232,.45);font-weight:600} @keyframes vitA{ 0%,30%{opacity:1;transform:translateY(0)} 34%{opacity:0;transform:translateY(-8px)} 34.01%,96%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)}} @keyframes vitB{ 0%,30%{opacity:0;transform:translateY(8px)} 34%,63%{opacity:1;transform:translateY(0)} 67%{opacity:0;transform:translateY(-8px)} 67.01%,100%{opacity:0;transform:translateY(8px)}} @keyframes vitC{ 0%,63%{opacity:0;transform:translateY(8px)} 67%,96%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-8px)}} .vit-b .a,.vit-j .a{animation:vitA 11s ease-in-out infinite} .vit-b .b,.vit-j .b{animation:vitB 11s ease-in-out infinite} .vit-b .c,.vit-j .c{animation:vitC 11s ease-in-out infinite} /* la deuxieme date bascule a un autre moment : deux lignes qui changent a la meme seconde, on voit le truc au lieu de voir le produit. */ .vit-l.deux .vit-b i,.vit-l.deux .vit-j i{animation-delay:-5.2s} @media (prefers-reduced-motion:reduce){ .vit-b i,.vit-j i{animation:none} .vit-b .a,.vit-j .a{opacity:1} } .vit-l:last-of-type{border-bottom:0} .vit-ou{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);margin-top:6px; font-size:11.5px;color:rgba(253,247,232,.45)} .vit-ou .pz{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px; background:rgba(255,255,255,.08);color:rgba(253,247,232,.8)} .vit-ou .pz svg{width:12px;height:12px} /* ── L'IDENTITE DU MODULE, EN TETE DE CHAQUE CHAPITRE ──────────────────── La tuile est PLEINE, a la couleur du module, comme dans l'app : une tuile fade sur fond transparent, c'est ce qu'on ne fait pas ici. Sur le jaune, l'icone est en ENCRE (le jaune ne porte jamais du blanc) ; sur les couleurs sombres, elle est blanche. */ .mod-id{display:inline-flex;align-items:center;gap:11px;margin-bottom:22px} .mod-id .t{flex:none;width:38px;height:38px;border-radius:12px;display:flex; align-items:center;justify-content:center;background:var(--m); box-shadow:0 10px 24px -12px var(--m), inset 0 1px 0 rgba(255,255,255,.3)} /* la couleur de l'icone DANS la tuile : blanche sur une couleur foncee, encre sur le jaune (le jaune ne porte jamais du blanc, loi de la charte). */ .mod-id .t.bl{color:#fff} .mod-id .t.enc{color:#1a1405} .mod-id .t svg{width:19px;height:19px} .mod-id .t .kmark,.mod-id .t svg[viewBox="0 0 56 58"]{width:16px;height:16px} .mod-id .n{display:flex;flex-direction:column;line-height:1.2} .mod-id .n b{font-size:14.5px;font-weight:700;letter-spacing:-.01em} .mod-id .n em{font-style:normal;font-size:11.5px;color:var(--texte-3);margin-top:3px} /* ── KOULISSE ADS : ON REGARDE, ON NE LIT PAS ────────────────────────── la direction, apres trois versions ecrites : « on comprend vraiment pas, c'est pas assez ludique, ni visuel ni image ». Deux images, donc, et le moins de mots possible : une salle qui se remplit siege par siege jusqu'au tampon COMPLET, et les jours de publicite en jetons dont onze s'eteignent d'un coup. Le calcul se COMPTE a l'oeil au lieu d'etre annonce. */ .ads{padding:20px;background:#17131a;color:var(--creme);border-color:rgba(255,255,255,.12)} /* le meme cadre porte les deux moities : on le NOMME, sinon on croit voir deux outils */ .ads-bandeau{display:flex;align-items:center;gap:9px;margin:-4px 0 16px;padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1); font-size:12px;font-weight:600;color:rgba(253,247,232,.62)} .ads-bandeau .kmark{height:14px;width:auto;color:var(--jaune);flex:none} .ads-salle{position:relative;padding:26px 16px 16px;border-radius:18px; background: radial-gradient(120% 90% at 50% -10%,rgba(253,247,232,.09),transparent 62%), rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);overflow:hidden} /* la scene, pour qu'on reconnaisse une salle de spectacle vue de dessus */ .ads-scene-lab{position:absolute;top:0;left:50%;transform:translateX(-50%); padding:4px 26px;border-radius:0 0 12px 12px;background:var(--creme);color:#141011; font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .ads-sieges{display:grid;grid-template-columns:repeat(20,1fr);gap:3px} .ads-sieges i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.09); transition:background .35s ease,opacity .35s ease} .ads-sieges i.pris{background:var(--pointage)} /* LA PROFONDEUR SE FAIT PAR LA VALEUR, PAS PAR UNE COULEUR DE PLUS : les six rangs vont du plus lumineux (devant la scene) au plus sourd (le fond de salle). C'est ce qui manquait pour que ce ne soit plus un aplat. */ .ads-sieges i:nth-child(-n+20){opacity:1} .ads-sieges i:nth-child(n+21):nth-child(-n+40){opacity:.94} .ads-sieges i:nth-child(n+41):nth-child(-n+60){opacity:.88} .ads-sieges i:nth-child(n+61):nth-child(-n+80){opacity:.82} .ads-sieges i:nth-child(n+81):nth-child(-n+100){opacity:.76} .ads-sieges i:nth-child(n+101){opacity:.7} /* le tampon tombe sur la salle quand elle est pleine : c'est la recompense, elle doit s'entendre. */ .ads-tampon{position:absolute;top:50%;left:50%;padding:10px 26px;border-radius:12px; background:var(--creme);color:#141011;font-size:20px;font-weight:800;letter-spacing:.02em; text-transform:uppercase;box-shadow:0 20px 40px -14px rgba(0,0,0,.7); opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(1.9);pointer-events:none; transition:opacity .28s ease,transform .45s cubic-bezier(.34,1.56,.64,1)} .ads-tampon.tombe{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)} /* les deux entetes ont la MEME forme : le logo du module, ce dont on parle, et le chiffre a droite. Deux images en dessous, et plus rien a lire. */ .ads-titre{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:11px} .ads-mod{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700; color:var(--creme);white-space:nowrap} .ads-mod .tu{display:inline-flex;width:26px;height:26px;border-radius:8px;flex:none; align-items:center;justify-content:center;background:var(--t);color:#fff; box-shadow:0 8px 16px -9px var(--t),inset 0 1px 0 rgba(255,255,255,.3)} .ads-mod .tu svg{width:14px;height:14px} /* l'etiquette d'un visuel : le logo du module, son nom, et ce qu'il fait. Elle vit HORS du document, parce qu'elle parle du document. */ .doc-etiq{display:flex;align-items:center;gap:11px;margin-bottom:14px} .doc-etiq .ads-mod{color:var(--texte)} .doc-etiq .tu.enc{color:#1a1405} .doc-etiq-d{font-size:12.5px;color:var(--texte-3)} .ads-chiffre{margin-left:auto;font-size:12.5px;color:rgba(253,247,232,.55); font-variant-numeric:tabular-nums;text-align:right} /* le contexte du budget est la plus longue des cinq choses de cette ligne : il descend des que la carte se resserre, plutot que de sortir du cadre. */ @media(max-width:1120px){ .ads-titre .ads-chiffre{margin-left:0;width:100%;text-align:left;order:9} } .ads-chiffre b{font-weight:700;color:var(--creme)} .ads-marques{display:inline-flex;gap:5px;flex:none} /* qui tient la manette : c'est la question qu'on se pose en voyant les logos de Meta */ .ads-pilote{flex:none;padding:4px 11px;border-radius:999px;background:var(--jaune); color:#1a1405;font-size:10.5px;font-weight:700;white-space:nowrap} .ads-marques svg{width:19px;height:19px} .ads-jours{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)} .ads-jours-tete{display:flex;align-items:center;gap:9px;margin-bottom:11px} .ads-marques{display:inline-flex;gap:5px;flex:none} /* qui tient la manette : c'est la question qu'on se pose en voyant les logos de Meta */ .ads-pilote{flex:none;padding:4px 11px;border-radius:999px;background:var(--jaune); color:#1a1405;font-size:10.5px;font-weight:700;white-space:nowrap} .ads-marques svg{width:19px;height:19px} .ads-jours-tete b{font-size:13px;font-weight:700;color:#141011} /* LA BARRE DIT TOUT SANS LEGENDE : ce que la publicite allait couter en entier, la part partie (bleu), la part gardee (jaune). Le tampon PAUSE tombe a l'endroit exact ou la barre s'arrete : le geste et son effet au meme endroit. */ .ads-barre{display:flex;height:46px;border-radius:13px;overflow:hidden; background:rgba(255,255,255,.09)} .ads-barre b{display:flex;align-items:center;justify-content:center;height:100%;width:0; overflow:hidden;transition:width 1.1s cubic-bezier(.22,1,.36,1)} .ads-barre .dep{background:var(--ads);box-shadow:inset 0 -14px 26px -14px rgba(0,0,0,.45)} /* LE CHIFFRE VIT DANS LA BARRE : c'est la part jaune, elle porte son montant, on ne le cherche pas dans une legende. */ .ads-barre .gar{background:var(--jaune)} .ads-barre .gar{justify-content:flex-end;box-shadow:inset 0 -14px 26px -14px rgba(120,84,0,.35)} .ads-barre .gar span{white-space:nowrap;font-size:16px;font-weight:800;color:#1a1405; letter-spacing:-.01em;padding-right:20px;opacity:0;transition:opacity .45s ease .35s} .ads-barre .gar.plein span{opacity:1} .ads-legende{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:12px; font-size:12.5px;color:rgba(253,247,232,.5)} .ads-legende .lg{display:inline-flex;align-items:center;gap:7px} .ads-legende .lg b{font-weight:800;color:var(--creme);font-variant-numeric:tabular-nums} .ads-legende .lg i{width:11px;height:11px;border-radius:3px;flex:none} /* QUI a appuye sur pause : c'est tout le produit, et le tampon seul ne le disait pas. */ .ads-auto{flex:1;min-width:220px;color:rgba(253,247,232,.62);line-height:1.4; opacity:0;transform:translateY(4px);transition:all .5s var(--ressort)} .ads-auto b{font-weight:700;color:var(--jaune)} .ads-auto.la{opacity:1;transform:none} #ads-lg-garde{opacity:0;transform:translateY(4px);transition:all .5s var(--ressort)} #ads-lg-garde.la{opacity:1;transform:none} .lg-depense i{background:var(--ads)} .lg-garde i{background:var(--jaune)} /* LE TAMPON PAUSE, frere de COMPLET : ce qui tombe sur la salle dit « c'est plein », ce qui tombe sur la pub dit « donc on arrete ». Deux gestes, aucune phrase. */ .ads-zone-pub{position:relative} .ads-pause{position:absolute;top:50%;left:50%;display:inline-flex;align-items:center;gap:9px; padding:9px 20px;border-radius:12px;background:var(--ads);color:#fff; font-size:17px;font-weight:800;letter-spacing:.01em;text-transform:uppercase; box-shadow:0 26px 50px -20px rgba(37,99,235,.7);pointer-events:none; opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1.8); transition:opacity .26s ease,transform .45s cubic-bezier(.34,1.56,.64,1)} .ads-pause svg{width:16px;height:16px} .ads-pause.tombe{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)} @media(max-width:640px){ .ads-sieges{grid-template-columns:repeat(15,1fr)} /* la barre est trop courte pour porter le tampon ET le montant : le montant descend */ .ads-barre .gar span{display:none} .ads-legende::after{content:"132 € économisés";font-size:13px;font-weight:800; color:#1a1405;background:var(--jaune);padding:4px 10px;border-radius:8px} .ads-chiffre{white-space:normal;width:100%;text-align:left;margin-left:0} .ads-titre{flex-wrap:wrap} .ads-rangee i{height:26px;font-size:9px;border-radius:7px} .ads-legende{flex-wrap:wrap;gap:10px} } /* ═══ 5. LES PRIX ════════════════════════════════════════════════════════ */ .prix-sec{padding:120px 0 0} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:stretch} .plan{display:flex;flex-direction:column;padding:32px;position:relative;overflow:hidden} .plan:hover{border-color:var(--bord-fort)} .plan.vedette{border-color:rgba(246,199,68,.45); background:linear-gradient(180deg,rgba(246,199,68,.14),rgba(255,255,255,.03) 60%); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 70px -30px rgba(246,199,68,.8), inset 0 1px 0 rgba(255,255,255,.16)} .ruban{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--jaune);color:#1a1405} .plan .nom{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--texte-2)} .plan .montant{font-family:var(--display);font-weight:700;font-size:36px;letter-spacing:-.035em; display:flex;align-items:baseline;gap:5px;color:#fff} .plan .montant small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--texte-3)} .plan ul{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:13px; font-size:16px;line-height:1.45;flex:1} .plan li{display:flex;gap:10px;align-items:flex-start;color:var(--texte-2)} .plan li svg{flex:none;margin-top:4px;color:var(--jaune)} /* ═══ 6. LA FIN ══════════════════════════════════════════════════════════ */ .fin{padding:140px 0 130px;text-align:center;position:relative} .fin .lead{margin:18px auto 0;max-width:540px} .fin .hero-cta{margin-top:32px} footer{border-top:1px solid var(--bord);padding:44px 0;font-size:14px;color:var(--texte-3); position:relative;z-index:2} .pied{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center} .pied-liens{display:flex;gap:20px;flex-wrap:wrap} .pied a:hover{color:var(--texte)} /* ── Les maquettes de produit (dessinees, aucune image a charger) ───────── */ .app{display:grid;grid-template-columns:180px 1fr;min-height:400px;background:#fdfdfd} .app-cote{background:#fff;border-right:1px solid rgba(10,10,11,.07);padding:16px 12px} .app-cote .l{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px; font-size:12.5px;color:#6b6b76;margin-bottom:2px} .app-cote .l.on{background:var(--jaune);color:#1a1405;font-weight:600} .app-cote .l i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.28;display:block} .app-cote .l.on i{opacity:.65} .app-corps{padding:22px 24px} .app-titre{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.035em;margin-bottom:3px} .app-sous{font-size:12.5px;color:#6b6b76;margin-bottom:18px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .kpi{background:#fff;border:1px solid rgba(10,10,11,.08);border-radius:12px;padding:12px 13px} .kpi .v{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.035em} .kpi .k{font-size:10.5px;color:#9a9aa3;margin-top:2px} .lignes{background:#fff;border:1px solid rgba(10,10,11,.08);border-radius:14px;overflow:hidden} .ligne{display:flex;align-items:center;gap:12px;padding:12px 14px; border-bottom:1px solid rgba(10,10,11,.06);font-size:12.5px} .ligne:last-child{border-bottom:0} .ligne .date{width:54px;color:#9a9aa3;font-size:11.5px} .ligne .lieu{flex:1;font-weight:500} .ligne .ville{color:#6b6b76;font-size:12px} .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px} .pill.vert{background:rgba(16,163,74,.13);color:#15803d} .pill.jaune{background:rgba(246,199,68,.28);color:#8a6a08} .pill.bleu{background:rgba(29,155,240,.13);color:#0e7ac0} .fiche-tete{padding:18px 20px;border-bottom:1px solid rgba(10,10,11,.07)} .fiche-tete .t{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.035em} .fiche-tete .s{font-size:12.5px;color:#6b6b76;margin-top:3px} .rail{display:flex;gap:6px;padding:14px 20px;flex-wrap:wrap;border-bottom:1px solid rgba(10,10,11,.07)} .pas{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f4f4f5;color:#6b6b76} .pas.fait{background:rgba(16,163,74,.13);color:#15803d} .pas.en{background:var(--jaune);color:#1a1405} .fiche-corps{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px} .mini{border:1px solid rgba(10,10,11,.08);border-radius:12px;padding:12px 14px} .mini .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9a9aa3} .mini .v{font-weight:600;font-size:14px;margin-top:3px} .barres{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:10px} .barres i{flex:1;border-radius:5px 5px 0 0;display:block; background:linear-gradient(180deg,var(--jaune-clair),var(--jaune))} /* ── Apparition ────────────────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ressort), transform .8s var(--ressort)} .rv.vu{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .capture{transform:none!important} } @media(max-width:980px){ .trois,.etapes,.mods,.plans,.preuves-in,.familles{grid-template-columns:1fr 1fr} .bloc-in,.bloc.inverse .bloc-in,.hero-grille{grid-template-columns:1fr;gap:36px} .bloc.inverse .bloc-txt{order:0} .app{grid-template-columns:1fr} .app-cote{display:none} } @media(max-width:520px){ /* au pouce, l'en-tete ne tient pas a trois : le bouton d'essai suffit, « Se connecter » reste accessible depuis le pied de page. */ header.top .btn-verre{display:none} header.top{padding-right:8px} } @media(max-width:700px){ .constellation{height:auto;display:flex;flex-direction:column;gap:10px;padding-top:4px} .constellation .fils{display:none} .noyau{width:100%;order:-1} .sat{position:static !important;width:100%;left:auto !important;top:auto !important; animation:satEntreV .5s var(--ressort) both} .sat .txt em{max-width:none} @keyframes satEntreV{from{opacity:0;transform:translateY(10px)}} } @media(max-width:640px){ .trois,.etapes,.mods,.plans,.familles{grid-template-columns:1fr} .vit-aff{width:68px} .vit-id b{font-size:16px} .vit-j{display:none} .vit-b{width:104px;height:32px} .vit-b i{font-size:11px} .fen-url{max-width:none} .hero{padding-top:118px} .reponses,.parcours,.bloc,.modules,.prix-sec{padding-top:100px} .kpis{grid-template-columns:repeat(2,1fr)} .scene{margin-top:52px} } /* ═══════════════════════════════════════════════════════════════════════════ LE SITE A PLUSIEURS PAGES (22/08/2026) la direction, en montrant breakly.io : « on a besoin d'un site tres complet (...) c'est surtout l'aspect visuel epure, bien agence qui m'interesse ». Ce qui fait un site complet, ce n'est pas une page plus longue : c'est une NAVIGATION (on sait ou on est, on sait ou aller), un pied qui donne toutes les portes, et un rythme de sections regulier. Les briques ci-dessous sont celles qui manquaient a une page unique. ═══════════════════════════════════════════════════════════════════════════ */ /* ── LE MENU ───────────────────────────────────────────────────────────── Au centre de la pilule, en texte nu. La rubrique ouverte est en ENCRE sur creme, jamais en jaune : le jaune est un fond, pas un texte (loi de la charte). */ .menu{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500} .menu a{color:var(--texte-2);white-space:nowrap;transition:color .2s ease} .menu a:hover{color:var(--texte)} .menu a.ici{color:var(--texte);font-weight:600} .burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:12px} .burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--texte); transition:transform .3s var(--ressort),opacity .2s ease} .burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)} @media(max-width:1080px){ .menu{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-8px); width:min(1180px,calc(100% - 28px));flex-direction:column;align-items:stretch;gap:0; padding:8px;border-radius:22px;background:rgba(24,18,21,.96);border:1px solid var(--bord-fort); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 30px 70px -28px #000; opacity:0;pointer-events:none;transition:all .3s var(--ressort);z-index:19} .menu.ouvert{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} .menu a{padding:13px 14px;border-radius:14px;font-size:15.5px} .menu a:hover,.menu a.ici{background:rgba(255,255,255,.06)} .burger{display:flex} } /* ── L'ENTETE D'UNE PAGE INTERIEURE ─────────────────────────────────────── */ .page-tete{padding:150px 0 0} .page-tete .wrap{max-width:760px} .page-tete.pt-duo .wrap{max-width:var(--max)} .fil{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3);margin-bottom:18px} .fil i{width:5px;height:5px;border-radius:50%;background:var(--jaune);font-style:normal} .page-tete .lead{margin-top:20px;max-width:620px} /* ── LE BANDEAU DE BENEFICES ──────────────────────────────────────────── Quatre promesses, dont UN chiffre. C'est ce que Breakly pose juste sous son hero, et ca repond a « qu'est-ce que j'y gagne » avant meme la premiere capture. */ .benefs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px; border-radius:26px;overflow:hidden;background:var(--bord);border:1px solid var(--bord)} .benef{background:rgba(255,255,255,.035);padding:26px 22px;text-align:center} .benef .ic{display:inline-flex;width:38px;height:38px;border-radius:12px;align-items:center; justify-content:center;background:rgba(246,199,68,.14);color:var(--jaune);margin-bottom:13px} .benef .ic svg{width:19px;height:19px} .benef b{display:block;font-size:15px;font-weight:700;line-height:1.3} .benef em{display:block;font-style:normal;font-size:12.5px;color:var(--texte-3);margin-top:6px; line-height:1.4} /* ── CE SUR QUOI CA SE BRANCHE ────────────────────────────────────────── A la place des logos de clients : nous n'en avons pas encore, et en inventer serait un mensonge. Ce que le produit sait faire aujourd'hui, lui, est verifiable. */ .branche{margin-top:70px;text-align:center} .branche h2{font-size:15px;font-weight:600;color:var(--texte-3)} /* LES LOGOS DANS DES TUILES CARREES, comme sur toutes ses references : un carre blanc a grand rayon, une ombre douce, le logo au centre et rien d'autre. Le nom passe dessous, en tout petit : le logo se reconnait, le nom leve le doute. */ .branche-l{display:grid;grid-template-columns:repeat(9,1fr);gap:14px;margin-top:32px} .outil{display:flex;flex-direction:column;align-items:center;gap:9px} .outil::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none} .outil .tuile{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:20px; background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.16),0 16px 30px -18px rgba(0,0,0,.6); transition:transform .35s var(--ressort),box-shadow .35s ease} .outil:hover .tuile{transform:translateY(-4px); box-shadow:0 4px 8px rgba(0,0,0,.2),0 26px 46px -20px rgba(0,0,0,.7)} .outil img{width:52%;height:52%;flex:none} .outil em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--texte-3); text-align:center;line-height:1.3} @media(max-width:1080px){.branche-l{grid-template-columns:repeat(5,1fr)}} @media(max-width:640px){.branche-l{grid-template-columns:repeat(3,1fr);gap:10px}} .branche-p{margin-top:20px;font-size:13.5px;color:var(--texte-3)} /* ── LA SECURITE ────────────────────────────────────────────────────────── */ .secu{padding:110px 0 0} .secu-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .secu-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px} .secu-liste li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5; color:var(--texte-2)} .secu-liste svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--jaune)} .secu-vis{display:grid;grid-template-columns:1fr 1fr;gap:12px} .secu-c{padding:22px 20px;border-radius:20px;background:var(--verre);border:1px solid var(--bord)} .secu-c b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em} .secu-c em{display:block;font-style:normal;font-size:12.5px;color:var(--texte-3);margin-top:6px; line-height:1.4} @media(max-width:900px){.secu-in{grid-template-columns:1fr;gap:32px}} /* ── LE PIED DE SITE ──────────────────────────────────────────────────── Cinq colonnes et un filigrane, comme les sites qu'on regarde : un pied riche dit qu'il y a un produit derriere, un pied a trois liens dit qu'il y a une page. */ .pied-site{position:relative;z-index:1;margin-top:120px;padding:70px 0 0; border-top:1px solid var(--bord);overflow:hidden} .pied-in{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px 30px} .pied-col h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--texte-3);margin-bottom:14px} .pied-col a{display:block;font-size:14.5px;color:var(--texte-2);padding:5px 0; transition:color .2s ease} .pied-col a:hover{color:var(--texte)} .pied-marque p{font-size:14px;color:var(--texte-3);line-height:1.55;margin-top:14px} .pied-marque .brand{font-size:20px} .pied-legal{font-size:12.5px !important;margin-top:12px !important} .pied-filigrane{margin-top:50px;font-family:var(--marque);font-weight:800; font-size:clamp(70px,15vw,220px);line-height:.8;letter-spacing:-.05em;text-align:center; color:rgba(255,255,255,.035);user-select:none;pointer-events:none; transform:translateY(22%)} @media(max-width:900px){ .pied-in{grid-template-columns:1fr 1fr} .pied-marque{grid-column:1 / -1} } @media(max-width:520px){.pied-in{grid-template-columns:1fr}} /* le rappel d'action, partage par toutes les pages */ .fin-in{max-width:720px;margin:0 auto} .fin-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px} .fin-note{margin-top:18px;font-size:13.5px;color:var(--texte-3)} /* ── LA LISTE DES MODULES, AVEC LEUR PRIX ──────────────────────────────── La question commerciale la plus frequente est « qu'est-ce qui est compris ? ». Une ligne par module, ce qu'il fait, ce qu'on faisait AVANT sans lui, et son prix. */ .mod-liste{display:grid;gap:10px;margin-top:10px} .mod-l{display:grid;grid-template-columns:1.4fr 1fr auto;align-items:center;gap:20px; padding:20px 22px;border-radius:20px;background:var(--verre);border:1px solid var(--bord); transition:border-color .25s ease,transform .3s var(--ressort),background .25s ease} .mod-l:hover{border-color:var(--bord-fort);transform:translateY(-2px); background:rgba(255,255,255,.07)} .mod-l-n{display:flex;flex-direction:column;gap:5px;min-width:0} .mod-l-n b{font-size:16px;font-weight:700} .mod-l-n em{font-style:normal;font-size:13.5px;color:var(--texte-2);line-height:1.45} .mod-l-a{font-size:13px;color:var(--texte-3);line-height:1.45} .mod-l-p{font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap} .mod-l-p i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--texte-3);margin-left:3px} @media(max-width:820px){ .mod-l{grid-template-columns:1fr auto;gap:12px} .mod-l-a{grid-column:1 / -1;order:3} } /* ── LES MODULES A LA CARTE, SUR LA PAGE DES TARIFS ────────────────────── */ .carte-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px} .carte-l{padding:20px;border-radius:18px;background:var(--verre);border:1px solid var(--bord); transition:border-color .25s ease,transform .3s var(--ressort)} .carte-l:hover{border-color:var(--bord-fort);transform:translateY(-2px)} .carte-l b{display:block;font-size:15.5px;font-weight:700} .carte-l em{display:block;font-style:normal;font-size:13px;color:var(--texte-3);margin-top:7px; line-height:1.45} .carte-l span{display:block;margin-top:14px;font-size:15px;font-weight:800} @media(max-width:820px){.carte-liste{grid-template-columns:1fr 1fr}} @media(max-width:560px){.carte-liste{grid-template-columns:1fr}} /* ── LES QUESTIONS ────────────────────────────────────────────────────── Un depli natif (`details`) : il marche sans script, il est accessible au clavier, et il ne casse pas si le JavaScript ne charge pas. */ .qr-liste{display:grid;gap:10px;max-width:840px} .qr{border-radius:18px;background:var(--verre);border:1px solid var(--bord);overflow:hidden} .qr summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:16.5px;font-weight:600; display:flex;align-items:center;gap:14px;transition:background .2s ease} .qr summary::-webkit-details-marker{display:none} .qr summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px; border-right:2px solid var(--texte-3);border-bottom:2px solid var(--texte-3); transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ressort)} .qr[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)} .qr summary:hover{background:rgba(255,255,255,.04)} .qr p{margin:0;padding:0 24px 22px;font-size:15px;line-height:1.6;color:var(--texte-2); max-width:660px} /* ── LES GARANTIES DE SECURITE ──────────────────────────────────────────── */ .gar-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gar{padding:24px;border-radius:20px;background:var(--verre);border:1px solid var(--bord)} .gar b{display:block;font-size:16px;font-weight:700} .gar p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--texte-2)} @media(max-width:900px){.gar-grille{grid-template-columns:1fr 1fr}} @media(max-width:600px){.gar-grille{grid-template-columns:1fr}} /* ── LES PAGES LEGALES ────────────────────────────────────────────────── Une colonne de lecture, pas une grille : ce sont des documents. */ .legal{max-width:760px} .legal h2{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:44px 0 14px} .legal h2:first-child{margin-top:0} .legal p{font-size:15.5px;line-height:1.7;color:var(--texte-2);margin:0 0 14px} .acompleter{background:rgba(246,199,68,.2);color:var(--jaune);padding:2px 8px;border-radius:6px; font-size:13px;font-weight:600} /* ── LES RUBRIQUES A TIROIR ───────────────────────────────────────────── Retour produit : « il y a les sous-pages de fonctionnalites, plein de sous-menus ». Un menu a tiroirs dit qu'il y a un site derriere ; cinq liens a plat disent qu'il y a une page. Chaque entree porte son intitule ET ce qu'on y trouve : on choisit sans deviner. */ .menu-d{position:relative} .menu-b{display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer; font:inherit;font-size:14.5px;font-weight:500;color:var(--texte-2);padding:0; transition:color .2s ease} .menu-b:hover,.menu-b[aria-expanded="true"],.menu-b.ici{color:var(--texte)} .menu-b.ici{font-weight:600} .menu-b svg{width:13px;height:13px;transition:transform .25s var(--ressort)} .menu-b[aria-expanded="true"] svg{transform:rotate(180deg)} .menu-p{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px); width:320px;padding:8px;border-radius:20px;background:rgba(24,18,21,.97); border:1px solid var(--bord-fort);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 30px 70px -26px #000;opacity:0;pointer-events:none; transition:all .26s var(--ressort);z-index:30} .menu-d.ouvert .menu-p{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} .menu-p a{display:block;padding:11px 13px;border-radius:13px;transition:background .18s ease} .menu-p a:hover{background:rgba(255,255,255,.07)} .menu-p b{display:block;font-size:14.5px;font-weight:600;color:var(--texte)} .menu-p em{display:block;font-style:normal;font-size:12.5px;color:var(--texte-3);margin-top:3px; line-height:1.4} @media(max-width:1080px){ .menu-d{width:100%} .menu-b{width:100%;justify-content:space-between;padding:13px 14px;border-radius:14px; font-size:15.5px} .menu-p{position:static;transform:none;width:100%;opacity:1;pointer-events:auto; background:none;border:0;box-shadow:none;padding:0 0 6px 10px;display:none} .menu-d.ouvert .menu-p{display:block;transform:none} } /* ── LES ARTICLES DU BLOG ───────────────────────────────────────────────── */ .arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .art{display:flex;flex-direction:column;padding:26px;border-radius:22px; background:var(--verre);border:1px solid var(--bord); transition:transform .3s var(--ressort),border-color .25s ease} .art:hover{transform:translateY(-3px);border-color:var(--bord-fort)} .art-d{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--texte-3)} .art b{display:block;margin-top:14px;font-size:19px;font-weight:700;letter-spacing:-.02em; line-height:1.28} .art p{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--texte-2);flex:1} .art-l{margin-top:20px;font-size:14px;font-weight:700;color:var(--texte)} @media(max-width:900px){.arts{grid-template-columns:1fr}} /* ── LE LEXIQUE ─────────────────────────────────────────────────────────── */ .lex-l{font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--jaune); margin:52px 0 18px} .lex-l:first-child{margin-top:0} .lex-g{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .lex{padding:22px;border-radius:18px;background:var(--verre);border:1px solid var(--bord)} .lex b{display:block;font-size:16px;font-weight:700} .lex p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--texte-2)} @media(max-width:820px){.lex-g{grid-template-columns:1fr}} /* ── L'ENTETE A DEUX COLONNES ─────────────────────────────────────────── Une page qui commence par un titre seul sur du vide a l'air d'un gabarit ; la meme page avec un ecran du produit a cote a l'air d'un produit. C'est ce que font toutes les references, et c'est ce qui manquait (retour produit : « un template Claude Code »). */ .pt-duo .pt-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center} .pt-txt .lead{margin-top:20px} .pt-txt .hero-cta{margin-top:30px} .pt-vis{position:relative} .pt-duo{padding-bottom:96px} /* la scene reprise dans un entete est plus petite : elle illustre, elle ne demontre pas */ .pt-vis .mini,.pt-vis .ecran{font-size:.94em} .pt-vis .demo{grid-template-columns:1fr;gap:14px} .pt-vis .flux{display:none} .pt-vis .salle,.pt-vis .mien{max-width:none} @media(max-width:980px){ .pt-duo .pt-in{grid-template-columns:1fr;gap:34px} .pt-duo{padding-bottom:70px} } /* ── LE PIED, AVEC SA LUEUR ───────────────────────────────────────────── Chez Breakly, le pied n'est pas une zone morte : un degrade y monte et le mot-marque le remplit en filigrane. C'est ce qui donne l'impression que le site « finit » au lieu de s'arreter. On prend l'idee, avec notre jaune, tres bas et tres doux. */ .pied-site{background: radial-gradient(120% 80% at 50% 140%, rgba(246,199,68,.22), transparent 62%), radial-gradient(70% 60% at 15% 120%, rgba(225,29,72,.1), transparent 60%)} .pied-filigrane{color:rgba(246,199,68,.07)} /* ── LES FORMES DE FOND ───────────────────────────────────────────────── Retour produit : « je t'ai montre des trucs avec des formes, des images en background ». Deux formes tres douces derriere les sections claires : elles cassent l'aplat sans rien couvrir, et elles reprennent les couleurs des modules. */ .secu::after{bottom:-260px;left:-200px; background:radial-gradient(circle,rgba(225,29,72,.14),transparent 66%)} /* ═══════════════════════════════════════════════════════════════════════════ LE PREMIER ECRAN, CALQUE SUR LE LEUR (retour produit : « je voulais la copie conforme en terme de DA et structure ») Releve chez eux : un fond de COULEUR VIVE en degrade plein cadre, un en-tete blanc qui flotte dessus, le titre a gauche sur deux lignes dont la fin change de teinte, deux boutons (un plein, un a contour), la capture du produit a droite dans un cadre clair, et juste dessous un bandeau de quatre benefices a filet. Jamais de sombre en haut de page. Chez nous la couleur vive est le JAUNE, et sur du jaune on ecrit en ENCRE : c'est deja la loi de l'application, le jaune est un fond, jamais un texte. ═══════════════════════════════════════════════════════════════════════════ */ .hero-vif{position:relative;z-index:1;padding:118px 0 0;color:var(--texte); background: radial-gradient(90% 62% at 78% 0%, rgba(246,199,68,.3) 0%, transparent 60%), radial-gradient(64% 46% at 6% 62%, rgba(225,29,72,.14) 0%, transparent 66%), radial-gradient(56% 40% at 96% 52%, rgba(29,155,240,.13) 0%, transparent 64%), linear-gradient(168deg, #1b1518 0%, #171216 46%, #141011 100%)} /* le dernier centimetre du premier ecran est exactement la couleur du fond commun : c'est ce qui efface la couture avec la section suivante. */ .hero-vif::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px; pointer-events:none; background:linear-gradient(180deg,rgba(20,16,17,0),#141011 92%)} /* une trame tres fine sur la couleur : elle evite l'aplat sans se voir */ .hero-vif::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(75% 60% at 50% 30%,#000,transparent 78%)} .hv-in{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center; position:relative;z-index:2} .hv-sur{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600; letter-spacing:.01em;color:var(--texte-2);padding:8px 16px;border-radius:999px; background:rgba(255,255,255,.06);border:1px solid var(--bord-fort)} .hv-sur::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jaune); box-shadow:0 0 10px 2px rgba(246,199,68,.7)} .hv-t{margin:22px 0 0;font-family:var(--display);font-weight:800;letter-spacing:-.038em; line-height:1.02;font-size:clamp(38px,4.7vw,64px);color:var(--texte);overflow-wrap:break-word} /* la fin du titre passe en teinte plus douce, comme chez eux ; le jaune reste un fond */ .hv-t span{color:rgba(255,252,246,.46)} .hv-l{margin:20px 0 0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6; color:var(--texte-2);max-width:580px} .hv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} /* le bouton plein est en ENCRE : sur du jaune, un bouton jaune n'existe pas */ /* sur du sombre, le bouton principal est JAUNE avec du texte encre : c'est la pilule de l'application, et c'est la seule tache de couleur pleine du premier ecran. */ .hv-b1{background:linear-gradient(180deg,var(--jaune-clair),var(--jaune) 55%,var(--jaune-chaud)); color:#1a1405;box-shadow:0 14px 40px -10px rgba(246,199,68,.55)} .hv-b1:hover{box-shadow:0 20px 52px -10px rgba(246,199,68,.75)} .hv-b2{background:rgba(255,255,255,.07);color:var(--texte);border:1px solid var(--bord-fort)} .hv-b2:hover{background:rgba(255,255,255,.12)} .hv-note{margin-top:18px;font-size:13.5px;color:var(--texte-3)} /* la capture, dans un cadre clair pose sur la couleur */ /* la capture est posee dans un cadre de verre : sur du sombre, c'est ce cadre qui la fait flotter, exactement comme leur cadre clair sur leur violet. */ .hv-vis{position:relative;padding:16px;border-radius:30px;background:rgba(255,255,255,.06); border:1px solid var(--bord-fort); box-shadow:0 50px 110px -45px #000, inset 0 1px 0 rgba(255,255,255,.12)} .hv-vis .visuel,.hv-vis .demo{padding:0;background:none;border:0} .hv-vis .visuel::before{opacity:.55;display:none} .hv-vis .mini,.hv-vis .ecran{border:1px solid rgba(20,16,17,.06); box-shadow:0 2px 5px rgba(0,0,0,.14),0 30px 60px -30px rgba(0,0,0,.75)} /* le bandeau de benefices, encore sur la couleur */ .hv-benefs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr); gap:1px;margin-top:70px;border-radius:22px;overflow:hidden; background:var(--bord);border:1px solid var(--bord)} .hb{background:rgba(255,255,255,.04);padding:24px 20px;text-align:center} .hb b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--texte)} .hb em{display:block;font-style:normal;font-size:12.5px;color:var(--texte-3);margin-top:6px; line-height:1.4} @media(max-width:980px){ .hv-in{grid-template-columns:1fr;gap:40px} .hv-benefs{grid-template-columns:1fr 1fr;margin-top:44px} .hero-vif{padding-top:96px} } @media(max-width:560px){.hv-benefs{grid-template-columns:1fr}} /* la capture du premier ecran est BORNEE en hauteur et fond en bas : chez eux elle deborde du cadre plutot que de tout montrer. Une scene de 900 px dans un hero ecrase le titre. */ .hv-vis{max-height:560px;overflow:hidden} .hv-vis::after{content:"";position:absolute;left:16px;right:16px;bottom:16px;height:150px; pointer-events:none;border-radius:0 0 22px 22px; background:linear-gradient(180deg,rgba(20,16,17,0),rgba(20,16,17,.55) 74%)} /* UN SEUL ecran dans le premier cadre : deux ecrans cote a cote dans 600 px donnent deux colonnes de 300 px, et tous les libelles se cassent en trois lignes (constate le 22/08). */ .hv-vis .mien{max-width:none} .hv-vis .tag{margin-bottom:16px} @media(max-width:980px){.hv-vis{max-height:440px}} /* NOTE : le site est ENTIEREMENT SOMBRE. Les regles d'un theme clair ont existe ici le 22/08 et ont ete retirees : du CSS mort qui redefinit des jetons de couleur provoque des pannes silencieuses (deux le meme jour). Si une page a besoin d'un fond clair un jour, on repart de l'historique git plutot que de laisser dormir des regles inutilisees. */ /* ═══════════════════════════════════════════════════════════════════════════ DEFAUT GRAVE, CORRIGE LE 22/08 : UNE SECTION SOMBRE DOIT PORTER SON FOND Les sections `.sombre` (grille des modules, rappel final, constellation) n'avaient PAS de fond a elles : elles comptaient sur le fond nuit du `body`. Le jour ou une page est passee en theme clair, ce fond a disparu — et leurs textes creme se sont retrouves sur du creme. Resultat : la grille des modules illisible, en production. LA LECON, ET ELLE VAUT PARTOUT : une section qui ecrit en clair DOIT peindre son propre fond. Ne jamais dependre de ce qu'il y a derriere. ═══════════════════════════════════════════════════════════════════════════ */ /* toutes les sections sombres partagent EXACTEMENT la meme couleur de fond : c'est ce qui fait qu'on ne voit jamais ou l'une finit et ou l'autre commence. */ .sombre,.hero,.modules,.fin,.pied-site{ position:relative;overflow:hidden; background-color:var(--nuit); color:var(--texte); --texte:rgba(255,252,246,.96); --texte-2:rgba(255,252,246,.72); --texte-3:rgba(255,252,246,.5); --verre:rgba(255,255,255,.055); --bord:rgba(255,255,255,.1); --bord-fort:rgba(255,255,255,.17); } /* la lueur du pied se pose PAR-DESSUS son fond nuit, pas a la place */ .pied-site{background-image: radial-gradient(120% 80% at 50% 140%, rgba(246,199,68,.22), transparent 62%), radial-gradient(70% 60% at 15% 120%, rgba(225,29,72,.1), transparent 60%)} /* le premier ecran vif garde le sien */ /* meme regle pour le premier ecran : son degrade est une IMAGE de fond, il lui faut aussi une couleur, sinon il depend de celle du body. */ .hero-vif{background-color:#141011} /* l'etiquette « 2 · Tu vois, dans la seconde » appartient a la demonstration du pointage : sortie de son contexte, dans le premier ecran, elle ne veut plus rien dire. */ .hv-vis .tag{display:none} /* ── LA CONSTELLATION DANS LE PREMIER ECRAN ───────────────────────────── la direction, en montrant l'ancienne version : « c'etait ca la page d'accueil non ?? ». Il a raison et j'avais eu tort de la descendre : un ecran de produit isole montre UNE fonction, la constellation montre que TOUT s'accroche a une date — la promesse entiere. C'est aussi la seule chose de cette page qu'aucun template ne peut avoir. Elle n'a pas besoin du cadre de verre qui sert aux captures : elle EST le visuel. */ .hv-constel{padding:0;background:none;border:0;box-shadow:none;max-height:none;overflow:visible} .hv-constel::after{display:none} .hv-constel .constellation{height:620px} /* SEPT BULLES DE 280 PX NE TIENNENT PAS DANS 580. La colonne de droite s'elargit, et la constellation a le droit de deborder vers la droite, ou il n'y a rien. C'est d'ailleurs ce qui lui donne son air de carte etalee. */ .hero-vif .hv-in{grid-template-columns:0.86fr 1.35fr;gap:40px} .hero-vif .hv-txt{max-width:520px} @media(max-width:980px){ .hv-constel .constellation{height:auto} } /* ── LA SCENE DE L'INTELLIGENCE PASSE EN SOMBRE ───────────────────────── Retour produit : « sans fond blanc ». Sur une page entierement sombre, une grande carte blanche troue l'ecran. Et pour CETTE scene, le sombre est meme plus juste que le clair : la signature de Koulisse Intelligence est un contour irise cyan-violet, dessine pour briller sur du fonce — sur du blanc, elle s'eteint. Les scenes qui montrent une CAPTURE du produit (le rapport de pointage, la feuille de route, la fiche) gardent leur blanc : c'est ce que le client verra vraiment en se connectant. */ #scene-ia{background:#191418;color:var(--texte); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.08)} #scene-ia .ia-micro{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)} #scene-ia .ia-micro .e{color:var(--texte-3)} #scene-ia .ia-micro .onde i{background:rgba(255,255,255,.24)} #scene-ia .ia-dit{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1); color:var(--texte)} #scene-ia .ia-aide{color:var(--texte-3)} #scene-ia .ia-fiche{background:rgba(255,255,255,.045)} #scene-ia .ia-compris .v{color:var(--texte)} #scene-ia .ia-compris .v .q{color:var(--texte-3)} #scene-ia .ia-compris .v b{color:var(--texte)} #scene-ia .ia-fait{color:var(--texte-2)} /* le balayage irise se voit enfin : c'est sa raison d'etre */ #scene-ia .k-intel-valeur::after{opacity:.9} /* ── CE QUE L'INTELLIGENCE PRODUIT : UNE FICHE, PAS UNE ANALYSE ───────── Retour produit : « trop conceptuel ». La scene montrait quatre champs extraits alignes — ce que voit un developpeur. L'utilisateur, lui, obtient UNE FICHE DE DATE dans son espace : le spectacle en gros, la salle, le jour, le cachet en bas. On montre le RESULTAT, pas l'analyse. Les valeurs gardent la signature de l'intelligence : elles ARRIVENT. */ .ia-fiche{margin-top:14px;padding:20px 22px;border-radius:18px} .if-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .if-oeil{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--texte-3)} .if-etat{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; background:#0f8f43;color:#fff;font-size:11.5px;font-weight:700} .if-etat i{width:6px;height:6px;border-radius:50%;background:#fff} .ia-fiche .v{display:block;padding:0} .ia-fiche .v b{font-weight:700} .ia-fiche [data-champ="spectacle"] b{font-size:23px;letter-spacing:-.02em;line-height:1.15} .if-lieu b{font-size:15px;font-weight:600;color:var(--texte-2)} .if-quand{margin-top:3px} .if-quand b{font-size:14px;font-weight:500;color:var(--texte-3)} .if-bas{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px; padding-top:14px;border-top:1px solid rgba(255,255,255,.12)} .if-l{font-size:13px;color:var(--texte-3)} .if-euros b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #scene-ia .ia-fait{margin-top:14px;font-size:13.5px;color:var(--texte-3)} /* ═══ LA SIGNATURE DE VOL (retour produit, 24/08) ════════════════════════════════════════════ « We organise your Show trip from A to Z », en bas du PREMIER ECRAN, a la place du bandeau de benefices. Deux essais refuses avant : en filet tout en haut (« pas la haut, mets-le bien en valeur ») puis en bas de page (trop loin). Elle vit DANS le premier ecran : `z-index:2` la pose au-dessus du degrade de couture (.hero-vif::after), sinon le voile de 180 px lui passerait par-dessus et l'eteindrait. */ /* PAS de marge negative en bas : elle faisait mordre la section suivante SUR la bande, et la phrase se retrouvait coupee. Le padding bas du premier ecran suffit. */ /* `.vol*` (la signature de vol du premier ecran) est retiree le 26/08 : voir pages/_hero.py. */ /* NOUS JOINDRE, AU PIED : le site n'affichait aucun contact. */ .pied-joindre{display:flex;flex-direction:column;gap:5px;margin:12px 0 14px} .pied-joindre a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14px; transition:color .2s ease} .pied-joindre a:hover{color:var(--jaune)}