:root {
  --color-bg: #f7ecd6;
  --color-bg-deep: #efdcb3;
  --color-ink: #26323a;
  --color-ink-soft: #55615f;
  --color-sun: #e8622c;
  --color-sun-dark: #c24e21;
  --color-mustard: #e0a438;
  --color-teal: #2f7a73;
  --color-teal-dark: #1f5951;
  --color-brick: #8c3a2b;
  --color-card-bg: #fffaf0;
  --color-border: #e8d4ad;
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-display); }

header { background: var(--color-ink); color: #fdf6e8; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
header h1 { font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.header-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.header-actions select { padding: 5px 8px; border-radius: 4px; border: none; font-family: var(--font-body); }

/* Statut de connexion (demande développeur, 2026-10-04) — même indicateur que app.html. */
.auth-status { display: flex; align-items: center; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #8a8f94; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); }
.status-dot.status-dot-online { background: #4CAF50; }

main { max-width: 720px; margin: 24px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 24px; }

.card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 4px; padding: 22px; box-shadow: 0 6px 0 rgba(140, 90, 40, .05); }
.card h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink); margin-bottom: 16px; }

.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); }
.form-row input, .form-row select, .form-row textarea { padding: 9px 11px; border: 1.5px solid var(--color-border); border-radius: 4px; font-size: 13px; font-family: var(--font-body); background: #fffefb; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-sun); box-shadow: 0 0 0 3px rgba(232, 98, 44, .14); }

.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 38px; }
.btn-toggle-password { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 8px; border-radius: 3px; color: var(--color-ink-soft); }
.btn-toggle-password:hover { color: var(--color-ink); }
.btn-toggle-password[aria-pressed="true"] { color: var(--color-teal-dark); }
.form-row textarea { min-height: 80px; resize: vertical; }

.btn { padding: 10px 18px; border: none; border-radius: 3px; font-size: 13px; font-weight: 700; font-family: var(--font-body); cursor: pointer; background: var(--color-sun); color: #fff8ec; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 3px 0 var(--color-sun-dark); }
.btn:hover { background: var(--color-sun-dark); transform: translateY(1px); box-shadow: 0 2px 0 var(--color-sun-dark); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--color-sun-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--color-teal); box-shadow: 0 3px 0 var(--color-teal-dark); }
.btn-secondary:hover { background: var(--color-teal-dark); box-shadow: 0 2px 0 var(--color-teal-dark); }

.feedback { font-size: 12px; margin-top: 8px; padding: 9px 10px; border-radius: 3px; }
.feedback.success { background: #e3efda; color: #3c6128; }
.feedback.error { background: #f6e1da; color: #953623; }

.suggestion-item { border: 1px solid var(--color-border); border-radius: 4px; padding: 14px; margin-bottom: 10px; background: var(--color-card-bg); }
.suggestion-item .meta { font-size: 11px; color: var(--color-ink-soft); margin-bottom: 4px; }
.suggestion-item .title { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--color-ink); }
.suggestion-item .content { font-size: 12px; color: var(--color-ink-soft); margin-bottom: 6px; }
.status-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 9px; text-transform: uppercase; letter-spacing: .3px; }
.status-pending { background: #f7e7c4; color: #91550a; }
.status-reviewed { background: #d9e6ea; color: #1f5961; }
.status-resolved { background: #e3efda; color: #3c6128; }
.status-rejected { background: #f6e1da; color: #953623; }

.response { background: #f3e9d2; border-left: 3px solid var(--color-sun); padding: 9px 11px; margin-top: 8px; font-size: 12px; }

.admin-controls { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.admin-controls textarea { flex: 1; min-width: 200px; }

#login-section { max-width: 360px; margin: 60px auto; }
[hidden] { display: none !important; }

/* Vue adaptée smartphone & tablette (demande explicite du développeur, 2026-10-04) — base
   partagée par index.html/help.html/suggestions.html (ce fichier est chargé en premier sur les
   trois). Pilotée par détection explicite du type de client (js/device-detect.js, attribut
   data-client posé sur <html> avant tout rendu), pas par la seule largeur de fenêtre : la
   version PC (html[data-client="desktop"]) reste strictement inchangée. Le layout ici est déjà
   fluide par construction (une colonne, grilles auto-fit, header en flex-wrap) : resserrement
   ciblé plutôt que restructuration. */
html[data-client="mobile"], html[data-client="tablet"] {
  & header { padding:12px 16px; gap:8px; }
  /* Padding horizontal de `main` volontairement inchangé (16px) : landing.css (.hero,
     .android-section) compense exactement cette valeur via margin:0 -16px pour "bord à bord" —
     y toucher ici créerait un débordement horizontal de quelques pixels (constaté en testant
     avant ce commentaire). */
  & main { margin:16px auto; gap:18px; }
  & .card { padding:16px; }
  /* Largeur minimale pensée pour desktop : déborderait sur un petit téléphone en portrait. */
  & .admin-controls textarea { min-width:0; }
}

/* Resserrement supplémentaire pour les très petits écrans de téléphone (sous-réglage à
   l'intérieur même de la détection "mobile" ci-dessus, pas un critère de détection à part). */
@media (max-width:420px) {
  html[data-client="mobile"] header h1 { font-size:16px; }
  html[data-client="mobile"] .header-actions { gap:8px; font-size:11px; }
}