/*
 * BatChef — Material Design 3
 *
 * Palette : Tonal Spot depuis #2f6f4e (hue 154°)
 * Typography : Roboto (imported in index.html)
 * Mode : Light + Dark (prefers-color-scheme)
 *
 * Sommaire
 *  1.  MD3 tokens — light
 *  2.  MD3 tokens — dark
 *  3.  Base (body, reset, brand-bg)
 *  4.  Typography helpers
 *  5.  Cards (paper)
 *  6.  Buttons
 *  7.  Text Fields (outlined)
 *  8.  Chips (filter)
 *  9.  Badges / Pills
 * 10.  Top App Bar (header)
 * 11.  Stepper (onboarding)
 * 12.  Chat
 * 13.  Loader génération
 * 14.  Snackbar (toasts)
 * 15.  FAB + panneau support
 * 16.  Password strength
 * 17.  News dot
 * 18.  Home mode cards
 * 19.  Icônes
 * 20.  Utilitaires
 * 21.  Print
 */


/* ==========================================================================
 * 1. MD3 DESIGN TOKENS — LIGHT THEME
 * ========================================================================== */
:root {
  /* ── Primary (Hue 154°, Chroma 25) ───────────────────────────────────── */
  --md-primary:                   #006C46;
  --md-on-primary:                #FFFFFF;
  --md-primary-container:         #8AF5BD;
  --md-on-primary-container:      #002112;

  /* ── Secondary (Hue 154°, Chroma 10) ─────────────────────────────────── */
  --md-secondary:                 #4D6357;
  --md-on-secondary:              #FFFFFF;
  --md-secondary-container:       #CFE9D8;
  --md-on-secondary-container:    #0B1F15;

  /* ── Tertiary (Hue 220°, Chroma 15) ──────────────────────────────────── */
  --md-tertiary:                  #3D6373;
  --md-on-tertiary:               #FFFFFF;
  --md-tertiary-container:        #C1E8FC;
  --md-on-tertiary-container:     #001F2A;

  /* ── Error ────────────────────────────────────────────────────────────── */
  --md-error:                     #BA1A1A;
  --md-on-error:                  #FFFFFF;
  --md-error-container:           #FFDAD6;
  --md-on-error-container:        #410002;

  /* ── Neutral surfaces (Hue 154°, Chroma 4) ───────────────────────────── */
  --md-background:                #F5FBF4;
  --md-on-background:             #171D1A;
  --md-surface:                   #F5FBF4;
  --md-on-surface:                #171D1A;
  --md-surface-variant:           #DCE5DC;
  --md-on-surface-variant:        #404943;
  --md-surface-tint:              #006C46;

  /* Surface containers (T100 → T90) */
  --md-surf-lowest:               #FFFFFF;
  --md-surf-low:                  #F0F7EF;
  --md-surf:                      #EAF1E9;
  --md-surf-high:                 #E5EDE4;
  --md-surf-highest:              #E0E7DF;

  /* ── Outline ──────────────────────────────────────────────────────────── */
  --md-outline:                   #707972;
  --md-outline-variant:           #C0C9C1;

  /* ── Inverse ──────────────────────────────────────────────────────────── */
  --md-inverse-surface:           #2C332E;
  --md-inverse-on-surface:        #ECF2EA;
  --md-inverse-primary:           #6CD8A1;

  /* ── Scrim ────────────────────────────────────────────────────────────── */
  --md-scrim:                     rgba(0,0,0,0.32);

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --md-shape-xs:                  4px;
  --md-shape-sm:                  8px;
  --md-shape-md:                  12px;
  --md-shape-lg:                  16px;
  --md-shape-xl:                  28px;
  --md-shape-full:                9999px;

  /* ── Elevation shadows (MD3 key-color aware) ──────────────────────────── */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);

  /* ── State layer opacities ────────────────────────────────────────────── */
  --md-hover-op:   0.08;
  --md-press-op:   0.12;
  --md-focus-op:   0.12;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --md-motion-std:     cubic-bezier(0.2, 0, 0, 1);
  --md-motion-decel:   cubic-bezier(0, 0, 0, 1);
  --md-motion-accel:   cubic-bezier(0.3, 0, 1, 1);
  --md-dur-short2:     100ms;
  --md-dur-short3:     150ms;
  --md-dur-short4:     200ms;
  --md-dur-med1:       250ms;
  --md-dur-med2:       300ms;
  --md-dur-long1:      350ms;

  /* ── Legacy aliases (keeps old JS/HTML working) ───────────────────────── */
  --brand:          var(--md-primary);
  --brand-dark:     #004E31;
  --brand-soft:     var(--md-primary-container);
  --bg:             var(--md-background);
  --surface:        var(--md-surface);
  --line:           var(--md-outline-variant);
  --muted:          var(--md-on-surface-variant);
  --muted-strong:   var(--md-on-surface);
  --warm:           var(--md-surf-low);
  --shadow-1:       var(--md-elev-1);
  --shadow-2:       var(--md-elev-2);
  --shadow-3:       var(--md-elev-3);
}


