@charset "utf-8"; /* ─── Bulldozer · Scan avant RDV — coque ─── Tokens issus de la charte Bulldozer (lime #DDFF56, Chivo). Page mono-thème volontaire : parcours clair à gauche, console sombre à droite. Tout est peint explicitement. */ :root{ --lime:#DDFF56; --ink:#1F2600; --lime-dark:#99B200; --lime-darker:#4B5C00; --black:#0E0E0E; --soft:#1F1F1F; --grey:#707070; /* #7A7A7A de la charte = 4,0:1 sur smoke ; #707070 = 4,6:1 (AA) */ --grey-2:#B8B8B8; --light:#EEEEEE; --smoke:#F7F7F7; --border:#E0E0E0; --white:#FFFFFF; /* console sombre */ --c-bg:#1F1F1F; --c-panel:#262626; --c-line:#363636; --c-text:#FFFFFF; --c-muted:#A3A3A3; --c-dim:#8A8A8A; /* #6A6A6A = 3,1:1 ; #8A8A8A = 4,8:1 sur --c-bg */ /* badges (paires pastel/encre de la charte) */ --b-estime-bg:#D9C8FF; --b-estime-ink:#4A179C; --b-confirme-bg:#B7FCB1; --b-confirme-ink:#032300; --b-acompleter-bg:#FFD1C7; --b-acompleter-ink:#7F2609; --b-suggere-bg:#D1E0FF; --b-suggere-ink:#20448D; --font:'Chivo','Helvetica Neue',Helvetica,Arial,sans-serif; --mono:'Chivo Mono','SF Mono',Menlo,Consolas,monospace; --r1:8px; --r2:12px; --r3:14px; --pill:100rem; --rb:8px; /* 8 boutons/champs · 12 cartes · 14 grands blocs */ --tap:56px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--smoke);color:var(--black);font-family:var(--font);font-weight:300;font-size:18px;line-height:1.3;-webkit-font-smoothing:antialiased} h1,h2,h3{font-weight:500;letter-spacing:-.04em;line-height:1;margin:0;text-wrap:balance} p{margin:0} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--lime-dark);outline-offset:2px} img{max-width:100%;display:block} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ─── Shell : deux moitiés ─── */ .shell{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);background:var(--smoke)} .side{display:none} @media(min-width:960px){ .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .side{display:block;position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--c-bg);color:var(--c-text)} } .main{display:flex;flex-direction:column;min-height:100dvh;min-width:0;padding:20px 20px 32px} @media(min-width:960px){.main{padding:24px 56px 48px}} .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px} @media(max-width:1180px){.brand span{display:none}} @media(max-width:420px){.steps i{width:12px}} .brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)} .brand img{width:32px;height:32px;border-radius:8px} .steps{display:flex;gap:6px;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--grey)} .steps i{display:block;width:18px;height:4px;border-radius:4px;background:var(--light)} .steps i.on{background:var(--lime);box-shadow:0 0 0 1px var(--lime-dark)} .steps i.done{background:var(--ink)} .back{white-space:nowrap;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);min-height:40px;padding:0 8px;border-radius:var(--r1)} .back:hover{color:var(--black)} .back[hidden]{display:none} #screen{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:32px;max-width:640px;width:100%} @media(min-width:960px){#screen{padding-block:40px}} /* Un écran = un titre, une question, un bouton */ .screen{display:flex;flex-direction:column;gap:24px;animation:rise .45s cubic-bezier(.2,.7,.2,1) both} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.screen{animation:none}} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .eyebrow b{color:var(--black);font-weight:500} .title{font-size:clamp(32px,3.4vw,48px)} /* une seule échelle pour tous les écrans (48 px à 1440) ; design.css l'impose aux titres d'écran */ .title .ghost{color:var(--grey-2)} .title .caret{display:inline-block;width:.06em;height:.9em;background:var(--black);vertical-align:-.08em;margin-left:.04em;animation:blink 1s steps(2) infinite} @keyframes blink{50%{opacity:0}} .lead{font-size:20px;line-height:1.35;max-width:36ch;color:var(--soft)} .note{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--grey)} .stack{display:flex;flex-direction:column;gap:8px} .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* Boutons pilule, 56 px */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 24px;border-radius:var(--rb);font-family:var(--mono);font-size:15px;letter-spacing:.02em;text-transform:uppercase;font-weight:500;transition:transform .12s,background .15s;user-select:none;text-decoration:none} .btn:active{transform:scale(.985)} .btn-lime{background:var(--lime);color:var(--ink)} .btn-lime:hover{background:#D4F84A} .btn-dark{background:var(--black);color:var(--white)} .btn-dark:hover{background:var(--soft)} .btn-ghost{background:var(--white);color:var(--black);border:1.5px solid var(--border)} .btn-ghost:hover{border-color:var(--black)} .btn-full{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none} .btn .arrow{font-family:var(--font);font-size:20px;line-height:0} /* Champs */ .field{display:flex;flex-direction:column;gap:8px} .field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .input{width:100%;min-height:var(--tap);padding:0 18px;border:1.5px solid var(--border);border-radius:var(--rb);background:var(--white);font-size:18px;font-weight:300} .input:focus{border-color:var(--black)} .input:focus-visible{outline:3px solid var(--lime-dark);outline-offset:2px} .input::placeholder{color:var(--grey);opacity:1} .input.err{border-color:#B3261E} textarea.input{padding:14px 18px;min-height:112px;resize:vertical;line-height:1.4} .error{font-family:var(--mono);font-size:13px;color:#B3261E} /* Options (questions) : gros boutons, un tap */ .opts{display:flex;flex-direction:column;gap:8px} .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:12px 18px;border:1.5px solid var(--border);border-radius:var(--rb);background:var(--white);text-align:left;font-size:17px;font-weight:300;transition:border-color .15s,background .15s} .opt:hover{border-color:var(--black)} .opt[aria-pressed="true"],.opt.on{border-color:var(--black);background:var(--black);color:var(--white)} .opt .k{display:flex;align-items:center;gap:10px} .opt .box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--grey-2);display:grid;place-items:center;font-size:14px} .opt.on .box{background:var(--lime);border-color:var(--lime);color:var(--ink)} /* Badges : estimé / confirmé / à compléter / suggéré */ .badge{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .badge-estime{background:var(--b-estime-bg);color:var(--b-estime-ink)} .badge-confirme{background:var(--b-confirme-bg);color:var(--b-confirme-ink)} .badge-acompleter{background:var(--b-acompleter-bg);color:var(--b-acompleter-ink)} .badge-suggere{background:var(--b-suggere-bg);color:var(--b-suggere-ink)} .badge-lime{background:var(--lime);color:var(--ink)} /* Fiche (lignes partagées, conservées pour ctx.ficheView ; plus affichée dans le panneau) */ .fiche{display:flex;flex-direction:column;gap:22px} .fiche-group h4{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--grey)} .fiche-rows{display:flex;flex-direction:column} .frow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:46px;padding:6px 0;border-top:1px solid var(--border)} .frow:last-child{border-bottom:1px solid var(--border)} .frow .fl{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)} .frow .fv{min-width:0;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .frow .fv.empty{color:var(--grey);font-weight:300} .frow .fv.loading{position:relative;color:transparent} .frow .fv.loading::after{content:'';position:absolute;left:0;top:50%;height:12px;width:60%;border-radius:6px;background:var(--light);transform:translateY(-50%);animation:pulse 1.2s ease-in-out infinite} @keyframes pulse{50%{opacity:.4}} @media(prefers-reduced-motion:reduce){.frow .fv.loading::after,.src.loading .led{animation:none}} .frow input.fv,.frow select.fv{min-height:36px;padding:0 10px;border:1.5px solid var(--black);border-radius:var(--rb);background:var(--white);color:var(--black);font-size:16px;white-space:normal} .frow button.fv{text-align:left;padding:0;border-radius:var(--rb)} .frow button.fv:hover{text-decoration:underline;text-decoration-color:var(--grey-2);text-underline-offset:4px} /* variante console (fond sombre) */ .dark .frow{border-color:var(--c-line)} .dark .frow .fl{color:var(--c-muted)} .dark .frow .fv{color:var(--c-text)} .dark .frow .fv.empty{color:var(--c-dim)} .dark .frow .fv.loading::after{background:var(--c-line)} .dark .frow input.fv,.dark .frow select.fv{background:var(--c-panel);color:var(--c-text);border-color:var(--lime)} .dark .fiche-group h4{color:var(--c-muted)} /* ─── Console (aside droit) : conteneur du panneau de réassurance ─── */ .console{height:100%;display:flex;flex-direction:column;padding:32px 40px;gap:24px;overflow:auto;font-size:15px;scrollbar-width:none} .console::-webkit-scrollbar{display:none} /* 29/09 (Romain) : plus de barre de défilement claire sur le panneau sombre */ .console-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)} .console-head .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-dim);margin-right:8px;vertical-align:1px} .console-head .dot.live{background:var(--lime);box-shadow:0 0 0 4px rgba(221,255,86,.15)} .csec{display:flex;flex-direction:column;gap:10px} .csec h3{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--c-muted)} .csec h3 b{color:var(--lime);font-weight:500} /* neuf sources = neuf connecteurs */ .sources{display:grid;grid-template-columns:1fr;gap:6px} .src{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:38px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r1);background:var(--c-panel);color:var(--c-dim);transition:color .3s,border-color .3s} .src .led{width:10px;height:10px;border-radius:50%;background:var(--c-line);justify-self:center;transition:background .3s,box-shadow .3s} .src .sl{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .src .sr-{font-family:var(--mono);font-size:12px;color:var(--c-dim);white-space:nowrap} .src.loading{color:var(--c-muted);border-color:#454545} .src.loading .led{background:var(--c-muted);animation:pulse .8s ease-in-out infinite} .src.on{color:var(--c-text);border-color:#454545} .src.on .led{background:var(--lime);box-shadow:0 0 0 3px rgba(221,255,86,.18)} .src.on .sr-{color:var(--lime)} /* version claire (mobile, sous le titre de l'écran 2) */ .light .src{background:var(--smoke);border-color:var(--border);color:var(--grey-2)} .light .src .led{background:var(--light)} .light .src.loading{color:var(--grey);border-color:var(--grey-2)} .light .src.loading .led{background:var(--grey)} .light .src.on{color:var(--black);border-color:var(--grey-2)} .light .src.on .led{background:var(--lime-dark);box-shadow:0 0 0 3px rgba(153,178,0,.18)} .light .src.on .sr-{color:var(--lime-darker)} /* fil des signaux */ .feed{display:flex;flex-direction:column} .feed-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--c-line);font-size:14px} .feed-item .fw{font-family:var(--mono);font-size:12px;color:var(--c-muted);white-space:nowrap} .feed-item .ft{color:var(--c-text)} .feed-item .ft i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:0;background:var(--c-dim)} .feed-item .ft i.page{background:#9EFDEC}.feed-item .ft i.email{background:#D9C8FF}.feed-item .ft i.lgf{background:var(--lime)}.feed-item .ft i.ad{background:#FFA202}.feed-item .ft i.form{background:#B7FCB1}.feed-item .ft i.rdv{background:#FFCEEB} .light .feed-item{border-color:var(--border)} .light .feed-item .fw{color:var(--grey)} .light .feed-item .ft{color:var(--black)} .console-empty{color:var(--c-dim);font-size:14px;line-height:1.5;max-width:34ch} /* Bandeau logos */ .logos{display:flex;gap:16px;align-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .logos-track{display:flex;gap:16px;align-items:center;flex:none;animation:marquee 26s linear infinite} .logos img{height:56px;width:auto;opacity:.85;flex:none} @keyframes marquee{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.logos-track{animation:none}} @media(min-width:960px){.logos{mask-image:none;flex-wrap:wrap}.logos-track{animation:none;flex-wrap:wrap}} /* Preuves */ .proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .proof{padding:14px 0;border-top:1.5px solid var(--black)} .proof b{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .proof span{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--grey);text-transform:uppercase;letter-spacing:.04em} @media(max-width:480px){.proofs{grid-template-columns:1fr}.proof{display:flex;align-items:baseline;gap:12px;padding:10px 0}.proof b{font-size:24px}.proof span{margin:0}} /* Blocs sombres dans le parcours (secteur, OS) */ .block-dark{background:var(--c-bg);color:var(--white);border-radius:var(--r3);padding:24px;overflow:hidden} .block-dark .eyebrow{color:var(--c-muted)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--pill);background:var(--soft);border:1px solid var(--c-line);font-family:var(--mono);font-size:12px;color:var(--c-text)} .chip img{height:48px;width:auto;margin:-6px -8px;filter:invert(1)} /* Détails repliables (mobile) */ details.fold{border-top:1px solid var(--border);border-bottom:1px solid var(--border)} details.fold summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:var(--tap);font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em} details.fold summary::-webkit-details-marker{display:none} details.fold summary::after{content:'+';font-size:22px;font-weight:300} details.fold[open] summary::after{content:'–'} /* sources repliées (console, à partir de l'écran 3) */ .src-strip{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r1);background:var(--c-panel);font-size:13px;color:var(--c-muted)} .src-strip .leds{display:flex;gap:5px} .src-strip .leds i{width:8px;height:8px;border-radius:50%;background:var(--lime)} .src-strip b{color:var(--c-text);font-weight:400} /* ─── Couche « produit IA » ─── */ /* Puce d'agent : « Bulldozer OS · agent de scan » — une par écran */ .agent-chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px 0 10px;border-radius:var(--pill);background:var(--white);border:1px solid var(--border);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);width:max-content;max-width:100%} .agent-chip .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--lime-dark);flex:none} /* le halo qui pulse : un pseudo en transform/opacity (pas de box-shadow animé, coûteux sur mobile) */ .agent-chip.live .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(153,178,0,.45);animation:halo 1.4s ease-out infinite} .agent-chip b{font-weight:500;color:var(--black)} .agent-chip .chrono{font-variant-numeric:tabular-nums;color:var(--grey);margin-left:4px} .dark .agent-chip,.console .agent-chip{background:var(--c-panel);border-color:var(--c-line);color:var(--c-muted)} .dark .agent-chip b,.console .agent-chip b{color:var(--c-text)} .dark .agent-chip .dot,.console .agent-chip .dot{background:var(--lime)} @keyframes halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}} @media(prefers-reduced-motion:reduce){.agent-chip.live .dot,.agent-chip.live .dot::after{animation:none}} /* Barre de saisie type prompt : le bouton est dedans */ .prompt-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--rb);transition:border-color .15s,box-shadow .15s} .prompt-bar:focus-within{border-color:var(--black);box-shadow:0 0 0 1px var(--black)} /* un seul liseré : le halo lime empilé sur le rouge d'erreur faisait deux anneaux */ .prompt-bar input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;font-size:18px;font-weight:300;padding:0} .prompt-bar input:focus{outline:0} .prompt-bar input::placeholder{color:var(--grey)} .prompt-bar .btn{min-height:44px;padding:0 18px;flex:none} .prompt-bar.err,.prompt-bar.err:focus-within{border-color:#B3261E;box-shadow:none} /* erreur : bordure fine seulement, pas d'anneau (« ça fait bug ») */ @media(max-width:480px){.prompt-bar{flex-wrap:wrap;padding:6px}.prompt-bar input{width:100%;padding:0 12px}.prompt-bar .btn{width:100%;min-height:52px}} /* Trois repères discrets sous la barre */ .markers{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--grey)} .markers span{display:inline-flex;align-items:center;gap:7px} .markers span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime-dark)} /* Journal d'agent : hauteur FIXE (pas de saut de mise en page), défile dedans */ .journal{height:176px;overflow:hidden;position:relative;padding:12px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--rb);font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--soft);display:flex;flex-direction:column;justify-content:flex-end} .journal::before{content:'';position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(var(--white),rgba(255,255,255,0));pointer-events:none;z-index:1} .journal-line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;animation:jl .28s ease-out both} .journal-line .jt{color:var(--grey);font-variant-numeric:tabular-nums} .journal-line .jx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .journal-line.ok .jx::before{content:'✓ ';color:var(--lime-darker)} .journal-line.run .jx::before{content:'› ';color:var(--grey)} .journal-line.done .jx{color:var(--black);font-weight:500} @keyframes jl{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .dark .journal,.console .journal{background:var(--c-panel);border-color:var(--c-line);color:var(--c-text)} .dark .journal::before,.console .journal::before{background:linear-gradient(var(--c-panel),rgba(38,38,38,0))} .dark .journal-line.done .jx,.console .journal-line.done .jx{color:var(--lime)} @media(prefers-reduced-motion:reduce){.journal-line{animation:none}} /* Micro-animations : les enfants arrivent en cascade */ .stagger>*{animation:rise .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*60ms)} @media(prefers-reduced-motion:reduce){.stagger>*{animation:none}} /* Ligne sobre de preuves (écran 1) */ .proofline{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--grey)} .proofline b{font-weight:500;color:var(--black)} /* Barre compacte : la flèche reste dans la barre, même à 400 px */ .prompt-bar.compact{padding:6px 6px 6px 18px} .prompt-bar.compact .go{width:48px;min-width:48px;min-height:48px;padding:0;border-radius:var(--rb)} .prompt-bar.compact .go .arrow{font-size:24px;line-height:0} @media(max-width:480px){.prompt-bar.compact{flex-wrap:nowrap;padding:6px 6px 6px 14px}.prompt-bar.compact input{width:auto;padding:0}.prompt-bar.compact .btn{width:48px;min-height:48px}} /* Sources groupées : l'entreprise, la personne */ .src-group{margin:8px 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)} .src-group:first-child{margin-top:0} .light .src-group{color:var(--grey)} /* Slider de cas clients */ .cases{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden;contain:inline-size;touch-action:pan-y pinch-zoom;border-radius:var(--r2);background:var(--c-panel);border:1px solid var(--c-line)} .cases-track{display:flex;width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform} .case{flex:0 0 100%;min-width:0;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box} .case-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;font-weight:500;color:var(--c-text)} .case-head img{height:26px;width:auto;max-width:130px;filter:invert(1) brightness(1.3);opacity:.9} .case-ch{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap} .case-metric{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1} .case-metric b{font-size:52px;font-weight:500;letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums} .case-metric span{font-size:16px;color:var(--c-text)} .case-detail{font-size:14px;line-height:1.4;color:var(--c-muted);min-height:2.8em} .cases-dots{display:flex;gap:6px;padding:0 22px 16px} /* le point est dessiné par un pseudo : le bouton fait 20 px de haut (zone tactile), le trait 4 px */ .cases-dots button{position:relative;width:18px;height:20px;background:transparent;padding:0;transition:width .15s} .cases-dots button::before{content:'';position:absolute;left:0;right:0;top:8px;height:4px;border-radius:4px;background:var(--c-line);transition:background .15s} .cases-dots button.on{width:28px} .cases-dots button.on::before{background:var(--lime)} .cases.light{background:var(--white);border-color:var(--border)} .cases.light .case-head{color:var(--black)}.cases.light .case-head img{filter:none;opacity:.85} .cases.light .case-ch{color:var(--grey)}.cases.light .case-metric b{color:var(--black)}.cases.light .case-metric span{color:var(--black)} .cases.light .case-detail{color:var(--grey)}.cases.light .cases-dots button::before{background:var(--light)}.cases.light .cases-dots button.on::before{background:var(--lime-dark)} @media(prefers-reduced-motion:reduce){.cases-track{transition:none}} /* Cartes du slider : un visuel plein cadre avec le chiffre, puis la citation avec le visage */ .case{padding:0;gap:0} .case-visual{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden} .case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .case-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.2) 0%,rgba(10,10,10,0) 32%,rgba(10,10,10,.5) 62%,rgba(10,10,10,.9) 100%)} .case-visual .case-head{position:absolute;top:18px;left:22px;right:22px;z-index:1;color:#fff} .case-visual .case-head img{height:72px;max-width:260px;margin:-14px 0 0 -18px;filter:brightness(0) invert(1);opacity:.96} .case-visual .case-ch{color:rgba(255,255,255,.8)} .case-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:0 22px 20px} .case-visual .case-metric b{color:var(--lime)} .case-visual .case-metric span{color:#fff} .case-visual .case-detail{color:rgba(255,255,255,.82);min-height:0} .case-quote{margin:0;padding:18px 22px 40px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--c-line)} .case-quote blockquote{margin:0;font-size:15px;line-height:1.45;font-weight:300;color:var(--c-text)} .case-quote figcaption{display:flex;align-items:center;gap:12px} .case-quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--c-line)} .case-quote figcaption span{display:flex;flex-direction:column;gap:2px;min-width:0} .case-quote figcaption b{font-weight:500;font-size:15px;color:var(--c-text)} .case-quote figcaption small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)} .cases.light .case-quote{border-color:var(--border)}.cases.light .case-quote blockquote,.cases.light .case-quote figcaption b{color:var(--black)}.cases.light .case-quote figcaption small{color:var(--grey)}.cases.light .case-quote figcaption img{border-color:var(--light)} .cases .cases-dots{position:absolute;left:0;right:0;bottom:0;padding:0 22px 6px;z-index:2} /* Pied de console : chiffres + mur de logos */ .console-foot{margin-top:auto;display:flex;flex-direction:column;gap:24px;padding-top:16px} .cstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line)} .cstats div{padding:16px 14px 14px 0;border-right:1px solid var(--c-line)} .cstats div:not(:first-child){padding-left:14px} /* 28/09 : cinq chiffres sur deux lignes (3 + 2) : chaque ligne repart du bord, un filet entre les lignes, pas de filet au bout d'une ligne */ .cstats div:nth-child(3n+1){padding-left:0} .cstats div:nth-child(3n){border-right:0} .cstats div:nth-child(n+4){border-top:1px solid var(--c-line)} .cstats div:last-child{border-right:0} .cstats b{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--c-text);font-variant-numeric:tabular-nums} .cstats span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)} .cwall{display:flex;flex-direction:column;gap:8px} .cwall .eyebrow{color:var(--c-muted)} .logos.dark{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);contain:inline-size;flex-wrap:nowrap;gap:0} .logos.dark .logos-track{gap:0} .logos.dark .logos-track{animation:marquee 30s linear infinite;flex-wrap:nowrap;max-width:none} .logos.dark img{height:72px;filter:brightness(0) invert(1);opacity:.85} @media(prefers-reduced-motion:reduce){.logos.dark .logos-track{animation:none}} /* UX transversale */ h1[tabindex="-1"]:focus{outline:none} @media(max-width:959px){ .s3-cta,.s2-done>.btn-full,.s4-cta,.s5-cta{position:sticky;bottom:14px;z-index:3;box-shadow:0 10px 28px -10px rgba(14,14,14,.45)} /* un voile smoke de 24 px au-dessus du bouton collant, et la bande sous lui : le contenu ne passe pas dessous à nu */ .s3-cta::before,.s2-done>.btn-full::before,.s4-cta::before,.s5-cta::before{content:'';position:absolute;left:-20px;right:-20px;top:-24px;height:24px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(247,247,247,0),var(--smoke))} .s3-cta::after,.s2-done>.btn-full::after,.s4-cta::after,.s5-cta::after{content:'';position:absolute;left:-20px;right:-20px;top:100%;height:14px;z-index:-1;pointer-events:none;background:rgba(247,247,247,.92)} #screen{padding-block:12px 24px;justify-content:flex-start} .screen{gap:22px;flex:1} } .opt,.btn,.frow button.fv{-webkit-tap-highlight-color:transparent} .btn:focus-visible,.opt:focus-visible{outline:3px solid var(--lime-dark);outline-offset:2px} /* Écran 2 en solo : pas de console, un seul cadre centré */ .shell.solo{grid-template-columns:1fr} .shell.solo .side{display:none} .shell.solo .main{width:100%;max-width:920px;margin:0 auto} .shell.solo #screen{max-width:760px} /* Recherche plein cadre : deux groupes de sources */ .s2-groups{display:grid;grid-template-columns:1fr;gap:18px;width:100%;min-width:0} @media(min-width:700px){.s2-groups{grid-template-columns:1fr 1fr}} .s2-group{display:flex;flex-direction:column;gap:8px;min-width:0} .s2-group .eyebrow{display:flex;align-items:center;gap:8px} .s2-group .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--grey-2);flex:none} .s2-group .eyebrow i{position:relative} .s2-group.active .eyebrow i{background:var(--lime-dark)} .s2-group.active .eyebrow i::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(153,178,0,.45);animation:halo 1.4s ease-out infinite} .s2-group.done .eyebrow i{background:var(--lime-dark)} @media(prefers-reduced-motion:reduce){.s2-group.active .eyebrow i::after{animation:none}} .s2-group .sources{gap:6px} /* Console avant l'email : un seul bloc, rythme régulier, centré verticalement comme le titre à gauche */ .console.pre{justify-content:center;gap:26px;padding-block:24px} .console.pre .console-foot{margin-top:0;padding-top:0;gap:22px} .console.pre .csec{gap:12px} .console.pre .case-visual{min-height:250px} .console.pre .case-quote{padding:16px 22px 36px;gap:12px} .console.pre .case-quote blockquote{font-size:14.5px} .console.pre .cstats b{font-size:28px} .console.pre .cstats div{padding-top:14px;padding-bottom:12px} .console.pre .logos.dark img{height:60px} @media(min-height:900px){.console.pre{gap:32px}.console.pre .case-visual{min-height:300px}} /* Bloc de preuve mobile : la console de l'écran 1, sous la barre, pleine largeur */ .mobile-console{height:auto;margin:16px -20px -32px;padding:26px 20px 30px;border-radius:24px 24px 0 0;background:var(--c-bg);color:var(--c-text);overflow:visible;width:auto;max-width:none;box-sizing:content-box} .mobile-console .cases{contain:inline-size} @media(min-width:960px){.mobile-console{display:none}} /* ═══════════════ Mobile, pouce d'abord (≤ 959 px, réglage fin ≤ 480 px) ═══════════════ Les règles ci-dessous viennent en dernier : à spécificité égale, elles gagnent. */ @media(max-width:959px){ /* — Coque — */ html{overflow-x:hidden} /* secours : les causes de débordement sont traitées plus bas */ .main{padding:10px 20px 24px;overflow-x:clip} /* clip, pas hidden : hidden ferait de .main un conteneur de défilement et les boutons collants ne colleraient plus */ #screen{min-width:0} .topbar{min-height:44px;gap:12px} .brand img{width:28px;height:28px;border-radius:7px} .steps{gap:5px;font-size:11px} .steps i{width:12px} .back{min-height:44px;min-width:44px;margin-right:-8px} .title{font-size:clamp(30px,8.5vw,40px)} .lead{font-size:17px;line-height:1.35} .note{font-size:13px} /* iOS zoome sur un champ < 16 px : plancher pour tout champ non stylé (les classes gardent leurs 16-18 px) */ input,select,textarea{font-size:16px} /* rien ne déborde : ce qui était nowrap ou en largeur fixe s'adapte */ .prompt-bar input{min-height:48px} .agent-chip{white-space:normal;line-height:1.2;padding-block:5px} .block-dark{padding:22px} .chip img{height:40px;margin:-4px -6px} .frow{grid-template-columns:88px minmax(0,1fr) auto;gap:10px} .proof b{font-size:26px} /* — Écran 1 : le bloc sombre commence juste sous la barre et descend jusqu'au bas de la page — */ .console.pre.mobile-console{height:auto;flex:1 0 auto;justify-content:flex-start;gap:22px;margin:-4px -20px -48px;padding:24px 20px 28px;border-radius:24px 24px 0 0;overflow:visible} .console.pre.mobile-console .csec{gap:12px} .console.pre.mobile-console .console-foot{gap:20px} /* slider : photo 220 px, chiffre 40 px, citation 14 px */ .console.pre.mobile-console .case-visual{min-height:220px} .console.pre.mobile-console .case-visual .case-head{top:14px;left:18px;right:18px} .console.pre.mobile-console .case-visual .case-head img{height:56px;max-width:180px;margin:-10px 0 0 -12px} .console.pre.mobile-console .case-body{padding:0 18px 16px;gap:8px} .console.pre.mobile-console .case-metric b{font-size:40px} .console.pre.mobile-console .case-metric span{font-size:15px} .console.pre.mobile-console .case-detail{font-size:13px} .console.pre.mobile-console .case-quote{padding:14px 18px 36px;gap:10px} .console.pre.mobile-console .case-quote blockquote{font-size:14px;line-height:1.45} .console.pre.mobile-console .case-quote figcaption img{width:40px;height:40px} .console.pre.mobile-console .case-quote figcaption b{font-size:14px} .console.pre.mobile-console .cases .cases-dots{padding:0 18px 6px} /* trois chiffres qui restent lisibles à 400 px */ .console.pre.mobile-console .cstats div{padding:12px 10px 10px 0} .console.pre.mobile-console .cstats div:not(:first-child){padding-left:10px} .console.pre.mobile-console .cstats b{font-size:24px} .console.pre.mobile-console .cstats span{font-size:10px;letter-spacing:.06em;margin-top:5px} /* mur de logos : 56 px, défilement continu (le track est dupliqué par consoleFoot) */ .console.pre.mobile-console .logos.dark img{height:56px} /* — Options (écrans 4, 5) : 56 px, texte 16 px, case 24 px — */ .opt{font-size:16px;padding:12px 16px} .opt .box{width:24px;height:24px;border-radius:7px} .opts{gap:10px} /* — Écran 2 (CSS seulement ; préfixe #screen : le