/* ============================================================
OPTERIA — DA façon gleap.ai (04/10/2026, demande Maxime : « la même DA que gleap.ai »). Aperçu, non publiée.
Couche chargée après da.css et da-recnote.css : elle remplace la palette, la police, les boutons, le menu,
les cartes, le chat et le pied de page. Pour revenir en arrière : retirer le vers ce fichier dans les pages
(et remettre l'ancien premier écran gardé dans outils/ancien-hero-liquid-glass.html).
Repères relevés sur gleap.ai : police Switzer graisse 400 partout, fond crème #f6f6f3, ciel sombre #191919 en tête
d'accueil, boutons pilule, cartes pastel plates à 20 px, maquettes posées sur une peinture fluide bleu-rose, titres
en deux tons (foncé puis gris), pied de page en grande carte avec liseré dégradé.
Police libre (licence ITF Free Font, usage commercial autorisé) : Switzer variable, auto-hébergée (fonts/).
============================================================ */
@font-face { font-family: "Switzer"; font-weight: 100 900; font-style: normal; src: url("fonts/switzer-variable.woff2") format("woff2"); font-display: swap; }
:root {
--ink: #292929; --ink-2: #6f6f6c; --ink-3: #8e8e8a; --texte: #353535;
--paper: #fff; /* tout le site sur fond blanc pur, plus de crème (04/10, demande Axel) */ --paper-2: #edede8; --card: #fff; --line: rgba(0,0,0,.12); --line-2: rgba(0,0,0,.16);
--sombre: #191919; --on-dark: #fff; --on-dark-2: rgba(255,255,255,.7); --on-dark-3: rgba(255,255,255,.5); --line-dark: rgba(255,255,255,.15); --dark-2: #191919;
--font: "Switzer", Arial, sans-serif; --serif: "Switzer", Arial, sans-serif;
--wrap: 1128px; --gutter: 24px; --r: 20px; --r-sm: 12px;
--g-100: #edede8; --g-150: #dbdbd2; --g-200: #d0d0c8;
--pastel-gris: #f1f0f2; --pastel-bleu: #e0f3fc; --pastel-lilas: #f0e1fb; --pastel-peche: #fff0d9;
--peinture: url("assets/da/peinture-douce.webp"); --peinture-2: url("assets/da/peinture-rubans.webp"); --peinture-3: url("assets/da/peinture-orange.webp");
--lisere: linear-gradient(90deg, #3f7fd8 0%, #7aa2e6 22%, #c9a6e8 42%, #f0a7c4 58%, #f5b98d 74%, #8cc48a 100%);
}
body { background: var(--paper); color: var(--texte); font-family: var(--font); line-height: 1.5; }
/* Typographie : tout en 400, titres serrés, deuxième phrase en gris -------------------------------- */
h1, h2, .d, .h, .titre { font-weight: 400; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); }
h3, .h3, .parcours__txt h3, .agenda-card__titre, .cta__txt, .brands__label { font-weight: 400; letter-spacing: -.02em; }
.d { font-size: clamp(36px, 4.1vw, 56px); line-height: 1.12; letter-spacing: -.025em; }
.hero__titre { font-size: clamp(34px, 3.9vw, 54px); }
.h { font-size: clamp(30px, 2.9vw, 40px); line-height: 1.2; }
.h3 { font-size: 23px; line-height: 1.2; }
h1 em, h1 b, h1 strong, .d em, .h em, .d b, .h b { font-weight: 400; }
.g, h1 .g, .h .g, .d .g { color: rgba(41,41,41,.5); }
.dark .g { color: var(--on-dark-3); }
.meta { font-size: 14px; font-weight: 500; letter-spacing: .015em; color: var(--ink-2); }
.p, .hero .p, .page-hero .p { color: rgba(53,53,53,.72); font-size: 18px; line-height: 1.5; }
.small { color: rgba(53,53,53,.72); line-height: 1.5; }
.bobby { color: inherit; }
.trait-orange svg { display: none; }
.g .trait-orange { color: inherit; }
/* Boutons pilule : noir sur clair, blanc sur sombre ; secondaire gris chaud -------------------------- */
.btn.btn:not(.nav__cta), .cta .btn.btn:not(.nav__cta) { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 400; letter-spacing: 0; border: 0; border-radius: 200px; background: #191919; color: #fff; box-shadow: none; filter: none; transform: none; transition: background .2s ease, color .2s ease; }
.btn.btn:not(.nav__cta):hover, .cta .btn.btn:not(.nav__cta):hover { background: #3a3a3a; color: #fff; filter: none; transform: none; box-shadow: none; }
.btn.btn--sm:not(.nav__cta) { height: 36px; padding: 0 18px; font-size: 14px; }
.btn.btn--ghost:not(.nav__cta), .cta .btn.btn--ghost:not(.nav__cta) { background: var(--g-150); color: var(--ink); box-shadow: none; }
.btn.btn--ghost:not(.nav__cta):hover, .cta .btn.btn--ghost:not(.nav__cta):hover { background: var(--g-200); color: var(--ink); }
.hero--gleap .btn.btn:not(.nav__cta), .dark .btn.btn:not(.nav__cta) { background: #fff; color: #191919; }
.hero--gleap .btn.btn:not(.nav__cta):hover, .dark .btn.btn:not(.nav__cta):hover { background: #e9e9e6; color: #191919; }
.hero--gleap .btn.btn--ghost:not(.nav__cta), .dark .btn.btn--ghost:not(.nav__cta) { background: #353535; color: #fff; }
.hero--gleap .btn.btn--ghost:not(.nav__cta):hover, .dark .btn.btn--ghost:not(.nav__cta):hover { background: #474747; color: #fff; }
.form-card .btn.btn:not(.nav__cta) { height: auto; min-height: 48px; padding: 12px 24px; }
.actions { gap: 8px; }
/* Menu : barre collante pleine largeur, logo à gauche, liens au centre, pilule à droite (sombre sur l'accueil) */
.nav { position: sticky; top: 0; z-index: 100; margin: 0; padding: 0; pointer-events: auto; background: rgba(255,255,255,.62); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease; }
.nav.is-scrolled { border-bottom-color: rgba(0,0,0,.06); }
.nav + * { border-top: 0; }
.nav__in, html.js .nav__in { max-width: var(--wrap); height: 64px; margin: 0 auto; padding: 0 var(--gutter); gap: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
.nav__logo svg, .nav__logo img { height: 24px; }
.nav__logo .mot { fill: #191919; transition: fill .3s ease; }
.nav__logo .sigle > g { stroke: #191919; transition: stroke .3s ease; } /* tête de Bobby de la couleur du mot, plus d'orange (04/10, demande Maxime) */
.nav__menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; gap: 2px; font-size: 15px; font-weight: 400; color: var(--ink); }
.nav__menu a, .nav__in > .nav__lien { padding: 7px 13px; border-radius: 200px; line-height: 20px; color: inherit; transition: background .2s ease, color .2s ease; }
.nav__menu a:hover, .nav__in > .nav__lien:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.nav__in > .nav__lien { margin-left: auto; margin-right: 8px; font-size: 15px; font-weight: 400; color: var(--ink); }
.nav__in > .btn.nav__cta { height: 40px; padding: 0 18px; gap: 0; font-size: 15px; font-weight: 400; color: #fff; background: #191919; border: 0; border-radius: 200px; box-shadow: none; isolation: auto; transition: background .2s ease, color .2s ease; }
.nav__in > .btn.nav__cta::before, .nav__in > .btn.nav__cta::after { display: none; }
.nav__in > .btn.nav__cta:hover { background: #3a3a3a; }
.nav__burger { color: var(--ink); }
@media (max-width: 1240px) { .nav__menu { position: absolute; transform: translate(-50%, -50%); flex: none; } }
/* accueil : le menu se fond dans le ciel sombre, puis redevient clair une fois le premier écran passé (script.js) */
.accueil .nav:not(.is-clair) { background: rgba(25,25,25,.55); border-bottom-color: transparent; } /* menu plus transparent : on devine ce qui passe derrière (04/10, demande Maxime) */
.accueil .nav:not(.is-clair):not(.is-scrolled) { background: #191919; } /* en arrivant sur la page, avant tout défilement : noir plein, du même noir que le ciel */
.accueil .nav:not(.is-clair) .nav__logo .mot { fill: #fff; }
.accueil .nav:not(.is-clair) .nav__logo .sigle > g { stroke: #fff; }
.accueil .nav:not(.is-clair) .nav__menu, .accueil .nav:not(.is-clair) .nav__in > .nav__lien, .accueil .nav:not(.is-clair) .nav__burger { color: #fff; }
.accueil .nav:not(.is-clair) .nav__menu a:hover, .accueil .nav:not(.is-clair) .nav__in > .nav__lien:hover { color: #fff; background: rgba(255,255,255,.1); }
.accueil .nav:not(.is-clair) .nav__in > .btn.nav__cta { background: #fff; color: #191919; }
.accueil .nav:not(.is-clair) .nav__in > .btn.nav__cta:hover { background: #e9e9e6; }
@media (max-width: 960px) {
.nav { padding: 0; margin-bottom: 0; }
.nav + * { border-top-width: 0; }
.nav__in, html.js .nav__in { height: 60px; padding: 0 20px; border-radius: 0; flex-wrap: nowrap; }
.nav__logo { height: 60px; align-items: center; }
.nav__logo svg { height: 22px; }
.nav__burger { position: relative; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; border-radius: 50%; background: none; color: inherit; }
.nav__burger::before, .nav__burger::after { left: 11px; width: 22px; height: 1.5px; background: currentColor; }
.nav__burger::before { top: 17px; } .nav__burger::after { top: 25px; }
.nav.is-open .nav__burger::before, .nav.is-open .nav__burger::after { top: 21px; left: 12px; width: 20px; }
.nav.is-open { height: 60px; }
.nav.is-open .nav__in { position: absolute; left: 0; right: 0; top: 0; height: auto; padding: 0 20px 28px; border-radius: 0; flex-wrap: wrap; align-content: flex-start; background: var(--paper); box-shadow: none; }
.nav.is-open .nav__menu { position: static; transform: none; flex: 0 0 100%; width: 100%; order: 3; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 8px 0 0; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.nav.is-open .nav__menu > a { padding: 14px 0; line-height: 1.2; border-radius: 0; border-bottom: 1px solid var(--line); }
.nav.is-open .nav__menu > a:hover { background: none; }
.nav.is-open .nav__menu .nav__cta-mobile, .nav--sombre.is-open .nav__cta-mobile { display: flex; justify-content: center; align-items: center; align-self: stretch; height: 48px; margin-top: 22px; padding: 0 24px; border: 0; border-radius: 200px; background: #191919; color: #fff; font-size: 16px; font-weight: 400; isolation: auto; }
.nav.is-open .nav__menu .nav__cta-mobile::before, .nav.is-open .nav__menu .nav__cta-mobile::after { display: none; }
.accueil .nav.is-open:not(.is-clair) .nav__in { background: #191919; }
.accueil .nav.is-open:not(.is-clair) .nav__menu { color: #fff; }
.accueil .nav.is-open:not(.is-clair) .nav__menu > a { border-bottom-color: rgba(255,255,255,.14); }
.accueil .nav.is-open:not(.is-clair) .nav__menu .nav__cta-mobile { background: #fff; color: #191919; }
}
/* Premier écran de l'accueil : voir da-hero-etoiles.css (13/10/2026) ; l'ancienne version est dans outils/ancien-hero-etoiles.html */
/* Logos clients : dans le prolongement du ciel, phrase à gauche, logos blancs qui défilent ------------- */
.brands--hero, .accueil .brands--hero { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 40px; max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 56px; background: #191919; position: relative; isolation: isolate; }
/* fond noir sur toute la largeur, remonté d'1 px sous le haut de page : l'ancien procédé (ombre portée) laissait deux fines barres claires sur les côtés (05/10, demande Axel) */
.brands--hero::before { content: ""; position: absolute; z-index: -1; top: -1px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #191919; pointer-events: none; }
.brands--hero .brands__label { margin: 0; font-family: var(--font); font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-align: left; color: rgba(255,255,255,.7); }
.brands--hero .marquee { width: 100%; max-width: none; margin: 0; min-width: 0; }
.brands--hero .marquee__groupe { gap: 72px; padding-right: 72px; }
.brands--hero .marquee__track img, .brands--hero .marquee__track img:hover { filter: brightness(0) invert(1); opacity: .72; }
@media (max-width: 960px) {
.brands--hero, .accueil .brands--hero { grid-template-columns: 1fr; gap: 22px; padding: 16px var(--gutter) 40px; }
.brands--hero .brands__label { text-align: center; font-size: 14px; }
.brands--hero .marquee__groupe { gap: 48px; padding-right: 48px; }
}
/* Bobby au travail : la conversation animée posée sur une peinture fluide --------------------------- */
.sec.demo-gleap { padding: 48px 0 40px; background: var(--paper); color: #191919; } /* fond blanc uni, points reliés retirés (04/10, demande Axel) */ /* fond clair comme « Vos tâches, vos outils. », animé, passage net sous les logos sans dégradé (04/10, demande Maxime) */ /* espace réduit au-dessus de « Vous demandez. » (04/10, demande Maxime) : 128 → 72 px */
.demo-gleap__tete { max-width: 760px; margin: 0 auto; text-align: center; }
.demo-gleap__tete .h { color: #191919; }
.demo-gleap__tete .h .g { color: rgba(25,25,25,.45); }
.demo-gleap__tete .p { color: rgba(25,25,25,.66); }
.demo-gleap__tete .p { max-width: 640px; margin: 10px auto 0; }
.demo-gleap__toile { position: relative; margin-top: 32px; padding: 64px 24px; border-radius: var(--r); background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(38,58,92,.6), rgba(30,44,70,.22) 55%, rgba(17,19,24,0) 100%), #111318; display: flex; justify-content: center; overflow: hidden; } /* ciel étoilé derrière le chat, sur le bloc clair animé (04/10, demande Maxime) */
.sec.demo-gleap { position: relative; overflow: hidden; }
.demo-gleap__fond, .demo-gleap__ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.demo-gleap .chat-demo { position: relative; z-index: 1; }
.demo-gleap > .wrap { position: relative; z-index: 1; }
/* titre et phrase : les mots sortent du flou un à un, puis un reflet de lumière passe une fois sur « Bobby s’en occupe. » (04/10, demande Maxime) */
html.js .demo-gleap__tete .mot-ciel { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(10px); transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * .09s); }
html.js .demo-gleap__tete.is-in .mot-ciel { opacity: 1; filter: none; transform: none; }
.demo-gleap__tete .h .g .mot-ciel { background: linear-gradient(100deg, rgba(25,25,25,.45) 40%, #191919 50%, rgba(25,25,25,.45) 60%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes ciel-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.demo-gleap__tete.is-in .h .g .mot-ciel { animation: ciel-reflet 1.4s ease-in-out both; animation-delay: calc(1.2s + var(--i, 0) * .14s); } /* décalé mot par mot : le reflet traverse la phrase */
@media (prefers-reduced-motion: reduce) { html.js .demo-gleap__tete .mot-ciel { opacity: 1; filter: none; transform: none; transition: none; animation: none !important; } }
.demo-gleap .chat-demo { width: 100%; max-width: 760px; margin: 0; box-shadow: none; }
.demo-gleap__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 22px; font-size: 14px; color: rgba(25,25,25,.62); text-align: center; }
.demo-gleap__note i { width: 7px; height: 7px; border-radius: 50%; background: #4cc02b; }
@media (max-width: 960px) {
.sec.demo-gleap { padding: 40px 0 24px; }
.demo-gleap__toile { margin: 24px calc(var(--gutter) * -1) 0; padding: 28px 12px; border-radius: 0; }
}
/* Fenêtres d'interface : blanches, filet très fin, ombre douce (comme les maquettes de Gleap) ---------- */
.win, .chat-demo { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.08); }
.chat-demo .win__bar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); }
.chat-demo .win__qui { font-family: var(--font); font-size: 16px; font-weight: 500; }
.chat-demo .chat { background: #fff; }
.chat-demo .msg { font-size: 15px; border-radius: 14px; }
.chat-demo .msg--me { background: #191919; color: #fff; }
.chat-demo .msg--ai { background: #f3f3f0; border: 0; color: var(--texte); }
.chat-demo .msg--ai .liste div { background: #fff; border: 1px solid rgba(0,0,0,.07); }
.chat-demo .typing { background: #f3f3f0; border: 0; }
.chat-demo__cas { background: #fff; border-top: 1px solid rgba(0,0,0,.07); }
.chat-demo__cas i.on { background: #191919; }
.chat-demo .fait { background: rgba(76,192,43,.12); color: #2f7d1c; }
.chat-demo .outils i { border-color: rgba(0,0,0,.08); }
/* Sections : un seul fond crème, beaucoup d'air ------------------------------------------------------ */
.sec { padding: 120px 0; }
.cream, .page-hero.cream { background: var(--paper); }
.scene-wrap, .taches, .apprend, .parcours, .parcours--papier, .securite, .faq-bloc, .parler { background: var(--paper); }
/* « Vos tâches, vos outils. » : même fond clair animé que le bloc démo (points gris qui se relient), collé à l'écran pendant toute la scène (04/10, demande Maxime) */
.scene-fond { position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh; pointer-events: none; }
.scene-wrap > .scene { position: sticky; z-index: 1; }
.bulle__in { border-color: rgba(0,0,0,.08); box-shadow: none; font-weight: 400; }
.fils line { stroke: #292929; stroke-opacity: .28; }
.fils .pt { fill: #292929; }
.noeud__nom { font-weight: 500; }
.apres em { font-style: normal; color: var(--ink); }
/* « La même tâche, à la main et avec Bobby » : trois métiers en cartes grises façon gleap.ai (05/10/2026, demande Axel).
Même langage que la page Cerveau IA : carte grise à 24 px, cadre peint à 20 px (peinture toujours visible), fiche blanche à 16 px
qui joue sa scène en boucle. Le script pose e1, e2… sur la carte (script.js, bloc « Trois métiers ») ; tout ce qui bouge passe
par transform et opacity, rien de lourd à redessiner pendant le défilement. --------------------------------------------- */
.taches { --gris-carte: #edede8; --gris-cadre: #dbdbd2; --encre: #0d0f14; --muet: rgba(53,53,53,.7); --vert: #2f7d3e; padding: 120px 0; }
.taches__tete { max-width: 720px; margin: 0 0 44px; }
.taches__tete .p { margin: 20px 0 0; max-width: 620px; }
.taches__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tc-carte { display: flex; flex-direction: column; padding: 18px; border-radius: 24px; background: var(--gris-carte); }
.tc-cadre { position: relative; display: grid; place-items: center; height: 372px; padding: 24px 18px; border-radius: 20px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.tc-peinture { position: absolute; inset: 0; z-index: -1; background: var(--peint) var(--pos, center) / cover no-repeat; transition: transform .35s ease-out; }
@media (hover: hover) { .tc-cadre:hover .tc-peinture { transform: scale(1.05); } }
.tc-carte__txt { padding: 24px 6px 0; }
.tc-metier { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: #84738f; }
.tc-carte h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.tc-carte__txt > p:last-child { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muet); }
/* la fiche blanche : très aérée, comme le bloc « Il s'améliore avec le temps » ; peu d'éléments, gros, lisibles (refonte 05/10/2026, demande Axel) */
.tc-fiche { position: relative; width: 100%; max-width: 318px; padding: 16px 18px 0; border-radius: 16px; background: #fff; color: var(--encre); font-size: 13px; line-height: 1.35; text-align: left; user-select: none;
box-shadow: none; }
.tc-fiche p { margin: 0; }
.tc-lab { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.tc-lab small { font-size: 12px; font-weight: 400; color: #8a8a90; }
.tc-av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #191919; color: #fff; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.tc-av svg { width: 15px; height: 15px; }
/* coche ronde noire, commune aux trois fiches */
.tc-ok { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 6.2l1.8 1.8 3.7-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* les tuiles de Bobby, comme dans « Votre parcours » */
.tc-tuile { --tuile: #0a0a0a; --visage: #fff; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tuile); }
.tc-tuile--cyan { --tuile: #91E0FF; --visage: #12425C; } .tc-tuile--rose { --tuile: #F1CCFF; --visage: #5D2A6F; }
.tc-bobby { width: 36px; height: 36px; overflow: visible; }
.tc-bobby path { fill: none; stroke: var(--visage); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tc-bobby .tete { transform-box: view-box; transform-origin: 61px 65px; }
.tc-bobby .yeux { transform-box: fill-box; transform-origin: center; }
@keyframes tc-cligne { 0%, 100% { transform: none; } 40%, 60% { transform: scaleY(.1); } }
@keyframes tc-saut { 0%, 100% { transform: none; } 35% { transform: translateY(-5px) rotate(-5deg); } 70% { transform: translateY(1px); } }
@keyframes tc-pop { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
/* bas de fiche : barre fine comme « Semaine 1 → Semaine 12 », ou pastilles cochées alignées à droite */
.tc-barre-bas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -18px !important; padding: 14px 18px; border-top: 1px solid rgba(11,11,11,.07); font-size: 12.5px; color: #8a8a90; white-space: nowrap; }
.tc-barre-bas em { font-style: normal; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-fil { position: relative; display: block; height: 4px; border-radius: 99px; background: #ececef; overflow: hidden; }
.tc-fil > i { position: absolute; inset: 0; border-radius: inherit; background: #191919; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s cubic-bezier(.3,0,.2,1); }
.tc-retenu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-height: 64px; align-content: flex-start; padding: 2px 0 16px; }
.tc-retenu small { flex-basis: 100%; text-align: right; font-size: 12px; color: #8a8a90; opacity: 0; transition: opacity .4s ease; }
.tc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(11,11,11,.1); background: #fff; box-shadow: none; font-size: 13px; color: #191919; white-space: nowrap;
opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
/* 1) Community manager : un moyeu façon gleap. Bobby au centre ; tour à tour un rayon s'allume, un post file vers le réseau, « Publié » s'affiche */
.tc-moyeu { position: relative; height: 212px; margin: 4px 0 8px; container-type: size; }
.tc-rayons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-rayons line { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.tc-rayons__fond line { stroke: #e9e9e6; }
.tc-rayon { stroke: #FB4D17; stroke-width: 2 !important; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .3s ease; }
.tc-centre, .tc-app, .tc-post { position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); }
.tc-centre { translate: -50% -50%; padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.08); }
.tc-centre .tc-tuile { width: 56px; height: 56px; border-radius: 16px; }
.tc-centre .tc-bobby { width: 42px; height: 42px; }
.tc-app { display: grid; place-items: center; width: 50px; height: 50px; translate: -50% -50%; border-radius: 15px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.09); }
.tc-app::before { content: ""; position: absolute; inset: -4px; border-radius: 18px; box-shadow: 0 0 0 1.5px #FB4D17, 0 0 0 5px rgba(251,77,23,.12); opacity: 0; transition: opacity .3s ease; }
.tc-app img { width: 24px; height: 24px; }
.tc-publie { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.08); font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; translate: -50% 0; }
.tc-publie .tc-ok { width: 13px; height: 13px; }
.tc-app[style*="--y:20"] .tc-publie { bottom: calc(100% + 7px); } .tc-app[style*="--y:80"] .tc-publie { top: calc(100% + 7px); }
/* la petite vignette du post : part du centre, file le long du rayon jusqu'au réseau */
.tc-post { width: 20px; height: 24px; margin: -12px 0 0 -10px; border-radius: 5px; background: #fff var(--peinture-3) center / 260% no-repeat; box-shadow: 0 0 0 1.5px #fff; opacity: 0; }
@keyframes tc-file { 0% { opacity: 0; transform: translate(calc((50 - var(--x)) * 1cqw), calc((50 - var(--y)) * 1cqh)) scale(.6); } 15% { opacity: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.7); } }
@keyframes tc-rayon { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tc-publie { 0% { opacity: 0; transform: translateY(4px) scale(.9); } 100% { opacity: 1; transform: none; } }
.tc-carte[data-etape="1"] .tc-rayon--ig, .tc-carte[data-etape="2"] .tc-rayon--fb, .tc-carte[data-etape="3"] .tc-rayon--li,
.tc-carte[data-etape="4"] .tc-rayon--tt, .tc-carte[data-etape="5"] .tc-rayon--ig, .tc-carte[data-etape="6"] .tc-rayon--li { opacity: 1; animation: tc-rayon .55s cubic-bezier(.4,0,.2,1) both; }
.tc-carte[data-etape="1"] .tc-post--ig, .tc-carte[data-etape="2"] .tc-post--fb, .tc-carte[data-etape="3"] .tc-post--li,
.tc-carte[data-etape="4"] .tc-post--tt, .tc-carte[data-etape="5"] .tc-post--ig, .tc-carte[data-etape="6"] .tc-post--li { animation: tc-file .8s cubic-bezier(.4,0,.2,1) both; }
.tc-carte[data-etape="1"] .tc-app--ig::before, .tc-carte[data-etape="2"] .tc-app--fb::before, .tc-carte[data-etape="3"] .tc-app--li::before,
.tc-carte[data-etape="4"] .tc-app--tt::before, .tc-carte[data-etape="5"] .tc-app--ig::before, .tc-carte[data-etape="6"] .tc-app--li::before { opacity: 1; transition-delay: .55s; }
.tc-carte[data-etape="1"] .tc-app--ig .tc-publie, .tc-carte[data-etape="2"] .tc-app--fb .tc-publie, .tc-carte[data-etape="3"] .tc-app--li .tc-publie,
.tc-carte[data-etape="4"] .tc-app--tt .tc-publie, .tc-carte[data-etape="5"] .tc-app--ig .tc-publie, .tc-carte[data-etape="6"] .tc-app--li .tc-publie { animation: tc-publie .45s cubic-bezier(.3,1.4,.5,1) .65s both; }
/* Bobby cligne à chaque envoi ; à la fin, il saute de joie */
@keyframes tc-cligne2 { 0%, 100% { transform: none; } 40%, 60% { transform: scaleY(.1); } }
.tc-carte:is([data-etape="1"], [data-etape="3"], [data-etape="5"]) .tc-centre .yeux { animation: tc-cligne .35s ease .05s; }
.tc-carte:is([data-etape="2"], [data-etape="4"], [data-etape="6"]) .tc-centre .yeux { animation: tc-cligne2 .35s ease .05s; }
.tc-app::after { content: ""; position: absolute; right: -5px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 6.2l1.8 1.8 3.7-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); }
.tc-carte.tc-gain .tc-app::after { animation: tc-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
.tc-carte.tc-gain .tc-app--fb::after { animation-delay: .12s; } .tc-carte.tc-gain .tc-app--li::after { animation-delay: .24s; } .tc-carte.tc-gain .tc-app--tt::after { animation-delay: .36s; }
.tc-carte.tc-gain .tc-cm .tc-centre .tete { animation: tc-saut .9s cubic-bezier(.3,1.4,.5,1) both; }
/* 2) Administratif : le rail façon gleap. Le trait orange file de la demande au dépôt, chaque tuile s'anime à son passage */
.tc-rail { position: relative; height: 216px; margin: 2px 0 0; }
.tc-courbe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-courbe path { fill: none; stroke-width: .7; stroke-linecap: round; } /* repère 130 × 100, proche du format réel : le trait garde son épaisseur sans non-scaling-stroke (qui fausse pathLength) */
.tc-courbe__piste { stroke: #dcdce0; }
.tc-courbe__signal { stroke: #FB4D17; stroke-width: .95 !important; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s cubic-bezier(.5,0,.3,1); }
.tc-noeud { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.tc-noeud__id { position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; padding: 4px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.1); }
.tc-noeud__id::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1.5px #FB4D17, 0 0 0 5px rgba(251,77,23,.12); opacity: 0; transition: opacity .35s ease; }
.tc-noeud__id .tc-tuile { width: 44px; height: 44px; border-radius: 13px; }
.tc-noeud__id .tc-bobby { width: 32px; height: 32px; }
.tc-noeud__id > .tc-ok { position: absolute; right: -5px; top: -5px; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); }
.tc-noeud__id--rond { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #8a8a90; }
.tc-noeud__id--rond svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-noeud__id--fin { background: #edf3ed; box-shadow: 0 0 0 1px #cddbcc; color: #65815e; }
.tc-noeud__id--fin path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tc-noeud small { position: absolute; left: 0; translate: -50% 0; width: max-content; max-width: 96px; font-size: 11.5px; line-height: 1.25; color: #8a8a90; text-align: center; transition: color .35s ease; }
.tc-noeud--haut small { bottom: 32px; } .tc-noeud--bas small { top: 34px; }
.tc-noeud--1 small { translate: -30% 0; } .tc-noeud--5 small { translate: -60% 0; }
.tc-carte.e1 .tc-noeud--1 small, .tc-carte.e2 .tc-noeud--2 small, .tc-carte.e3 .tc-noeud--3 small, .tc-carte.e4 .tc-noeud--4 small, .tc-carte.e5 .tc-noeud--5 small { color: var(--ink); }
.tc-carte[data-etape="1"] .tc-noeud--1 .tc-noeud__id::before, .tc-carte[data-etape="2"] .tc-noeud--2 .tc-noeud__id::before,
.tc-carte[data-etape="3"] .tc-noeud--3 .tc-noeud__id::before, .tc-carte[data-etape="4"] .tc-noeud--4 .tc-noeud__id::before { opacity: 1; transition-delay: .7s; }
.tc-carte.e2 .tc-noeud--2 .tc-ok, .tc-carte.e3 .tc-noeud--3 .tc-ok, .tc-carte.e4 .tc-noeud--4 .tc-ok { animation: tc-pop .45s cubic-bezier(.3,1.4,.5,1) .85s both; }
.tc-carte[data-etape="2"] .tc-noeud--2 .tete, .tc-carte[data-etape="3"] .tc-noeud--3 .tete, .tc-carte[data-etape="4"] .tc-noeud--4 .tete { animation: tc-saut .7s cubic-bezier(.3,1.4,.5,1) .75s both; }
.tc-carte[data-etape="2"] .tc-noeud--2 .yeux, .tc-carte[data-etape="3"] .tc-noeud--3 .yeux, .tc-carte[data-etape="4"] .tc-noeud--4 .yeux { animation: tc-cligne .35s ease .8s; }
.tc-carte.e5 .tc-noeud__id--fin path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease .9s; }
.tc-carte.e5 .tc-noeud__id--fin { animation: tc-saut .6s ease .9s both; }
.tc-carte.e3 .tc-opco .tc-retenu small, .tc-carte.e3 .tc-opco .tc-chip { opacity: 1; transform: none; transition-delay: .5s; }
/* 3) Webmaster : grand score au centre, quatre extensions autour qui passent du point orange à la coche */
.tc-score { position: relative; height: 216px; margin: 4px 0 4px; }
.tc-anneau { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; align-content: center; width: 112px; height: 112px; }
.tc-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tc-anneau circle { fill: none; stroke: #efefec; stroke-width: 3.2; }
.tc-anneau .tc-jauge__arc { stroke: #FB4D17; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 38; transition: stroke-dashoffset .9s cubic-bezier(.3,0,.2,1); }
.tc-anneau em { position: relative; font-size: 36px; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-anneau small { position: relative; margin-top: 4px; font-size: 11.5px; color: #8a8a90; }
.tc-ext { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; justify-items: center; gap: 6px; translate: -50% -26px; }
.tc-app__ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.09); font-size: 16px; letter-spacing: -.03em; }
.tc-app__ico b { font-weight: 600; } .tc-app__ico img { width: 22px; height: 22px; }
.tc-ext--2 .tc-app__ico b { font-size: 13px; }
.tc-ext small { font-size: 11px; color: #8a8a90; white-space: nowrap; }
.tc-maj, .tc-app__ico > .tc-ok { position: absolute; right: -4px; top: -4px; box-shadow: 0 0 0 2px #fff; }
.tc-maj { width: 10px; height: 10px; border-radius: 50%; background: #FB4D17; animation: tc-clin 1.2s ease-in-out infinite; transition: opacity .25s ease; }
@keyframes tc-clin { 50% { opacity: .35; } }
.tc-app__ico > .tc-ok { opacity: 0; transform: scale(.4); }
.tc-carte.e1 .tc-ext--1 .tc-maj, .tc-carte.e2 .tc-ext--2 .tc-maj, .tc-carte.e3 .tc-ext--3 .tc-maj, .tc-carte.e4 .tc-ext--4 .tc-maj { animation: none; opacity: 0; }
.tc-carte.e1 .tc-ext--1 .tc-ok, .tc-carte.e2 .tc-ext--2 .tc-ok, .tc-carte.e3 .tc-ext--3 .tc-ok, .tc-carte.e4 .tc-ext--4 .tc-ok { animation: tc-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
.tc-carte.e1 .tc-ext--1 .tc-app__ico, .tc-carte.e2 .tc-ext--2 .tc-app__ico, .tc-carte.e3 .tc-ext--3 .tc-app__ico, .tc-carte.e4 .tc-ext--4 .tc-app__ico { animation: tc-saut .6s ease both; }
.tc-carte.e1 .tc-ext--1 small, .tc-carte.e2 .tc-ext--2 small, .tc-carte.e3 .tc-ext--3 small, .tc-carte.e4 .tc-ext--4 small { color: var(--ink); }
.tc-barre-bas--web { display: flex; justify-content: space-between; }
.tc-sauv { position: relative; display: inline-flex; align-items: center; gap: 7px; padding-left: 22px; transition: color .35s ease; }
.tc-sauv .tc-maj, .tc-sauv .tc-ok { position: absolute; left: 0; right: auto; top: 50%; margin-top: -7.5px; box-shadow: none; }
.tc-sauv .tc-maj { left: 3px; margin-top: -5px; }
.tc-sauv .tc-ok { opacity: 0; transform: scale(.4); }
.tc-sauv__fait { margin-left: -3px; font-weight: 400; opacity: 0; transform: translateX(-3px); transition: opacity .35s ease, transform .35s ease; }
.tc-carte.e5 .tc-sauv { color: var(--ink); }
.tc-carte.e5 .tc-sauv__fait { opacity: 1; transform: none; }
.tc-carte.e5 .tc-sauv .tc-maj { animation: none; opacity: 0; }
.tc-carte.e5 .tc-sauv .tc-ok { animation: tc-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
/* le temps : à la main, avec Bobby, puis le temps gagné qui défile */
.tc-barre { position: relative; display: block; height: 4px; border-radius: 99px; background: #e2e2dc; overflow: hidden; }
.tc-barre > i { position: absolute; inset: 0; border-radius: inherit; background: #191919; transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s ease; }
.tc-temps { margin-top: auto; padding: 24px 6px 4px; }
.tc-temps p { margin: 0; }
.tc-temps__ligne { display: grid; grid-template-columns: 82px minmax(0, 1fr) 52px; align-items: center; gap: 12px; height: 26px; font-size: 13.5px; }
.tc-temps__ligne span { color: var(--muet); white-space: nowrap; }
.tc-temps__ligne b { font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-temps__ligne--main b { color: #8a8a90; }
.tc-temps__ligne--main .tc-barre > i { background: #b4b4ad; }
.tc-temps__ligne--bobby span, .tc-temps__ligne--bobby b { color: var(--ink); }
.tc-temps__ligne--bobby .tc-barre > i { background: #FB4D17; }
.tc-carte.e1 .tc-temps__ligne--main .tc-barre > i { transform: none; transition: transform var(--duree-main, 5s) linear; }
.tc-carte.e1 .tc-temps__ligne--bobby .tc-barre > i { transform: scaleX(var(--part, .05)); transition: transform .8s cubic-bezier(.2,.8,.2,1) .2s; }
.tc-temps__gain { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); }
.tc-temps__gain > span { font-size: 13.5px; color: var(--muet); }
.tc-temps__gain b { display: flex; align-items: baseline; gap: 6px; font-weight: 400; white-space: nowrap; }
.tc-temps__gain em { font-size: 28px; line-height: 1; letter-spacing: -.03em; font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; opacity: .28; transition: opacity .4s ease; }
.tc-temps__gain small { font-size: 13px; color: var(--muet); }
.tc-gain .tc-temps__gain em { opacity: 1; }
@media (max-width: 1100px) {
.taches__grille { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86vw, 372px); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 12px; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
.taches__grille::-webkit-scrollbar { display: none; }
.tc-carte { scroll-snap-align: start; }
}
@media (max-width: 960px) { .taches { padding: 80px 0; } .taches__tete { margin-bottom: 32px; } }
@media (max-width: 420px) {
.tc-carte { padding: 14px; border-radius: 22px; }
.tc-cadre { height: 352px; padding: 20px 12px; border-radius: 16px; }
.tc-fiche { padding: 14px 14px 0; }
.tc-barre-bas { margin: 0 -14px !important; padding: 13px 14px; }
.tc-temps { padding: 20px 4px 2px; }
.tc-temps__ligne { grid-template-columns: 76px minmax(0, 1fr) 48px; gap: 10px; font-size: 13px; }
.tc-temps__gain em { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.tc-fiche *, .tc-fiche *::before, .tc-fiche *::after, .tc-temps * { transition: none !important; animation: none !important; }
.tc-post, .tc-rayon, .tc-app::before, .tc-noeud__id::before { opacity: 0 !important; }
.tc-ok, .tc-chip, .tc-retenu small { opacity: 1 !important; transform: none !important; }
.tc-maj { opacity: 0 !important; }
}
/* Sécurité, il apprend : listes cochées sobres, scène posée sur la peinture ---------------------------- */
.fs-liste li { border-radius: 12px; }
.fs-coche { background-color: #191919; box-shadow: none; }
.coords__ico { color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
/* Parcours en 5 étapes : nœuds ronds nets, fil fin, étiquettes grises -------------------------------- */
.parcours__fil g, .parcours__noeud svg { filter: none; }
.parcours__fil { color: rgba(41,41,41,.32); }
.parcours__fil path { stroke-width: 1.5; }
.parcours__fil .fil2, .parcours__noeud svg .n2 { display: none; }
.parcours__noeud svg path { stroke: rgba(0,0,0,.14); stroke-width: 1.5; }
.parcours__noeud svg .n1 { fill: #fff; }
.parcours__noeud b { font-weight: 400; font-size: 18px; color: var(--ink); }
.parcours__quand { font-weight: 500; color: var(--texte); background: var(--g-100); border-radius: 200px; }
.parcours__txt h3 { font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.parcours__txt p { color: rgba(53,53,53,.72); }
/* Parler à Bobby : la carte de chat posée sur la peinture (habillage du chat : voir « Chat Bobby façon widget gleap.ai » en fin de fichier) */
.parler { padding: 120px 0; }
.parler .wrap { width: calc(100% - var(--gutter) * 2); max-width: calc(var(--wrap) - var(--gutter) * 2); padding: 64px 24px; border-radius: var(--r); background: #c9d6ee var(--peinture) center / cover no-repeat; }
.assistant__form, .tache, .etape, .agenda-card__ini { border-radius: 200px; }
@media (max-width: 960px) {
.parler { padding: 72px 0; }
.parler .wrap { width: 100%; padding: 28px 12px; border-radius: 0; }
}
/* FAQ : intitulé à gauche, questions à filets à droite, chevron --------------------------------------- */
.faq-bloc__grille { grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 56px; }
.faq-bloc__titre { font-size: clamp(28px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.faq-bloc__tete p { font-size: 16px; color: rgba(53,53,53,.72); }
.faq { gap: 0; }
.faq__item, .faq__item:hover, .faq__item.is-open { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.faq__q { padding: 19px 0; font-size: 16px; font-weight: 400; color: var(--texte); border-radius: 0; }
.faq__item.is-open .faq__q { color: var(--ink); }
.faq__q:focus-visible { outline-color: var(--ink); }
.faq__q span { width: 16px; height: 16px; font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.faq__item.is-open .faq__q span { transform: rotate(180deg); }
.faq__item .faq__a, .faq__item:not(.is-open) .faq__a, html.js .faq__item:not(.is-open) .faq__a { padding: 0 48px 0 0; font-size: 15px; line-height: 1.55; color: rgba(53,53,53,.72); }
.faq__item.is-open .faq__a { padding-bottom: 20px; }
@media (max-width: 960px) {
.faq-bloc__grille { grid-template-columns: none; gap: 28px; }
.faq__q { padding: 17px 0; }
.faq__item .faq__a, .faq__item:not(.is-open) .faq__a, html.js .faq__item:not(.is-open) .faq__a { padding: 0 28px 0 0; }
}
/* Appel final : grappe d'icônes inclinées, très grand titre serré, bouton pilule ------------------------ */
.cta { background: var(--paper); color: var(--ink); padding: 112px 0 136px; }
.cta__in { border-bottom: 0; padding-bottom: 0; gap: 34px; }
.cta__gauche { position: relative; flex-direction: column; gap: 30px; padding-top: 4px; }
.cta__tete { width: 76px; height: 76px; padding: 13px; border-radius: 20px; background: var(--pastel-peche); stroke: #292929; transform: rotate(5deg); position: relative; z-index: 1; }
.cta__gauche::before, .cta__gauche::after { display: none; content: ""; position: absolute; top: 14px; width: 60px; height: 60px; border-radius: 17px; background: var(--pastel-bleu) url("assets/da/bobby-tete.svg") center / 58% no-repeat; }
.cta__gauche::before { left: calc(50% - 112px); transform: rotate(-11deg); }
.cta__gauche::after { left: calc(50% + 52px); transform: rotate(13deg); background-color: var(--pastel-lilas); }
.cta__txt { max-width: 920px; font-size: clamp(38px, 5.6vw, 76px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; color: var(--ink); }
@media (max-width: 960px) {
.cta { padding: 80px 0 96px; }
.cta__tete { width: 64px; height: 64px; padding: 11px; }
.cta__gauche { align-items: center; }
.cta__gauche::before, .cta__gauche::after { width: 50px; height: 50px; top: 10px; }
.cta__gauche::before { left: calc(50% - 92px); } .cta__gauche::after { left: calc(50% + 42px); }
}
/* Pied de page : grande carte grise, liseré dégradé en haut, colonnes de liens ------------------------- */
.footer { background: var(--paper); color: var(--texte); padding: 0 var(--gutter) 40px; }
.footer__in { position: relative; max-width: calc(var(--wrap) - var(--gutter) * 2); margin: 0 auto; padding: 44px 56px 88px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; gap: 40px; }
.footer__in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--lisere); }
.footer__logo img { height: 28px; width: auto; margin-bottom: 16px; }
.footer .small { color: rgba(53,53,53,.72); font-size: 15px; }
.footer__qualiopi { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.footer__col { gap: 10px; font-size: 15px; color: var(--ink); }
.footer__col a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.footer__col .meta { color: #949494; font-weight: 400; font-size: 15px; letter-spacing: 0; margin-bottom: 4px; }
.footer__bar { max-width: calc(var(--wrap) - var(--gutter) * 2); padding: 26px 4px 0; color: #747474; }
@media (max-width: 960px) {
.footer { padding: 0 12px 28px; }
.footer__in { padding: 36px 24px 48px; border-radius: 16px; gap: 30px; }
}
/* Sous-pages : en-tête centré, cartes grises plates ---------------------------------------------------- */
.page-hero { padding: 104px 0 72px; text-align: center; }
.page-hero .d, .page-hero h1 { margin-left: auto; margin-right: auto; }
.page-hero .p { margin: 24px auto 0; max-width: 700px; }
.team { gap: 12px; }
.team__card, .agenda-card, .form-card, .card, .duel__col, .app, .team__initiales { border: 0; border-radius: var(--r); box-shadow: none; }
.team__card { background: var(--g-100); }
.team__card:hover { box-shadow: none; transform: translateY(-3px); }
.team__card .h3 { font-size: 23px; }
.team__linkedin { background: #fff; border-color: transparent; border-radius: 200px; font-weight: 400; }
.form-card { background: var(--g-100); padding: 32px; }
.field label { font-weight: 500; }
.field input, .field textarea { border-radius: 12px; border-color: rgba(0,0,0,.1); background: #fff; }
.field input:focus, .field textarea:focus { border-color: #292929; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.agenda-card { background: var(--g-100); }
.agenda-card__titre { font-weight: 500; }
.agenda-card__ini { border-radius: 50%; }
.prose h2 { font-weight: 400; letter-spacing: -.02em; }
.checks li::before { background-color: #191919; }
/* Blog : cadre allégé, filtres en contrôle segmenté, cartes blanches plates ----------------------------- */
.b-cadre { border: 0; background: transparent; }
.b-tete { border-bottom: 0; background: none; padding-top: 48px; }
.b-tete::before, .b-tete::after { display: none; }
.b-etiquette { font-family: var(--font); font-weight: 500; color: var(--ink-2); }
.b-titre { font-weight: 400; letter-spacing: -.03em; }
.b-titre .b-titre__accent { color: rgba(41,41,41,.5); }
.b-une { border-bottom: 0; padding: 32px 0; }
.b-une__img, .b-carte__img { border-radius: 16px; }
.b-une h2 { font-weight: 400; }
.b-une h2 a:hover, .b-carte:hover h3, .b-retour:hover { color: rgba(41,41,41,.6); }
.b-lire { border-radius: 200px; background: #191919; color: #fff; box-shadow: none; padding: 0 20px; }
.b-lire:hover { background: #3a3a3a; box-shadow: none; }
.b-filtres-zone { background: none; border-bottom: 0; }
.b-filtres { background: var(--g-100); box-shadow: none; }
.b-filtre.is-on { background: var(--g-150); box-shadow: none; font-weight: 400; }
.b-grille { border-bottom: 0; padding: 16px 0 32px; gap: 12px; }
.b-carte { border-radius: var(--r); background: #fff; box-shadow: none; padding: 8px; }
.b-carte:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.b-carte h3 { font-weight: 400; font-size: 18px; letter-spacing: -.015em; }
.b-suite { border: 0; }
.b-article__tete h1 { font-weight: 400; letter-spacing: -.025em; }
.b-prose { color: var(--texte); }
.b-prose h2, .b-prose h3 { font-weight: 500; letter-spacing: -.015em; }
.b-prose a { color: var(--ink); text-decoration-color: rgba(0,0,0,.3); }
.b-prose blockquote { border-left-color: #191919; }
@media (max-width: 960px) { .b-une { padding: 16px 0; } .b-grille { padding: 8px 0 16px; } }
/* Sécurisée : texte à gauche, garanties sur une fiche blanche posée sur la peinture, à droite (zigzag de gleap.ai) */
.securite { padding-bottom: 64px; }
.securite__grid--gleap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; }
.securite__toile { display: flex; align-items: center; justify-content: center; min-height: 380px; padding: 48px 32px; border-radius: var(--r); background: #c9d6ee var(--peinture-3) center / cover no-repeat; }
.securite__fiche { width: 100%; max-width: 420px; padding: 18px 18px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.06); }
.securite__fiche-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.securite__fiche-titre svg { width: 17px; height: 17px; }
.securite__fiche > .fs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.securite__fiche .fs-liste li { font-size: 14px; }
/* « Vos garanties » se rassemble en cadenas, puis se redéploie (05/10/2026, demande Axel). Boucle pilotée par script.js (bloc « Sécurisée »).
La fiche garde sa place dans la page ; son fond blanc est un calque découpé (clip-path) qui se rétracte en tuile arrondie,
la tuile s'incline et le cadenas de la page Cerveau IA (même dessin, mêmes mouvements) se ferme, s'ouvre et se referme. */
.sc-fiche { position: relative; background: none; box-shadow: none; }
.sc-fiche > p, .sc-fiche > ul { position: relative; z-index: 1; }
.sc-ombre, .sc-plaque, .sc-fond { position: absolute; inset: 0; border-radius: 16px; }
.sc-ombre { box-shadow: 0 0 0 1px rgba(11,11,11,.06); transition: opacity .45s ease .75s; } /* au redéploiement, l'ombre revient quand la fiche a repris sa taille */
.sc-plaque { transition: transform 1s cubic-bezier(.6,0,.2,1); }
.sc-fond { background: #fff; clip-path: inset(0 round 16px); transition: clip-path 1s cubic-bezier(.65,0,.25,1); }
.sc-plaque__ombre { position: absolute; left: 50%; top: 50%; width: 184px; height: 184px; margin: -92px 0 0 -92px; border-radius: 40px; box-shadow: none; opacity: 0; transition: opacity .5s ease; }
.sc-cadenas { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; overflow: visible; color: #191919; opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
.sc-cad__anse, .sc-cad__corps { transform-box: view-box; }
.sc-cad__anse { transform-origin: 16px 11px; }
.sc-cad__corps { transform-origin: 12px 21px; }
/* 1) les garanties se cochent une à une (même rendu qu'avant) */
.sc-fiche .fs-liste li, .sc-fiche .fs-coche { animation: none; }
.sc-fiche .fs-liste li { color: var(--ink-3); background: none; transition: color .35s ease, opacity .5s ease, transform .7s cubic-bezier(.6,0,.2,1); }
.sc-fiche .fs-coche { opacity: .25; transform: scale(.6); transition: opacity .25s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.sc-fiche.c1 li:nth-child(1), .sc-fiche.c2 li:nth-child(2), .sc-fiche.c3 li:nth-child(3), .sc-fiche.c4 li:nth-child(4) { color: var(--ink); }
.sc-fiche.c1 li:nth-child(1) .fs-coche, .sc-fiche.c2 li:nth-child(2) .fs-coche, .sc-fiche.c3 li:nth-child(3) .fs-coche, .sc-fiche.c4 li:nth-child(4) .fs-coche { opacity: 1; transform: none; }
/* 2) tout se rassemble vers le centre (--dy calculé par le script) */
.sc-fiche .securite__fiche-titre { transition: opacity .5s ease, transform .7s cubic-bezier(.6,0,.2,1); }
.sc-fiche.is-rassemble .securite__fiche-titre, .sc-fiche.is-rassemble .fs-liste li { opacity: 0; transform: translateY(var(--dy, 0)) scale(.45); }
.sc-fiche.is-rassemble .fs-liste li:nth-child(1) { transition-delay: .06s; } .sc-fiche.is-rassemble .fs-liste li:nth-child(2) { transition-delay: .12s; }
.sc-fiche.is-rassemble .fs-liste li:nth-child(3) { transition-delay: .18s; } .sc-fiche.is-rassemble .fs-liste li:nth-child(4) { transition-delay: .24s; }
/* 3) la fiche devient la tuile du cadenas, inclinée comme sur la page Cerveau IA */
.sc-fiche.is-tuile .sc-fond { clip-path: inset(var(--iy, 20px) var(--ix, 100px) round 40px); }
.sc-fiche.is-tuile .sc-ombre { opacity: 0; transition-delay: 0s; transition-duration: .3s; }
.sc-fiche.is-tuile .sc-plaque__ombre { opacity: 1; transition-delay: .45s; }
.sc-fiche.is-tuile .sc-plaque { transform: rotate(-4deg); }
.sc-fiche.is-cadenas .sc-cadenas { opacity: 1; transform: none; }
.sc-fiche.is-cadenas .sc-cad__anse { animation: sc-ferme .8s cubic-bezier(.65,0,.35,1) .25s both; }
.sc-fiche.is-cadenas .sc-cad__corps { animation: sc-clac .45s ease-out .95s both; }
@keyframes sc-ferme { 0%, 25% { transform: translateY(-2.6px) rotate(-28deg); } 60% { transform: translateY(-2.6px); } 100% { transform: none; } }
@keyframes sc-clac { 0% { transform: none; } 30% { transform: scale(1.06, .95); } 65% { transform: scale(.98, 1.02); } 100% { transform: none; } }
/* 4) il s'ouvre et se referme deux fois en flottant (mouvements de .cv-cad sur la page Cerveau IA) */
.sc-fiche.is-bouge .sc-cad__anse { animation: sc-cad-anse 3.2s cubic-bezier(.65,0,.35,1) 2; }
.sc-fiche.is-bouge .sc-cad__corps { animation: sc-cad-clic 3.2s ease-out 2; }
.sc-fiche.is-bouge .sc-cad__trou { animation: sc-cad-trou 3.2s ease-in-out 2; }
.sc-fiche.is-bouge .sc-plaque { animation: sc-flotte 3.2s ease-in-out 2; }
@keyframes sc-cad-anse { 0%, 22% { transform: none; } 34% { transform: translateY(-2.6px); } 44%, 66% { transform: translateY(-2.6px) rotate(-28deg); } 76% { transform: translateY(-2.6px); } 86%, 100% { transform: none; } }
@keyframes sc-cad-clic { 0%, 85% { transform: none; } 89% { transform: scale(1.06, .95); } 94% { transform: scale(.98, 1.02); } 100% { transform: none; } }
@keyframes sc-cad-trou { 0%, 28%, 82%, 100% { stroke: currentColor; } 42%, 70% { stroke: #FB4D17; } }
@keyframes sc-flotte { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-2deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
.sc-fiche *, .sc-fiche *::before { transition: none !important; animation: none !important; }
.sc-fiche .fs-liste li { color: var(--ink); } .sc-fiche .fs-coche { opacity: 1; transform: none; }
}
@keyframes fs-ligne { 0%, 50% { color: var(--ink-3); background: var(--paper); } 54%, 100% { color: var(--ink); background: var(--paper); } }
@media (max-width: 960px) {
.securite__grid--gleap { grid-template-columns: 1fr; gap: 32px; }
.securite__toile { min-height: 0; padding: 32px 16px; }
}
/* contact, apporteurs : l'en-tête en deux colonnes reste aligné à gauche */
.page-hero .contact-grid { text-align: left; }
.page-hero .contact-grid .p { margin-left: 0; }
/* ============================================================
Chat Bobby façon widget gleap.ai (04/10/2026, demande Maxime : « la même chose qu'eux dans le style »).
Même langage pour le bloc de l'accueil (#assistant) et la fenêtre (.bobby-plein) : en-tête sombre qui se fond
dans le blanc, carte de saisie blanche avec envoi rond noir, pilules, bulles. Lanceur : rond noir en bas à droite.
============================================================ */
.assistant { max-width: 860px; padding: 0; background: #fff; color: #15171b; border-radius: 24px; overflow: hidden; box-shadow: none; }
.assistant::after { display: none; }
.assistant__tete, .bp-tete { color: #fff; background: linear-gradient(180deg, #15171b calc(100% - 64px), #2a2d32 calc(100% - 40px), #fff 100%); }
.assistant__tete { padding: 30px 40px 84px; }
.assistant__corps, .bp-corps { position: relative; z-index: 1; margin-top: -48px; }
.assistant__corps { padding: 0 32px 32px; }
.assistant__marque, .bp-qui { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #fff; margin: 0; }
.assistant__tete .assistant__marque { margin-bottom: 30px; }
.bp-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bp-avatar .tete-bobby, .assistant__marque .bp-avatar .tete-bobby { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.assistant .assistant__etat { margin-left: 2px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.6); }
.assistant .assistant__etat i { width: 7px; height: 7px; background: #3ecf6e; box-shadow: 0 0 0 3px rgba(62,207,110,.2); }
.assistant__titre { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: #fff; max-width: 640px; }
.assistant__titre .trait-orange, .assistant__titre .bobby { color: #fff; }
.assistant__desc { margin-top: 12px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.66); max-width: 560px; }
/* carte de saisie : champ en haut, envoi rond noir en bas à droite ; une seule ligne une fois la conversation lancée */
.assistant .assistant__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; padding: 14px 12px 12px 18px; background: #fff; border: 1px solid rgba(9,14,21,.1); border-radius: 16px; box-shadow: none; transition: box-shadow .15s, border-color .15s; }
.assistant .assistant__form:focus-within { border-color: rgba(9,14,21,.22); }
.assistant .assistant__champ { flex: 1 1 100%; min-width: 0; padding: 2px 0 6px; font-size: 15px; color: #15171b; }
.assistant .assistant__champ::placeholder { color: #8a8f98; }
.assistant .assistant__envoi { width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .15s, transform .15s; }
.assistant .assistant__envoi:hover { background: #2a2d32; transform: scale(1.05); }
.assistant .assistant__envoi svg { width: 18px; height: 18px; }
.assistant.a-commence .assistant__form { flex-wrap: nowrap; align-items: center; padding: 8px 8px 8px 16px; }
.assistant.a-commence .assistant__champ { flex: 1 1 auto; padding: 0; }
.assistant .assistant__form.is-requis { border-color: #15171b; box-shadow: 0 0 0 1px #15171b; }
.assistant .assistant__form.is-off { opacity: .55; }
/* pilules de suggestions : blanches, bordure fine, petit emoji (posé en CSS : il ne part pas dans le message) */
.assistant .assistant__puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.assistant .assistant__puces button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid rgba(9,14,21,.13); background: #fff; color: #15171b; font-size: 13.5px; font-weight: 400; line-height: 1.3; transition: background .15s, border-color .15s; }
.assistant .assistant__puces button:hover { background: #f6f6f7; border-color: rgba(9,14,21,.26); }
.assistant .assistant__puces button span { display: none; }
.assistant .assistant__puces button::before { font-size: 14px; line-height: 1; }
.assistant .assistant__puces button:nth-child(1)::before { content: "🔗"; }
.assistant .assistant__puces button:nth-child(2)::before { content: "📨"; }
.assistant .assistant__puces button:nth-child(3)::before { content: "📣"; }
.assistant .assistant__puces button:nth-child(4)::before { content: "🧾"; }
/* fil : visiteur à droite en noir, Bobby à gauche en gris clair avec sa pastille ronde */
.assistant .assistant__fil { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding-top: 4px; }
.assistant .assistant__fil:empty { display: none; }
.assistant .assistant__fil:empty::before { content: none; }
.assistant .assistant__fil .msg { font-size: 15px; line-height: 1.45; padding: 10px 14px; border-radius: 18px; max-width: 80%; border: 0; box-shadow: none; }
.assistant .assistant__fil .msg--me { align-self: flex-end; background: #15171b; color: #fff; border-bottom-right-radius: 6px; }
.assistant .assistant__fil .msg--ai { position: relative; align-self: flex-start; margin-left: 38px; background: #f3f4f6; color: #15171b; border-bottom-left-radius: 6px; }
.assistant .assistant__fil .msg--ai .who { position: absolute; left: -38px; bottom: 0; width: 28px; height: 28px; margin: 0; border-radius: 50%; background: #15171b; color: #fff; font-size: 0; display: flex; align-items: center; justify-content: center; }
.assistant .assistant__fil .msg--ai .who .tete-bobby { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
.assistant .assistant__fil .msg--ai a { color: #15171b; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(21,23,27,.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.assistant .assistant__fil .msg--ai a:hover { text-decoration-color: #15171b; }
.assistant .assistant__fil .typing { align-self: flex-start; margin-left: 38px; padding: 13px 15px; gap: 5px; background: #f3f4f6; border: 0; border-radius: 18px; border-bottom-left-radius: 6px; }
.assistant .assistant__fil .typing i { background: #9ca3af; }
.assistant .assistant__fil .msg--erreur { background: #fdf0ef; }
.assistant .assistant__fil .msg--etape .assistant__note { color: #6b7280; }
.assistant .assistant__fil .msg--etape .ok { color: #1f8a46; }
.assistant .assistant__fil .msg--requis { background: #fff; border: 1px solid rgba(9,14,21,.16); border-left: 1px solid rgba(9,14,21,.16); box-shadow: none; }
.assistant .assistant__fil .msg--requis strong { color: #15171b; font-weight: 600; }
.assistant .assistant__fil .msg--requis .requis { background: #15171b; color: #fff; font-weight: 500; }
.assistant .assistant__fil .msg--requis .requis::before { background: #3ecf6e; }
.assistant .assistant__suite { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0 38px; padding: 9px 16px; border-radius: 999px; border: 1px solid #15171b; background: #15171b; color: #fff; font-size: 14px; font-weight: 500; transition: background .15s; }
.assistant .assistant__suite:hover { background: #2a2d32; }
.assistant .assistant__rdv { align-self: flex-start; margin-left: 38px; font-size: 13px; color: #6b7280; }
.assistant .assistant__rdv .assistant__suite { margin: 0; padding: 7px 14px; background: #fff; color: #15171b; border-color: rgba(9,14,21,.2); font-size: 13px; }
.assistant .assistant__rdv .assistant__suite:hover { background: #f6f6f7; }
/* bloc de l'accueil : une fois la conversation lancée, l'en-tête reste sombre et le fil passe dans le blanc */
.assistant.a-commence .assistant__tete { padding-bottom: 30px; background: #15171b; }
.assistant.a-commence .assistant__corps { margin-top: 0; padding-top: 24px; }
/* la fenêtre : panneau 410 px en bas à droite au-dessus du lanceur, qui grandit depuis le coin */
.assistant.bobby-plein { display: flex; flex-direction: column; position: fixed; z-index: 300; left: auto; top: auto; right: 20px; bottom: 84px; width: 410px; max-width: calc(100vw - 40px); height: min(640px, calc(100vh - 110px)); height: min(640px, calc(100dvh - 110px)); margin: 0; padding: 0; border-radius: 24px; background: #fff; box-shadow: none; overflow: hidden; animation: none;
transform-origin: right bottom; transform: scale(0); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s cubic-bezier(0, 1.2, 1, 1), opacity .12s ease, visibility 0s linear .3s; }
.assistant.bobby-plein.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .3s cubic-bezier(0, 1.2, 1, 1), opacity .12s ease, visibility 0s; }
.bp-tete { flex: none; padding: 18px 16px 76px 24px; }
.bp-barre { display: flex; align-items: center; gap: 4px; }
.bp-qui { margin-right: auto; }
.bp-bouton, .assistant .bobby-plein__fermer { width: 36px; height: 36px; margin: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 0; transition: background .15s, color .15s; }
.bp-bouton:hover, .assistant .bobby-plein__fermer:hover { background: rgba(255,255,255,.1); color: #fff; }
.bp-bouton svg { width: 18px; height: 18px; }
.bp-agrandir svg { width: 16px; height: 16px; }
.bp-ico-reduire, .is-agrandi .bp-ico-agrandir { display: none; }
.is-agrandi .bp-ico-reduire { display: block; }
.bp-accueil { margin: 44px 0 0; font-size: 26px; font-weight: 600; line-height: 1.22; letter-spacing: -.015em; color: #fff; }
.bp-accueil span { display: block; margin-bottom: 2px; font-weight: 300; }
.bp-accueil small { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: rgba(255,255,255,.66); }
.is-agrandi .bp-accueil small { font-size: 18px; }
/* la question d'ouverture est déjà dans l'en-tête de la fenêtre : la bulle n'apparaît qu'une fois la conversation lancée (06/10/2026, demande Axel) */
.bobby-plein:not(.a-commence) .msg--ouverture { display: none; }
.bp-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 20px 20px; overflow-y: auto; }
.assistant.bobby-plein .assistant__fil:empty { display: none; }
.assistant.bobby-plein .assistant__fil:empty::before { content: none; }
.assistant.bobby-plein .assistant__form, .assistant.bobby-plein .assistant__puces { flex: none; }
.assistant.bobby-plein .assistant__puces button { font-size: 13px; padding: 7px 13px 7px 10px; }
/* conversation lancée : en-tête compact, le fil prend la place, la saisie reste en bas */
.bobby-plein.a-commence .bp-tete { padding-bottom: 16px; background: #15171b; }
.bobby-plein.a-commence .bp-accueil, .bobby-plein.a-commence .assistant__puces { display: none; }
.bobby-plein.a-commence .bp-corps { margin-top: 0; padding: 0 16px 16px; overflow: hidden; }
.assistant.bobby-plein.a-commence .assistant__fil { flex: 1 1 auto; min-height: 0; margin: 0 -16px 12px; padding: 18px 16px 4px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(9,14,21,.18) transparent; }
.assistant.bobby-plein .assistant__fil .msg { max-width: 82%; }
/* agrandi (ordinateur) : toute la fenêtre, contenu centré */
.assistant.bobby-plein.is-agrandi { inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
.is-agrandi .bp-tete { padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2 - 8px)); }
.is-agrandi .bp-accueil { margin-top: 18vh; font-size: 40px; }
.bobby-plein.is-agrandi .bp-corps, .bobby-plein.is-agrandi.a-commence .bp-corps { padding-left: max(20px, calc((100% - 760px) / 2)); padding-right: max(20px, calc((100% - 760px) / 2)); }
.assistant.bobby-plein.is-agrandi.a-commence .assistant__fil { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 4px; }
.bobby-plein.is-agrandi.a-commence .bp-corps { padding-bottom: 28px; }
.assistant.bobby-plein.is-agrandi .assistant__fil .msg { max-width: 72%; }
/* le lanceur : rond noir, la tête de Bobby en blanc ; fenêtre ouverte, un chevron */
.bobby-flottant__btn { position: fixed; right: 20px; bottom: 20px; z-index: 310; width: 52px; height: 52px; padding: 0; gap: 0; border: 0; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; filter: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .2s ease, opacity .25s, box-shadow .2s; }
.bobby-flottant__btn:hover { background: #000; filter: none; transform: scale(1.06); box-shadow: none; }
.bobby-flottant__btn .bf-icone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.bobby-flottant__btn .bf-tete .tete-main-mini { width: 30px; height: 30px; margin: 0; overflow: visible; }
.bobby-flottant__btn .bf-chevron { opacity: 0; transform: rotate(-90deg) scale(.6); }
.bobby-flottant__btn .bf-chevron svg { width: 24px; height: 24px; }
.bobby-flottant__btn.is-ouvert .bf-tete { opacity: 0; transform: rotate(90deg) scale(.6); }
.bobby-flottant__btn.is-ouvert .bf-chevron { opacity: 1; transform: none; }
.bobby-flottant__btn .bobby-flottant__bulle { display: block; position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: #15171b; color: #fff; font-size: 13px; font-weight: 500; box-shadow: none; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.bobby-flottant__btn:hover .bobby-flottant__bulle, .bobby-flottant__btn:focus-visible .bobby-flottant__bulle { opacity: 1; transform: translate(0, -50%); }
.bobby-flottant__btn.is-ouvert .bobby-flottant__bulle { display: none; }
.bobby-flottant__btn.is-ouvert.is-cache { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: none) { .bobby-flottant__btn .bobby-flottant__bulle { display: none; } }
/* téléphone : plein écran, comme avant (pas de bouton agrandir) */
@media (max-width: 960px) {
.assistant { border-radius: 20px; }
.assistant__tete { padding: 22px 20px 72px; }
.assistant__tete .assistant__marque { margin-bottom: 22px; }
.assistant__titre { font-size: 26px; }
.assistant__corps { padding: 0 14px 16px; }
.assistant .assistant__fil .msg { max-width: 86%; font-size: 15px; }
.assistant .assistant__champ { font-size: 16px; }
}
@media (max-width: 640px) {
.assistant.bobby-plein, .assistant.bobby-plein.is-agrandi { left: 0; top: 0; right: 0; bottom: auto; width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.assistant.bobby-plein.is-open { transition: opacity .2s ease, visibility 0s; }
.bp-agrandir { display: none; }
.bp-tete { padding: 14px 10px 72px 18px; }
.bp-accueil { margin-top: 32px; font-size: 26px; }
.bp-corps { padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
.bobby-plein.a-commence .bp-tete { padding-bottom: 12px; }
.bobby-plein.a-commence .bp-corps { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.assistant.bobby-plein.a-commence .assistant__fil { margin: 0 -12px 10px; padding: 14px 12px 4px; }
.assistant.bobby-plein .assistant__fil .msg { max-width: 86%; }
.bobby-flottant__btn { right: 16px; bottom: 16px; }
.assistant .assistant__champ { text-overflow: ellipsis; }
.assistant .assistant__champ::placeholder { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.assistant.bobby-plein, .assistant.bobby-plein.is-agrandi { transform: none; transition: opacity .12s ease, visibility 0s linear .12s; }
.assistant.bobby-plein.is-open { transition: opacity .12s ease, visibility 0s; }
.bobby-flottant__btn, .bobby-flottant__btn .bf-icone { transition: opacity .15s; }
.bobby-flottant__btn:hover { transform: none; }
.bobby-flottant__btn .bf-chevron, .bobby-flottant__btn.is-ouvert .bf-tete { transform: none; }
}
html.bobby-plein-ouvert .bobby-flottant__btn.bobby-flottant__btn { opacity: 0; pointer-events: none; } /* plein écran : la fenêtre a sa propre croix */
/* Mot tournant de l'accroche : les étoiles étaient trop brutales, retour à l'effet « bug » d'avant, en serif italique (04/10, demande Maxime) */
@font-face { font-family: "Newsreader"; font-weight: 400 600; font-style: italic; src: url("fonts/newsreader-italic.woff2") format("woff2"); font-display: swap; }
.hero--gleap .tourne { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
/* Logo du pied de page en noir, raccord avec le menu (04/10, demande Maxime) : l'image d'origine reste orange pour les autres usages */
.footer__logo img { filter: brightness(0); }
/* Il apprend : la scène devient une fiche blanche posée sur la peinture, image à gauche (zigzag avec « Sécurisée », façon gleap.ai), 04/10/2026, demande Axel */
.apprend__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; }
.apprend__toile { order: -1; display: flex; align-items: center; justify-content: center; min-height: 540px; padding: 48px 40px; border-radius: var(--r); background: #c9d6ee var(--peinture-2) center / cover no-repeat; }
@media (max-width: 960px) {
.apprend__grid { grid-template-columns: 1fr; gap: 32px; }
.apprend__toile { order: 0; min-height: 0; padding: 32px 14px; }
}
/* La fiche devient le « cerveau » de Bobby, même langage que les cartes « La même tâche » (05/10/2026, demande Axel) :
chaque consigne du client s'affiche en bulle, file de Bobby vers sa place le long d'un rayon et s'y pose en tuile cochée ;
la frise Semaine 1 → Semaine 12 avance en bas. Moteur commun : script.js, bloc « Trois métiers » (data-scene). */
.apprend { --encre: #0d0f14; --muet: rgba(53,53,53,.7); }
.ap-fiche { max-width: 460px; padding: 18px 20px 0; }
.ap-fiche .tc-barre-bas { margin: 0 -20px !important; padding: 14px 20px; font-size: 13px; }
.ap-bulles { display: grid; align-items: start; min-height: 64px; margin: 12px 0 0 34px; }
.ap-bulle { grid-area: 1 / 1; justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 14px; border-top-left-radius: 4px; background: #f2f2f4; font-size: 14px; line-height: 1.4; color: #191919;
opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.4,.5,1); }
.ap-bulle--fin { justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(11,11,11,.1); background: #fff; box-shadow: none; font-size: 13px; }
.ap-fiche[data-etape="1"] .ap-bulle--1, .ap-fiche[data-etape="2"] .ap-bulle--2, .ap-fiche[data-etape="3"] .ap-bulle--3,
.ap-fiche[data-etape="4"] .ap-bulle--4, .ap-fiche[data-etape="5"] .ap-bulle--5, .ap-fiche[data-etape="6"] .ap-bulle--6, .ap-fiche[data-etape="7"] .ap-bulle--fin { opacity: 1; transform: none; transition-delay: .1s; }
.ap-cerveau { position: relative; height: 276px; margin: 8px 0 12px; container-type: size; }
.ap-rayon { stroke: #FB4D17; stroke-width: 2 !important; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ap-point { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FB4D17; box-shadow: 0 0 0 4px rgba(251,77,23,.18); opacity: 0; }
.ap-slot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; justify-items: center; gap: 7px; translate: -50% -25px; }
:where(.ap-tuile) { --tuile: #0a0a0a; --visage: #fff; }
.ap-vide, .ap-tuile { grid-area: 1 / 1; width: 50px; height: 50px; border-radius: 15px; }
.ap-vide { box-sizing: border-box; border: 1.5px dashed #d4d4d8; background: #fff; transition: opacity .3s ease; }
.ap-tuile { position: relative; display: grid; place-items: center; background: var(--tuile); opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
.ap-tuile svg { width: 24px; height: 24px; stroke: var(--visage); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap-tuile .tc-ok { position: absolute; right: -5px; top: -5px; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.ap-slot small { font-size: 12px; line-height: 1.2; color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(-3px); transition: opacity .35s ease, transform .35s ease; }
.ap-fiche[data-etape="1"] .ap-rayon--1, .ap-fiche[data-etape="2"] .ap-rayon--2, .ap-fiche[data-etape="3"] .ap-rayon--3,
.ap-fiche[data-etape="4"] .ap-rayon--4, .ap-fiche[data-etape="5"] .ap-rayon--5, .ap-fiche[data-etape="6"] .ap-rayon--6 { opacity: 1; animation: tc-rayon .6s cubic-bezier(.4,0,.2,1) .35s both; }
.ap-fiche[data-etape="1"] .ap-point--1, .ap-fiche[data-etape="2"] .ap-point--2, .ap-fiche[data-etape="3"] .ap-point--3,
.ap-fiche[data-etape="4"] .ap-point--4, .ap-fiche[data-etape="5"] .ap-point--5, .ap-fiche[data-etape="6"] .ap-point--6 { animation: tc-file .7s cubic-bezier(.4,0,.2,1) .35s both; }
.ap-fiche.e1 .ap-slot--1 :is(.ap-tuile, small), .ap-fiche.e2 .ap-slot--2 :is(.ap-tuile, small), .ap-fiche.e3 .ap-slot--3 :is(.ap-tuile, small),
.ap-fiche.e4 .ap-slot--4 :is(.ap-tuile, small), .ap-fiche.e5 .ap-slot--5 :is(.ap-tuile, small), .ap-fiche.e6 .ap-slot--6 :is(.ap-tuile, small) { opacity: 1; transform: none; transition-delay: .9s; }
.ap-fiche.e1 .ap-slot--1 .ap-vide, .ap-fiche.e2 .ap-slot--2 .ap-vide, .ap-fiche.e3 .ap-slot--3 .ap-vide,
.ap-fiche.e4 .ap-slot--4 .ap-vide, .ap-fiche.e5 .ap-slot--5 .ap-vide, .ap-fiche.e6 .ap-slot--6 .ap-vide { opacity: 0; transition-delay: .9s; }
.ap-fiche.e1 .ap-slot--1 .tc-ok, .ap-fiche.e2 .ap-slot--2 .tc-ok, .ap-fiche.e3 .ap-slot--3 .tc-ok,
.ap-fiche.e4 .ap-slot--4 .tc-ok, .ap-fiche.e5 .ap-slot--5 .tc-ok, .ap-fiche.e6 .ap-slot--6 .tc-ok { opacity: 1; transform: none; transition-delay: 1.15s; }
/* Bobby, au centre, cligne à chaque consigne ; un halo orange part de lui ; à la fin, il saute */
.ap-fiche .tc-centre::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px #FB4D17; opacity: 0; }
@keyframes ap-halo { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes ap-halo2 { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.ap-fiche:is([data-etape="1"], [data-etape="3"], [data-etape="5"]) .tc-centre::after { animation: ap-halo .8s ease-out .2s; }
.ap-fiche:is([data-etape="2"], [data-etape="4"], [data-etape="6"]) .tc-centre::after { animation: ap-halo2 .8s ease-out .2s; }
.ap-fiche:is([data-etape="1"], [data-etape="3"], [data-etape="5"]) .tc-centre .yeux { animation: tc-cligne .35s ease .15s; }
.ap-fiche:is([data-etape="2"], [data-etape="4"], [data-etape="6"]) .tc-centre .yeux { animation: tc-cligne2 .35s ease .15s; }
.ap-fiche[data-etape="7"] .tc-centre .tete { animation: tc-saut .9s cubic-bezier(.3,1.4,.5,1) both; }
@media (max-width: 960px) {
.ap-fiche { padding: 16px 16px 0; }
.ap-fiche .tc-barre-bas { margin: 0 -16px !important; padding: 13px 16px; }
.ap-bulles { margin-left: 0; min-height: 62px; }
.ap-bulle { font-size: 13.5px; }
.ap-cerveau { height: 262px; }
}
@media (max-width: 420px) { .ap-court { display: none; } .ap-slot small { font-size: 11.5px; } .ap-vide, .ap-tuile { width: 46px; height: 46px; border-radius: 14px; } .ap-slot { translate: -50% -23px; } }
@media (prefers-reduced-motion: reduce) {
.ap-rayon, .ap-point, .ap-fiche .tc-centre::after { opacity: 0 !important; animation: none !important; }
.ap-tuile, .ap-slot small, .ap-tuile .tc-ok, .ap-bulle { transition: none !important; }
}
/* ---------- Les Bobby : quatre cartes pastel, un Bobby par métier, façon « Meet the agents » de gleap.ai (04/10/2026, demande Axel) ---------- */
.sec.equipe-bobby { padding: 96px 0 72px; background: #fff; }
.equipe-bobby__tete .p { margin-top: 12px; color: var(--ink-3, #8a8a85); font-size: 18px; }
.equipe-bobby__grille { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.carte-bobby { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 18px; color: #191919; text-decoration: none; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.carte-bobby:hover { transform: translateY(-3px); }
.carte-bobby__ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.carte-bobby__ico svg { width: 40px; height: 40px; }
.carte-bobby__nom { margin-top: 22px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.carte-bobby__role { margin-top: 6px; font-size: 15px; color: #3a3a37; }
.carte-bobby__txt { margin-top: 16px; font-size: 14px; line-height: 1.6; color: #5d5d58; flex: 1; }
.carte-bobby__pied { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.1); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #4a4a46; }
.carte-bobby__pied svg { width: 12px; height: 12px; flex: none; }
.carte-bobby--cm { background: #eff0f3; } .carte-bobby--cm .carte-bobby__ico { background: #191919; color: #fff; }
.carte-bobby--admin { background: #dff2fa; } .carte-bobby--admin .carte-bobby__ico { background: #9fe0f7; color: #12384a; }
.carte-bobby--compta { background: #f1e1fb; } .carte-bobby--compta .carte-bobby__ico { background: #e3c4f7; color: #4a1f63; }
.carte-bobby--web { background: #fdeed6; } .carte-bobby--web .carte-bobby__ico { background: #fbd3a8; color: #5a3410; }
@media (max-width: 1000px) { .equipe-bobby__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sec.equipe-bobby { padding: 64px 0 48px; } .equipe-bobby__grille { grid-template-columns: 1fr; } }
/* Les Bobby, animations façon gleap.ai (04/10/2026, demande Axel) : les cartes montent l'une après l'autre à l'arrivée,
au survol la carte se soulève, la tête penche et la flèche file en diagonale ; chaque Bobby cligne de l'œil gauche
de temps en temps (script.js), l'œil droit est remplacé par le symbole de son métier (cœur, coche, euro, chevron). */
.carte-bobby:hover .carte-bobby__ico, .carte-bobby:focus-visible .carte-bobby__ico { transform: translateY(-3px) rotate(-5deg); }
.carte-bobby__pied svg { transition: transform .25s; }
.carte-bobby:hover .carte-bobby__pied svg { transform: translate(3px, -3px); }
.carte-bobby__oeil { transform-box: fill-box; transform-origin: center; transition: transform .07s ease; }
.carte-bobby.cligne .carte-bobby__oeil { transform: scaleY(.12); }
.js .equipe-bobby__grille .carte-bobby { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .equipe-bobby__grille.is-in .carte-bobby { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i) * 90ms), transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i) * 90ms); }
.js .equipe-bobby__grille.is-in .carte-bobby.is-pret { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.js .equipe-bobby__grille.is-in .carte-bobby.is-pret:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
.js .equipe-bobby__grille .carte-bobby { opacity: 1; transform: none; transition: none; }
.carte-bobby, .carte-bobby__ico, .carte-bobby__pied svg { transition: none; }
.carte-bobby:hover, .carte-bobby:hover .carte-bobby__ico, .carte-bobby:hover .carte-bobby__pied svg { transform: none; }
}
/* ---------- Intégrations : clavier d'outils façon superwhisper.com, remplace « Vos tâches, vos outils. » (04/10, demande Axel) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.integr { position: relative; height: 820px; overflow: hidden; background: var(--paper); }
.integr__tete { position: relative; z-index: 3; text-align: center; padding: 104px var(--gutter) 0; }
.integr__meta { font-size: 15px; font-weight: 500; color: #FB4D17; margin-bottom: 14px; }
.integr__titre { font-size: clamp(38px, 5.4vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.integr__titre .g { color: #a3a39e; }
.integr__sous { margin-top: 26px; font-size: 17px; line-height: 1.5; color: var(--ink-3); }
.integr__sous b { font-weight: 400; color: var(--ink); }
.integr__cta { margin-top: 26px; } /* bouton vers /connexions, centré sous la phrase ; la section a grandi d'autant pour laisser respirer le clavier (06/10/2026, demande Axel) */
.integr__scene { position: absolute; inset: 0; pointer-events: none; }
.integr__scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, var(--paper), rgba(255,255,255,0)); z-index: 2; } /* le clavier se fond dans le blanc en bas */
.clavier { --k: 46px; --e: 5px; position: absolute; left: 50%; bottom: 96px; width: calc(14 * var(--k) + 13 * var(--e) + 22px); padding: 11px; display: flex; flex-direction: column; gap: var(--e);
border-radius: 16px; border: 1.5px solid #a7a7a7; background: linear-gradient(#7e7e7e, #4e4e4e);
box-shadow: none;
transform: translate3d(-50%, 380px, 0) rotate(-20deg); transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; pointer-events: auto; }
.clavier__rang { display: flex; gap: var(--e); position: relative; }
.touche { position: relative; flex: none; width: var(--k); height: var(--k); border-radius: 9px; background: linear-gradient(#1c1c1e, #0f0f10);
box-shadow: none; }
.touche__in { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 3.5px); border-radius: 8px;
background: linear-gradient(#101012, #27272a); box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.2); transition: transform .1s; overflow: hidden; }
.touche__app { position: absolute; inset: 0; background: var(--bg, #fff); display: grid; place-items: center; }
.touche__app img { width: 62%; height: 62%; object-fit: contain; }
.touche__app i { width: 58%; height: 58%; background: var(--fg, #fff); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.touche__app b { font: 700 calc(var(--k) * .46) / 1 var(--font); color: #fff; letter-spacing: -.02em; }
.touche__app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18); } /* relief de la touche par-dessus le logo */
/* Appui d'une touche : elle s'enfonce par un simple déplacement, sur sa propre couche. Avant, l'appui changeait la taille et l'ombre
de la touche et obligeait le navigateur à redessiner tout le clavier pendant qu'il glissait, d'où les à-coups (05/10/2026, demande Axel) */
.touche:has(.touche__app) .touche__in { will-change: transform; }
.touche:hover .touche__in, .touche.is-appui .touche__in { transform: translateY(1.5px); transition-duration: .01s; }
.clavier.is-glisse { pointer-events: none; }
.touche--tab { width: calc(var(--k) * 1.5); } .touche--caps { width: calc(var(--k) * 1.8); } .touche--shift { width: calc(var(--k) * 2.3); } .touche--cmd { width: calc(var(--k) * 1.3); }
.touche--fin { flex: 1 1 auto; width: auto; } /* dernière touche du rang : comble jusqu'au bord, rangs alignés à droite */
.touche--demi { height: calc((var(--k) - 2px) / 2); }
.touche-pile { display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; }
@media (max-width: 760px) {
.integr { height: 590px; }
.integr__cta { margin-top: 20px; }
.integr__tete { padding-top: 64px; }
.integr__titre { font-size: 34px; } .integr__br { display: none; }
.integr__sous { font-size: 15px; margin-top: 18px; }
.clavier { --k: 23px; --e: 3px; padding: 6px; border-radius: 10px; bottom: 70px; }
.touche__app::after { box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18); }
.touche, .touche__in { border-radius: 6px; }
/* moins de blanc entre le clavier et « Sécurisée » sur téléphone (09/10/2026, demande Maxime) */
.integr { height: 550px; } .clavier { bottom: 30px; } .integr__scene::after { height: 10%; }
.integr + .securite { padding-top: 40px; }
}
.touche--bobby img { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%, -52%); object-fit: contain; } /* tête de Bobby, dessin blanc sur la touche noire */
/* ---------- Menu en pilule sombre façon superwhisper.com : logo, liens, bouton Démo (04/10, demande Axel) ---------- */
.nav.nav--pilule, .accueil .nav.nav--pilule:not(.is-clair), .accueil .nav.nav--pilule:not(.is-clair):not(.is-scrolled) { position: sticky; top: 0; height: 0; padding: 0; margin: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; z-index: 100; }
.pil { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; height: 58px; padding: 6px 6px 6px 22px; white-space: nowrap; width: max-content; /* sans ça, la pilule était bridée à la moitié de l'écran et écrasait le bouton Démo */
background: rgba(14,14,14,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; box-shadow: none; }
.pil__logo { display: flex; align-items: center; margin-right: 14px; }
.pil__logo svg { height: 21px; width: auto; display: block; }
.pil__logo .mot { fill: #fff; } .pil__logo .sigle > g { stroke: #fff; }
.pil__menu { display: flex; align-items: center; gap: 2px; font-size: 16px; }
.pil__menu a { padding: 8px 13px; color: #8b8b88; transition: color .2s ease; }
.pil__menu a:hover, .pil__menu a[aria-current] { color: #fff; }
.pil__cta { display: flex; align-items: center; gap: 9px; height: 46px; margin-left: 10px; padding: 0 22px 0 17px; border-radius: 999px; background: #fff; color: #111; font-size: 16px; font-weight: 500; transition: background .2s ease; }
.pil__cta:hover { background: #fff; } /* le contour de couleur suffit au survol */
.pil__cta svg { width: 21px; height: 21px; }
/* Bouton « Démo » vivant (05/10/2026, demande Axel) : le Bobby respire, cligne des yeux et son antenne s'allume en continu ;
au survol, un contour de couleur tourne autour du bouton et Bobby fait un petit saut. */
@property --pil-angle { syntax: ''; inherits: false; initial-value: 0deg; }
.pil__cta { position: relative; isolation: isolate; flex-shrink: 0; }
.pil__cta::before { content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--pil-angle), #FB4D17, #FFBD2E, #91E0FF, #C77DFF, #FF6FB5, #FB4D17); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s ease; animation: pil-tour 2.4s linear infinite paused; }
.pil__cta:hover::before, .pil__cta:focus-visible::before { opacity: 1; animation-play-state: running; }
@keyframes pil-tour { to { --pil-angle: 360deg; } }
.pil__cta svg { overflow: visible; animation: pil-respire 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.pil__cta svg path:nth-of-type(n+4) { transform-box: fill-box; transform-origin: center; animation: pil-cligne 4.8s ease-in-out infinite; }
.pil__cta svg path:nth-of-type(3) { animation: pil-antenne 1.6s ease-in-out infinite; }
@keyframes pil-respire { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) rotate(-4deg); } }
@keyframes pil-cligne { 0%, 44%, 52%, 100% { transform: none; } 48% { transform: scaleY(.1); } }
@keyframes pil-antenne { 0%, 100% { stroke: currentColor; } 50% { stroke: #FB4D17; } }
.pil__cta:hover svg { animation: pil-saut .7s cubic-bezier(.3,.7,.4,1.4) both; }
@keyframes pil-saut { 0%, 100% { transform: none; } 40% { transform: translateY(-4px) rotate(-10deg); } 70% { transform: translateY(0) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .pil__cta svg, .pil__cta svg path, .pil__cta::before { animation: none !important; } }
/* Même contour de couleur tournant au survol sur tous les boutons importants du site (05/10/2026, demande Axel) */
.btn:not(.nav__cta) { position: relative; isolation: isolate; }
.btn:not(.nav__cta)::before { content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--pil-angle), #FB4D17, #FFBD2E, #91E0FF, #C77DFF, #FF6FB5, #FB4D17); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s ease; animation: pil-tour 2.4s linear infinite paused; pointer-events: none; }
.btn:not(.nav__cta):hover::before, .btn:not(.nav__cta):focus-visible::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .btn::before { animation: none !important; } }
.pil__burger { display: none; }
@media (max-width: 760px) {
.pil { top: 10px; left: 12px; right: 12px; width: auto; transform: none; height: 54px; padding: 5px 5px 5px 18px; gap: 4px; }
.pil__logo { margin-right: auto; } .pil__logo svg { height: 19px; }
.pil__cta { height: 44px; margin-left: 0; padding: 0 16px 0 13px; font-size: 15px; }
.pil__burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.pil__burger svg { width: 24px; height: 24px; }
.pil__menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 10px; border-radius: 24px; background: rgba(14,14,14,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: none; font-size: 19px; }
.pil__menu a { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pil__menu a:last-child { border-bottom: 0; }
.nav--pilule.is-open .pil__menu { display: flex; }
}
.nav.nav--pilule { pointer-events: none; } .pil { pointer-events: auto; }
body:not(.accueil) .nav.nav--pilule { height: 64px; } /* pages intérieures : on garde la place de l'ancien menu, le contenu ne passe pas sous la pilule */
/* ---------- Menu « Bobby » (06/10/2026, demande Axel) : panneau déroulant façon gleap.ai, sombre comme la pilule.
Ordinateur : s'ouvre au survol (et au clic, au clavier) sous la pilule ; téléphone : s'ouvre au toucher dans le menu. Code : script.js. ---------- */
.pil__deroul { display: flex; }
.pil__declic { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px 8px 13px; border: 0; background: none; font: inherit; color: #8b8b88; cursor: pointer; transition: color .2s ease; }
.pil__declic svg { width: 12px; height: 12px; transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
.pil__declic:hover, .pil__declic[aria-current], .pil__deroul.is-ouvert .pil__declic { color: #fff; }
.pil__deroul.is-ouvert .pil__declic svg { transform: rotate(180deg); }
.pil__panneau { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 3; width: 820px; max-width: calc(100vw - 32px); padding: 22px; border-radius: 26px; white-space: normal; text-align: left;
background: #0e0e0e; border: 1px solid rgba(255,255,255,.14); box-shadow: none; /* fond plein : sous le flou de la pilule, un fond translucide laissait voir la page */
opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.985); transform-origin: 50% 0; transition: opacity .22s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s; }
.pil__panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* pont invisible : la souris passe de la pilule au panneau sans le refermer */
.pil__deroul.is-ouvert .pil__panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility 0s; }
.pil__panneau-tete { padding: 2px 6px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.pil__panneau-titre { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; color: #fff; }
.pil__panneau-sous { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: #9a9a96; }
.pil__panneau-corps { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; padding-top: 16px; }
.pil__facettes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.pil__menu .pil__panneau .pil__facette { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 0; border-radius: 16px; color: #fff; transition: background .2s ease; }
.pil__menu .pil__panneau a.pil__facette:hover, .pil__menu .pil__panneau a.pil__facette:focus-visible { background: rgba(255,255,255,.07); }
.pil__menu .pil__panneau a.pil__facette[aria-current] { background: rgba(255,255,255,.06); }
.pil__tuile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pil__tuile svg { width: 78%; height: 78%; overflow: visible; }
.pil__tuile.equipage__tuile--cm { background: #2a2a2a; }
.pil__facette-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pil__facette-txt b { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pil__facette-txt small { font-size: 13px; line-height: 1.4; color: #9a9a96; }
.pil__fleche { margin-left: auto; align-self: center; color: #9a9a96; transition: transform .25s cubic-bezier(.2,.8,.2,1), color .2s ease; }
.pil__facette:hover .pil__fleche { transform: translateX(3px); color: #fff; }
.pil__facette.is-bientot { cursor: default; }
.pil__facette.is-bientot .pil__tuile, .pil__facette.is-bientot .pil__facette-txt { opacity: .55; }
.pil__bientot { flex: none; align-self: flex-start; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #d6d6d2; font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.6; }
.pil__socle { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 4px 18px; border-left: 1px solid rgba(255,255,255,.09); }
.pil__socle-titre { margin: 0 0 6px; padding: 0 8px; font-size: 12px; letter-spacing: .02em; color: #8b8b88; }
.pil__menu .pil__panneau .pil__socle-lien { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; color: #fff; transition: background .2s ease; }
.pil__menu .pil__panneau .pil__socle-lien:hover, .pil__menu .pil__panneau .pil__socle-lien:focus-visible { background: rgba(255,255,255,.07); }
.pil__socle-lien b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pil__socle-lien small { display: block; font-size: 12px; color: #9a9a96; }
.pil__socle-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.07); color: #d6d6d2; }
.pil__socle-ico svg { width: 17px; height: 17px; }
html[data-theme="nuit"] .pil__panneau { background: #1e1e1e; border-color: rgba(255,255,255,.16); }
html[data-theme="nuit"] .pil__declic { color: #a3a3a0; }
html[data-theme="nuit"] .pil__declic:hover, html[data-theme="nuit"] .pil__declic[aria-current], html[data-theme="nuit"] .pil__deroul.is-ouvert .pil__declic { color: #fff; }
@media (max-width: 1000px) and (min-width: 761px) { .pil__menu a, .pil__declic { padding-left: 9px; padding-right: 9px; } .pil__logo { margin-right: 8px; } }
/* « Formation » ajouté au menu (08/10/2026) : sur les petites tablettes, la pilule se resserre pour ne pas déborder */
@media (max-width: 900px) and (min-width: 761px) { .pil { padding-left: 16px; gap: 4px; } .pil__menu { font-size: 15px; } .pil__menu a, .pil__declic { padding-left: 6px; padding-right: 6px; } .pil__logo { margin-right: 4px; } }
@media (max-width: 830px) and (min-width: 761px) { .pil__menu { font-size: 14px; } .pil__menu a, .pil__declic { padding-left: 4px; padding-right: 4px; } }
@media (prefers-reduced-motion: reduce) { .pil__panneau, .pil__declic svg { transition: none !important; } }
/* ---------- Menu « Bobby » sur ordinateur : les facettes en badges suspendus à leur cordon, sur une rangée, comme les badges
du menu de gleap.ai (06/10/2026, demande Axel). Mesures relevées sur gleap (badge 96 px, carte 5/7, bande 46 %, cordon 7 x 16,
attache 18 x 9, écart 14 px), ici agrandies de 30 % pour les noms de Bobby. Ouverture : fondu et 6 px de descente du panneau
en 0,2 s (comme gleap) ; fermeture sans transition ; survol : le badge se balance sur son cordon (script.js).
Téléphone et tablette : la liste des facettes, inchangée. ---------- */
.pil__badges { display: none; }
@media (min-width: 1024px) and (hover: hover) {
.pil__panneau { width: 880px; padding: 24px; border-radius: 18px; }
.pil__panneau-tete { padding: 2px 2px 18px; }
.pil__panneau-corps { grid-template-columns: max-content minmax(0, 1fr); gap: 0 36px; padding-top: 0; }
.pil__facettes { display: none; }
.pil__badges { display: grid; grid-template-columns: repeat(4, 124px); gap: 18px; padding-bottom: 6px; }
.pil__socle { margin-top: 18px; padding: 2px 0 2px 24px; }
.pil__panneau { transform: translate(-50%, -6px); transition: none; }
.pil__deroul.is-ouvert .pil__panneau { transform: translate(-50%, 0); transition: none; animation: pil-panneau-entre .2s ease-out both; }
@keyframes pil-panneau-entre { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pil__badge { --bande: #dfe1e6; --encre: #191919; --cordon: #b8bcc6; position: relative; display: flex; flex-direction: column; align-items: center; color: #292929; text-decoration: none; cursor: pointer; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
.pil__badge--web { --bande: #fbd3a8; --encre: #5a3410; --cordon: #f2b578; }
.pil__badge--compta { --bande: #e3c4f7; --encre: #4a1f63; --cordon: #cf9ff0; }
.pil__badge--admin { --bande: #9fe0f7; --encre: #12384a; --cordon: #63c8ec; }
.pil__badge.is-bientot { cursor: default; }
.pil__menu .pil__panneau .pil__badge { padding: 0; border: 0; color: #292929; } /* pas le retrait des liens du menu */
.pil__badge-cordon { width: 9px; height: 21px; border-radius: 0 0 2px 2px; background: var(--cordon); }
.pil__badge-corde { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pil__badge-corde path { fill: none; stroke: var(--cordon); stroke-linejoin: round; }
.pil__badge.is-libre { z-index: 3; } .pil__badge.is-libre .pil__badge-cordon { visibility: hidden; }
.pil__badge-corps { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; transform-origin: 50% 0; }
.pil__badge.is-libre .pil__badge-corps { will-change: transform; }
.pil__badge-attache { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 23px; height: 12px; margin-bottom: -5px; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; background: #ececea; }
.pil__badge-attache span { width: 10px; height: 3px; border-radius: 99px; background: rgba(0,0,0,.14); }
.pil__badge-carte { display: flex; flex-direction: column; align-items: center; width: 100%; aspect-ratio: 5 / 7; overflow: hidden; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; background: #fff; text-align: center;
box-shadow: none; transition: box-shadow .3s; }
.pil__badge:hover .pil__badge-carte { box-shadow: none; }
.pil__badge:focus-visible { outline: 0; } .pil__badge:focus-visible .pil__badge-carte { outline: 2px solid #FB4D17; outline-offset: 3px; }
.pil__badge-bande { position: relative; flex: 0 0 auto; width: 100%; height: 46%; background: var(--bande); }
.pil__badge-fente { position: absolute; top: 10px; left: 50%; width: 26px; height: 5px; transform: translateX(-50%); border-radius: 99px; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.pil__badge-no { position: absolute; top: 8px; left: 9px; color: var(--encre); font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .4px; opacity: .7; }
.pil__badge--cm .pil__badge-no { opacity: 1; }
.pil__badge-bientot { position: absolute; top: 5px; right: 6px; padding: 2px 5px; border-radius: 99px; background: rgba(255,255,255,.72); color: var(--encre); font-size: 8.5px; font-style: normal; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.pil__badge-visage { position: relative; z-index: 1; display: flex; margin-top: -27px; padding: 3px; border-radius: 14px; background: #fff; box-shadow: none; }
.pil__badge-tuile { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: var(--bande); color: var(--encre); }
.pil__badge--cm .pil__badge-tuile { background: #191919; color: #fff; }
.pil__badge-tuile svg { width: 80%; height: 80%; overflow: visible; }
.pil__badge-nom { margin-top: auto; padding: 0 4px; color: #292929; font-size: 13px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; }
.pil__badge-role { margin: 2px 0 auto; padding: 0 8px; color: #6b6b6b; font-size: 11.5px; line-height: 1.3; }
/* jour : panneau blanc, comme gleap ; nuit : le panneau sombre du site, badges blancs */
html[data-theme="jour"] .pil__panneau { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: none; }
html[data-theme="jour"] .pil__panneau-titre { color: #191919; }
html[data-theme="jour"] .pil__panneau-sous { color: #6b6b6b; }
html[data-theme="jour"] .pil__panneau-tete { border-bottom-color: rgba(0,0,0,.08); }
html[data-theme="jour"] .pil__socle { border-left-color: rgba(0,0,0,.08); }
html[data-theme="jour"] .pil__socle-titre { color: #8a8a86; }
html[data-theme="jour"] .pil__menu .pil__panneau .pil__socle-lien { color: #191919; }
html[data-theme="jour"] .pil__menu .pil__panneau .pil__socle-lien:hover, html[data-theme="jour"] .pil__menu .pil__panneau .pil__socle-lien:focus-visible { background: #f4f4f2; }
html[data-theme="jour"] .pil__socle-lien small { color: #6b6b6b; }
html[data-theme="jour"] .pil__socle-ico { background: #f2f2f0; color: #191919; }
html[data-theme="nuit"] .pil__badge-carte { border-color: rgba(255,255,255,.12); box-shadow: none; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) { .pil__deroul.is-ouvert .pil__panneau { animation: none; } .pil__badge-carte { transition: none; } }
@media (max-width: 760px) {
.pil__menu { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] .pil__menu { background: #0e0e0e; } /* fond plein : sous le flou de la pilule, le fond translucide laissait voir la page */
html[data-theme="nuit"] .pil__menu { background: #1e1e1e; }
.pil__deroul { flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.08); }
.pil__declic { justify-content: space-between; width: 100%; padding: 13px 12px; }
.pil__declic svg { width: 16px; height: 16px; }
.pil__panneau { position: static; display: none; width: auto; max-width: none; padding: 0 0 10px; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
.pil__panneau::before { display: none; }
.pil__deroul.is-ouvert .pil__panneau { display: block; transform: none; }
.pil__panneau-tete { padding: 0 12px 12px; border: 0; }
.pil__panneau-titre { font-size: 16px; } .pil__panneau-sous { font-size: 13px; }
.pil__panneau-corps { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 0; }
.pil__facettes { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pil__menu .pil__panneau .pil__facette { padding: 10px 12px; font-size: 16px; }
.pil__tuile { width: 36px; height: 36px; border-radius: 11px; }
.pil__socle { padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
.pil__socle-titre { padding: 4px 12px 0; }
.pil__menu .pil__panneau .pil__socle-lien { padding: 8px 12px; }
}
/* ---------- Parcours façon gleap.ai/close-the-loop (05/10/2026, demande Axel) ----------
Un grand texte qui fonce mot à mot au défilement, puis un rail : un trait de lumière court d'une étape à l'autre,
s'arrête sous chacune pendant qu'elle s'anime, et la légende du dessous suit. Code : fin de script.js. */
.boucle { background: var(--paper); }
.boucle__meta { max-width: 880px; margin: 0 auto 18px; }
.boucle__intro { max-width: 880px; margin: 0 auto; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.28; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.boucle__intro .mot { position: relative; display: inline-block; color: rgba(41,41,41,.28); }
.boucle__intro .mot::after { content: attr(data-mot); position: absolute; left: 0; top: 0; color: var(--ink); clip-path: inset(0 calc(100% - var(--c, 0%)) 0 0); pointer-events: none; }
.boucle__intro .boucle__suite .mot::after { color: rgba(41,41,41,.55); }
.boucle__rail { --signal: #FB4D17; --piste: #d6d5df; --contour: #dcdce2; --gris: #8a8298; position: relative; max-width: 880px; height: 190px; margin: 56px auto 0; isolation: isolate; }
.boucle__fil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.boucle__fil path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.boucle__piste { stroke: var(--piste); stroke-width: 1.5; }
.boucle__signal { stroke: var(--signal); stroke-width: 2; stroke-dasharray: 0 100000; }
.boucle__noeud { position: absolute; left: var(--x); top: var(--y); height: 62px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* mêmes positions que le rail de gleap.ai/close-the-loop */
.boucle__noeud--1 { --x: 5%; --y: 31.58%; } .boucle__noeud--2 { --x: 21.43%; --y: 31.58%; } .boucle__noeud--3 { --x: 39.29%; --y: 62.1%; }
.boucle__noeud--4 { --x: 58.04%; --y: 31.58%; } .boucle__noeud--5 { --x: 77.68%; --y: 62.1%; } .boucle__noeud--6 { --x: 95%; --y: 62.1%; }
.boucle__id { display: flex; align-items: center; justify-content: center; gap: 5px; background: #fff; padding: 5px; border: 1px solid var(--contour); border-radius: 20px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.boucle__noeud:hover .boucle__id, .boucle__noeud:focus-visible .boucle__id { transform: translateY(-5px) rotate(-3deg); border-color: rgba(251,77,23,.45); }
.boucle__noeud:focus-visible { outline: none; }
.boucle__noeud.is-passage .boucle__id { border-color: var(--signal); }
.boucle__id--rond { box-sizing: border-box; width: 38px; height: 38px; border-radius: 50%; padding: 8px; color: var(--gris); }
.boucle__id--rond svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.boucle__fin { background: #edf3ed; border-color: #cddbcc; color: #65815e; }
.boucle__fin path { stroke-dasharray: 18; stroke-dashoffset: 0; }
.boucle__noeud--6.is-passage .boucle__fin path { animation: boucle-trace .5s ease both; }
@keyframes boucle-trace { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
/* Les tuiles de couleur : un Bobby par étape, comme les agents de gleap */
.boucle__tuile { --tuile: #0a0a0a; --visage: #fff; position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--tuile); overflow: hidden; transition: box-shadow .3s ease; }
.boucle__tuile--noire { --tuile: #0a0a0a; --visage: #fff; }
.boucle__tuile--cyan { --tuile: #91E0FF; --visage: #12425C; }
.boucle__tuile--rose { --tuile: #F1CCFF; --visage: #5D2A6F; }
.boucle__noeud.is-travail .boucle__tuile { box-shadow: 0 0 0 3px rgba(251,77,23,.14); }
.boucle__bobby { width: 40px; height: 40px; overflow: visible; transition: transform .4s cubic-bezier(.5,0,.2,1), opacity .3s; }
.boucle__bobby g, .boucle__bobby path { fill: none; stroke: var(--visage); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.boucle__bobby .tete { transform-box: view-box; transform-origin: 61px 65px; }
.boucle__bobby .yeux, .boucle__bobby .glyphe path { transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.5,0,.2,1), opacity .2s; }
.boucle__bobby .glyphe path { transform: scale(0); opacity: 0; }
.boucle__bobby .glyphe--points path { stroke-width: 5.5; }
.boucle__bobby .glyphe--lignes path { transform-origin: left center; }
/* au travail : les yeux se ferment, le geste de l'étape apparaît */
.is-travail .boucle__bobby .yeux { transform: scaleY(0); opacity: 0; transition-delay: 0s; }
.is-travail .boucle__bobby .glyphe path { transform: none; opacity: 1; transition-delay: .3s; }
.is-travail .glyphe--points path { animation: boucle-point 1.1s ease-in-out .7s infinite; }
.is-travail .glyphe--points path:nth-child(2) { animation-delay: .85s; }
.is-travail .glyphe--points path:nth-child(3) { animation-delay: 1s; }
@keyframes boucle-point { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-9px); } }
.is-travail .glyphe--lignes path { animation: boucle-tape 1.8s steps(5) .7s infinite; }
.is-travail .glyphe--lignes path:nth-child(2) { animation-delay: 1.1s; }
.is-travail .glyphe--lignes path:nth-child(3) { animation-delay: 1.5s; }
@keyframes boucle-tape { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
/* installation : Bobby s'efface, vos outils se branchent un à un dans la tuile */
.boucle__outils { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.boucle__outils img { grid-area: 1 / 1; width: 34px; height: 34px; box-sizing: border-box; padding: 5px; border-radius: 50%; background: #fff; object-fit: contain; transform: scale(0); opacity: 0; }
.boucle__noeud--3.is-travail .boucle__bobby { transform: scale(0); opacity: 0; }
.boucle__noeud--3.is-travail .boucle__outils img { animation: boucle-outil .8s cubic-bezier(.3,1.4,.5,1) both; }
.boucle__noeud--3.is-travail .boucle__outils img:nth-child(1) { animation-delay: .3s; }
.boucle__noeud--3.is-travail .boucle__outils img:nth-child(2) { animation-delay: 1.1s; }
.boucle__noeud--3.is-travail .boucle__outils img:nth-child(3) { animation: boucle-outil-fin 1.1s cubic-bezier(.3,1.4,.5,1) 1.9s both; }
@keyframes boucle-outil { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 22%, 82% { transform: none; opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes boucle-outil-fin { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 16%, 86% { transform: none; opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
/* fin du travail : petit saut content */
.is-content .boucle__bobby .tete { animation: boucle-hop 1.1s both; }
.is-content .boucle__bobby .yeux { animation: boucle-heureux 1.1s both; }
@keyframes boucle-hop { 0%, 25% { transform: none; animation-timing-function: ease-out; } 37% { transform: translateY(-10px); animation-timing-function: ease-in; } 50% { transform: none; animation-timing-function: ease-out; } 58% { transform: translateY(-3px); } 66%, 100% { transform: none; } }
@keyframes boucle-heureux { 0%, 25% { transform: none; } 38%, 78% { transform: scaleY(.35); } 92%, 100% { transform: none; } }
.boucle__noeud--1.is-passage .boucle__bulle .l1, .boucle__noeud--1.is-passage .boucle__bulle .l2 { animation: boucle-ecrit .5s ease-in-out 2; }
@keyframes boucle-ecrit { 50% { opacity: .2; } }
.boucle__id--pilule { height: 61px; box-sizing: border-box; border-radius: 40px; padding: 0 10px; gap: 0; }
.boucle__equipe img { display: block; width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; object-fit: cover; margin-left: -10px; }
.boucle__equipe img:first-child { margin-left: 0; }
.boucle__label { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 160px; font-size: 11px; line-height: 1.3; color: var(--gris); text-align: center; background: #fff; padding: 0 6px; transition: color .3s; }
.boucle__noeud--1 .boucle__label, .boucle__noeud--6 .boucle__label { top: calc(100% - 2px); }
.boucle__noeud--6 .boucle__label { max-width: 80px; }
.boucle__label small { display: block; font-size: 10px; color: #b3aec0; margin-top: 1px; }
.boucle__noeud.is-choisi .boucle__label { color: var(--ink); }
/* le texte détaillé d'une étape n'apparaît qu'au clic */
.boucle__legendes { display: grid; max-width: 640px; min-height: 52px; margin: 18px auto 0; text-align: center; }
.boucle__legendes p { grid-area: 1 / 1; margin: 0; font-size: 16px; line-height: 1.5; color: rgba(53,53,53,.72); opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.boucle__legendes p.is-actif { opacity: 1; transform: none; pointer-events: auto; }
.boucle__legendes b { font-weight: 500; color: var(--ink); }
@media (max-width: 960px) {
.boucle__rail { height: 225px; margin-top: 40px; }
.boucle__noeud { height: 40px; }
.boucle__noeud--1 { --x: 10%; --y: 21.33%; } .boucle__noeud--2 { --x: 42%; --y: 21.33%; } .boucle__noeud--3 { --x: 78%; --y: 21.33%; }
.boucle__noeud--4 { --x: 78%; --y: 65.33%; } .boucle__noeud--5 { --x: 42%; --y: 65.33%; } .boucle__noeud--6 { --x: 10%; --y: 65.33%; }
.boucle__id { padding: 3px; border-radius: 13px; gap: 3px; transition: none; }
.boucle__tuile { width: 32px; height: 32px; border-radius: 9px; } .boucle__bobby { width: 24px; height: 24px; }
.boucle__outils img { width: 22px; height: 22px; padding: 3px; }
.boucle__id--pilule { height: 40px; padding: 0 6px; border-radius: 28px; }
.boucle__equipe img { width: 29px; height: 29px; border-width: 2px; margin-left: -7px; }
.boucle__id--rond { width: 30px; height: 30px; padding: 5px; } .boucle__id--rond svg { width: 19px; height: 19px; }
.boucle__label { font-size: 10px; top: calc(100% + 7px); padding: 0 3px; max-width: 90px; } .boucle__label small { font-size: 9px; }
.boucle__noeud--1 .boucle__label, .boucle__noeud--6 .boucle__label { top: calc(100% + 4px); }
.boucle__legendes p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .boucle__signal { visibility: hidden; } }
/* ---------- Une seule typo partout, celle de « Rencontrez vos Bobby. » (05/10/2026, demande Axel) ----------
Switzer, regular, même taille et même interlettrage pour tous les titres de section. */
.integr__titre, .assistant__titre, .faq-bloc__titre { font-size: clamp(30px, 2.9vw, 40px); font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }
.hero--gleap .tourne { font-family: var(--font); font-style: normal; font-weight: 400; letter-spacing: inherit; }
.b-titre { font-size: clamp(36px, 4.1vw, 56px); letter-spacing: -.025em; line-height: 1.12; }
@media (max-width: 720px) { .integr__titre, .assistant__titre { font-size: 30px; } }
/* ---------- Petits titres de section en orange, comme « Intégrations » (05/10/2026, demande Axel) ---------- */
.meta:not(.footer__col .meta):not(.hg-texte .meta):not(.hero--sombre .meta):not(.dark .meta):not(.duel__head .meta):not(.duel__col--bobby .meta):not(.metier-card .meta) { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #FB4D17; }
/* ---------- Bas de page : l'équipage façon gleap.ai (05/10/2026, demande Axel) ----------
Les quatre Bobby (sans photo, 05/10, demande Axel), inclinés et décalés, qui flottent chacun à leur rythme ; un Bobby au hasard cligne de l'œil
toutes les 3 à 6 s (script.js). Valeurs reprises de la rangée « agent-closing-crew » de gleap. */
.equipage { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 132px; padding: 20px 12px; }
.equipage__membre { --y: 10px; --tilt: -12deg; --duree: 6.8s; --delai: -1.5s; position: relative; flex: 0 0 auto; transform: translateY(var(--y)) rotate(var(--tilt)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.equipage__membre:nth-child(2) { --y: -17px; --tilt: 7deg; --duree: 7.4s; --delai: -4s; }
.equipage__membre:nth-child(3) { --y: -11px; --tilt: -8deg; --duree: 7.1s; --delai: -.6s; }
.equipage__membre:nth-child(4) { --y: 16px; --tilt: 12deg; --duree: 7.7s; --delai: -5s; }
.equipage__membre:hover { transform: translateY(calc(var(--y) - 5px)) rotate(calc(var(--tilt) - 4deg)); }
.equipage__membre > * { display: block; animation: equipage-flotte var(--duree) ease-in-out var(--delai) infinite; }
@keyframes equipage-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.equipage__tuile { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; box-shadow: none; }
.equipage__membre:nth-child(2) .equipage__tuile, .equipage__membre:nth-child(3) .equipage__tuile { width: 64px; height: 64px; border-radius: 19px; }
.equipage__tuile svg { width: 74%; height: 74%; overflow: visible; }
.equipage__tuile--cm { background: #0a0a0a; color: #fff; }
.equipage__tuile--admin { background: #91E0FF; color: #12425C; }
.equipage__tuile--compta { background: #F1CCFF; color: #5D2A6F; }
.equipage__tuile--web { background: #FFD8B0; color: #6A3A0F; }
.equipage__oeil { transform-box: fill-box; transform-origin: center; }
.equipage__photo { width: 72px; height: 72px; box-sizing: border-box; border-radius: 50%; border: 4px solid #fff; object-fit: cover; box-shadow: none; }
.equipage:not(.is-visible) .equipage__membre > * { animation-play-state: paused; }
@media (max-width: 960px) {
.equipage { gap: 10px; min-height: 114px; padding-inline: 6px; }
.equipage__tuile { width: 39px; height: 39px; border-radius: 12px; }
.equipage__membre:nth-child(2) .equipage__tuile, .equipage__membre:nth-child(3) .equipage__tuile { width: 45px; height: 45px; border-radius: 14px; }
.equipage__photo { width: 54px; height: 54px; border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .equipage__membre, .equipage__membre > * { animation: none !important; transition: none !important; } }
/* ---------- « Développer mon cerveau IA » : vers la future page sur le cerveau artificiel (05/10/2026, demande Axel) ---------- */
.apprend__txt .btn.apprend__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; }
.apprend__cta svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.apprend__cta:hover svg { transform: translateX(4px); }
/* Coches « validé » dans les pastilles noires (05/10/2026, demande Axel) : le caractère ✓ se décalait vers le haut et la droite
sur certains navigateurs (police de repli) ; la coche est maintenant dessinée, toujours centrée. */
.cv-retenu i, .cv-regles i, .cv-correction__note i, .cv-coffre__liste i { position: relative; font-size: 0 !important; line-height: 0; color: transparent !important; }
.cv-retenu i::before, .cv-regles i::before, .cv-correction__note i::before, .cv-coffre__liste i::before { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Bouton « Démarrer l'intégration » sous le parcours (05/10/2026, demande Axel), même bouton que « Développer mon cerveau IA » */
.boucle .btn.boucle__cta { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 28px auto 0; } /* centré sous le rail, comme lui */
.boucle__cta svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.boucle__cta:hover svg { transform: translateX(4px); }
.securite__txt .btn.securite__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; } /* vers la future page Sécurité (demande Axel, 05/10/2026) */
.securite__cta svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.securite__cta:hover svg { transform: translateX(4px); }
/* pied de page (08/10/2026, demande Axel) : la marque (texte, Qualiopi), puis quatre colonnes égales : Bobby, OpterIA, Contact, Informations */
.footer__in--plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; row-gap: 40px; }
.footer__in--plan .footer__marque { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo label" "texte label"; align-items: center; column-gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.footer__in--plan .footer__marque .footer__logo { grid-area: logo; }
.footer__in--plan .footer__marque .small { grid-area: texte; margin: 0; }
.footer__in--plan .footer__marque .footer__qualiopi { grid-area: label; }
.footer__in--plan .footer__marque .footer__logo img { margin-bottom: 8px; }
.footer__in--plan .footer__marque .footer__qualiopi { margin-top: 0; }
.footer__in--plan .footer__marque .footer__qualiopi img { width: 200px; }
.footer__in--plan .footer__col { gap: 10px; color: rgba(53,53,53,.8); }
.footer__in--plan .footer__col .meta, .footer__in--plan .footer__col .meta a { color: var(--ink); font-weight: 500; }
/* LinkedIn : en bas à droite, sous le cadre, comme sur gleap.ai (08/10/2026, demande Axel) */
.footer__bar { align-items: center; }
.footer__reseau { display: inline-flex; color: #353535; transition: color .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.footer__reseau svg { width: 20px; height: 20px; }
.footer__reseau:hover { color: #0A66C2; transform: translateY(-2px); }
@media (max-width: 1100px) { .footer__in--plan { column-gap: 32px; } }
@media (max-width: 860px) { .footer__in--plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.footer__in--plan { column-gap: 20px; row-gap: 32px; }
.footer__in--plan .footer__marque { grid-template-columns: 1fr; grid-template-areas: "logo" "texte" "label"; row-gap: 12px; padding-bottom: 28px; }
.footer__in--plan .footer__marque .footer__qualiopi { justify-self: start; margin-top: 8px; }
.footer__in--plan .footer__col { font-size: 14px; }
.footer { padding-bottom: 96px; } /* le logo LinkedIn reste au-dessus de la bulle du chat */
}
}
/* Chat Bobby : plus de dégradé noir vers blanc sous l'en-tête, coupure nette (07/10/2026, demande Axel) */
.assistant__tete, .bp-tete { background: #15171b; }
.assistant__tete { padding-bottom: 30px; }
.assistant__corps { margin-top: 0; padding-top: 24px; }
.bp-tete { padding-bottom: 16px; }
.bp-corps { margin-top: 0; padding-top: 16px; }
@media (max-width: 960px) {
.assistant__tete { padding-bottom: 22px; }
.assistant__corps { padding-top: 16px; }
.bp-tete { padding-bottom: 12px; }
.bp-corps { padding-top: 12px; }
}