/* ============================================================
   Dnadaweb — Système de design partagé
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Neutres chauds (crème) */
  --creme-25:  #FDFAF4;
  --creme-50:  #FAF4EA;
  --creme-75:  #F7EEDF;
  --creme-100: #F1E5D3;

  /* Sauge — signature */
  --sauge-100: #D8EBE4;
  --sauge-200: #B4D9CE;
  --sauge-300: #8CC4B5;
  --sauge-400: #62AC9B;
  --sauge-500: #4E9C87;
  --sauge-600: #398270;
  --sauge-700: #2A6B58;
  --sauge-800: #1E5245;
  --sauge-900: #173E33;
  --mint-50:   #EAF4EE;
  --sauge-tint: #EAF4EE;

  /* Accents */
  --framboise-100: #F3DDE1;
  --framboise-500: #B04A5C;
  --framboise-600: #9C3E51;
  --ambre-50:  #FBF3E2;
  --ambre-100: #F6E8CE;
  --ambre-700: #8A6A2F;

  /* Réseaux (brand-locked, on ne touche pas) */
  --fb: #1877F2;
  --ig: #E1306C;
  --li: #0077B5;

  /* Encres */
  --encre-900: #23262B;
  --encre-700: #3A3F46;
  --encre-500: #5C646D;
  --encre-400: #8A929B;
  --encre-300: #B6BCC3;
  --blanc:     #FFFFFF;
  --ligne:       rgba(23,62,51,.10);
  --ligne-creme: rgba(138,106,47,.14);

  /* États */
  --success-bg: #DDF0E7;
  --success-bd: var(--sauge-200);
  --success-tx: var(--sauge-700);
  --warn-bg:    var(--ambre-100);
  --warn-bd:    var(--ambre-100);
  --warn-tx:    var(--ambre-700);
  --danger:     var(--framboise-500);

  /* Typographie */
  --font-sans:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", "Brush Script MT", cursive;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --sans:   var(--font-sans);
  --script: var(--font-script);
  --mono:   var(--font-mono);

  /* Rayons */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 999px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --pill: 999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(23,62,51,.05), 0 1px 3px rgba(23,62,51,.07);
  --shadow-md: 0 6px 16px rgba(23,62,51,.09), 0 2px 5px rgba(23,62,51,.05);
  --shadow-lg: 0 20px 48px rgba(23,62,51,.16), 0 6px 16px rgba(23,62,51,.08);
  --shadow-cta:   0 6px 20px -4px rgba(176,74,92,.35);
  --shadow-sauge: 0 6px 20px -4px rgba(78,156,135,.35);
}

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

body {
  font-family: var(--font-sans);
  background: var(--creme-50);
  color: var(--encre-700);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Typographie ---- */
.eyebrow {
  font-family: var(--font-script);
  font-size: 24px;
  color: var(--sauge-500);
  line-height: 1;
  font-weight: 500;
}
.script { font-family: var(--font-script); font-weight: 600; }
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--encre-900);
}
.t-h1 { font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--encre-900); }
.t-h2 { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--encre-900); }
.t-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-500);
}

/* ---- Header décoratif (bandeau hero des pages) ---- */
.vr-hero {
  background:
    radial-gradient(700px 280px at 92% 20%, var(--ambre-100) 0%, transparent 60%),
    radial-gradient(620px 260px at 10% 30%, var(--sauge-300) 0%, transparent 60%),
    var(--creme-75);
  padding: 32px 24px 28px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--creme-100);
}
.vr-hero .eyebrow { margin-bottom: 4px; display: block; }

