:root{
  --bg:#f3f2f2;--ink:#201e1d;--accent:#ec3013;--accent-hover:#dd2b0f;
  --accent-soft:#ff9783;--accent-deep:#ae1800;--mint:#25c896;--mint-soft:#7fe3c4;
  --mint-deep:#0f7a5a;
  --rule:rgba(32,30,29,0.16);--rule-mid:rgba(32,30,29,0.28);
  --surface:#ffffff;--muted:rgba(32,30,29,0.58);
  --page-bg:var(--bg);--page-fg:var(--ink);
  --font:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --gutter:40px;
  /* triplets rvb lus par l'animation canvas, qui ne vit que sur fond ink */
  --flow-ink:243,242,242;--flow-accent:255,86,60;--flow-mint:61,222,172;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --page-bg:#18171b;--page-fg:#f1efee;
  --surface:#232227;--muted:rgba(241,239,238,0.58);
  --rule:rgba(241,239,238,0.14);--rule-mid:rgba(241,239,238,0.26);
  --accent-deep:#ff8163;--mint-deep:#25c896;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);color:var(--page-fg);font-family:var(--font);font-size:15px;line-height:1.55;transition:background .18s ease,color .18s ease}
/* curseur : le carre du logo */
html, body, *{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iI2VjMzAxMyIvPjwvc3ZnPg==") 3 3, default}
a, button, label, [onclick], [role="button"]{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSIjZWMzMDEzIi8+PC9zdmc+") 3 3, pointer}
input, textarea{cursor:text}
/* page agents : le carre du curseur passe au vert, la couleur de la machine.
   liseré vert fonce pour qu'il reste visible sur les sections claires */
body.agents-mode, body.agents-mode *{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHJlY3QgeD0iMy41IiB5PSIzLjUiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiMyNWM4OTYiIHN0cm9rZT0iIzBhNWM0MyIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+") 3 3, default}
body.agents-mode a, body.agents-mode button, body.agents-mode label, body.agents-mode [onclick], body.agents-mode [role="button"]{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHJlY3QgeD0iMy41IiB5PSIzLjUiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0iIzI1Yzg5NiIgc3Ryb2tlPSIjMGE1YzQzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=") 3 3, pointer}
body.agents-mode input, body.agents-mode textarea{cursor:text}
h1,h2,h3,h4{font-weight:800;line-height:1.08;letter-spacing:-0.025em;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
/* les liens habilles d'une classe (boutons, menus) gerent leur propre survol */
a:not([class]):hover{color:var(--accent-deep)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.page{display:none}
.page.active{display:block}
.stack{display:flex;flex-direction:column}
.eyebrow{font-weight:800;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-deep)}
.sq{width:9px;height:9px;background:var(--accent);display:block;flex:none}
.sq.mint{background:var(--mint)}
/* releve d'etat : la machine dit ce qu'elle fait. mint sur fond noir uniquement */
.tele{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--mint-soft)}
.tele::before{content:'';width:6px;height:6px;background:var(--mint);flex:none;animation:tele-blink 2.4s steps(1,end) infinite}
@keyframes tele-blink{0%,64%{opacity:1}65%,100%{opacity:0.28}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:800;font-size:14px;line-height:1;padding:14px 20px;border:1px solid transparent;background:transparent;color:var(--page-fg);font-family:var(--font)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--rule-mid)}
.btn-ghost:hover{background:rgba(128,128,128,0.12)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rule{height:1px;background:var(--rule-mid);width:100%}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.linkish:hover{color:var(--accent-deep)}

/* instrumentation : trame technique et reperes d'angle. fond noir uniquement */
.sec-dark,.offer-head,.contact{background-image:
  repeating-linear-gradient(0deg,rgba(243,242,242,0.04) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(243,242,242,0.04) 0 1px,transparent 1px 56px)}
/* reperes d'angle : mint sur fond noir, orange sur fond clair ou le mint est illisible */
.ticks{position:relative;--tick:var(--mint)}
.on-light.ticks{--tick:var(--accent)}
.ticks::before,.ticks::after{content:'';position:absolute;width:10px;height:10px;pointer-events:none}
.ticks::before{top:0;left:0;border-top:1px solid var(--tick);border-left:1px solid var(--tick)}
.ticks::after{bottom:0;right:0;border-bottom:1px solid var(--tick);border-right:1px solid var(--tick)}
/* sur un .wrap, les reperes se calent sur la colonne de texte, pas sur le bord de l'ecran */
.wrap.ticks::before{left:var(--gutter)}
.wrap.ticks::after{right:var(--gutter)}

/* journal d'agents : hauteur fixe, entree par le bas, zero decalage de mise en page */
.run-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background-color:#151413;border:1px solid rgba(243,242,242,0.16);border-bottom:0;padding:11px 14px}
.run-head .n{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:rgba(243,242,242,0.42)}
.run{--run-line:22px;height:calc(var(--run-line) * 7);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background-color:#151413;border:1px solid rgba(243,242,242,0.16);padding:0 14px}
.run-row{display:flex;align-items:center;gap:10px;height:var(--run-line);line-height:var(--run-line);font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.run-row .t{flex:none;width:8ch;color:rgba(243,242,242,0.38)}
.run-row .k{flex:none;width:12ch;color:rgba(243,242,242,0.88);font-weight:700}
.run-row .v{flex:1;min-width:0;color:var(--mint-soft);overflow:hidden;text-overflow:ellipsis}
.run-row.in{animation:run-in 240ms ease-out}
@keyframes run-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.tele::before,.run-row.in{animation:none}}


/* bandeau */
header{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--bg)}
.navrow{height:62px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* le symbole Bloc : K a la couleur du texte, carre rouge de la marque */
.symbole{display:block;flex:none}
.logo{display:flex;align-items:center;gap:10px;color:var(--bg);cursor:pointer;font-weight:800;font-size:19px;letter-spacing:-0.02em}
nav{display:flex;align-items:center;gap:8px;height:100%}
.navlink{display:flex;align-items:center;height:100%;padding:0 14px;font-size:13.5px;color:var(--bg);cursor:pointer;background:none;border:0;font-family:var(--font)}
.navlink:hover{color:var(--accent-soft)}
.navlink.on{color:var(--accent-soft)}
.drop{position:relative;height:100%;display:flex;align-items:center}
.drop .chev{font-size:8px;margin-left:7px;opacity:0.75;transition:transform .18s ease}
.drop.open .chev{transform:rotate(180deg)}
.menu{position:absolute;top:100%;left:0;min-width:300px;background:#151413;color:var(--bg);border-top:2px solid var(--accent);display:none;z-index:60;box-shadow:0 16px 34px rgba(0,0,0,0.4)}
.drop.open .menu{display:block}
.menu a{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(243,242,242,0.14);padding:15px 18px;cursor:pointer;font-family:var(--font);color:var(--bg)}
.menu a:last-child{border-bottom:0}
.menu a:hover{background:rgba(243,242,242,0.08)}
.menu .m-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;letter-spacing:-0.01em;color:var(--bg)}
.menu .m-s{font-size:12.5px;color:rgba(243,242,242,0.6)}
.navcta{margin-left:8px;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;padding:10px 16px;border:0;cursor:pointer;font-family:var(--font)}
.navcta:hover{background:var(--accent-hover)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:2px;background:transparent;border:1px solid rgba(243,242,242,0.3);color:var(--bg);cursor:pointer;flex:none}
.theme-toggle:hover{background:rgba(243,242,242,0.1)}
.theme-toggle svg{display:block}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.mobilenav .theme-toggle{width:auto;margin:14px 20px 4px;border-color:rgba(243,242,242,0.3);gap:8px;padding:12px 14px;font-family:var(--font);font-size:13px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase}
.mobilenav .theme-toggle .lab-light{display:inline}
.mobilenav .theme-toggle .lab-dark{display:none}
:root[data-theme="dark"] .mobilenav .theme-toggle .lab-light{display:none}
:root[data-theme="dark"] .mobilenav .theme-toggle .lab-dark{display:inline}
.burger{display:none;background:transparent;border:1px solid rgba(243,242,242,0.45);color:var(--bg);font-family:var(--font);font-weight:800;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:11px 14px;cursor:pointer}
.mobilenav{display:none;position:absolute;left:0;right:0;top:100%;background:#151413;border-top:2px solid var(--accent);flex-direction:column;z-index:70;box-shadow:0 16px 34px rgba(0,0,0,0.45)}
.mobilenav.open{display:flex}
.mobilenav a,.mobilenav button{background:none;border:0;border-bottom:1px solid rgba(243,242,242,0.14);color:var(--bg);font-family:var(--font);font-size:15px;text-align:left;padding:16px 20px;cursor:pointer}
.mobilenav .lab{font-size:10px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:rgba(243,242,242,0.42);padding:14px 20px 6px}
.mobilenav .mcta{background:var(--accent);color:#fff;font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;border-bottom:0;padding:17px 20px}

/* accueil : bloc noir continu, reseau en fond */
.top{position:relative;background:var(--ink);color:var(--bg);overflow:hidden}
.flowbg{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 20%,#000 44%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 20%,#000 44%)}
.top-fade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(32,30,29,0) 0%,var(--ink) 76%);pointer-events:none;z-index:1}
.top-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);padding-block:96px 72px;align-items:center;min-height:500px}
h1.big{font-size:clamp(34px,4.4vw,56px);line-height:1.0;letter-spacing:-0.04em;color:var(--bg)}
.lead{font-size:17px;max-width:40ch;color:var(--muted)}
.top .lead{color:rgba(243,242,242,0.72)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.top .btn-ghost{border-color:rgba(243,242,242,0.34);color:var(--bg)}
.top .btn-ghost:hover{background:rgba(243,242,242,0.1)}
.trio{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(243,242,242,0.2)}
.trio>div{padding:34px 36px 44px 0;border-right:1px solid rgba(243,242,242,0.2);display:flex;flex-direction:column;gap:9px}
.trio>div + div{padding-left:36px}
.trio>div:last-child{border-right:0;padding-right:0}
.trio h4{font-size:16px;color:var(--bg)}
.trio p{font-size:14px;color:rgba(243,242,242,0.68);max-width:34ch}
.trio .sq{margin-bottom:6px}

/* accueil : bande agents sur fond clair, pour aerer le bloc noir du haut */
.agents-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);padding-block:68px;align-items:center}
.agents-claim{font-size:17px;line-height:1.45;max-width:38ch;color:var(--page-fg)}
.agents-list{display:flex;flex-wrap:wrap;gap:8px}
.agents-list span{font-family:var(--mono);font-size:11.5px;color:var(--page-fg);border:1px solid var(--rule-mid);padding:6px 10px}
.agents-go{align-self:flex-start;background:none;border:0;padding:0;font-family:var(--font);font-weight:800;font-size:13.5px;color:var(--accent);cursor:pointer}
.agents-go:hover{color:var(--accent-deep)}

.band-gap{height:64px;background:var(--page-bg)}
.band-accent{background:#d02a0f;color:#fff}
.band-accent .inner{padding-block:80px}
.band-accent .kicker{font-weight:800;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;opacity:0.8}
.band-accent .claim{font-weight:800;font-size:clamp(28px,4.2vw,52px);line-height:1.06;letter-spacing:-0.035em;max-width:24ch;margin-top:22px}

.example{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--gutter);padding-block:88px;align-items:center}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background-color:var(--ink);color:var(--bg)}
.contact>div{padding:56px 48px;display:flex;flex-direction:column;gap:14px}
.contact .contact-aside{border-left:1px solid rgba(243,242,242,0.2)}

/* pages prestation */
.p-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gutter);padding:72px 0 56px;border-bottom:1px solid var(--rule-mid);align-items:start}
.sec{padding:64px 0}
.sec + .sec{border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);align-items:end;margin-bottom:32px}
.sec-dark{background-color:var(--ink);color:var(--bg);padding:64px 0;margin-top:0}
.sec-dark h2,.sec-dark h4{color:var(--bg)}
.sec-dark .facts{border-top-color:rgba(243,242,242,0.22)}
.sec-dark .facts>div{border-color:rgba(243,242,242,0.22)}
.sec-dark .facts p,.sec-dark .steps p{color:rgba(243,242,242,0.68)}
.sec-dark .steps{border-color:rgba(243,242,242,0.22)}
.sec-dark .steps>div{border-right-color:rgba(243,242,242,0.22)}
.sec-dark .steps .n{color:var(--accent-soft)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.facts>div{padding:22px 28px 22px 0;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);display:flex;gap:14px}
.facts>div:nth-child(2n){border-right:0;padding-right:0;padding-left:28px}
.facts h4{font-size:15px;margin-bottom:4px}
.facts p{font-size:14px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.steps>div{padding:28px 32px 30px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.steps>div + div{padding-left:32px}
.steps>div:last-child{border-right:0;padding-right:0}
.steps .n{font-weight:800;font-size:12px;color:var(--accent);letter-spacing:0.14em}
.steps h4{font-size:16px}
.steps p{font-size:14px;color:var(--muted)}

/* page agents : le vert remplace l'orange, pour la distinguer des autres prestations.
   mint-deep sur fond clair, ou le mint pur ne donnerait que 1,8:1 */
#page-agents .eyebrow{color:var(--mint-deep)}
#page-agents h1 span{color:var(--mint-deep)}
#page-agents .steps .n{color:var(--mint-deep)}

/* catalogue d'agents : la grille .facts, garnie. Une fiche par tache vendue,
   parce que chaque tache se vend seule. Aucun composant nouveau, juste du contenu. */
.facts.fiches>div>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.fiches h4{font-size:16px;margin-bottom:0}
.fiche-hook{font-weight:800;font-size:14.5px;color:var(--page-fg)}
.fiches .price-list{margin-top:0;font-size:14px;gap:7px}
.fiche-ctrl{border-left:2px solid var(--mint-deep);padding-left:13px}
.fiche-ctrl .eyebrow{display:block;margin-bottom:3px}
.fiche-ctrl p{font-size:13.5px}
.fiche-price{display:flex;flex-wrap:wrap;gap:14px 26px;border-top:1px solid var(--rule);padding-top:12px;margin-top:2px}
.fiche-price>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fiche-price .v{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--page-fg)}
.fiche-price .n{font-size:11.5px;line-height:1.4;color:var(--muted)}
/* les liens de la page Tarifs pointent vers ces ancres : le bandeau collant ne doit pas les masquer */
/* boutons ajoutes par site.js sous une reponse du bot, a la place des marqueurs [LIEN_RDV] et [LIEN_TARIFS] */
.chat-cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chat-cta-row .btn{font-size:13px;padding:11px 14px;text-decoration:none;color:#fff}
.pack-sec{scroll-margin-top:84px}
/* les trois packs sont trois panneaux pleins et opaques, separes par un filet vert : on lit "un pack"
   avant de lire "une liste". La trame de fond est reprise en fixe pour que l'opacite ne se voie pas. */
.pack-stack{position:relative}
.pack-panel{position:relative;background-color:var(--page-bg);border-top:3px solid var(--mint-deep)}
.pack-panel .sec{padding-block:56px}
:root[data-theme="dark"] .pack-panel{background-image:
  repeating-linear-gradient(0deg,rgba(241,239,238,0.028) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(241,239,238,0.028) 0 1px,transparent 1px 56px);
  background-attachment:fixed}
:root[data-theme="light"] .pack-panel{background-image:
  repeating-linear-gradient(0deg,rgba(32,30,29,0.035) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(32,30,29,0.035) 0 1px,transparent 1px 56px);
  background-attachment:fixed}
/* effet de pile : chaque panneau se fige, le suivant vient le recouvrir. Seulement sur grand ecran et sans
   preference de mouvement reduit ; le script pose --stick-top, qui depend de la hauteur reelle du panneau
   (un panneau plus haut que l'ecran se fige par son bas, sinon la fin de son contenu serait inatteignable). */
@media (min-width:921px) and (prefers-reduced-motion:no-preference){
  .pack-stack.is-stacked .pack-panel{position:sticky;top:var(--stick-top,84px)}
  .pack-stack.is-stacked .pack-panel:nth-child(1){z-index:1}
  .pack-stack.is-stacked .pack-panel:nth-child(2){z-index:2}
  .pack-stack.is-stacked .pack-panel:nth-child(3){z-index:3}
  .pack-stack.is-stacked .pack-panel + .pack-panel{box-shadow:0 -30px 46px -26px rgba(0,0,0,0.65)}
  :root[data-theme="light"] .pack-stack.is-stacked .pack-panel + .pack-panel{box-shadow:0 -30px 46px -28px rgba(60,40,20,0.32)}
}
/* prix en tete d'une colonne .steps : l'orange 12px ne passait pas (3,7:1 en clair), donc encre de page */
.steps .n.px{font-family:var(--mono);font-size:15px;letter-spacing:0;color:var(--page-fg)}
/* une derniere fiche seule sur sa rangee (5 fiches par pack) prend toute la largeur :
   sans cela le filet vertical de .facts finirait contre une case vide */
.facts.fiches>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0;padding-right:0}
.fiche-price .n.alt{font-size:12px;color:var(--muted)}
/* les puces des listes suivent le vert de la page, comme les carres .sq.mint */
#page-agents .price-list div::before{background:var(--mint-deep)}
/* l'orange de .linkish ne donne que 4,4:1 sur le fond sombre, et jure avec le vert
   de la page : les liens en ligne de cette page passent au mint-deep (8,6:1) */
#page-agents .linkish,#page-agents a:not([class]){color:var(--mint-deep);text-decoration:underline;text-underline-offset:3px}
#page-agents .linkish:hover,#page-agents a:not([class]):hover{color:var(--page-fg)}

/* tarifs */
.t-hero{background:var(--accent);color:#fff}
.t-hero .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);align-items:end;padding-block:56px}
.offer-head{background-color:var(--ink);color:var(--bg)}
.offer-head .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gutter);align-items:end;padding-block:44px}
.offer-head .name{display:flex;align-items:baseline;gap:12px;margin:12px 0 10px;flex-wrap:wrap}
.offer-head h2{font-size:clamp(23px,5vw,30px);color:var(--bg);word-break:break-word}
.offer-head .eyebrow{color:var(--accent-soft)}
.offer-head .eyebrow.mint{color:var(--mint-soft)}
.offer-head p{color:rgba(243,242,242,0.72)}
.offer-head a,.offer-head .linkish{color:var(--accent-soft)}
.offer-head a:hover,.offer-head .linkish:hover{color:#fff}
.tag{font-weight:800;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:5px 9px;background:rgba(243,242,242,0.16);color:var(--bg)}
/* #d02a0f : le meme orange que les boutons du theme clair. Blanc sur #ec3013 a 10px ne donnait que 4,2:1 */
.tag.hot{background:#201e1d;color:#fff}
.tag.agent{background:var(--mint);color:var(--ink)}
.price-band{background:var(--surface)}
.price-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);background:transparent}
.price-row>div{padding:44px 44px 44px 0}
.price-row>div + div{padding-left:44px;padding-right:0}
.bignum{font-weight:800;font-size:54px;line-height:1;letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.price-list{display:flex;flex-direction:column;gap:9px;font-size:14.5px;margin-top:20px}
.price-list div{display:flex;gap:11px}
.price-list div::before{content:'';width:7px;height:7px;background:var(--accent);flex:none;margin-top:7px}
/* tarif degressif. Vit uniquement dans la carte des prix, qui reste blanche avec
   une encre sombre dans les deux themes : les filets et les gris sont donc fixes,
   pas tires des tokens de theme, qui seraient invisibles sur ce blanc. */
/* filets portes par les cellules, pas par le conteneur : une derniere rangee
   incomplete ne laisse alors aucun bloc gris en bout de grille. */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;
  border-top:1px solid rgba(32,30,29,0.16);border-left:1px solid rgba(32,30,29,0.16)}