/* ==========================================================================
 * 2. MD3 DESIGN TOKENS — DARK THEME
 * ========================================================================== */
/* Dark tokens — partagés par le media query ET le toggle manuel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Primary ────────────────────────────────────────────────────── */
    --md-primary:                   #6DD9A2;
    --md-on-primary:                #003822;
    --md-primary-container:         #005234;
    --md-on-primary-container:      #8AF5BD;
    --md-secondary:                 #B4CCBB;
    --md-on-secondary:              #1F352A;
    --md-secondary-container:       #354B3F;
    --md-on-secondary-container:    #CFE9D8;
    --md-tertiary:                  #A5CDE0;
    --md-on-tertiary:               #073546;
    --md-tertiary-container:        #244C5D;
    --md-on-tertiary-container:     #C1E8FC;
    --md-error:                     #FFB4AB;
    --md-on-error:                  #690005;
    --md-error-container:           #93000A;
    --md-on-error-container:        #FFDAD6;
    --md-background:                #0F1510;
    --md-on-background:             #DEE5DC;
    --md-surface:                   #0F1510;
    --md-on-surface:                #DEE5DC;
    --md-surface-variant:           #404943;
    --md-on-surface-variant:        #C0C9C1;
    --md-surface-tint:              #6DD9A2;
    --md-surf-lowest:               #0A100C;
    --md-surf-low:                  #171D1A;
    --md-surf:                      #1B2220;
    --md-surf-high:                 #262D2A;
    --md-surf-highest:              #313830;
    --md-outline:                   #8A9389;
    --md-outline-variant:           #404943;
    --md-inverse-surface:           #DEE5DC;
    --md-inverse-on-surface:        #2C332E;
    --md-inverse-primary:           #006C46;
    --brand:       var(--md-primary);
    --brand-soft:  var(--md-primary-container);
    --bg:          var(--md-background);
    --surface:     var(--md-surface);
    --line:        var(--md-outline-variant);
    --muted:       var(--md-on-surface-variant);
    --muted-strong: var(--md-on-surface);
    --warm:        var(--md-surf-low);
    --shadow-1:    0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.4);
    --shadow-2:    0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.4);
    --shadow-3:    0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);
  }
}