/* ---- Status dot ---- */
.dot-live {
  width: 7px; height: 7px;
  background: var(--sauge-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(78,156,135,.18);
  animation: pulseLive 2.4s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 4px rgba(78,156,135,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(78,156,135,0); }
}

/* ---- Pills & chips ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--creme-100);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-700);
  backdrop-filter: blur(6px);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blanc);
  border: 1px solid var(--ligne-creme);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre-700);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .15s ease;
}
.chip:hover { border-color: var(--sauge-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.chip svg { flex: none; color: var(--sauge-600); }
.chip-accent svg { color: var(--framboise-500); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
  line-height: 1;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary    { background: var(--sauge-500); color: #fff; box-shadow: var(--shadow-sauge); }
.btn-primary:hover    { background: var(--sauge-600); }
.btn-secondary  { background: var(--framboise-500); color: #fff; box-shadow: var(--shadow-cta); }
.btn-secondary:hover  { background: var(--framboise-600); }
.btn-ghost      { background: transparent; color: var(--encre-900); border-color: var(--creme-100); }
.btn-ghost:hover{ background: var(--creme-75); border-color: var(--creme-100); }
.btn-dark       { background: var(--encre-900); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline    { background: transparent; color: var(--sauge-700); border: 1.5px solid var(--sauge-300); }
.btn-outline:hover { background: var(--sauge-100); border-color: var(--sauge-500); }
.btn-framboise  { background: var(--framboise-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn-framboise:hover { background: var(--framboise-600); }

.btn-block { display: flex; width: 100%; padding: 15px 22px; font-size: 15px; }
.btn-sm { font-size: 13.5px; padding: 8px 18px; }
.btn-md { font-size: 15px; padding: 11px 24px; }
.btn-lg { font-size: 16px; padding: 14px 30px; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--pill); }

/* ---- Cartes ---- */
.card {
  background: var(--blanc);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ligne);
  overflow: hidden;
}
.card-hover { transition: all .18s ease; }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---- Champs de saisie ---- */
.field {
  width: 100%;
  border: 1px solid var(--creme-100);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--encre-900);
  background: var(--blanc);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.field:focus {
  border-color: var(--sauge-500);
  box-shadow: 0 0 0 4px rgba(78,156,135,.14);
}
.field::placeholder { color: var(--encre-500); }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-500);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--encre-900);
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.input::placeholder { color: var(--encre-400); }
.input:focus { border-color: var(--sauge-500); box-shadow: 0 0 0 3px var(--sauge-100); }

/* ---- Badges & tags ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--pill);
}
.badge-publie    { background: #DDF0E7; color: var(--sauge-700); }
.badge-brouillon { background: var(--ambre-100); color: var(--ambre-700); }
.badge-bientot   { background: var(--ambre-50); color: var(--ambre-700); border: 1px solid var(--ligne-creme); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--encre-500);
  background: rgba(23,62,51,.06);
  padding: 3px 12px;
  border-radius: var(--pill);
}
.tag-sauge { background: var(--sauge-100); color: var(--sauge-700); }

/* ---- Contrôle segmenté ---- */
.seg {
  display: inline-flex;
  background: rgba(23,62,51,.06);
  border-radius: var(--pill);
  padding: 4px;
  gap: 2px;
}
.seg button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--encre-500);
  padding: 9px 22px;
  border-radius: var(--pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
}
.seg button.on { background: var(--blanc); color: var(--sauge-700); box-shadow: var(--shadow-sm); }
.seg button:not(.on):hover { color: var(--encre-700); }

/* ---- Avatar & tuiles d'icônes ---- */
.avatar {
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), var(--shadow-md);
}

.icontile {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tile-sauge     { background: var(--sauge-100); color: var(--sauge-700); }
.tile-creme     { background: var(--creme-75); color: var(--ambre-700); }
.tile-framboise { background: var(--framboise-100); color: var(--framboise-600); }
.tile-mint      { background: var(--mint-50); color: var(--sauge-600); }
.tile-gris      { background: rgba(23,62,51,.07); color: var(--encre-500); }

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Helpers ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

/* ---- Décor géométrique ---- */
.deco-circle { position: absolute; border-radius: 50%; pointer-events: none; }