/* =========================================================================
   Notes rapides — la petite fenêtre de saisie et le gestionnaire.

   ⚠️ TOUT EST PRÉFIXÉ `.not-`. La feuille est chargée par `base.html`, donc
   sur toutes les pages : une règle globale comme `textarea { … }` déborderait
   sur les formulaires métier, et le défaut serait très difficile à relier à
   ce fichier. Les fenêtres elles-mêmes réutilisent `.oas-fenetre` — c'est le
   même gestionnaire de fenêtres (déplacement, mémorisation, Échap), il ne
   doit exister qu'une fois.

   ⚠️ LES COULEURS VIENNENT DE `style.css` (`--bg-card`, `--text-color`…),
   avec UNE SEULE exception : la teinte du papier. Elle est appliquée en
   CALQUE translucide par-dessus `var(--bg-card)`, et non en couleur fixe.

   Pourquoi ce détour : le site a un thème sombre ET un thème clair, tous deux
   pilotés par les mêmes variables à l'exécution. Une couleur de papier écrite
   en dur (`#fffbe0`) serait illisible en thème sombre — du texte clair sur du
   jaune très clair. Un aplat mélangé à `--bg-card` s'adapte tout seul :
   - thème clair  → #ffffff teinté = papier jaune pâle ;
   - thème sombre → #24262e teinté = papier sombre légèrement chaud.
   ========================================================================= */

/* ==================== LA FENÊTRE « PRISE DE NOTE » ==================== */

.oas-fenetre.oas-note-fenetre {
    width: 380px;
}

/* En-tête teinté : c'est ce qui identifie la fenêtre comme une note et non
   comme un formulaire, avant même d'avoir lu le titre. */
.oas-note-fenetre .oas-tete {
    background:
        linear-gradient(0deg, rgba(255, 209, 102, 0.22),
                               rgba(255, 209, 102, 0.22)),
        var(--bg-input);
}

.not-zone {
    display: block;
    width: 100%;
    min-height: 190px;
    max-height: 46vh;
    padding: .7rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-family: inherit;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--text-color);
    resize: vertical;
    /* Le papier : voir l'en-tête. La première ligne est le repli des
       navigateurs sans dégradé multiple — il reste neutre, jamais illisible. */
    background:
        linear-gradient(0deg, rgba(255, 209, 102, 0.16),
                               rgba(255, 209, 102, 0.16)),
        var(--bg-card);
}

.not-zone:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

.not-zone::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.not-pied {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}

.not-compteur {
    margin-right: auto;
    font-size: .68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.not-compteur.not-alerte {
    color: var(--warning-color);
    font-weight: 700;
}

/* ---------- Boutons ---------- */

.not-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .42rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-color);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}

.not-btn:hover {
    background: var(--bg-hover);
}

.not-btn:active {
    transform: scale(.97);
}

.not-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.not-btn.not-principal {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.not-btn.not-principal:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.not-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ==================== LE GESTIONNAIRE DE NOTES ==================== */

.oas-fenetre.not-fenetre {
    width: 760px;
    height: 640px;
    /* ⚠️ `height` ET `max-height` SONT LES DEUX NÉCESSAIRES : sur un écran
       bas (portable 768 px), 640 px de haut plus la barre de titre dépassent
       la fenêtre du navigateur. `max-height` plafonne, et `min-height: 0` sur
       la liste (plus bas) autorise le défilement au lieu du débordement. */
    max-height: calc(100vh - 1.5rem);
}

.not-barre {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
    flex: 0 0 auto;
}

.not-recherche {
    flex: 1 1 170px;
    min-width: 120px;
    padding: .4rem .6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-color);
    font-family: inherit;
    font-size: .78rem;
}

.not-recherche:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

.not-segments {
    display: flex;
    gap: .12rem;
    padding: .14rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9px;
}

