/* NutriNote — design system (voir le projet Claude Design "Découpage et direction
   visuelle", fichier 02 Composants.dc.html, implémenté le 2026-08-20).
   Stratégie : Bootstrap 5.3 reste le moteur fonctionnel (menu, modale, toast, grille
   responsive — déjà accessibles et testés), re-skinné via ses propres variables CSS
   plutôt que remplacé. Les tokens ci-dessous sont volontairement proches des noms de
   variables Bootstrap quand ils existent, pour que la surcharge se propage à tous les
   composants sans avoir à retoucher chaque classe individuellement. */

:root {
    /* Typographie */
    --nn-font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
    --nn-font-heading: 'Outfit', system-ui, sans-serif;
    --nn-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Palette claire (thème par défaut) */
    --nn-bg: #F6F9F7;
    --nn-surface: #FFFFFF;
    --nn-text: #12211A;
    --nn-text-muted: #5B6B62;
    --nn-text-secondary: #34473D;
    --nn-border: #E2EAE5;
    --nn-border-soft: #EDF3EF;
    /* Bordure des champs de formulaire : #E2EAE5 (bordure décorative) ne passe que
       1.23:1 sur blanc, trop faible pour un contour de composant interactif (WCAG
       1.4.11, 3:1 requis). Un ton dédié, plus soutenu, uniquement pour les inputs. */
    --nn-input-border: #7C8C83;

    /* Vert de marque fixe (badges, indicateurs, éléments non liés à la couleur d'accent
       personnalisable de l'utilisateur — voir models/user.py::ACCENT_COLOR_CHOICES) */
    --nn-green: #2C9C5C;
    --nn-green-hover: #1F7F49;
    --nn-green-active: #17663A;
    --nn-green-soft-bg: #EFF9F1;
    --nn-green-soft-border: #AEE1BF;
    --nn-green-soft-text: #17663A;

    --nn-danger: #B3261E;
    --nn-danger-soft-bg: #FDEEED;
    --nn-danger-soft-border: #F0C9C6;
    --nn-warning-soft-bg: #FDF5E3;
    --nn-warning-soft-border: #EFD9A4;
    --nn-warning-text: #8F6100;
    --nn-info-soft-bg: #EAF8F8;
    --nn-info-text: #0A6E75;
    --nn-blue-soft-bg: #EDF4FE;
    --nn-blue-text: #1F5CB0;
    --nn-purple-soft-bg: #F8EEFC;
    --nn-purple-text: #7E3699;
    --nn-neutral-soft-bg: #F1F5F2;

    --nn-radius-sm: 8px;
    --nn-radius-md: 12px;
    --nn-radius-lg: 20px;
    --nn-radius-xl: 28px;
    --nn-radius-pill: 999px;
    /* Échelle d'ombres canonique (01 Fondations.dc.html) : Ombre1 repos, Ombre2 survol,
       Ombre3 flottant (menus, modales, éléments au-dessus du contenu). */
    --nn-shadow-1: 0 1px 2px rgba(18, 33, 26, 0.06);
    --nn-shadow-2: 0 6px 16px -8px rgba(18, 33, 26, 0.22);
    --nn-shadow-3: 0 18px 40px -18px rgba(18, 33, 26, 0.35);
    --nn-shadow-card: var(--nn-shadow-1);
    --nn-shadow-modal: var(--nn-shadow-3);

    /* Surcharge des variables Bootstrap : se propage à tous les composants (cartes,
       formulaires, alertes, modales...) qui dérivent leurs styles de ces variables. */
    --bs-body-font-family: var(--nn-font-body);
    --bs-body-bg: var(--nn-bg);
    --bs-body-color: var(--nn-text);
    --bs-border-color: var(--nn-border);
    --bs-border-radius: var(--nn-radius-md);
    --bs-border-radius-sm: var(--nn-radius-sm);
    --bs-border-radius-lg: var(--nn-radius-lg);
    --bs-border-radius-xl: var(--nn-radius-xl);
    --bs-secondary-color: var(--nn-text-muted);
    --bs-secondary-bg: var(--nn-neutral-soft-bg);
    /* .text-secondary lit --bs-secondary-rgb (couleur du thème "secondary", pas
       --bs-secondary-color qui sert à .text-body-secondary) : sans cette surcharge
       il reste au gris Bootstrap par défaut (#6c757d), jamais ajusté pour le thème
       sombre — échoue le contraste sur les fonds de carte sombres (trouvé sur la
       chronologie du calendrier mobile). */
    --bs-secondary-rgb: 52, 71, 61;
    --bs-tertiary-bg: var(--nn-border-soft);
    --bs-link-color: var(--nn-green-hover);
    --bs-link-hover-color: var(--nn-green-active);
    /* Bootstrap 5.3 calcule en réalité `a { color: rgba(var(--bs-link-color-rgb), ...) }` :
       surcharger uniquement --bs-link-color (hex) est sans effet, il faut le triplet RGB
       (même défaut de propagation que --bs-secondary-rgb et --bs-success-rgb ci-dessous). */
    --bs-link-color-rgb: 31, 127, 73;
    --bs-link-hover-color-rgb: 23, 102, 58;
    --bs-card-border-radius: var(--nn-radius-lg);
    --bs-card-border-color: var(--nn-border);
    /* .text-success (et .border-success, .bg-success sans texte blanc dessus) : couleur
       "Succès" fixe du design system (#1F7F49), indépendante de l'accent choisi par
       l'utilisateur — voir la note dans templates/base.html sur le périmètre de l'accent. */
    --bs-success-rgb: 31, 127, 73;

    /* Couleur d'accent choisie par l'utilisateur (--nutrinote-accent*, injectées par
       requête dans templates/base.html) pilote uniquement : nav active, boutons
       primaires, anneaux de progression, sélection du calendrier. */
}

