:root {
    /* Couleurs — bleu primaire (DiabTeam, "Bleu apaisant") */
    --df-blue: #4F8CFF;
    --df-blue-hover: #3A75E6;
    --df-blue-deep: #1F3C88;
    --df-blue-gradient-start: #3A6FE0;
    --df-blue-gradient-mid: #4F8CFF;
    --df-blue-gradient-end: #6FA8FF;
    --df-blue-surface: #EAF1FF;
    --df-blue-border: #C9DCFF;
    --df-blue-border-soft: #DCE9FF;
    --df-blue-bg-lightest: #F5F9FF;
    --df-blue-on-dark: #C9DCFF;
    --df-blue-gray-on-dark: #A9C6FF;
    --df-blue-lightest-on-dark: #D6E6FF;
    --df-white-blue-on-dark: #F0F6FF;

    /* Couleurs — accents DiabTeam */
    --df-mint: #7ED6B2;
    --df-mint-hover: #63C79C;
    --df-mint-text: #1F7A56;
    --df-mint-surface: #E9FBF3;
    --df-mint-border: #BCEDD8;
    --df-coral: #FF8A7A;
    --df-coral-hover: #F26F5E;
    --df-yellow: #FFD166;
    --df-navy: #1F3C88;

    /* Dégradés */
    --df-gradient-sidebar: linear-gradient(168deg, #3A6FE0 0%, #4F8CFF 62%, #6FA8FF 100%);
    --df-gradient-card-accent: linear-gradient(140deg, #3A6FE0 0%, #6FA8FF 100%);
    --df-gradient-header-mobile: linear-gradient(160deg, #3A6FE0 0%, #4F8CFF 60%, #6FA8FF 100%);
    --df-gradient-emergency-mobile: linear-gradient(170deg, #3A6FE0 0%, #4F8CFF 55%, #6FA8FF 100%);

    /* Couleurs — statuts (dérivées des accents DiabTeam : corail doux / jaune lumière) */
    --df-alert: #FF8A7A;
    --df-alert-text: #C94A38;
    --df-alert-text-secondary: #9C5145;
    --df-alert-surface: #FFF0ED;
    --df-alert-border: #FFC9BE;
    --df-warning: #FFD166;
    --df-warning-text: #92660A;
    --df-warning-text-secondary: #8A6410;
    --df-warning-surface: #FFF8E8;
    --df-warning-border: #F5E4B0;
    --df-violet: #6B5BD2;
    --df-violet-text: #4C3FB0;
    --df-violet-surface: #EFEDFB;
    --df-violet-border: #DDD8F4;

    /* Couleurs — neutres froids */
    --df-bg-app: #F5F7FB;
    --df-bg-mobile: #EDF1F8;
    --df-surface-card: #FFFFFF;
    --df-surface-subtle: #F9FAFE;
    --df-surface-btn-secondary: #EDF1F9;
    --df-surface-btn-secondary-alt: #E7ECF7;
    --df-border-card: #E3E8F2;
    --df-border-input: #DBE2EF;
    --df-border-divider: #EDF1F8;
    --df-progress-track: #EBEFF8;
    --df-text: #16223A;
    --df-text-secondary: #4A5568;
    --df-text-tertiary: #5B6478;
    --df-text-muted: #6B7793;
    --df-label: #8A93A8;
    --df-label-discrete: #98A1B5;
    --df-placeholder: #A7AFC2;
    --df-toggle-off: #D5DDEC;

    /* Typographie (DiabTeam) */
    --df-font-heading: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --df-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Espacement (échelle définie par le design) */
    --df-space-2: 2px;
    --df-space-3: 3px;
    --df-space-4: 4px;
    --df-space-6: 6px;
    --df-space-8: 8px;
    --df-space-10: 10px;
    --df-space-12: 12px;
    --df-space-14: 14px;
    --df-space-16: 16px;
    --df-space-18: 18px;
    --df-space-20: 20px;
    --df-space-22: 22px;
    --df-space-26: 26px;
    --df-space-28: 28px;
    --df-space-32: 32px;
    --df-space-40: 40px;
    --df-space-44: 44px;
    --df-space-56: 56px;
    --df-space: var(--df-space-28);

    /* Rayons */
    --df-radius-card-lg: 18px;
    --df-radius-card-md: 16px;
    --df-radius-card-sm: 14px;
    --df-radius-btn: 10px;
    --df-radius-btn-mobile: 16px;
    --df-radius-input: 10px;
    --df-radius-pill: 999px;
    --df-radius-avatar-square: 16px;
    --df-radius-logo: 11px;
    --df-radius-lg: var(--df-radius-card-lg);
    --df-radius-md: var(--df-radius-card-md);

    /* Ombres — volontairement minimales */
    --df-shadow-tab-active: 0 1px 3px rgba(30, 36, 48, 0.09);
    --df-shadow: var(--df-shadow-tab-active);
    --df-blur-header: blur(8px);

    /* Transitions */
    --df-transition-nav: background 140ms ease;

    color-scheme: light;
}

/*
 * Was missing entirely: every width: 100% element with its own padding
 * or border (inputs, .card, the sidebar's visually-hidden checkbox
 * toggle...) rendered content-box, i.e. wider than 100% by that padding
 * + border. That's what actually produced the horizontal-scroll/blue-
 * strip bug on real devices — this is the root-cause fix, the overflow
 * clipping below is only the safety net for whatever this doesn't catch.
 */
*, *::before, *::after { box-sizing: border-box; }

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0    rgba(242, 96, 60, 0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(242, 96, 60, 0); }
    100% { box-shadow: 0 0 0 0    rgba(242, 96, 60, 0); }
}

/*
 * overflow-x: hidden here only, never on body: body carries .app-shell's
 * position: sticky sidebar/header, and giving body any explicit overflow
 * (even just on the x-axis — the spec computes the other axis to "auto"
 * once one is non-visible) turns it into its own scroll container,
 * which breaks position: sticky against the viewport. html has no such
 * side effect and is this document's real scrolling element, so this
 * alone is the safety net against a slightly-too-wide element revealing
 * html's own blue background as a scrollable strip on the right
 * (reported on real devices across several screens, not one page).
 */
html { background: var(--df-blue); overflow-x: hidden; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--df-text);
    background: var(--df-bg-app);
    font-family: var(--df-font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

a { color: var(--df-blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--df-alert);
    outline-offset: 3px;
}

button, input, select, textarea { font: inherit; }
button { min-height: 3rem; border-radius: .625rem; }

.flash {
    position: fixed;
    z-index: 20;
    top: 1rem;
    right: 1rem;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: .8rem 1rem;
    border: 1px solid var(--df-border-card);
    border-radius: .75rem;
    background: var(--df-surface-card);
    box-shadow: var(--df-shadow);
}

@media (min-width: 62rem) {
    body {
        padding: clamp(1.5rem, 3vw, 3rem);
        background: linear-gradient(135deg, var(--df-blue) 0 18rem, var(--df-bg-app) 18rem);
    }
}

@media (max-width: 61.99rem) {
    body { padding: 1rem; }
}

@media (max-width: 40rem) {
    body { padding: .75rem; font-size: .98rem; }
    .flash { top: .75rem; right: .75rem; }
    h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
    button, input, select, textarea { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}

main, body > form, body > section, body > article {
    width: min(100%, 72rem);
    margin: 0 auto;
}

h1, h2, h3 { color: var(--df-text); font-family: var(--df-font-heading); line-height: 1.15; letter-spacing: -0.02em; }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 600; }
h2 { margin: 1.75rem 0 .75rem; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; }
p { color: var(--df-text-muted); }

main > *, body > form, body > section, body > article {
    margin-bottom: var(--df-space);
}

/*
 * grid-template-columns is deliberately explicit: without it the single
 * implicit column sizes itself to its content (auto), and a percentage
 * width on a child can't reliably resolve against that — <select> ends up
 * narrower than sibling <input>/<textarea> fields in the very same form,
 * misaligning the whole column. minmax(0, 1fr) gives every field the same
 * definite-width track to stretch into.
 */
form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    padding: var(--df-space);
    border: 1px solid var(--df-border-card);
    border-radius: var(--df-radius-md);
    background: var(--df-surface-card);
    box-shadow: var(--df-shadow);
}

label { display: grid; gap: .35rem; color: var(--df-text); font-weight: 600; }
input, select, textarea {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .8rem;
    border: 1px solid var(--df-border-input);
    border-radius: var(--df-radius-input);
    color: var(--df-text);
    background: var(--df-surface-card);
}
textarea { min-height: 7rem; resize: vertical; }

/*
 * iOS Safari centers a native <input type="date">'s value by default and
 * renders it at a size closer to its own date-picker UI than to this
 * form's other fields — the locale text itself ("19 août 2026" vs a
 * short numeric format) is OS-controlled and out of CSS's reach, but
 * left-aligning it at least keeps it visually consistent with every
 * other field in the same form instead of standing out as oversized.
 */
input[type="date"] { text-align: left; }

/*
 * DateType's "choice" widget (jour/mois/année) replaces the native date
 * input where the locale format ("19 août 2026") rendered oversized on
 * iOS with no CSS control over it — three plain <select>s give a short,
 * predictable rendering everywhere instead. Symfony wraps them in an
 * unclassed inner div, so row_attr's class targets the direct child
 * here rather than needing a selector on that wrapper itself.
 */
.date-field > div { display: flex; gap: .5rem; }
.date-field select { width: auto; flex: 1; min-width: 0; }

button {
    width: fit-content;
    padding: .65rem 1rem;
    border: 0;
    color: white;
    background: var(--df-blue);
    cursor: pointer;
    font-weight: 700;
}
button:hover { background: var(--df-blue-hover); }

ul, ol { padding: 0; list-style: none; }
li {
    margin: .5rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--df-border-card);
    border-radius: var(--df-radius-card-sm);
    background: var(--df-surface-card);
}

table {
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--df-border-card);
    border-radius: var(--df-radius-md);
    background: var(--df-surface-card);
    box-shadow: var(--df-shadow);
}
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--df-border-card); }
th {
    color: var(--df-text);
    background: var(--df-blue-surface);
    font-family: var(--df-font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
tr:last-child td { border-bottom: 0; }

/*
 * Exact class only — not [class*="card"] etc: a substring match catches
 * any future BEM-style class merely containing "card" anywhere (e.g.
 * .stocks-location-card__item, .care-panel), giving each its own
 * independent border/padding/shadow nested inside its own parent's,
 * which reads as duplicated boxes-within-boxes. Already bit this project
 * once (child-card/status-dot renamed away from it) and recurred as more
 * screens were added — fixed at the selector this time, not by renaming
 * classes one at a time again.
 */
.card {
    padding: var(--df-space);
    border: 1px solid var(--df-border-card);
    background: var(--df-surface-card);
    box-shadow: var(--df-shadow);
}

.error, .form-error, .flash--error { color: #9b1c1c; border-color: #f3b7b7; background: #fff4f4; }
.success, .flash--success { color: #17633a; border-color: #9bd6b5; background: #f0fff6; }

@media (max-width: 40rem) {
    form { padding: .9rem; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
    th, td { padding: .65rem .75rem; }
    li { padding: .7rem .8rem; }
}