/* Askan — indigo (teinture) + laiton (parures), papier clair pour la lecture */
:root {
  --nuit: #0E1A2F;
  --nuit-2: #16253F;
  --indigo: #1E3160;
  --indigo-clair: #4A6BB0;
  --papier: #FAF9F6;
  --brume: #E4E1D9;
  --encre: #16192A;
  --sourdine: #6C6960;
  --laiton: #BE9330;
  --alerte: #A32B23;
  --r: 3px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.55 Karla, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.015em; }
h2 { font-size: 1.3rem; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
code { font-size: .9em; background: #EFEDE6; padding: .1em .35em; border-radius: 2px; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

/* ------------------------------------------------------------- chrome */
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--brume);
}
.marque {
  font-family: Fraunces, serif; font-size: 1.5rem; font-weight: 600;
  color: var(--indigo); text-decoration: none; letter-spacing: -.01em;
}
.barre nav { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; }
.retour { display: inline-block; padding: 1rem clamp(1rem, 4vw, 2.5rem) 0; font-size: .9rem; color: var(--sourdine); }
main { padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 1400px; margin: 0 auto; }
main > section.etroit { max-width: 27rem; margin: 2rem auto; }
.chapo { font-size: 1.05rem; color: var(--sourdine); max-width: 46ch; }
.aide { font-size: .88rem; color: var(--sourdine); }
.chargement { padding: 3rem; color: var(--sourdine); }