:root[data-bs-theme="dark"] {
    /* Neutres exacts du design system (01 Fondations.dc.html). */
    --nn-bg: #0E1A14;
    --nn-surface: #17251E;
    --nn-text: #E8F0EA;
    --nn-text-muted: #9FB2A7;
    --nn-text-secondary: #C7D6CC;
    --nn-border: #27362E;
    --nn-border-soft: #1C2E26;
    --nn-input-border: #63886F;

    --nn-green-soft-bg: #163524;
    --nn-green-soft-border: #2B5A3E;
    --nn-green-soft-text: #6ED39A;

    --nn-danger-soft-bg: #3A1F1D;
    --nn-danger-soft-border: #5C2E29;
    --nn-warning-soft-bg: #3A310F;
    --nn-warning-soft-border: #5C4E1A;
    --nn-warning-text: #E8C46A;
    --nn-info-soft-bg: #123234;
    --nn-info-text: #6FD6DD;
    --nn-blue-soft-bg: #16233D;
    --nn-blue-text: #7FA8EE;
    --nn-purple-soft-bg: #2C1E36;
    --nn-purple-text: #C79BE0;
    --nn-neutral-soft-bg: #1C2E26;

    --bs-body-bg: var(--nn-bg);
    --bs-body-color: var(--nn-text);
    --bs-border-color: var(--nn-border);
    --bs-secondary-color: var(--nn-text-muted);
    --bs-secondary-rgb: 199, 214, 204;
    --bs-tertiary-bg: var(--nn-border-soft);
    --bs-card-border-color: var(--nn-border);
    /* Liens et .text-success : le vert clair (déjà utilisé pour les badges en thème
       sombre) passe largement le contraste AA sur les fonds sombres (~8.6:1 à 9.4:1). */
    --bs-link-color-rgb: 110, 211, 154;
    --bs-link-hover-color-rgb: 148, 224, 184;
    --bs-success-rgb: 110, 211, 154;

    /* Nuance de texte pour la couleur d'accent : 700 (clair) → 300 (sombre), déjà
       validée ≥6,8:1 sur les fonds sombres (01 Fondations.dc.html). Remplace l'ancien
       éclaircissement dynamique via color-mix(). */
    --nutrinote-accent-text: var(--nutrinote-accent-300);
    /* La nuance 50 (fond doux) n'est validée que sur fond clair : en thème sombre, texte
       accent-300 (clair) sur fond neutre discret déjà utilisé pour les surbrillances
       (--nn-border-soft), plutôt qu'un fond clair qui écraserait le contraste. */
    --nutrinote-accent-soft-bg: var(--nn-border-soft);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* Sous prefers-reduced-motion, les durées tombent à 0 (01 Fondations.dc.html) :
   neutralise transitions/animations CSS et le défilement fluide, sans rien retirer
   de fonctionnel (les états finaux restent atteints instantanément). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
}