/* Toggle manuel dark — surcharge le système */
:root[data-theme="dark"] {
    --md-primary:                   #6DD9A2;
    --md-on-primary:                #003822;
    --md-primary-container:         #005234;
    --md-on-primary-container:      #8AF5BD;
    --md-secondary:                 #B4CCBB;
    --md-on-secondary:              #1F352A;
    --md-secondary-container:       #354B3F;
    --md-on-secondary-container:    #CFE9D8;
    --md-tertiary:                  #A5CDE0;
    --md-on-tertiary:               #073546;
    --md-tertiary-container:        #244C5D;
    --md-on-tertiary-container:     #C1E8FC;
    --md-error:                     #FFB4AB;
    --md-on-error:                  #690005;
    --md-error-container:           #93000A;
    --md-on-error-container:        #FFDAD6;
    --md-background:                #0F1510;
    --md-on-background:             #DEE5DC;
    --md-surface:                   #0F1510;
    --md-on-surface:                #DEE5DC;
    --md-surface-variant:           #404943;
    --md-on-surface-variant:        #C0C9C1;
    --md-surface-tint:              #6DD9A2;
    --md-surf-lowest:               #0A100C;
    --md-surf-low:                  #171D1A;
    --md-surf:                      #1B2220;
    --md-surf-high:                 #262D2A;
    --md-surf-highest:              #313830;
    --md-outline:                   #8A9389;
    --md-outline-variant:           #404943;
    --md-inverse-surface:           #DEE5DC;
    --md-inverse-on-surface:        #2C332E;
    --md-inverse-primary:           #006C46;
    --brand:       var(--md-primary);
    --brand-soft:  var(--md-primary-container);
    --bg:          var(--md-background);
    --surface:     var(--md-surface);
    --line:        var(--md-outline-variant);
    --muted:       var(--md-on-surface-variant);
    --muted-strong: var(--md-on-surface);
    --warm:        var(--md-surf-low);
    --shadow-1:    0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.4);
    --shadow-2:    0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.4);
    --shadow-3:    0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6);
}


/* ==========================================================================
 * 3. BASE
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  font-weight: 400;
  background-color: var(--md-background);
  color: var(--md-on-background);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--md-on-surface);
  line-height: 1.25;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand background (header logo pill) */
.brand-bg { background-color: var(--md-primary) !important; }


/* ==========================================================================
 * 4. TYPOGRAPHY HELPERS (MD3 type scale)
 * ========================================================================== */
.md-display-large   { font-size: 57px; line-height: 64px; letter-spacing: -.25px; font-weight: 400; }
.md-display-medium  { font-size: 45px; line-height: 52px; letter-spacing: 0;      font-weight: 400; }
.md-display-small   { font-size: 36px; line-height: 44px; letter-spacing: 0;      font-weight: 400; }
.md-headline-large  { font-size: 32px; line-height: 40px; letter-spacing: 0;      font-weight: 400; }
.md-headline-medium { font-size: 28px; line-height: 36px; letter-spacing: 0;      font-weight: 400; }
.md-headline-small  { font-size: 24px; line-height: 32px; letter-spacing: 0;      font-weight: 400; }
.md-title-large     { font-size: 22px; line-height: 28px; letter-spacing: 0;      font-weight: 400; }
.md-title-medium    { font-size: 16px; line-height: 24px; letter-spacing: .15px;  font-weight: 500; }
.md-title-small     { font-size: 14px; line-height: 20px; letter-spacing: .1px;   font-weight: 500; }
.md-body-large      { font-size: 16px; line-height: 24px; letter-spacing: .5px;   font-weight: 400; }
.md-body-medium     { font-size: 14px; line-height: 20px; letter-spacing: .25px;  font-weight: 400; }
.md-body-small      { font-size: 12px; line-height: 16px; letter-spacing: .4px;   font-weight: 400; }
.md-label-large     { font-size: 14px; line-height: 20px; letter-spacing: .1px;   font-weight: 500; }
.md-label-medium    { font-size: 12px; line-height: 16px; letter-spacing: .5px;   font-weight: 500; }
.md-label-small     { font-size: 11px; line-height: 16px; letter-spacing: .5px;   font-weight: 500; }

/* Tailwind override helpers — keep semantic heading sizes */
.text-2xl { font-size: 22px !important; line-height: 28px !important; }
.text-xl  { font-size: 19px !important; line-height: 26px !important; }
.text-lg  { font-size: 16px !important; line-height: 24px !important; }
.text-sm  { font-size: 12px !important; line-height: 16px !important; letter-spacing: .4px !important; }
.text-xs  { font-size: 11px !important; line-height: 16px !important; letter-spacing: .5px !important; }
.font-bold { font-weight: 500 !important; }        /* MD3 uses 500 "medium" not 700 bold */
.font-semibold { font-weight: 500 !important; }


/* ==========================================================================
 * 5. CARDS (paper)
 * ========================================================================== */