.not-segment {
    padding: .32rem .58rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: .73rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.not-segment:hover {
    color: var(--text-color);
    background: var(--bg-hover);
}

.not-segment.not-actif {
    background: var(--primary-color);
    color: #fff;
}

.not-segment:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Corps défilant du gestionnaire. Le `oas-corps` porte déjà le défilement,
   mais la liste a besoin de son propre `min-height: 0` pour ne pas étirer la
   fenêtre : dans une colonne flex, un enfant refuse de rétrécir sous la
   taille de son contenu. */
.not-liste {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 0;
}

/* ---------- Une carte de note ---------- */

.not-carte {
    border: 1px solid var(--border-color);
    border-left: 3px solid rgba(var(--not-teinte, 255, 209, 102), .95);
    border-radius: 10px;
    padding: .5rem .65rem .55rem;
    background:
        linear-gradient(0deg, rgba(var(--not-teinte, 255, 209, 102), .13),
                               rgba(var(--not-teinte, 255, 209, 102), .13)),
        var(--bg-card);
    transition: box-shadow .18s, transform .18s;
}

.not-carte:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Une note traitée reste VISIBLE mais s'efface : elle n'est pas supprimée,
   seulement plus au premier plan. Une note effacée de la liste serait perdue
   pour de bon, et « traiter » deviendrait une suppression déguisée. */
.not-carte.not-traitee {
    opacity: .6;
}

.not-carte.not-epinglee {
    box-shadow: 0 0 0 1px rgba(var(--not-teinte, 255, 209, 102), .55);
}

.not-carte-tete {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.not-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(var(--not-teinte, 255, 209, 102), .9);
    color: #26241a;
    font-size: .62rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.not-titre {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.not-date {
    flex: 0 0 auto;
    font-size: .67rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.not-corps {
    margin: .35rem 0 .45rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 8.5rem;
    overflow: auto;
}

.not-corps.not-plie {
    max-height: 3.4rem;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.not-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}

.not-action {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .24rem .5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: .71rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.not-action:hover {
    background: var(--bg-hover);
    color: var(--text-color);
    border-color: var(--border-color);
}

.not-action:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.not-action.not-danger:hover {
    background: rgba(224, 85, 99, .18);
    color: #ff8a96;
    border-color: rgba(224, 85, 99, .4);
}

.not-action.not-actif {
    color: var(--primary-color);
    border-color: rgba(77, 163, 255, .4);
    background: rgba(77, 163, 255, .12);
}

/* ---------- Panneau de conversion (activité / message) ---------- */

.not-panneau {
    display: grid;
    gap: .45rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--border-color);
}

.not-panneau[hidden] {
    display: none;
}

.not-ligne {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.not-champ {
    display: grid;
    gap: .18rem;
    flex: 1 1 120px;
    min-width: 0;
}

.not-etiquette {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.not-saisie {
    width: 100%;
    padding: .34rem .5rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-color);
    font-family: inherit;
    font-size: .77rem;
}

.not-saisie:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

/* ---------- États vides et messages ---------- */

.not-vide {
    padding: 2.2rem 1rem;
    text-align: center;
    font-size: .8rem;
    color: var(--text-muted);
}

.not-vide[hidden] {
    display: none;
}

.not-vide-titre {
    display: block;
    margin-bottom: .3rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-color);
}

.not-erreur {
    margin-top: .4rem;
    font-size: .74rem;
    font-weight: 600;
    color: #ff8a96;
}

.not-erreur[hidden] {
    display: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
    /* ⚠️ SUR MOBILE, LA FENÊTRE DEVIENT UN PANNEAU PLEIN LARGEUR ANCRÉ EN BAS.
       Une fenêtre de 760 px sur un écran de 390 px ne peut pas être
       déplacée : elle est plus large que l'écran, et la faire glisser ne
       révèle rien. On abandonne donc le déplacement au profit de la surface. */
    .oas-fenetre.not-fenetre {
        left: .5rem !important;
        right: .5rem;
        top: auto !important;
        bottom: .5rem;
        width: auto;
        height: min(80vh, 640px);
    }

    .oas-fenetre.oas-note-fenetre {
        left: .5rem !important;
        right: .5rem;
        top: auto !important;
        bottom: .5rem;
        width: auto;
    }
}