@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ================================ THEMES :root = theme CLAIR (par defaut, client-facing). :root[data-theme="dark"] = theme SOMBRE (design d'origine, restaure a l'identique). Toute couleur qui differe entre les deux vit ici sous forme de variable ; les regles plus bas ne referencent que ces variables. Bascule via l'encoche de la nav (#theme-toggle) -> data-theme sur . ================================ */ :root { --bg: #f7f8fb; --surface: #ffffff; --surface-2: #f1f3f8; --border: rgba(15,23,42,0.08); --border-h: rgba(15,23,42,0.16); --purple: #7c3aed; --cyan: #0891b2; --grad: linear-gradient(135deg,#7c3aed,#0891b2); --text: #0f172a; --t2: #64748b; --t3: #94a3b8; --green: #059669; --amber: #f59e0b; /* Teintes d'accent utilisees comme couleur de TEXTE (kickers, verdicts, badges) : sombres/saturees sur fond clair pour garder le contraste. */ --purple-t: #7c3aed; --purple-t2: #6d28d9; --green-t: #059669; --green-t2: #059669; --amber-t: #d97706; --cyan-t: #0891b2; --star: #f59e0b; /* Couleur du camp PRO. Elle ne doit JAMAIS etre le violet de la marque : le violet sert au logo, aux boutons et aux titres de section, donc un PRO violet ne se lit pas comme un camp face au vert du DIY. Le bleu n'a aucun autre role sur le site. --pro-rgb sert aux fonds et bordures translucides. */ --pro: #2563eb; --pro-t: #2563eb; --pro-rgb: 59,130,246; /* Remplissages neutres (champs, survols) : assombrissent le fond clair. */ --fill: rgba(15,23,42,.03); --fill-h: rgba(15,23,42,.06); --fill-faint: rgba(15,23,42,.025); --border-soft: rgba(15,23,42,.05); /* Fond estompe de la nav + ombres, calibres pour un fond clair. */ --nav-grad: linear-gradient(to bottom,rgba(247,248,251,.9),rgba(247,248,251,0)); --shadow-screen: 0 30px 70px rgba(15,23,42,.12); --shadow-card: 0 8px 28px rgba(15,23,42,.1); --aurora-op: .12; --r: 14px; /* Verre liquide (bascule de theme) : fond translucide, reflet clair en haut, ombre douce + lisere lumineux interne facon « liquid glass ». */ --glass-bg: linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.28)); --glass-brd: rgba(255,255,255,.75); --glass-hi: linear-gradient(150deg,rgba(255,255,255,.65),rgba(255,255,255,0) 46%); --glass-sh: 0 4px 14px rgba(15,23,42,.14),inset 0 1px 1px rgba(255,255,255,.85),inset 0 -6px 12px rgba(15,23,42,.05); --glass-sh-h: 0 9px 24px rgba(15,23,42,.2),inset 0 1px 1px rgba(255,255,255,.95); } :root[data-theme="dark"] { --bg: #101019; --surface: #131320; --surface-2: #1a1a2e; --border: rgba(255,255,255,0.07); --border-h: rgba(255,255,255,0.14); --purple: #8b5cf6; --cyan: #06b6d4; --grad: linear-gradient(135deg,#8b5cf6,#06b6d4); --text: #f1f5f9; --t2: #94a3b8; --t3: #475569; --green: #10b981; --amber: #f59e0b; /* Teintes d'accent : claires/desaturees pour ressortir sur fond sombre. */ --purple-t: #a78bfa; --purple-t2: #c4b5fd; --green-t: #34d399; --green-t2: #6ee7b7; --amber-t: #fbbf24; --cyan-t: #22d3ee; --star: #fbbf24; --pro: #3b82f6; --pro-t: #60a5fa; --pro-rgb: 59,130,246; /* Remplissages neutres : eclaircissent le fond sombre. */ --fill: rgba(255,255,255,.05); --fill-h: rgba(255,255,255,.09); --fill-faint: rgba(255,255,255,.02); --border-soft: rgba(255,255,255,.04); --nav-grad: linear-gradient(to bottom,rgba(12,12,20,.9),rgba(12,12,20,0)); --shadow-screen: 0 30px 70px rgba(0,0,0,.45); --shadow-card: 0 8px 28px rgba(0,0,0,.3); --aurora-op: .2; --glass-bg: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04)); --glass-brd: rgba(255,255,255,.22); --glass-hi: linear-gradient(150deg,rgba(255,255,255,.35),rgba(255,255,255,0) 46%); --glass-sh: 0 4px 16px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.28),inset 0 -6px 12px rgba(0,0,0,.25); --glass-sh-h: 0 9px 26px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.42); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased} /* « Aurore » de fond : deux halos flous (violet + cyan) qui derivent lentement pour eclaircir le fond sombre sans nuire a la lisibilite. Poses en z-index negatif : au-dessus du fond, sous tout le contenu. */ body::before,body::after{content:'';position:fixed;width:62vw;height:62vw;border-radius:50%;filter:blur(100px);z-index:-1;pointer-events:none;opacity:var(--aurora-op);will-change:transform} body::before{background:radial-gradient(circle,#8b5cf6,transparent 68%);top:-20vw;left:-12vw;animation:aurora1 20s ease-in-out infinite} body::after{background:radial-gradient(circle,#06b6d4,transparent 68%);bottom:-24vw;right:-12vw;animation:aurora2 25s ease-in-out infinite} @keyframes aurora1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22vw,14vh) scale(1.18)}} @keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18vw,-12vh) scale(1.12)}} @media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}} /* Views */ .view{display:none;min-height:100vh;flex-direction:column} .view.active{display:flex;animation:fadeIn .3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Nav */ .nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:62px;background:transparent;position:sticky;top:0;z-index:100} /* Fond de la barre estompe : flou + degrade qui se fond en transparence vers le bas (pas de ligne dure), facon Limova. Le masque n'affecte que ce fond (z-index:-1), le contenu de la nav reste net. */ .nav::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--nav-grad);-webkit-mask-image:linear-gradient(to bottom,#000 46%,transparent);mask-image:linear-gradient(to bottom,#000 46%,transparent);pointer-events:none} .logo{font-weight:900;font-size:1.3rem;letter-spacing:-.5px} .logo span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Le logo de la nav ramene a l'accueil (remplace les anciens boutons retour). */ .nav .logo{cursor:pointer} .nav-tag{font-size:.82rem;font-weight:600;color:var(--t2)} /* Liens de nav qui « tournent » au survol : le mot glisse vers le haut, une copie identique remonte du bas (effet a la Limova). Utilise pour tous les liens de nav (menu central + « Se connecter »). */ /* Le mot tourne ET un filet balaie dessous : il entre par la gauche au survol, puis ressort par la droite au depart (l'origine de la mise a l'echelle bascule entre les deux etats). Deux niveaux de span sont necessaires : le cadre qui rogne la copie du mot ne doit pas rogner le filet, qui vit sous la ligne de base. Le rognage est donc porte par le span exterieur, et le filet par le lien lui-meme. */ .nav-roll{position:relative;display:inline-block;color:var(--t2);font-size:.85rem;font-weight:600;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;text-decoration:none;transition:color .2s} .nav-roll > span{display:block;overflow:hidden;height:1.25em;line-height:1.25em} .nav-roll > span > span{display:block;position:relative;transition:transform .34s cubic-bezier(.6,0,.2,1)} .nav-roll > span > span::after{content:attr(data-text);position:absolute;left:0;top:100%} .nav-roll::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.6,0,.2,1)} .nav-roll:hover{color:var(--text)} .nav-roll:hover > span > span{transform:translateY(-100%)} .nav-roll:hover::after{transform:scaleX(1);transform-origin:left} /* Meme effet « roulette » applique au texte d'un bouton (« Se connecter ») : au survol du bouton, le mot glisse vers le haut et sa copie remonte du bas. Contrairement a .nav-roll, herite couleur/taille/graisse du bouton parent. */ .btn-roll{position:relative;display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:bottom} .btn-roll > span{display:block;transition:transform .34s cubic-bezier(.6,0,.2,1)} .btn-roll > span::after{content:attr(data-text);position:absolute;left:0;top:100%} .btn:hover .btn-roll > span, .search-btn:hover .btn-roll > span, .ex-cta:hover .btn-roll > span{transform:translateY(-100%)} /* Barre de nav de l'accueil : contrainte au meme conteneur centre (1080px) que le contenu et le footer, pour que logo/liens et actions tombent sur les memes bords que « Ton chiffrage » et « KitHom / CGU » en bas de page. */ .nav-inner{width:100%;max-width:1080px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between} .nav-left{display:flex;align-items:center;gap:40px} .nav-actions{display:flex;gap:20px;align-items:center} .nav-center{display:flex;gap:24px;align-items:center} /* Pages internes (chat/resultats/DIY/pros) : la barre de nav adopte le meme conteneur centre que le corps de page (1060px, gouttiere 40px), pour que le logo tombe sur le meme bord que le contenu et le bandeau en dessous. */ .nav.nav-app{padding:0} .nav-app .nav-inner{max-width:1060px;padding:0 40px} /* Bascule clair/sombre facon interrupteur « liquid glass » : rail de verre translucide (flou + reflet) a gauche de « Se connecter », present sur toutes les pages. Une pastille coulisse selon data-theme : CLAIR = soleil a gauche, pastille chaude ; SOMBRE = lune a droite, pastille froide. Icones SVG blanches inlinees, aucune ecriture. Le rail suit le theme via les variables --glass-*. */ .theme-toggle{position:relative;width:60px;height:30px;flex-shrink:0;border-radius:100px;border:1px solid var(--glass-brd);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px) saturate(1.7);backdrop-filter:blur(10px) saturate(1.7);box-shadow:var(--glass-sh);cursor:pointer;padding:0;font-family:inherit;transition:background .3s ease,box-shadow .3s ease} /* Reflet vitre sur le rail. */ .theme-toggle::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--glass-hi);pointer-events:none} /* Pastille coulissante — etat clair : soleil, calee a gauche. */ .theme-toggle::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Cpath%20d='M12%202.5v2M12%2019.5v2M2.5%2012h2M19.5%2012h2M5%205l1.4%201.4M17.6%2017.6l1.4%201.4M19%205l-1.4%201.4M6.4%2017.6L5%2019'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(145deg,#fcd34d,#f97316);box-shadow:0 2px 6px rgba(249,115,22,.5),inset 0 1px 1px rgba(255,255,255,.55);transition:left .32s cubic-bezier(.5,.15,.2,1),background .32s ease,box-shadow .32s ease} /* Etat sombre : la pastille glisse a droite et devient une lune bleutee. */ :root[data-theme="dark"] .theme-toggle::after{left:calc(100% - 27px);background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23fff'%3E%3Cpath%20d='M21%2012.8A9%209%200%201%201%2011.2%203%207%207%200%200%200%2021%2012.8z'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(145deg,#60a5fa,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,.55),inset 0 1px 1px rgba(255,255,255,.45)} .theme-toggle:hover{box-shadow:var(--glass-sh-h)} .theme-toggle:active{transform:scale(.97)} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:100px;font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .2s} .btn-grad{background:var(--grad);color:#fff;box-shadow:0 0 28px rgba(139,92,246,.3)} .btn-grad:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(139,92,246,.45)} /* Bouton « Se connecter » : au survol, un reflet blanc traverse la bulle en diagonale pendant qu'une onde s'en echappe et se dissipe. L'onde passe par une box-shadow du BOUTON, et non par un pseudo-element : l'overflow:hidden qui rogne le reflet dans la bulle rognerait aussi l'onde, alors qu'une ombre portee n'est jamais rognee. Declare apres .btn-grad, dont il remplace l'ombre au survol (meme specificite, l'ordre tranche). */ .btn-shine{position:relative;overflow:hidden;box-shadow:0 0 28px rgba(139,92,246,.3),0 0 0 0 rgba(139,92,246,.55);transition:transform .2s,box-shadow .55s ease} .btn-shine::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.4,0,.2,1);pointer-events:none} .btn-shine:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(139,92,246,.45),0 0 0 12px rgba(139,92,246,0)} .btn-shine:hover::after{left:130%} .btn-outline{background:transparent;border:1px solid var(--border-h);color:var(--text)} .btn-outline:hover{background:var(--fill)} .btn-ghost{background:var(--fill);color:var(--text)} .btn-ghost:hover{background:var(--fill-h)} .btn-sm{padding:7px 15px;font-size:.8rem} .btn-lg{padding:14px 28px;font-size:1rem} /* Inputs */ .inp{width:100%;background:var(--fill);border:1.5px solid var(--border-h);border-radius:100px;padding:15px 22px;color:var(--text);font-family:inherit;font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s} .inp:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(139,92,246,.14)} .inp::placeholder{color:var(--t3)} .inp-rect{border-radius:10px;padding:9px 13px;font-size:.85rem} /* Cards */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:border-color .2s} .card:hover{border-color:var(--border-h)} /* Badges */ .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.71rem;font-weight:700;letter-spacing:.3px} .b-green{background:rgba(16,185,129,.14);color:var(--green-t)} .b-purple{background:rgba(139,92,246,.14);color:var(--purple-t)} .b-amber{background:rgba(245,158,11,.14);color:var(--amber-t)} /* Badge du camp PRO (specialites d'une entreprise). */ .b-pro{background:rgba(var(--pro-rgb),.14);color:var(--pro-t)} /* Badge d'information pure (surface, duree) : volontairement neutre. Une couleur ici designerait un camp, or une surface n'en est pas un. */ .b-neutre{background:var(--fill-h);color:var(--t2)} /* Gradient text */ .grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Stars */ .stars{color:var(--star)} /* ================================ HOME ================================ */ .hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:104px 24px 104px;text-align:center;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 20% 40%,rgba(139,92,246,.18) 0%,transparent 65%),radial-gradient(ellipse 65% 55% at 80% 65%,rgba(6,182,212,.13) 0%,transparent 65%);pointer-events:none} .hero-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);border-radius:100px;font-size:.76rem;color:var(--purple-t2);margin-bottom:26px;font-weight:500} /* Tom, l'assistant KitHom : avatar + bulle de bienvenue sur l'accueil */ .tom-intro{display:flex;align-items:center;gap:14px;margin-bottom:80px;max-width:520px} .tom-avatar{position:relative;width:72px;height:72px;flex-shrink:0} .tom-avatar img{width:100%;height:100%;display:block;border-radius:20px;object-fit:cover;box-shadow:0 6px 20px rgba(139,92,246,.35)} .tom-bubble{position:relative;background:var(--surface);border:1px solid var(--border-h);border-radius:16px;border-bottom-left-radius:4px;padding:12px 18px;font-size:.95rem;color:var(--text);line-height:1.55;text-align:left} .tom-bubble strong{color:var(--purple-t)} .tom-bubble::before{content:'';position:absolute;left:-7px;bottom:12px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--border-h);border-bottom:1px solid var(--border-h);transform:rotate(45deg)} .hero-title{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;line-height:1.1;letter-spacing:-1.5px;margin-bottom:16px;max-width:680px} /* text-wrap:balance repartit les mots entre les lignes : plus jamais un mot seul en derniere ligne, quelle que soit la longueur du texte. */ .hero-sub{font-size:1rem;color:var(--t2);max-width:520px;line-height:1.75;margin-bottom:80px;text-wrap:balance} .search-wrap{position:relative;width:100%;max-width:620px;margin-bottom:18px} .search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);opacity:.45;font-size:1rem;pointer-events:none} .search-inp{width:100%;background:var(--surface);border:1.5px solid var(--border-h);border-radius:100px;padding:17px 140px 17px 50px;color:var(--text);font-family:inherit;font-size:.97rem;outline:none;transition:border-color .2s,box-shadow .2s} .search-inp:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(139,92,246,.14)} .search-inp::placeholder{color:var(--t3)} .search-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:9px 20px;background:var(--grad);color:#fff;border:none;border-radius:100px;font-family:inherit;font-size:.875rem;font-weight:700;cursor:pointer;transition:opacity .15s} .search-btn:hover{opacity:.88} /* Meme reflet + onde que « Se connecter ». Deux precautions ici : le bouton est centre verticalement par un transform, que le souleve ecraserait — d'ou le calc() qui compose les deux ; et sa transition d'origine ne porte que sur l'opacite, il faut donc la redeclarer pour animer l'onde. */ .search-btn.btn-shine{overflow:hidden;box-shadow:0 0 22px rgba(139,92,246,.28),0 0 0 0 rgba(139,92,246,.5);transition:transform .2s,box-shadow .55s ease} .search-btn.btn-shine:hover{opacity:1;transform:translateY(calc(-50% - 1px));box-shadow:0 6px 22px rgba(139,92,246,.42),0 0 0 10px rgba(139,92,246,0)} /* Thème clair : la barre manquait de lisibilite (fond quasi invisible sur la page, texte d'exemple trop pale). Fond blanc net + ombre douce pour la detacher, et placeholder assombri. Le theme sombre reste inchange. */ :root[data-theme="light"] .search-inp{background:var(--surface);box-shadow:var(--shadow-card)} :root[data-theme="light"] .search-inp:focus{box-shadow:0 0 0 4px rgba(124,58,237,.14),var(--shadow-card)} :root[data-theme="light"] .search-inp::placeholder{color:var(--t2)} .examples{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:620px} .chip{padding:7px 14px;background:var(--fill);border:1px solid var(--border);border-radius:100px;font-size:.79rem;color:var(--t2);cursor:pointer;transition:all .15s} .chip:hover{background:var(--fill-h);border-color:var(--border-h);color:var(--text)} /* flex-wrap est indispensable : sans lui, les 4 colonnes et leurs 56px de gouttiere imposent ~670px a la page entiere, et tout deborde sur mobile. */ .home-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 56px;padding:28px 32px;border-top:1px solid var(--border)} .stat-n{font-size:1.5rem;font-weight:800} .stat-l{font-size:.75rem;color:var(--t3);margin-top:3px} /* En-tete de section reutilisable (accueil) */ .sec-head{text-align:center;max-width:640px;margin:0 auto 42px} .sec-kicker{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple-t);margin-bottom:12px} .sec-title{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.8px;line-height:1.15;margin-bottom:14px} .sec-sub{font-size:1rem;color:var(--t2);line-height:1.7;text-wrap:balance} /* Section « Comment ca marche » : deux colonnes (etapes a gauche, telephone a droite) */ .how{padding:80px 32px;border-top:1px solid var(--border);scroll-margin-top:72px} .how-kicker{text-align:center;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple-t);margin-bottom:22px} .how-cols{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1.18fr;gap:56px;align-items:start} .how-left{display:flex;flex-direction:column} .how-col-title{font-size:clamp(1.5rem,2.7vw,2rem);font-weight:900;letter-spacing:-.6px;line-height:1.15;margin-bottom:12px} .how-col-sub{font-size:.95rem;color:var(--t2);line-height:1.6;margin-bottom:26px} /* Etapes resserrees avec un rail de progression vertical a gauche. Le rail se remplit (descend) au fil de l'etape active. */ .how-steps{position:relative;display:flex;flex-direction:column;gap:8px;padding-left:34px} .how-rail{position:absolute;left:9px;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--border);overflow:hidden} /* Le rail descend jusqu'a l'etape active ET son degrade defile vers le bas en continu : la couleur s'ecoule le long de la barre. La remise a zero du retour de boucle est geree en JS (hauteur 0 sans transition, puis redescente) pour qu'il reparte toujours du haut, sans se retracter par le bas. */ .how-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:3px;background:linear-gradient(180deg,#8b5cf6,#06b6d4,#8b5cf6,#06b6d4);background-size:100% 300%;animation:railCoule 3.6s linear infinite;transition:height .75s cubic-bezier(.33,0,.15,1)} @keyframes railCoule{from{background-position:0 0}to{background-position:0 -300%}} @media(prefers-reduced-motion:reduce){.how-rail-fill{animation:none;background:var(--grad)}} .how-step{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .55s ease,border-color .55s ease} .how-step:hover,.how-step.active{background:var(--surface);border-color:var(--border)} /* Un bloc de couleur glisse a travers le badge, du haut vers le bas : il entre quand l'etape s'active (.filling) et ressort par le bas quand on la quitte (.draining). Les deux se jouent en meme temps a la meme vitesse, si bien que la couleur semble couler sans interruption d'un numero au suivant. */ .how-step-n{position:relative;overflow:hidden;width:32px;height:32px;border-radius:10px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.32);flex-shrink:0;transition:border-color .55s} .how-step-n span{position:relative;z-index:1;display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;color:var(--purple-t2);transition:color .5s} /* Meme degrade coulant que le rail (railCoule fait defiler le violet/cyan) : le calque porte DEUX animations en parallele — railCoule anime la position du degrade (mouvement lumineux), howFillDown/howDrainDown le font glisser. Comme elles agissent sur des proprietes differentes, elles coexistent. */ .how-step-n::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#8b5cf6,#06b6d4,#8b5cf6,#06b6d4);background-size:100% 300%;transform:translateY(-101%);z-index:0;animation:railCoule 3.6s linear infinite} .how-step.filling .how-step-n::before{animation:railCoule 3.6s linear infinite,howFillDown 1s cubic-bezier(.33,0,.15,1) forwards} .how-step.draining .how-step-n::before{animation:railCoule 3.6s linear infinite,howDrainDown 1s cubic-bezier(.33,0,.15,1) forwards} @keyframes howFillDown{from{transform:translateY(-101%)}to{transform:translateY(0)}} @keyframes howDrainDown{from{transform:translateY(0)}to{transform:translateY(101%)}} .how-step.active .how-step-n{border-color:transparent} .how-step.active .how-step-n span{color:#fff} @media(prefers-reduced-motion:reduce){ .how-step-n::before{transition:none;animation:none;background:var(--grad)} .how-step.active .how-step-n::before{transform:translateY(0)} } .how-step-txt{min-width:0} .how-step-txt h3{font-size:1rem;font-weight:800} /* Le corps se deplie a sa VRAIE hauteur : grid-template-rows 0fr->1fr, que le navigateur anime sans a-coup, la ou l'ancien max-height visait une valeur fixe (140px) presque jamais exacte — d'ou l'acceleration heurtee en fin de course. Deploiement ralenti a ~0,75 s, courbe adoucie. */ .how-step-wrap{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .75s cubic-bezier(.33,0,.15,1),margin-top .75s cubic-bezier(.33,0,.15,1)} .how-step.active .how-step-wrap{grid-template-rows:1fr;margin-top:6px} .how-step-body{font-size:.88rem;color:var(--t2);line-height:1.6;overflow:hidden;opacity:0;transition:opacity .7s ease} .how-step.active .how-step-body{opacity:1} @media(prefers-reduced-motion:reduce){.how-step-wrap,.how-step-body,.how-step-n{transition:none}} /* Ecran de conversation « fondu » (colonne droite) : plus large que le telephone, bords haut/bas estompes par un masque en degrade. */ .how-screen{position:relative;border-radius:22px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border-h);box-shadow:var(--shadow-screen);overflow:hidden} .how-screen-top{display:flex;align-items:center;gap:10px;padding:15px 22px;border-bottom:1px solid var(--border)} /* En-tete de l'ecran de demo : le logo KitHom (comme la nav du haut), en plus petit. */ .how-screen-top .logo{font-size:1.05rem} .how-stage{position:relative;height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)} .how-stage .demo-panel{display:flex;flex-direction:column;justify-content:flex-start;padding:22px 32px} /* Les 3 ecrans sont empiles ; l'ecran actif (pilote par l'etape survolee/cliquee a gauche, ou par l'auto-defilement) apparait en fondu. */ /* Apparition ralentie et adoucie, calee sur le rythme de la colonne de gauche (~0,8 s, meme courbe que le depliage) : l'ecran se pose au lieu de surgir. Le panneau monte d'un peu plus bas pour un glissement plus perceptible. */ .demo-panel{position:absolute;inset:0;padding:26px 28px;background:var(--surface);opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.33,0,.15,1)} .demo-panel.active{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.demo-panel{transition:none}} .dm-search{display:flex;align-items:center;gap:12px;background:var(--fill);border:1.5px solid var(--border-h);border-radius:100px;padding:16px 22px;font-size:1rem} .dm-ico{opacity:.5} .dm-caret{width:2px;height:19px;background:var(--purple);animation:dmBlink 1s steps(1) infinite} @keyframes dmBlink{50%{opacity:0}} .dm-msg{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px} .dm-av{width:38px;height:38px;border-radius:11px;flex-shrink:0} .dm-bubble{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;padding:13px 17px;font-size:.9rem;line-height:1.6;color:var(--text);max-width:80%} .dm-opts{display:flex;gap:10px;padding-left:50px;flex-wrap:wrap} .dm-opt{padding:9px 16px;border:1px solid var(--border-h);border-radius:100px;font-size:.83rem;color:var(--t2)} .dm-opt-on{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.5);color:var(--purple-t2)} .dm-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .dm-card{border-radius:14px;padding:16px 18px} .dm-diy{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.02));border:1.5px solid rgba(16,185,129,.28)} .dm-pro{background:linear-gradient(135deg,rgba(var(--pro-rgb),.1),rgba(var(--pro-rgb),.02));border:1.5px solid rgba(var(--pro-rgb),.3)} .dm-card-t{font-size:.78rem;font-weight:700;margin-bottom:8px} .dm-diy .dm-card-t{color:var(--green)} .dm-pro .dm-card-t{color:var(--pro-t)} .dm-card-p{font-size:1.6rem;font-weight:900;letter-spacing:-.5px} .dm-card-l{font-size:.74rem;color:var(--t3);margin-top:3px} /* Reco de la demo : calquee sur l'ecran final. Le lisere et le titre prennent la couleur du camp recommande — ici l'ambre du verdict mixte, comme .reco-mix sur les resultats ; l'intitule « Recommandation de Tom » reste gris. */ .dm-reco{position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--border-h);border-radius:14px;padding:13px 15px 13px 18px} .dm-reco::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber)} .dm-reco-head{display:flex;align-items:center;gap:9px;margin-bottom:7px} .dm-reco-av{width:30px;height:30px;border-radius:9px;flex-shrink:0} .dm-reco-kicker{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3)} .dm-reco-verdict{font-size:1.02rem;font-weight:800;letter-spacing:-.2px;color:var(--amber-t)} .dm-reco-sub{font-size:.82rem;color:var(--t2);line-height:1.5;margin-top:4px} /* Section « Exemples chiffres » : carrousel vitrine. La carte centrale est nette, ses voisines restent visibles mais estompees — on voit d'un coup d'oeil qu'il y a d'autres exemples a cote. Les montants affiches sont ceux que le prototype calcule reellement (MATS + TOOLS + aleas / PRICING.pro), pas des chiffres d'illustration : si le chiffrage bouge, ils bougent aussi. */ .exs{padding:80px 0 84px;border-top:1px solid var(--border);scroll-margin-top:72px;overflow:hidden} .exs .sec-head{padding:0 24px} /* Les cartes voisines s'estompent avant le bord de l'ecran plutot que d'y etre tranchees net : le masque fait le meme travail que le fondu bas/haut de l'ecran de demo plus haut. */ /* user-select:none : sans lui, glisser d'un bord a l'autre surligne tout le texte des cartes au lieu de les faire defiler. */ .exs-viewport{overflow:hidden;padding:8px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)} .exs-viewport.dragging{cursor:grabbing} /* Pendant le glisser, le rail suit le doigt sans amortissement. */ .exs-viewport.dragging .exs-track{transition:none} .exs-track{display:flex;gap:26px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform} /* Chaque carte est batie en T : un en-tete pleine largeur (le projet), puis deux colonnes separees par un trait vertical. Chaque colonne porte son propre bouton, aligne en bas — d'ou le margin-top:auto sur .ex-cta. */ .ex-card{flex:0 0 700px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;opacity:.3;transform:scale(.94);transition:opacity .45s ease,transform .45s ease,border-color .2s} .ex-card.on{opacity:1;transform:none;border-color:var(--border-h);box-shadow:var(--shadow-screen)} .ex-body{flex:1;display:grid;grid-template-columns:1fr 1fr} .ex-col{display:flex;flex-direction:column;padding:20px 22px;transition:background .25s ease} .ex-col + .ex-col{border-left:1px solid var(--border)} /* Colonne gauche : l'extrait de conversation avec Tom. */ .ex-col:first-child{background:var(--fill-faint)} /* Survol d'une moitie : elle « s'avance ». Le relief est porte par le CONTENU et non par la colonne elle-meme — la carte est en overflow:hidden, un deplacement de la colonne serait rogne par ses bords arrondis. */ .ex-card.on .ex-col:hover{background:var(--fill-h)} .ex-card.on .ex-col:hover .ex-chat, .ex-card.on .ex-col:hover .ex-fiche, .ex-card.on .ex-col:hover .ex-cta{transform:translateY(-4px)} .ex-card.on .ex-col:hover .ex-cta{border-color:var(--purple);color:var(--purple-t);box-shadow:0 6px 18px rgba(139,92,246,.16)} /* Les deux moities demarrent en haut : la fiche, plus courte que la conversation, serait sinon centree — donc decalee vers le bas. */ .ex-chat{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;flex:1;transition:transform .28s cubic-bezier(.4,0,.2,1)} .ex-fiche{display:flex;flex-direction:column;gap:14px;justify-content:flex-start;flex:1;transition:transform .28s cubic-bezier(.4,0,.2,1)} .ex-you{align-self:flex-end;max-width:88%;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);border-radius:14px;border-top-right-radius:4px;padding:11px 15px;font-size:.85rem;line-height:1.55;color:var(--text)} .ex-msg{display:flex;gap:10px;align-items:flex-start} .ex-av{width:30px;height:30px;border-radius:9px;flex-shrink:0} .ex-bubble{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;padding:11px 14px;font-size:.84rem;line-height:1.55;color:var(--text)} /* Barre du T : l'en-tete du projet, sur toute la largeur de la carte. */ .ex-head{display:flex;gap:12px;align-items:center;justify-content:center;padding:16px 22px;border-bottom:1px solid var(--border)} .ex-emo{width:42px;height:42px;border-radius:13px;background:var(--fill);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0} .ex-title{font-size:1.05rem;font-weight:800;letter-spacing:-.2px} .ex-meta{font-size:.76rem;color:var(--t3);margin-top:2px} .ex-verdict{position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 14px 11px 17px} .ex-verdict::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber)} .ex-verdict.v-diy::before{background:var(--green)} .ex-verdict.v-pro::before{background:var(--pro)} .ex-verdict-k{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:4px} .ex-verdict strong{font-size:.95rem;font-weight:800;color:var(--amber-t)} .ex-verdict.v-diy strong{color:var(--green-t)} .ex-verdict.v-pro strong{color:var(--pro-t)} .ex-prices{display:flex;flex-direction:column;gap:9px} .ex-price{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:11px 14px;font-size:.78rem;font-weight:700} .ex-price b{font-size:.95rem;font-weight:900;letter-spacing:-.3px;white-space:nowrap;color:var(--text)} .ex-diy{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.02));border:1.5px solid rgba(16,185,129,.28);color:var(--green-t)} .ex-pro{background:linear-gradient(135deg,rgba(var(--pro-rgb),.1),rgba(var(--pro-rgb),.02));border:1.5px solid rgba(var(--pro-rgb),.3);color:var(--pro-t)} /* Meme reflet + onde que « Se connecter », mais dans le violet deja present sur ces cartes : le bouton est clair, un reflet blanc ne s'y verrait pas. */ .ex-cta{position:relative;overflow:hidden;margin-top:16px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--border-h);background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 0 0 0 rgba(139,92,246,.4);transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .2s,color .2s,box-shadow .55s ease} .ex-cta::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(139,92,246,.32),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.4,0,.2,1);pointer-events:none} .ex-cta:hover::after{left:130%} /* Meme poids de selecteur que la regle de survol de colonne juste au-dessus, mais declaree apres : l'onde s'ajoute a l'ombre au lieu d'etre ecrasee. */ .ex-card.on .ex-col .ex-cta:hover{box-shadow:0 6px 18px rgba(139,92,246,.16),0 0 0 10px rgba(139,92,246,0)} /* Navigation sous le carrousel : pas de fleches, on attrape et on fait glisser (curseur « main »). Les pastilles restent, elles disent ou on en est et servent d'acces direct — y compris au clavier. */ .exs-nav{display:flex;align-items:center;justify-content:center;margin-top:30px} .exs-dots{display:flex;align-items:center;gap:8px} .exs-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--border-h);cursor:pointer;transition:width .25s ease,background .25s ease} .exs-dot.on{width:24px;border-radius:100px;background:var(--grad)} /* Section Avis (exemples, en attendant les vrais avis verifies) */ .avis{padding:80px 24px;border-top:1px solid var(--border);scroll-margin-top:72px} .avis-flag{display:inline-block;margin-top:18px;font-size:.8rem;color:var(--t2);background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.28);border-radius:100px;padding:9px 18px;line-height:1.5} .avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1020px;margin:0 auto} .avis-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s} .avis-card:hover{border-color:var(--border-h)} .avis-stars{color:var(--star);font-size:1rem;letter-spacing:3px} .avis-star-off{color:var(--t3)} .avis-txt{font-size:.92rem;line-height:1.7;color:var(--text);flex:1} .avis-foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .avis-av{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.9rem;flex-shrink:0} .avis-who{min-width:0} .avis-name{font-size:.86rem;font-weight:700} .avis-proj{font-size:.76rem;color:var(--t3)} .avis-badge{font-size:.68rem;font-weight:700;color:var(--green-t);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);border-radius:100px;padding:4px 9px;margin-left:auto;white-space:nowrap} /* Seconde serie d'avis : on n'en montre que le haut, estompe par un masque — le meme procede que l'ecran de demo et le carrousel, qui laisse voir le fond de page au lieu de le recouvrir d'un degrade opaque. La hauteur repliee est volontairement genereuse : elle doit laisser apparaitre les etoiles et le debut du texte, jamais une carte entiere. */ .avis-extra{margin-top:18px;overflow:hidden;max-height:132px;transition:max-height .5s cubic-bezier(.4,0,.2,1);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)} .avis-extra.deplie{max-height:1200px;-webkit-mask-image:none;mask-image:none} .avis-more{display:flex;justify-content:center;margin-top:22px} @media(prefers-reduced-motion:reduce){.avis-extra{transition:none}} /* Section FAQ (accordeon natif
) */ .faq{padding:80px 24px;border-top:1px solid var(--border);scroll-margin-top:72px} .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s} .faq-item[open]{border-color:var(--border-h)} .faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:.95rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:1.5rem;font-weight:300;line-height:1;color:var(--t2);transition:transform .2s;flex-shrink:0} .faq-item[open] summary::after{transform:rotate(45deg)} /* La reponse se deplie au lieu d'apparaitre d'un bloc. La hauteur est animee par app.js ; le padding vit dans .faq-a-in et non ici, sinon la boite ne pourrait pas descendre sous sa hauteur (le projet est en border-box, ou `height` englobe les marges interieures). */ .faq-a{overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1),opacity .3s ease} .faq-a-in{padding:0 22px 20px;font-size:.9rem;color:var(--t2);line-height:1.7} .faq-item summary::after{transition:transform .34s cubic-bezier(.4,0,.2,1)} @media(prefers-reduced-motion:reduce){.faq-a{transition:none}} /* Footer riche */ .foot{border-top:1px solid var(--border);background:var(--surface);padding:56px 32px 28px} /* Quatre colonnes de meme largeur. La colonne de marque etait plus large (1.7fr) du temps ou elle portait la baseline ; sans elle, ce surplus ne laissait qu'un grand vide. */ .foot-top{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px} .foot-brand .logo{margin-bottom:16px} /* Sous le logo : les liens sur l'entreprise elle-meme, puis les reseaux. Meme apparence que les liens des colonnes, sans intitule au-dessus. */ .foot-brand-links{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px} .foot-brand-links a{font-size:.86rem;color:var(--t2);text-decoration:none;margin-bottom:10px;cursor:pointer} .foot-socials{display:flex;gap:14px;margin-top:2px} .foot-social{color:var(--t3);display:inline-flex;transition:color .15s} .foot-social:hover{color:var(--text)} .foot-social svg{width:20px;height:20px;display:block} /* Au survol, l'icone fait un tour complet sur elle-meme : c'est le mouvement seul qui signale le lien, rien n'est dessine autour. */ .foot-social:hover svg{animation:pivotSocial .6s cubic-bezier(.6,0,.2,1)} @keyframes pivotSocial{from{transform:rotate(0)}to{transform:rotate(360deg)}} .foot-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:14px;font-weight:700} .foot-col a{display:block;font-size:.86rem;color:var(--t2);text-decoration:none;margin-bottom:10px;cursor:pointer} /* Survol des liens du pied de page : une pastille aux couleurs de la marque BALAIE derriere le mot — elle entre par la gauche, puis ressort par la droite quand la souris s'en va (l'origine de la mise a l'echelle bascule). `width:max-content` borne la pastille au mot : sans lui, elle prendrait toute la largeur de la colonne. */ .foot-col a, .foot-brand-links a{position:relative;z-index:0;width:max-content;max-width:100%;padding:3px 9px;margin-left:-9px;border-radius:7px;transition:color .25s} .foot-col a::before, .foot-brand-links a::before{content:'';position:absolute;inset:0;border-radius:7px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.6,0,.2,1);z-index:-1} .foot-col a:hover, .foot-brand-links a:hover{color:#fff} .foot-col a:hover::before, .foot-brand-links a:hover::before{transform:scaleX(1);transform-origin:left} .foot-soon{display:block;font-size:.76rem;color:var(--t3);margin-top:4px} /* Les liens legaux ont leur propre colonne au-dessus : le bas de page ne porte plus que la mention de copyright, donc centree. */ .foot-bottom{max-width:1080px;margin:32px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap} .foot-bottom span{font-size:.8rem;color:var(--t3);text-align:center;line-height:1.7} /* ================================ CHAT ================================ */ /* Le chat occupe exactement l'ecran : le fil se remplit par le bas et defile, au lieu de laisser un vide sous la conversation. */ #view-chat{height:100vh;height:100dvh} .chat-layout{flex:1;min-height:0;display:grid;grid-template-columns:260px 1fr;gap:22px;max-width:1080px;width:100%;margin:0 auto;padding:22px 22px 18px} .chat-side .scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:12px} .scard-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--t3);margin-bottom:8px;font-weight:700} .data-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:.8rem} .data-key{color:var(--t2)} .data-val{color:var(--text);font-weight:600;text-align:right;max-width:120px} .pstep{display:flex;align-items:center;gap:9px;font-size:.79rem;color:var(--t3);margin-bottom:8px;transition:color .2s} .pstep.done{color:var(--t2)} .pstep.active{color:var(--text);font-weight:600} .pdot{width:20px;height:20px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--t3);display:flex;align-items:center;justify-content:center;font-size:.63rem;flex-shrink:0;transition:all .2s} .pstep.done .pdot{background:var(--green);border-color:var(--green);color:#fff} .pstep.active .pdot{background:var(--grad);border-color:transparent;color:#fff} .chat-main{display:flex;flex-direction:column;min-height:0} .chat-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent} /* Ancre le fil en bas : peu de messages = colles en bas, puis ils remontent. Une marge auto sur un pseudo-element plutot que justify-content:flex-end, qui rendrait les premiers messages inaccessibles une fois le fil rempli. */ .chat-msgs::before{content:'';margin-top:auto} .msg-wrap{display:flex;gap:10px;align-items:flex-start;animation:fadeIn .25s ease} .msg-wrap.user{flex-direction:row-reverse} .ai-av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;color:#fff;overflow:hidden} .ai-av img{width:100%;height:100%;object-fit:cover} .bubble{max-width:76%;padding:12px 16px;border-radius:16px;font-size:.88rem;line-height:1.7} .bubble.ai{background:var(--surface);border:1px solid var(--border);border-top-left-radius:3px} .bubble.user{background:var(--grad);color:#fff;border-top-right-radius:3px} .chat-inp-area{padding:14px 0 0;border-top:1px solid var(--border);flex-shrink:0} /* La barre du bas ne sert qu'a la saisie libre : invisible quand inutile. */ .chat-inp-area:empty{display:none} /* Les propositions vivent dans le fil, alignees sous la bulle (32px d'avatar + 10px de gouttiere), empilees comme les reponses rapides d'un chatbot. */ .opts-wrap{padding-left:42px} .chat-opts{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .opt{padding:9px 16px;background:var(--surface);border:1px solid var(--border);border-radius:100px;cursor:pointer;font-size:.84rem;color:var(--text);font-family:inherit;text-align:left;transition:all .15s} .opt:hover{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4);color:var(--purple-t2)} .chat-row{display:flex;gap:9px} /* « En train d'ecrire… » */ .bubble.typing{display:flex;gap:5px;align-items:center;padding:15px 16px} .bubble.typing span{width:7px;height:7px;border-radius:50%;background:var(--t3);animation:blink 1.3s infinite} .bubble.typing span:nth-child(2){animation-delay:.18s} .bubble.typing span:nth-child(3){animation-delay:.36s} @keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* ================================ RESULTS ================================ */ .res-header{background:var(--surface);border-bottom:1px solid var(--border);padding:24px 0} /* Contenu du bandeau aligne sur le meme conteneur centre que la nav et le corps de page : le libelle (« Ton projet », etc.) tombe sur le meme bord gauche que le logo au-dessus et les cartes en dessous. La bande reste pleine largeur. */ .hdr-inner{width:100%;max-width:1060px;margin:0 auto;padding:0 40px} .res-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:5px} .res-title{font-size:1.4rem;font-weight:800} .res-body{flex:1;max-width:1060px;width:100%;margin:0 auto;padding:32px 40px} .res-cta-lbl{font-size:.84rem;color:var(--t2);text-align:center;margin-bottom:20px} .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px} .rcard{border-radius:18px;padding:28px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden} .rcard:hover{transform:translateY(-4px)} .rcard.diy{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02));border:1.5px solid rgba(16,185,129,.22)} .rcard.diy:hover{border-color:rgba(16,185,129,.45);box-shadow:0 20px 48px rgba(16,185,129,.12)} .rcard.pro{background:linear-gradient(135deg,rgba(var(--pro-rgb),.09),rgba(var(--pro-rgb),.02));border:1.5px solid rgba(var(--pro-rgb),.25)} .rcard.pro:hover{border-color:rgba(var(--pro-rgb),.45);box-shadow:0 20px 48px rgba(var(--pro-rgb),.12)} .rcard-type{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px} .rcard.diy .rcard-type{color:var(--green)} .rcard.pro .rcard-type{color:var(--pro-t)} /* Le prix porte la couleur de son camp. Ces deux regles vivent ici et non en style inline dans index.html : sinon la couleur ne suit pas le theme. */ .rcard-price{font-size:2.2rem;font-weight:900;letter-spacing:-1px;margin-bottom:4px} .rcard.diy .rcard-price{color:var(--green-t)} .rcard.pro .rcard-price{color:var(--pro-t)} .rcard-plbl{font-size:.79rem;color:var(--t2);margin-bottom:20px} .rcard-feats{display:flex;flex-direction:column;gap:8px;margin-bottom:22px} .rfeat{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;color:var(--t2);line-height:1.5} .rfeat>span:first-child{flex-shrink:0} .rcard-cta{display:flex;align-items:center;justify-content:space-between} .rcard-hint{font-size:.78rem;color:var(--t3)} .rcard-arrow{font-size:1rem;transition:transform .2s} .rcard:hover .rcard-arrow{transform:translateX(4px)} /* Recommandation KitHom : verdict transparent en tete des resultats. Barre d'accent a gauche (vert=DIY, violet=PRO, ambre=mixte) ; chaque argument porte une pastille de la couleur du camp qu'il sert. */ .reco{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border-h);border-radius:16px;padding:20px 22px 20px 26px;margin-bottom:24px} .reco::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px} .reco-diy::before{background:var(--green)} .reco-pro::before{background:var(--pro)} .reco-mix::before{background:var(--amber)} .reco-head{display:flex;align-items:center;gap:10px;margin-bottom:9px} .reco-av{width:34px;height:34px;border-radius:10px;flex-shrink:0} .reco-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3)} .reco-verdict{font-size:1.25rem;font-weight:900;letter-spacing:-.3px} .reco-diy .reco-verdict{color:var(--green-t)} .reco-pro .reco-verdict{color:var(--pro-t)} .reco-mix .reco-verdict{color:var(--amber-t)} .reco-sub{font-size:.83rem;color:var(--t2);line-height:1.6;margin:5px 0 14px} .reco-reasons{display:flex;flex-direction:column;gap:9px} .reco-reason{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--t2);line-height:1.55} .reco-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px} .reco-reason.diy .reco-dot{background:var(--green)} .reco-reason.pro .reco-dot{background:var(--pro)} .comp-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.85rem} .comp-row:last-child{border-bottom:none} .comp-lbl{color:var(--t3);font-weight:600;font-size:.8rem} .comp-diy{color:var(--green-t2)} .comp-pro{color:var(--pro-t)} /* ================================ DIY DETAIL ================================ */ .det-hero{background:var(--surface);border-bottom:1px solid var(--border);padding:28px 0} .det-hero-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px} .det-price{font-size:1.9rem;font-weight:900} .det-body{flex:1;max-width:1060px;width:100%;margin:0 auto;padding:24px 40px} .tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px} .tab{padding:10px 18px;font-size:.875rem;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .tab.active{color:var(--purple);border-bottom-color:var(--purple)} .tc{display:none} .tc.active{display:block;animation:fadeIn .2s ease} .mtable{width:100%;border-collapse:collapse;font-size:.85rem} .mtable th{padding:9px 13px;text-align:left;color:var(--t3);font-size:.73rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);font-weight:700} .mtable td{padding:12px 13px;border-bottom:1px solid var(--border-soft);vertical-align:middle} .mtable tr:last-child td{border-bottom:none} .mtable tr:hover td{background:var(--fill-faint)} .mtable tfoot td{padding-top:12px;border-top:1px solid var(--border);border-bottom:none;font-weight:700;font-size:.9rem} .store-a{color:var(--cyan);font-size:.76rem;text-decoration:none;font-weight:600} .store-a:hover{text-decoration:underline} .tip-card{display:flex;gap:12px;background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.18);border-radius:10px;padding:14px;margin-bottom:9px} .tip-ico{font-size:1rem;flex-shrink:0;margin-top:1px} .tip-txt{font-size:.84rem;color:var(--t2);line-height:1.65} /* ================================ PRO LIST ================================ */ .pros-hdr{background:var(--surface);border-bottom:1px solid var(--border);padding:24px 0} /* Meme fourchette que la carte PRO de l'ecran precedent : meme couleur. */ .pros-range{font-size:1.2rem;font-weight:800;color:var(--pro-t)} .pros-body{flex:1;max-width:1060px;width:100%;margin:0 auto;padding:24px 40px} .pros-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .procard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:12px;display:flex;align-items:center;gap:18px;transition:border-color .2s,box-shadow .2s} .procard:hover{border-color:var(--border-h);box-shadow:var(--shadow-card)} .pro-av{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;flex-shrink:0} .pro-info{flex:1} .pro-name{font-weight:700;font-size:.97rem;margin-bottom:2px} .pro-spec{font-size:.79rem;color:var(--t2);margin-bottom:7px} .pro-btags{display:flex;gap:6px;flex-wrap:wrap} .pro-stats{text-align:right;flex-shrink:0} .pro-price{font-size:1.1rem;font-weight:800} .pro-plbl{font-size:.72rem;color:var(--t3);margin-top:1px} .pro-rat{font-size:.78rem;color:var(--t2);margin-top:7px} .pro-acts{display:flex;gap:7px;flex-direction:column;flex-shrink:0} /* Recapitulatif budget DIY */ .bud-title{font-size:.95rem;font-weight:700;margin-bottom:14px} .bud-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:.88rem;color:var(--t2)} .bud-row span:last-child{font-weight:600;color:var(--text);white-space:nowrap} .bud-sub{border-top:1px solid var(--border);color:var(--text);font-weight:600} .bud-total{border-top:2px solid var(--border-h);margin-top:4px;font-size:1rem;font-weight:800;color:var(--text)} .bud-total span:last-child{font-size:1.05rem;font-weight:800} .bud-warn{margin-top:12px;padding:10px 12px;border-radius:9px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);font-size:.79rem;color:var(--t2);line-height:1.5} /* Bandeau « donnees fictives » sur la liste des artisans */ .demo-warn{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;padding:14px 16px;border-radius:var(--r);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35)} .demo-warn-ico{font-size:1.1rem;line-height:1.5;flex-shrink:0} .demo-warn p{font-size:.84rem;line-height:1.65;color:var(--t2)} .demo-warn strong{color:var(--text)} /* Projet non couvert */ .cov-list{margin:10px 0 0;padding-left:20px;line-height:1.9} .chat-note{margin-top:10px;font-size:.75rem;color:var(--t3);line-height:1.5} /* Responsive */ @media(max-width:760px){ .chat-layout{grid-template-columns:1fr} .chat-side{display:none} .opts-wrap{padding-left:0} .chat-opts{align-items:stretch} .res-grid{grid-template-columns:1fr} .nav{padding:0 16px} .nav-center{display:none} .how{padding:56px 18px} .how-cols{grid-template-columns:1fr;gap:48px} .avis{padding:56px 18px} .avis-grid{grid-template-columns:1fr} /* Carrousel d'exemples : une carte quasi pleine largeur, en une seule colonne. */ .exs{padding:56px 0 60px} .exs .sec-head{padding:0 18px} .exs-track{gap:16px} /* Le T se deplie : l'en-tete reste en haut, les deux colonnes s'empilent. */ .ex-card{flex:0 0 86vw} .ex-body{grid-template-columns:1fr} .ex-col{padding:18px} .ex-col + .ex-col{border-left:0;border-top:1px solid var(--border)} .faq{padding:56px 18px} .foot{padding:44px 18px 24px} .foot-top{grid-template-columns:1fr 1fr;gap:28px} .foot-brand{grid-column:1 / -1} .hero{padding:44px 18px 54px} .hero-title{letter-spacing:-.8px} .home-stats{gap:24px 28px;padding:24px 18px} .res-body,.det-body,.pros-body{padding-left:18px;padding-right:18px} .hdr-inner,.nav-app .nav-inner{padding-left:18px;padding-right:18px} .nav-tag{display:none} .procard{flex-wrap:wrap} .pro-acts{flex-direction:row;width:100%} .comp-row{grid-template-columns:110px 1fr 1fr;font-size:.8rem} }