/* Base card — MD3 Filled Card */
.paper {
  background-color: var(--md-surf-highest);
  border-radius: var(--md-shape-lg);
  border: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--md-dur-short4) var(--md-motion-std);
}

/* Elevated card — MD3 Elevated Card (level 1) */
.paper.card-shadow {
  background-color: var(--md-surf-low);
  box-shadow: var(--md-elev-1);
}

/* Tint overlay for elevation (primary color at 5%) */
.paper.card-shadow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--md-surface-tint);
  opacity: 0.05;
  border-radius: inherit;
  pointer-events: none;
}

/* Hover elevation bump for interactive cards */
.paper.card-shadow:hover {
  box-shadow: var(--md-elev-2);
}

/* Outlined variant (used in some sections) */
.paper.paper-outlined {
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: none;
}
.paper.paper-outlined::before { display: none; }


/* ==========================================================================
 * 6. BUTTONS
 * ========================================================================== */

/* Reset */
button {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--md-shape-full);
  min-height: 40px;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--md-dur-short4) var(--md-motion-std),
    background-color var(--md-dur-short4) var(--md-motion-std);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* State layer pseudo-element */
button::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--md-dur-short3) var(--md-motion-std);
  pointer-events: none;
}
button:hover::after  { opacity: var(--md-hover-op);  }
button:active::after { opacity: var(--md-press-op);  }
button:focus-visible::after { opacity: var(--md-focus-op); }
button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Filled Button (btn-primary) ── */
.btn-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: none;
  padding: 10px 10px 10px 10px;
}
.btn-primary:hover { box-shadow: var(--md-elev-1); }

/* ── Tonal Button (btn-secondary) ── */
.btn-secondary {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  box-shadow: none;
}
.btn-secondary:hover { box-shadow: var(--md-elev-1); }

/* ── Text / Outlined Button (btn-ghost) ── */
.btn-ghost {
  background-color: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
  padding: 9px 23px; /* compensate 1px border */
}
.btn-ghost:hover { border-color: var(--md-primary); }

/* ── Danger / Error Button variant ── */
.btn-danger {
  background-color: var(--md-error);
  color: var(--md-on-error);
}
.btn-danger:hover { box-shadow: var(--md-elev-1); }

/* ── Full width ── */
button.w-full { width: 100%; }

/* Inline link-style buttons (used in history, etc.) */
.btn-link {
  background: transparent;
  border: none;
  color: var(--md-primary);
  padding: 4px 8px;
  border-radius: var(--md-shape-sm);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
}


/* ==========================================================================
 * 7. TEXT FIELDS — Outlined (MD3)
 * ========================================================================== */

/* Label above field */
.label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .4px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  margin-bottom: 6px;
}

/* Input / Select / Textarea */
.input {
  display: block;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .5px;
  font-weight: 400;
  color: var(--md-on-surface);
  background-color: transparent;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  padding: 14px 16px;
  min-height: 52px;
  transition:
    border-color var(--md-dur-short4) var(--md-motion-std),
    box-shadow var(--md-dur-short4) var(--md-motion-std);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.input:hover:not(:focus) { border-color: var(--md-on-surface); }

.input:focus {
  border-color: var(--md-primary);
  border-width: 2px;
  padding: 13px 15px; /* compensate extra 1px */
  box-shadow: none;
}

.input::placeholder { color: var(--md-on-surface-variant); opacity: 1; }

.input:disabled {
  border-color: rgba(29,29,29,.12);
  color: rgba(29,29,29,.38);
  background-color: rgba(29,29,29,.04);
}

/* Select arrow */
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23404943' d='M5 7.5l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Range slider — MD3 */
input[type="range"].input {
  padding: 0;
  min-height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--md-primary);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
input[type="range"].input:focus { border: none; padding: 0; box-shadow: none; }

/* Webkit track */
input[type="range"].input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline-variant);
}
input[type="range"].input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-primary);
  margin-top: -8px;
  box-shadow: var(--md-elev-1);
  transition: background-color var(--md-dur-short3);
}
input[type="range"].input:active::-webkit-slider-thumb {
  background-color: var(--md-primary-container);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-primary) 12%, transparent);
}

