/* ==========================================================================
   Clinote — feuille de style unique (aucune etape de build)
   Extraite des maquettes v2/v4 puis unifiee.
   Conception iPad mini portrait d'abord (CDC 14).
   ========================================================================== */

:root {
    --bg: #f4f7f9;
    --card: #fff;
    --ink: #1d2b36;
    --muted: #71818a;
    --line: #dfe8ec;
    --blue: #246b86;
    --dark: #173746;
    --teal: #2c9b91;
    --amber: #c78227;
    --red: #b8535b;
    --shadow: 0 8px 24px rgba(31, 55, 67, .07);
    --hl-yellow: #ffe87a;
    --hl-green: #b9edc0;
    --hl-blue: #b9e2f2;
    --hl-pink: #ffc7d7;
    /* Cible tactile minimale (CDC 14) */
    --touch: 44px;
    /* Largeur du rail lateral, partagee par la grille et la barre fixe. */
    --rail: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

button, input, select, textarea { font: inherit; }

/* iOS Safari zoome la page des qu'un champ de saisie prend le focus avec une
   police sous 16 px, et ne dezoome pas en sortant. Sur iPad c'est exactement
   ce qui se produit quand le stylet touche un champ : la page saute. 16 px est
   le seuil impose par le navigateur, pas un choix esthetique — c'est la meme
   raison qui fixe deja .editor-area a 16 px pour Scribble. Limite aux
   pointeurs grossiers pour que la souris garde la densite de 14 px. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
}
button { cursor: pointer; border: 0; }
a { color: var(--blue); }

/* ------------------------------------------------------------------ Layout */

/* La barre laterale est en position fixe : ce n'est donc pas un grid item. On
   reserve sa largeur avec un padding en flux, sinon .main se retrouve place
   dans la premiere colonne de la grille, sous la barre. */
.app { min-height: 100vh; padding-left: var(--rail, 248px); }

.sidebar {
    background: var(--dark);
    color: #dcecf1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    /* Reste visible au scroll. On ancre les deux bords plutot que de fixer une
       hauteur : sur iPad, la barre d'adresse se replie pendant le scroll et toute
       hauteur en vh / dvh laisse un vide en bas de la barre. */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail, 248px);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.brand {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 2px 10px 28px;
    font-weight: 700;
    font-size: 19px;
    color: #fff;
    text-decoration: none;
}

.brand-mark {
    width: 34px; height: 34px;
    border-radius: 11px;
    background: #70c8bd;
    color: var(--dark);
    display: grid; place-items: center;
    font-weight: 800;
}

.nav { display: grid; gap: 6px; }

.nav a {
    background: transparent;
    color: #b9d1d9;
    text-align: left;
    padding: 12px 13px;
    min-height: var(--touch);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    /* Ancre le repere de position ci-dessous. */
    position: relative;
}

.nav a.active { background: #255668; color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .nav a:hover { background: #255668; color: #fff; }
}

/* Repere de position. #255668 sur #173746, c'est 1,5:1 de contraste : le pave
   actif seul ne se voit pas, et encore moins quand le rail est replie et que le
   libelle a disparu. Un tiret dans le vert de la pastille de marque, colle au
   bord du rail, se lit dans les deux etats. */
.nav a.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: #70c8bd;
}

/* Une icone du jeu (resources/views/partials/icon.blade.php). 22 px par defaut,
   la taille des barres d'outils ; 20 px dans le rail, ou elle accompagne un
   libelle plutot que de le remplacer. */
.ico { width: 22px; height: 22px; display: block; flex: none; }
.nav a .ico, .side-bottom .ico { width: 20px; height: 20px; }