code, .nn-mono {
    font-family: var(--nn-font-mono);
}

/* Pousse le pied de page en bas de l'écran même quand le contenu est court. */
#main-content {
    flex: 1 0 auto;
}

.nn-main-container {
    padding-top: 1.5rem;
    padding-bottom: calc(1.5rem + 76px); /* réserve la hauteur de la barre mobile basse */
}
@media (min-width: 992px) {
    .nn-main-container { padding-bottom: 1.5rem; }
}

/* Lien d'évitement : premier élément focusable de la page, invisible tant qu'il n'a pas
   le focus clavier — exigence RGAA de base pour sauter la navigation répétitive. */
.nn-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--nn-green-hover);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--nn-radius-md) 0;
    font-weight: 600;
    text-decoration: none;
}
.nn-skip-link:focus {
    left: 0;
}

/* Anneau de focus unique sur toute l'application, couleur accent 700 (01 Fondations.dc.html
   §Icônes & mouvement) — texte porteur de sens, pas un simple aplat, donc nuance "texte"
   (700 clair / 300 sombre) plutôt que 500. */
*:focus-visible {
    outline: 3px solid var(--nutrinote-accent-text, var(--nn-green-hover));
    outline-offset: 2px;
    border-radius: var(--nn-radius-sm);
}

/* ---------- Navigation ---------- */

.nn-navbar {
    background: var(--nn-surface);
    border-bottom: 1px solid var(--nn-border);
    padding: 0.65rem 0;
}

.nn-navbar-brand {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--nn-text) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.nn-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    /* Fond uni plutôt qu'un dégradé : même avec deux teintes qui passent chacune le
       contraste individuellement, l'outil d'audit RGAA (axe-core) ne peut pas garantir
       le contraste sur un dégradé échantillonné pixel par pixel — un uni lève l'ambiguïté. */
    background: var(--nn-green-hover);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 15px;
    flex: none;
}

.nn-greeting {
    font-size: 0.9rem;
    color: var(--nn-text-muted);
}

.nn-pill-nav {
    list-style: none;
    margin: 0 0 0 1rem;
    padding: 0;
}

.nn-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    border-radius: var(--nn-radius-pill);
    color: var(--nn-text-secondary);
    text-decoration: none;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.nn-pill-link:hover {
    background: var(--nn-border-soft);
    color: var(--nn-text);
}

/* Nav active : suit l'accent choisi par l'utilisateur (01 Fondations.dc.html —
   "Indépendance de l'accent" : nav active, boutons primaires, anneaux de progression et
   sélection du calendrier sont les seuls éléments concernés). */
.nn-pill-link.active {
    background: var(--nutrinote-accent-soft-bg, var(--nn-green-soft-bg));
    color: var(--nutrinote-accent-text, var(--nn-green-soft-text));
    font-weight: 600;
}