/* Firefox track */
input[type="range"].input::-moz-range-track {
  height: 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline-variant);
}
input[type="range"].input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-primary);
  border: none;
  box-shadow: var(--md-elev-1);
}
input[type="range"].input::-moz-range-progress {
  height: 4px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-primary);
}

/* Textarea */
textarea.input {
  resize: vertical;
  min-height: 80px;
}

/* Number inputs */
input[type="number"].input::-webkit-inner-spin-button,
input[type="number"].input::-webkit-outer-spin-button {
  opacity: 0.5;
}

/* Checkbox */
input[type="checkbox"] {
  accent-color: var(--md-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}


/* ==========================================================================
 * 8. CHIPS — Filter Chips (MD3)
 * ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--md-shape-sm);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .1px;
  font-weight: 500;
  background-color: transparent;
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline);
  cursor: pointer;
  transition:
    background-color var(--md-dur-short3) var(--md-motion-std),
    border-color var(--md-dur-short3) var(--md-motion-std),
    color var(--md-dur-short3) var(--md-motion-std);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  min-height: unset;
  box-shadow: none;
}

.chip::after { border-radius: var(--md-shape-sm); }

.chip:hover {
  background-color: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
  border-color: var(--md-on-surface-variant);
}

/* Selected state */
.chip.active {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.chip.active:hover {
  background-color: color-mix(in srgb, var(--md-secondary-container) 92%, var(--md-on-secondary-container) 8%);
}

/* Admin-tab chips & inline tabs */
[data-admin-tab], [data-auth-tab], [data-account-tab], [data-news-tab] {
  /* inherit .chip */
}


/* ==========================================================================
 * 9. BADGES / PILLS
 * ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--md-shape-full);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .5px;
  font-weight: 500;
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.pill.brand {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* Numeric badge (for admin ticket count) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--md-shape-full);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  background-color: var(--md-error);
  color: var(--md-on-error);
}


/* ==========================================================================
 * 10. TOP APP BAR (MD3 — Small)
 * ========================================================================== */
#app-header {
  background-color: var(--md-surf);
  position: sticky;
  top: 0;
  z-index: 30;
  height: 64px;
  border-bottom: none;
  box-shadow: none;
  transition: box-shadow var(--md-dur-med1) var(--md-motion-std);
}

/* Slight tint overlay */
#app-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--md-surface-tint);
  opacity: 0.08;
  pointer-events: none;
}

/* Scrolled state (class added by JS if needed) */
#app-header.scrolled {
  box-shadow: var(--md-elev-2);
}

#app-header > div {
  height: 64px;
  display: flex;
  align-items: center;
}

/* Navigation / title button */
#btn-home-link {
  border-radius: var(--md-shape-md);
  padding: 8px;
  margin: -8px;
  background: transparent;
  border: none;
  color: var(--md-on-surface);
  min-height: unset;
}
#btn-home-link:hover::after  { opacity: var(--md-hover-op); }

/* Icon buttons in app bar */
#btn-news, #btn-admin, #btn-account, #btn-logout {
  background: transparent;
  border: none;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}
#btn-news:hover::after,
#btn-admin:hover::after,
#btn-account:hover::after,
#btn-logout:hover::after { opacity: var(--md-hover-op); }

/* Theme toggle button */
#btn-theme-toggle {
  background: transparent;
  border: none;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}
#btn-theme-toggle:hover::after { opacity: var(--md-hover-op); }

/* Afficher soleil ou lune selon le thème actif */
#btn-theme-toggle .icon-sun  { display: none; }
#btn-theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] #btn-theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] #btn-theme-toggle .icon-moon { display: none; }

/* News dot */
.news-btn-wrap { position: relative; display: inline-flex; }
.news-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-error);
  border: 2px solid var(--md-surf);
  pointer-events: none;
}


/* ==========================================================================
 * 11. STEPPER (onboarding)
 * ========================================================================== */
#stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-outline-variant);
  transition: all var(--md-dur-med1) var(--md-motion-std);
  flex-shrink: 0;
}

.step-dot.active {
  width: 24px;
  background-color: var(--md-primary);
  border-radius: 4px;
}

.step-dot.done {
  background-color: var(--md-primary);
}

/* Connector line between dots */
.step-line {
  flex: 1;
  min-width: 8px;
  max-width: 20px;
  height: 2px;
  background-color: var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  transition: background-color var(--md-dur-med1) var(--md-motion-std);
}
.step-line.done { background-color: var(--md-primary); }


/* Password strength */
.pwd-strength {
  height: 4px;
  border-radius: var(--md-shape-full);
  margin-top: 6px;
  background-color: var(--md-outline-variant);
  overflow: hidden;
  position: relative;
}
.pwd-strength::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  transition: width var(--md-dur-med1) var(--md-motion-std), background-color var(--md-dur-short4);
}
.pwd-strength.weak::after   { width: 33%;  background-color: var(--md-error); }
.pwd-strength.medium::after { width: 66%;  background-color: #F4A723; }
.pwd-strength.strong::after { width: 100%; background-color: #1B6B45; }


/* ==========================================================================
 * 12. CHAT
 * ========================================================================== */
#chat-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

/* Message bubble */
.msg {
  display: flex;
  gap: 12px;
  max-width: 85%;
}
.msg.user  { flex-direction: row-reverse; align-self: flex-end; }
.msg.assistant { align-self: flex-start; }

.msg-bubble {
  padding: 12px 16px;
  border-radius: var(--md-shape-lg);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
}

.msg.user .msg-bubble {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-bottom-right-radius: var(--md-shape-xs);
}

.msg.assistant .msg-bubble {
  background-color: var(--md-surf-highest);
  color: var(--md-on-surface);
  border-bottom-left-radius: var(--md-shape-xs);
}

/* Typing indicator */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background-color: var(--md-surf-highest);
  border-radius: var(--md-shape-lg);
  border-bottom-left-radius: var(--md-shape-xs);
}
.typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--md-outline);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-8px); }
}

/* Chat input area */
#chat-input-area {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--md-outline-variant);
}

#chat-input {
  flex: 1;
  resize: none;
  border-radius: var(--md-shape-xl);
  padding: 12px 16px;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
}

/* Markdown inside bubbles */
.msg-bubble p  { margin-bottom: 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; margin-top: 12px; }
.msg-bubble h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; margin-top: 8px; }
.msg-bubble ul, .msg-bubble ol { padding-left: 20px; margin-bottom: 8px; }
.msg-bubble li { margin-bottom: 4px; }
.msg-bubble strong { font-weight: 500; }
.msg-bubble code  { font-family: monospace; font-size: 12px; background-color: rgba(0,0,0,0.08); padding: 1px 4px; border-radius: 4px; }
.msg-bubble hr { border: none; border-top: 1px solid var(--md-outline-variant); margin: 12px 0; }


/* ==========================================================================
 * 13. LOADER GÉNÉRATION
 * ========================================================================== */
#loading-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--md-scrim);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-card {
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  padding: 32px 40px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: var(--md-elev-3);
  animation: dialog-enter var(--md-dur-med2) var(--md-motion-decel);
}

/* Gen-loader (spinner utilisé dans la modale de génération rapide) */
.gen-loader {
  width: 48px;
  height: 48px;
  border: 4px solid var(--md-outline-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: gen-spin 0.9s linear infinite;
}
@keyframes gen-spin {
  to { transform: rotate(360deg); }
}

/* MD3 Circular Progress Indicator */
.md-progress-circular {
  width: 48px;
  height: 48px;
  position: relative;
}
.md-progress-circular svg {
  transform: rotate(-90deg);
  width: 48px; height: 48px;
}
.md-progress-circular circle {
  fill: none;
  stroke: var(--md-primary);
  stroke-width: 4;
  stroke-dasharray: 120;
  animation: circular-progress 1.5s linear infinite;
  stroke-linecap: round;
}
@keyframes circular-progress {
  0%   { stroke-dashoffset: 120; transform: rotate(0deg); }
  50%  { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 120; transform: rotate(360deg); }
}

/* MD3 Linear Progress */
.md-progress-linear {
  width: 100%;
  height: 4px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-secondary-container);
  overflow: hidden;
  position: relative;
}
.md-progress-linear::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -50%;
  width: 50%;
  background-color: var(--md-primary);
  border-radius: inherit;
  animation: linear-progress 1.5s ease-in-out infinite;
}
@keyframes linear-progress {
  0%   { left: -50%; }
  100% { left: 150%; }
}


