/* Styles propres à la page « ia » (repris de la maquette). */
/* ---- Transformation digitale & IA : le copier-coller, puis le grand tri ---------------- */
.i-paste { --len: 4.5; }
.i-paste .pin-stage { background: #071A1D; color: #fff; }
.i-hero { position: absolute; z-index: 4; inset: calc(var(--bar-h) + 28px) max(20px, env(safe-area-inset-right, 0px)) auto max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
@media (max-width: 899px) { .i-hero { top: auto; bottom: 40px; } }
@media (min-width: 900px) { .i-hero { left: 64px; right: 64px; top: 50%; transform: translateY(-50%); } }
.i-hero h1 { display: grid; gap: 16px; }
.i-hero .h1-seo { color: #A9B4BC; max-width: 34em; }
.i-hero .giant { font-size: clamp(2.9rem, 12.4vw, 9.6rem); color: #fff; max-width: 11em; }
.i-hero .giant em { font-style: normal; color: var(--vert-clair); white-space: nowrap; }
.caret { display: inline-block; width: .1em; height: .78em; margin-left: .06em; vertical-align: -.04em; background: var(--vert-clair); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.i-hero .hint { font: 500 .8125rem/1.3 var(--f-mono); color: #A9B4BC; }
/* Le mur des copier-coller */
.wall { position: absolute; z-index: 2; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); top: calc(var(--bar-h) + 20px); bottom: 20px; overflow: hidden; }
@media (min-width: 900px) { .wall { left: 64px; right: 64px; top: calc(var(--bar-h) + 40px); bottom: 40px; } }
.wall .rows { position: absolute; inset: 0; }
.cd { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; height: var(--rh, 34px); width: 100%; font: 500 .875rem/1.15 var(--f-text); color: #DDE7E8; background: rgba(255,255,255,.05); border-left: 3px solid rgba(255,255,255,.18); visibility: hidden; overflow: hidden; }
.cd .k { font: 600 .6875rem/1 var(--f-mono); color: var(--vert-clair); flex: none; }
.cd .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { .cd.sorted { font-size: .875rem; } }
.cd.sorted { border-left-color: var(--c); font-size: .8125rem; line-height: 1.2; padding: 0 9px; }
@media (min-width: 900px) { .cd.sorted { font-size: .875rem; padding: 0 10px; } }
.cd.sorted .k { display: none; }
@media (min-width: 900px) { .cd.sorted .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
.cd.struck .t { text-decoration: line-through; text-decoration-thickness: 1.5px; color: #8796A0; }
.cd.flowing { background-image: linear-gradient(90deg, transparent 0 30%, rgba(60,194,191,.28) 50%, transparent 70% 100%); background-size: 300% 100%; animation: flowbg 2.2s linear infinite; }
@keyframes flowbg { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.cd.cat-s { --c: #A9B4BC; } .cd.cat-a { --c: var(--vert-clair); } .cd.cat-v { --c: var(--jaune); }
.cd .ok { margin-left: auto; font: 700 .75rem/1 var(--f-mono); color: var(--jaune); opacity: 0; flex: none; }
.pastes { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 18px; font: 600 clamp(2.6rem, 13vw, 8rem)/.9 var(--f-mono); letter-spacing: -.04em; color: var(--vert-clair); visibility: hidden; text-shadow: 0 0 40px rgba(7,26,29,.9); }
@media (min-width: 900px) { .pastes { right: 64px; bottom: 36px; } }
.pastes small { display: block; font: 500 .8125rem/1.3 var(--f-text); letter-spacing: 0; color: #A9B4BC; text-align: right; }
.i-cols { position: absolute; z-index: 3; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); top: calc(var(--bar-h) + 16px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .i-cols { left: 64px; right: 64px; top: calc(var(--bar-h) + 32px); gap: 24px; } }
@media (max-width: 899px) { .i-cols { display: block; height: 0; } .i-cols > div { position: absolute; left: 0; right: 0; top: 0; } }
.i-cols b { display: flex; align-items: center; gap: 8px; font: 700 clamp(.9375rem, 1.6vw, 1.375rem)/1.1 var(--f-display); letter-spacing: -.01em; visibility: hidden; }
.i-cols b::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--c); }
.i-cols .c-s { --c: #A9B4BC; } .i-cols .c-a { --c: var(--vert-clair); } .i-cols .c-v { --c: var(--jaune); }
.i-cols small { display: block; font: 500 .75rem/1.3 var(--f-text); color: #A9B4BC; visibility: hidden; margin-top: 4px; }
/* Le i : le curseur reçoit son point */
.ibig { --u: 4.2px; position: absolute; z-index: 5; left: 50%; top: 50%; width: calc(18 * var(--u)); height: calc(63 * var(--u)); translate: -50% -50%; visibility: hidden; }
@media (min-width: 900px) { .ibig { --u: calc(46svh / 37); } }
.ibig i { position: absolute; left: 0; width: 100%; background: var(--vert-clair); }
.ibig .dot { top: 0; height: calc(18 * var(--u)); }
.ibig .stem { bottom: 0; height: calc(37 * var(--u)); opacity: 0; }
.caret-fly { position: absolute; z-index: 6; left: 0; top: 0; width: 6px; height: 40px; background: var(--vert-clair); pointer-events: none; }
.caret-fly.blink { animation: caret 1.05s steps(1) infinite; }
.ibig .ring { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%; border: 3px solid var(--vert-clair); opacity: 0; }
.i-punch { position: absolute; z-index: 6; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: 32px; font: 750 clamp(3rem, 13.2vw, 10rem)/.88 var(--f-display); letter-spacing: -.038em; visibility: hidden; }
@media (min-width: 900px) { .i-punch { left: 64px; bottom: 7%; } }
.i-punch em { font-style: normal; color: var(--jaune); display: block; }

/* Le devis */
.i-doc { --len: 3; }
.i-doc .pin-stage { background: #0C2326; color: #fff; }
.i-doc__in { position: absolute; inset: calc(var(--bar-h) + 24px) max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; grid-template-rows: auto 1fr; }
@media (min-width: 900px) { .i-doc__in { left: 64px; right: 64px; top: calc(var(--bar-h) + 48px); bottom: 48px; } }
.i-doc__head { display: grid; gap: 10px; }
.i-doc__head .t2 { max-width: 14em; }
.i-doc__head p { color: #A9B4BC; max-width: 34em; }
.i-doc__grid { position: relative; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; min-height: 0; }
@media (min-width: 900px) { .i-doc__grid { grid-template-columns: 5fr 6fr; gap: 40px; } }
.paper { background: #fff; color: var(--encre); padding: 8% 9%; display: grid; gap: 7px; font-size: clamp(.5625rem, 1vw, .8rem); line-height: 1.35; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.paper h3 { font: 700 clamp(.8rem, 1.6vw, 1.25rem)/1.1 var(--f-display); }
.paper .ln { height: 6px; background: #E4E8EA; }
.paper .hl { outline: 0 solid transparent; }
.paper .hl.on { background: rgba(60,194,191,.28); outline: 1.5px solid var(--vert); }
.paper .ex { position: absolute; right: 8px; bottom: 8px; font: 500 .625rem/1 var(--f-mono); color: var(--encre-2); }
.scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--vert-clair); box-shadow: 0 0 18px 4px rgba(60,194,191,.6); top: 0; }
.fieldsx { position: relative; display: grid; gap: 8px; }
.fx { position: relative; border: 1px solid rgba(255,255,255,.16); padding: 9px 30px 9px 10px; display: grid; gap: 3px; background: rgba(255,255,255,.03); }
.fx small { font: 500 .6875rem/1.2 var(--f-mono); color: #A9B4BC; }
.fx b { font: 600 clamp(.8rem, 1.3vw, 1rem)/1.25 var(--f-text); min-height: 1.25em; overflow-wrap: anywhere; }
.fx .st { font: 500 .6875rem/1.2 var(--f-mono); color: var(--jaune); }
.fx.ok { border-color: var(--jaune); }
.fx.ok .st { color: var(--jaune); }
.sendbar { margin-top: 6px; padding: 10px 12px; background: rgba(60,194,191,.2); color: #fff; font-weight: 600; font-size: .875rem; }
@media (max-width: 899px) {
  .i-doc__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .i-doc__head p { font-size: .9375rem; }
  .paper { font-size: .75rem; gap: 6px; padding: 18px 20px 26px; }
  .paper h3 { font-size: 1rem; }
  .fieldsx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fx { padding: 7px 26px 7px 9px; }
  .fx b { font-size: .8125rem; }
  .sendbar { grid-column: 1 / -1; margin-top: 0; }
}
.sendbar.on { background: var(--vert-clair); color: #071A1D; }
.hand { position: absolute; z-index: 3; left: 0; top: 0; width: 26px; height: 26px; visibility: hidden; pointer-events: none; }
.hand::before { content: ""; position: absolute; inset: 0; background: var(--jaune); clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 96%, 52% 90%, 37% 55%, 66% 55%); }
.hand span { position: absolute; left: 22px; top: 18px; font: 600 .6875rem/1 var(--f-mono); color: #071A1D; background: var(--jaune); padding: 4px 6px; white-space: nowrap; }
.crm { position: absolute; right: 0; top: -6px; z-index: 2; font: 600 .75rem/1 var(--f-mono); padding: 7px 9px; border: 1px solid var(--vert-clair); color: var(--vert-clair); }
.crm b { color: #fff; }

/* Règles écrites */
.editor { border: 1px solid var(--line); background: #04110F; max-width: 900px; }
.ed-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 .8125rem/1.2 var(--f-mono); color: #A9B4BC; }
.ed-bar span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--vert-clair); margin-right: 8px; }
.ed-lines { margin: 0; padding: 14px 0; list-style: none; counter-reset: l; font: 500 clamp(.8125rem, 1.4vw, 1rem)/1.7 var(--f-mono); }
.ed-lines li { counter-increment: l; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding-right: 14px; min-height: 1.7em; }
.ed-lines li::before { content: counter(l); color: #3E5A5E; text-align: right; padding-right: 14px; }
.ed-lines .c { color: #6F8A8E; }
.ed-lines .k { color: var(--vert-clair); }
.ed-lines .v { color: #fff; }
.ed-lines .code { clip-path: inset(0 100% 0 0); }
.is-static .ed-lines .code { clip-path: none; }

/* L'automatisation en une phrase */
.builder { display: grid; gap: 22px; }
@media (min-width: 1000px) { .builder { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: start; } }
.recipe { font: 700 clamp(1.7rem, 4.4vw, 3.3rem)/1.12 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.recipe .w { color: #6F8A8E; }
.recipe b { color: var(--vert-clair); font-weight: 700; }
.recipe b[data-slot="humain"] { color: var(--jaune); }
.recipe b.flash { animation: flashSlot .6s var(--ease); }
@keyframes flashSlot { from { background: rgba(60,194,191,.35); } to { background: transparent; } }
.b-opts { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.b-opts legend { font: 500 .8125rem/1.2 var(--f-mono); color: #A9B4BC; padding: 0; margin-bottom: 10px; }
.b-opts .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-block; padding: 10px 14px; border: 1.5px solid var(--line); font-size: .9375rem; line-height: 1.2; min-height: 44px; display: inline-flex; align-items: center; }
.opt input:checked + span { border-color: var(--vert-clair); background: rgba(60,194,191,.12); }
.b-opts.h .opt input:checked + span { border-color: var(--jaune); background: rgba(247,193,21,.1); }
.opt input:focus-visible + span { outline: 2px solid var(--jaune); outline-offset: 2px; }
.builder__side { display: grid; gap: 22px; }
.builder .join { justify-self: start; }
.builder .join .on { display: none; }
.builder .join[aria-pressed="true"] .on { display: inline; }
.builder .join[aria-pressed="true"] .off { display: none; }
.builder .note { font-size: .875rem; color: #A9B4BC; }

/* Chantiers : un flux de nœuds reliés */
.wf { position: relative; display: grid; gap: 28px; padding-left: 34px; }
.wf::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: #1C3A3E; }
.wf .pulse { position: absolute; left: 4px; top: 12px; width: 12px; height: 12px; background: var(--vert-clair); box-shadow: 0 0 16px 4px rgba(60,194,191,.5); }
.wf-node { position: relative; border: 1.5px solid #1C3A3E; background: #0A2226; padding: 20px; display: grid; gap: 10px; }
@media (min-width: 900px) { .wf-node { grid-template-columns: 70px minmax(0, 4fr) minmax(0, 6fr); gap: 10px 28px; padding: 26px 28px; } }
.wf-node::before { content: ""; position: absolute; left: -31px; top: 22px; width: 12px; height: 12px; border: 2px solid var(--vert-clair); background: #071A1D; }
.wf-node .n { font: 500 .875rem/1.4 var(--f-mono); color: var(--vert-clair); }
.wf-node h3 { font: 700 clamp(1.4rem, 2.4vw, 2rem)/1.05 var(--f-display); letter-spacing: -.025em; }
.wf-node p { color: #A9B4BC; }
.wf-node .livrables { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 0; list-style: none; }
.wf-node .livrables li { font: 500 .8125rem/1.2 var(--f-mono); padding: 6px 9px; border: 1px solid #1C3A3E; }
.wf-node.on { border-color: var(--vert-clair); }

/* Méthode : une conversation */
.chat { display: grid; gap: 14px; max-width: 820px; }
.msg { max-width: 88%; padding: 14px 16px; display: grid; gap: 6px; }
.msg .who { font: 500 .75rem/1.2 var(--f-mono); color: #A9B4BC; }
.msg p { font-size: 1.0625rem; }
.msg h3 { font: 700 1.375rem/1.1 var(--f-display); letter-spacing: -.02em; }
.msg.us { background: #0A2226; border: 1px solid #1C3A3E; justify-self: start; }
.msg.you { background: var(--jaune); color: var(--encre); justify-self: end; }
.msg.you .who { color: var(--encre-2); }
.faq--prompt summary { font-family: var(--f-text); }
.faq--prompt summary::before { content: "› "; font-family: var(--f-mono); color: var(--vert-clair); }
.faq--prompt details > div { border-left: 2px solid var(--vert-clair); padding-left: 14px; }

.is-static .i-paste .pin-stage, .is-static .i-doc .pin-stage { padding: calc(var(--bar-h) + 40px) 20px 60px; }
.is-static .i-hero, .is-static .i-punch, .is-static .i-doc__in { position: relative; inset: auto; transform: none; margin-bottom: 28px; visibility: visible; }
.is-static .wall, .is-static .pastes, .is-static .i-cols, .is-static .ibig, .is-static .caret-fly, .is-static .hand, .is-static .crm { display: none; }