/* =====================================================================
   ENVOYER UNE NOTE — carte deux volets dans un seul écran (accent orange du bouton « Envoyer une note »)
   ===================================================================== */
.nt{--acc:#ff7a1a;--acc-rgb:255,122,26;--card:rgba(255,255,255,.035);--line:rgba(255,255,255,.12);--field:rgba(255,255,255,.045);padding-top:14px}
:root[data-theme="light"] .nt{--acc:#e8630a;--acc-rgb:232,99,10;--card:#fff;--line:rgba(20,26,46,.12);--field:#f6f7fb}
.nt-card{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);border-radius:22px;overflow:hidden;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.25)}
:root[data-theme="light"] .nt-card{box-shadow:inset 0 0 0 1px var(--line),0 16px 40px rgba(20,26,46,.08)}

/* volet gauche : l'invitation */
.nt-side{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:30px 28px;overflow:hidden;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 3%,transparent);border-right:1px solid var(--line)}
.nt-side__plane{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;color:var(--acc);background:rgba(var(--acc-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.35)}
.nt-side__plane svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){ .nt-side__plane svg{animation:ntFly 3.2s ease-in-out infinite} }
@keyframes ntFly{50%{transform:translate(3px,-4px) rotate(-6deg)}}
.nt-side h2{margin:4px 0 0;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.nt-side>p{margin:0;font-size:15px;line-height:1.55;color:var(--dim)}

/* volet droit : le formulaire */
.nt-form{min-height:0;display:flex;flex-direction:column;gap:12px;padding:22px 24px 18px}
.nt-kinds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;border:0}
.nt-kinds legend{float:left;margin:0 6px 0 0;font-size:13px;font-weight:600;color:var(--ink)}
.nt-kind input{position:absolute;opacity:0;pointer-events:none}
.nt-kind span{display:inline-block;padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13px;color:var(--dim);background:var(--field);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.nt-kind input:checked+span{color:var(--ink);background:rgba(var(--acc-rgb),.14);box-shadow:inset 0 0 0 1.5px var(--acc)}
.nt-kind input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.nt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nt-field{display:flex;flex-direction:column;gap:6px;min-height:0}
.nt-field>span{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink)}
.nt-count{font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.nt-field input,.nt-field textarea{width:100%;padding:11px 13px;border:0;border-radius:12px;font:inherit;font-size:15px;color:var(--ink);background:var(--field);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
.nt-field--msg{flex:1}
.nt-field textarea{flex:1;min-height:70px;resize:none;line-height:1.5}
.nt-field input:focus,.nt-field textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 4px rgba(var(--acc-rgb),.14)}
.nt-field [aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px #ff5a6a}
.nt-err{font-style:normal;font-size:12px;color:#ff5a6a}
.nt-err:empty{display:none}
.nt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 18px}
.nt-check{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:start;font-size:12.5px;line-height:1.45;color:var(--dim);cursor:pointer}
.nt-check input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--acc)}
.nt-check a{color:var(--acc)}
.nt-check .nt-err{grid-column:2}
.nt-btn{flex:none;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 85%,#fff),var(--acc));box-shadow:0 10px 26px rgba(var(--acc-rgb),.35);transition:transform .12s ease-out,filter .2s ease}
.nt-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;transition:transform .6s cubic-bezier(.5,0,.3,1),opacity .6s ease}
.nt-btn:hover{filter:brightness(1.06)}
.nt-btn:hover svg{transform:translate(2px,-2px) rotate(-6deg)}
.nt-btn:active{transform:scale(.97)}
.nt-btn:disabled{cursor:progress;filter:saturate(.7)}
.nt-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.nt-btn.is-sending svg{animation:ntWobble .8s ease-in-out infinite}
.nt-btn.is-flying svg{animation:none;transform:translate(60px,-40px) rotate(-18deg) scale(.6);opacity:0}
@keyframes ntWobble{50%{transform:translate(2px,-3px) rotate(-8deg)}}
.nt-btn--ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.nt-status{margin:0;font-size:13px;color:#ff5a6a}
.nt-status:empty{display:none}
.nt-status a{color:var(--acc);font-weight:600}

/* message envoyé */
.nt-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;outline:none}
.nt-done__plane{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;color:var(--acc);background:rgba(var(--acc-rgb),.12);box-shadow:inset 0 0 0 1.5px rgba(var(--acc-rgb),.5)}
.nt-done__plane svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.nt-done h2{margin:6px 0 0;font-size:28px;font-weight:600}
.nt-done p{margin:0;max-width:420px;color:var(--dim);line-height:1.6}
@media (prefers-reduced-motion:no-preference){ .nt-done__plane{animation:ntLand .7s cubic-bezier(.2,.9,.25,1) both} }
@keyframes ntLand{from{opacity:0;transform:translate(-30px,20px) rotate(-12deg) scale(.7)}}

/* écrans bas : on resserre */
@media (max-height:760px){ .nt-side{padding:22px 22px;gap:9px} .nt-side>p{font-size:14px} .nt-form{gap:9px;padding:16px 20px 14px} .nt-field input{padding:9px 12px} }
/* téléphone / tablette étroite : le volet orange devient un bandeau */
@media (max-width:760px){
  .nt{padding-top:8px}
  .nt-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:18px}
  .nt-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .nt-side::after,.nt-side>p{display:none}
  .nt-side__plane{width:34px;height:34px;border-radius:10px}
  .nt-side__plane svg{width:18px;height:18px}
  .nt-side h2{margin:0;font-size:1.15rem}
  .nt-form{gap:8px;padding:12px 14px}
  .nt-kinds legend{display:none}
  .nt-kind span{padding:6px 10px;font-size:12px}
  .nt-row{grid-template-columns:1fr;gap:8px}
  .nt-field{gap:4px}
  .nt-field>span{font-size:12px}
  .nt-field input,.nt-field textarea{padding:9px 11px;font-size:15px}
  .nt-foot{flex-direction:column;align-items:stretch;gap:8px}
  .nt-check{font-size:11.5px}
  .nt-btn{justify-content:center;padding:11px}
}
@media (prefers-reduced-motion:reduce){ .nt-btn svg{transition:none} }