/* phot.org — feuille de style commune */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #5d6470;
  --accent: #1d4ed8;
  --accent-soft: #e7edfd;
  --border: #e3e0d8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --font-title: "Georgia", "Times New Roman", serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b; --surface: #1e2127; --text: #eceef2; --muted: #a3a9b4;
    --accent: #8fb0ff; --accent-soft: #23304d; --border: #2e323a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 var(--font-text);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

/* En-tête */
.site-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.site-header .inner {
  max-width: 1100px; margin: auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.logo { font: 700 1.3rem var(--font-title); color: var(--text); text-decoration: none; letter-spacing: .02em; }
.logo span { color: var(--accent); }
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: .95rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

main { max-width: 1100px; margin: auto; padding: 28px 20px 60px; }
h1, h2, h3 { font-family: var(--font-title); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .2em 0 .3em; }
h2 { font-size: 1.6rem; margin: 2.2em 0 .6em; padding-top: .4em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.breadcrumb { font-size: .9rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }

/* Accueil */
.hero {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; margin: 20px 0 40px;
}
.hero img { border-radius: 50%; box-shadow: var(--shadow); width: min(100%, 380px); justify-self: center; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 20px; } }
.notice {
  background: var(--accent-soft); border-radius: var(--radius); padding: 14px 18px; font-size: .92rem; color: var(--text);
}
.login {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; margin-top: 22px; max-width: 460px;
}
.login label { display: block; font-weight: 600; margin-bottom: 8px; }
.login-row { display: flex; gap: 10px; }
.login input {
  flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button {
  font: inherit; font-weight: 600; padding: 10px 20px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .login button { color: #10131a; } }
.login button:hover { filter: brightness(1.1); }
.login-error { color: #c62828; min-height: 1.4em; margin: 8px 0 0; font-size: .92rem; }
.login-note { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); }
.card h3 { margin: 0 0 6px; font-size: 1.25rem; }
.card p { margin: 0; color: var(--muted); font-size: .92rem; }
.card .tag { display: inline-block; margin-top: 12px; font-size: .8rem; color: var(--accent); }

/* Fiche personne */
.profile { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }
.profile .bio { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.profile .bio h3 { margin: 0 0 4px; font-size: 1.2rem; }
.profile .bio p { margin: 0 0 14px; }
.profile figure { margin: 0; }
.profile figure img { border-radius: var(--radius); box-shadow: var(--shadow); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; background: var(--surface); font-size: .92rem; }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 42vw), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery a {
  display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px;
  background: var(--border); box-shadow: var(--shadow);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; font-size: .82rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.section-note { color: var(--muted); font-size: .92rem; margin-top: -6px; }

/* Visionneuse */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,10,12,.94);
  display: none; align-items: center; justify-content: center; flex-direction: column; padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; }
.lightbox .caption { color: #ddd; margin-top: 12px; font-size: .95rem; text-align: center; min-height: 1.4em; }
.lightbox button {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px;
  width: 48px; height: 48px; font-size: 1.5rem; cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox .close { top: 16px; right: 16px; }
.lightbox .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 16px; top: 50%; transform: translateY(-50%); }

footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
footer .inner { max-width: 1100px; margin: auto; padding: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Bouton de la page de garde */
.bouton {
  display: inline-block; margin-top: 18px; padding: 14px 28px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 1.1rem; text-decoration: none;
  box-shadow: var(--shadow); transition: transform .15s ease, filter .15s ease;
}
.bouton:hover { transform: translateY(-2px); filter: brightness(1.1); }
@media (prefers-color-scheme: dark) { .bouton { color: #10131a; } }

/* Pages converties */
main p { max-width: 75ch; }
.ligne { margin: .6em 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pills span {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; font-size: .93rem;
}
.pills a { text-decoration: none; }
.gallery { margin: 16px 0 24px; }
.gallery-large { grid-template-columns: 1fr; max-width: 900px; }
.gallery-large a { aspect-ratio: auto; }
.gallery-large img { height: auto; object-fit: contain; }
.gallery .lien a { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.data td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tr:first-child td { font-weight: 600; background: var(--accent-soft); }
.cards + .gallery, .cards + p { margin-top: 28px; }
.card h3 { font-size: 1.1rem; }
dl.fiche { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; max-width: 900px; }
dl.fiche dt { font-weight: 600; color: var(--muted); }
dl.fiche dd { margin: 0; }
@media (max-width: 560px) { dl.fiche { grid-template-columns: 1fr; } dl.fiche dd { margin-bottom: 8px; } }

/* ===== Structure par familles ===== */
.mise-en-page { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 220px 1fr; gap: 0 28px; padding: 0 20px; }
.mise-en-page main { max-width: none; padding: 28px 0 60px; min-width: 0; }
.menu-familles nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; padding: 28px 0; }
.menu-familles a { text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 10px; font-size: .95rem; }
.menu-familles a:hover, .menu-familles a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.menu-familles a:nth-child(2) { border-left: 3px solid #2f6fd6; }
.menu-familles a:nth-child(3) { border-left: 3px solid #2e9a62; }
@media (max-width: 900px) {
  .mise-en-page { grid-template-columns: 1fr; padding: 0 16px; }
  .menu-familles nav { position: static; flex-direction: row; overflow-x: auto; padding: 12px 0 0; gap: 6px; }
  .menu-familles a { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); }
  .menu-familles a:nth-child(2), .menu-familles a:nth-child(3) { border-left-width: 3px; }
}

/* Cartes de famille */
.carte-famille { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 8px 14px 8px 8px; text-decoration: none; color: var(--text); box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease; min-width: 0; }
a.carte-famille:hover { transform: translateY(-2px); border-color: var(--accent); }
.carte-famille img, .carte-famille .sans-photo { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.5rem; }
.carte-famille .txt { display: flex; flex-direction: column; min-width: 0; }
.carte-famille .p { font-weight: 600; font-size: .93rem; line-height: 1.3; }
.carte-famille .p small { font-weight: 400; color: var(--muted); }
.carte-famille .role, .role { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.carte-famille.vide { box-shadow: none; opacity: .6; }
.carte-famille.grand img, .carte-famille.grand .sans-photo { width: 84px; height: 84px; }
.carte-famille.carrefour { border: 2px solid var(--accent); }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

/* Fiche couple : parents / couple / enfants */
.arbre-fiche { display: flex; flex-direction: column; gap: 0; margin: 10px 0 30px; }
.arbre-fiche .gen { position: relative; }
.gen-parents { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 26px; }
.gen-parents .cote { display: flex; flex-direction: column; gap: 8px; }
.gen-parents::after, .gen-couple::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 26px; border-left: 2px solid var(--border); }
.gen-couple { display: grid; grid-template-columns: 1fr minmax(180px, 280px) 1fr; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 26px; }
.gen-couple .personne { text-align: center; }
.gen-couple .personne h2 { margin: 0 0 4px; font-size: 1.35rem; }
.gen-couple .dates { color: var(--muted); margin: 0 0 10px; }
.gen-couple .photo-couple { margin: 0; grid-template-columns: 1fr; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chips a { font-size: .85rem; text-decoration: none; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); }
.gen-enfants h2 { margin-top: 0; font-size: 1.3rem; }
.gen-couple:last-child::after { display: none; }
.bouton-sec { display: inline-block; text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); font-size: .9rem; }
.fiche-contenu > h2 { border-top: 1px solid var(--border); padding-top: 24px; }
@media (max-width: 700px) {
  .gen-parents { grid-template-columns: 1fr; }
  .gen-couple { grid-template-columns: 1fr; }
}

/* Arbres des branches */
.aide { color: var(--muted); font-size: .9rem; }
ul.arbre, ul.arbre ul { list-style: none; margin: 0; padding: 0; }
ul.arbre ul { margin-left: 28px; padding-left: 18px; border-left: 2px solid var(--border); }
ul.arbre li { position: relative; margin: 10px 0; }
ul.arbre ul > li::before { content: ""; position: absolute; left: -18px; top: 36px; width: 16px; border-top: 2px solid var(--border); }
ul.arbre summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
ul.arbre summary::-webkit-details-marker { display: none; }
ul.arbre summary::before { content: "▸"; color: var(--muted); transition: transform .15s; width: 12px; }
ul.arbre details[open] > summary::before { transform: rotate(90deg); }
ul.arbre .carte-famille { max-width: 520px; flex: 1; }
ul.arbre li > .carte-famille { margin-left: 22px; }
ul.arbre .nb { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.bloc-alliee { margin-bottom: 40px; }

/* Accueil des familles */
.deux-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.branche { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border-top: 6px solid; }
.branche.bleu { border-top-color: #2f6fd6; }
.branche.vert { border-top-color: #2e9a62; }
.branche h2 { margin: 0 0 4px; }
.branche h2 a { text-decoration: none; color: var(--text); }
.branche .oncles { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.carte-famille.mini { box-shadow: none; padding: 4px 10px 4px 4px; }
.carte-famille.mini img, .carte-famille.mini .sans-photo { width: 40px; height: 40px; }
.jonction { text-align: center; margin: 26px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jonction .carrefour { min-width: min(100%, 420px); }
.jonction .cartes { width: 100%; text-align: left; }
@media (max-width: 800px) { .deux-branches { grid-template-columns: 1fr; } }
.menu-familles { min-width: 0; }
@media (max-width: 900px) { .mise-en-page { grid-template-columns: minmax(0, 1fr); } }
.gen-couple::after { display: none; }
.mise-en-page main { margin: 0; }
@media (max-width: 700px) {
  ul.arbre ul { margin-left: 6px; padding-left: 10px; }
  ul.arbre ul > li::before { left: -10px; width: 8px; }
  ul.arbre .nb { display: none; }
}

/* ===== Design moderne et coloré ===== */
@font-face { font-family: "Inter"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Inter Display", "Inter", system-ui, sans-serif;
  --bg: #f7f7fb; --surface: #ffffff; --text: #151827; --muted: #5f6577;
  --accent: #4f46e5; --accent-soft: #eef0ff; --border: #e6e7ef;
  --indigo: #4f46e5; --violet: #8b5cf6; --rose: #ec4899; --corail: #f97316; --ambre: #f59e0b; --emeraude: #10b981; --turquoise: #06b6d4;
  --grad: linear-gradient(90deg, var(--indigo), var(--rose) 55%, var(--corail));
  --radius: 16px;
  --shadow: 0 1px 2px rgba(21,24,39,.05), 0 3px 10px rgba(21,24,39,.05);
  --shadow-lg: 0 20px 40px -18px rgba(79,70,229,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #f7f7fb; --surface: #ffffff; --text: #151827; --muted: #5f6577; --accent: #4f46e5; --accent-soft: #eef0ff; --border: #e6e7ef;
    --shadow: 0 1px 2px rgba(21,24,39,.05), 0 3px 10px rgba(21,24,39,.05); }
  .login button, .bouton { color: #fff; }
}
body { font: 16px/1.7 var(--font-text); -webkit-font-smoothing: antialiased; color: var(--text);
  background: radial-gradient(900px 420px at 0% -5%, rgba(139,92,246,.13), transparent 60%),
              radial-gradient(800px 380px at 100% 0%, rgba(236,72,153,.10), transparent 60%),
              radial-gradient(700px 400px at 60% 110%, rgba(6,182,212,.08), transparent 60%), var(--bg);
  background-attachment: fixed; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; color: var(--text); letter-spacing: -.025em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.05; margin: .3em 0 .35em; }
h1::after { content: ""; display: block; width: 64px; height: 5px; border-radius: 99px; background: var(--grad); margin-top: 18px; }
h2 { font-size: 1.45rem; margin: 2em 0 .8em; font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: 1.08rem; color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: #e0dcff; }

/* En-tête */
.bandeau { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); }
.bandeau::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--grad); opacity: .85; }
.bandeau .inner { max-width: 1280px; margin: auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bandeau .logo { font: 800 1.2rem var(--font-title); letter-spacing: .04em; color: var(--text); text-decoration: none; }
.bandeau .logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bandeau .ruban { display: none; }
.bandeau .site-nav { gap: 4px; }
.bandeau .site-nav a { font-size: .9rem; font-weight: 500; color: var(--muted); border-radius: 999px; padding: 7px 15px; }
.bandeau .site-nav a:hover { background: var(--accent-soft); color: var(--accent); }

/* Menu de l'album */
.mise-en-page { grid-template-columns: 236px minmax(0, 1fr); gap: 0 52px; padding: 0 28px; }
.mise-en-page main { padding-top: 36px; }
.menu-album { min-width: 0; padding: 34px 0; position: sticky; top: 64px; align-self: start; }
.menu-logo img { width: 76px; height: 76px; border-radius: 50%; display: block; margin: 0 0 14px; padding: 3px; background: var(--grad); }
.menu-titre { display: block; font: 700 1.05rem/1.25 var(--font-title); letter-spacing: -.01em; color: var(--text); text-decoration: none; margin: 0 0 16px; }
.menu-titre:hover { color: var(--accent); }
.menu-album nav { display: flex; flex-direction: column; gap: 3px; }
.bouton-menu { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 12px; margin-left: -12px; border-radius: 10px;
  text-decoration: none; color: #2c3142; font-size: .93rem; font-weight: 500; transition: background .15s, color .15s, transform .15s; }
.bouton-menu::before { content: ""; width: 10px; height: 10px; border-radius: 4px; background: var(--bg); flex: none; }
.bouton-menu:hover { background: #fff; box-shadow: var(--shadow); transform: translateX(2px); }
.bouton-menu[aria-current="page"] { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(79,70,229,.6); }
.bouton-menu[aria-current="page"]::before { background: #fff; }
/* Généalogie en tête, avec les deux arbres juste en dessous */
.bouton-menu.gene { font-weight: 700; }
.bouton-menu.gene::before { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.menu-album nav .bouton-menu.sous { margin-left: 8px; padding: 7px 12px; font-size: .88rem; color: #3b4052; background: #fff; border: 1px solid var(--border); border-radius: 10px; font-weight: 600; }
.menu-album nav .bouton-menu.sous + .bouton-menu.sous { margin-top: 4px; }
.bouton-menu.sous::before { width: 8px; height: 8px; border-radius: 3px; }
.bouton-menu.sous[href*="thiriez"]::before { background: linear-gradient(135deg, var(--ambre), var(--corail)); }
.bouton-menu.sous[href*="moulet"]::before { background: linear-gradient(135deg, var(--emeraude), var(--turquoise)); }
.menu-album nav .bouton-menu.sous[aria-current="page"] { background: var(--accent); color: #fff; border-color: transparent; }
.bouton-menu.apres { margin-top: 18px; }
.menu-album nav > .bouton-menu:not(.sous):not(.gene) + .bouton-menu.sous { margin-top: 18px; }
.bouton-menu.gene + .bouton-menu.sous { margin-top: 2px; }
@media (max-width: 900px) {
  .mise-en-page { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .mise-en-page main { padding-top: 20px; }
  .menu-album { position: static; padding: 14px 0 0; }
  .menu-logo, .menu-titre { display: none; }
  .menu-album nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .bouton-menu { white-space: nowrap; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; }
  .bouton-menu.apres, .menu-album nav > .bouton-menu:not(.sous) + .bouton-menu.sous { margin-top: 0; }
  .menu-album nav .bouton-menu.sous { margin-left: 0; border-radius: 999px; }
  .bandeau .inner { padding: 12px 16px; }
}

/* Page des albums : cartes colorées */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 14px 0 36px; }
.album { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 200px; padding: 24px; border-radius: 20px;
  background: var(--g); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
  box-shadow: 0 14px 30px -16px var(--ombre, rgba(79,70,229,.6)); transition: transform .25s ease, box-shadow .25s ease; }
.album::before { content: ""; position: absolute; right: -50px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255,255,255,.16); z-index: -1; transition: transform .4s ease; }
.album:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -18px var(--ombre, rgba(79,70,229,.7)); }
.album:hover::before { transform: scale(1.3); }
.album-sur { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.album-nom { font: 700 1.45rem/1.15 var(--font-title); letter-spacing: -.02em; }
.album-desc { font-size: .9rem; opacity: .92; }
.album::after { content: "Ouvrir →"; align-self: flex-start; margin-top: auto; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.22);
  font-size: .82rem; font-weight: 600; backdrop-filter: blur(4px); transition: background .2s; }
.album:hover::after { background: rgba(255,255,255,.34); }
.album.bleu   { --g: linear-gradient(135deg, #6366f1, #8b5cf6); --ombre: rgba(99,102,241,.65); }
.album.jaune  { --g: linear-gradient(135deg, #f59e0b, #f97316); --ombre: rgba(249,115,22,.6); }
.album.vert   { --g: linear-gradient(135deg, #10b981, #06b6d4); --ombre: rgba(16,185,129,.6); }
.album.rose   { --g: linear-gradient(135deg, #ec4899, #f43f5e); --ombre: rgba(236,72,153,.6); }
.album.thiriez { --g: linear-gradient(135deg, #f59e0b 0%, #f97316 55%, #ef4444 100%); --ombre: rgba(249,115,22,.6); }
.album.moulet  { --g: linear-gradient(135deg, #10b981 0%, #0ea5a4 55%, #0891b2 100%); --ombre: rgba(16,185,129,.6); }
.album.alliees { --g: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%); --ombre: rgba(139,92,246,.6); }
.albums.arbres .album { min-height: 220px; }
.albums.arbres .album-nom { font-size: 1.8rem; }
.albums.arbres .album::after { content: "Voir l’arbre →"; }
.albums.petits .album-nom { font-size: 1.15rem; }

/* Fiches couple */
.gen-couple { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.gen-couple::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.gen-couple .personne h2 { font-size: 1.4rem; }
.gen-couple .dates { font-weight: 500; color: var(--accent); }
.carte-famille { border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.gen-parents .cote:first-child .carte-famille { background: linear-gradient(135deg, #eef6ff, #fff 70%); border-left: 4px solid #3b82f6; }
.gen-parents .cote:last-child .carte-famille { background: linear-gradient(135deg, #ecfdf5, #fff 70%); border-left: 4px solid var(--emeraude); }
.gen-enfants .carte-famille { background: linear-gradient(135deg, #fff7ed, #fff 70%); border-left: 4px solid var(--corail); }
.carte-famille img { border-radius: 10px; }
a.carte-famille:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.carte-famille .p { font-weight: 600; }
.role, .carte-famille .role { color: var(--accent); font-weight: 700; letter-spacing: .1em; }
.chips a { background: var(--accent-soft); color: var(--accent); font-weight: 600; border: 0; }
.chips a:nth-child(3n+2) { background: #fdf2f8; color: #be185d; }
.chips a:nth-child(3n) { background: #ecfeff; color: #0e7490; }
.chips a:hover { background: var(--accent); color: #fff; }

/* Galeries */
.gallery { gap: 12px; }
.gallery a { border-radius: 14px; box-shadow: var(--shadow); background: #e9e8f3; }
.gallery img { transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.06); }
.gallery figcaption { font-size: .8rem; font-weight: 500; }

/* Divers */
.card { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 16px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad); }
.card:hover { box-shadow: var(--shadow-lg); }
.pills span { background: #fff; border: 1px solid var(--border); }
.breadcrumb { font-size: .84rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.bouton { border-radius: 999px; font-weight: 600; font-size: 1rem; padding: 14px 30px; color: #fff;
  background: linear-gradient(90deg, var(--indigo), var(--violet)); box-shadow: 0 12px 24px -12px rgba(79,70,229,.7); }
.login { border-radius: 18px; }
.login input, .login button { border-radius: 10px; }
.login button { background: linear-gradient(90deg, var(--indigo), var(--violet)); color: #fff; }
table.data tr:first-child td { background: var(--accent-soft); }
footer { background: transparent; border-top: 1px solid var(--border); }

/* ===== Zones de fond : nuances de gris pour séparer menu, contenu, en-tête ===== */
:root { --fond-page: #e9ebf0; --fond-menu: #dfe2e9; --fond-contenu: #f8f9fb; --fond-pied: #d9dce4; }
body { background-color: var(--fond-page); background-image: none; }
.bandeau { background: rgba(255,255,255,.92); }
.mise-en-page { padding-top: 24px; padding-bottom: 32px; gap: 0 24px; align-items: start; }
.menu-album { background: var(--fond-menu); border-radius: 20px; padding: 24px 18px; top: 84px; border: 1px solid #d3d7e0; }
.menu-album nav .bouton-menu { margin-left: 0; }
.bouton-menu:hover { background: rgba(255,255,255,.75); }
.mise-en-page main { background: var(--fond-contenu); border-radius: 22px; padding: 30px 40px 48px; border: 1px solid #e0e3ea;
  box-shadow: 0 1px 2px rgba(21,24,39,.04); }
.mise-en-page main > h2 { padding-top: 22px; border-top: 1px solid #e3e5ec; }
.albums.arbres { background: #eef0f5; margin-left: -16px; margin-right: -16px; padding: 16px; border-radius: 22px; }
.gen-couple, .carte-famille, .card { background-color: #fff; }
footer { background: var(--fond-pied); border-top: 0; color: #4b5163; }
@media (max-width: 900px) {
  .mise-en-page { padding-top: 12px; gap: 12px; }
  .menu-album { padding: 10px; border-radius: 14px; }
  .mise-en-page main { padding: 20px 16px 32px; border-radius: 16px; }
  .albums.arbres { margin-left: 0; margin-right: 0; padding: 10px; }
}
.mise-en-page { grid-template-columns: 250px minmax(0, 1fr); }
.menu-album { padding: 24px 14px; }
.menu-album nav .bouton-menu { padding-left: 10px; padding-right: 10px; }
@media (max-width: 900px) { .mise-en-page { grid-template-columns: minmax(0, 1fr); } }

/* ===== Bouton mode clair / sombre ===== */
.bandeau .inner { gap: 12px; }
.bandeau .site-nav { margin-left: auto; }
.bascule-theme { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: #4f46e5; transition: background .2s, color .2s, transform .2s; }
.bascule-theme:hover { transform: rotate(-15deg); background: var(--accent-soft); }
.bascule-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bascule-theme .ico-soleil { display: none; }
:root[data-theme="dark"] .bascule-theme .ico-lune { display: none; }
:root[data-theme="dark"] .bascule-theme .ico-soleil { display: block; }

/* ===== Mode sombre ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12141b; --surface: #1b1e27; --text: #e9eaf0; --muted: #a2a7b5; --border: #2c303c;
  --accent: #8b8cff; --accent-soft: #262a45;
  --fond-page: #0f1117; --fond-menu: #1a1d26; --fond-contenu: #171a22; --fond-pied: #0b0d12;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.3);
  --shadow-lg: 0 20px 40px -18px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body { background: var(--fond-page); color: var(--text); }
:root[data-theme="dark"] .bandeau { background: rgba(20,22,30,.9); border-bottom-color: var(--border); }
:root[data-theme="dark"] .bandeau .logo, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: var(--text); }
:root[data-theme="dark"] .bascule-theme { background: #232736; color: #fcd34d; border-color: #343a4b; }
:root[data-theme="dark"] .menu-album { background: var(--fond-menu); border-color: var(--border); }
:root[data-theme="dark"] .menu-titre { color: var(--text); }
:root[data-theme="dark"] .bouton-menu { color: #d4d7e2; }
:root[data-theme="dark"] .bouton-menu:hover { background: #262a37; }
:root[data-theme="dark"] .menu-album nav .bouton-menu.sous { background: #232736; border-color: #343a4b; color: #e4e6ee; }
:root[data-theme="dark"] .bouton-menu[aria-current="page"], :root[data-theme="dark"] .menu-album nav .bouton-menu.sous[aria-current="page"] { background: #5b5ef0; color: #fff; }
:root[data-theme="dark"] .mise-en-page main { background: var(--fond-contenu); border-color: var(--border); }
:root[data-theme="dark"] .mise-en-page main > h2 { border-top-color: var(--border); }
:root[data-theme="dark"] .albums.arbres { background: #1f2230; }
:root[data-theme="dark"] .gen-couple, :root[data-theme="dark"] .carte-famille, :root[data-theme="dark"] .card,
:root[data-theme="dark"] .pills span, :root[data-theme="dark"] .login, :root[data-theme="dark"] .profile .bio,
:root[data-theme="dark"] dl.fiche, :root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .branche, :root[data-theme="dark"] .toc a { background: #1f2230; border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .gen-parents .cote:first-child .carte-famille { background: linear-gradient(135deg, #1d2a40, #1f2230 70%); }
:root[data-theme="dark"] .gen-parents .cote:last-child .carte-famille { background: linear-gradient(135deg, #17322a, #1f2230 70%); }
:root[data-theme="dark"] .gen-enfants .carte-famille { background: linear-gradient(135deg, #3a2716, #1f2230 70%); }
:root[data-theme="dark"] .carte-famille img, :root[data-theme="dark"] .carte-famille .sans-photo { background: #2a2e3d; }
:root[data-theme="dark"] .chips a { background: #262a45; color: #b9bbff; }
:root[data-theme="dark"] .chips a:nth-child(3n+2) { background: #3a1f33; color: #f9a8d4; }
:root[data-theme="dark"] .chips a:nth-child(3n) { background: #133038; color: #67e8f9; }
:root[data-theme="dark"] .gallery a { background: #262a37; }
:root[data-theme="dark"] table.data td { border-color: var(--border); }
:root[data-theme="dark"] table.data tr:first-child td { background: #262a45; }
:root[data-theme="dark"] .login input { background: #12141b; border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .notice { background: #262a45; color: var(--text); }
:root[data-theme="dark"] a { color: #a5a8ff; }
:root[data-theme="dark"] .album, :root[data-theme="dark"] .album:visited, :root[data-theme="dark"] .bouton { color: #fff; }
:root[data-theme="dark"] .breadcrumb a { color: var(--muted); }
:root[data-theme="dark"] footer { background: var(--fond-pied); color: #8d93a3; }
:root[data-theme="dark"] ul.arbre ul, :root[data-theme="dark"] ul.arbre ul > li::before, :root[data-theme="dark"] .gen-parents::after { border-color: #343a4b; }
:root[data-theme="dark"] ::selection { background: #3b3f7a; }

/* Indication du mode à gauche du bouton */
.etat-theme { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; padding-left: 6px; }
.etat-theme .txt-sombre { display: none; }
:root[data-theme="dark"] .etat-theme .txt-clair { display: none; }
:root[data-theme="dark"] .etat-theme .txt-sombre { display: inline; }
:root[data-theme="dark"] .etat-theme { color: #c7cad6; }
.bandeau .inner > .etat-theme:first-of-type { margin-left: auto; }
.bandeau .site-nav + .etat-theme { margin-left: 0; }
@media (max-width: 520px) { .etat-theme { display: none; } }

/* Bouton mode clair/sombre : le texte et l'icône forment un seul bouton cliquable */
.bascule-theme { width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px; padding: 3px 3px 3px 12px;
  border-radius: 999px; background: transparent; border: 1px solid var(--border); color: inherit; font: inherit; }
.bascule-theme:hover { transform: none; background: var(--accent-soft); }
.bascule-theme .etat-theme { padding-left: 0; }
.bascule-theme .rond { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #fff;
  color: #4f46e5; box-shadow: var(--shadow); transition: transform .2s; }
.bascule-theme:hover .rond { transform: rotate(-15deg); }
.bandeau .site-nav + .bascule-theme, .bandeau .inner > .bascule-theme:first-of-type { margin-left: 0; }
.bandeau .inner > .ruban + .bascule-theme { margin-left: auto; }
:root[data-theme="dark"] .bascule-theme { background: transparent; border-color: #343a4b; color: #c7cad6; }
:root[data-theme="dark"] .bascule-theme:hover { background: #262a37; }
:root[data-theme="dark"] .bascule-theme .rond { background: #232736; color: #fcd34d; }
@media (max-width: 520px) { .bascule-theme { padding: 3px; } }

/* Intitulé "Albums" dans le menu de gauche */
.menu-sep { display: block; margin: 20px 0 4px 10px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu-sep + .bouton-menu.apres { margin-top: 0; }
@media (max-width: 900px) { .menu-sep { display: none; } }

/* Logo aux poissons plus grand et centré, titre centré */
.menu-logo { display: block; text-align: center; }
.menu-logo img { width: 130px; height: 130px; margin: 4px auto 14px; }
.menu-titre { text-align: center; font-size: 1.15rem; margin-bottom: 18px; }

/* ===== Corrections smartphone ===== */
html, body { overflow-x: hidden; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.hero > * { min-width: 0; }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero img { width: min(100%, 300px); }
  main { padding-left: 16px; padding-right: 16px; }
  .login { padding: 16px; }
  .login-row { flex-wrap: wrap; }
  .login-row input { flex: 1 1 180px; }
  .login-row button { flex: 1 1 auto; }
}
img, video, iframe, table { max-width: 100%; }
.carte-famille, .carte-famille .txt, .carte-famille .p { min-width: 0; }
.carte-famille .p, .carte-famille .p small { overflow-wrap: anywhere; }
ul.arbre summary, ul.arbre li { min-width: 0; }
.profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.profile > *, .profile .bio { min-width: 0; }
main p, main h1, main h2, main h3, .bio, .bio a { overflow-wrap: anywhere; }
@media (max-width: 860px) { .profile { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .menu-logo, .menu-titre { display: none; }
  .menu-album { padding: 10px; }
}
@media (max-width: 600px) {
  .bandeau .inner { padding: 10px 14px; gap: 8px; }
  .bandeau .logo { font-size: 1.05rem; }
  .bandeau .site-nav { flex-wrap: nowrap; gap: 0; }
  .bandeau .site-nav a { padding: 6px 8px; font-size: .85rem; white-space: nowrap; }
  .bascule-theme .etat-theme { display: none; }
  .bascule-theme { padding: 2px; border: 0; }
  .mise-en-page main { padding: 18px 14px 28px; }
  h1 { font-size: 1.9rem; }
}

/* Icône = mode actuel : soleil en mode clair, lune en mode sombre */
.bascule-theme .ico-lune { display: none; }
.bascule-theme .ico-soleil { display: block; }
:root[data-theme="dark"] .bascule-theme .ico-lune { display: block; }
:root[data-theme="dark"] .bascule-theme .ico-soleil { display: none; }
.bascule-theme .rond { color: #f59e0b; }
:root[data-theme="dark"] .bascule-theme .rond { color: #c7d2fe; }

/* Page d'accueil et mot de passe : panneau arrondi gris plus foncé autour du logo, du titre et du formulaire */
.hero { background: #dadde6; border: 1px solid #ccd0db; border-radius: 32px; padding: 44px 48px; margin: 28px 0 40px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -18px rgba(21,24,39,.35); }
.hero img { box-shadow: 0 0 0 6px #fff, 0 14px 30px -12px rgba(21,24,39,.45); }
.hero .login { background: #fff; }
:root[data-theme="dark"] .hero { background: #1c1f29; border-color: #2c303c; box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
:root[data-theme="dark"] .hero img { box-shadow: 0 0 0 6px #2a2e3b, 0 14px 30px -12px rgba(0,0,0,.8); }
:root[data-theme="dark"] .hero .login { background: #232736; }
@media (max-width: 760px) { .hero { padding: 24px 18px; border-radius: 24px; margin: 16px 0 28px; } }
.hero { background: #cfd3de; border-color: #c0c5d2; }

/* Logo GEDO dans le bas de page */
footer .lien-gedo { display: inline-flex; vertical-align: middle; margin-left: 6px; padding: 4px 8px; border-radius: 8px; background: #fff; }
footer .lien-gedo img { height: 24px; width: auto; display: block; }
footer .inner span:has(.lien-gedo) { display: inline-flex; align-items: center; gap: 4px; }
footer .lien-gedo { padding: 3px 6px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
footer .lien-gedo img { height: 17px; }
footer .lien-gedo:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); }

/* ===== Effet « verre liquide » (façon Apple) sur le panneau de l'accueil ===== */
main:has(> .hero) { position: relative; isolation: isolate; }
/* Taches de couleur douces derrière le verre, pour que la transparence se voie */
main:has(> .hero)::before {
  content: ""; position: absolute; z-index: -1; inset: 10px 4% 0;
  background:
    radial-gradient(260px 260px at 18% 30%, rgba(99,102,241,.55), transparent 70%),
    radial-gradient(240px 240px at 82% 22%, rgba(236,72,153,.40), transparent 70%),
    radial-gradient(300px 260px at 70% 85%, rgba(6,182,212,.45), transparent 70%),
    radial-gradient(220px 220px at 35% 90%, rgba(245,158,11,.35), transparent 70%);
  filter: blur(30px);
  animation: flotte 18s ease-in-out infinite alternate;
}
@keyframes flotte { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { main:has(> .hero)::before { animation: none; } }

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.35) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 18px 40px -20px rgba(255,255,255,.9),
    0 20px 50px -24px rgba(30,35,60,.45),
    0 2px 6px rgba(30,35,60,.08);
}
/* Reflet lumineux qui traverse le haut du verre */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 60% at 20% -10%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.35) 46%, transparent 54%);
  mix-blend-mode: soft-light;
}
.hero > * { position: relative; z-index: 1; }
.hero .login { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.8); }

:root[data-theme="dark"] .hero {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 50px -24px rgba(0,0,0,.9);
}
:root[data-theme="dark"] .hero::before { background: radial-gradient(120% 60% at 20% -10%, rgba(255,255,255,.18), transparent 55%); mix-blend-mode: normal; }
:root[data-theme="dark"] main:has(> .hero)::before { opacity: .55; }
:root[data-theme="dark"] .hero .login { background: rgba(35,39,54,.7); border-color: rgba(255,255,255,.1); }
.hero { background: linear-gradient(135deg, rgba(214,218,228,.72) 0%, rgba(190,196,210,.42) 45%, rgba(205,210,222,.62) 100%); }
/* Taches violette et jaune atténuées */
main:has(> .hero)::before {
  background:
    radial-gradient(260px 260px at 18% 30%, rgba(99,102,241,.20), transparent 70%),
    radial-gradient(240px 240px at 82% 22%, rgba(236,72,153,.40), transparent 70%),
    radial-gradient(300px 260px at 70% 85%, rgba(6,182,212,.45), transparent 70%),
    radial-gradient(220px 220px at 35% 90%, rgba(245,158,11,.12), transparent 70%);
}
/* Effet coloré encore atténué */
main:has(> .hero)::before {
  background:
    radial-gradient(260px 260px at 18% 30%, rgba(99,102,241,.08), transparent 70%),
    radial-gradient(240px 240px at 82% 22%, rgba(236,72,153,.26), transparent 70%),
    radial-gradient(300px 260px at 70% 85%, rgba(6,182,212,.28), transparent 70%),
    radial-gradient(220px 220px at 35% 90%, rgba(245,158,11,.05), transparent 70%);
}

/* Cadre « Mot de passe » : verre légèrement teinté, avec relief */
.hero .login {
  background: linear-gradient(160deg, rgba(236,239,246,.78) 0%, rgba(214,219,231,.62) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(150,158,180,.25),
    inset 0 10px 24px -14px rgba(255,255,255,.9),
    0 10px 24px -12px rgba(30,35,60,.35),
    0 1px 3px rgba(30,35,60,.12);
}
.hero .login input { background: rgba(255,255,255,.85); border-color: rgba(160,168,190,.45); box-shadow: inset 0 1px 2px rgba(30,35,60,.08); }
:root[data-theme="dark"] .hero .login {
  background: linear-gradient(160deg, rgba(60,66,86,.55) 0%, rgba(35,39,54,.6) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -12px rgba(0,0,0,.8);
}
:root[data-theme="dark"] .hero .login input { background: rgba(15,17,23,.7); border-color: rgba(255,255,255,.12); }

/* Petite aide sous le champ du mot de passe */
.login-aide { margin: 8px 2px 0; font-size: .78rem; color: #8a90a0; line-height: 1.4; }
:root[data-theme="dark"] .login-aide { color: #7f8698; }
.login-aide + .login-error:empty { min-height: .4em; }

/* Le bouton annonce le mode vers lequel on bascule :
   en mode clair -> « Mode sombre » + lune ; en mode sombre -> « Mode clair » + soleil */
.etat-theme .txt-clair { display: none; }
.etat-theme .txt-sombre { display: inline; }
:root[data-theme="dark"] .etat-theme .txt-clair { display: inline; }
:root[data-theme="dark"] .etat-theme .txt-sombre { display: none; }
.bascule-theme .ico-soleil { display: none; }
.bascule-theme .ico-lune { display: block; }
:root[data-theme="dark"] .bascule-theme .ico-soleil { display: block; }
:root[data-theme="dark"] .bascule-theme .ico-lune { display: none; }
.bascule-theme .rond { color: #4f46e5; }
:root[data-theme="dark"] .bascule-theme .rond { color: #fbbf24; }

/* ===== Toutes les pages : grand panneau principal en verre liquide (comme la page du mot de passe) ===== */
.mise-en-page > main {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(214,218,228,.72) 0%, rgba(190,196,210,.42) 45%, rgba(205,210,222,.62) 100%), var(--fond-contenu);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 18px 40px -20px rgba(255,255,255,.9),
    0 20px 50px -24px rgba(30,35,60,.45),
    0 2px 6px rgba(30,35,60,.08);
}
/* Taches de couleur douces (mêmes teintes atténuées que l'accueil) */
.mise-en-page > main::before {
  content: ""; position: absolute; z-index: -1; inset: -40px; pointer-events: none;
  background:
    radial-gradient(320px 300px at 14% 22%, rgba(99,102,241,.08), transparent 70%),
    radial-gradient(300px 280px at 86% 16%, rgba(236,72,153,.26), transparent 70%),
    radial-gradient(380px 320px at 74% 78%, rgba(6,182,212,.28), transparent 70%),
    radial-gradient(280px 260px at 30% 88%, rgba(245,158,11,.05), transparent 70%);
  filter: blur(30px);
  animation: flotte 18s ease-in-out infinite alternate;
}
/* Givre + reflet lumineux par-dessus les taches */
.mise-en-page > main::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 50% at 20% -10%, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 46%, transparent 54%),
    rgba(255,255,255,.18);
}
@media (prefers-reduced-motion: reduce) { .mise-en-page > main::before { animation: none; } }
:root[data-theme="dark"] .mise-en-page > main {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%), var(--fond-contenu);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 50px -24px rgba(0,0,0,.9);
}
:root[data-theme="dark"] .mise-en-page > main::before { opacity: .55; }
:root[data-theme="dark"] .mise-en-page > main::after {
  background: radial-gradient(120% 50% at 20% -10%, rgba(255,255,255,.14), transparent 55%);
}

/* ===== Toutes les pages : menu de gauche en verre liquide ===== */
.mise-en-page > .menu-album {
  isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(214,218,228,.72) 0%, rgba(190,196,210,.42) 45%, rgba(205,210,222,.62) 100%), var(--fond-menu);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 18px 40px -20px rgba(255,255,255,.9),
    0 20px 50px -24px rgba(30,35,60,.45),
    0 2px 6px rgba(30,35,60,.08);
}
.mise-en-page > .menu-album::before {
  content: ""; position: absolute; z-index: -1; inset: -40px; pointer-events: none;
  background:
    radial-gradient(220px 220px at 20% 18%, rgba(99,102,241,.08), transparent 70%),
    radial-gradient(220px 240px at 85% 45%, rgba(236,72,153,.24), transparent 70%),
    radial-gradient(260px 260px at 25% 85%, rgba(6,182,212,.26), transparent 70%);
  filter: blur(28px);
  animation: flotte 20s ease-in-out infinite alternate-reverse;
}
.mise-en-page > .menu-album::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(140% 40% at 20% -8%, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 46%, transparent 54%),
    rgba(255,255,255,.18);
}
.mise-en-page > .menu-album nav .bouton-menu.sous:not([aria-current]) {
  background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(30,35,60,.35);
}
@media (prefers-reduced-motion: reduce) { .mise-en-page > .menu-album::before { animation: none; } }
@media (max-width: 900px) { .mise-en-page > .menu-album { position: relative; top: 0; } }
:root[data-theme="dark"] .mise-en-page > .menu-album {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%), var(--fond-menu);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 50px -24px rgba(0,0,0,.9);
}
:root[data-theme="dark"] .mise-en-page > .menu-album::before { opacity: .55; }
:root[data-theme="dark"] .mise-en-page > .menu-album::after { background: radial-gradient(140% 40% at 20% -8%, rgba(255,255,255,.14), transparent 55%); }
:root[data-theme="dark"] .mise-en-page > .menu-album nav .bouton-menu.sous:not([aria-current]) {
  background: rgba(35,39,54,.6); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* Intertitre « Famille » dans le menu de gauche (même allure que « Généalogie », non cliquable) */
.menu-album nav .bouton-menu.groupe { margin-top: 14px; cursor: default; }
.menu-album nav .bouton-menu.groupe:hover, :root[data-theme="dark"] .menu-album nav .bouton-menu.groupe:hover { background: none; }
.bouton-menu.groupe::before { background: linear-gradient(135deg, #ec4899, #f59e0b); }
@media (max-width: 900px) { .menu-album nav .bouton-menu.groupe { display: none; } }

/* ===== Enfants ajoutés depuis le site (pages des couples) ===== */
.bouton-ajout-enfant {
  margin-top: 14px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font: 600 .9rem/1.2 inherit; font-family: inherit; color: #4338ca;
  background: rgba(255,255,255,.75); border: 1px dashed rgba(99,102,241,.55);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(30,35,60,.35);
  transition: background .2s, transform .2s;
}
.bouton-ajout-enfant:hover { background: #fff; transform: translateY(-1px); }
.bouton-ajout-enfant:focus-visible, .dialogue-enfant button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.enfants-ajoutes:empty { display: none; }
.enfants-ajoutes { margin: 8px 0 28px; }
.enfant-ajoute { margin-top: 26px; }
.enfant-ajoute h2 { margin-bottom: 4px; scroll-margin-top: 90px; }
.enfant-ajoute p { margin: 0 0 12px; color: var(--muted, #5f6577); }
.bouton-supprimer {
  margin-top: 10px; padding: 7px 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: .85rem;
  color: #b91c1c; background: #fff5f5; border: 1px solid #fecaca;
}
.bouton-supprimer:hover { background: #fee2e2; }

.dialogue-enfant {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 22px;
  background: linear-gradient(160deg, rgba(246,247,251,.97), rgba(228,231,240,.97));
  box-shadow: 0 30px 70px -30px rgba(20,24,40,.6); color: inherit;
}
.dialogue-enfant::backdrop { background: rgba(15,17,23,.45); backdrop-filter: blur(3px); }
.dialogue-enfant form { padding: 24px 24px 20px; display: grid; gap: 12px; }
.dialogue-enfant h2 { margin: 0 0 4px; font-size: 1.3rem; }
.dialogue-enfant .champ { display: grid; gap: 5px; }
.dialogue-enfant label { font-weight: 600; font-size: .9rem; }
.dialogue-enfant input[type=text], .dialogue-enfant input[type=date] {
  font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(160,168,190,.6); background: #fff; color: inherit;
}
.dialogue-enfant input[type=file] { font: inherit; font-size: .9rem; }
.dialogue-enfant .aide { margin: -4px 0 0; font-size: .8rem; color: #6b7280; }
.dialogue-enfant .erreur-form { margin: 0; color: #b91c1c; font-size: .9rem; min-height: 1.2em; }
.dialogue-enfant .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dialogue-enfant .actions button { font: inherit; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; }
.dialogue-enfant .bouton-annuler { background: transparent; border-color: rgba(120,128,150,.45); color: inherit; }
.dialogue-enfant .bouton-envoyer { background: #4f46e5; color: #fff; }
.dialogue-enfant .bouton-envoyer:disabled { opacity: .6; cursor: progress; }

:root[data-theme="dark"] .bouton-ajout-enfant { background: rgba(35,39,54,.6); color: #c7d2fe; border-color: rgba(129,140,248,.5); box-shadow: none; }
:root[data-theme="dark"] .bouton-supprimer { background: rgba(127,29,29,.25); border-color: rgba(248,113,113,.4); color: #fca5a5; }
:root[data-theme="dark"] .dialogue-enfant { background: linear-gradient(160deg, rgba(36,40,54,.98), rgba(24,27,37,.98)); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .dialogue-enfant input[type=text], :root[data-theme="dark"] .dialogue-enfant input[type=date] { background: rgba(15,17,23,.7); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .dialogue-enfant .aide { color: #9aa1b2; }

/* Page d'administration */
.admin-page { max-width: 560px; }
.admin-form { display: grid; gap: 10px; max-width: 420px; }
.admin-ok { padding: 10px 14px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
:root[data-theme="dark"] .admin-ok { background: rgba(6,95,70,.25); border-color: rgba(52,211,153,.35); color: #a7f3d0; }

/* ---------- Mode administrateur : bandeau, administration, page « Modifier » ---------- */
.barre-admin { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0 0 14px; padding: 10px 16px; border-radius: 12px;
  background: #fff4d6; color: #5c4400; border: 1px solid #f0d58a; font-size: .92rem; font-weight: 600; }
.barre-admin a { color: #7a4f00; }
:root[data-theme="dark"] .barre-admin { background: #3a3016; color: #f3dd9c; border-color: #6b5a22; }
:root[data-theme="dark"] .barre-admin a { color: #ffd77a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barre-admin { background: #3a3016; color: #f3dd9c; border-color: #6b5a22; }
  :root:not([data-theme="light"]) .barre-admin a { color: #ffd77a; } }

.onglets-admin { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 20px; }
.onglets-admin a { text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: .92rem; }
.onglets-admin a[aria-current="page"] { background: var(--accent); color: #fff; border-color: transparent; }
.table-admin { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0 24px; display: block; overflow-x: auto; }
.table-admin th, .table-admin td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table-admin th { color: var(--muted); font-weight: 600; }
.table-admin form { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 6px 6px 0; }
.table-admin button, .sortir-admin button, .admin-page form > button[name="action"] { padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.table-admin input { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font: inherit; background: var(--surface); color: var(--text); }
.mode-emploi li { margin-bottom: 8px; }
.sortir-admin { margin-top: 28px; }

.editeur fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; margin: 0 0 18px; }
.editeur legend { font-weight: 700; padding: 0 6px; }
.form-editer input[type=text], .form-editer input[type=number], .form-editer textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.form-editer textarea { resize: vertical; line-height: 1.5; }
.form-editer label { display: block; font-size: .9rem; color: var(--muted); margin: 6px 0; }
.form-editer label.case { display: inline-flex; gap: 6px; align-items: center; color: var(--text); margin-right: 14px; }
.form-editer label.case input { width: auto; }
.personne-edit { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.personne-edit.nouvelle { opacity: .8; }
.vignette-edit { display: block; max-width: 220px; border-radius: 10px; margin-bottom: 8px; }
.bloc-edit { border-top: 1px dashed var(--border); padding: 12px 0; }
.bloc-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.bloc-outils label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.bloc-outils input.ordre { width: 80px; }
.apercu-html { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.apercu-html .etiquette { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.apercu-html p { margin: 0 0 6px; }
.apercu-images, .photos-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu-images img { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; }
.photo-edit { width: 180px; }
.photo-edit img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 4px; }
.form-editer .actions { display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; padding: 12px 0; }
.form-editer .bouton-envoyer, .form-editer .bouton-annuler { padding: 10px 20px; border-radius: 12px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.form-editer .bouton-envoyer { background: var(--accent); color: #fff; border: 0; }
.form-editer .bouton-annuler { border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.erreur-form:empty { display: none; }
.actions-admin { display: flex; gap: 8px; flex-wrap: wrap; }
.bouton-modifier { padding: 7px 14px; border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
@media (max-width: 640px) { .personne-edit { grid-template-columns: 1fr; } .photo-edit { width: calc(50% - 4px); } }
.form-editer select { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; margin-top: 4px; }
.outils-page { margin: 0 0 16px; }
.supprimer-page { margin-top: 32px; border: 1px solid #f3c2c2; border-radius: 14px; padding: 14px 16px; }
.supprimer-page h2 { margin-top: 0; font-size: 1.1rem; }

/* ---------- Jeux « Qui est-ce ? » ---------- */
.jeu-qui { max-width: 520px; margin: 18px auto 10px; text-align: center; }
.jeu-entete { display: flex; justify-content: space-between; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.jeu-cadre { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto 18px; border-radius: 24px; overflow: hidden;
  background: var(--accent-soft); box-shadow: 0 18px 40px -20px rgba(30,30,60,.55); border: 4px solid #fff; }
.jeu-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jeu-cadre.tourne img { filter: blur(1px) saturate(1.2); }
.jeu-cadre.arret { animation: jeu-pop .4s ease; }
@keyframes jeu-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.jeu-choix { display: grid; gap: 10px; margin-bottom: 10px; }
.jeu-bouton { font: inherit; font-weight: 600; padding: 12px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; transition: transform .12s, background .2s; }
.jeu-bouton:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.jeu-reponse { font-size: 1.1rem; }
.jeu-reponse.bonne { background: #16a34a; border-color: #16a34a; color: #fff; }
.jeu-reponse.mauvaise { background: #dc2626; border-color: #dc2626; color: #fff; }
.jeu-reponse:disabled { cursor: default; opacity: 1; }
.jeu-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 48px; }
.jeu-actions .jeu-bouton:not(.secondaire) { background: var(--accent); color: #fff; border-color: transparent; }
.jeu-message { min-height: 1.6em; font-size: 1.05rem; }
.jeu-final { font-size: 1.8rem; }
.jeu-branche { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .jeu-cadre.arret { animation: none; } }
.jeu-entete { align-items: center; gap: 10px; }
.jeu-entete .jeu-score { margin-left: auto; }
.jeu-son { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.jeu-son:hover { border-color: var(--accent); }
.gen-parents.un-seul { grid-template-columns: minmax(0, 420px); justify-content: center; }