/* ==========================================================================
 * 14. SNACKBAR (toasts — MD3)
 * ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 288px;
  max-width: 560px;
  padding: 14px 16px;
  border-radius: var(--md-shape-xs);
  background-color: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  font-weight: 400;
  box-shadow: var(--md-elev-3);
  pointer-events: all;
  animation: snackbar-enter var(--md-dur-med1) var(--md-motion-decel);
}

.toast.success .toast-action,
.toast.error   .toast-action {
  color: var(--md-inverse-primary);
  font-weight: 500;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  min-height: unset;
  font-size: 14px;
  letter-spacing: .1px;
}
.toast.error { background-color: var(--md-error-container); color: var(--md-on-error-container); }

@keyframes snackbar-enter {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Big toast (bigToast — MD3 Dialog-like) */
.big-toast {
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  padding: 24px;
  animation: dialog-enter var(--md-dur-med2) var(--md-motion-decel);
}

@keyframes dialog-enter {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}


/* ==========================================================================
 * 15. APP MODAL (showAppModal — .app-modal-overlay / .app-modal)
 * ========================================================================== */

/* Overlay / backdrop */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--md-scrim);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Dialog container */
.app-modal {
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  animation: dialog-enter var(--md-dur-med2) var(--md-motion-decel);
}

/* Large variant (news modal) */
.app-modal.large { max-width: 600px; }

/* Emoji header */
.app-modal .emoji {
  font-size: 40px;
  text-align: center;
  margin-bottom: 12px;
  display: block;
}

/* Title */
.app-modal > h3,
.app-modal h3:first-of-type {
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 16px;
  color: var(--md-on-surface);
  line-height: 28px;
}

/* Body */
.app-modal .body {
  font-size: 14px;
  color: var(--md-on-surface-variant);
  line-height: 20px;
}

/* Footer / actions */
.app-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Release notes — Changelog */
.release-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.release-entry {}

.release-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.release-version {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-primary);
}

.release-date {
  font-size: 12px;
  color: var(--md-on-surface-variant);
}

.release-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--md-shape-full);
  font-size: 11px;
  font-weight: 500;
  background-color: var(--md-error);
  color: var(--md-on-error);
}

.release-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.release-items li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--md-on-surface);
}

.release-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.release-tag.new     { background-color: var(--md-primary-container);   color: var(--md-on-primary-container); }
.release-tag.fix     { background-color: var(--md-error-container);      color: var(--md-on-error-container); }
.release-tag.improve { background-color: var(--md-tertiary-container);   color: var(--md-on-tertiary-container); }

/* Roadmap status pills */
.roadmap-status-planned    { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.roadmap-status-in_progress { background-color: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.roadmap-status-done       { background-color: var(--md-primary-container);   color: var(--md-on-primary-container); }


/* ==========================================================================
 * 16b. FAB + PANNEAU SUPPORT (MD3 FAB)
 * ========================================================================== */
#support-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

#support-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-3);
  padding: 0;
  font-size: 20px;
  border: none;
  flex-shrink: 0;
  transition:
    box-shadow var(--md-dur-short4) var(--md-motion-std),
    background-color var(--md-dur-short4);
}
#support-fab:hover {
  box-shadow: var(--md-elev-4);
  background-color: color-mix(in srgb, var(--md-primary-container) 92%, var(--md-on-primary-container) 8%);
}

#support-panel {
  width: 320px;
  max-width: calc(100vw - 48px);
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  padding: 20px;
  animation: panel-in var(--md-dur-med1) var(--md-motion-decel);
  transform-origin: bottom right;
}