.nn-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--nn-radius-pill);
    border: 1.5px solid var(--nn-border);
    background: var(--nn-surface);
    color: var(--nn-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.nn-icon-btn:hover {
    background: var(--nn-border-soft);
    border-color: var(--nn-green-soft-border);
    color: var(--nn-text);
}

.nn-icon-btn-sm {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.nn-icon-btn-danger:hover {
    background: var(--nn-danger-soft-bg);
    border-color: var(--nn-danger-soft-border);
    color: var(--nn-danger);
}

.nn-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--nn-radius-pill);
    background: var(--nn-green-soft-bg);
    color: var(--nn-green-soft-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.nn-mobile-secondary-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.25rem;
    min-height: 44px;
    color: var(--nn-text-secondary);
    text-decoration: none;
    border-top: 1px solid var(--nn-border-soft);
}
.nn-mobile-secondary-nav li:first-child a { border-top: none; }

/* Barre de navigation mobile fixe en bas d'écran, avec bouton d'ajout flottant. */
.nn-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: var(--nn-surface);
    border-top: 1px solid var(--nn-border-soft);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

.nn-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    min-height: 44px;
    text-decoration: none;
    color: var(--nn-text-muted);
    font-size: 11px;
    font-weight: 500;
}

.nn-bottom-nav a.active {
    color: var(--nutrinote-accent-text, var(--nn-green-soft-text));
    font-weight: 600;
}

.nn-bottom-nav a i {
    font-size: 1.2rem;
}

.nn-bottom-nav-fab-wrap {
    display: grid;
    place-items: center;
}

.nn-bottom-nav-fab {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--nn-green-hover);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    box-shadow: 0 8px 18px -8px rgba(31, 127, 73, 0.8);
    margin-top: -22px;
    border: 4px solid var(--nn-surface);
    text-decoration: none;
}
.nn-bottom-nav-fab:hover { background: var(--nn-green-hover); color: #fff; }

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

.nn-btn {
    font-family: var(--nn-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.65rem 1.3rem;
    min-height: 44px;
    border-radius: var(--nn-radius-md);
    border: 1.5px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}
.nn-btn:disabled { cursor: not-allowed; }

.nn-btn-sm {
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* Fond en nuance 700 plutôt que 500 : porte du texte blanc (≥4,5:1 requis, WCAG 1.4.3),
   pas un simple aplat graphique (500 ne garantit que 3:1, voir 01 Fondations.dc.html —
   « blanc sur 500 » y est documenté aussi bas que 3,33:1 selon l'accent). */
.nn-btn-primary {
    background: var(--nutrinote-accent-700, var(--nn-green-hover));
    border-color: var(--nutrinote-accent-700, var(--nn-green-hover));
    color: #fff;
}
.nn-btn-primary:hover {
    background: color-mix(in srgb, var(--nutrinote-accent-700, var(--nn-green-hover)) 85%, black);
    border-color: color-mix(in srgb, var(--nutrinote-accent-700, var(--nn-green-hover)) 80%, black);
    color: #fff;
}

.nn-btn-secondary {
    background: var(--nn-surface);
    border-color: var(--nn-border);
    color: var(--nn-text-secondary);
}
.nn-btn-secondary:hover {
    background: var(--nn-border-soft);
    border-color: var(--nn-green-soft-border);
}

.nn-btn-danger {
    background: var(--nn-surface);
    border-color: var(--nn-danger-soft-border);
    color: var(--nn-danger);
}
.nn-btn-danger:hover {
    background: var(--nn-danger-soft-bg);
}

/* Ré-habillage des boutons Bootstrap existants (formulaires WTForms, gabarits non
   migrés vers .nn-btn) pour qu'ils suivent le même système visuel sans réécrire
   chaque template : rayon, hauteur tactile, typographie. */
.btn {
    --bs-btn-border-radius: var(--nn-radius-md);
    --bs-btn-font-weight: 600;
    font-family: var(--nn-font-body);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm { min-height: 36px; }

/* Fond en nuance 700 (texte blanc dessus, ≥4,5:1) plutôt que 500 (voir .nn-btn-primary
   ci-dessus pour le détail du raisonnement). */
.btn-success {
    --bs-btn-bg: var(--nutrinote-accent-700);
    --bs-btn-border-color: var(--nutrinote-accent-700);
    --bs-btn-hover-bg: color-mix(in srgb, var(--nutrinote-accent-700) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--nutrinote-accent-700) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--nutrinote-accent-700) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--nutrinote-accent-700) 70%, black);
    --bs-btn-disabled-bg: var(--nutrinote-accent-700);
    --bs-btn-disabled-border-color: var(--nutrinote-accent-700);
}

.btn-outline-success {
    /* Texte/bordure en nuance "texte" (700 clair / 300 sombre, ≥4,5:1). Les fonds de
       survol/actif passent aussi en 700 (et non 500) : le texte devient blanc dessus
       via --bs-btn-hover-color (valeur par défaut de Bootstrap pour ce variant), donc
       même exigence de contraste texte que les boutons pleins. */
    --bs-btn-color: var(--nutrinote-accent-text);
    --bs-btn-border-color: var(--nutrinote-accent-text);
    --bs-btn-hover-bg: var(--nutrinote-accent-700);
    --bs-btn-hover-border-color: var(--nutrinote-accent-700);
    --bs-btn-active-bg: var(--nutrinote-accent-700);
    --bs-btn-active-border-color: var(--nutrinote-accent-700);
    --bs-btn-disabled-color: var(--nutrinote-accent-text);
    --bs-btn-disabled-border-color: var(--nutrinote-accent-text);
}

/* .bg-success + .text-white (en-tête "aujourd'hui" du détail jour) : --bs-success-rgb
   passe à un vert clair en thème sombre (lisible en tant que TEXTE sur fond sombre, voir
   .text-success ci-dessus), incompatible avec un fond qui porte lui-même du texte blanc.
   Ce fond reste donc au vert fixe --nn-green-hover (#1F7F49, ~5:1 avec du blanc),
   identique dans les deux thèmes plutôt que dérivé de --bs-success-rgb. */
.bg-success.text-white {
    background-color: var(--nn-green-hover) !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--nn-text-secondary);
    --bs-btn-border-color: var(--nn-border);
    --bs-btn-hover-bg: var(--nn-border-soft);
    --bs-btn-hover-border-color: var(--nn-green-soft-border);
    --bs-btn-hover-color: var(--nn-text);
}

.btn-outline-danger {
    --bs-btn-color: var(--nn-danger);
    --bs-btn-border-color: var(--nn-danger-soft-border);
    --bs-btn-hover-bg: var(--nn-danger-soft-bg);
    --bs-btn-hover-border-color: var(--nn-danger);
    --bs-btn-hover-color: var(--nn-danger);
}

/* ---------- Cartes, alertes, formulaires (surcharges globales) ---------- */

.card {
    box-shadow: var(--nn-shadow-card);
    border-color: var(--nn-border);
}

.form-control, .form-select {
    min-height: 46px;
    border-radius: var(--nn-radius-md);
    border-color: var(--nn-input-border);
    background-color: var(--nn-surface);
    color: var(--nn-text);
}
.form-control:hover, .form-select:hover {
    border-color: var(--nn-green-soft-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--nutrinote-accent-text, var(--nn-green-hover));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nutrinote-accent-text, var(--nn-green-hover)) 20%, transparent);
}
textarea.form-control { min-height: 90px; }