.tiers.rows{grid-template-columns:1fr}
.tiers>div{padding:11px 13px;display:flex;flex-direction:column;gap:4px;min-width:0;
  border-right:1px solid rgba(32,30,29,0.16);border-bottom:1px solid rgba(32,30,29,0.16)}
/* #6a645d, pas le gris translucide de .price-row .muted : a 10,5px il faut
   4,5:1, et 0,58 d'encre sur blanc ne donne que 4,13:1. Celui-ci donne 5,8:1. */
.tiers .q{font-weight:800;font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;color:#6a645d}
.tiers .p{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink)}
.tiers .n{font-size:11.5px;line-height:1.4;color:#6a645d}

/* comparatif des packs et questionnaire d'orientation. Ils reposent sur les tokens de theme :
   les deux blocs sont poses sur le fond de page, pas dans la carte blanche des prix. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--rule-mid);border-bottom:1px solid var(--rule-mid)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule-mid)}
.cmp tbody th{font-weight:800;color:var(--page-fg);width:22%}
.cmp td{color:var(--page-fg)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.px{font-family:var(--mono);font-weight:700}
.quiz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-mid);border-bottom:1px solid var(--rule-mid)}
.quiz fieldset{border:0;margin:0;min-width:0;padding:24px 28px 26px 0;border-right:1px solid var(--rule)}
.quiz fieldset + fieldset{padding-left:28px}
.quiz fieldset:last-child{border-right:0;padding-right:0}
.quiz legend{padding:0;font-weight:800;font-size:15px;margin-bottom:12px;max-width:26ch}
.quiz label{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:6px 0;cursor:pointer;color:var(--page-fg)}
.quiz input{margin-top:3px;accent-color:var(--accent);flex:none}
.quiz-out{margin-top:22px;padding:20px 22px;border:1px solid var(--rule-mid);display:flex;gap:18px 32px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.quiz-out[hidden]{display:none}
.quiz-out h4{font-size:19px;margin:2px 0 4px}
.quiz-out p{font-size:14px;color:var(--muted);max-width:52ch}
@media (max-width:920px){
  .quiz{grid-template-columns:1fr}
  .quiz fieldset,.quiz fieldset + fieldset{padding:22px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .quiz fieldset:last-child{border-bottom:0}
}
.t-close{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-block:64px}
.bio-inner{display:grid;grid-template-columns:minmax(0,0.55fr) minmax(0,1fr);gap:var(--gutter);padding-block:72px;align-items:start}

footer{margin-top:72px;background:var(--ink);color:var(--bg)}
.footinner{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.footbio{display:grid;grid-template-columns:minmax(0,0.5fr) minmax(0,1fr);gap:var(--gutter);padding:52px 0 40px;border-bottom:1px solid rgba(243,242,242,0.18)}
.footbio p{font-size:15px;max-width:60ch;opacity:0.9}
.footband{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding:32px 0}
.footbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;opacity:0.5;border-top:1px solid rgba(243,242,242,0.16);padding:16px 0 22px}

@media (max-width:820px){
  nav{display:none}
  .burger{display:inline-flex;align-items:center}
}
@media (max-width:920px){
  :root{--gutter:20px}
  .top-inner{grid-template-columns:1fr;min-height:0;padding-block:64px 24px}
  .flowbg{-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);mask-image:linear-gradient(180deg,#000 0%,transparent 72%);opacity:0.4}
  .top-fade{height:60%}
  .example,.contact,.p-hero,.sec-head,.offer-head .inner,.t-hero .inner,.bio-inner,.agents-inner{grid-template-columns:1fr;gap:24px}
  .agents-inner{padding-block:32px 40px}
  .run{--run-line:20px;height:calc(var(--run-line) * 5)}
  .run-row{font-size:11px}
  .bio-inner{padding-block:44px}
  .trio,.facts,.steps,.price-row{grid-template-columns:1fr}
  .trio>div,.steps>div,.facts>div,.trio>div + div,.steps>div + div{border-right:0;border-bottom:1px solid var(--rule);padding:22px 0}
  .trio>div,.trio>div + div{border-bottom-color:rgba(243,242,242,0.2)}
  .facts>div:nth-child(2n){padding-left:0}
  .price-row>div,.price-row>div + div{padding:26px 0;border-right:0}
  .contact>div{padding:34px 22px}
  .contact .contact-aside{border-left:0;border-top:1px solid rgba(243,242,242,0.2)}
  nav{gap:0}
  .navlink{padding:0 9px;font-size:12.5px}
  .menu{left:auto;right:0}
}

/* =========================================================================
   VARIANTE NOIRE : le site entier devient le chassis, les cartes blanches
   sont les afficheurs. Theme par defaut du site.
   ========================================================================= */

:root[data-theme="dark"]{
  --page-bg:#121113;--page-fg:#f1efee;--surface:#ffffff;
  --muted:rgba(241,239,238,0.62);
  --rule:rgba(241,239,238,0.13);--rule-mid:rgba(241,239,238,0.24);
}

/* trame technique sur tout le fond, plus seulement sur les blocs noirs */
:root[data-theme="dark"] body{background-image:
  repeating-linear-gradient(0deg,rgba(241,239,238,0.028) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(241,239,238,0.028) 0 1px,transparent 1px 56px);
  background-attachment:fixed}

/* les anciens blocs noirs deviennent des cadres : le fond est deja sombre */
:root[data-theme="dark"] .sec-dark{background-color:rgba(241,239,238,0.022);border-block:1px solid var(--rule-mid)}
:root[data-theme="dark"] .top,:root[data-theme="dark"] .contact,:root[data-theme="dark"] .offer-head{background-color:#1b1a1c}

/* hauts de page prestation : panneaux instrumentes, releve en tete */
:root[data-theme="dark"] .p-hero{padding-block:58px 52px;border-bottom:1px solid var(--rule-mid)}

/* index de section en monospace : la page se lit comme une nomenclature */
:root[data-theme="dark"] .sec-head h2::before,:root[data-theme="dark"] .offer-head .eyebrow::after{font-family:var(--mono);font-weight:400}
:root[data-theme="dark"] .sec-head{position:relative}

/* --- les afficheurs : cartes blanches posees sur le chassis --- */
:root[data-theme="dark"] .price-band{background:transparent;padding-block:0}
:root[data-theme="dark"] .price-row{background:var(--surface);color:var(--ink)}
/* la carte des prix est blanche dans les deux themes : le gris secondaire doit donc
   etre le meme des deux cotes. L'encre a 0,58 ne donnait que 4,13:1, sous la barre
   des 4,5:1 exigee sous 18px ; #6a645d, deja utilise en theme clair, donne 5,8:1. */
:root[data-theme="dark"] .price-row .muted{color:#6a645d}
:root[data-theme="dark"] .price-row .eyebrow{color:#ae1800}
:root[data-theme="dark"] .price-row .bignum{color:var(--accent)}

/* le journal quitte son cadre : il est pose directement sur le chassis */
:root[data-theme="dark"] .run,:root[data-theme="dark"] .run-head{background-color:#0b0b0c;border-color:rgba(241,239,238,0.14)}
:root[data-theme="dark"] .agents-inner .run{--run-line:23px;height:calc(var(--run-line) * 8)}

/* bande agents : reste le point de respiration, mais en negatif */
:root[data-theme="dark"] .agents-list span{border-color:var(--rule-mid)}
:root[data-theme="dark"] .agents-go{color:var(--mint-soft)}
:root[data-theme="dark"] .agents-go:hover{color:var(--mint)}
:root[data-theme="dark"] .on-light.ticks{--tick:var(--mint)}

/* bandeau de telemetrie permanent, juste au-dessus du pied de page */
:root[data-theme="dark"] .footlog{border-top:1px solid var(--rule-mid);background-color:#0b0b0c}
:root[data-theme="dark"] .footlog .wrap{display:flex;align-items:center;gap:18px;padding-block:11px;overflow:hidden}
:root[data-theme="dark"] .footlog .tele{flex:none}
:root[data-theme="dark"] .footlog .run{--run-line:20px;height:var(--run-line);border:0;padding:0;background:transparent;flex:1;min-width:0}
:root[data-theme="dark"] .footlog .run-row{font-size:11px}
/* sur telephone la ligne est trop courte pour trois colonnes : on garde heure + resultat */
@media (max-width:920px){ :root[data-theme="dark"] .footlog .wrap{gap:12px} :root[data-theme="dark"] .footlog .run-row .k{display:none} }

/* =========================================================================
   VARIANTE CLAIRE : le papier et les afficheurs. Au choix du visiteur (bouton du bandeau).
   Le site se lit en plein jour, au bureau : fond blanc, cartes blanches
   pour ce qu'on compare (prix, fiches, contact), encre pour le texte. Le noir
   ne reste que la ou la machine parle : journaux d'agents, maquette Kommis,
   socle du pied de page. Rouge = marque et action ; vert = agents, fonce sur clair.
   ========================================================================= */

:root[data-theme="light"]{
  --paper:#ffffff;          /* fond general, blanc */
  --paper-deep:#ffffff;     /* bandes de section : meme blanc, plus de beige */
  --surface:#ffffff;        /* cartes */
  --page-bg:var(--paper);--page-fg:var(--ink);
  --muted:#666666;          /* texte secondaire, >= 4,5:1 sur papier comme sur blanc */
  --rule:#e6e6e6;--rule-mid:#d4d4d4;
  --action:#d02a0f;--action-hover:#b52208;   /* boutons : le blanc dessus reste lisible */
  --mint-deep:#0b6a4e;      /* vert texte : 5,5:1 sur le blanc */
  --flow-ink:32,30,29;--flow-accent:214,42,14;--flow-mint:11,106,78;
  color-scheme:light;
}
:root[data-theme="light"] ::selection{background:var(--accent);color:#fff}
:root[data-theme="light"]{scrollbar-color:var(--rule-mid) var(--paper)}

/* trame technique : papier millimetre, a peine visible */
:root[data-theme="light"] body{background-image:
  repeating-linear-gradient(0deg,rgba(32,30,29,0.035) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(32,30,29,0.035) 0 1px,transparent 1px 56px);
  background-attachment:fixed}

/* boutons : un rouge un cran plus dense que la marque, pour la lisibilite du blanc */
:root[data-theme="light"] .btn-primary,:root[data-theme="light"] .navcta,:root[data-theme="light"] .mobilenav .mcta{background:var(--action)}
:root[data-theme="light"] .btn-primary:hover,:root[data-theme="light"] .navcta:hover{background:var(--action-hover)}
:root[data-theme="light"] .btn-ghost{border-color:var(--ink)}
:root[data-theme="light"] .btn-ghost:hover{background:var(--ink);color:var(--paper)}
:root[data-theme="light"] a:not([class]){color:var(--accent-deep)}

/* --- bandeau : papier, filet dessous, menus en cartes blanches --- */
:root[data-theme="light"] header{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule-mid)}
:root[data-theme="light"] .logo{color:var(--ink)}
:root[data-theme="light"] .navlink{color:var(--ink)}
:root[data-theme="light"] .navlink:hover,:root[data-theme="light"] .navlink.on{color:var(--accent-deep)}
:root[data-theme="light"] .menu,:root[data-theme="light"] .mobilenav{background:var(--surface);color:var(--ink);box-shadow:0 18px 40px -12px rgba(60,40,20,0.22)}
:root[data-theme="light"] .menu a,:root[data-theme="light"] .mobilenav a,:root[data-theme="light"] .mobilenav button{border-bottom-color:var(--rule)}
:root[data-theme="light"] .menu a:hover,:root[data-theme="light"] .mobilenav a:hover{background:var(--paper)}
:root[data-theme="light"] .menu .m-t{color:var(--ink)}
:root[data-theme="light"] .menu .m-s{color:var(--muted)}
:root[data-theme="light"] .mobilenav a,:root[data-theme="light"] .mobilenav button{color:var(--ink)}
:root[data-theme="light"] .mobilenav .lab{color:var(--muted)}
:root[data-theme="light"] .mobilenav .mcta{color:#fff}
:root[data-theme="light"] .burger{border-color:var(--ink);color:var(--ink)}

/* --- accueil : le reseau se dessine a l'encre sur le papier --- */
:root[data-theme="light"] .top{background-color:transparent;color:var(--ink)}
:root[data-theme="light"] .top-fade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--paper) 80%)}
:root[data-theme="light"] h1.big{color:var(--ink)}
:root[data-theme="light"] .top .lead{color:var(--muted)}
:root[data-theme="light"] .top .btn-ghost{border-color:var(--ink);color:var(--ink)}
:root[data-theme="light"] .top .btn-ghost:hover{background:var(--ink);color:var(--paper)}
:root[data-theme="light"] .trio{border-top-color:var(--rule-mid)}
:root[data-theme="light"] .trio>div{border-right-color:var(--rule-mid)}
:root[data-theme="light"] .trio h4{color:var(--ink)}
:root[data-theme="light"] .trio p{color:var(--muted)}

/* bande agents : fond blanc, le vert fonce est le seul vert lisible sur clair */
:root[data-theme="light"] .agents-inner{background-color:var(--surface);border-block:1px solid var(--rule)}
:root[data-theme="light"] .agents-list span{border-color:var(--rule-mid);background:var(--paper)}
:root[data-theme="light"] .agents-go{color:var(--mint-deep)}
:root[data-theme="light"] .agents-go:hover{color:var(--ink)}
:root[data-theme="light"] .on-light.ticks{--tick:var(--mint-deep)}

/* les afficheurs noirs : la machine parle, le reste du site se tait */
:root[data-theme="light"] .run,:root[data-theme="light"] .run-head{background-color:#161514;border-color:#161514}
:root[data-theme="light"] .agents-inner .run{--run-line:23px;height:calc(var(--run-line) * 8)}

/* --- contact : une fiche blanche, le formulaire sur papier --- */
:root[data-theme="light"] .contact{background-color:var(--surface);background-image:none;color:var(--ink);border:1px solid var(--rule-mid);
  box-shadow:0 24px 50px -30px rgba(60,40,20,0.35)}
:root[data-theme="light"] .contact h2{color:var(--ink)}
:root[data-theme="light"] .contact .contact-aside{border-left-color:var(--rule);background:var(--paper)}

/* --- pages prestation : les blocs noirs restent noirs en clair (2026-10-12), pour casser les longs blocs blancs --- */
:root[data-theme="light"] .p-hero{padding-block:58px 52px;border-bottom:1px solid var(--rule-mid)}
:root[data-theme="light"] .sec-dark .ticks,:root[data-theme="light"] .sec-dark.ticks{--tick:var(--accent-soft)}
:root[data-theme="light"] #page-agents .sec-dark .ticks{--tick:var(--mint)}
:root[data-theme="light"] #page-agents .sec-dark .steps .n,:root[data-theme="light"] #page-agents .sec-dark .sq.mint{color:var(--mint);background:transparent}
:root[data-theme="light"] #page-agents .sec-dark .sq.mint{background:var(--mint)}
:root[data-theme="light"] .sec-dark .livre-fin,:root[data-theme="light"] .sec-dark .muted,:root[data-theme="light"] .sec-dark .sec-head p{color:rgba(243,242,242,0.7)}
:root[data-theme="light"] .sec-dark .livre-fin{color:#fff}
:root[data-theme="light"] .sec-dark .linkish,:root[data-theme="light"] .sec-dark a:not(.btn){color:#fff}
:root[data-theme="light"] .ticks{--tick:var(--accent)}
:root[data-theme="light"] #page-agents .ticks{--tick:var(--mint-deep)}
:root[data-theme="light"] #page-agents .sq.mint{background:var(--mint-deep)}

/* --- tarifs : en-tete d'offre beige, carte de prix blanche --- */
:root[data-theme="light"] .offer-head{background-color:var(--paper-deep);background-image:none;color:var(--ink);border:1px solid var(--rule-mid);border-bottom:0}
:root[data-theme="light"] .offer-head h2{color:var(--ink)}
:root[data-theme="light"] .offer-head .eyebrow{color:var(--accent-deep)}
:root[data-theme="light"] .offer-head .eyebrow.mint{color:var(--mint-deep)}
:root[data-theme="light"] .offer-head p{color:var(--muted)}
:root[data-theme="light"] .offer-head a,:root[data-theme="light"] .offer-head .linkish{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
:root[data-theme="light"] .offer-head a:hover,:root[data-theme="light"] .offer-head .linkish:hover{color:var(--ink)}
:root[data-theme="light"] .tag{background:var(--surface);color:var(--ink);border:1px solid var(--rule-mid)}
:root[data-theme="light"] .tag.hot{background:var(--ink);color:#fff;border-color:var(--ink)}
:root[data-theme="light"] .tag.agent{background:var(--mint);color:var(--ink);border-color:var(--mint)}
:root[data-theme="light"] .price-band{background:transparent;padding-block:0}
:root[data-theme="light"] .price-row{background:var(--surface);color:var(--ink);border:1px solid var(--rule-mid);
  box-shadow:0 24px 50px -32px rgba(60,40,20,0.35)}
:root[data-theme="light"] .price-row .muted{color:var(--muted)}

/* --- Kommis : la carte blanche se detache du papier --- */

/* --- pied : telemetrie et pied de page forment un seul socle d'encre --- */
:root[data-theme="light"] .footlog{margin-top:72px;background-color:#201e1d;border-top:1px solid rgba(243,242,242,0.12)}
:root[data-theme="light"] .footlog .wrap{display:flex;align-items:center;gap:18px;padding-block:11px;overflow:hidden}
:root[data-theme="light"] .footlog .tele{flex:none}
:root[data-theme="light"] .footlog .run{--run-line:20px;height:var(--run-line);border:0;padding:0;background:transparent;flex:1;min-width:0}
:root[data-theme="light"] .footlog .run-row{font-size:11px}
:root[data-theme="light"] footer{margin-top:0;border-top:1px solid rgba(243,242,242,0.1)}
@media (max-width:920px){
  :root[data-theme="light"] .footlog .wrap{gap:12px}
  :root[data-theme="light"] .footlog .run-row .k{display:none}
  :root[data-theme="light"] .trio>div,:root[data-theme="light"] .trio>div + div{border-bottom-color:var(--rule-mid)}
  :root[data-theme="light"] .contact .contact-aside{border-top-color:var(--rule)}
}

/* bouton de theme sur bandeau clair */
:root[data-theme="light"] .theme-toggle{border-color:var(--rule-mid);color:var(--ink)}
:root[data-theme="light"] .theme-toggle:hover{background:var(--paper-deep)}
:root[data-theme="light"] .mobilenav .theme-toggle{border-color:var(--rule-mid)}

/* =========================================================================
   UNE PAGE, UNE ADRESSE : chaque prestation a son URL, indexable seule.
   La transition entre documents garde le passage d'une page a l'autre fluide
   (Chrome, Edge, Safari 18.2+ ; les autres changent de page sans fondu).
   ========================================================================= */
@view-transition{navigation:auto}
header{view-transition-name:site-header}
@media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} }
/* le bandeau colle au haut de l'ecran : l'ancre #contact s'arrete dessous */
#contact{scroll-margin-top:84px}

/* =========================================================================
   WIDGET DE CHAT N8N : assistant IA, bulle en bas a droite (toutes les
   pages sauf /mentions-legales). Uniquement les variables CSS documentees
   par @n8n/chat (readme npm) : pas de nom devine, pas de selecteur interne.
   ========================================================================= */
:root{
  --chat--color--primary:var(--accent);
  --chat--color--primary-shade-50:var(--accent-hover);
  --chat--color--primary--shade-100:var(--accent-deep);
  --chat--color--secondary:var(--mint);
  --chat--color-secondary-shade-50:var(--mint-deep);
  --chat--color-white:var(--surface);
  --chat--color-light:var(--page-bg);
  --chat--color-light-shade-50:var(--rule);
  --chat--color-light-shade-100:var(--rule-mid);
  --chat--color-medium:var(--rule-mid);
  --chat--color-dark:var(--ink);
  --chat--color-disabled:var(--rule-mid);
  --chat--color-typing:var(--muted);

  --chat--spacing:1rem;
  --chat--border-radius:0;
  --chat--font-family:var(--font);

  --chat--window--width:400px;
  --chat--window--height:620px;
  --chat--window--border:1px solid var(--rule-mid);
  --chat--window--border-radius:0;

  --chat--header--background:var(--ink);
  --chat--header--color:var(--bg);
  --chat--heading--font-size:1.3em;

  --chat--message--border-radius:0;
  --chat--message--bot--background:var(--surface);
  --chat--message--bot--color:var(--ink);
  --chat--message--user--background:var(--mint);
  --chat--message--user--color:var(--ink);

  --chat--toggle--size:70px;
  --chat--toggle--border-radius:0;
  --chat--toggle--background:var(--mint);
  --chat--toggle--hover--background:var(--mint-soft);
  --chat--toggle--active--background:var(--mint-soft);
  --chat--toggle--color:var(--ink);

  --chat--input--border-radius:0;
  --chat--input--background:var(--surface);
  --chat--input--text-color:var(--ink);

  --chat--button--border-radius:0;
  --chat--button--background--primary:var(--accent);
  --chat--button--background--primary--hover:var(--accent-hover);
  --chat--button--color--primary:#fff;

  --chat--body--background:var(--page-bg);
  --chat--footer--background:var(--page-bg);
  --chat--footer--color:var(--muted);
}
/* variante claire : rouge --action (pas --accent). Le message envoye reste en --mint
   (texte --ink, contraste ~7,7:1) sur les deux themes : c'est la couleur de la bulle.
   La bulle fermee, elle, passe au carre orange --action en theme clair (mint en sombre) ;
   l'icone reste --ink dans les deux (heritee du bloc de base, pas reprecisee ici) */
:root[data-theme="light"]{
  --chat--color--primary:var(--action);
  --chat--color--primary-shade-50:var(--action-hover);
  --chat--color--primary--shade-100:var(--action-hover);
  --chat--color--secondary:var(--mint-deep);
  --chat--color-secondary-shade-50:var(--mint-deep);
  --chat--header--background:var(--paper);
  --chat--header--color:var(--ink);
  --chat--toggle--background:var(--action);
  --chat--toggle--hover--background:var(--action-hover);
  --chat--toggle--active--background:var(--action-hover);
  --chat--button--background--primary:var(--action);
  --chat--button--background--primary--hover:var(--action-hover);
}
/* la bulle ne doit pas passer sous le burger mobile ni deborder en tres petit ecran.
   --chat--window--right/bottom a 0 ancre aussi la bulle fermee (meme wrapper) : on lui
   remet une marge, sinon elle colle au bord de l'ecran une fois la fenetre agrandie */
@media (max-width:480px){
  :root{--chat--window--width:100vw;--chat--window--height:100vh;--chat--window--right:0;--chat--window--bottom:0}
  .chat-window-toggle{margin:0 1rem 1rem 0}
}
/* bulle fermee : rotation continue et reguliere (vitesse constante, pas de rafale)
   pour attirer l'oeil sans a-coup. Cible .chat-window-toggle (classe du paquet
   @n8n/chat, non documentee mais stable pour la version figee dans le head).
   transition:none corrige un bug du paquet : sa regle "transition: background"
   reste bloquee au tout debut quand on bascule de theme sans recharger la page,
   et le carre garde alors l'ancienne couleur indefiniment */
.chat-window-toggle{animation:chat-toggle-spin 4s linear infinite;transition:none!important}
@keyframes chat-toggle-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){.chat-window-toggle{animation:none}}

/* =========================================================================
   OFFRES : blocs de tarifs, fiches par usage, encarts Kommis, parcours
   ========================================================================= */
.adecider{background:#ffe27a;color:#201e1d;padding:1px 5px;font-weight:800;font-size:0.94em}
.offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.offre-card{display:flex;flex-direction:column;gap:18px;min-width:0;padding:28px 26px 26px;background:var(--surface);color:var(--ink);border:1px solid var(--rule-mid);border-top:4px solid var(--accent)}
.offre-card.devis{border-style:dashed;border-top:4px solid var(--page-fg)}
.offre-card h3{font-size:24px}
.offre-card .pour{font-size:14px;color:#6a645d}
.offre-card .eyebrow,.encart .eyebrow{color:#ae1800}
.offre-prix{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-block:1px solid var(--rule)}
.offre-prix .bignum{font-size:40px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.offre-prix .des{font-weight:800;font-size:14px;letter-spacing:0;color:var(--ink)}
.offre-prix .abo{font-size:15px;font-weight:800;margin-top:6px}
.offre-prix .note{font-size:13px;color:#6a645d}
.offre-meta{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:8px 12px;font-size:13.5px;margin:0}
.offre-meta dt{font-weight:800;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#6a645d;padding-top:2px}
.offre-meta dd{margin:0}
.offre-card .price-list{margin-top:0;font-size:14px;gap:7px}
.offre-card .non{font-size:13.5px;color:#6a645d}
.offre-card .non strong,.offre-card .price-list{color:var(--ink)}
.offre-card .btn{margin-top:auto;align-self:flex-start}
.offre-ligne{margin-top:22px;max-width:70ch;font-weight:800;font-size:15.5px}
.offre-note{margin-top:8px;max-width:70ch;font-size:13.5px;color:var(--muted)}
.steps.s4{grid-template-columns:repeat(4,minmax(0,1fr))}

.fiche-dl{display:grid;grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:7px 12px;font-size:13.5px;margin:0}
.fiche-dl dt{font-weight:800;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.fiche-dl dd{margin:0}
.fiche-price .btn{padding:10px 14px;font-size:13px}
.fiche-price .v b{color:var(--accent-deep)}
.gains-note{margin-top:22px;max-width:70ch;font-size:13.5px;color:var(--muted)}

.encarts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.encart{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--rule-mid);border-left:4px solid var(--accent);min-width:0}
.encart h4{font-size:16px}
.encart p{font-size:14px}
.encart p + p{color:#6a645d}

@media (max-width:920px){
  .offres,.encarts{grid-template-columns:1fr}
  .steps.s4{grid-template-columns:1fr}
  .fiche-dl{grid-template-columns:minmax(0,112px) minmax(0,1fr)}
}

.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:20px 0}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;list-style:none;font-weight:800;font-size:17px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-family:var(--mono);font-weight:700;font-size:20px;color:var(--accent-deep);transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq .rep{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:72ch;font-size:15px}

.faq a{color:var(--accent-deep)}
.steps .n{color:var(--accent-deep)}

/* =========================================================================
   DEUX OFFRES (2026-10-08) : workflow express et agent IA
   ========================================================================= */

.offres.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
/* les lignes du journal ne passent pas a la ligne : sans ceci elles elargissent la colonne sur telephone */
.agents-inner>*{min-width:0}
.offre-card.agent{border-top-color:var(--mint)}
.offre-card .btn-ghost{color:var(--ink);border-color:rgba(32,30,29,0.28)}
.encart.mint{border-left-color:var(--mint)}

/* tableau des tarifs : un tableau sur grand ecran, des fiches empilees sur telephone */
table.tarifs{width:100%;border-collapse:collapse;font-size:14.5px;border-top:1px solid var(--rule-mid)}
.tarifs th,.tarifs td{text-align:left;vertical-align:top;padding:20px 24px 20px 0;border-bottom:1px solid var(--rule);color:var(--page-fg)}
.tarifs td:last-child{padding-right:0}
.tarifs thead th{font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding-block:12px;border-bottom:1px solid var(--rule-mid)}
.tarifs tbody th{width:24%;font-weight:400}
.tarifs td[data-label="Ce qui est compris"]{color:var(--muted)}
.tarifs .t-nom{display:block;font-weight:800;font-size:18px;letter-spacing:-0.01em}
.tarifs .t-lien{display:inline-block;margin-top:6px;font-weight:800;font-size:13px;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.tarifs .t-prix{display:block;font-weight:800;font-size:22px;letter-spacing:-0.02em;margin-bottom:4px}
.tarifs .tag{display:inline-block;margin:2px 0 6px}


@media (max-width:920px){
  .offres.deux{grid-template-columns:1fr}
}
@media (max-width:720px){
  .tarifs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tarifs,.tarifs tbody,.tarifs tr,.tarifs th,.tarifs td{display:block;width:auto}
  .tarifs tr{padding:22px 0;border-bottom:1px solid var(--rule-mid)}
  .tarifs th,.tarifs td{border:0;padding:0}
  .tarifs tbody th{width:auto;margin-bottom:14px}
  .tarifs td + td{margin-top:14px}
  .tarifs td::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
}

/* --- trois offres, section "Comment je livre" --- */
.steps.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps.s5>div{padding-right:20px}
.steps.s5>div + div{padding-left:20px}
.livre-fin{margin-top:26px;font-weight:800;font-size:clamp(20px,2.4vw,28px);letter-spacing:-0.02em}
@media (max-width:920px){
  .steps.s5{grid-template-columns:1fr}
  .steps.s5>div,.steps.s5>div + div{padding-left:0;padding-right:0}
}

/* =========================================================================
   TARIFS EN DEFILEMENT : une offre a la fois, la page reste fixe pendant le scroll.
   Le mode "live" (sticky) n'est actif que si le script l'a allume : sans JavaScript,
   sur petit ecran ou ecran bas, les trois offres s'empilent comme des cartes.
   ========================================================================= */
.ts{padding-top:40px}
.ts-tabs{display:none}
.ts-panels{display:flex;flex-direction:column;gap:20px}
.ts-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:start;padding:32px 34px}
.ts-card h3{font-size:clamp(26px,3vw,36px);letter-spacing:-0.02em;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ts-card h3 .tag{font-size:10px;letter-spacing:0.14em}
.ts-card .pour{font-size:15px}
.ts-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.ts-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ts-lab{font-weight:800;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#6a645d}
.ts-card .price-list{font-size:15px;gap:11px}
.ts-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.ts-card .btn{margin-top:0}
.ts-lien{font-weight:800;font-size:14px;color:#ae1800;text-decoration:underline;text-underline-offset:3px}
.ts .offre-note{margin-top:24px}
@media (max-width:920px){
  .ts{padding-inline:var(--gutter)}
  .ts-card{grid-template-columns:1fr;padding:26px 22px}
}

.ts.ts-live{padding-top:0}
.ts.ts-live .ts-track{height:calc(100vh - 90px + 130vh)}
.ts.ts-live .ts-stage{position:sticky;top:62px;height:calc(100vh - 90px);display:flex;align-items:center}
.ts.ts-live .ts-inner{width:100%;display:flex;flex-direction:column;gap:22px}
.ts.ts-live .ts-card{padding:44px 52px;gap:24px 64px}
.ts.ts-live .ts-card h3{font-size:clamp(34px,3.6vw,48px)}
.ts.ts-live .ts-card .pour{font-size:17px}
.ts.ts-live .ts-card .offre-prix .bignum{font-size:56px}
.ts.ts-live .ts-card .price-list{font-size:16.5px;gap:14px}
.ts.ts-live .ts-card .ts-lab{font-size:12px}
.ts.ts-live .ts-tabs{display:flex;gap:0;border-bottom:1px solid var(--rule-mid)}
.ts.ts-live .ts-tabs{position:relative}
.ts.ts-live .ts-ind{position:absolute;left:0;bottom:-1px;height:3px;background:var(--accent);will-change:transform}
.ts.ts-live .ts-tab{flex:1;display:flex;align-items:baseline;gap:12px;padding:14px 4px 13px;background:none;border:0;border-bottom:0;font:inherit;font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--muted);text-align:left;transition:color .3s ease}
.ts.ts-live .ts-tab .n{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:0.08em}
.ts.ts-live .ts-tab:hover{color:var(--page-fg)}
.ts.ts-live .ts-tab[aria-selected="true"]{color:var(--page-fg)}
.ts.ts-live .ts-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ts.ts-live .ts-panels{position:relative;display:block;min-height:min(460px,calc(100vh - 220px))}
.ts.ts-live .ts-panel{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.ts.ts-live .ts-panel > *{width:100%}
.ts.ts-live .ts-panel.is-active{pointer-events:auto}

/* =========================================================================
   CONVERSION : phrase sous le bouton, section "Qui je suis" avec photo, barre mobile
   Regle de couleur : le rouge fort est reserve aux boutons. Les prix des offres sont en encre.
   ========================================================================= */
.offre-prix .bignum{color:var(--ink)}
.cta-note{margin-top:14px;font-size:13.5px;line-height:1.45;max-width:46ch;color:rgba(243,242,242,0.7)}
:root[data-theme="light"] .top .cta-note,.p-hero .cta-note{color:var(--muted)}
.bio-photo{grid-template-columns:minmax(0,1fr) minmax(0,0.5fr);grid-template-areas:"head fig" "text fig";column-gap:calc(var(--gutter) * 1.6);row-gap:18px;align-items:start}
.bio-photo .bio-head{grid-area:head}
.bio-photo .bio-text{grid-area:text}
.bio-photo .bio-fig{grid-area:fig;margin:0;align-self:center}
.bio-fig img{display:block;width:100%;height:auto;aspect-ratio:800/852;object-fit:cover}
@media (max-width:920px){
  .bio-photo{grid-template-columns:1fr;grid-template-areas:"head" "fig" "text";row-gap:20px}
  .bio-photo .bio-fig{max-width:300px}
}
.stickycta{display:none}
@media (max-width:820px){
  .stickycta{display:flex;align-items:center;justify-content:center;position:fixed;left:12px;right:88px;bottom:12px;z-index:60;padding:15px 14px;background:var(--accent);color:#fff;font-weight:800;font-size:14px;line-height:1.1;text-align:center;box-shadow:0 0 0 2px #fff,0 10px 26px -8px rgba(0,0,0,0.45);transform:translateY(140%);transition:transform .3s ease}
  :root[data-theme="light"] .stickycta{background:var(--action)}
  .stickycta.on{transform:none}
  body.has-sticky{padding-bottom:0}
  body.has-sticky footer{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){ .stickycta{transition:none} }

/* =========================================================================
   COULEURS DE BANDES (2026-10-12) : un rythme clair, noir, sable, rouge.
   noir = la ou on compare (offres), sable = la ou on rassure (qui je suis), rouge = la ou on decide.
   ========================================================================= */
.band-ink{background:#201e1d;color:#f3f2f2}
:root[data-theme="dark"] .band-ink{background:#0e0d0f}
.band-ink .sec-head h2{color:#fff}
.band-ink .muted,.band-ink .offre-note{color:rgba(243,242,242,0.7)}
:root[data-theme] .band-ink .offre-note a{color:#fff}
.band-sand{background:#232227;color:var(--page-fg)}
:root[data-theme="light"] .band-sand{background:var(--paper-deep)}
.band-sand .kicker{font-weight:800;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-deep)}
:root[data-theme="light"] .page:has(> .cta-final:last-child) + .footlog{margin-top:0}
.t-hero{background:#232227;color:var(--page-fg)}
:root[data-theme="light"] .t-hero{background:var(--paper-deep)}
.cta-final-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gutter);align-items:center;padding-block:76px}
.cta-final h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-0.03em;max-width:18ch;color:#fff}
.cta-final-txt{font-size:16px;line-height:1.5;max-width:50ch}
.cta-final-aside{display:flex;flex-direction:column;gap:16px;align-items:flex-start;font-size:14.5px}
:root[data-theme] .cta-final-aside a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:800}
.btn-blanc{background:#fff;color:#201e1d;padding:18px 26px;font-size:15px}
.btn-blanc:hover{background:#f3f2f2}
@media (max-width:920px){ .cta-final-inner{grid-template-columns:1fr;gap:24px;padding-block:52px} }
/* tarifs defilants : fond noir derriere les cartes blanches */
.ts{background:#201e1d;padding-bottom:36px}
:root[data-theme="dark"] .ts{background:#0e0d0f}
.ts .ts-tab{color:rgba(243,242,242,0.55)}
.ts.ts-live .ts-tab{color:rgba(243,242,242,0.55)}
.ts.ts-live .ts-tab:hover,.ts.ts-live .ts-tab[aria-selected="true"]{color:#fff}
.ts.ts-live .ts-tabs{border-bottom-color:rgba(243,242,242,0.25)}
.ts .offre-note{color:rgba(243,242,242,0.7)}
:root[data-theme] .ts .offre-note a{color:#fff}
/* boutons des cartes : pleine largeur, centres, jamais coupes de travers */
.offre-card .btn{width:100%;text-align:center;line-height:1.25;white-space:normal}
.ts-card .btn{width:auto}