/* accueil */
.accueil { max-width: 40rem; margin: clamp(2rem, 8vh, 5rem) auto; }
.accueil h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.accueil .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ------------------------------------------------------------ formes */
.titre-action { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: .5rem; }
.groupe-boutons.colonne { flex-direction: column; align-items: stretch; margin-top: 1.5rem; }
button, .primaire, .fantome {
  font: 500 .95rem Karla, sans-serif; padding: .6rem 1.1rem; border-radius: var(--r);
  cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-block; text-align: center;
}
.primaire { background: var(--indigo); color: #fff; }
.primaire:hover { background: #17274E; }
.fantome { background: transparent; color: var(--indigo); border-color: var(--brume); }
.fantome:hover { border-color: var(--indigo); }
.danger { background: transparent; color: var(--alerte); border-color: #E3CFCD; }
.danger:hover { background: #FBF2F1; }
button:disabled { opacity: .5; cursor: wait; }

label { display: block; font-size: .85rem; color: var(--sourdine); margin-bottom: .9rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  font: 400 1rem Karla, sans-serif; color: var(--encre);
  background: #fff; border: 1px solid var(--brume); border-radius: var(--r);
}
input:focus, select:focus, textarea:focus { border-color: var(--indigo-clair); outline: none; box-shadow: 0 0 0 3px rgba(74,107,176,.15); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pile > button { width: 100%; margin-top: .5rem; }
.case { display: flex; gap: .6rem; align-items: flex-start; color: var(--encre); font-size: .95rem; }
.case input { width: auto; margin: .25rem 0 0; }
.recherche { display: flex; gap: .5rem; align-items: flex-start; margin: 1.5rem 0; max-width: 30rem; }
.recherche input { margin: 0; }
.avertissement { background: #FCF7EA; border-left: 3px solid var(--laiton); padding: .8rem 1rem; font-size: .92rem; }

/* --------------------------------------------------------- listes */
.liste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.carte-arbre {
  display: block; padding: 1.25rem; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--brume); border-radius: var(--r);
}
.carte-arbre:hover { border-color: var(--indigo-clair); }
.carte-arbre h2 { font-size: 1.15rem; margin-bottom: .25rem; }
.carte-arbre p { margin: 0 0 .9rem; color: var(--sourdine); font-size: .9rem; }
.puces { display: flex; gap: .4rem; flex-wrap: wrap; }
.puce { font-size: .75rem; padding: .15rem .5rem; border: 1px solid var(--brume); border-radius: 2px; color: var(--sourdine); }
.puce.or { border-color: var(--laiton); color: #8A6A1E; }
.vide { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--brume); border-radius: var(--r); grid-column: 1 / -1; }
.vide p { margin: .3rem 0; }
.acces { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.acces li { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--brume); }

/* ---------------------------------------------------------- canevas */
.plein { position: relative; }
.canevas {
  display: grid; place-content: center start;
  background: var(--nuit);
  background-image: radial-gradient(circle at 20% 0%, var(--nuit-2), var(--nuit) 60%);
  border-radius: var(--r); padding: 1.5rem; overflow: auto;
  min-height: 24rem; height: min(72vh, 46rem);
}
.canevas .vide { color: #C8D0E0; border-color: rgba(255,255,255,.18); }
.canevas .vide .aide { color: #94A0B8; }
.arbre { display: block; margin: 0 auto; max-width: none; }
.arbre .filiation { fill: none; stroke: rgba(198,212,240,.38); stroke-width: 1.5; }
.arbre .union { stroke: var(--laiton); stroke-width: 2; }
.noeud { cursor: pointer; }
.noeud .nom { font: 600 14px Fraunces, serif; }
.noeud .annees { font: 400 12px Karla, sans-serif; }
.noeud.decede > rect:first-child { fill: var(--papier); stroke: none; }
.noeud.decede .nom { fill: var(--encre); }
.noeud.decede .annees { fill: var(--sourdine); }
.noeud.vivant > rect:first-child { fill: rgba(255,255,255,.07); stroke: rgba(198,212,240,.5); stroke-width: 1; }
.noeud.vivant .nom { fill: #F3F5FA; }
.noeud.vivant .annees { fill: #A9B6D0; }
.noeud:hover > rect:first-child, .noeud:focus > rect:first-child { stroke: var(--laiton); stroke-width: 2; }
.noeud.actif > rect:first-child { stroke: var(--laiton); stroke-width: 3; }
.noeud .sexe { fill: #7C8AA6; }
.noeud .sexe.MALE { fill: var(--indigo-clair); }
.noeud .sexe.FEMALE { fill: var(--laiton); }

/* --------------------------------------------------------- panneau */
.panneau {
  position: absolute; top: 5.5rem; right: 1rem; width: min(21rem, calc(100% - 2rem));
  max-height: calc(min(72vh, 46rem) - 2rem); overflow: auto;
  background: #fff; border: 1px solid var(--brume); border-radius: var(--r);
  padding: 1.4rem; box-shadow: 0 10px 30px rgba(14,26,47,.28);
}
.panneau h2 { margin-bottom: .1rem; }
.panneau .annees { color: var(--sourdine); font-size: .9rem; margin: 0 0 1rem; }
.panneau dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 0; font-size: .9rem; }
.panneau dt { color: var(--sourdine); }
.panneau dd { margin: 0; }
.fermer { position: absolute; top: .5rem; right: .5rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--sourdine); padding: .2rem .5rem; }

/* ---------------------------------------------------- modale & toast */
.fond-modale {
  position: fixed; inset: 0; background: rgba(14,26,47,.55);
  display: grid; place-items: center; padding: 1rem; z-index: 50;
}
.modale {
  background: #fff; border-radius: var(--r); padding: 1.75rem;
  width: min(34rem, 100%); max-height: 90vh; overflow: auto;
}
.modale .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
#toast {
  position: fixed; left: 50%; bottom: -5rem; transform: translateX(-50%);
  background: var(--nuit); color: #fff; padding: .7rem 1.2rem; border-radius: var(--r);
  font-size: .92rem; z-index: 60; transition: bottom .25s ease; max-width: 90vw;
}
#toast.visible { bottom: 1.5rem; }
#toast.erreur { background: var(--alerte); }

@media (max-width: 700px) {
  .duo { grid-template-columns: 1fr; }
  .canevas { height: 65vh; padding: .75rem; }
  .panneau {
    position: fixed; inset: auto 0 0 0; width: 100%; top: auto;
    max-height: 62vh; border-radius: 12px 12px 0 0; border-bottom: none;
  }
  .barre nav { gap: .8rem; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }