:root{
  --orange:#f9886c; --violet:#0b353d; --beige:#fcede1; --gold:#d9a15c; --teal:#4f9d8d;
  --white:#ffffff; --ink:#0b353d; --radius:12px; --shadow:0 4px 14px rgba(11,53,61,0.10);
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Montserrat',sans-serif; background:var(--beige); color:var(--ink); padding:24px; overflow-x:hidden; }
h1,h2,h3{ font-family:'Chewy', cursive; font-weight:400; color:var(--violet); letter-spacing:0.5px;}
.app{ max-width:1150px; margin:0 auto;}
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px;}
.brand-badge{ width:46px;height:46px;border-radius:50%; background:var(--orange); display:flex;align-items:center;justify-content:center; color:white; font-family:'Chewy',cursive; font-size:22px; box-shadow:var(--shadow); flex-shrink:0;}
.brand h1{ margin:0; font-size:26px;}
.brand p{ margin:0; font-size:12px; color:#5b7a80;}
.actions{ display:flex; gap:10px; flex-wrap:wrap;}
button{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; border:none; border-radius:10px; padding:12px 18px; cursor:pointer; box-shadow:var(--shadow); transition:transform .1s ease; touch-action:manipulation; min-height:44px;}
button:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--orange); color:white;}
.btn-secondary{ background:white; color:var(--violet); border:2px solid var(--violet);}
.btn-ghost{ background:transparent; color:var(--violet); box-shadow:none; text-decoration:underline; padding:6px 4px; min-height:auto;}
.btn-danger{ background:#fff; color:#c0453a; border:1px solid #c0453a; box-shadow:none; padding:8px 10px; font-size:12px; min-height:38px;}
.card{ background:white; border-radius:var(--radius); padding:22px; margin-bottom:20px; box-shadow:var(--shadow);}
.card h2{ margin-top:0; font-size:20px; display:flex; align-items:center; gap:8px;}
.eyebrow{ text-transform:uppercase; font-size:11px; letter-spacing:1.2px; color:var(--orange); font-weight:800; margin:0 0 4px 0;}
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.field{ min-width:0; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--violet); margin-bottom:5px;}
.field input, .field select, .field textarea{ width:100%; min-width:0; max-width:100%; padding:11px 12px; border-radius:8px; border:1.5px solid #e3d6c8; font-family:'Montserrat',sans-serif; font-size:16px; background:#fffdfb; color:var(--ink); min-height:44px; box-sizing:border-box;}
.field textarea{ resize:vertical; min-height:56px;}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--orange); border-color:var(--orange);}
.species-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.species-btn{ background:var(--beige); border:2px solid transparent; border-radius:10px; padding:10px 14px; font-weight:700; color:var(--violet); font-size:13px; cursor:pointer; box-shadow:none; min-height:42px; display:flex; align-items:center; touch-action:manipulation;}
.species-btn.active{ border-color:var(--orange); background:#fff0ea; }
.diagram-wrap{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start;}
.diagram-box{ flex:1 1 460px; min-width:280px; text-align:center;}
.diagram-box svg{ max-width:100%; height:auto; }
.hint{ font-size:12px; color:#7a8f92; margin-top:6px;}
.legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; justify-content:center;}
.legend-item{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600;}
.dot{ width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0;}
.findings-list{ flex:1 1 300px; min-width:260px;}
.side-group h3{ font-size:15px; margin:14px 0 6px 0; color:var(--orange); font-family:'Montserrat',sans-serif; font-weight:800;}
.finding-item{ display:flex; align-items:flex-start; gap:10px; background:var(--beige); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.finding-item .dot{ margin-top:3px; flex-shrink:0;}
.finding-item .txt{ flex:1; font-size:13px; line-height:1.4; word-break:break-word;}
.finding-item .txt b{ font-weight:800;}
.empty-note{ font-size:13px; color:#8a9c9f; font-style:italic;}
.hotspot{ cursor:pointer; transition:opacity .15s ease; }
.hotspot:hover{ opacity:0.85; }
.img-wrap{ position:relative; display:inline-block; max-width:100%; }
.img-wrap img{ display:block; width:100%; height:auto; border-radius:8px; -webkit-user-drag:none; user-select:none;}
.hotspot-dot{
  position:absolute; width:26px; height:26px; margin-left:-13px; margin-top:-13px;
  border-radius:50%; border:2.5px solid #0b353d; cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,0.35); transition:transform .12s ease; touch-action:manipulation;
}
.hotspot-dot:hover{ transform:scale(1.2); }
.hotspot-dot:active{ transform:scale(1.3); }
.overlay{ position:fixed; inset:0; background:rgba(11,53,61,0.45); display:none; align-items:center; justify-content:center; z-index:50; padding:16px;}
.overlay.open{ display:flex; }
.modal{ background:white; border-radius:16px; padding:24px; width:100%; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,0.25); max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.modal h3{ margin:0 0 4px 0; font-size:19px;}
.modal .sub{ font-size:12px; color:#7a8f92; margin-bottom:14px;}
.type-picker{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px 0;}
.type-chip{ flex:1 1 auto; text-align:center; padding:12px 6px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:800; color:white; opacity:0.45; border:3px solid transparent; min-height:44px; display:flex; align-items:center; justify-content:center; touch-action:manipulation;}
.type-chip.selected{ opacity:1; border-color:var(--violet); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap;}
footer.brandfoot{ text-align:center; margin-top:6px; font-size:11px; color:#8a9c9f;}
.history-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.hist-tab{ background:var(--beige); color:var(--violet); box-shadow:none; padding:9px 16px; border-radius:8px; font-size:13px; min-height:40px;}
.hist-tab.active{ background:var(--violet); color:white;}
.hist-item{ display:flex; align-items:center; gap:12px; background:var(--beige); border-radius:10px; padding:12px 14px; margin-bottom:8px; flex-wrap:wrap;}
.hist-item .hist-info{ flex:1 1 200px; font-size:13px; line-height:1.4; min-width:0; word-break:break-word;}
.hist-item .hist-info b{ font-weight:800;}
.hist-item .hist-date{ color:#7a8f92; font-size:12px;}
.hist-actions{ display:flex; gap:8px; flex-wrap:wrap;}
.hist-actions button{ padding:9px 12px; font-size:12px; min-height:40px;}
.btn-tiny-primary{ background:var(--orange); color:white;}
.btn-tiny-ghost{ background:white; color:var(--violet); border:1.5px solid var(--violet); box-shadow:none;}
.btn-tiny-danger{ background:#fff; color:#c0453a; border:1.5px solid #c0453a; box-shadow:none;}

/* Cibles tactiles agrandies sur écrans tactiles (tablette/mobile en séance) */
@media (pointer: coarse){
  .hotspot-dot{ width:32px; height:32px; margin-left:-16px; margin-top:-16px; border-width:3px;}
}
/* Sur petits écrans, l'image du squelette est plus petite : on réduit les points
   pour éviter qu'ils ne se chevauchent sur les zones anatomiquement proches */
@media (max-width: 640px){
  .hotspot-dot{ width:22px; height:22px; margin-left:-11px; margin-top:-11px; border-width:2px;}
}
@media (max-width: 420px){
  .hotspot-dot{ width:18px; height:18px; margin-left:-9px; margin-top:-9px; border-width:2px;}
}

/* Mobile / petites tablettes */
@media (max-width: 640px){
  body{ padding:12px; }
  .card{ padding:16px; margin-bottom:14px; }
  .brand h1{ font-size:20px; }
  .brand p{ font-size:11px; }
  .brand-badge{ width:38px; height:38px; font-size:18px; }
  .topbar{ flex-direction:column; align-items:stretch; }
  .actions{ width:100%; }
  .actions button{ flex:1 1 0; }
  .grid{ grid-template-columns:1fr; gap:12px; }
  .diagram-box{ min-width:0; flex-basis:100%; }
  .findings-list{ min-width:0; flex-basis:100%; }
  .card h2{ font-size:17px; }
  .modal{ padding:18px; border-radius:14px; }
  .modal h3{ font-size:17px; }
  .hist-item{ flex-direction:column; align-items:stretch; }
  .hist-actions{ width:100%; }
  .hist-actions button{ flex:1 1 auto; }
  .species-picker{ gap:6px; }
  .species-btn{ font-size:12px; padding:9px 10px; }
}
@media (max-width: 400px){
  .brand h1{ font-size:18px; }
  .type-picker{ gap:6px; }
  .type-chip{ font-size:11px; padding:10px 4px; }
}
@media print{ body{ background:white; padding:0;} .no-print{ display:none !important;} }

/* ============================================================
   GABARIT PDF — rendu médical fixe, indépendant de l'écran utilisé.
   Toujours mis en page à 900px de large, jamais affecté par le
   responsive de l'app à l'écran (voir #pdf-root ci-dessous).
   ============================================================ */
#pdf-root{
  position:absolute; left:-99999px; top:0;
  width:900px;
  background:#ffffff;
  font-family:'Montserrat',sans-serif;
  color:#1a1a1a;
}
.pdfdoc-page{ width:900px; padding:48px 56px; background:#ffffff; box-sizing:border-box; }
.pdfdoc-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; border-bottom:2px solid var(--violet); padding-bottom:18px; margin-bottom:22px;}
.pdfdoc-practitioner{ font-size:13px; line-height:1.6; color:#333;}
.pdfdoc-practitioner .name{ font-size:16px; font-weight:700; color:var(--violet); margin-bottom:2px;}
.pdfdoc-practitioner .title{ font-style:italic; color:#555; margin-bottom:6px;}
.pdfdoc-patient-box{ border:1.5px solid var(--violet); border-radius:12px; padding:14px 20px; min-width:300px; font-size:13px; line-height:1.65;}
.pdfdoc-patient-box .row{ display:flex; gap:6px;}
.pdfdoc-patient-box .row b{ min-width:110px; color:var(--violet); font-weight:700;}
.pdfdoc-title{ font-family:'Montserrat',sans-serif; font-size:24px; font-weight:800; color:var(--violet); margin:0 0 26px 0; text-align:center;}
.pdfdoc-section{ margin-bottom:18px;}
.pdfdoc-section-title{ font-size:14px; font-weight:800; font-style:italic; color:var(--orange); margin-bottom:4px;}
.pdfdoc-section-text{ font-size:13px; line-height:1.55; color:#222; white-space:pre-wrap;}
.pdfdoc-diagram-title{ font-size:15px; font-weight:800; color:var(--violet); margin:26px 0 12px 0; border-top:1px solid #ddd; padding-top:18px;}
.pdfdoc-diagram-wrap{ position:relative; display:block; width:640px; margin:0 auto;}
.pdfdoc-diagram-wrap img{ display:block; width:100%; height:auto;}
.pdfdoc-dot{ position:absolute; width:14px; height:14px; margin-left:-7px; margin-top:-7px; border-radius:50%; border:1.5px solid #1a1a1a;}
.pdfdoc-legend{ display:flex; gap:22px; justify-content:center; margin-top:14px; font-size:12px; font-weight:600; color:#333;}
.pdfdoc-legend .dot{ width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle;}
.pdfdoc-findings{ margin-top:22px;}
.pdfdoc-side-title{ font-size:13px; font-weight:800; color:var(--orange); margin:14px 0 6px 0;}
.pdfdoc-finding{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.6; margin-bottom:3px; padding-left:2px;}
.pdfdoc-finding .fdot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0;}
.pdfdoc-footer{ margin-top:40px; padding-top:14px; border-top:1px solid #ddd; text-align:center; font-size:10.5px; color:#999;}