.form-label { font-weight: 600; font-size: 0.9rem; }
.form-text, .invalid-feedback { font-size: 0.85rem; }

.nn-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--nn-radius-lg);
    border: 1px solid var(--nn-border);
    margin-bottom: 0.75rem;
    background: var(--nn-surface);
}
.nn-alert-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex: none;
}
.nn-alert-message { flex: 1; font-size: 0.95rem; }
.nn-alert-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}
.nn-alert-close:hover { opacity: 1; }

.nn-alert-success { background: var(--nn-green-soft-bg); border-color: var(--nn-green-soft-border); color: var(--nn-text); }
.nn-alert-success .nn-alert-icon { background: var(--nn-green-hover); }
.nn-alert-info { background: var(--nn-info-soft-bg); border-color: var(--nn-green-soft-border); color: var(--nn-text); }
.nn-alert-info .nn-alert-icon { background: var(--nn-info-text); }
.nn-alert-warning { background: var(--nn-warning-soft-bg); border-color: var(--nn-warning-soft-border); color: var(--nn-text); }
.nn-alert-warning .nn-alert-icon { background: var(--nn-warning-text); }
.nn-alert-danger { background: var(--nn-danger-soft-bg); border-color: var(--nn-danger-soft-border); color: var(--nn-text); }
.nn-alert-danger .nn-alert-icon { background: var(--nn-danger); }

.nn-toast-container { z-index: 1080; }
.nn-toast {
    background: #12211A;
    color: #fff;
    border-radius: var(--nn-radius-lg);
    box-shadow: var(--nn-shadow-modal);
    border: none;
    padding: 0.9rem 1rem;
}
.nn-toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #6ED39A;
    color: #0C3520;
    display: grid;
    place-items: center;
    flex: none;
    margin-right: 0.6rem;
}
.nn-toast-close {
    background: transparent;
    border: none;
    color: #BFE8CF;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    align-self: center;
    padding: 6px 8px;
}

.nn-modal-content {
    border-radius: var(--nn-radius-xl);
    border: none;
    box-shadow: var(--nn-shadow-modal);
    background: var(--nn-surface);
    color: var(--nn-text);
}
.nn-modal-title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.nn-modal-message { color: var(--nn-text-muted); margin: 0; }

.nn-footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem 0 calc(1.5rem + 76px);
    color: var(--nn-text-muted);
    border-top: 1px solid var(--nn-border);
}
@media (min-width: 992px) {
    .nn-footer { padding-bottom: 1.5rem; }
}
.nn-footer-logo { border-radius: 6px; }

/* Sélecteur de couleur d'accent (page profil) */
.color-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.color-swatch-option {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
}

.color-swatch-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.color-swatch-label {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--swatch-color);
    border: 2px solid var(--nn-border);
    cursor: pointer;
    font-size: 0;
    transition: box-shadow .15s ease;
}

.color-swatch-input:checked + .color-swatch-label {
    box-shadow: 0 0 0 3px var(--nn-bg), 0 0 0 5px var(--swatch-color);
}

.color-swatch-input:focus-visible + .color-swatch-label {
    outline: 2px solid var(--swatch-color);
    outline-offset: 3px;
}

/* ---------- Badges (ressenti, source de donnée) ---------- */

.nn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--nn-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}
.nn-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}

.nn-badge-withings { background: var(--nn-blue-soft-bg); color: var(--nn-blue-text); }
.nn-badge-manual { background: var(--nn-neutral-soft-bg); color: var(--nn-text-secondary); }
.nn-badge-modified { background: var(--nn-purple-soft-bg); color: var(--nn-purple-text); }

/* ---------- Cartes de repas (calendrier) ---------- */

.nn-meal-card {
    transition: transform 180ms cubic-bezier(.2,.8,.3,1), box-shadow 180ms;
}
.nn-meal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nn-shadow-card);
}

/* ---------- Calendrier - vue mois (desktop) ---------- */

.nn-calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
}

.nn-calendar-table th {
    padding: 4px 0;
    font-family: var(--nn-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--nn-text-muted);
    text-align: center;
}

.nn-calendar-table td {
    padding: 0;
}

.calendar-grid-day {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nn-radius-sm);
    text-decoration: none;
    color: var(--nn-text);
    background-color: var(--nn-border-soft);
    font-family: var(--nn-font-mono);
    font-size: 0.9rem;
    transition: background-color .15s ease;
}

.calendar-grid-day:hover {
    background-color: color-mix(in srgb, var(--nutrinote-accent, var(--nn-green-hover)) 20%, var(--nn-border-soft));
}

.calendar-grid-day-outside {
    /* Pas d'opacity : réduirait le contraste du chiffre sous le seuil WCAG AA
       (mesuré ~2.1:1 avec opacity: 0.35). --nn-text-muted passe 4.5:1+ tout en
       restant visuellement plus discret que les jours du mois affiché. */
    color: var(--nn-text-muted);
}

.calendar-grid-day-today {
    box-shadow: inset 0 0 0 2px var(--nutrinote-accent, var(--nn-green-hover));
    font-weight: 600;
}

.calendar-grid-day.calendar-day-selected {
    /* Nuance 700 : le chiffre du jour en blanc dessus est du texte (≥4,5:1 requis),
       pas un simple aplat — voir .nn-btn-primary pour le même raisonnement. */
    background-color: var(--nutrinote-accent-700, var(--nn-green-hover));
    color: #fff;
}

.calendar-grid-dot {
    position: absolute;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--nutrinote-accent, var(--nn-green-hover));
}

.calendar-grid-day.calendar-day-selected .calendar-grid-dot {
    background-color: #fff;
}

.nn-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--nn-border-soft);
    font-size: 13px;
    color: var(--nn-text-muted);
}
.nn-calendar-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 6px;
}

/* ---------- Vue jour, mobile (calendrier — 03 Écrans.dc.html) ---------- */
/* Chronologie verticale + bande de jours glissante, l'écran d'accueil du mobile
   plutôt qu'une réduction de la grille du mois (celle-ci reste consultable via le
   bouton "mois"). Un seul bloc à deux tons (en-tête clair / corps légèrement teinté),
   comme dans la maquette, plutôt qu'un cadre "téléphone" qui n'a pas d'équivalent
   dans une page web responsive réelle. */
.nn-day-mobile {
    border-radius: var(--nn-radius-lg);
    overflow: hidden;
    border: 1px solid var(--nn-border);
    box-shadow: var(--nn-shadow-card);
}

.nn-day-mobile-header {
    background: var(--nn-surface);
    padding: 1.125rem 1.125rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.nn-day-mobile-month {
    display: block;
    font-family: var(--nn-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nn-text-muted);
}

.nn-day-mobile-date {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin: 2px 0 0;
}

.nn-day-mobile-month-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--nn-radius-md);
    border: 1.5px solid var(--nn-border);
    background: transparent;
    color: var(--nn-text-secondary);
    font-family: var(--nn-font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.nn-day-mobile-month-btn:hover,
.nn-day-mobile-month-btn[aria-expanded="true"] {
    background: var(--nn-border-soft);
    border-color: var(--nn-green-soft-border);
}

.nn-day-mobile-month-panel {
    background: var(--nn-surface);
    padding: 0 1.125rem 1.125rem;
    border-bottom: 1px solid var(--nn-border-soft);
}

.nn-week-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.nn-week-strip-day {
    flex: none;
    width: 46px;
    min-height: 64px;
    border-radius: var(--nn-radius-md);
    border: 1px solid var(--nn-border-soft);
    background: var(--nn-bg);
    color: var(--nn-text-secondary);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.nn-week-strip-day:hover {
    border-color: var(--nn-green-soft-border);
}
.nn-week-strip-day.outside {
    color: var(--nn-text-muted);
}
.nn-week-strip-day.active {
    background: var(--nutrinote-accent-700, var(--nn-green-hover));
    border-color: transparent;
    color: #fff;
}
.nn-week-strip-letter {
    font-family: var(--nn-font-mono);
    font-size: 11px;
    opacity: 0.75;
}
.nn-week-strip-num {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
}
.nn-week-strip-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--nutrinote-accent, var(--nn-green-hover));
}
.nn-week-strip-day.active .nn-week-strip-dot {
    background: #fff;
}

