/* =============================================================================
   OrthoAssist — css/01-base.css
   Styles d'origine de l'outil (variables, formulaires, écrans, bilan, impression, mobile).
   Base sur laquelle les fichiers suivants viennent se superposer.

   Les fichiers css/ sont chargés dans l'ordre 01 → 04 : chacun surcharge les
   précédents. Ne pas changer cet ordre dans index.html.
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #137F5E;
  --green-dark: #0F7052;
  --green-light: #E1F5EE;
  --green-mid: #9FE1CB;
  --green-deep: #0B5B42;
  --text-primary: #1a1a1a;
  --text-secondary: #555;
  --text-tertiary: #999;
  --border: #e5e5e5;
  --bg: #fff;
  --bg-secondary: #f8f8f6;
  --radius-md: 8px;
  --radius-lg: 12px;
  --red: #E24B4A;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-primary);
  background: var(--bg-secondary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===================== LANDING ===================== */
.landing { display: block; }
/* Mode application : on n'affiche jamais la page de vente au lancement.
   Pas de !important — showLanding_real() pose un style inline qui doit
   pouvoir reprendre la main. */
.app-mode #landing { display: none; }
.app { display: none; }
html { scroll-behavior: smooth; }

/* Wordmark bicolore : "Ortho" en noir, "Assist" en vert */
.brand { display: inline-block; line-height: 1; }
.brand-ortho { color: var(--text-primary); }
.brand-assist { color: #137F5E; }

/* Mode démo (activé via body.demo-mode quand demoBilan() est appelé) */
.demo-only { display: none; }
body.demo-mode .demo-only { display: flex; }
body.demo-mode .real-only { display: none !important; }
body.demo-mode .steps-nav { display: none !important; }
/* En mode démo, on cache les blocs en-tête praticien + identité patient :
   seules les sections rédigées par l'IA (motif, anamnèse, obs, tests, diagnostic,
   conclusion) sont visibles, pour que la visiteuse voie ce que l'outil produit. */
body.demo-mode [data-demo-hide="true"] { display: none !important; }

/* Polish : hover/focus subtils sur les éléments interactifs */

.btn:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
a { transition: color 0.15s ease; }

/* === SECTION "POUR QUI / PAS POUR QUI" === */

.landing { overflow-x: clip; }

.divider { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.check { width: 16px; height: 16px; border-radius: 50%; background: var(--green-light); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; }
.logo { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--green); cursor: pointer; }

/* ===================== APP ===================== */
.header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 1rem; }
.header-badge { font-size: 11px; background: var(--green-light); color: var(--green-dark); padding: 3px 10px; border-radius: 99px; font-weight: 500; }
.back-btn { font-size: 13px; color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; }
.back-btn:hover { color: var(--text-primary); }

.container { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.steps-nav { display: flex; align-items: center; gap: 0; margin-bottom: 2rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.5rem; overflow-x: auto; }
.step-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.step-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--border); color: var(--text-tertiary); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.step-dot.active { background: var(--green); color: #fff; }
.step-dot.done { background: var(--green-light); color: var(--green-dark); }
.step-label { font-size: 13px; color: var(--text-tertiary); transition: color 0.2s; }
.step-label.active { color: var(--text-primary); font-weight: 500; }
.step-label.done { color: var(--green); }
.step-arrow { font-size: 14px; color: var(--border); margin: 0 12px; }

.card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 2rem 2.5rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(8,80,65,.04), 0 12px 32px rgba(8,80,65,.05); }
.card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 23px; margin-bottom: 1.5rem; letter-spacing: -0.01em; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span2 { grid-column: span 2; }

label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
input, select, textarea { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,91,66,0.13); }
input::placeholder, textarea::placeholder { color: #b6b6b6; }
textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

.tests-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tests-table th { text-align: left; padding: 8px 10px; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 500; border-bottom: 1px solid var(--border); font-size: 12px; }
.tests-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tests-table tr:last-child td { border-bottom: none; }
.tests-table input, .tests-table select { padding: 6px 8px; font-size: 13px; }

.zone-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.zone-deficit { background: #FCEBEB; color: #A32D2D; }
.zone-faible { background: #FAEEDA; color: #854F0B; }
.zone-moyenne { background: #EAF3DE; color: #3B6D11; }
.zone-superieur { background: #E6F1FB; color: #185FA5; }

.btn { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: all 0.15s ease; background: var(--bg); color: var(--text-primary); }
.btn:hover { background: var(--bg-secondary); transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 3px 10px rgba(15,110,86,0.20); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,110,86,0.26); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; gap: 1rem; }

.screen { display: none; }
.screen.active { display: block; }

.loading-screen { text-align: center; padding: 4rem 2rem; }
.spinner { width: 48px; height: 48px; border: 3px solid var(--green-light); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 22px; margin-bottom: 0.5rem; }
.loading-sub { font-size: 14px; color: var(--text-secondary); }

.bilan-output { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1rem; }
.bilan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--green); }
.bilan-pratician { font-size: 13px; line-height: 1.8; color: var(--text-secondary); }
.bilan-pratician strong { color: var(--text-primary); font-size: 15px; }
.pratician-status { display: inline-block; margin-top: 4px; font-size: 12px; font-style: italic; color: var(--text-tertiary); }

/* Mode libre des tests : meilleure typographie et titres détectés */
.test-libre { font-size: 14px; line-height: 1.95; white-space: pre-wrap; color: var(--text-primary); letter-spacing: 0.005em; }
.test-libre strong { color: var(--text-primary); font-weight: 600; }
.test-libre .tl-bloc + .tl-bloc { margin-top: 1.1em; }

/* Signature électronique en bas du bilan */
.bilan-signature-block { margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: flex-end; }
.bilan-signature-inner { text-align: center; min-width: 240px; max-width: 280px; }
.bilan-signature-label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.signature-content { min-height: 90px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--text-secondary); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.signature-content img { max-height: 80px; max-width: 220px; object-fit: contain; }
.signature-content .sig-import-btn { padding: 8px 16px; background: var(--green-light); color: var(--green-dark); border: 1px dashed var(--green-mid); border-radius: 6px; cursor: pointer; font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.15s ease; }
.signature-content .sig-import-btn:hover { background: var(--green-mid); color: var(--green-deep); }
.sig-actions { display: flex; gap: 8px; justify-content: center; margin-top: 0.25rem; }
.sig-action-btn { font-size: 11px; color: var(--text-tertiary); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: 'Plus Jakarta Sans', sans-serif; padding: 0; }
.sig-action-btn:hover { color: var(--text-secondary); }
.bilan-signature-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.sig-choice { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sig-choice-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sig-import-btn.secondary { background: var(--bg); color: var(--text-secondary); border: 1px dashed var(--border); }
.sig-import-btn.secondary:hover { background: var(--bg-secondary); color: var(--text-primary); }
/* Modal pad de signature */
.sigpad-overlay { display: none; position: fixed; inset: 0; background: rgba(15,17,21,0.55); z-index: 10001; align-items: center; justify-content: center; padding: 24px; font-family: 'Plus Jakarta Sans', sans-serif; }
.sigpad-overlay.show { display: flex; }
.sigpad-card { background: var(--bg); border-radius: 18px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; }
.sigpad-head { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.sigpad-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 20px; color: var(--text-primary); line-height: 1.2; }
.sigpad-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.voice-ident-bloc { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.voice-ident-titre { font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.voice-ident-titre span { font-weight: 400; color: var(--text-secondary); }
.voice-ident { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px; }
.voice-ident input { padding: 10px 12px; font-size: 14px; }
@media (max-width: 560px) { .voice-ident { grid-template-columns: 1fr 1fr; } .voice-ident .voice-ddn { grid-column: span 2; } }
/* Date de naissance : intitulé visible (30/10/2026 ; avant, seulement « jj/mm/aaaa »). */
.voice-ident { align-items: end; }
.voice-ddn { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; color: #45534D; }
.voice-ddn input { width: 100%; }
.sigpad-canvas-wrap { padding: 16px 24px; }
#signature-canvas { width: 100%; height: 200px; border: 1.5px dashed var(--green-mid); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.sigpad-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sigpad-btn { padding: 9px 18px; border-radius: 9px; font: 600 14px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; border: 0; }
.sigpad-btn.primary { background: var(--green); color: #fff; }
.sigpad-btn.primary:hover { background: var(--green-dark); }
.sigpad-btn.ghost { background: none; color: var(--text-secondary); }
.sigpad-btn.ghost:hover { color: var(--text-primary); text-decoration: underline; }
/* Dictée vocale */
.dictate-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 12px; background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green-mid); border-radius: 8px; font: 600 12.5px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.dictate-btn:hover { background: var(--green-mid); }
.dictate-btn.recording { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.dictate-btn.recording .dictate-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: dictate-pulse 1s infinite; }
.dictate-btn.transcribing { opacity: 0.7; cursor: wait; }
@keyframes dictate-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.dictate-hint { font-size: 12px; color: var(--green-dark); background: var(--green-light); border: 1px solid var(--green-mid); border-radius: 8px; padding: 8px 12px; margin-bottom: 1rem; line-height: 1.5; }
@media print { .dictate-btn, .dictate-hint { display: none !important; } }
@media print {
  .sig-import-btn, .sig-action-btn, .sig-actions, .sig-choice { display: none !important; }
  .signature-content { border-bottom-color: #000 !important; }
}
.bilan-title-block { text-align: right; }
.bilan-main-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 20px; color: var(--green); }
.bilan-date { font-size: 12.5px; color: var(--text-tertiary); margin-top: 4px; }
.bilan-intitule { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin-top: 4px; max-width: 330px; margin-left: auto; }
.bilan-section { margin-bottom: 1.5rem; }
.bilan-section-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); margin-bottom: 0.75rem; padding-bottom: 4px; border-bottom: 1px solid var(--green-light); }
/* En-tête de section avec bouton « Ajuster » (régénération IA par section) */
.bs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--green-light); padding-bottom: 4px; margin-bottom: 0.75rem; }
.bs-head .bilan-section-title { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.bs-tools { position: relative; flex-shrink: 0; }
.bs-adjust { font-size: 11.5px; color: var(--green-dark); background: var(--green-light); border: none; border-radius: 99px; padding: 4px 11px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap; transition: background .15s; }
.bs-adjust:hover { background: var(--green-mid); }
.bs-adjust:disabled { opacity: .6; cursor: default; }

/* ===== COURRIERS DERIVES ===== */
.courrier-choix { display: grid; gap: 10px; margin-bottom: 1.25rem; }
.courrier-opt { text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: border-color .15s, background .15s; }
.courrier-opt:hover { border-color: var(--green); background: var(--green-light); }
.courrier-opt:disabled { opacity: .5; cursor: default; }
.courrier-opt-titre { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.courrier-opt-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.courrier-opt-fait { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #EAF5F0; color: #0B5B42; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.courrier-dest { font-size: 13px; color: var(--text-secondary); margin-bottom: 1.5rem; }
.courrier-corps { font-size: 14px; line-height: 1.75; white-space: pre-wrap; outline: none; border-radius: var(--radius-md); padding: 4px; }
.courrier-corps:focus { background: var(--green-light); }
.courrier-attente { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); font-size: 14px; }
.bs-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; display: none; z-index: 30; min-width: 172px; }
.bs-menu.open { display: block; }
.bs-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: 6px; font-family: 'Plus Jakarta Sans', sans-serif; }
.bs-menu button:hover { background: var(--green-light); }
@media print { .bs-tools { display: none !important; } }
.bilan-section p { font-size: 14px; line-height: 1.8; }
.bilan-section p[contenteditable="true"] { outline: none; padding: 8px; border-radius: 6px; transition: all 0.2s; cursor: text; }
.bilan-section p[contenteditable="true"]:hover { background: #f8f8f6; }
.bilan-section p[contenteditable="true"]:focus { background: #fff; border-left: 3px solid var(--green); padding-left: 12px; box-shadow: 0 1px 4px rgba(11,91,66,0.15); }
/* Depuis le 24/09 : une section rédigée est un conteneur de paragraphes. */
.bilan-section .bs-texte { outline: none; padding: 8px; border-radius: 6px; transition: all 0.2s; cursor: text; }
.bilan-section .bs-texte:hover { background: #f8f8f6; }
.bilan-section .bs-texte:focus { background: #fff; border-left: 3px solid var(--green); padding-left: 12px; box-shadow: 0 1px 4px rgba(11,91,66,0.15); }
.bs-texte p + p { margin-top: 0.75em; }
.edit-hint { font-size: 11px; color: var(--text-tertiary); font-style: italic; margin-bottom: 1rem; padding: 8px 12px; background: #f0f9f4; border-radius: 6px; border-left: 3px solid var(--green); }
@media print { .bilan-section .bs-texte { padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; } }
@media print { .edit-hint { display: none !important; } .bilan-section p[contenteditable="true"] { padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; } }
.bilan-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 0.5rem; }
.bilan-table { table-layout: auto; }
.bilan-table th:first-child, .bilan-table td:first-child { white-space: nowrap; }
.bilan-table th { background: var(--bg-secondary); padding: 8px 10px; text-align: left; font-weight: 500; color: var(--text-secondary); font-size: 12px; border-bottom: 1px solid var(--border); }
.bilan-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bilan-table tr:last-child td { border-bottom: none; }
.bilan-patient-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0.5rem; }
.bilan-patient-item { font-size: 13px; }
.bilan-patient-label { color: var(--text-tertiary); font-size: 12px; margin-bottom: 2px; }
.bilan-patient-value { font-weight: 500; }
.output-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.error-msg { background: #FCEBEB; color: #A32D2D; padding: 12px 16px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 1rem; display: none; }

/* Les anciennes regles .mic-* ont ete retirees : l'interface de dictee
   actuelle utilise les identifiants voice-* (voir #voice-modal). Aucune
   balise ni aucun script ne portait plus ces classes, et .mic-processing
   referencait --amber / --amber-light qui ne sont definies nulle part.
   @keyframes pulse partait avec : la dictee utilise dictate-pulse. */

/* ACCESS SCREEN */

/* ===== AUTH OVERLAY (Supabase) ===== */
.auth-overlay { display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:24px; background:linear-gradient(135deg,#f6fbf8 0%,#eef7f1 100%); font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.auth-overlay.show { display:flex; }
.auth-card { width:100%; max-width:420px; background:var(--bg); border:1px solid #e5edea; border-radius:20px; padding:36px 32px; box-shadow:0 12px 40px rgba(15,110,86,.08); }
.auth-logo { font-family:'DM Serif Display',serif; font-size:30px; text-align:center; color:#111; letter-spacing:-.5px; line-height:1.2; }
.auth-logo .auth-accent { color:var(--green-dark); }
.auth-sub { text-align:center; color:var(--text-secondary); margin:4px 0 24px; font-size:14px; }
.auth-tabs { display:flex; gap:4px; background:#f3f6f4; padding:4px; border-radius:12px; margin-bottom:22px; }
.auth-tab { flex:1; border:0; background:transparent; padding:10px 12px; border-radius:9px; font:600 14px/1 'Plus Jakarta Sans',sans-serif; color:var(--text-secondary); cursor:pointer; transition:all .15s ease; }
.auth-tab.active { background:var(--bg); color:var(--green-dark); box-shadow:0 1px 3px rgba(15,110,86,.1); }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#374151; }
.auth-form input { padding:12px 14px; border:1.5px solid #d8e0dc; border-radius:11px; font:400 15px/1.4 'Plus Jakarta Sans',sans-serif; color:#111; background:var(--bg); transition:border-color .15s, box-shadow .15s; }
.auth-form input:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(11,91,66,.15); }
.auth-submit { margin-top:6px; padding:13px; background:var(--green); color:#fff; border:0; border-radius:11px; font:600 15px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:background .15s, transform .05s; }
.auth-submit:hover { background:var(--green-dark); }
.auth-submit:active { transform:translateY(1px); }
.auth-submit:disabled { opacity:.55; cursor:not-allowed; }
.auth-msg { margin:0; padding:10px 12px; border-radius:9px; font-size:13.5px; line-height:1.4; background:#fef2f2; color:var(--red); }
.auth-msg.is-success { background:#ecfdf5; color:#065f46; }
.auth-footer { text-align:center; font-size:13px; color:var(--text-secondary); margin:20px 0 0; display:flex; flex-direction:column; gap:8px; }
.auth-footer a { color:var(--green-dark); font-weight:600; text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.auth-footer a:hover { text-decoration:underline; }
.auth-close-app { background:none; border:0; color:var(--text-tertiary); font-size:12px; cursor:pointer; text-decoration:underline; font-family:'Plus Jakarta Sans',sans-serif; }
.auth-codehint { font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin:0 0 8px; text-align:center; }
.auth-code-input { text-align:center !important; letter-spacing:8px; font:600 22px/1 ui-monospace,'SF Mono',Menlo,monospace !important; padding:14px 16px !important; }
.linkish-row { background:none; border:0; color:var(--green-dark); font:600 13px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; margin-top:6px; padding:6px; text-decoration:none; }
.linkish-row:hover { text-decoration:underline; }
.linkish-row:disabled { opacity:.45; cursor:default; text-decoration:none; }
/* Statut du compte (01/11/2026, js/16) : liste d'attente, suspendu, abonnement terminé. */
.oa-statut .auth-card { max-width:460px; }
.oa-statut .auth-logo { margin-bottom:22px; }
.oa-statut-titre { margin:0 0 12px; font:600 22px/1.3 'Plus Jakarta Sans',sans-serif; color:#111; text-align:center; letter-spacing:-.2px; }
.oa-statut-titre:focus { outline:0; }
.oa-statut-texte p { margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--text-secondary); text-align:center; }
.oa-statut a { color:var(--green-dark); font-weight:600; }
.oa-statut-contact { margin:14px 0 22px; font-size:14px; color:var(--text-secondary); text-align:center; }
.oa-statut-texte + .oa-statut-contact[hidden] + .auth-submit { margin-top:16px; }
.oa-statut .auth-submit { width:100%; min-height:46px; }
@media (max-width:480px) { .oa-statut .auth-card { padding:28px 20px; } .oa-statut-titre { font-size:20px; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ========== QUESTIONNAIRE PRÉFÉRENCES ========== */
.prefs-intro { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.prefs-intro-text { flex: 1; min-width: 240px; }
.prefs-intro-text h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 22px; margin-bottom: 4px; color: var(--text-primary); line-height: 1.2; }
.prefs-intro-text p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }
.prefs-intro-text p strong { color: var(--green-dark); }

.pref-question { margin-bottom: 1.75rem; }
.pref-label { font-size: 14.5px; font-weight: 500; margin-bottom: 0.75rem; color: var(--text-primary); display: block; }
.pref-options { display: flex; flex-direction: column; gap: 0.5rem; }
.pref-options label { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s, border-color 0.15s; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg); }
.pref-options label:hover { background: var(--bg-secondary); border-color: var(--green-mid); }
.pref-options label:has(input:checked) { background: var(--green-light); border-color: var(--green-mid); color: var(--green-dark); font-weight: 500; }
.pref-options input[type="radio"], .pref-options input[type="checkbox"] { width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; border: none !important; accent-color: var(--green); flex-shrink: 0; min-width: 0 !important; appearance: auto; }
.pref-options label > span { flex: 1; min-width: 0; }
.pref-options em { font-style: italic; color: var(--text-tertiary); }
.pref-options label:has(input:checked) em { color: var(--green); }

.pref-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pref-options-grid label { padding: 10px 12px; font-size: 13px; }

.pref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.75rem; }
.pref-row .pref-question { margin-bottom: 0; }

/* ========== IMPRESSION PDF ========== */
/* Les marges sont portees par @page, donc appliquees a CHAQUE page.
   Avant, elles venaient du padding de #bilan-content : or un padding ne
   s'applique qu'une fois, au debut du bloc. Les pages 2 et 3 demarraient
   donc au bord physique du papier, dans la zone non imprimable de la
   plupart des imprimantes (4 a 6 mm), avec un risque de lignes rognees. */
@page {
  /* Bas : 2,2 cm (03/10/2026), une vraie zone de pied de page pour le numéro
     (avant 1,6 cm : la dernière ligne arrivait à ~1 cm du numéro). */
  size: A4 portrait; margin: 1.8cm 1.8cm 2.2cm;
  /* Pagination « page X / Y » (01/10/2026). Navigateurs qui gèrent les
     marges de page (Chrome, Edge ≥ 131) ; ailleurs, simplement absente. */
  @bottom-right { content: "Page " counter(page) " / " counter(pages); font: 8pt 'Plus Jakarta Sans', Arial, sans-serif; color: #8A958F; }
}
@media print {
  body * { visibility: hidden !important; }
  #bilan-content, #bilan-content * { visibility: visible !important; }
  #bilan-content {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 0 !important;   /* la marge vient desormais de @page */
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
  }
  .header, .steps-nav, .btn-row, .output-actions, footer, #landing, .landing, button, .back-btn {
    display: none !important;
  }
  .bilan-section-title { color: #0B5B42 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Impression d'un courrier : on bascule la cible visible du bilan vers
     le courrier. La modale est sortie de son position:fixed, sinon le
     position:absolute du document se calerait sur l'overlay et non sur
     la page. Les marges restent portees par @page. */
  body.impression-courrier #bilan-content,
  body.impression-courrier #bilan-content * { visibility: hidden !important; }
  body.impression-courrier #courrier-modal,
  body.impression-courrier #courrier-modal * { visibility: visible !important; }
  body.impression-courrier #courrier-modal {
    display: block !important; position: absolute !important;
    inset: auto !important; left: 0 !important; top: 0 !important;
    width: 100% !important; padding: 0 !important;
    background: none !important; overflow: visible !important;
  }
  body.impression-courrier #courrier-modal .sigpad-card {
    max-width: none !important; width: 100% !important; max-height: none !important;
    box-shadow: none !important; border-radius: 0 !important; overflow: visible !important;
  }
  body.impression-courrier #courrier-actions,
  body.impression-courrier #courrier-entete-modale { display: none !important; }
  .courrier-corps { page-break-inside: auto; break-inside: auto; orphans: 4; widows: 4; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }

  /* ----- Impression propre : pas de grands blancs, pas de coupures moches ----- */
  /* Le texte long peut se répartir sur plusieurs pages (sinon une longue section
     saute entière et laisse une demi-page blanche). */
  /* La section peut s'etaler sur plusieurs pages (utile pour un long
     tableau de tests), mais son contenu redige, lui, ne se coupe pas. */
  .bilan-section { page-break-inside: auto; break-inside: auto; }

  /* CŒUR DU REGLAGE : un paragraphe redige ne se coupe JAMAIS au milieu.
     S'il ne tient pas sur la fin de la page, il bascule ENTIER sur la
     suivante. Un paragraphe plus long qu'une page entiere se coupe alors
     proprement, en gardant au moins 4 lignes de part et d'autre. */
  .bilan-section > p,
  .bilan-section .bs-texte > p,
  .bilan-section .test-libre > .tl-bloc {
    page-break-inside: avoid; break-inside: avoid;
    orphans: 4; widows: 4;
  }

  /* Le titre de section ne reste jamais seul en bas de page : il part
     avec le paragraphe qu'il annonce. */
  .bs-head, .bilan-section-title {
    page-break-after: avoid; break-after: avoid;
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Un titre de section ne reste jamais seul en bas de page. */
  .bilan-section-title { page-break-after: avoid; break-after: avoid; }
  /* Ces blocs restent d'un seul tenant. */
  .bilan-header, .bilan-patient-grid, .bilan-signature-block { page-break-inside: avoid; }
  /* Une ligne de tableau ne se coupe pas en deux ; l'en-tête du tableau est
     répété en haut de chaque page ; le tableau part avec son titre. */
  .bilan-table { margin: 0.25rem 0 0.5rem; }
  .bilan-table thead { display: table-header-group; }
  .bilan-table tr, .bilan-table thead { page-break-inside: avoid; break-inside: avoid; }
  /* Titre + premières lignes indissociables : un titre ne finit jamais seul
     en bas de page, même quand Chrome ignore break-after sur le titre. */
  .bs-head + .bs-texte > p:first-child, .bs-head + .test-libre > .tl-bloc:first-child, .bilan-section-title + .bilan-table { break-before: avoid; page-break-before: avoid; }
  .bilan-section p { line-height: 1.65; }
  /* Signature un peu plus proche du texte à l'impression (limite la page quasi vide). */
  .bilan-signature-block { margin-top: 1.5rem !important; padding-top: 1rem !important; }
  /* Jamais une dernière page avec la seule signature : si elle ne tient pas,
     elle emmène le dernier paragraphe avec elle (01/10/2026). La mention de
     confidentialité suit la signature. */
  .bilan-signature-block { break-before: avoid; page-break-before: avoid; }
  .bilan-signature-block + div { break-before: avoid; page-break-before: avoid; margin-top: 1rem !important; padding-top: .5rem !important; }
  /* 03/10/2026 : espacements resserrés à l'impression (une page presque vide
     ne contenait plus que le projet et la signature). Polices et marges de
     page inchangées ; zone de signature d'environ 2 cm conservée. */
  .bilan-header { margin-bottom: 1.25rem; padding-bottom: 1rem; }
  .bilan-section { margin-bottom: 1.1rem; }
  .bilan-signature-block { margin-top: 1rem !important; padding-top: .5rem !important; }
  .bilan-signature-label { margin-bottom: .4rem; }
  .signature-content { min-height: 76px; }
  /* Projet thérapeutique court : jamais coupé entre deux pages (avant, son
     titre restait en bas de page et sa fin partait avec la signature).
     Un projet long, lui, se répartit normalement (classe posée par
     editableSection, js/09-bilan.js). */
  .bilan-section.bs-insecable { break-inside: avoid; page-break-inside: avoid; }
}

@media (max-width: 768px) {
  /* LANDING */

  /* HERO BUTTONS */

  /* STATS GRID */

  /* TARIFS */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* CTA HERO */
  div[style*="justify-content:center"] { justify-content: flex-start !important; }

  /* STEPS NAV APP */
  .steps-nav { padding: 0.75rem 1rem; gap: 0; }
  .step-label { display: none; }
  .step-arrow { margin: 0 4px; }

  /* APP CONTAINER */
  .container { padding: 1rem 1rem 3rem; }
  .card { padding: 1.25rem; }
  .card-title { font-size: 18px; }

  /* FORM */
  .form-grid { grid-template-columns: 1fr; }
  .field.span2 { grid-column: span 1; }

  /* BILAN OUTPUT */
  .bilan-header { flex-direction: column; gap: 1rem; }
  .bilan-title-block { text-align: left; }
  .bilan-intitule { margin-left: 0; }
  .bilan-patient-grid { grid-template-columns: 1fr 1fr; }
  .bilan-table { font-size: 12px; }
  .bilan-table th, .bilan-table td { padding: 6px 8px; }

  /* TESTS TABLE */
  .tests-table { font-size: 12px; }
  .tests-table th, .tests-table td { padding: 6px 8px; }
  .tests-table input { font-size: 12px; }

  /* BTN ROW */
  .btn-row { flex-direction: column; gap: 8px; }
  .btn-row button { width: 100%; }

  /* ACCESS CARD */

  /* HEADER */
  .header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .header-left { gap: 8px; }
  .logo { font-size: 17px !important; }
  .header-badge { display: none !important; } /* on garde la place pour les icônes */
  .back-btn { font-size: 12px; white-space: nowrap; }


  /* FAQ */

  /* FOOTER */
  div[style*="justify-content:space-between"][style*="border-top"] { flex-direction: column; gap: 0.5rem; }

  /* OUTPUT ACTIONS */
  .output-actions { flex-direction: column; }
  .output-actions button { width: 100%; }

  /* CTA FINAL */
  div[style*="background:var(--green)"] div[style*="justify-content:center"] { flex-direction: column; }
}

/* ===== Bilan : tout est modifiable (30/09/2026) =====
   En-tête, infos patient, titres, cellules des tests, nom sous la signature :
   même repère que les sections (fond au survol, liseré vert en édition). */
#bilan-content [data-champ], #bilan-content td[data-test], #bilan-content .test-libre { outline: none; border-radius: 6px; transition: background .2s, box-shadow .2s; cursor: text; }
#bilan-content [data-champ]:hover, #bilan-content td[data-test]:hover, #bilan-content .test-libre:hover { background: #f8f8f6; }
#bilan-content [data-champ]:focus, #bilan-content td[data-test]:focus, #bilan-content .test-libre:focus { background: #fff; box-shadow: 0 0 0 2px var(--green); }
.bs-absente { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; }
.bs-ajout { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--green-dark); cursor: pointer; }
.bs-ajout:hover { text-decoration: underline; }
.btn-revenir-bilan { display: none; }
body.bilan-lie .btn-revenir-bilan { display: inline-flex; }
/* « Modifier le formulaire » : visible aussi sur un bilan rouvert depuis le
   27/10/2026 (allerEtape, js/13, y remet la saisie de ce bilan). */
/* « Dire à l'IA quoi changer » : zone de consigne sous le titre de section. */
.bs-consigne { margin: 6px 0 10px; padding: 12px 14px; border: 1px solid var(--green-light); border-left: 3px solid var(--green); border-radius: 10px; background: #f6fbf8; }
.bs-consigne label { display: block; font-size: 12.5px; font-weight: 600; color: var(--green-dark); margin-bottom: 6px; }
.bs-consigne textarea { width: 100%; min-height: 58px; font: inherit; font-size: 14px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; background: #fff; }
.bs-consigne textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,158,117,.15); }
.bs-consigne-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bs-consigne-aide { margin-right: auto; font-size: 11.5px; color: var(--text-tertiary); }
.bs-menu .bs-menu-consigne { border-top: 1px solid var(--border); font-weight: 600; color: var(--green-dark); }
/* Revue des modifications de l'IA (30/09/2026) : ajouts en vert, suppressions barrées. */
.bs-revue { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 6px 0 10px; padding: 10px 14px; border: 1px solid var(--green-light); border-left: 3px solid var(--green); border-radius: 10px; background: #f6fbf8; }
.bs-revue-titre { margin: 0; font-size: 13px; font-weight: 600; color: var(--green-dark); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-revue-legende { display: inline-flex; gap: 8px; font-weight: 500; font-size: 12px; }
.bs-revue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-revue ins, .bs-en-revue ins { background: #d7f2e3; color: #0b5b42; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.bs-revue del, .bs-en-revue del { background: #fde6e6; color: #a8322d; text-decoration: line-through; text-decoration-color: rgba(168,50,45,.6); border-radius: 3px; padding: 0 2px; }
.bilan-section .bs-texte.bs-en-revue { background: #fcfdfc; box-shadow: inset 0 0 0 1px var(--green-light); cursor: default; }
.bs-revue-alerte { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: #FFFAEB; border: 1px solid #F5D98B; color: #5C4A12; font-size: 13px; line-height: 1.45; }
/* Cohérence après une correction acceptée (01/10/2026) */
.bs-coherence { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #F4F8F6; border: 1px solid #DCEBE3; font-size: 13.5px; line-height: 1.5; color: #2F3D37; }
.bs-coherence p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.bs-coherence-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-coherence-fermer { color: var(--text-secondary); }
@media print {
  .bs-absente, .bs-vide, .bs-consigne, .bs-revue, .bs-coherence { display: none !important; }
  /* Impression pendant une revue : l'ancienne version, jamais un mélange. */
  .bs-en-revue ins { display: none !important; }
  .bs-en-revue del { background: none !important; color: inherit !important; text-decoration: none !important; padding: 0 !important; }
  #bilan-content [data-champ], #bilan-content td[data-test], #bilan-content .test-libre { background: none !important; box-shadow: none !important; }
  /* La largeur utile d'une A4 (~660 px) déclenchait la mise en page mobile
     (< 768 px) : en-tête empilé, informations du patient sur deux colonnes.
     À l'impression, la mise en page du document reste celle de l'écran large. */
  .bilan-header { flex-direction: row; gap: 2rem; }
  .bilan-title-block { text-align: right; }
  .bilan-patient-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Un score et son unité restent sur une ligne (« 24 mots/min ») ; pas sur
   téléphone, où le tableau déborderait. */
@media print, (min-width: 700px) { .bilan-table td:nth-child(3) { white-space: nowrap; } }
.bs-menu { min-width: 214px; }
/* Épreuves en texte libre (30/10/2026, retour de Jordan) : une ligne par élément,
   « Épreuve : résultat » en deux colonnes alignées (retrait suspendu : le texte reste
   « Épreuve : résultat »), sous-titres verts, espacement régulier. */
.test-libre { white-space: normal; line-height: 1.55; }
.test-libre .tl-bloc + .tl-bloc { margin-top: .9em; }
.test-libre .tl-l { padding: 3px 0 3px 230px; text-indent: -230px; }
.test-libre .tl-l:not(.tl-paire) { padding-left: 0; text-indent: 0; }
.test-libre .tl-paire + .tl-paire { border-top: 1px solid #EEF1EE; }
.test-libre .tl-paire > strong { display: inline-block; width: 230px; padding-right: 12px; box-sizing: border-box; text-indent: 0; vertical-align: top; font-weight: 600; }
.test-libre .tl-titre { margin: 0 0 4px; color: #0B5B42; font-weight: 700; letter-spacing: .03em; font-size: .95em; }
.test-libre em { font-style: italic; }
@media screen and (max-width: 600px) { .test-libre .tl-l { padding-left: 0; text-indent: 0; } .test-libre .tl-paire > strong { width: 100%; } }

/* Deux onglets ouverts sur le même compte (30/10/2026, js/05) */
.oa-onglets { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 14px; width: min(720px, calc(100vw - 24px)); padding: 12px 16px; border: 1px solid #F3C99A; border-radius: 14px; background: #FFF6EA; color: #5C3B0B; font-size: 14.5px; line-height: 1.45; box-shadow: 0 8px 28px -12px rgba(0,0,0,.25); }
.oa-onglets strong { color: #3F2806; }
.oa-onglets button { flex: none; padding: 7px 12px; border: 1px solid #E2B47A; border-radius: 10px; background: #fff; color: #5C3B0B; font: 600 13.5px var(--font, 'Plus Jakarta Sans'), sans-serif; cursor: pointer; }
@media (max-width: 560px) { .oa-onglets { flex-direction: column; align-items: stretch; } }

/* Lisibilité à l'écran (30/10/2026) : étiquettes du compte rendu relu à l'écran ;
   le PDF et l'impression ne changent pas. Cases à cocher et boutons radio plus grands. */
@media screen { #bilan-content .bilan-patient-label { font-size: 12.5px; color: #666; } }
.note-confid a { color: #0B5B42; }
.pref-options input[type="radio"], .pref-options input[type="checkbox"] { width: 20px !important; height: 20px !important; flex: none; }