@keyframes panel-in {
  from { transform: scale(0.8) translateY(16px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

@media (max-width: 480px) {
  #support-widget { bottom: 16px; right: 16px; }
  #support-panel  { width: calc(100vw - 32px); }
}


/* ==========================================================================
 * 16. MODAL / DIALOG (MD3)
 * ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--md-scrim);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-dialog {
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  animation: dialog-enter var(--md-dur-med2) var(--md-motion-decel);
}

/* App modal generic (used by showAppModal) */
#app-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--md-scrim);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#app-modal {
  background-color: var(--md-surf-high);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  width: 100%;
  max-width: 480px;
  padding: 24px;
  animation: dialog-enter var(--md-dur-med2) var(--md-motion-decel);
}
#app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}


/* ==========================================================================
 * 17. HISTORIQUE — History cards
 * ========================================================================== */
.history-item {
  background-color: var(--md-surf-low);
  border-radius: var(--md-shape-lg);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow var(--md-dur-short4) var(--md-motion-std);
  position: relative;
  overflow: hidden;
}
.history-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--md-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-dur-short3);
}
.history-item:hover::after { opacity: var(--md-hover-op); }
.history-item:hover { box-shadow: var(--md-elev-1); }


/* ==========================================================================
 * 18. HOME MODE CARDS
 * ========================================================================== */
.home-mode-card {
  transition:
    transform var(--md-dur-short4) var(--md-motion-std),
    box-shadow var(--md-dur-short4) var(--md-motion-std);
}
.home-mode-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-elev-2);
}


/* ==========================================================================
 * 19. ICÔNES SVG
 * ========================================================================== */
.icon-sm  { width: 18px;  height: 18px;  flex-shrink: 0; display: block; }
.icon-md  { width: 22px;  height: 22px;  flex-shrink: 0; display: block; }
.icon-lg  { width: 28px;  height: 28px;  flex-shrink: 0; display: block; }
.icon-xl  { width: 36px;  height: 36px;  flex-shrink: 0; display: block; }
.icon-header-logo { overflow: hidden; }
.icon-card-wrap   { overflow: hidden; }


/* ==========================================================================
 * 20. UTILITAIRES
 * ========================================================================== */
.hidden { display: none !important; }
.no-print { /* base — visible en écran */ }
.print-only { display: none; }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }

.scroll-fade::-webkit-scrollbar { width: 8px; }
.scroll-fade::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--md-shape-full);
}

/* CO2 / chip colors in deliverables */
.co2-green  { color: #006C46; }
.co2-orange { color: #B85C00; }
.co2-red    { color: var(--md-error); }

/* Verify badge inline pill */
#verify-badge {
  background-color: var(--md-error-container);
  color: var(--md-on-error-container);
}

/* Inline banner helpers */
.alert-warning {
  background-color: #FFF8E1;
  color: #4A3500;
  border-radius: var(--md-shape-md);
  padding: 12px 16px;
}
@media (prefers-color-scheme: dark) {
  .alert-warning { background-color: #3A2E00; color: #FFDF80; }
}

/* Sticky chat header */
.chat-sticky-header {
  position: sticky;
  top: 64px;
  z-index: 20;
  background-color: var(--md-surf);
  padding: 8px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

/* Progress bar (chat — plats validés) */
.chat-progress-bar {
  height: 4px;
  border-radius: var(--md-shape-full);
  background-color: var(--md-secondary-container);
  overflow: hidden;
}
.chat-progress-bar-fill {
  height: 100%;
  background-color: var(--md-primary);
  border-radius: inherit;
  transition: width var(--md-dur-med2) var(--md-motion-std);
}


/* ==========================================================================
 * 21. PRINT / PDF
 * ========================================================================== */
@media print {
  body { background: #fff; color: #000; font-size: 12px; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  #app-header, #support-widget { display: none !important; }
  .paper { box-shadow: none !important; border: 1px solid #ddd !important; }
  .btn-primary, .btn-secondary, .btn-ghost { display: none !important; }
  a { color: #000; }
  @page { margin: 1cm; }
}