.nn-day-mobile-body {
    background: var(--nn-bg);
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.nn-day-stats {
    display: flex;
    gap: 10px;
}
.nn-day-stat {
    flex: 1;
    background: var(--nn-surface);
    border-radius: var(--nn-radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nn-day-stat-value {
    font-family: var(--nn-font-mono);
    font-size: 1.15rem;
    font-weight: 500;
}
.nn-day-stat-label {
    font-size: 12px;
    color: var(--nn-text-muted);
}
.nn-day-stat-kcal { color: var(--nn-green-soft-text); }
.nn-day-stat-water { color: var(--nn-blue-text); }
.nn-day-stat-weight { color: var(--nn-purple-text); }

.nn-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nn-timeline-item {
    display: flex;
    gap: 10px;
}
.nn-timeline-time {
    flex: none;
    width: 40px;
    padding-top: 14px;
    font-family: var(--nn-font-mono);
    font-size: 12px;
    color: var(--nn-text-muted);
}
.nn-timeline-card {
    flex: 1;
    min-width: 0;
    background: var(--nn-surface);
    border-radius: var(--nn-radius-lg);
    overflow: hidden;
}
.nn-timeline-card-body {
    padding: 12px 14px;
}
/* ---------- Tableau de bord (03 Écrans.dc.html) ---------- */

.nn-dash-hero {
    background: var(--nn-bg);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    box-shadow: var(--nn-shadow-3);
}

.nn-dash-greeting {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    margin: 0;
}
.nn-dash-subtitle {
    margin: 6px 0 0;
    color: var(--nn-text-muted);
}

.nn-dash-period {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.nn-dash-period-pill {
    padding: 9px 16px;
    border-radius: var(--nn-radius-pill);
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    color: var(--nn-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.nn-dash-period-pill:hover {
    border-color: var(--nn-green-soft-border);
}
.nn-dash-period-pill.active {
    background: var(--nn-text);
    border-color: var(--nn-text);
    color: var(--nn-bg);
    font-weight: 600;
}

.nn-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}
.nn-dash-stat {
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nn-dash-stat-label {
    font-size: 0.875rem;
    color: var(--nn-text-muted);
}
.nn-dash-stat-value {
    font-family: var(--nn-font-mono);
    font-size: 1.85rem;
    letter-spacing: -0.02em;
}
.nn-dash-stat-unit {
    font-size: 0.9rem;
    color: var(--nn-text-muted);
}
.nn-dash-stat-sub {
    font-size: 0.875rem;
    color: var(--nn-text-muted);
}

.nn-dash-stat-hydration {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.nn-dash-hydration-ring {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: none;
}
.nn-dash-hydration-ring-inner {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background: var(--nn-surface);
    display: grid;
    place-items: center;
    font-family: var(--nn-font-mono);
    font-size: 0.85rem;
    color: var(--nn-blue-text);
}
.nn-dash-hydration-value {
    font-family: var(--nn-font-mono);
    font-size: 1.15rem;
    font-weight: 400;
}

.nn-dash-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 14px;
}
@media (max-width: 991px) {
    .nn-dash-charts { grid-template-columns: 1fr; }
}
.nn-dash-chart-card {
    background: var(--nn-surface);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.nn-dash-chart-title {
    font-family: var(--nn-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}
.nn-dash-chart-range {
    font-family: var(--nn-font-mono);
    font-size: 0.8rem;
    color: var(--nn-text-muted);
}

.nn-dash-weight-svg {
    width: 100%;
    height: 150px;
    display: block;
}
.nn-dash-svg-grid {
    stroke: var(--nn-border-soft);
    stroke-width: 0.4;
}
.nn-dash-svg-area {
    fill: color-mix(in srgb, var(--nutrinote-accent, var(--nn-green)) 12%, transparent);
}
.nn-dash-svg-line {
    fill: none;
    stroke: var(--nutrinote-accent, var(--nn-green));
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.nn-dash-details-summary {
    font-size: 0.875rem;
    color: var(--nutrinote-accent-text, var(--nn-green-hover));
    cursor: pointer;
}
.nn-dash-data-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.nn-dash-data-table th,
.nn-dash-data-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--nn-border-soft);
}

.nn-dash-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nn-dash-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nn-dash-bar-label {
    width: 34px;
    flex: none;
    font-size: 0.8rem;
    color: var(--nn-text-muted);
}
.nn-dash-bar-track {
    flex: 1;
    height: 12px;
    border-radius: 999px;
    background: var(--nn-neutral-soft-bg);
    overflow: hidden;
}
.nn-dash-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--nutrinote-accent, var(--nn-green));
}
.nn-dash-bar-value {
    width: 52px;
    flex: none;
    text-align: right;
    font-family: var(--nn-font-mono);
    font-size: 0.8rem;
}

.nn-dash-bodycomp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.nn-timeline-photo {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
}