:root{--violet:#6a00ff;--magenta:#dc01ff;--ink:#0f0a1a;--paper:#fbfafd;--surface:#f0eef5;--card:#fff;--text:#2a2a3a;--muted:#6b6380;--light:#9891aa;--line:#e9e4f0;--ui:'Archivo',system-ui,sans-serif;--serif:'Lora',Georgia,serif;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{height:84px;display:flex;align-items:center;gap:32px}.brand img,footer:not(.tk-footer) img{height:25px;width:auto;display:block}.nav nav{margin-left:auto;display:flex;gap:24px}.nav nav a,footer:not(.tk-footer) a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}.nav nav a:hover,footer:not(.tk-footer) a:hover{color:var(--violet)}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--violet);color:white;text-decoration:none;padding:16px 16px;border-radius:7px;font-size:13px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(106,0,255,.2);background:#5400cc}.button b{font-size:18px;line-height:10px}.button-small{padding:8px 16px;font-size:13px}.eyebrow,.mini{font-family:var(--mono);font-size:13px;letter-spacing:.085em;color:var(--violet);font-weight:600;margin:0;text-transform:uppercase}.eyebrow{display:flex;gap:8px;align-items:center}.eyebrow i{display:inline-block;width:22px;height:2px;background:var(--violet)}.hero{padding:96px 0 48px;display:grid;grid-template-columns:45% 55%;align-items:center;gap:32px;overflow:visible}.hero h1,.section-title h2,.story-copy h2,.evidence-copy h2,.closing h2{font-size:clamp(40px,4.6vw,64px);line-height:1.05;letter-spacing:0;margin:16px 0 0;color:var(--ink);font-weight:800}.hero h1 em,.section-title h2 em,.story-copy h2 em,.evidence-copy h2 em{color:var(--violet);font-family:var(--serif);font-weight:400}.hero-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),.evidence-copy>p:not(.eyebrow),.closing-grid>div>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0}.actions{display:flex;gap:24px;align-items:center;margin-top:32px}.under-link{font-size:13px;font-weight:700;text-decoration:none;color:var(--text);border-bottom:1px solid #c8c1d1;padding-bottom:4px}.under-link:hover{color:var(--violet);border-color:var(--violet)}.under-link b{margin-left:8px}.sources{font-family:var(--mono);font-size:13px;color:var(--light);display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:48px}.sources i{width:3px;height:3px;border-radius:99px;background:#b8b0c4}.hero-stage{height:511px;position:relative;perspective:1500px}.glow-grid{position:absolute;inset:35px 0 0 22px;background-image:linear-gradient(#eee9f4 1px,transparent 1px),linear-gradient(90deg,#eee9f4 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black 0%,transparent 84%)}.screen{background:#fff;border:1px solid #e4deed;border-radius:13px;box-shadow:0 25px 55px rgba(36,18,76,.13);overflow:hidden}.main-screen{width:106%;position:absolute;top:29px;left:3%;transform:rotateY(-5deg) rotateX(2deg);transform-origin:center}.screen-top{height:38px;padding:0 16px;background:#f6f4f8;border-bottom:1px solid #e9e5ee;display:flex;align-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}.screen-top small{margin-left:auto;font-size:13px;color:#16845e}.screen-top small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#15a16d;margin-right:4px}.screen img{display:block;width:100%;height:auto}.main-screen img{width:125%;transform:translateY(-55px);margin-bottom:-48px}.data-float{position:absolute;background:rgba(255,255,255,.95);border:1px solid #e4deed;border-radius:8px;padding:16px 16px;box-shadow:0 16px 30px rgba(37,21,71,.12);backdrop-filter:blur(8px)}.data-float span{display:block;font-family:var(--mono);font-size:13px;color:var(--muted);text-transform:uppercase}.data-float strong{font-family:var(--mono);font-size:24px;color:var(--violet);display:block;margin:4px 0}.data-float small{font-size:13px;color:var(--light)}.float-left{left:-18px;bottom:22px}.float-right{right:-28px;bottom:-3px;width:214px}.float-right p{font-size:13px;color:var(--ink);font-weight:700;line-height:1.35;margin:4px 0}.float-right b{color:#18845e;font-family:var(--mono);font-size:13px}.shift{margin-top:64px;background:var(--ink);color:white;padding:96px 0}.shift-grid{display:grid;grid-template-columns:205px 1fr 310px;gap:32px;align-items:start}.shift .eyebrow{color:#caa7ff}.shift .eyebrow i{background:#caa7ff}.shift h2{font-size:36px;line-height:1.05;margin:0;font-weight:800}.shift h2 em{font-family:var(--serif);font-weight:400;color:#d8bdff}.shift-grid>p:last-child{font-size:16px;color:#c7bfd2;line-height:1.6;margin:0}.surfaces{padding:96px 0}.section-title{max-width:840px}.section-title h2,.story-copy h2,.evidence-copy h2{font-size:48px}.surface-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}.surface{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:24px;min-height:354px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.surface:after{content:'';width:9px;height:100%;position:absolute;right:0;top:0;background:var(--violet);opacity:0;transition:opacity .25s}.surface:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(37,17,74,.09)}.surface:hover:after{opacity:1}.num,.output-grid span{font-family:var(--mono);font-size:13px;color:var(--violet)}.surface .mini{margin:32px 0 8px;color:var(--light)}.surface h3{font-size:18px;line-height:1.05;letter-spacing:0;color:var(--ink);margin:0 0 16px}.surface>p:not(.mini){margin:0;font-size:16px;line-height:1.6;color:var(--muted)}.metric{position:absolute;bottom:25px;left:27px;right:27px;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:baseline;gap:8px}.metric b{font-family:var(--mono);font-size:24px;color:var(--violet)}.metric span{font-size:13px;color:var(--light)}.story-block{padding:96px 0;background:var(--surface)}.story-layout{display:grid;grid-template-columns:42% 58%;align-items:center;gap:64px}.story-points{margin-top:32px;border-top:1px solid #ddd7e6}.story-points div{padding:16px 0;border-bottom:1px solid #ddd7e6;display:grid;grid-template-columns:96px 1fr;gap:8px}.story-points b{font-size:13px;color:var(--ink)}.story-points span{font-size:13px;color:var(--muted)}.plan-visual{position:relative;padding:16px 8px 24px 0}.plan-screen{transform:rotateY(-3deg) rotateX(1deg)}.plan-screen img{width:125%;transform:translate(-1px,-34px);margin-bottom:-32px}.target-float{position:absolute;bottom:0;left:-20px;background:#fff;border:1px solid #e4deed;border-radius:8px;padding:16px 16px;box-shadow:0 14px 28px rgba(37,21,71,.11)}.target-float small,.target-float span{font-family:var(--mono);display:block;font-size:13px;color:var(--muted)}.target-float strong{font-family:var(--mono);font-size:24px;line-height:1.35;color:var(--violet)}.evidence{padding:96px 0;display:grid;grid-template-columns:41% 1fr;gap:96px;align-items:center}.evidence-card{background:var(--card);padding:32px;border:1px solid var(--line);border-radius:9px;box-shadow:0 15px 35px rgba(37,17,74,.07)}.evidence-card .mini{color:var(--muted)}.evidence-head{display:flex;align-items:flex-end;gap:16px;margin:24px 0}.evidence-head strong{font-family:var(--mono);font-size:48px;line-height:1.0;color:var(--violet)}.evidence-head span{color:var(--muted);font-size:13px;line-height:1.35}.lines{height:100px;position:relative;overflow:hidden;background:repeating-linear-gradient(to bottom,transparent 0,transparent 32px,#eeeaf3 33px,#eeeaf3 34px)}.lines i{position:absolute;height:3px;border-radius:3px;background:#bcb4c5;opacity:.8}.lines i:nth-child(1){top:72px;left:0;width:38%;transform:rotate(-3deg)}.lines i:nth-child(2){top:68px;left:35%;width:35%;transform:rotate(2deg)}.lines i:nth-child(3){top:73px;right:0;width:35%;transform:rotate(-3deg)}.lines b{position:absolute;inset:0;background:var(--violet);clip-path:polygon(0 79%,10% 76%,22% 80%,36% 70%,47% 65%,58% 54%,69% 40%,80% 31%,90% 14%,100% 4%,100% 9%,90% 20%,80% 37%,69% 46%,58% 60%,47% 71%,36% 77%,22% 86%,10% 81%,0 85%)}.legend{border-top:1px solid var(--line);padding-top:16px;display:flex;gap:16px;color:var(--light);font-size:13px}.legend span i{display:inline-block;width:14px;height:2px;background:var(--violet);vertical-align:middle;margin-right:4px}.legend span+span i{background:#bcb4c5}.outputs{padding:0 0 96px}.output-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--line)}.output-grid article{min-height:218px;padding:24px 24px 8px 0;border-right:1px solid var(--line)}.output-grid article+article{padding-left:24px}.output-grid article:last-child{border-right:0}.output-grid h3{font-size:18px;color:var(--ink);margin:32px 0 8px}.output-grid p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}.closing{background:var(--ink);padding:96px 0;color:white}.closing-grid{display:grid;grid-template-columns:1fr 420px;gap:96px;align-items:center}.closing .eyebrow{color:#c9a6ff}.closing .eyebrow i{background:#c9a6ff}.closing h2{color:white;font-size:48px}.closing-grid>div>p:not(.eyebrow){color:#c3bacf;max-width:610px}.offer-card{padding:32px;background:#1b112b;border:1px solid #443657;border-radius:9px}.offer-card .mini{color:#c9a6ff}.offer-card h3{font-size:24px;line-height:1.05;margin:16px 0 24px}.offer-card ul{padding:0;margin:0 0 24px;list-style:none;border-top:1px solid #403152}.offer-card li{padding:8px 0 8px 16px;border-bottom:1px solid #403152;font-size:16px;color:#ded7e6;position:relative}.offer-card li:before{content:'+';position:absolute;left:0;color:#c9a6ff;font-family:var(--mono)}.light-button{background:white;color:var(--ink);width:100%}.light-button:hover{background:#e9ddff;color:var(--ink)}footer:not(.tk-footer){height:108px;display:flex;align-items:center;gap:16px}footer:not(.tk-footer) span{font-size:13px;color:var(--light)}footer:not(.tk-footer) a{margin-left:auto}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.13s}.delay-2{transition-delay:.25s}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.surface,.button{transition:none}}@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:64px;gap:48px}.hero-copy{text-align:center;max-width:760px;margin:auto}.hero .eyebrow,.actions,.sources{justify-content:center}.hero-stage{width:min(680px,94%);margin:auto}.shift-grid{grid-template-columns:1fr;gap:24px}.shift h2{max-width:670px}.shift-grid>p:last-child{max-width:530px}.story-layout,.evidence,.closing-grid{grid-template-columns:1fr;gap:48px}.story-copy{max-width:670px}.plan-visual{width:min(720px,100%);margin:auto}.evidence-card{max-width:480px}.closing-grid{gap:48px}.surface-grid{gap:16px}.surface{padding:24px}.metric{left:22px;right:22px}.output-grid article{min-height:190px}}@media(max-width:600px){.wrap{width:min(100% - 32px,1180px)}.nav{height:67px}.nav nav,.button-small{display:none}.hero{padding-top:48px}.hero h1{font-size:36px}.hero-copy>p:not(.eyebrow){font-size:16px}.actions{flex-direction:column;gap:16px}.sources{margin-top:32px}.hero-stage{height:282px}.main-screen{width:119%;left:-8px;top:16px}.main-screen img{transform:translateY(-31px);margin-bottom:-32px}.float-left{left:-11px;bottom:0;transform:scale(.78);transform-origin:left bottom}.float-right{display:none}.shift{margin-top:48px;padding:64px 0}.shift h2{font-size:32px}.surfaces{padding:64px 0}.section-title h2,.story-copy h2,.evidence-copy h2,.closing h2{font-size:32px}.surface-grid{grid-template-columns:1fr;margin-top:32px}.surface{min-height:285px}.surface .mini{margin-top:24px}.story-block{padding:64px 0}.story-points div{grid-template-columns:78px 1fr}.plan-visual{padding:8px 0 24px}.plan-screen img{transform:translateY(-18px);margin-bottom:-16px}.target-float{left:-5px;transform:scale(.83);transform-origin:left bottom}.evidence{padding:64px 0;gap:48px}.evidence-card{padding:24px}.outputs{padding-bottom:64px}.output-grid{grid-template-columns:1fr;margin-top:32px}.output-grid article,.output-grid article+article{min-height:0;border-right:0;border-top:1px solid var(--line);padding:24px 0}.output-grid article:first-child{border-top:0}.output-grid h3{margin:16px 0 8px}.closing{padding:64px 0}.offer-card{padding:24px 24px}footer:not(.tk-footer){height:auto;min-height:110px;align-content:center;flex-wrap:wrap;padding:24px 0}footer:not(.tk-footer) span{width:100%}footer:not(.tk-footer) a{margin-left:0}}
:root{--dummy:0}.llm-showcase{padding:0 0 96px}.llm-showcase .wrap{display:grid;grid-template-columns:37% 63%;align-items:center;gap:64px}.showcase-copy h2,.decision-copy h2,.technical-copy h2{margin:16px 0 0;color:var(--ink);font-size:36px;line-height:1.05;letter-spacing:0}.showcase-copy h2 em,.decision-copy h2 em,.technical-copy h2 em{font-family:var(--serif);font-weight:400;color:var(--violet)}.showcase-copy>p:not(.eyebrow),.decision-copy>p:not(.eyebrow),.technical-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0}.showcase-screen{position:relative;padding:24px 0 24px 16px}.showcase-screen .screen{transform:rotateY(-3deg) rotateX(1deg);transform-origin:center}.showcase-screen img{width:122%;transform:translateY(-34px);margin-bottom:-32px}.screen-note{position:absolute;bottom:0;left:-12px;padding:16px 16px;border:1px solid #e4deed;border-radius:8px;background:rgba(255,255,255,.96);box-shadow:0 13px 25px rgba(37,21,71,.12)}.screen-note b{font-family:var(--mono);font-size:13px;color:#d6336c;display:block}.screen-note span{color:var(--muted);font-size:13px;display:block;margin-top:4px}.decision-showcase{padding:96px 0;display:grid;grid-template-columns:37% 63%;gap:64px;align-items:center}.decision-callout{display:flex;align-items:center;gap:16px;margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}.decision-callout span{font-family:var(--mono);font-size:32px;color:var(--violet)}.decision-callout p{font-size:13px;line-height:1.35;margin:0;color:var(--muted)}.decision-callout b{color:var(--text)}.decision-screen{padding-left:8px;filter:drop-shadow(0 22px 32px rgba(37,21,71,.1))}.decision-screen img{width:124%;transform:translateY(-36px);margin-bottom:-32px}.decision-screen .screen{transform:rotateY(-3deg) rotateX(1deg);transform-origin:center}.technical-showcase{background:var(--surface);padding:96px 0}.technical-layout{display:grid;grid-template-columns:40% 60%;gap:64px;align-items:center}.technical-screen img{width:122%;transform:translateY(-28px);margin-bottom:-32px}.technical-screen .screen{transform:rotateY(-3deg) rotateX(1deg)}@media(max-width:900px){.llm-showcase .wrap,.decision-showcase,.technical-layout{grid-template-columns:1fr;gap:48px}.llm-showcase{padding-bottom:96px}.showcase-copy,.decision-copy,.technical-copy{max-width:650px}.showcase-screen,.decision-screen,.technical-screen{max-width:720px;width:100%;margin:auto}.decision-showcase{padding:96px 0}.technical-showcase{padding:96px 0}.evidence-screen{max-width:620px}}@media(max-width:600px){.llm-showcase{padding-bottom:64px}.showcase-copy h2,.decision-copy h2,.technical-copy h2{font-size:32px}.showcase-screen{padding:8px 0 24px}.showcase-screen img,.decision-screen img{width:160%;transform:translateY(-17px);margin-bottom:-16px}.screen-note{left:-5px;transform:scale(.82);transform-origin:left bottom}.decision-showcase{padding:64px 0}.decision-screen{padding-left:0}.technical-showcase{padding:64px 0}.technical-screen img{width:152%;transform:translateY(-13px);margin-bottom:-16px}}
.price-line{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid #403152}.price-line strong{font-family:var(--mono);font-size:24px;line-height:1.0;color:white;letter-spacing:0}.price-line strong small{font-size:13px;color:#bdb2cb;font-weight:400}.price-line span{font-family:var(--mono);font-size:13px;color:#c9a6ff;text-align:right}.offer-note{display:block;margin-top:16px;color:#ada1bd;font-size:13px;line-height:1.35}
.pricing-intro{max-width:710px}.pricing-intro h2{margin-top:16px}.pricing-intro>p:not(.eyebrow){color:#c3bacf;font-size:16px;line-height:1.6;margin:24px 0 0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;align-items:stretch}.price-card{position:relative;background:#1b112b;border:1px solid #443657;border-radius:8px;padding:24px;display:flex;flex-direction:column;min-height:505px}.price-card .mini{color:#c9a6ff}.price-card h3{font-size:24px;margin:16px 0 16px;color:#fff}.price{font-family:var(--mono);color:#fff;margin:0;line-height:1.0;letter-spacing:0}.price strong{font-size:36px;font-weight:600}.price span{font-size:13px;color:#bdb2cb}.price-desc{font-size:13px;line-height:1.6;color:#bdb2cb;min-height:42px;margin:8px 0 24px}.price-card ul{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid #403152;flex:1}.price-card li{position:relative;padding:8px 0 8px 16px;border-bottom:1px solid #403152;font-size:13px;color:#ded7e6}.price-card li:before{content:'+';position:absolute;left:0;color:#c9a6ff;font-family:var(--mono)}.price-button{background:#38254e;width:100%}.price-button:hover{background:#4d336c}.price-card.featured{background:var(--violet);border-color:#a866ff;box-shadow:0 19px 42px rgba(106,0,255,.3);transform:translateY(-13px)}.price-card.featured .mini,.price-card.featured .price span,.price-card.featured .price-desc{color:#e8d8ff}.price-card.featured ul,.price-card.featured li{border-color:rgba(255,255,255,.25)}.price-card.featured li:before{color:#fff}.featured-label{position:absolute;top:-12px;right:20px;background:#fff;color:var(--violet);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;padding:8px 8px;border-radius:4px;margin:0}.setup-note{text-align:center;font-size:13px;color:#bdb2cb;margin:32px 0 0}.setup-note b{color:#fff;font-family:var(--mono)}@media(max-width:900px){.pricing-grid{grid-template-columns:1fr 1fr}.price-card.featured{transform:none}.price-card:last-child{grid-column:1/-1;min-height:auto}}@media(max-width:600px){.pricing-grid{grid-template-columns:1fr;margin-top:32px}.price-card,.price-card:last-child{grid-column:auto;min-height:auto}.price-card.featured{transform:none}.setup-note{text-align:left}}

/* Objections et cadrage des chiffres. Ajout additif : reprend strictement les
   jetons du systeme (trame, couleurs, mono), aucune regle existante modifiee. */
.faq{padding:0 0 96px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:48px;border-top:1px solid var(--line)}
.faq-grid article{padding:24px 0;border-bottom:1px solid var(--line)}
.faq-grid .mini{color:var(--light);margin:0}
.faq-grid h3{font-size:18px;line-height:1.35;color:var(--ink);margin:16px 0 8px;font-weight:700}
.faq-grid p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.proof-note{margin-top:24px;border-left:2px solid var(--violet);padding:4px 0 4px 16px;font-size:13px;line-height:1.6;color:var(--muted);max-width:640px}
.proof-note b{color:var(--ink)}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-left:auto}
.footer-legal a{margin-left:0}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:600px){.faq{padding-bottom:64px}.faq-grid{margin-top:32px}.footer-legal{margin-left:0;gap:16px}}

/* Le decor du hero deborde volontairement (main-screen width:119%), mais sans
   confinement il rend TOUTE la page glissante lateralement sur telephone :
   mesure 421px de contenu dans un ecran de 390. `clip` confine sans creer de
   conteneur de defilement, donc le scroll doux vers les ancres reste intact. */
html,body{overflow-x:hidden;overflow-x:clip}

/* Les fleches des boutons heritaient de `bolder` : 700 sur .button donne 900 sur
   le <b> imbrique. Archivo n'est charge qu'en 400 a 800, le navigateur fabriquait
   donc une graisse SYNTHETIQUE, qui rend le glyphe empate. Valeur explicite. */
.button b,.under-link b,.float-right b{font-weight:700}

/* =====================================================================
   NORMALISATION UI (08-08-2026), demandee par David apres mesure.
   Bloc ADDITIF : aucune regle ci-dessus n'est modifiee. Supprimer ce bloc
   rend la page a son etat anterieur, au pixel pres.
   Trois chantiers mesures :
   1. contraste  : 12 elements sous le seuil WCAG AA (2,90 pour un seuil de 4,50)
   2. typographie: 23 tailles distinctes ramenees a 7
   3. trame      : espacements alignes sur les multiples de 8
   ===================================================================== */

/* --- 1. CONTRASTE ---------------------------------------------------
   --light passe de #9891aa (rapport 2,90) a #767085 (rapport 4,56 sur
   --paper, 4,74 sur carte blanche). Teinte la plus proche qui passe AA. */
:root{--light:#767085}

/* --- 2. ECHELLE TYPOGRAPHIQUE : 64 / 42 / 28 / 19 / 15 / 13 / 10 ----- */

/* 64 : le titre d'ouverture, seul a ce niveau */
.hero h1{font-size:clamp(40px,4.6vw,64px)}

/* 42 : tous les titres de section, qui variaient de 35 a 48 sans raison */
.section-title h2,.story-copy h2,.evidence-copy h2,.closing h2,
.showcase-copy h2,.decision-copy h2,.technical-copy h2,.shift h2{font-size:36px}

/* 28 : tous les chiffres mis en avant, qui variaient de 25 a 45 */
.price strong{font-size:24px}
.decision-callout span{font-size:24px}
.target-float strong{font-size:24px}
.data-float strong{font-size:24px}
.evidence-head strong{font-size:24px}

/* 19 : tous les titres de carte, qui variaient de 19 a 25 */
.offer-card h3,.price-card h3,.surface h3,.output-grid h3,.faq-grid h3{font-size:18px}
.metric b{font-size:18px}
.button b{font-size:18px}

/* 15 : le texte courant, qui variait de 15 a 17 */
.hero-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),
.evidence-copy>p:not(.eyebrow),.closing-grid>div>p:not(.eyebrow),
.pricing-intro>p:not(.eyebrow),.shift-grid>p:last-child,
.showcase-copy>p:not(.eyebrow),.decision-copy>p:not(.eyebrow),
.technical-copy>p:not(.eyebrow){font-size:16px}

/* 13 : interface et textes secondaires, qui variaient de 11 a 14.
   Les valeurs a 11 et 12 REMONTENT a 13 : elles etaient sous le seuil
   de confort de lecture, et le lecteur vise a 45 ans et plus. */
.button,.under-link,.surface>p:not(.mini),.output-grid p,.faq-grid p,
.nav nav a,footer:not(.tk-footer) a,.num,.story-points b,.story-points span,
.price-card li,.offer-card li,.price-desc,.setup-note,.decision-callout p,
.evidence-head span,.float-right p,.screen-note b,.proof-note,
.button-small,footer:not(.tk-footer) span,.offer-note{font-size:13px}

/* 10 : les micro-libelles, qui variaient de 9 a 10 */
.eyebrow,.mini,.legend,.price span,.data-float small,.data-float span,
.metric span,.screen-top,.screen-top small,.target-float small,
.target-float span,.featured-label,.sources,.screen-note span{font-size:13px}

/* --- 3. TRAME DE 8 --------------------------------------------------- */
.nav{height:80px}
.hero{padding:96px 0 64px;gap:32px}
.shift{padding:96px 0}
.surfaces{padding:96px 0}
.llm-showcase{padding:0 0 96px}
.story-block{padding:96px 0}
.decision-showcase{padding:96px 0}
.evidence{padding:96px 0}
.technical-showcase{padding:96px 0}
.closing{padding:96px 0}
footer:not(.tk-footer){height:104px}

.surface{padding:24px}
.metric{left:24px;right:24px}
.price-card{padding:24px}
.offer-card{padding:32px}
.evidence-card{padding:32px}
.faq-grid article{padding:24px 0}

.surface-grid{margin-top:64px;gap:16px}
.output-grid{margin-top:64px}
.pricing-grid{margin-top:64px;gap:16px}
.faq-grid{margin-top:64px;gap:0 48px}
.story-points{margin-top:32px}

@media(max-width:900px){
  .llm-showcase{padding-bottom:96px}
  .decision-showcase,.technical-showcase{padding:96px 0}
}
@media(max-width:600px){
  .nav{height:64px}
  .hero{padding-top:48px}
  .hero h1{font-size:36px}
  .section-title h2,.story-copy h2,.evidence-copy h2,.closing h2,
  .showcase-copy h2,.decision-copy h2,.technical-copy h2,.shift h2{font-size:32px}
  .shift{margin-top:48px;padding:64px 0}
  .surfaces{padding:64px 0}
  .llm-showcase{padding-bottom:64px}
  .story-block,.evidence,.decision-showcase,.technical-showcase{padding:64px 0}
  .closing{padding:64px 0}
  .surface-grid,.output-grid,.pricing-grid,.faq-grid{margin-top:48px}
  .offer-card{padding:24px}
  /* cibles tactiles : les liens du pied etaient hauts de 14px */
  footer:not(.tk-footer) a{display:inline-block;padding:8px 0}
}

/* --- Passe finale : les traineurs identifies a la mesure ------------- */

/* Deux tailles restaient hors echelle */
.price{font-size:13px}          /* le " CHF / mois" heritait du 16px du corps */
.float-right b{font-size:13px}  /* "Impact attendu" etait seul a 9px */

/* Le vert des bandeaux de capture : 4,27 sur #f6f4f8, sous le seuil de 4,50 */
.screen-top small{color:#0d6b4a}

/* Ecarts de grille restes hors trame */
.nav{gap:32px}
.nav nav{gap:24px}
.button{gap:8px}
.actions{gap:24px}
.sources{gap:8px}
.shift-grid{gap:48px}
.llm-showcase .wrap{gap:64px}
.story-layout{gap:64px}
.story-points div{gap:8px}
.decision-showcase{gap:64px}
.decision-callout{gap:16px}
.evidence{gap:96px}
.technical-layout{gap:64px}
footer:not(.tk-footer){gap:16px}
.footer-legal{gap:16px}
.output-grid article{padding:24px 24px 8px 0}
.output-grid article+article{padding-left:24px}

/* Cibles tactiles sur telephone : mesurees a 18px de haut pour le lien
   secondaire du hero et 30px pour les liens du pied. Recommandation : 44. */
@media(max-width:600px){
  .under-link{display:inline-block;padding:16px 0 8px}
  footer:not(.tk-footer) a{padding:16px 0}
  .brand{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================
   LE RADAR DU HERO (14-08-2026, deuxieme version)

   ⛔ La premiere version l'enfermait dans un pave violet fonce, repris tel
   quel de la page d'inscription. David : « je veux pas un pave violet fonce,
   il doit etre en profondeur et vivre naturellement en opposition au texte
   sur le meme fond ». Le radar est donc POSE sur le fond de la page : aucun
   cadre, aucune ombre portee, aucun aplat. La profondeur vient du halo qui
   l'eclaire par en dessous et de la lumiere au centre, pas d'une boite.

   Le dessin etait fait pour un fond sombre : tous ses traits etaient des
   blancs translucides, invisibles ici. La palette est inversee trait par
   trait, en gardant les deux seules couleurs qui portent du sens, le violet
   du site et le magenta de la citation.

   Tout est prefixe `geo-` : cette feuille sert une page du site, et le meme
   jour un nom court dans une feuille partagee a fait afficher un faux
   message d'alerte sur la page d'inscription.
   ============================================================ */
/* ⛔ `.hero-stage` porte une hauteur fixe de 511 px, calibree pour la capture
   d'ecran qui vivait la avant. Le radar est carre : sans cette remise a zero,
   il debordait par le bas et n'etait plus centre sur le texte. */
.hero-stage:has(.geo-radar-zone){height:auto}
.geo-radar-zone{position:relative; display:block; text-decoration:none;
  width:100%; aspect-ratio:1/1; max-width:540px; margin:0 auto}
/* La profondeur : une lueur diffuse SOUS le dessin, du meme violet que la
   marque. Elle deborde volontairement du carre, sans bord pour l'arreter. */
.geo-radar-zone:before{content:''; position:absolute; inset:-8%;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(154,77,255,.20), rgba(154,77,255,.07) 55%, transparent 74%);
  pointer-events:none}
.geo-radar-zone:focus-visible{outline:2px solid var(--violet); outline-offset:8px;
  border-radius:20px}

.geo-radar{position:relative; display:block; width:100%; height:100%}

/* Les cercles et les axes : du gris violet tres pale. Assez pour donner la
   structure, pas assez pour concurrencer le texte a gauche. */
.geo-radar .anneaux circle{fill:none; stroke:rgba(45,27,105,.13); stroke-width:1}
.geo-radar .anneaux .bord{stroke:rgba(45,27,105,.07)}
.geo-radar .axes line{stroke:rgba(45,27,105,.07); stroke-width:1}

/* Le site mesure : un point de lumiere violette. C'est le seul element qui
   brille, et c'est le sujet de la page. */
.geo-radar .coeur circle{fill:var(--violet)}
.geo-radar .onde{fill:none; stroke:var(--magenta); stroke-width:2}
.geo-radar .nom-nous{fill:var(--ink); font-size:13px; font-weight:700;
  text-anchor:middle; font-family:var(--ui); letter-spacing:.02em}
.geo-radar .liens line{stroke-width:1.5}

/* Les cibles : une pastille blanche posee sur le fond, avec un liibelle en
   dessous. Celle qui cite le site prend la couleur de la marque. */
.geo-radar .pastille{fill:#fff; stroke:rgba(45,27,105,.14); stroke-width:1}
.geo-radar .logo{fill:var(--muted); color:var(--muted)}
.geo-radar .nom-cible{fill:var(--light); font-size:13px; font-weight:600;
  text-anchor:middle; font-family:var(--ui)}
.geo-radar .cite .pastille{fill:#fff; stroke:var(--violet); stroke-width:1.5}
.geo-radar .cite .logo{fill:var(--ink); color:var(--ink)}
.geo-radar .cite .nom-cible{fill:var(--text); font-weight:700}

.geo-radar .balai{transform-origin:250px 250px; animation:geo-tourner 11s linear infinite}
.geo-radar .onde{animation:geo-onde 3.6s ease-out infinite}
.geo-radar .halo{animation:geo-respire 3.6s ease-in-out infinite}
@keyframes geo-tourner{to{transform:rotate(360deg)}}
@keyframes geo-onde{0%{r:16; opacity:.85} 100%{r:132; opacity:0}}
@keyframes geo-respire{0%,100%{opacity:.55} 50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){
  .geo-radar .balai, .geo-radar .onde, .geo-radar .halo{animation:none}
}

/* Le nom du produit et le lien vers la demo : poses sur le fond, pas sur une
   barre. Le lien reste le point de sortie le plus visible du hero. */
.geo-radar-nom{position:absolute; top:0; left:0; font-family:var(--mono);
  font-size:13px; font-weight:600; letter-spacing:.10em; color:var(--light)}
.geo-scene-live{position:absolute; top:-6px; right:0; font-size:13px;
  font-weight:700; color:var(--violet); background:#fff;
  border:1px solid #ddd2f5; border-radius:999px; padding:8px 16px;
  white-space:nowrap; transition:background .2s, border-color .2s}
.geo-radar-zone:hover .geo-scene-live{background:#f3ecff; border-color:var(--violet)}

/* ⛔ DEFAUT PREEXISTANT DU GRID, trouve le 14-08-2026 en recadrant les
   etiquettes. `.hero` declare `45% 55%` AVEC un gap de 28 px : les deux
   colonnes font donc 100 % du conteneur PLUS le gap, et la colonne de droite
   depasse de 32 px. Personne ne l'avait vu parce que la capture d'ecran qui
   vivait la debordait volontairement (`width:106%`) : le defaut se cachait
   derriere une intention. En `fr`, les colonnes se partagent ce qui RESTE
   apres le gap. */
/* ⛔ ET SEULEMENT SUR GRAND ECRAN. Ecrite sans borne, cette regle etait plus
   specifique que le `@media(max-width:900px){.hero{grid-template-columns:1fr}}`
   d'origine et le neutralisait : sur telephone, le hero restait en deux
   colonnes, le radar tombait a 166 px de large dans un coin. Une regle ajoutee
   en fin de feuille passe DEVANT les media queries deja ecrites. */
@media(min-width:901px){
  .hero:has(.geo-radar-zone){grid-template-columns:45fr 55fr}
}

/* ⛔ Les deux etiquettes de chiffres etaient calees sur la COLONNE, pas sur
   le dessin : avec la capture d'ecran d'avant, qui remplissait la colonne,
   elles bordaient l'image. Le radar est plus etroit, et « la priorite du
   jour » se retrouvait 60 px hors du contenu, coupee sur un ecran de 1280.
   Elles se calent desormais sur les bords du hero, dans le cadre. */
.hero-stage:has(.geo-radar-zone) .float-left{left:0; bottom:14px}
.hero-stage:has(.geo-radar-zone) .float-right{right:0; bottom:-8px}

@media(max-width:900px){
  .geo-radar-zone{max-width:520px}
}
@media(max-width:600px){
  .geo-radar-nom{display:none}
  .geo-scene-live{position:static; display:inline-block; margin-top:16px}
  .geo-radar-zone{max-width:100%}
  /* ⛔ L'etiquette de chiffres est posee en absolu sur grand ecran, ou elle
     borde le radar. Sur telephone elle lui tombait DESSUS : elle masquait
     Gemini et le bouton de la demo, c'est-a-dire la seule sortie du hero.
     Elle passe dans le flux, sous le radar, ou elle se lit entierement. */
  .hero-stage:has(.geo-radar-zone) .float-left{position:static; transform:none;
    margin:16px auto 0; display:block; width:max-content; max-width:100%}
}

/* ── Le lien vers la démo, aux 11 emplacements ───────────────────────────
   Le menu, le radar, la note de preuve, les cinq écrans, la section cockpit,
   la section finale, le pied de page. C'est ce lien qui montre le produit. */
.nav-demo{font-size:13px; font-weight:700; color:var(--violet);
  text-decoration:none; border:1px solid #ddd2f5; border-radius:7px;
  padding:8px 16px; transition:background .2s, border-color .2s}
.nav-demo:hover{background:#f3ecff; border-color:var(--violet)}

/* Sur le bandeau d'un écran : discret, toujours au même endroit, si bien
   qu'on finit par savoir où cliquer.
   ⛔ Sur le bandeau le plus étroit, la mesure et le lien se touchaient : le
   bandeau devient une ligne flex à écart garanti, et c'est la mesure qui se
   laisse rogner, jamais le lien. */
.screen-top{display:flex; align-items:center; gap:16px}
.screen-top small{margin-left:auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.screen-top .voir-demo{font-size:13px; font-weight:700; color:var(--violet);
  text-decoration:none; white-space:nowrap; flex:none}
.screen-top .voir-demo:hover{text-decoration:underline}

.demo-invite{margin-top:32px; text-align:center}
.demo-invite a{font-size:16px; font-weight:700; color:var(--violet);
  text-decoration:none; border-bottom:2px solid #ddd2f5; padding-bottom:4px;
  transition:border-color .2s}
.demo-invite a:hover{border-color:var(--violet)}
.demo-invite b{margin-left:8px}
.demo-invite.sous-bouton{margin-top:16px}
.demo-invite.sous-bouton a{font-size:13px; color:#EFE4FF; border-bottom-color:#8C6BC8}
.demo-invite.sous-bouton a:hover{border-color:#c9a6ff}
@media(max-width:600px){
  .nav-demo{display:none}   /* le menu entier est masqué sur téléphone */
}

/* ============================================================
   LES ÉCRANS DU PRODUIT, REDESSINÉS (15-08-2026)

   Ils étaient six captures PNG, 2 Mo au total, floues au zoom, figées au
   jour de la capture et muettes pour un lecteur d'écran. Ce sont désormais
   des extraits du tableau de bord écrits en HTML : nets partout, 0 octet
   d'image, lisibles au clavier, et modifiables quand le produit bouge.

   ⛔ Ils montrent `votre-entreprise.ch`, jamais timekraft.ch : ce sont des
   exemples d'interface, et le nom le dit de lui-même. Les mesures réelles de
   TimeKraft vivent dans le texte de la page, datées, et dans la démo en
   ligne. Un produit qui vend de la mesure ne peut pas être ambigu là-dessus.

   La matière est celle du radar du hero : posé sur le fond, ombre douce,
   chiffres en chasse fixe. Aucune fausse fenêtre de navigateur : on montre
   le tableau de bord, pas une capture d'écran de tableau de bord.
   ============================================================ */
.ec{background:var(--card); border:1px solid var(--line); border-radius:13px;
  box-shadow:0 22px 48px rgba(36,18,76,.10); overflow:hidden}
.ec-corps{padding:24px}

/* Une rangée de mesures. Elles se replient sur deux colonnes avant de
   s'empiler : trois chiffres serrés valent mieux qu'un seul étiré. */
/* ⛔ 126 px laissaient « +34 clics » se faire rogner dès que la colonne se
   resserrait : le chiffre restait, l'unité disparaissait, ce qui change la
   mesure au lieu de la tronquer. Le plancher se mesure sur le contenu le plus
   long, pas sur ce qui paraît suffisant. */
.ec-tuiles{display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.ec-tuiles:has(.ec-evol),
.ec-tuiles:has(> :nth-child(4)):not(:has(> :nth-child(5))){
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:480px){
  .ec-tuiles:has(.ec-evol),
  .ec-tuiles:has(> :nth-child(4)):not(:has(> :nth-child(5))){
    grid-template-columns:1fr}
}
.ec-tuile{background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:16px 16px}
.ec-lib{font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--light); line-height:1.35}
.ec-val{font-family:var(--mono); font-size:32px; font-weight:700;
  color:var(--ink); line-height:1.05; margin-top:8px; letter-spacing:-.02em;
  white-space:nowrap}
.ec-val .u{font-size:16px; color:var(--muted); font-weight:500}
.ec-sous{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.35}
.ec-delta{display:inline-block; font-family:var(--mono); font-size:13px;
  font-weight:700; padding:4px 8px; border-radius:999px; margin-left:8px;
  vertical-align:middle}
.ec-delta.up{color:#0E7A56; background:#E6F6EF}
.ec-delta.down{color:#B8215A; background:#FDECF3}

/* Les barres par modèle. ⛔ Le cyan de Perplexity passe sous 3:1 sur ce
   fond : le nom et le taux sont donc TOUJOURS écrits, jamais la couleur
   seule (contrôle du validateur de palette, 15-08). */
.ec-barres{display:grid; gap:16px}
.ec-barre-tete{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.ec-barre-nom{font-size:16px; font-weight:700; color:var(--ink)}
.ec-barre-det{font-size:13px; color:var(--light)}
.ec-barre-val{margin-left:auto; font-family:var(--mono); font-size:16px;
  font-weight:700; color:var(--ink)}
.ec-piste{height:10px; border-radius:999px; background:#EEEAF4; overflow:hidden}
.ec-piste i{display:block; height:100%; border-radius:999px}

/* Les listes : une occasion, une question, une page. Le chiffre porte la
   ligne, le libellé l'explique, l'étiquette la qualifie. */
.ec-liste{display:grid}
.ec-ligne{display:grid; grid-template-columns:104px 1fr auto; gap:16px;
  align-items:start; padding:16px 0; border-top:1px solid var(--line)}
.ec-ligne:first-child{border-top:0; padding-top:4px}
.ec-chiffre{font-family:var(--mono); font-size:24px; font-weight:700;
  color:var(--ink); line-height:1.05}
.ec-chiffre span{display:block; font-family:var(--ui); font-size:13px;
  font-weight:400; color:var(--light); margin-top:4px; line-height:1.35}
.ec-jauge{height:4px; border-radius:999px; background:#EEEAF4; margin-top:8px}
.ec-jauge i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--magenta))}
.ec-titre-ligne{font-size:16px; font-weight:700; color:var(--ink)}
.ec-note-ligne{font-size:13px; color:var(--muted); margin-top:4px;
  line-height:1.35}
.ec-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.ec-tag{font-family:var(--mono); font-size:13px; padding:4px 8px;
  border-radius:6px; background:var(--surface); color:var(--muted)}
.ec-tag.achat{background:#FEF3E2; color:#8A4A08; font-weight:700;
  letter-spacing:.05em}
.ec-tag.com{background:#E6F6EF; color:#0E7A56; font-weight:700;
  letter-spacing:.05em}
.ec-etat{font-size:13px; color:var(--muted); background:var(--surface);
  border-radius:999px; padding:4px 16px; white-space:nowrap}

/* Un avant → après. La flèche est un caractère, pas une image. */
/* ⛔ Un avant → après ne se coupe jamais en deux lignes : « 3 210 → 5 000 »
   se lisait « 3 / 210 → 5 / 000 », ce qui invente deux chiffres. */
.ec-evol{display:flex; align-items:baseline; gap:8px; font-family:var(--mono);
  margin-top:8px; flex-wrap:nowrap}
.ec-evol .av, .ec-evol .ap{white-space:nowrap}
.ec-evol .av{font-size:16px; color:var(--light)}
.ec-evol .fl{color:var(--light)}
.ec-evol .ap{font-size:32px; font-weight:700; color:var(--violet);
  letter-spacing:-.02em}

/* Chaque écran dit de quand il date. C'est la signature du produit :
   rien ne s'affiche ici sans sa date et sans le moyen de le vérifier. */
.ec-pied{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:16px 24px; border-top:1px solid var(--line);
  background:var(--paper)}
.ec-source{font-family:var(--mono); font-size:13px; color:var(--light)}
/* Le nom du site montré porte l'honnêteté de la page : ces écrans sont des
   exemples d'interface, jamais les mesures de TimeKraft, qui vivent dans le
   texte et dans la démo. Il se lit, donc il est plus foncé que le reste. */
.ec-source b{color:var(--muted); font-weight:700}
.ec-pied a{font-size:13px; font-weight:700; color:var(--violet);
  text-decoration:none; white-space:nowrap}
.ec-pied a:hover{text-decoration:underline}

@media(max-width:600px){
  .ec-corps{padding:16px}
  .ec-ligne{grid-template-columns:84px 1fr; gap:16px}
  .ec-etat{grid-column:2; justify-self:start}
  .ec-val{font-size:24px}
  .ec-pied{padding:16px 16px}
}

/* ⛔ LE MÊME DÉFAUT DE GRILLE, DANS QUATRE SECTIONS DE PLUS (15-08-2026).
   Chacune déclare deux colonnes en pourcentage dont la somme fait 100 %, PLUS
   un gap:la grille déborde donc exactement de la largeur de son gap, de 68
   à 71 px selon la section. Personne ne l'avait vu parce que les captures
   d'écran qui vivaient là débordaient volontairement, et qu'on ne remarque
   pas le bord manquant d'une image. Avec des écrans redessinés, ce sont des
   chiffres qui se faisaient couper.

   En `fr`, les colonnes se partagent ce qui RESTE après le gap.
   ⛔ Borné aux grands écrans : sans cette borne, la règle passerait devant
   les media queries qui empilent ces sections sur téléphone.
   ⛔ 03-09-2026 : cette borne s'écrivait `96px`, faute de frappe pour 901.
   Elle valait donc pour TOUTE largeur : sur téléphone, colonnes de 145 à
   167 px, quatre écrans hors champ, texte coupé. Vérifié par
   `tests/verifier_landing_locale.js` du dépôt du radar. */
@media(min-width:901px){
  .story-layout:has(.ec){grid-template-columns:42fr 58fr}
  .llm-showcase .wrap:has(.ec){grid-template-columns:37fr 63fr}
  .decision-showcase:has(.ec){grid-template-columns:37fr 63fr}
  .technical-layout:has(.ec){grid-template-columns:40fr 60fr}
}

/* ⛔ Les encarts posés au bord des écrans se plaçaient sur le bas de l'IMAGE,
   là où il n'y avait rien à lire. Le pied d'un écran redessiné, lui, porte sa
   date de mesure et son lien vers la démo : l'encart les masquait tous les
   deux. Les descendre ne suffisait pas, ils sont trop hauts.

   Ils passent donc dans le flux, sous l'écran. On perd un effet de
   profondeur, on gagne deux informations lisibles : c'est l'accessoire qu'on
   retire avant de sortir. */
.showcase-screen:has(.ec) .screen-note,
.plan-visual:has(.ec) .target-float{position:static; transform:none;
  left:auto; bottom:auto; margin-top:16px; display:inline-block}

/* ── « À regarder en premier » ───────────────────────────────────────────
   Le seul écran en pleine largeur : il casse le rythme gauche-droite à
   l'endroit où la page promet une vision claire. C'est aussi le seul écran
   qui hiérarchise plutôt qu'il ne mesure, et c'est l'argument central du
   produit : on ne rend pas cent signaux, on rend les cinq qui comptent.

   Le rang 1..5 est ici une VRAIE séquence, l'ordre de gravité mesurée : il
   porte de l'information, il ne décore pas. */
.ec-alertes{margin-top:64px}
.ec-alertes .ec-corps{padding:32px 32px 24px}
.al-tete{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:8px}
.al-tete h3{font-size:24px; font-weight:800; color:var(--ink); margin:0;
  letter-spacing:-.015em}
.al-note{font-size:13px; color:var(--light)}
.al-liste{list-style:none; margin:0; padding:0}
.al-ligne{display:grid; grid-template-columns:34px 1fr 24px; gap:16px;
  align-items:center; padding:16px 0; border-top:1px solid var(--line)}
.al-rang{font-family:var(--mono); font-size:16px; color:var(--light)}
.al-corps b{display:block; font-size:16px; font-weight:700; color:var(--ink);
  line-height:1.35}
.al-corps span{display:block; font-size:13px; color:var(--muted); margin-top:4px;
  line-height:1.35}
.al-fleche{color:var(--violet); font-size:18px; text-align:right}
@media(max-width:600px){
  .ec-alertes{margin-top:32px}
  .ec-alertes .ec-corps{padding:24px 16px 16px}
  .al-ligne{grid-template-columns:26px 1fr; gap:16px}
  .al-fleche{display:none}
}

/* ⛔ L'ALTERNANCE N'EN ÉTAIT PAS UNE (15-08-2026). Mesuré sur la page servie :
   droite, droite, droite, gauche, pleine largeur, droite. Cinq écrans du même
   côté, ce que David reprochait justement à la version en captures.

   Une seule section suffit à rétablir le balancement : « Ne plus recevoir un
   rapport » passe son écran à gauche. La page lit alors droite, gauche,
   droite, gauche, pleine largeur, droite — l'œil change de côté à chaque
   argument, et le bloc en pleine largeur marque la respiration au milieu.

   ⛔ Borné aux grands écrans : sur téléphone tout s'empile, et l'ordre du
   HTML (le texte d'abord, l'écran ensuite) est le bon ordre de lecture.
   `order` ne doit jamais désynchroniser l'ordre visuel de l'ordre du DOM là
   où ils se confondent. */
@media(min-width:901px){
  .story-layout:has(.ec){grid-template-columns:58fr 42fr}
  .story-layout:has(.ec) .plan-visual{order:-1}
}

/* ⛔ DEUX SECTIONS SANS AUCUN ESPACE EN HAUT (15-08-2026, signalé par David).
   `.faq` et `.outputs` déclarent `padding:0 0 96px` : elles s'appuyaient sur
   le padding-bas de la section précédente pour respirer. Ça tenait tant que
   la précédente avait le même fond ; depuis que `.technical-showcase` porte un
   fond gris, la démarcation tombe à 18 px du titre de la FAQ, et le texte
   paraît collé au trait.

   Toutes les autres sections de la page ouvrent sur 104 à 146 px. Celles-ci
   s'alignent, sur la trame. */
.faq{padding-top:96px}
.outputs{padding-top:96px}
@media(max-width:600px){
  .faq{padding-top:64px}
  .outputs{padding-top:64px}
}

/* ⛔ LE RADAR S'ALIGNE SUR LE TITRE (15-08-2026, demande de David).
   Centré verticalement, il flottait au milieu d'un bloc de texte deux fois
   plus haut que lui : rien ne le rattachait à quoi que ce soit. Aligné sur le
   H1, il pose une ligne de force horizontale — l'œil part du titre et trouve
   le dessin à la même hauteur.

   Sur l'étiquette au-dessus du titre, non : une étiquette annonce, elle ne
   porte pas la composition. Le décalage vaut la hauteur de cette étiquette et
   de sa marge, arrondi sur la trame. */
@media(min-width:901px){
  .hero:has(.geo-radar-zone){align-items:start}
  .hero-stage:has(.geo-radar-zone){margin-top:48px}
}

/* ── L'avant / après, et la preuve nue (16-08-2026) ─────────────────────
   Deux blocs de texte pur dans une page qui montre surtout des écrans. Ils
   ne portent aucune donnée : ils disent ce que le lecteur ressent avant, et
   ce qu'il vérifie après. */
.bascule{padding:96px 0 0}
.bascule-grille{display:grid; grid-template-columns:1fr 56px 1fr;
  align-items:center; gap:0}
.bascule-avant, .bascule-apres{background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:32px}
.bascule-avant{background:var(--surface); border-color:transparent}
.bascule-avant h3, .bascule-apres h3{font-size:24px; line-height:1.05;
  color:var(--ink); margin:16px 0 16px; font-weight:800; letter-spacing:-.015em}
.bascule-avant p:not(.mini), .bascule-apres p:not(.mini){margin:0; font-size:16px;
  line-height:1.6; color:var(--muted)}
.bascule-avant .mini{color:var(--muted)}
.bascule-apres{box-shadow:0 22px 48px rgba(36,18,76,.10)}
.bascule-fleche{text-align:center; font-size:24px; color:var(--violet)}

@media(max-width:900px){
  .bascule-grille{grid-template-columns:1fr; gap:16px}
  .bascule-fleche{transform:rotate(90deg)}
}
@media(max-width:600px){
  .bascule{padding-top:64px}
  .bascule-avant, .bascule-apres{padding:24px}
}

/* =====================================================================
   LE CARNET DE MESURE (20-08-2026), demande par David : « il faut demontrer
   la valeur, que les gens disent : ah oui, je paie pour ca ».
   Bloc ADDITIF : aucune regle au-dessus n'est modifiee. Le supprimer rend la
   page a son etat anterieur.

   Le parti pris : chaque ligne de preuve porte SA DATE et SON DENOMINATEUR,
   en chasse fixe, sur des filets d'un pixel. Ce n'est pas un ornement, c'est
   la these du produit : un chiffre sans sa date ni son « sur combien » n'est
   pas une mesure. Une ligne montre volontairement un gain modeste : c'est ce
   qui separe une mesure d'un argumentaire.
   ===================================================================== */
.preuve{background:var(--surface);padding:96px 0}
.preuve-tete{max-width:760px}
.preuve-tete h2{font-size:36px;line-height:1.05;color:var(--ink);margin:16px 0 0;font-weight:800}
.preuve-tete h2 em{font-family:var(--serif);font-weight:400;color:var(--violet)}
.preuve-tete>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0}

.carnet{margin-top:48px;border-top:1px solid #ddd7e6}
.carnet-ligne{display:grid;grid-template-columns:1fr 240px;gap:32px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid #ddd7e6}
.carnet-quoi{font-size:18px;font-weight:700;color:var(--ink);margin:0}
.carnet-source{display:block;font-family:var(--mono);font-size:13px;font-weight:400;
  /* ⛔ PAS --light ICI : ce jeton a ete regle sur --paper (#fbfafd) et rend
     4,12 sur le gris --surface de cette section, sous le seuil AA de 4,5.
     Mesure par le harnais, pas a l'oeil. */
  color:var(--muted);letter-spacing:.02em;margin-top:8px;line-height:1.6}
.carnet-chiffres{font-family:var(--mono);display:flex;align-items:baseline;
  justify-content:flex-end;gap:8px;white-space:nowrap}
.carnet-avant{font-size:18px;color:var(--light)}
.carnet-fleche{color:#bcb4c5}
.carnet-apres{font-size:36px;line-height:1;color:var(--violet);font-weight:600}
.carnet-seul .carnet-apres{color:var(--ink)}

.carnet-aveu{margin-top:32px;border-left:2px solid var(--violet);padding:8px 0 8px 16px;
  max-width:720px;font-size:16px;line-height:1.6;color:var(--muted)}
.carnet-aveu b{color:var(--ink)}
.preuve-sortie{margin-top:32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* --- l'offre cesse d'etre une liste d'intentions ---------------------
   Les puces disaient « Suivi SEO et visibilite IA » : rien de mesurable ne
   changeait entre 490 et 990, donc rien ne justifiait l'ecart. Chaque palier
   annonce desormais ses quantites, dans la meme chasse fixe que les mesures. */
.quantites{margin:0 0 24px;padding:16px 0 0;border-top:1px solid #403152;
  display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-family:var(--mono);font-size:13px}
.quantites dt{color:#bdb2cb;margin:0}
.quantites dd{margin:0;color:#fff;text-align:right;font-weight:600}
.price-card.featured .quantites{border-color:rgba(255,255,255,.25)}
.price-card.featured .quantites dt{color:#e8d8ff}

@media(max-width:900px){
  .carnet-ligne{grid-template-columns:1fr 200px;gap:24px}
}
@media(max-width:600px){
  .preuve{padding:64px 0}
  .preuve-tete h2{font-size:32px}
  .carnet{margin-top:32px}
  .carnet-ligne{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .carnet-chiffres{justify-content:flex-start}
  .carnet-apres{font-size:32px}
  .preuve-sortie{flex-direction:column;align-items:flex-start;gap:16px}
}

/* =====================================================================
   TÉLÉPHONE, TROIS RÉPARATIONS MESURÉES (03-09-2026)
   Vérifiées par `tests/verifier_landing_locale.js` du dépôt du radar, à
   375 et 1280 px, sans un seul appel vers l'extérieur.
   ===================================================================== */

/* ⛔ LE COMPTEUR CHEVAUCHAIT LE PARAGRAPHE. `.metric` était posé en absolu au
   bas de la carte, sur un `min-height` calé pour le bureau : à 375 px le
   texte descend plus bas et le compteur s'imprimait dessus (jusqu'à
   7 371 px² d'intersection). Il entre dans le flux, poussé en bas de carte
   par `margin-top:auto` : plus rien ne peut se superposer. */
.surface{display:flex; flex-direction:column}
.surface>p:not(.mini){margin-bottom:24px}
.surface .metric{position:static; left:auto; right:auto; bottom:auto;
  margin-top:auto}

/* ⛔ « LE PLUS CHOISI » : aucun client n'existe encore, la mention était
   fausse. Elle dit désormais pour qui l'offre est pensée, et entre dans le
   flux : posée en absolu, une ligne plus longue sortait de la carte. */
.featured-label{position:static; align-self:flex-start; max-width:100%;
  white-space:normal; line-height:1.35; margin:0 0 16px; letter-spacing:.02em}

/* ⛔ NAVIGATION SUR TÉLÉPHONE. Sous 600 px, `.nav nav` était masqué et rien
   ne le rouvrait : quatre ancres et la démo inaccessibles. Un bouton de menu,
   annoncé (`aria-expanded`, `aria-controls`, focus visible), déplie la
   navigation en colonne sous l'en-tête ; `landing.js` porte les six lignes
   qui basculent l'état. */
.nav-burger{display:none; margin-left:auto; width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:7px; background:var(--card);
  cursor:pointer; flex-direction:column; align-items:center;
  justify-content:center; gap:5px}
.nav-burger span{display:block; width:18px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .2s, opacity .2s}
.nav-burger:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:600px){
  .nav{position:relative}
  .nav-burger{display:flex}
  .nav nav.ouverte{display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0; margin:0; padding:8px 0 16px;
    background:var(--card); border:1px solid var(--line);
    border-radius:0 0 9px 9px; box-shadow:0 18px 35px rgba(37,17,74,.12);
    z-index:30}
  .nav nav.ouverte a{display:flex; align-items:center; min-height:44px;
    padding:0 24px; font-size:16px; border-top:1px solid var(--line)}
  .nav nav.ouverte a:first-child{border-top:0}
  /* « recherches/mois (FR) » sous un chiffre : dans une colonne de 84 px, le
     mot composé ne trouvait pas de point de coupure et sortait de sa case. */
  .ec-chiffre span{overflow-wrap:anywhere}
}