/* ═══════════════════════════════════════════════════════════════════════════ SKILLBOX — REFONTE VISUELLE (couche additive, NON destructive) --------------------------------------------------------------------------- • À charger APRÈS skb-shared.css. Réutilise ses tokens (--accent, --surface, --font-display, --font-body, thème clair/sombre) : RIEN n'est redéclaré ici. • Tout est scopé sous « .skb-page.rf » → seules les pages qui portent la classe `rf` prennent le nouveau look. Les autres pages restent intactes. (Migration page par page : on ajoute `rf` au
d'une page + on remplace son HTML par la version refonte.) ═══════════════════════════════════════════════════════════════════════════ */ .skb-page.rf{line-height:1.6} .rf .C{max-width:1180px;margin:0 auto;padding:0 26px} .rf h1,.rf h2,.rf h3{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:-.01em} .rf em{font-style:italic;color:var(--accent)} .rf svg{display:block} /* 96px -> clamp (05/08/2026, « l'accueil descend trop bas »). Six sections a 96px haut ET bas pesaient 1 152 px a elles seules. Le clamp plafonne a 80px. ⚠️ Ne concerne QUE le bureau : les paliers de 56px (<=760) et 44px (<=480) plus bas dans ce fichier gouvernent deja le mobile et restent inchanges. */ .rf .S{padding:clamp(56px,7vw,80px) 0} .rf .lbl{font:600 13px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);display:inline-flex;align-items:center;gap:9px} .rf .lbl::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} .rf .ttl{font-size:clamp(28px,4.2vw,44px);margin:16px 0 14px} .rf .sub{color:var(--muted);font-size:17px;max-width:58ch} .rf .center{margin-left:auto;margin-right:auto;text-align:center} /* Reveal en amélioration progressive : visible par défaut. L'état masqué n'existe que si le JS a pu tourner (la coquille pose `js` sur en tête de page) → sans JS, aucune page blanche. Le @media scripting:none est le filet pour les navigateurs sans script. */ .rf .reveal{opacity:1;transform:none;transition:.7s var(--ease,cubic-bezier(.22,1,.36,1))} html.js .rf .reveal:not(.in){opacity:0;transform:translateY(24px)} .rf .reveal.in{opacity:1;transform:none} @media(scripting:none){.rf .reveal{opacity:1!important;transform:none!important}} /* Boutons pill */ .rf .btn-primary,.rf .btn-ghost{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font:600 15px var(--font-body);transition:.22s var(--ease,ease);cursor:pointer;border:1px solid transparent} .rf .btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px -12px var(--accent)} .rf .btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)} .rf .btn-ghost{border-color:var(--line-2);color:var(--text)} .rf .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .rf .btn-actions{display:flex;gap:14px;flex-wrap:wrap} /* HERO */ /* On CONSERVE l'effet d'origine du site (halo radial + grille masquée) : il vit sur « .hero::before / .hero::after » dans skb-shared.css et s'applique donc à tous les héros .rf. On garde juste position/overflow et on remonte le contenu AU-DESSUS de l'effet. */ .rf .hero{padding:72px 0 40px;position:relative;overflow:hidden} .rf .hero>.C{position:relative;z-index:1} /* Effet d'origine du site (halo radial bleu+violet + grille masquée), RÉAFFIRMÉ ici pour qu'il soit GARANTI sur toutes les pages .rf, même si WP Rocket « Remove Unused CSS » supprime les .hero::before/::after de skb-shared.css. skb-refonte.css doit être exclu du RUCSS. .rf .hero::* (spécificité 0,2,1) l'emporte sur la version de base. */ .rf .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(900px 460px at 82% -8%, var(--hero-glow) 0%, transparent 62%), radial-gradient(720px 420px at -6% 4%, oklch(0.60 0.13 305 / .07) 0%, transparent 60%)} .rf .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(720px 440px at 72% 0%,#000,transparent 76%); mask-image:radial-gradient(720px 440px at 72% 0%,#000,transparent 76%)} .rf .hero-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .rf .hero-tag{display:inline-block;font:600 13px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--accent-weak);padding:8px 14px;border-radius:999px} .rf .hero-xl{font-size:clamp(38px,6vw,66px);margin:24px 0 20px} /* Le `max-width:35ch` s'appliquait a TOUS les heros. Il n'a de sens que dans le hero a DEUX colonnes, ou le texte partage la largeur avec le panneau de droite : sans lui, il passerait sous l'illustration. Sur les trois pages au hero pleine largeur — /contact/, /merci/, /404 — il ne faisait que brider le texte a un tiers de la place disponible (signale par David le 05/08/2026). La contrainte est donc portee par la MISE EN PAGE qui la justifie, pas par le composant. */ .rf .hero-sub{color:var(--muted);font-size:18.5px;margin-bottom:30px;max-width:780px} .rf .hero-2col .hero-sub{max-width:35ch} .rf .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px} .rf .chip{font:500 13.5px var(--font-body);color:var(--muted);border:1px solid var(--line);padding:9px 15px;border-radius:999px;display:inline-flex;gap:8px;align-items:center} .rf .chip i{width:7px;height:7px;border-radius:50%;background:var(--green)} .rf .pricepill{display:inline-flex;gap:9px;align-items:center;margin-top:24px;font:500 13.5px var(--font-body);color:var(--muted);border:1px solid var(--line);padding:10px 16px;border-radius:999px} .rf .pricepill b{color:var(--cyan);font-weight:600} .rf .hpanel{position:relative;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--sh-3);padding:26px;overflow:hidden} .rf .hpanel::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 200px at 76% 0,var(--hero-glow),transparent 70%)} /* Hero « un seul cadre » : si le panneau enveloppe une fenêtre .ui, on efface le cadre externe → seule la fenêtre .ui reste (pas de cadre-dans-un-cadre). */ .rf .hpanel:has(> .ui){border:none;background:none;box-shadow:none;padding:0} @media(max-width:880px){.rf .hero-2col{grid-template-columns:1fr;gap:32px}.rf .hero-sub{max-width:none}} /* Artefact « écran produit » (hero) */ .rf .ui{position:relative;z-index:1;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);overflow:hidden;box-shadow:var(--sh-2)} .rf .ui-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)} .rf .ui-bar .dots{display:inline-flex;gap:6px}.rf .ui-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)} .rf .ui-bar .ui-t{font:500 12.5px var(--font-body);color:var(--muted)} .rf .ui-bar .live{margin-left:auto;font:600 11px var(--font-body);display:inline-flex;gap:6px;align-items:center;color:var(--green)} .rf .ui-bar .live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:rf-bl 1.5s infinite} @keyframes rf-bl{0%,100%{opacity:1}50%{opacity:.35}} .rf .ui-body{padding:18px} /* Home : mini tableau de bord */ .rf .dash{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rf .tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px} .rf .tile.big{grid-column:1/-1;overflow:hidden} .rf .t-l{font:600 11px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .rf .t-v{font-family:var(--font-display);font-size:40px;line-height:1;margin-top:6px} .rf .t-v2{font-family:var(--font-display);font-size:30px;line-height:1;margin:6px 0 4px} .rf .t-s{font:500 12.5px var(--font-body);color:var(--muted);display:inline-flex;gap:7px;align-items:center} .rf .t-s i{width:7px;height:7px;border-radius:50%}.rf .d-cy{background:var(--cyan)}.rf .d-gr{background:var(--green)} .rf .spark{width:100%;height:52px;margin-top:8px;display:block} /* Audit : écran analyse */ .rf .scan-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);margin-bottom:9px;font-size:14px} .rf .scan-row .s{font:600 12px var(--font-body);display:inline-flex;gap:7px;align-items:center} .rf .scan-row .s svg{width:15px;height:15px;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .scan-row.done .s{color:var(--green)}.rf .scan-row.warn .s{color:var(--amber)}.rf .scan-row.run .s{color:var(--accent)} .rf .progress{height:8px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin:15px 4px 12px} .rf .progress>div{height:100%;background:linear-gradient(90deg,var(--cyan),var(--accent));border-radius:6px} .rf .ui-foot{text-align:center;font:500 12px var(--font-body);color:var(--faint)} /* Ligne d'artefact cliquable (ex : console produits du hero) */ .rf a.scan-row{color:inherit;transition:.18s var(--ease,ease)} .rf a.scan-row:hover{border-color:var(--accent);transform:translateX(3px)} /* Home : panneau « Services actifs » (artefact hero cliquable) */ .rf .svcp{display:flex;flex-direction:column;gap:9px} .rf a.svcp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none;transition:.18s var(--ease,ease)} .rf a.svcp-row:hover{border-color:var(--ci,var(--accent));transform:translateX(3px);box-shadow:var(--sh-2)} .rf .svcp-l{display:flex;align-items:center;gap:12px;min-width:0} .rf .svcp-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklab,var(--ci,var(--accent)) 14%,transparent);color:var(--ci,var(--accent))} .rf .svcp-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rf .svcp-name{display:block;font:600 14.5px var(--font-body);color:var(--text)} .rf .svcp-desc{display:block;font-size:12px;color:var(--muted);margin-top:1px} .rf .svcp-tag{flex:0 0 auto;font:600 11px var(--font-body);padding:5px 10px;border-radius:999px;background:color-mix(in oklab,var(--ci,var(--accent)) 8%,transparent);color:var(--ci,var(--accent-text))} /* BANDE MÉTHODE (home) */ .rf .strip{border-block:1px solid var(--line);background:var(--surface-2)} .rf .strip-in{max-width:1180px;margin:0 auto;padding:54px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative} /* Le fil qui reliait les quatre etapes est RETIRE (05/08/2026). Il etait cale a `top:88px`, c'est-a-dire sur la ligne des icones quand elles etaient centrees et empilees au-dessus du titre. Depuis que l'icone et le titre partagent une ligne, ce trait ne traverse plus rien : il coupait les blocs au hasard. Retire plutot que recale — un fil de liaison n'a de sens qu'entre des reperes alignes, ce que la disposition horizontale ne garantit plus a toutes les largeurs (le titre passe sur deux lignes quand la colonne se resserre). */ /* ⚠️ COLLISION DE NOMS avec skb-shared.css, mesuree le 05/08/2026. `.mstep` y vaut `display:grid; grid-template-columns:48px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid` — une liste « pastille + texte » d'un tout autre composant. Cette regle-ci ne redefinissait que `text-align` et `position`, donc la GRILLE restait : l'icone prenait la colonne de 48 px, le

la colonne large, et le

retombait dans la colonne de 48 px. Mesure : le paragraphe faisait 65,9 px de large et le bloc 277 px de haut. Ce n'etait pas un texte « a aerer », c'etait un texte ecrase. On remet donc explicitement un flux vertical et on annule ce qui vient de la regle generique — display, padding et filet compris. */ /* Disposition horizontale : icone et titre sur UNE ligne, texte dessous en pleine largeur (arbitrage David, 05/08/2026 — « le plus horizontal possible »). Les zones nommees evitent de toucher a l'ordre du DOM : l'icone reste le premier enfant, donc rien ne change pour un lecteur d'ecran. */ .rf .mstep{ position:relative; text-align:left; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico titre" "txt txt"; align-items:center; gap:10px 14px; padding:0; border-bottom:0; } .rf .mstep .o{grid-area:ico;margin:0} .rf .mstep h3{grid-area:titre;margin:0} .rf .mstep p{grid-area:txt;max-width:none;margin:0} .rf .mstep .o{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;color:#fff;position:relative;z-index:1;box-shadow:var(--sh-2)} .rf .mstep:nth-child(1) .o{background:var(--accent)}.rf .mstep:nth-child(2) .o{background:var(--violet)}.rf .mstep:nth-child(3) .o{background:var(--amber)}.rf .mstep:nth-child(4) .o{background:var(--cyan)} .rf .mstep .o svg{width:30px;height:30px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .mstep h3{font-size:23px;margin-bottom:6px} .rf .mstep p{font-size:13.5px;color:var(--muted);max-width:22ch;margin:0 auto} @media(max-width:820px){.rf .strip-in{grid-template-columns:1fr 1fr;gap:38px}.rf .strip-in::before{display:none}} @media(max-width:460px){.rf .strip-in{grid-template-columns:1fr}} /* SERVICES */ /* ⚠️ COLLISION DE NOMS avec skb-shared.css : `.services-grid` y est une grille a separateurs (`gap:1px` + `background:var(--line)` + `border` + `overflow:hidden`), dessinee pour un tout autre composant. La refonte, elle, veut des cartes DETACHEES : gap de 18px, chacune avec sa bordure et son rayon. Redefinir le seul `gap` ne suffisait pas — le fond gris du conteneur restait visible dans les 18 px de gouttiere (signale par David le 05/08/2026), et `overflow:hidden` rognait l'ombre et le `translateY(-4px)` du survol des cartes. On neutralise donc les quatre proprietes, pas seulement la couleur. */ .rf .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px; background:transparent;border:0;border-radius:0;overflow:visible} .rf .sc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;transition:.22s var(--ease,ease);overflow:hidden} .rf .sc:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--sh-2)} .rf .sc-num{position:absolute;top:22px;right:24px;font:600 12px var(--font-body);color:var(--faint)} .rf .sc-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;background:var(--accent-dim);color:var(--ci,var(--accent))} .rf .sc-ic svg{width:27px;height:27px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .sc-title{font-family:var(--font-display);font-size:24px;margin-bottom:8px} .rf .sc-desc{color:var(--muted);font-size:15px;margin-bottom:16px} .rf .sc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .rf .sc-tag{font:500 12px var(--font-body);color:var(--muted-2);border:1px solid var(--line);padding:5px 10px;border-radius:999px} .rf .arrow-link{font:600 14px var(--font-body);color:var(--accent-text);display:inline-flex;gap:7px;align-items:center} .rf .arrow-link:hover{gap:11px} @media(max-width:900px){.rf .services-grid{grid-template-columns:1fr 1fr}} /* DEUX colonnes sous 600px, et non une seule (arbitrage David, 05/08/2026). Mesure : empilees en colonne unique, les 6 cartes de services faisaient 2 232 px, soit 22 % de toute la page mobile — le plus gros poste de hauteur du site. En deux colonnes on retombe autour de 1 150 px. Le padding des cartes est resserre en consequence : a ~170 px de large, les 30 px d'origine ne laissaient plus de place au texte. */ @media(max-width:600px){ .rf .services-grid{grid-template-columns:1fr 1fr;gap:12px} .rf .sc{padding:20px 16px} } /* MÉTHODE + À PROPOS */ .rf .sur{background:var(--surface-2)} .rf .g2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:48px} .rf .steps{display:flex;flex-direction:column;gap:14px} .rf .step{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px} .rf .step-num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--accent-dim);color:var(--accent-text);display:grid;place-items:center;font:600 15px var(--font-body)} .rf .step-title{font-family:var(--font-display);font-size:20px;margin-bottom:3px} .rf .step-desc{font-size:14px;color:var(--muted)} .rf .quote-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--sh-2)} .rf .points{display:flex;flex-direction:column;gap:20px;margin-top:22px} .rf .point{display:flex;gap:14px} .rf .point-dot{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--accent);display:grid;place-items:center;margin-top:2px} .rf .point-dot::after{content:"";width:10px;height:10px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)} .rf .point-title{font-weight:600;font-size:15.5px;margin-bottom:3px} .rf .point-desc{font-size:14px;color:var(--muted)} .rf .txt{color:var(--muted);font-size:16px;margin-bottom:16px;max-width:52ch} .rf .pillar{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:14px} .rf .pillar-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--accent-dim);color:var(--accent);display:grid;place-items:center} .rf .pillar-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .pillar-title{font-weight:600;font-size:16px;margin-bottom:3px} .rf .pillar-desc{font-size:14px;color:var(--muted)} .rf .signature{display:flex;gap:14px;align-items:center;margin-top:26px} /* et non #fff : en theme sombre l'accent s'eclaircit et le blanc ne donne plus que 3,65:1 sur ce degrade (mesure du 04/08). */ .rf .sig-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--violet));color:var(--sur-accent);display:grid;place-items:center;font-weight:600} .rf .sig-name{font-weight:600}.rf .sig-role{font-size:13.5px;color:var(--muted)} @media(max-width:820px){.rf .g2{grid-template-columns:1fr;gap:34px}} /* AXES / STEPPER / LIVRABLE (page service) */ .rf .axes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .rf .axis{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;overflow:hidden} .rf .axis .k{position:absolute;top:22px;right:24px;font:600 12px var(--font-body);color:var(--faint)} .rf .axis .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:18px;box-shadow:var(--sh-2)} .rf .axis .ic svg{width:28px;height:28px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .axis h3{font-family:var(--font-display);font-size:25px;margin-bottom:8px} .rf .axis p{color:var(--muted);font-size:15px} @media(max-width:820px){.rf .axes{grid-template-columns:1fr}} .rf .hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;margin-top:44px} .rf .hsteps::before{content:"";position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--violet),transparent);opacity:.4} .rf .hst{text-align:center;position:relative} .rf .hst .d{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);position:relative;z-index:1} .rf .hst .d svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .hst .n{font:600 12px var(--font-body);color:var(--faint);letter-spacing:.1em} .rf .hst h3,.rf .hst h4{font-family:var(--font-display);font-size:19px;margin:5px 0 6px}.rf .hst p{font-size:13px;color:var(--muted)} .rf .hsteps.three{grid-template-columns:repeat(3,1fr);max-width:940px;margin-left:auto;margin-right:auto} @media(max-width:760px){.rf .hsteps{grid-template-columns:1fr 1fr;gap:30px}.rf .hsteps::before{display:none}.rf .hsteps.three{grid-template-columns:1fr}} .rf .deliver{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center} @media(max-width:900px){.rf .deliver{grid-template-columns:1fr;gap:36px}} .rf .report{border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--sh-3);overflow:hidden} .rf .report .top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font:500 12.5px var(--font-body);color:var(--faint)} .rf .report .top .dot{display:inline-flex;gap:6px}.rf .report .top .dot i{width:9px;height:9px;border-radius:50%;background:var(--line-2)} .rf .report .body{padding:28px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center} .rf .gauge{position:relative;width:154px;height:154px} .rf .gauge .val{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .rf .gauge .val b{font-family:var(--font-display);font-size:42px;line-height:1}.rf .gauge .val small{font-size:16px;color:var(--faint)} .rf .gauge .val span{font:600 11px var(--font-body);color:var(--faint);display:block;margin-top:4px;letter-spacing:.06em;text-transform:uppercase} .rf .bars{display:flex;flex-direction:column;gap:16px} .rf .bar .l{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px}.rf .bar .l b{font-weight:600;color:var(--muted-2)} .rf .bar .t{height:8px;border-radius:6px;background:var(--surface-3);overflow:hidden} .rf .bar .f{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--accent))} .rf .report .foot{padding:20px 26px;border-top:1px solid var(--line);background:var(--accent-dim)} .rf .report .foot .tt{font:600 11px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px} .rf .report .foot ol{list-style:none;display:flex;flex-direction:column;gap:10px} .rf .report .foot li{display:flex;gap:12px;align-items:center;font-size:14px} .rf .report .foot li b{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font:600 12px var(--font-body)} .rf .why{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px} .rf .q{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px} .rf .q .em{width:44px;height:44px;border-radius:12px;background:var(--accent-dim);color:var(--accent);display:grid;place-items:center;margin-bottom:15px} .rf .q .em svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rf .q h3,.rf .q h4{font-family:var(--font-display);font-size:21px;margin-bottom:6px}.rf .q p{color:var(--muted);font-size:14.5px} @media(max-width:640px){.rf .why{grid-template-columns:1fr}} .rf .crumb{font:500 14px var(--font-body);color:var(--muted)}.rf .crumb b{color:var(--accent-text);font-weight:600} /* Encre lisible sur un fond --accent. En clair l'accent est sombre (blanc OK) ; en sombre il s'eclaircit et le blanc tombe a 3,64:1 -> on bascule sur une encre foncee. */ .rf .on-accent{color:#fff} .rf[data-theme="dark"] .on-accent,.rf[data-theme="dark"] .report .foot li b{color:#0b1220} /* FAQ (accordéon natif

) */ .rf .faq{max-width:860px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left} .rf .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.22s var(--ease,ease)} .rf .faq-item[open]{border-color:var(--accent);box-shadow:var(--sh-2)} .rf .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;font-family:var(--font-display);font-size:clamp(18px,2.2vw,21px);line-height:1.2;color:var(--text)} .rf .faq-item summary::-webkit-details-marker{display:none} .rf .faq-item summary:hover{color:var(--accent)} .rf .faq-item .qi{flex:0 0 auto;width:28px;height:28px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--accent);transition:.22s var(--ease,ease)} .rf .faq-item .qi svg{width:15px;height:15px;fill:none;stroke:currentColor} .rf .faq-item[open] .qi{transform:rotate(45deg);background:var(--accent);color:#fff;border-color:var(--accent)} .rf .faq-item .fa{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:1.68;max-width:74ch} /* COMPARATEUR INTERACTIF Agent vs Automatisation (#waSchema) — récupéré du live, optimisé rf (SVG, tokens) */ .rf #waSchema{margin-top:40px} .rf #waSchema *{box-sizing:border-box} .rf #waSchema .was-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:760px){.rf #waSchema .was-compare{grid-template-columns:1fr}} .rf #waSchema .was-card{text-align:left;width:100%;cursor:pointer;border-radius:16px;padding:18px;border:1.5px solid var(--line);background:var(--surface);transition:.22s var(--ease,ease);font-family:inherit;color:var(--text);display:flex;flex-direction:column;gap:6px} .rf #waSchema .was-card:hover{border-color:var(--accent)} .rf #waSchema .was-card.agent.on{border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in oklch,var(--violet) 22%,transparent)} .rf #waSchema .was-card.auto.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)} .rf #waSchema .was-c-top{display:flex;align-items:center;gap:11px} .rf #waSchema .was-c-emoji{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-dim)} .rf #waSchema .was-c-emoji svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rf #waSchema .was-card.agent .was-c-emoji{color:var(--violet)}.rf #waSchema .was-card.auto .was-c-emoji{color:var(--accent)} .rf #waSchema .was-c-name{font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1} .rf #waSchema .was-card.agent .was-c-name{color:var(--violet)}.rf #waSchema .was-card.auto .was-c-name{color:var(--accent)} .rf #waSchema .was-c-tl{font-weight:600;font-size:14px;color:var(--text)} .rf #waSchema .was-c-hint{font-size:13px;color:var(--muted);line-height:1.5} .rf #waSchema .was-c-pick{font-size:11.5px;color:var(--text-2);margin-top:4px;opacity:.75;transition:.2s;display:inline-flex;align-items:center;gap:5px} .rf #waSchema .was-c-pick svg{fill:none;stroke:currentColor} .rf #waSchema .was-card.on .was-c-pick{opacity:1;color:var(--accent-text)} .rf #waSchema .was-detail{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;min-height:182px} .rf #waSchema .was-detail .kicker{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .rf #waSchema .was-detail h3{margin:3px 0 0;font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--text)} .rf #waSchema .was-detail dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px} @media(max-width:560px){.rf #waSchema .was-detail dl{grid-template-columns:1fr}} .rf #waSchema .was-detail dt{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin-top:9px;font-weight:600} .rf #waSchema .was-detail dd{margin:2px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5} .rf #waSchema .was-detail .ex{margin-top:14px;background:var(--surface-2);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--muted)} .rf #waSchema .was-detail .ex b{color:var(--accent-text)} .rf #waSchema .was-detail.agent .ex{border-left-color:var(--violet)}.rf #waSchema .was-detail.agent .ex b{color:var(--violet)} .rf #waSchema .was-detail{transition:border-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease),background .25s var(--ease,ease)} .rf #waSchema .was-detail.auto{border-color:color-mix(in oklch,var(--accent) 50%,var(--line));box-shadow:0 0 0 3px var(--accent-dim);background:color-mix(in oklch,var(--accent) 5%,var(--surface))} .rf #waSchema .was-detail.auto h3{color:var(--accent)} .rf #waSchema .was-detail.agent{border-color:color-mix(in oklch,var(--violet) 50%,var(--line));box-shadow:0 0 0 3px color-mix(in oklch,var(--violet) 16%,transparent);background:color-mix(in oklch,var(--violet) 5%,var(--surface))} .rf #waSchema .was-detail.agent h3{color:var(--violet)} .rf #waSchema .was-together{margin-top:16px;border:1px solid var(--line);border-radius:18px;padding:18px;background:color-mix(in oklch,var(--accent) 5%,var(--surface))} .rf #waSchema .was-t-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:14px} .rf #waSchema .was-t-title{font-weight:700;font-size:15px;color:var(--text);display:inline-flex;align-items:center;gap:7px} .rf #waSchema .was-t-title svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.8} .rf #waSchema .was-t-sub{font-size:13px;color:var(--muted)} .rf #waSchema .was-flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap} .rf #waSchema .was-fstep{flex:1;min-width:150px;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--surface);transition:.25s var(--ease,ease);display:flex;flex-direction:column;gap:4px;cursor:pointer} .rf #waSchema .was-fstep .was-fk{font-weight:600;font-size:12.5px;color:var(--text);display:inline-flex;align-items:center;gap:6px} .rf #waSchema .was-fstep .was-fk svg{width:15px;height:15px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rf #waSchema .was-fstep .was-fd{font-size:11.5px;color:var(--muted);line-height:1.4} .rf #waSchema .was-fstep.auto{border-color:color-mix(in oklch,var(--accent) 45%,var(--line))}.rf #waSchema .was-fstep.auto .was-fk svg{stroke:var(--accent)} .rf #waSchema .was-fstep.agent{border-color:color-mix(in oklch,var(--violet) 45%,var(--line))}.rf #waSchema .was-fstep.agent .was-fk svg{stroke:var(--violet)} .rf #waSchema .was-fstep.human{border-color:color-mix(in oklch,var(--amber) 45%,var(--line))}.rf #waSchema .was-fstep.human .was-fk svg{stroke:var(--amber)} .rf #waSchema .was-fstep.lit{box-shadow:0 0 0 3px var(--accent-dim);transform:translateY(-1px)} .rf #waSchema .was-fstep.agent.lit{box-shadow:0 0 0 3px color-mix(in oklch,var(--violet) 24%,transparent)} .rf #waSchema .was-fstep.human.lit{box-shadow:0 0 0 3px color-mix(in oklch,var(--amber) 26%,transparent)} .rf #waSchema .was-farr{align-self:center;color:var(--faint);font-size:15px} @media(max-width:680px){.rf #waSchema .was-farr{transform:rotate(90deg)}} .rf #waSchema .was-play{margin-top:14px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-body);display:inline-flex;align-items:center;gap:7px} .rf #waSchema .was-play svg{width:13px;height:13px;fill:currentColor} .rf #waSchema .was-play:hover{background:var(--accent-dim)} .rf #waSchema .was-scenario{margin-top:13px;font-size:13px;color:var(--muted);line-height:1.55;min-height:20px} .rf #waSchema .was-scenario b{color:var(--text)} .rf #waSchema .was-diffs{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .rf #waSchema .was-diffs-lbl{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px} .rf #waSchema .was-badge{font-size:12px;font-weight:600;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:4px 11px;background:color-mix(in oklch,var(--green) 11%,transparent);display:inline-flex;align-items:center;gap:5px} .rf #waSchema .was-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9} /* CTA ⚠️ `color` N'EST PAS DECORATIF ICI — collision de classes avec skb-shared.css. Le `.cta` de skb-shared.css est peint sur un degrade bleu nuit et impose donc `color:#fff` sur le bloc ET sur son `h2`. La refonte reprend la meme classe avec l'intention inverse : un fond `var(--surface)`, clair en theme clair. Redefinir le fond sans redefinir l'encre laissait le titre BLANC SUR BLANC — mesure du 05/08/2026 : fond `oklch(1 0 0)`, texte `rgb(255,255,255)`, ratio 1:1, sur 11 des 14 blocs CTA (les 3 autres portaient un `style="color:var(--text)"` EN LIGNE, rustinage page par page retire depuis). Invisible en theme sombre, ou le blanc reste lisible par coincidence : c'est ce qui l'a fait passer inapercu. Le `h2` a besoin de sa PROPRE declaration — `.cta h2{color:#fff}` est une declaration explicite, que l'heritage depuis `.rf .cta` ne peut pas surcharger. */ .rf .cta{position:relative;border:1px solid var(--line);border-radius:24px;padding:62px 40px;text-align:center;overflow:hidden;background:var(--surface);color:var(--text);box-shadow:var(--sh-3)} .rf .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 240px at 50% -10%,var(--hero-glow),transparent 70%)} .rf .cta h2{position:relative;color:var(--text);font-size:clamp(28px,4vw,46px);margin-bottom:14px} .rf .cta p{position:relative;color:var(--muted);margin-bottom:27px;font-size:17px} .rf .cta .btn-actions{position:relative;justify-content:center} /* Fix débordement mobile : un bouton long (ex. « Essayer sur mes données — POC gratuit ») est en inline-flex et ne rétrécit pas → sur petit écran, empiler pleine largeur + texte qui s'enroule. */ @media(max-width:480px){ .rf .btn-actions{flex-direction:column;align-items:stretch} .rf .btn-primary,.rf .btn-ghost{width:100%;justify-content:center;white-space:normal;text-align:center} } /* Densité mobile : le rembourrage vertical des sections (.S 96px) n'était jamais réduit → 1150 à 1500px de vide par page. Bloc placé en fin de fichier pour que le gap resserré des .hsteps l'emporte sur le @media(max-width:760px) déclaré plus haut. */ @media(max-width:760px){.rf .S{padding:56px 0}.rf .hsteps{gap:22px}.rf .C{padding:0 18px}} @media(max-width:480px){.rf .S{padding:44px 0}} /* ═══════════════════════════════════════════════════════════════════════════ MOBILE — DENSITE VERTICALE. Ajoute le 04/08/2026 (audit UX, finding Major). Mesure a 390 px AVANT : /dataguard/ faisait 13 877 px de haut, soit SEIZE ecrans de pouce ; /service-conception-outils/ consommait 16,9 px de page par mot. Le rapport hauteur mobile / hauteur bureau allait de 1,4 a 1,7x : les grilles passaient bien en une colonne, mais les marges verticales, les paddings de section et les ecarts de grille restaient ceux du bureau. Le mobile etait un empilement, pas une adaptation. Rien n'est retire : c'est le blanc qui se resserre, pas le contenu. Le hero garde plus d'air que les sections courantes — c'est lui qui porte la promesse. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .rf .S{padding-top:44px;padding-bottom:44px} .rf .hero{padding-top:56px;padding-bottom:44px} .rf .g2,.rf .g3,.rf .g4{gap:14px} .rf .card{padding:18px} .rf .ttl{margin-bottom:12px} .rf .hero-sub{margin-bottom:20px} } /* Plancher de lisibilite dans les decks — finding Minor. Mesure a 390 px : 48 blocs sous 14 px sur le deck ThinkBox, 33 sur Analiz, jusqu'a 10,24 px. Les plus petits sont des textes de MAQUETTE SIMULEE (`.mock-url`, la fausse ligne d'export ERP) : leur petitesse fait partie de l'illusion et ils restent tels quels. Mais `.card-desc` a 12,8 px est du contenu reel, lu par des dirigeants sur telephone. */ @media (max-width: 700px) { .deck .card-desc,.deck p:not(.mock):not([class*="mock"]){font-size:max(13px,1em)} .rf .was-fd{font-size:13px} }