/* ── NA — page /parlons/ : conversation de prise de besoin (protocole de blocs) ─────────
   Référence : na-maquette-blocs.html. Variables du thème : --jaune --bleu --vert --ivoire. */

@keyframes na-in    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes na-pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes na-sweep { 0%{transform:translateX(-140%) skewX(-18deg)} 60%,100%{transform:translateX(260%) skewX(-18deg)} }
@media (prefers-reduced-motion:reduce){ .na-turn,.na-status i,.na-avatar-sweep{animation:none!important} }

.na-wrap{
  --na-line:rgba(116,147,176,.18); --na-line2:#26394b; --na-mut:#8ea1b4; --na-doux:#adbac8; --na-txt:#f5f7f8;
  display:grid; grid-template-columns:minmax(320px,460px) minmax(0,1fr); min-height:calc(100vh - 110px);
  background:#0a1626;
}
@media (max-width:960px){ .na-wrap{grid-template-columns:minmax(0,1fr)} .na-aside{display:none} }

/* ── Rail gauche ─────────────────────────────────────────────────────── */
.na-aside{
  padding:clamp(28px,3.5vw,48px) clamp(24px,2.6vw,40px) clamp(28px,3.5vw,48px) max(clamp(18px,4vw,42px),calc((100% - 1580px)/2));
  border-right:1px solid var(--na-line2); background:#06101f;
}
.na-aside-in{position:sticky;top:110px;display:grid;gap:28px;max-height:calc(100vh - 140px)}
.na-aside-top{display:grid;gap:24px}
.na-brand{display:flex;gap:14px;align-items:center}
/* Avatar NA : le mark na.svg + balayage lumineux (inchangés), en rond */
.na-avatar{position:relative;width:68px;height:68px;flex:0 0 68px;border-radius:50%;overflow:hidden;border:1px solid #80a8da66;background:linear-gradient(135deg,#153765,#112b51);display:grid;place-items:center}
.na-avatar-img{width:40px;height:auto;display:block;position:relative;z-index:1}
.na-avatar-sweep{position:absolute;top:-20%;left:0;width:40%;height:140%;background:linear-gradient(90deg,transparent,#a8cbff55,transparent);animation:na-sweep 3.6s ease-in-out infinite}
.na-title{margin:0 0 6px;font-size:clamp(26px,2.3vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.08;color:var(--na-txt)}
.na-dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--jaune,#f1e91c);margin-left:.06em;vertical-align:baseline}
.na-sub{margin:0;font-size:13.5px;color:var(--na-mut)}
.na-desc{margin:0;font-size:14px;line-height:1.65;color:var(--na-doux)}

.na-phases{list-style:none;margin:0;padding:0}
.na-phase{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--na-line2);font-size:14.5px;color:var(--na-mut)}
.na-phase-n{font-size:11px;color:#5f7488;font-variant-numeric:tabular-nums}
.na-phase.is-active{color:var(--na-txt)}
.na-phase.is-active .na-phase-n{color:var(--jaune,#f1e91c)}
.na-phase.is-done .na-phase-n{color:var(--vert,#6fae7f)}
.na-phase-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--jaune,#f1e91c);margin-left:auto}
.na-phase.is-active .na-phase-dot{display:block}

.na-contact{margin-top:6px;padding-top:20px;border-top:1px solid var(--na-line2)}
.na-contact-t{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f7488;margin:0 0 12px}
.na-contact a{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--na-doux);text-decoration:none;margin-bottom:10px}
.na-contact a:last-child{margin-bottom:0}
.na-contact svg{width:15px;height:15px;flex:0 0 15px;color:#6f849a}
.na-contact a:hover,.na-contact a:hover svg{color:var(--jaune,#f1e91c)}
.na-aside-note{margin:0;font-size:12px;line-height:1.55;color:#6f849a}
.na-aside-note a{color:var(--na-doux)}

/* ── Colonne conversation ────────────────────────────────────────────── */
.na-chat{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:calc(100vh - 110px)}
.na-msgs{padding:clamp(28px,3.5vw,48px) clamp(24px,3.5vw,52px) 8px;display:grid;align-content:start;gap:4px;max-width:920px;width:100%}

.na-turn{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;animation:na-in .35s ease both}
.na-turn.is-me{flex-direction:row-reverse}
.na-mini{width:34px;height:34px;border-radius:50%;flex:0 0 34px;overflow:hidden;border:1px solid #80a8da66;background:linear-gradient(135deg,#153765,#112b51);display:grid;place-items:center;color:var(--bleu,#7fb0e8)}
.na-mini img{width:20px;height:auto;display:block}
.na-mini svg{width:16px;height:16px}
.na-turn.is-me .na-mini{background:#12304a;border-color:#2b5375}
.na-col{max-width:640px;min-width:0;display:grid;gap:12px}
.na-turn.is-me .na-col{margin-left:auto;justify-items:end}
.na-who{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f7488;margin:2px 0 -4px}

/* bloc message */
.na-bubble{background:#122132;border:1px solid #2e4459;border-radius:16px;padding:15px 18px;font-size:15px;line-height:1.55;color:#e7edf3}
.na-bubble p{margin:0 0 .6em}
.na-bubble p:last-child{margin:0}
.na-bubble strong{color:#fff;font-weight:600}
.na-bubble.is-me{background:linear-gradient(135deg,#17405f,#123049);border-color:#35648f;color:#eef5fb;display:inline-block}
.na-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.na-sources a{font-size:11px;color:var(--na-mut);border:1px solid var(--na-line2);border-radius:6px;padding:3px 8px;text-decoration:none}
.na-sources a:hover{color:#fff;border-color:var(--bleu,#7fb0e8)}

/* bloc question + chips */
.na-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.na-chip{border:1px solid #4a6a8c;background:rgba(127,176,232,.12);border-radius:14px;padding:12px 18px;font:inherit;font-size:14.5px;font-weight:500;line-height:1.3;color:#fff;cursor:pointer;transition:.15s;text-align:left;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.na-chip:hover{border-color:var(--jaune,#f1e91c);background:rgba(241,233,28,.10)}
.na-chip:disabled{opacity:.45;cursor:default}
.na-chip.is-chosen{border-color:var(--jaune,#f1e91c);background:var(--jaune,#f1e91c);color:#131611;opacity:1}

/* bloc formulaire */
.na-formblock{border:1px solid var(--na-line);border-radius:16px;padding:18px;background:rgba(9,20,33,.5);display:grid;gap:13px}
.na-formblock .na-ft{font-size:13px;color:var(--na-mut)}
.na-field{display:grid;gap:6px}
.na-field label{font-size:12px;color:var(--na-doux)}
.na-inp{width:100%;background:#0a1826;border:1px solid var(--na-line2);border-radius:10px;padding:11px 13px;color:#e7edf3;font:inherit;font-size:14px}
.na-inp:focus{outline:none;border-color:var(--bleu,#7fb0e8)}
.na-segm{display:flex;flex-wrap:wrap;gap:8px}
.na-opt{border:1px solid var(--na-line2);background:transparent;border-radius:10px;padding:9px 14px;font:inherit;font-size:13px;color:#cdd9e5;cursor:pointer}
.na-opt.is-sel{border-color:var(--jaune,#f1e91c);background:rgba(241,233,28,.08);color:#fff}
.na-submit{display:inline-flex;align-items:center;gap:10px;justify-self:start;background:var(--jaune,#f1e91c);color:#131611;border:0;border-radius:30px;padding:12px 20px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.na-submit:disabled{opacity:.5;cursor:default}
.na-formblock.is-sent{opacity:.6;pointer-events:none}

/* bloc upload */
.na-upload{border:1.5px dashed #3a4d61;border-radius:16px;padding:20px;text-align:center;background:rgba(9,20,33,.35);cursor:pointer;transition:.15s}
.na-upload:hover,.na-upload.is-over{border-color:var(--bleu,#7fb0e8)}
.na-upload .na-ic{width:40px;height:40px;border-radius:12px;background:#12283f;display:grid;place-items:center;margin:0 auto 10px;color:var(--bleu,#7fb0e8);font-size:19px}
.na-upload .u1{font-size:14px;color:#dce6f0;margin-bottom:3px}
.na-upload .u2{font-size:12px;color:var(--na-mut)}
.na-upload input{display:none}
.na-upload-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.na-ghost{background:transparent;border:1px solid var(--na-line2);border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;color:var(--na-doux);cursor:pointer}
.na-ghost:hover{border-color:var(--jaune,#f1e91c);color:#fff}
.na-filepill{display:inline-flex;align-items:center;gap:9px;margin-top:12px;background:#0a1826;border:1px solid var(--na-line2);border-radius:10px;padding:8px 12px;font-size:13px;color:#dce6f0}
.na-filepill i{width:8px;height:8px;border-radius:2px;background:var(--vert,#6fae7f)}

/* bloc secteur */
.na-secteur{border:1px solid var(--na-line);border-radius:18px;overflow:hidden;background:rgba(9,20,33,.55)}
.na-secteur .sh{padding:14px 18px;border-bottom:1px solid var(--na-line2);font-size:14px;font-weight:600;color:#fff}
.na-secteur .sh small{display:block;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--na-mut);margin-bottom:3px}
.na-secteur .sv{padding:14px 18px;border-bottom:1px solid rgba(38,57,75,.5);font-size:14px;line-height:1.55;color:#dce6f0}
.na-secteur .sv:last-of-type{border-bottom:0}
.na-secteur .sv b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune,#f1e91c);margin-bottom:5px;font-weight:600}
.na-secteur .na-sources{padding:0 18px 14px;margin:0}

/* bloc récap éditable */
.na-recap{border:1px solid var(--na-line);border-radius:18px;overflow:hidden;background:rgba(9,20,33,.55)}
.na-recap .rh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--na-line2)}
.na-recap .rh b{font-size:14px;font-weight:600;color:#fff}
.na-recap .rh span{font-size:12px;color:var(--na-mut)}
.na-recap .row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:11px 18px;border-bottom:1px solid rgba(38,57,75,.5);font-size:14px}
.na-recap .row:last-of-type{border-bottom:0}
.na-recap .row .k{color:var(--na-mut);font-size:12.5px;padding-top:2px}
.na-recap .row .v{color:#e7edf3;line-height:1.5;border-radius:6px;padding:2px 4px;margin:-2px -4px;cursor:text;outline:none}
.na-recap .row .v:focus{background:#0a1826;box-shadow:0 0 0 1px var(--bleu,#7fb0e8)}
.na-recap .rf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--na-line2);font-size:12.5px;color:var(--na-mut)}
.na-recap.is-sent .rf,.na-recap.is-sent .rh span{display:none}
.na-recap.is-sent .row .v{pointer-events:none}
@media (max-width:560px){ .na-recap .row{grid-template-columns:1fr;gap:4px} }

/* bloc relais (handoff) */
.na-handoff{border:1px solid #2b4763;border-radius:18px;padding:20px;background:linear-gradient(150deg,#0e2136,#0a1a2b);display:grid;gap:12px}
.na-handoff .ht{font-size:15px;color:#eaf1f8;margin:0;font-weight:500}
.na-handoff .hs{font-size:13px;color:var(--na-doux);margin:0}
.na-handoff .hf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.na-handoff .hf .full{grid-column:1/-1}
@media (max-width:560px){ .na-handoff .hf{grid-template-columns:1fr} }
.na-handoff .hb{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.na-handoff .rea{font-size:11.5px;color:var(--na-mut);margin:0}
.na-handoff.is-sent{opacity:.6;pointer-events:none}

/* blocs larges (rendez-vous, secteur) : on sort de la colonne de 640px */
.na-turn.is-wide .na-col{max-width:100%;width:100%}

/* bloc rendez-vous — façon Calendly */
.na-book{border:1px solid var(--na-line);border-radius:18px;overflow:hidden;background:rgba(9,20,33,.55);display:grid;grid-template-columns:230px minmax(0,1fr)}
@media (max-width:760px){ .na-book{grid-template-columns:1fr} }
.na-book .bk-info{padding:20px 20px 22px;border-right:1px solid var(--na-line2);background:rgba(4,10,20,.35);display:grid;align-content:start;gap:8px}
@media (max-width:760px){ .na-book .bk-info{border-right:0;border-bottom:1px solid var(--na-line2)} }
.na-book .bk-av{width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid #80a8da66;background:linear-gradient(135deg,#153765,#112b51);display:grid;place-items:center;margin-bottom:6px}
.na-book .bk-av img{width:22px;height:auto}
.na-book .bk-t{margin:0 0 6px;font-size:16px;font-weight:600;color:#fff;line-height:1.25}
.na-book .bk-l{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--na-doux)}
.na-book .bk-l svg{width:15px;height:15px;flex:0 0 15px;color:#6f849a}
.na-book .bk-d{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--na-mut)}
.na-book .bk-cal{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0}
.na-book .bk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--na-line2)}
.na-book .bk-mois{font-size:14px;font-weight:500;color:#fff}
.na-book .bk-prev,.na-book .bk-next{width:34px;height:34px;border-radius:50%;border:1px solid var(--na-line2);background:transparent;color:#dce6f0;font-size:11px;cursor:pointer;display:grid;place-items:center}
.na-book .bk-prev:hover,.na-book .bk-next:hover{border-color:var(--jaune,#f1e91c);color:#fff}
.na-book .bk-prev:disabled,.na-book .bk-next:disabled{opacity:.3;cursor:default}
.na-book .bk-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px 16px;overflow-x:auto}
@media (max-width:760px){ .na-book .bk-week{grid-template-columns:repeat(5,minmax(112px,1fr))} }
.na-day{border:1px solid var(--na-line2);border-radius:12px;padding:10px 8px 6px;text-align:center;min-width:0}
.na-day.is-off{opacity:.45}
.na-day .dn{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--na-mut)}
.na-day .dd{font-size:20px;font-weight:500;margin:1px 0 0;color:#fff;line-height:1.1}
.na-day .dm{font-size:10.5px;color:var(--na-mut);margin-bottom:10px}
.na-noslot{font-size:13px;color:#5f7488;padding:9px 0 12px}
.na-slot{display:block;width:100%;border:1px solid var(--na-line2);background:#0a1826;border-radius:9px;padding:9px 0;font:inherit;font-size:13px;color:#dce6f0;margin-bottom:8px;cursor:pointer;transition:.15s}
.na-slot:hover{border-color:var(--jaune,#f1e91c);color:#fff}
.na-slot.is-sel{border-color:var(--jaune,#f1e91c);background:rgba(241,233,28,.1);color:#fff}
.na-book .bk-foot{display:grid;gap:10px;padding:14px 16px;border-top:1px solid var(--na-line2)}
.na-book .bk-foot .bf{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}
@media (max-width:760px){ .na-book .bk-foot .bf{grid-template-columns:1fr} }
.na-book .bkb{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--na-doux)}
.na-book .bkb b{color:#fff;font-weight:500}
.na-book.is-sent{opacity:.6;pointer-events:none}

/* bulle en direct (streaming) */
@keyframes na-caret{0%,100%{opacity:0}50%{opacity:1}}
.na-caret{display:inline-block;width:2px;height:1em;background:var(--jaune,#f1e91c);margin-left:3px;vertical-align:-2px;animation:na-caret .9s steps(1) infinite}
.na-turn.is-live{animation:none}

/* statut « ce que NA fait » */
.na-status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--na-mut);padding:6px 0 10px 48px}
.na-status i{width:7px;height:7px;border-radius:50%;background:var(--jaune,#f1e91c);animation:na-pulse 1.1s ease-in-out infinite}

/* zone de saisie */
.na-input-wrap{padding:10px clamp(20px,3vw,44px) clamp(20px,3vw,32px);max-width:920px;width:100%;display:grid;gap:8px;position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#0a1626 22%)}
.na-form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;border:1px solid #3a5470;border-radius:20px;background:#0e1c2c;padding:14px 14px 14px 20px;transition:border-color .2s;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.na-form:focus-within{border-color:var(--jaune,#f1e91c)}
.na-form-hint{display:block;font-size:12px;color:#6f849a;margin-bottom:6px}
.na-textarea{width:100%;background:transparent;border:0;resize:none;color:#e7edf3;font:inherit;font-size:16px;line-height:1.5;outline:none;min-height:56px;max-height:200px}
.na-textarea::placeholder{color:#5f7488}
.na-send{width:50px;height:50px;border-radius:50%;border:0;background:var(--jaune,#f1e91c);color:#131611;font-size:18px;cursor:pointer;display:grid;place-items:center}
.na-send:disabled{opacity:.4;cursor:default}
.na-form-note{margin:0;font-size:11.5px;color:#5f7488}
.na-form.is-off{opacity:.5;pointer-events:none}

/* bandeau indisponible */
.na-banner{margin:0 0 16px;padding:14px 16px;border:1px solid #5a4a1a;border-radius:12px;background:rgba(241,233,28,.06);font-size:13.5px;color:#e7edf3;line-height:1.5}
.na-banner a{color:var(--jaune,#f1e91c)}

/* reprise d'une conversation précédente */
.na-reprise{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:#8a99a8;font-size:12.5px}
.na-reprise::before,.na-reprise::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}
.na-reprise span{white-space:nowrap}
.na-neuf{flex:none;background:none;border:1px solid rgba(255,255,255,.16);color:#c7d2dd;border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s}
.na-neuf:hover{border-color:var(--jaune,#f1e91c);color:var(--jaune,#f1e91c)}