/* =====================================================================
   design-system.css — surfaces patient authentifiées (dashboard + carte)
   ---------------------------------------------------------------------
   Source de vérité des tokens : le design system ElephaCare
   (ds-bundle/tokens/tokens.css), lui-même dérivé de public/css/critical.css
   (la page d'urgence, contrastée et vérifiée). Les valeurs canoniques sont
   reprises ici pour rendre CE fichier autonome (dashboard.html /
   carte-imprimable.html ne chargent que lui).

   Registre « plus calme » que la fiche d'urgence (guidelines/emergency-ux.md) :
   c'est le côté patient. On garde les règles dures : base ≥ 18px, cibles
   tactiles ≥ 56px sur les actions, contraste ≥ 7:1 sur le texte critique,
   jamais la couleur seule (icône + texte pour les alertes).
   ===================================================================== */

:root {
  /* Couleurs canoniques (contraste noté sur blanc #ffffff) */
  --c-text:    #111827;   /* texte principal      ~16:1 */
  --c-text-2:  #374151;   /* texte secondaire     ~10:1 (≥ 7:1) */
  --c-bg:      #ffffff;   /* fond des panneaux */
  --c-app-bg:  #f3f4f6;   /* fond de page (app) */
  --c-danger:  #991b1b;   /* rouge allergies/danger — blanc dessus ~8.3:1 */
  --c-call:    #065f46;   /* vert appel/succès      — blanc dessus ~7.7:1 */
  --c-primary: #1e40af;   /* bleu action            — blanc dessus ~8.3:1 */
  --c-border:  #d1d5db;
  --c-focus:   #1d4ed8;

  /* Typographie — font-stack SYSTÈME uniquement (aucune font externe) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-base: 18px;

  --space:  1rem;
  --radius: 12px;
  --tap:    56px;

  /* Alias hérités de style.css (compat) */
  --font-base: var(--font);
  --tap-min:   var(--tap);
  --c-muted:   var(--c-text-2);
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit TOUJOURS l'emporter sur un display de classe
   (ex. .banner-warn{display:flex}) — sinon le JS qui fait el.hidden = true
   reste sans effet et l'élément s'affiche en permanence. Idem style.css. */
[hidden] { display: none !important; }

html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-app-bg);
  line-height: 1.5;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.icon { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Chrome : barre supérieure + pied ---------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 48rem; margin: 0 auto; padding: 1rem var(--space);
}
.topbar h1 { font-size: 1.5rem; margin: 0; }
.site-footer {
  max-width: 48rem; margin: 1.5rem auto 3rem; padding: 1rem var(--space);
  color: var(--c-text-2); font-size: .95rem;
}
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer a { color: var(--c-text-2); }

/* --- Enveloppe + panneaux ---------------------------------------------- */
.wrap { max-width: 48rem; margin: 0 auto; padding: 0 var(--space) var(--space); }

.panel {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
.panel > h2 {
  font-size: 1.2rem; margin: 0 0 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--c-border);
}
.panel-hint { color: var(--c-text-2); font-size: .95rem; margin: 0 0 1rem; }

/* --- Formulaires ------------------------------------------------------- */
.field { margin: 0 0 1rem; }
.field label, .field > .label {
  display: block; font-weight: 700; margin: 0 0 .35rem;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="password"], select, textarea {
  width: 100%; font: inherit; color: var(--c-text);
  padding: .6rem .7rem; min-height: 48px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: 10px;
}
textarea { min-height: 5rem; resize: vertical; }
.hint { color: var(--c-text-2); font-size: .9rem; margin: .35rem 0 0; }

/* Ligne « case + libellé » (photo publique, maladie vitale, consentement) */
.check-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .4rem 0; cursor: pointer;
}
.check-row input[type="checkbox"] { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin-top: .1rem; }

/* Choix segmenté (affichage du nom : complet / initiale) */
.segmented { display: flex; gap: .5rem; flex-wrap: wrap; }
.segmented label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border: 1px solid var(--c-border);
  border-radius: 999px; cursor: pointer; font-weight: 600;
}
.segmented input { accent-color: var(--c-primary); }

/* --- Boutons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .6rem 1.2rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-call    { background: var(--c-call);    color: #fff; }
.btn-danger  { background: #fff; color: var(--c-danger); border-color: var(--c-danger); }
.btn-ghost   { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.btn-sm { min-height: 40px; padding: .35rem .8rem; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

.linklike {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--c-primary); text-decoration: underline; cursor: pointer;
}

/* --- Messages d'état (data-kind) --------------------------------------- */
.msg { margin: 0 0 .75rem; min-height: 1.2em; font-weight: 600; }
.msg[data-kind="error"]   { color: var(--c-danger); }
.msg[data-kind="success"] { color: var(--c-call); }
.msg[data-kind="info"]    { color: var(--c-text-2); font-weight: 400; }
.msg:empty { margin: 0; min-height: 0; }

/* --- Bandeau d'alerte (icône + texte, jamais la couleur seule) --------- */
.banner-warn {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #fef2f2; color: var(--c-danger);
  border: 1px solid var(--c-danger); border-radius: var(--radius);
  padding: .9rem 1rem; margin: 0 0 1.25rem; font-weight: 600;
}
.banner-warn .icon { flex: 0 0 auto; color: var(--c-danger); }

