/* ============================================================
   Hexagone Confluence — base commune (couleurs, textes, boutons)
   Toutes les couleurs sont ici : on change une variable, tout suit.
   ============================================================ */
:root {
  --nuit: #0E1A2B;
  --nuit-2: #182A42;
  --nuit-3: #22344C;
  --nuit-texte: #C3CBD6;
  --nuit-texte-2: #8D99AA;
  --ivoire: #F6F4EF;
  --ivoire-2: #F1EEE7;
  --ivoire-3: #FBFAF7;
  --blanc: #FFFFFF;
  --encre: #14202E;
  --texte-2: #3A4350;
  --texte-3: #4A525E;
  --muted: #5B6472;
  --trait: #E4E0D6;
  --trait-2: #EFECE4;
  --trait-champ: #D9D4C7;
  --cuivre: #A3581F;
  --cuivre-fonce: #7E4214;
  --cuivre-clair: #F4E6D8;
  --cuivre-pale: #FBF4EC;
  --cuivre-vif: #E0A370;
  --vert: #2A5F46;   --vert-f: #E3EFE8;
  --bleu: #244271;   --bleu-f: #E3EAF4;
  --canard: #1F5E57; --canard-f: #DDEEEC;
  --ambre: #744B00;  --ambre-f: #FBEFD5;
  --rouge: #932C25;  --rouge-f: #F8E1DE;
  --violet: #4F3F80; --violet-f: #ECE8F5;
  --gris: #4A525E;   --gris-f: #ECEAE4;
  --police-titre: 'Fraunces', Georgia, serif;
  --police: 'Manrope', system-ui, sans-serif;
  --rayon: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cuivre); text-decoration: none; }
a:hover { color: var(--cuivre-fonce); }
img, svg { display: block; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

.serif { font-family: var(--police-titre); font-weight: 500; letter-spacing: -0.015em; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lbl-cuivre { color: var(--cuivre); }
.muted { color: var(--muted); }
.gras { font-weight: 800; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 10px;
  font: 700 14px var(--police); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }
.btn-plein { width: 100%; }
.btn-nuit, a.btn-nuit:hover { background: var(--nuit); color: #fff; }
.btn-cuivre, a.btn-cuivre:hover { background: var(--cuivre); color: #fff; }
.btn-clair, a.btn-clair:hover { background: #fff; color: var(--encre); border-color: var(--trait-champ); }
.btn-danger, a.btn-danger:hover { background: #fff; color: var(--rouge); border-color: #E9C3BE; }
.btn-blanc, a.btn-blanc:hover { background: #fff; color: var(--nuit); }
.btn-contour-nuit, a.btn-contour-nuit:hover { background: transparent; color: #fff; border-color: #34465F; }

/* ---------- Étiquettes (badges) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.b-bleu { background: var(--bleu-f); color: var(--bleu); }
.b-canard { background: var(--canard-f); color: var(--canard); }
.b-ambre { background: var(--ambre-f); color: var(--ambre); }
.b-vert { background: var(--vert-f); color: var(--vert); }
.b-rouge { background: var(--rouge-f); color: var(--rouge); }
.b-violet { background: var(--violet-f); color: var(--violet); }
.b-gris { background: var(--gris-f); color: var(--gris); }
.b-cuivre { background: var(--cuivre-clair); color: var(--cuivre-fonce); }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ .champ-titre { font-size: 13px; font-weight: 700; color: var(--texte-2); }
.inp {
  height: 44px; width: 100%; padding: 0 14px;
  border: 1px solid var(--trait-champ); border-radius: 10px; background: #fff;
  font: 500 14px var(--police); color: var(--encre);
}
.inp:focus, textarea.inp:focus { outline: 2px solid var(--cuivre-vif); outline-offset: 1px; border-color: var(--cuivre); }
textarea.inp { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.puces { display: flex; gap: 8px; flex-wrap: wrap; }
.puce {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--trait-champ); background: #fff;
  font: 600 13px var(--police); color: var(--texte-2); cursor: pointer;
}
.puce[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }

.carte { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); }
.pastille {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px;
  background: var(--ivoire); border: 1px solid var(--trait); font-size: 13px; font-weight: 600; color: var(--texte-2);
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--nuit); }
.logo-nom { font-family: var(--police-titre); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; }
.logo-sous { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.logo-textes { display: flex; flex-direction: column; line-height: 1.15; }

.vide { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; }

/* ---------- Message de confirmation ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 80; background: var(--nuit); color: #fff; padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: all .25s; box-shadow: 0 10px 30px rgba(14, 26, 43, .25); }
.toast.toast-vu { transform: translate(-50%, 0); opacity: 1; }