.side-bottom { margin-top: auto; border-top: 1px solid #345663; padding-top: 18px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 10px; }
.profile strong { color: #fff; font-size: 13px; }
.profile small { display: block; color: #9bb9c2; }

/* Verrouiller et se deconnecter : deux gestes de sortie, l'un sous l'autre. */
.exit-row { display: grid; gap: 8px; margin-top: 10px; }
.exit {
    width: 100%;
    background: #255668;
    color: #cfe6ec;
    border-radius: 9px;
    padding: 11px 13px;
    min-height: var(--touch);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #d6eee8;
    color: #1c5a62;
    display: grid; place-items: center;
    font-weight: 700;
}

.main { padding: 26px 34px 50px; max-width: 1500px; width: 100%; margin: auto; }

.top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.eyebrow, .crumb { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.crumb a { color: var(--muted); }
.title { margin: 0; font-size: 27px; letter-spacing: -.4px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Blocs */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.section { padding: 20px; margin-top: 18px; }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.section h2, .section h3 { margin: 0; font-size: 17px; }
.muted { color: var(--muted); }
.link { background: none; color: var(--blue); font-size: 13px; text-decoration: none; }

.btn {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--blue);
    padding: 11px 14px;
    min-height: var(--touch);
    border-radius: 9px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Une icone qui accompagne un texte se pose a 18 px : a 22, elle pesait plus
   lourd que le mot qu'elle illustre. Seule dans sa cible, elle garde ses 22. */
.btn .ico, .mini .ico, .quick-grid .ico, .view-switch .ico,
.tool:not(.icon-only) .ico { width: 18px; height: 18px; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.teal { background: #e5f3f1; color: #216d6b; border-color: #cce8e4; }
.btn.danger { color: var(--red); border-color: #f0d3d6; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 11px;
    min-height: var(--touch);
    width: 245px;
}
.search .ico { width: 20px; height: 20px; color: var(--muted); }
.search input { border: 0; outline: 0; width: 100%; background: transparent; }

.select, .field input, .field select, .field textarea {
    padding: 11px;
    min-height: var(--touch);
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    width: 100%;
}
.field { display: grid; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.field textarea { min-height: 110px; resize: vertical; }
.field .error { color: var(--red); font-size: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox { display: flex; gap: 10px; align-items: center; min-height: var(--touch); }
.checkbox input { width: 22px; height: 22px; }

.flash {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #e5f4f1;
    color: #216d6b;
    border: 1px solid #cce8e4;
}
.flash.error { background: #fdeced; color: #92343d; border-color: #f2ced2; }

/* ------------------------------------------------------- Tableau de bord */

.welcome {
    padding: 23px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: linear-gradient(110deg, #e8f4f2, #f8fbfb);
}
.welcome h2 { margin: 0 0 7px; font-size: 20px; }
.welcome p { margin: 0; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.stat { padding: 18px; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-size: 29px; font-weight: 700; margin-top: 7px; }
.stat-note { font-size: 12px; color: var(--teal); margin-top: 5px; }
.stat-note.warn { color: var(--amber); }

.grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 22px; }
.content { display: grid; grid-template-columns: 1.45fr .85fr; gap: 22px; margin-top: 18px; }
.side-col, .side { display: grid; gap: 22px; align-content: start; }

.patient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 7px;
    border-bottom: 1px solid #edf1f3;
    text-decoration: none;
    color: inherit;
    min-height: var(--touch);
}
.patient:last-child { border-bottom: 0; }
.patient-info { flex: 1; }
.patient-info strong { display: block; font-size: 14px; }
.patient-info span { color: var(--muted); font-size: 12px; }
.p-avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #e8f1f4;
    color: var(--blue);
    display: grid; place-items: center;
    font-weight: 700;
}

.appointment { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #edf1f3; }
.appointment:last-child { border-bottom: 0; }
.time { width: 52px; color: var(--blue); font-weight: 700; font-size: 13px; }
.appointment strong { display: block; font-size: 14px; }
.appointment span { color: var(--muted); font-size: 12px; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quick-grid a {
    padding: 13px 10px;
    background: #f3f7f8;
    color: #174d63;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-align: left;
    text-decoration: none;
    min-height: var(--touch);
}
.quick-grid b { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.quick-grid small { color: var(--muted); font-size: 11px; }

.alert { padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.alert-mark {
    width: 29px; height: 29px;
    border-radius: 9px;
    background: #fff2dc;
    color: #b9791e;
    display: grid; place-items: center;
    flex: none;
}
.alert p { margin: 0; font-size: 13px; }
.alert small { display: block; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------ Consultations */

.toolbar-bar { padding: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar-bar .select { width: auto; }
.view-switch { margin-left: auto; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-switch a {
    padding: 10px 12px;
    gap: 7px;
    background: #fff;
    color: var(--muted);
    text-decoration: none;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
}
.view-switch a.active { background: #e7f3f2; color: var(--blue); font-weight: 700; }

.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
}
.day { min-height: 82px; padding: 10px 8px; border-right: 1px solid var(--line); background: #fbfcfc; }
.day:last-child { border-right: 0; }
.day.today { background: #eaf5f3; }
.day-name { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.day-number { font-weight: 700; font-size: 19px; margin: 4px 0 8px; }
.day-dot { height: 4px; border-radius: 3px; background: var(--teal); width: 25px; margin-bottom: 3px; }

.schedule { display: grid; }
.schedule .row { display: grid; grid-template-columns: 72px 1fr; min-height: 92px; border-bottom: 1px solid #edf1f3; }
.hour { color: var(--muted); font-size: 12px; padding-top: 15px; }
.event {
    margin: 10px 0;
    padding: 11px 13px;
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: #eaf5f3;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.event.visio { border-color: var(--blue); background: #eaf1f5; }
.event.cancelled { border-color: var(--red); background: #fbeef0; }
.event strong { display: block; font-size: 13px; }
.event span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.event .chevron { color: var(--blue); display: flex; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.small-stat { padding: 15px; background: #f6f9fa; border-radius: 10px; }
.small-stat label { display: block; color: var(--muted); font-size: 12px; }
.small-stat strong { display: block; font-size: 25px; margin-top: 4px; }

/* ---------------------------------------------------------- Fiche patient */

.patient-header { padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.patient-avatar {
    width: 56px; height: 56px;
    border-radius: 15px;
    background: #e5f1f4;
    color: var(--blue);
    font-size: 20px; font-weight: 700;
    display: grid; place-items: center;
}
.patient-header h2 { margin: 0 0 2px; font-size: 20px; }
.patient-header p { margin: 0; color: var(--muted); }
.patient-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.tab {
    padding: 14px;
    background: none;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
}
.tab.active { color: var(--blue); border-color: var(--blue); font-weight: 700; }

.access-bar {
    margin: 18px 0;
    padding: 12px 15px;
    background: #eaf5f3;
    border: 1px solid #cce8e4;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.access-bar strong { display: block; color: #216d6b; }
.access-bar span { font-size: 12px; color: #4c777a; }

.info-row { padding: 12px 0; border-bottom: 1px solid #edf1f3; }
.info-label { display: block; color: var(--muted); font-size: 12px; }
.info-value { font-size: 14px; }

/* ------------------------------------------------------------- Timeline */

.timeline-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.timeline-head h3 { margin: 0; font-size: 18px; }
.timeline-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.timeline { position: relative; margin-left: 5px; }
.timeline:before {
    content: "";
    position: absolute;
    left: 9px; top: 10px; bottom: 10px;
    width: 2px;
    background: #dce8eb;
}
.timeline-item { position: relative; padding: 0 0 18px 34px; }
.dot {
    position: absolute;
    left: 3px; top: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--teal);
    border: 3px solid #e5f4f1;
}
.dot.type-drawing { background: #508ca0; border-color: #e5f1f4; }
.dot.type-notebook { background: #6f7f8a; border-color: #e9edef; }
.dot.type-document, .dot.type-image { background: #7993b5; border-color: #e9eff7; }
.dot.type-audio_transcription { background: var(--amber); border-color: #fff2dc; }

.item-card { border: 1px solid var(--line); border-radius: 11px; padding: 16px; background: #fff; }
.item-card.is-archived { opacity: .65; border-style: dashed; }
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.item-date { color: var(--blue); font-size: 12px; font-weight: 700; }
.item-card h4 { margin: 4px 0 7px; font-size: 15px; }

.badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #e5f4f1;
    color: #25756e;
    white-space: nowrap;
}
.badge.doc { background: #e9eff7; color: #3c5f88; }
.badge.draft { background: #fff1dc; color: var(--amber); }
.badge.archived { background: #eef1f2; color: var(--muted); }

.note-content {
    padding: 12px 14px;
    background: #f8fafb;
    border: 1px solid #edf1f3;
    border-radius: 9px;
    margin-top: 10px;
}
.note-content p { margin: 0 0 10px; }
.note-content p:last-child { margin-bottom: 0; }
.note-content h3 { font-size: 16px; margin: 0 0 8px; }
.note-content h4 { font-size: 14px; margin: 0 0 6px; }
.note-content ul, .note-content ol { margin: 0 0 10px; padding-left: 22px; }

.item-actions { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.mini {
    gap: 6px;
    background: #f2f6f7;
    color: var(--blue);
    padding: 10px 12px;
    min-height: var(--touch);
    border-radius: 7px;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.mini.danger { color: var(--red); }
.collapse {
    background: none;
    color: var(--muted);
    padding: 0 8px;
    min-width: var(--touch);
    min-height: var(--touch);
    display: grid;
    place-items: center;
}
/* Le chevron du jeu pointe vers le bas. Element developpe, il se retourne :
   l'etat est porte par une classe, plus par un caractere echange en JS — le
   texte d'un bouton n'est pas l'endroit ou ranger un etat. */
.collapse .ico { transition: transform .15s ease; }
.collapse:not(.is-collapsed) .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .collapse .ico { transition: none; }
}

.drawing-preview {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    padding: 8px;
    text-align: center;
}
.drawing-preview img { max-width: 100%; height: auto; display: block; margin: auto; }

.image-preview { margin-top: 10px; }
.image-preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }

.doc-preview {
    margin-top: 10px;
    padding: 16px;
    border: 1px dashed #bed0dc;
    border-radius: 9px;
    background: #f8fbfd;
    color: #3c5f88;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.doc-icon .ico { width: 30px; height: 30px; }

/* --------------------------------------------------- Surlignage / marks */

mark[data-color] { padding: 1px 3px; border-radius: 2px; background: var(--hl-yellow); color: inherit; }
mark[data-color="yellow"] { background: var(--hl-yellow); }
mark[data-color="green"] { background: var(--hl-green); }
mark[data-color="blue"] { background: var(--hl-blue); }
mark[data-color="pink"] { background: var(--hl-pink); }

/* ------------------------------------------------------ Editeur WYSIWYG */

.note-header {
    padding: 20px 23px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
}
.note-header h2 { margin: 0 0 4px; font-size: 20px; }
.note-header p { margin: 0; color: var(--muted); font-size: 13px; }
.status { background: #e5f4f1; color: #25756e; border-radius: 20px; font-size: 11px; padding: 5px 9px; white-space: nowrap; }
.status.draft { background: #fff1dc; color: var(--amber); }

.editor { padding: 20px 23px 23px; }
.toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 9px;
    background: #f6f9fa;
    border: 1px solid var(--line);
    border-radius: 10px 10px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
.tool {
    min-width: var(--touch);
    height: var(--touch);
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #dce7ea;
    border-radius: 7px;
    color: var(--blue);
    font-weight: 600;
}
.tool.active { background: #e6f3f2; border-color: #b9deda; }
/* iPadOS fige l'etat :hover sur le dernier element touche et ne le relache
   pas : sans ce garde, les boutons de la toolbar restent surlignes pendant
   qu'on dessine. Le survol n'est rendu qu'aux pointeurs qui le gerent
   vraiment (souris, trackpad). */
@media (hover: hover) and (pointer: fine) {
    .tool:hover { background: #e6f3f2; border-color: #b9deda; }
}
.tool.italic { font-style: italic; }
.tool.underline { text-decoration: underline; }
.separator { height: 25px; width: 1px; background: var(--line); margin: 0 3px; }

.highlight-group { display: flex; align-items: center; gap: 5px; margin-left: 2px; }
.highlight-label { font-size: 12px; color: var(--muted); }
.color {
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    border-radius: 7px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #ccdadd;
}
.color.yellow { background: var(--hl-yellow); }
.color.green { background: var(--hl-green); }
.color.blue { background: var(--hl-blue); }
.color.pink { background: var(--hl-pink); }
.color.selected { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Scribble (CDC 6.1) : ne jamais poser touch-action: none ni -webkit-user-select
   autre que text sur cette zone — iPadOS traiterait le trait de l'Apple Pencil
   comme un geste et cesserait de le convertir en texte. ScribbleTest le verifie. */
.editor-area {
    min-height: 470px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 25px 28px;
    background: #fff;
    outline: 0;
    font-size: 16px;
    line-height: 1.7;
    -webkit-user-select: text;
    user-select: text;
}
.editor-area:focus { box-shadow: inset 0 0 0 2px #cce8e4; }
.editor-area h3 { font-size: 18px; margin: 0 0 9px; }
.editor-area h4 { font-size: 16px; margin: 0 0 8px; }
.editor-area p { margin: 0 0 14px; }
.editor-area ul, .editor-area ol { margin: 0 0 14px; padding-left: 24px; }

/* La barre basse porte desormais la pagination, la selection et le zoom en
   plus des actions : sans retour a la ligne, tout cela deborde sur un iPad
   mini en portrait. */
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.tool[disabled] { opacity: .35; cursor: not-allowed; }
/* L'etat n'est pas une icone : c'est un point qui change de couleur. Un glyphe
   ● ne sait pas faire ca, et les classes `saving` / `error` posees par
   editor.js n'avaient aucune traduction visible. */
.save-state { font-size: 12px; color: var(--teal); display: inline-flex; align-items: center; gap: 7px; }
.save-state::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.save-state:empty::before { display: none; }
.save-state.saving { color: var(--amber); }
.save-state.error { color: var(--red); }
.save-state.saving { color: var(--amber); }
.save-state.error { color: var(--red); }

.info { padding: 17px; }
.info h3 { margin: 0 0 9px; font-size: 15px; }
.info p { margin: 0; color: var(--muted); font-size: 13px; }
.swatches { display: flex; gap: 10px; margin-top: 12px; }
.preview { padding: 17px; background: #f8fafb; border-radius: 9px; margin-top: 12px; font-size: 13px; }
.editor-side { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ------------------------------------------------------------- Dessin */

/* La page de dessin ne doit jamais laisser la paume selectionner du texte ni
 * ouvrir le menu contextuel iOS au milieu d'un trait. A ne pas confondre avec
 * l'editeur de notes (voir plus haut) ou Scribble exige l'inverse. */
.drawing-editor {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* Supprime le cadre gris qu'iOS peint sur tout element touche. */
    -webkit-tap-highlight-color: transparent;
    /* Aucun geste de navigation ne part de l'editeur : ni double-tap, ni
       pincer-zoomer. La paume posee sur la toolbar pendant que la pointe
       trace sur la feuille forme sinon deux contacts, qu'iPadOS interprete
       comme un pincement. Contrairement a .editor-area (Scribble), aucune
       reconnaissance d'ecriture n'a lieu ici : rien ne s'oppose a none. */
    touch-action: none;
}
.drawing-editor input,
.drawing-editor textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Pendant un trait, la page entiere devient non selectionnable — y compris
   l'en-tete et le rail, qui sont hors de .drawing-editor et d'ou une
   selection pouvait partir puis remonter surligner la toolbar. La regle est
   volontairement globale et en !important : elle ne dure que le temps du
   trait, et c'est le seul moyen de couvrir les elements qui declarent
   eux-memes user-select: text. */
body.is-drawing,
body.is-drawing * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.is-drawing ::selection { background: transparent; }
body.is-drawing ::-moz-selection { background: transparent; }

.canvas-wrap {
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #eef3f5;
    overflow: hidden;
    touch-action: none;
    display: grid;
    place-items: center;
    padding: 10px;
}
/* Taille posee par drawing.js : la feuille garde son ratio portrait et occupe
 * toute la hauteur disponible. */
#drawing-canvas,
#notebook-canvas {
    display: block;
    touch-action: none;
    cursor: crosshair;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 8px rgba(23, 55, 70, .16);
}

/* Plein ecran en CSS plutot que via l'API Fullscreen, que Safari iPadOS
 * n'expose pas de facon fiable sur un element quelconque. */
body.drawing-fullscreen { overflow: hidden; }
/* visibility plutot que display : masquer sans declencher de reflux, donc
   sans risquer de redimensionner la feuille pendant un trait. */
body.drawing-fullscreen .sidebar,
body.drawing-fullscreen .top { visibility: hidden; }
.drawing-editor.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 300;
    margin: 0;
    padding: 10px;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
}
.drawing-editor.is-fullscreen .field-row { display: none; }
.drawing-editor.is-fullscreen .toolbar { border-radius: 10px 10px 0 0; }
.drawing-editor.is-fullscreen .canvas-wrap { flex: 1; min-height: 0; height: auto; }
.drawing-editor.is-fullscreen .bottom { margin-top: 0; }
.drawing-editor.is-fullscreen .drawing-hints .muted { display: none; }

.drawing-hints { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.drawing-hints .muted { font-size: 12px; }

/* Le titre du carnet a quitte la barre d'outils pour celle du bas : ce n'est
   pas un outil, et il y prenait jusqu'a 260 px. En plein ecran il disparait
   tout a fait — on ne renomme pas un carnet pendant qu'on y ecrit — au meme
   titre que la ligne d'aide. */
.notebook-editor.is-fullscreen .drawing-hints .drawing-title { display: none; }
.pager .tool-select { margin-left: 4px; }

/* Chrome reduit au minimum : sur iPad chaque pixel repris a l'habillage va a
 * la feuille de dessin. */
.section.drawing-editor { padding: 12px; margin-top: 12px; }
.drawing-editor .toolbar { border-radius: 10px 10px 0 0; padding: 7px; }
.drawing-editor .bottom { margin-top: 10px; }
.tool.icon-only {
    padding: 0;
    width: var(--touch);
    height: var(--touch);
    display: grid;
    place-items: center;
    color: var(--blue);
}
/* La taille vient de `.ico` : 22 px dans une boite de 24, l'icone remplit la
   cible de 44 px sans en toucher les bords. Il n'y a plus qu'un seul endroit ou
   la taille des icones est ecrite. */

/* Plein ecran du carnet : la feuille prend TOUTE la largeur du cadre. Le
   cadre abandonne donc ses marges et ses bords lateraux — sinon la page
   s'arreterait 22 px avant le bord de l'ecran, et la promesse ne serait pas
   tenue. Ce qui depasse en hauteur se rattrape au deplacement, gere par
   notebook.js. Regle reservee au carnet : l'editeur de dessin garde sa vue
   d'ensemble, ou l'on juge une composition entiere. */
.notebook-editor.is-fullscreen { padding: 0; gap: 0; }
.notebook-editor.is-fullscreen .toolbar {
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    /* L'adherence de .toolbar ne vaut que pour le mode fenetre, ou la page
       defile. Ici la barre est un enfant d'une colonne flex de hauteur fixe
       qui ne defile pas : `sticky` ne s'applique a rien, et une regle sans
       effet laisse croire a un comportement qui n'existe pas. */
    position: static;
}
.notebook-editor.is-fullscreen .canvas-wrap {
    padding: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    /* La feuille est ancree en haut : c'est la ou commence l'ecriture, et
       c'est le bord qui doit rester stable quand elle deborde. */
    place-items: start center;
}
.notebook-editor.is-fullscreen #notebook-canvas { border-radius: 0; box-shadow: none; }
.notebook-editor.is-fullscreen .bottom {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    margin-top: 0;
}

.drawing-title {
    flex: 1 1 150px;
    min-width: 120px;
    max-width: 260px;
    height: var(--touch);
    padding: 0 10px;
    border: 1px solid #dce7ea;
    border-radius: 8px;
    background: #fff;
}
.pen-sizes { display: flex; gap: 6px; }
.pen-size {
    width: var(--touch); height: var(--touch);
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dce7ea;
    display: grid; place-items: center;
}
.pen-size.active { background: #e6f3f2; border-color: #b9deda; }
.pen-size i { display: block; border-radius: 50%; background: var(--ink); }
.pen-color { width: var(--touch); height: var(--touch); border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 1px #ccdadd; }
.pen-color.selected { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Surligneur : forme distincte de celle des stylos, pour ne pas avoir a lire
   la couleur pour savoir ce qu'on tient.
   La bande courte est desormais DESSINEE dans le bouton — `background-clip`
   ne laisse la couleur peindre que la boite de contenu — au lieu d'etre la
   taille du bouton. La version precedente ramenait la cible a 27 px : la plus
   petite de toute l'application, sur la vue qu'on touche le plus, et sous les
   44 px que le projet s'impose (CDC 14).
   La vue pose `background-color` et non `background` : la forme courte du
   raccourci reinitialiserait background-clip, et une declaration en ligne
   l'emporterait sur celle-ci. */
.pen-color.highlighter {
    height: var(--touch);
    padding: 11px 3px;
    border: 0;
    border-radius: 4px;
    background-clip: content-box;
    box-shadow: none;
    position: relative;
}
/* Le liseré des stylos, redessine autour de la seule bande coloree. */
.pen-color.highlighter::after {
    content: "";
    position: absolute;
    inset: 11px 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #ccdadd;
    pointer-events: none;
}
.pen-color.highlighter.selected { outline: 0; }
.pen-color.highlighter.selected::after { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Pagination du carnet : cibles tactiles pleines, libelle qui ne bouge pas
   quand on passe de « 9 / 12 » a « 10 / 12 ». */
/* Barre de selection du lasso : n'apparait qu'avec une selection. */
.selection-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 9px;
    background: #e9f2f5; border: 1px solid #cfe2e8;
    font-size: 13px; color: #245a6d;
}
.selection-bar[hidden] { display: none; }

/* Confirmation en place, au meme registre que la barre de selection mais en
   rouge : elle remplace window.confirm, qui ouvrait sur iPadOS une alerte
   systeme modale au milieu d'un geste de stylet. */
.confirm-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 9px;
    background: #fbeced; border: 1px solid #edccce;
    font-size: 13px; color: #7c3b41;
}
.confirm-bar[hidden] { display: none; }

.zoom-reset { font-size: 12px; font-weight: 600; }
/* `visibility` et non `display` : le bouton garde sa place dans la barre.
   Il n'apparait qu'apres un agrandissement ou un defilement, et sa venue
   poussait sinon la pagination et les actions — parfois jusqu'a renvoyer
   « Valider le carnet » a la ligne, pendant qu'on regarde la feuille. */
.zoom-reset.is-hidden { visibility: hidden; }

.drawing-preview { position: relative; }
.page-count {
    position: absolute; right: 10px; bottom: 10px;
    background: rgba(29, 43, 54, .78); color: #fff;
    padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

.pager { display: flex; align-items: center; gap: 6px; }
.pager .tool { min-width: var(--touch); }
.pager .page-label {
    min-width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums;
    color: var(--muted); font-size: 0.9rem;
}
.tool-select {
    height: var(--touch); border-radius: 8px; border: 1px solid #ccdadd;
    background: #fff; padding: 0 8px; font: inherit; color: inherit;
}
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- Dictee */

.recorder { display: grid; gap: 16px; justify-items: center; padding: 26px; }
.rec-button {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.rec-button.recording { background: var(--dark); }
.rec-timer { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Vue "Acces patient" */

.patient-view { min-height: 100vh; background: #fbfcfd; display: flex; flex-direction: column; }
.patient-view-head {
    padding: 17px 23px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.patient-view-title { font-size: 17px; font-weight: 700; }
.patient-view-content { max-width: 900px; width: 100%; margin: auto; padding: 30px 28px 45px; }
.raw-item { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid #dce5e8; }
.raw-item:last-child { border-bottom: 0; }
.raw-item h3 { font-size: 18px; margin: 0 0 13px; }
.raw-item p { font-size: 16px; margin: 0 0 14px; }
.raw-item ul, .raw-item ol { font-size: 16px; padding-left: 24px; }
.raw-item h4 { font-size: 16px; margin: 0 0 10px; }
.raw-drawing { text-align: center; }
.raw-drawing img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.raw-doc { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--blue); }
.raw-image img { max-width: 100%; border-radius: 8px; }

/* --------------------------------------------------------- Verrouillage */

.lock-screen {
    position: fixed;
    inset: 0;
    background: var(--dark);
    display: grid;
    place-items: center;
    color: #fff;
    text-align: center;
    padding: 24px;
}
.lock-box { max-width: 380px; width: 100%; }
.lock-icon { color: #70c8bd; }
.lock-icon .ico { width: 52px; height: 52px; margin: 0 auto; }
.lock-box h2 { margin: 12px 0 6px; }
.lock-box p { color: #c1d5da; margin: 0 0 22px; }
.lock-box .field label { color: #9bb9c2; }
.lock-box .field input { background: #21495a; border-color: #345663; color: #fff; }
.lock-box .field .error { color: #ffb4b4; }

/* ------------------------------------------------------------- Auth */

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; padding: 28px; }
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-card p.lead { margin: 0 0 22px; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ Tableaux */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #edf1f3; font-size: 13px; }
.table th { color: var(--muted); font-size: 12px; font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.pagination a, .pagination span {
    padding: 9px 12px;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    font-size: 13px;
}
.pagination .active span { background: var(--blue); color: #fff; border-color: var(--blue); }

.toast {
    position: fixed;
    right: 22px; bottom: 22px;
    background: var(--dark);
    color: #fff;
    padding: 13px 16px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: none;
    /* Au-dessus de tout, y compris du dessin en plein ecran : c'est la seule
       confirmation d'enregistrement. */
    z-index: 400;
}

.inline-form { display: inline; }

/* ------------------------------------------------- iPad mini et mobiles */

@media (max-width: 1000px) {
    .app { --rail: 74px; }
    .sidebar { padding: 18px 10px; }
    .brand span, .profile div:not(.avatar) { display: none; }
    /* Le libelle sort de l'ecran mais reste dans le document : `display:none`
       lui retirait aussi son nom accessible, et le lien devenait une image
       muette pour VoiceOver. */
    .nav-label {
        position: absolute; width: 1px; height: 1px; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .nav a { justify-content: center; padding: 12px; }
    .nav a.active::before { left: -10px; }
    .exit { justify-content: center; padding: 11px 0; }
    .profile { justify-content: center; }
    .main { padding: 20px; }
    .grid, .content, .editor-side { grid-template-columns: 1fr; }
    .patient-header { flex-wrap: wrap; }
    .patient-actions { width: 100%; justify-content: flex-start; }
    .patient-actions .btn { flex: 1; }
    .side-col { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .main { padding: 14px 11px; }
    .top { display: block; }
    .top .actions { margin-top: 13px; }
    .actions .search { width: 100%; }
    .stats { grid-template-columns: 1fr; }
    .patient-header { padding: 16px; }
    .patient-actions .btn { flex: auto; }
    .tabs { overflow: auto; padding: 0 9px; }
    .tab { white-space: nowrap; padding: 12px 10px; }
    .section { padding: 15px; }
    .timeline-head { align-items: flex-start; flex-direction: column; }
    .timeline-head .actions { width: 100%; }
    .item-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .item-actions .mini { width: 100%; justify-content: center; }
    .patient-view-content { padding: 22px 16px; }
    .note-header { padding: 17px; display: block; }
    .note-header .status { display: inline-block; margin-top: 10px; }
    .editor { padding: 14px; }
    .highlight-label { display: none; }
    .editor-area { padding: 19px 16px; min-height: 430px; font-size: 15px; }
    .bottom { align-items: stretch; flex-direction: column; }
    .bottom .actions { width: 100%; }
    .bottom .btn { flex: 1; }
    .week { overflow: auto; grid-template-columns: repeat(7, 90px); }
    .schedule .row { grid-template-columns: 55px 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
}

@media print {
    .app { padding-left: 0; }
    .sidebar, .top, .patient-view-head, .item-actions, .toolbar { display: none !important; }
}

/* ------------------------------------------------- Retouche d'une photo */

/* Meme registre que .drawing-editor, et pour les memes raisons : aucun geste
   de navigation ne doit partir de la zone, et iOS ne doit pas peindre de cadre
   gris ni ouvrir son menu contextuel au milieu d'un cadrage. */
.photo-editor {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.photo-stage {
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #eef3f5;
    display: grid;
    place-items: center;
    /* Une poignee deborde du cadre de la moitie de sa cible tactile, soit
       22 px : avec un padding plus faible, une selection posee au bord de
       l'image aurait ses poignees rognees par overflow: hidden. */
    padding: 26px;
    overflow: hidden;
}

/* Epouse exactement le canvas : le cadre de selection est positionne dedans,
   ses coordonnees sont donc celles du canvas, sans decalage a entretenir. */
.photo-frame {
    position: relative;
    line-height: 0;
    touch-action: none;
    cursor: crosshair;
}
#photo-canvas {
    display: block;
    border-radius: 6px;
    background: #fff;
}

.photo-selection {
    position: absolute;
    border: 2px solid var(--teal);
    /* L'exterieur du cadre est assombri sans masque ni second element : une
       ombre portee interne de tres grande taille suffit. */
    box-shadow: 0 0 0 9999px rgba(23, 55, 70, .45);
    cursor: move;
}

/* Poignees : 44 px de cible tactile (CDC 14) pour une pastille de 16 px.
   Le carre visible est peint par ::after, la cible est l'element lui-meme. */
.photo-handle {
    position: absolute;
    width: var(--touch);
    height: var(--touch);
    touch-action: none;
}
.photo-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: #fff;
    border: 2px solid var(--teal);
    border-radius: 4px;
    pointer-events: none;
}
.photo-handle[data-corner="nw"] { top: calc(var(--touch) / -2); left: calc(var(--touch) / -2); cursor: nwse-resize; }
.photo-handle[data-corner="ne"] { top: calc(var(--touch) / -2); right: calc(var(--touch) / -2); cursor: nesw-resize; }
.photo-handle[data-corner="se"] { bottom: calc(var(--touch) / -2); right: calc(var(--touch) / -2); cursor: nwse-resize; }
.photo-handle[data-corner="sw"] { bottom: calc(var(--touch) / -2); left: calc(var(--touch) / -2); cursor: nesw-resize; }

.photo-hints { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Pendant un cadrage, la page entiere devient non selectionnable — y compris
   l'en-tete et le rail, d'ou une selection pouvait partir puis remonter
   surligner la barre d'outils. Meme garde que body.is-drawing. */
body.is-dragging,
body.is-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.is-dragging ::selection { background: transparent; }

.photo-editor .tool:disabled { opacity: .45; }
.photo-editor .btn:disabled { opacity: .45; cursor: default; }