/* --- Listes (contacts / traitements) ----------------------------------- */
.rows { list-style: none; margin: 0 0 1rem; padding: 0; }
.row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--c-border);
}
.row:first-child { border-top: 0; }
.row-main { min-width: 0; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
.row-sub { color: var(--c-text-2); font-size: .95rem; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; }
.empty { color: var(--c-text-2); font-style: italic; margin: 0 0 1rem; }

.badge {
  display: inline-block; font-size: .8rem; font-weight: 700;
  color: var(--c-call); background: #ecfdf5;
  border: 1px solid var(--c-call); border-radius: 999px;
  padding: .1rem .55rem; margin-left: .4rem;
}

/* Éditeur de maladies (label + case « vitale ») */
.maladie-row { display: flex; gap: .6rem; align-items: center; margin: 0 0 .6rem; }
.maladie-row input[type="text"] { flex: 1 1 auto; }
.maladie-row .vitale {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .9rem; color: var(--c-text-2);
}
.maladie-row .vitale input { width: 1.3rem; height: 1.3rem; accent-color: var(--c-danger); }

/* Sous-formulaire d'ajout */
.add-form { border-top: 1px dashed var(--c-border); padding-top: 1rem; margin-top: .5rem; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 32rem) { .add-grid { grid-template-columns: 1fr; } }

/* --- Photo ------------------------------------------------------------- */
.photo-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.photo-preview {
  width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; background: #e5e7eb;
  border: 1px solid var(--c-border);
}

/* --- Panneau QR -------------------------------------------------------- */
.qr-panel { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.qr-holder {
  flex: 0 0 auto; background: #fff; padding: .75rem;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  line-height: 0;
}
.qr-holder canvas, .qr-holder img { width: 240px; height: 240px; display: block; }
.qr-side { flex: 1 1 16rem; min-width: 14rem; }
.qr-url {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .85rem; color: var(--c-text-2); overflow-wrap: anywhere;
  background: var(--c-app-bg); border-radius: 8px; padding: .5rem .6rem; margin: .25rem 0 1rem;
}

/* --- Journal des accès ------------------------------------------------- */
.journal { list-style: none; margin: 0; padding: 0; }
.journal-item { padding: .75rem 0; border-top: 1px solid var(--c-border); }
.journal-item:first-child { border-top: 0; }
.journal-when { font-weight: 700; }
.journal-meta { color: var(--c-text-2); font-size: .9rem; overflow-wrap: anywhere; }

/* =====================================================================
   CARTE IMPRIMABLE — format carte bancaire 85,6 × 54 mm (C.4)
   Aperçu écran : deux faces empilées. Impression : 1 face par page,
   dimensions physiques exactes, couleurs forcées (print-color-adjust).
   ===================================================================== */
.carte-toolbar { max-width: 48rem; margin: 0 auto 1rem; padding: 1rem var(--space);
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.carte-stack { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; padding-bottom: 3rem; }

.carte-face {
  width: 85.6mm; height: 54mm; box-sizing: border-box;
  background: #fff; color: #000;
  border: 1px solid var(--c-border); border-radius: 3.5mm;
  padding: 4mm; overflow: hidden; position: relative;
}

/* Recto : QR + instruction */
.carte-recto { display: flex; align-items: center; gap: 4mm; }
.carte-qr { flex: 0 0 auto; line-height: 0; }
.carte-qr canvas, .carte-qr img { width: 40mm; height: 40mm; display: block; }
.carte-recto-txt { min-width: 0; }
.carte-instruction { font-weight: 800; font-size: 3.6mm; line-height: 1.15; text-transform: uppercase; }
.carte-brand { margin-top: 2mm; font-weight: 700; font-size: 3mm; }
.carte-url { color: #374151; font-size: 2.8mm; }

/* Verso : gravure fallback (Nom · Groupe · Allergie · Contact) */
.carte-verso { display: flex; flex-direction: column; }
.carte-verso-title { font-weight: 800; font-size: 3mm; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: .4mm solid #000; padding-bottom: 1mm; margin-bottom: 1.5mm; }
.carte-name { font-weight: 800; font-size: 3.8mm; line-height: 1.15; margin-bottom: 1.5mm; overflow-wrap: anywhere; }
.carte-line { display: flex; gap: 2mm; font-size: 3.2mm; line-height: 1.3; margin-bottom: .8mm; }
.carte-line .k { font-weight: 800; flex: 0 0 22mm; }
.carte-line .v { overflow-wrap: anywhere; }
.carte-line.allergy .v { color: #991b1b; font-weight: 800; }
.carte-foot { margin-top: auto; font-size: 2.6mm; color: #374151; }

@media print {
  @page { margin: 8mm; }
  body { background: #fff; }
  .carte-toolbar, .site-footer, .no-print { display: none !important; }
  .carte-stack { gap: 0; padding: 0; }
  .carte-face {
    border: .3mm solid #000; border-radius: 3.5mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    page-break-after: always; break-after: page;
  }
  .carte-face:last-child { page-break-after: auto; break-after: auto; }
}