:root{--bg:#f4efe3;--paper:#fbf8f1;--ink:#211d18;--muted:#6b6459;--line:#d9d0bc;--accent:#4e6b2f;--accent2:#b3492a;--danger:#9c2f2f}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3,.serif{font-family:"TeX Gyre Pagella","Palatino Linotype",Palatino,Georgia,serif}
a{color:var(--accent)}
header.top{display:flex;align-items:center;gap:22px;padding:10px 22px;background:var(--paper);border-bottom:1px solid var(--line)}
header.top .brand{font-family:"TeX Gyre Pagella",Palatino,Georgia,serif;font-weight:700;font-size:19px;text-decoration:none;color:var(--ink);letter-spacing:.02em}
header.top nav{display:flex;gap:14px;flex-wrap:wrap}
header.top nav a{text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:6px}
header.top nav a.on,header.top nav a:hover{background:#00000010}
header.top .spacer{flex:1}
header.top .who{color:var(--muted);font-size:13px}
main{max-width:1180px;margin:0 auto;padding:22px}
main.full{max-width:none;padding:0}
.flash{padding:10px 14px;border-radius:8px;margin:0 0 14px;background:#e7efd9;border:1px solid #c6d6a6}
.flash.erreur{background:#f6e0dd;border-color:#e2b3ad}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
form label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;font:inherit}
button,.btn{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button.secondary,.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.danger{background:var(--danger)}
.muted{color:var(--muted)}
.chip{display:inline-block;padding:1px 9px;border-radius:20px;font-size:12px;color:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:14px}
.kv b{color:var(--muted);font-weight:500}
/* visionneuse */
#app{display:flex;height:calc(100vh - 53px);overflow:hidden}
#stage{flex:1;position:relative;overflow:hidden;cursor:grab;background:#e9ecdf}
#stage.drag{cursor:grabbing}
#stage>svg{width:100%;height:100%;display:block}
aside.panel{width:340px;border-left:1px solid var(--line);background:var(--paper);overflow-y:auto;padding:16px 18px;font-size:13.5px}
aside.panel h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:18px 0 8px;font-weight:600;font-family:inherit}
aside.panel h2:first-child{margin-top:0}
#res div{padding:4px 6px;border-radius:4px;cursor:pointer}#res div:hover{background:#00000008}
#card{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff;min-height:56px}
#card .nm{font-size:17px;font-weight:600;font-family:"TeX Gyre Pagella",Georgia,serif}
#card .dt{color:var(--muted);margin-top:2px}
#card .kv2{margin-top:9px;font-size:12.5px;line-height:1.6}
#card .kv2 b{font-weight:500;color:var(--muted)}
.lnk{color:#2b5f8a;cursor:pointer;border-bottom:1px dotted #2b5f8a88}
.legend button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;border:0;background:none;border-radius:5px;cursor:pointer;font:inherit;text-align:left;color:var(--ink);font-weight:400}
.legend button:hover{background:#00000008}.legend button.off{opacity:.32}
.sw{width:12px;height:12px;border-radius:3px}.cnt{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.ctrl{position:absolute;right:58px;top:12px;display:flex;gap:6px;z-index:5}
.ctrl button{width:36px;height:36px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;cursor:pointer;font-size:16px;padding:0}
.node{cursor:pointer}.dim{opacity:.12}
.hint{color:var(--muted);font-size:12px;line-height:1.55}
.styles{display:flex;gap:6px;flex-wrap:wrap}
.styles a{padding:5px 9px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);font-size:12.5px}
.styles a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#map{height:calc(100vh - 53px)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:30px 0 10px}
.hero h1{font-size:40px;line-height:1.05;margin:0 0 12px}
.hero p{max-width:60ch}
@media (max-width:860px){#app{flex-direction:column;height:auto}#stage{height:70vh}aside.panel{width:auto;border-left:0;border-top:1px solid var(--line)}.hero{grid-template-columns:1fr}}
/* v2 */
.faded{opacity:.14}
#app.collapsed aside.panel{display:none}
#panel-toggle{position:absolute;right:12px;top:12px;z-index:6;width:34px;height:34px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;cursor:pointer;font-size:18px;padding:0}
.toolbar{position:absolute;left:12px;top:10px;z-index:6;display:flex;flex-direction:column;gap:4px;align-items:stretch;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px;width:170px}
.toolbar .tb-titre{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 6px 4px}
.toolbar a{padding:4px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:11.5px;line-height:1.3}
.toolbar a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.legend .tools{display:flex;gap:6px;margin:0 0 6px}
.legend .tools button{width:auto;padding:3px 8px;border:1px solid var(--line);border-radius:5px;font-size:12px}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.photos figure{margin:0}
.photos img,.branche img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.photos figcaption,.branche figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.pdfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pdfgrid .item{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px}
.pdfgrid .item img.thumb{width:100%;aspect-ratio:1.414;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:#fff}
.pdfgrid .item img.photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;margin-top:8px}
.pdfgrid .item h3{margin:10px 0 6px;font-size:17px}
.brgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.brgrid a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px;text-decoration:none;color:var(--ink)}
.brgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.brgrid .t{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600}
details.aide{display:inline-block}
details.aide summary{list-style:none;cursor:pointer;display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;text-align:center;line-height:20px;font-size:13px;font-weight:700}
details.aide summary::-webkit-details-marker{display:none}
details.aide .pop{position:absolute;z-index:20;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;box-shadow:0 6px 24px #0002;font-size:13px;margin-top:6px}
.hero2{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;padding:14px 0 6px}
.hero2 h1{font-size:38px;line-height:1.05;margin:0 0 10px}
@media (max-width:860px){.photos,.hero2{grid-template-columns:1fr}}
/* v3 */
.welcome{display:grid;gap:26px}
.hero-photo{margin:0}.hero-photo img{width:100%;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;display:block}
.hero-photo figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.intro h1{font-size:42px;line-height:1.05;margin:0 0 12px}.intro .lead{font-size:18px;max-width:70ch}.intro p{max-width:70ch}
#lightbox[hidden]{display:none}#lightbox{position:fixed;inset:0;background:#000d;z-index:100;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
#lightbox img{max-width:96vw;max-height:96vh;border-radius:6px;background:#fff}
#lightbox button{position:absolute;top:14px;right:18px;background:#fff;color:#000;border:0;border-radius:50%;width:40px;height:40px;font-size:24px;cursor:pointer}
table.hub td,table.hub th{vertical-align:middle}table.hub .lbl{width:220px}
.mini{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mini img{width:120px;height:80px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:#fff}
.mini span{color:var(--accent);text-decoration:underline}
.mini img[data-full]{cursor:zoom-in}
.dlico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);text-decoration:none;font-size:16px;flex:none}
.dlico:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
form.dl{display:flex;flex-direction:column;gap:6px}form.dl label{margin:0;font-size:13px;display:flex;gap:8px;align-items:center}form.dl select{width:auto}
figure.wide{margin:0 0 18px}figure.wide img{width:100%;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;display:block}figure.wide figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--line);float:right;margin:0 0 10px 14px}
#crop{width:300px;height:300px;border:1px solid var(--line);border-radius:8px;background:#eee;cursor:grab;touch-action:none;display:block}

/* v4 */
.titre-accueil{font-size:44px;line-height:1.05;margin:6px 0 4px;text-align:center}
.intro .lead{font-size:18px;max-width:none;text-align:justify;hyphens:auto}
#lightbox{touch-action:none}
#lbwrap{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#lbwrap img{max-width:96vw;max-height:92vh;border-radius:6px;background:#fff;cursor:grab;transform-origin:center center;user-select:none;-webkit-user-drag:none}
.lbhint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff9;font-size:13px;pointer-events:none}
.cropbox{position:relative;display:block;width:100%;overflow:hidden;border-radius:6px;user-select:none;touch-action:none;line-height:0}
.cropbox img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.cropbox .sel{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px #0006;cursor:move;box-sizing:border-box}
.cropbox .sel::after{content:'';position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#fff;border:1px solid #333;border-radius:2px;cursor:nwse-resize}

/* v5 */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:10px 0}
.galerie figure{margin:0}.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
.galerie figcaption{font-size:13px;margin-top:4px}

.rot{position:absolute;right:58px;top:56px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:4px 8px;z-index:3}
.rot input[type=range]{width:140px;margin:0}.rot button{padding:2px 8px;font-size:14px;line-height:1.4}

.photo-moyenne{max-width:62%;margin:0 auto}

.aide-nav{position:absolute;right:58px;top:100px;z-index:4;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.5;color:var(--muted);max-width:210px}
.aide-nav b{color:var(--ink)}
#stage.roue .aide-nav{top:104px}
#legpop{position:fixed;inset:0;background:rgba(20,18,14,.55);z-index:50;display:flex;align-items:center;justify-content:center;cursor:pointer}
#legpop svg{width:min(92vw,1100px);height:auto;max-height:90vh;background:var(--paper);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#legpop .fermer{position:absolute;top:14px;right:18px;color:#fff;font-size:15px}
#legende{cursor:pointer}

.aide-nav .fermer-aide{float:right;margin-left:8px;color:var(--muted);text-decoration:none;font-size:12px}
.aide-btn{position:absolute;right:58px;top:100px;z-index:4;width:36px;height:36px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;padding:0}
#stage.roue .aide-btn{top:104px}
#app.collapsed .ctrl,#app.collapsed .rot,#app.collapsed .aide-nav,#app.collapsed .aide-btn{right:58px}

/* page d'invitation (public) */
.teaser{max-width:1100px;margin:0 auto}
.teaser-hero{position:relative;border-radius:14px;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;background:#2c3a2a;border:1px solid var(--line)}
.teaser-hero img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(9px) saturate(1.1);opacity:.9}
.teaser-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,18,.35),rgba(20,26,18,.7))}
.teaser-texte{position:relative;text-align:center;color:#fff;padding:48px 24px;max-width:760px}
.teaser-texte .sur{letter-spacing:.14em;text-transform:uppercase;font-size:12px;opacity:.85;margin:0 0 8px}
.teaser-texte h1{font-family:"TeX Gyre Pagella",Palatino,Georgia,serif;font-size:44px;margin:0 0 8px;color:#fff}
.teaser-texte .sous{font-size:18px;font-style:italic;opacity:.92;margin:0 0 26px}
.teaser-chiffres{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-bottom:28px}
.teaser-chiffres b{display:block;font-size:30px;font-family:"TeX Gyre Pagella",Palatino,Georgia,serif}.teaser-chiffres span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.teaser-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.teaser-actions .btn{padding:10px 18px;font-size:15px}
.teaser-actions .btn.secondary{background:rgba(255,255,255,.92);color:var(--ink)}
.teaser-corps{padding:34px 8px 20px;max-width:760px;margin:0 auto}
.etapes{padding-left:22px;line-height:1.6}.etapes li{margin-bottom:8px}

.mdp{position:relative;display:block}.mdp input{padding-right:44px;width:100%}
.oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:16px;opacity:.55;padding:4px 6px}.oeil.on{opacity:1}

/* lignée dépliable (hub des branches) */
.dep{margin-top:6px;background:transparent;border:1px solid var(--line);color:var(--ink);padding:3px 9px 3px 5px;border-radius:14px;cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.dep .pm{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;line-height:18px;text-align:center;font-size:13px}
.dep.on{background:var(--accent);color:#fff}.dep.on .pm{background:#fff;color:var(--accent)}
tr.lignee[hidden]{display:none}tr.lignee td{padding:0 10px 16px 28px;border-top:0}
.arbo{margin-top:10px;font-size:14px}.arbo .tools{display:flex;gap:6px;margin-bottom:6px}.arbo .tools button{font-size:12px;padding:2px 8px}
.arbo ul{list-style:none;margin:0;padding-left:22px;border-left:1px solid var(--line)}.arbo > ul{padding-left:6px;border-left:0}
.arbo li{margin:3px 0}.arbo .noeud{display:inline-flex;align-items:baseline;gap:7px}
.arbo .pm{width:22px;height:22px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);cursor:pointer;font-weight:700;line-height:1;padding:0;font-size:14px;align-self:center}
.arbo .pm.vide{border-color:transparent;color:var(--muted);text-align:center}
.arbo a{text-decoration:none;color:var(--ink);font-weight:600}.arbo a:hover{text-decoration:underline}

/* administration : comptes */
.defile{overflow-x:auto}
table.comptes{width:100%;table-layout:auto}table.comptes td{vertical-align:top;font-size:13.5px}
table.comptes td.actions{min-width:420px}
.actions .ligne{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px}.actions form{display:flex;gap:6px;align-items:center;margin:0}
.actions select,.actions input{width:auto;display:inline-block;font-size:13px;padding:5px 8px}.actions input[name=pw]{width:200px}
.actions button{font-size:13px;padding:5px 10px}
.actions [hidden]{display:none!important}
table.comptes td.actions{min-width:0}


/* hub des branches : vignettes compactes, arbres entiers, colonne de gauche en cartouche de branche */
table.hub{width:100%;table-layout:fixed}
table.hub th:nth-child(1),table.hub td.lbl{width:30%}table.hub th:nth-child(2),table.hub th:nth-child(3){width:35%}
table.hub td{padding:12px 12px;vertical-align:middle}
td.branche{padding-left:0!important}
.bcard{border-left:7px solid var(--hue);padding:6px 0 6px 16px;display:flex;flex-direction:column;gap:4px}
.bname{font-family:"TeX Gyre Pagella",Palatino,Georgia,serif;font-size:22px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.1}
.bname small{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-style:italic}
.bname small.maj{letter-spacing:.12em;text-transform:uppercase;font-style:normal;font-size:12px}
a.bname:hover{color:var(--hue)}
.bcount{color:var(--muted);font-size:13px}
.bcard .dep{margin-top:4px;align-self:flex-start}
.mini{display:flex;align-items:center;gap:10px;position:relative}
.mini img{width:150px;height:100px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:none;aspect-ratio:auto}
.mini img.arbre{object-fit:contain;background:#fdfbf6;padding:2px}
.mini .dlico{position:static;width:30px;height:30px;background:var(--paper);box-shadow:none}
.mini .dl{flex:1;min-width:200px}
.mini img[data-full]{transition:transform .15s}.mini img[data-full]:hover{transform:scale(1.03)}
tr.lignee td{padding-left:12px}

/* identification sur les photos */
.tagbox{position:relative;display:block;line-height:0}.tagbox img{display:block;width:100%}
.taglayer{position:absolute;inset:0;pointer-events:none}
.tagbox.tagmode img{cursor:crosshair}
.tag{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;text-decoration:none;line-height:1.2}
.tag .dot{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);background:rgba(0,0,0,.12);box-shadow:0 0 3px rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
.tagbox:hover .tag .dot,.tagbox.tagmode .tag .dot,.tagbox.noms .tag .dot{opacity:.85}
.tagbox.noms .tag .lbl{display:block}
.tagbar .noms-btn{font-size:12.5px;padding:4px 10px}
.tag .lbl{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:rgba(20,26,18,.9);color:#fff;font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;display:none}
.tag:hover .lbl{display:block}.tag .lbl .x{margin-left:6px;cursor:pointer;color:#f6c;font-weight:700}
.tagbar{display:flex;align-items:center;gap:10px;margin:8px 0 2px;line-height:1.4}.tagbar .taghint{font-size:12.5px;color:var(--muted)}.tagbar .tagbtn{font-size:12.5px;padding:4px 10px}
.tagpop{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;line-height:1.3}
.tagpop .dot.new{display:block;width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:#c8823b;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.tagpop .pan{position:absolute;left:14px;top:14px;width:260px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:5}
.tagpop input{width:100%;font-size:14px}.tagpop .res{max-height:180px;overflow:auto;margin:6px 0}.tagpop .it{padding:5px 6px;cursor:pointer;border-radius:5px;font-size:13px}.tagpop .it:hover{background:#eef0e6}
.tagpop .ann{font-size:12px;padding:3px 8px}

/* ---------- petits écrans ---------- */
.brand-m,.menu-btn{display:none}
@media (max-width:760px){
  header.top{flex-wrap:wrap;gap:8px;padding:8px 14px;align-items:center}
  .brand-m{display:block;font-family:"TeX Gyre Pagella",Palatino,Georgia,serif;font-weight:700;font-size:17px;flex:1}
  .menu-btn{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:6px 10px;font-size:14px}
  header.top nav{display:none;width:100%;flex-direction:column;gap:2px;padding:6px 0 4px;border-top:1px solid var(--line)}
  header.top nav a{padding:8px 8px;border-radius:6px;font-size:15px}
  header.top .spacer{display:none}
  header.top .who{display:none;width:100%;font-size:13px;padding:6px 8px 2px;border-top:1px solid var(--line)}
  header.top.open nav,header.top.open .who{display:flex}
  main{padding:14px}
  h1{font-size:26px;line-height:1.15}.hero h1,.hero2 h1,.intro h1{font-size:30px}
  .kv{grid-template-columns:1fr;gap:2px 0}.kv b{margin-top:8px}
  /* l'arbre : bandeau de vues défilant, commandes en bas, aide repliée */
  #stage{height:78vh}
  .toolbar{left:8px;right:8px;top:8px;width:auto;flex-direction:row;overflow-x:auto;gap:4px;padding:5px;-webkit-overflow-scrolling:touch}
  .toolbar .tb-titre{display:none}.toolbar a{white-space:nowrap;font-size:11px;padding:5px 8px}
  .ctrl{top:auto;bottom:12px;left:10px;right:auto}.ctrl button{width:34px;height:34px}
  .rot{top:auto;bottom:56px;left:10px;right:auto;padding:3px 6px}.rot input[type=range]{width:90px}
  .aide-nav{top:56px;right:10px;left:10px;max-width:none}.aide-btn{top:auto;bottom:12px;right:10px;width:34px;height:34px}
  #stage.roue .aide-btn{top:auto}
  #panel-toggle{display:none}#app.collapsed aside.panel{display:block}
  /* les dix branches : une carte par branche */
  table.hub,table.hub tbody,table.hub tr,table.hub td{display:block;width:100%!important;box-sizing:border-box}
  table.hub thead,table.hub tr:first-child{display:none}
  table.hub tr{border-top:1px solid var(--line);padding:10px 0}table.hub tr.lignee{border-top:0;padding-top:0}
  table.hub td{padding:6px 0}td.branche{padding-left:0!important}
  .bname{font-size:20px}
  table.hub td:not(.lbl):not([colspan]){display:inline-block;width:49%!important;vertical-align:top}
  .mini{flex-wrap:nowrap;gap:6px}.mini img{width:calc(100% - 38px);max-width:150px;height:auto;aspect-ratio:3/2}
  .mini .dl{min-width:0;width:100%}
  table.hub tr:has(.dl) td:not(.lbl){display:block;width:100%!important}
  table.hub tr:has(.dl) .mini{flex-wrap:wrap}.mini .dl select{max-width:100%;width:100%}.mini .dl label{display:block;margin-bottom:6px}.mini .dl .btn{display:block;text-align:center}
  .arbo{font-size:13px}.arbo ul{padding-left:14px}
  /* fiches, formulaires, tableaux */
  .grid{grid-template-columns:1fr}
  .actions .ligne{flex-direction:column;align-items:stretch}.actions form{flex-wrap:wrap}
  .teaser-texte h1{font-size:32px}.teaser-chiffres{gap:18px}.teaser-chiffres b{font-size:24px}
  .hero-photo,.photo-moyenne{max-width:100%}
  figure.wide img{width:100%}
  .lbhint{font-size:11px}
}

/* accueil : même corps de texte pour tous les paragraphes */
.lead,.intro .lead,.intro p{font-size:17px;line-height:1.6;max-width:none;text-align:justify;hyphens:auto}
/* identification : boutons discrets, légende de la photo au-dessus */
.tagbar{margin:4px 0 10px}.tagbar .tagbtn,.tagbar .noms-btn{font-size:11.5px;padding:3px 8px}
figure.taggable figcaption{margin-top:6px}
/* bandeau des vues : le défilement ne doit pas déplacer l'arbre */
.toolbar{touch-action:pan-x;overscroll-behavior-x:contain}
/* fiche sur petit écran : rangées de dates et boutons qui ne débordent jamais */
@media (max-width:760px){
  .card{padding:12px}
  .card div[style*="display:flex"]{flex-wrap:wrap}
  .card input,.card select{min-width:0;max-width:100%}
  .card div[style*="display:flex"]>input,.card div[style*="display:flex"]>select{flex:1 1 90px}
  .btn,button{max-width:100%;white-space:normal}
  .kv span,.kv b{overflow-wrap:anywhere}
}

.tagbar .tagbtn,.tagbar .noms-btn{white-space:nowrap!important;font-size:11.5px;padding:3px 9px;line-height:1.5}
.tagbar{flex-wrap:wrap;gap:6px 10px}
@media (max-width:760px){.tagbar .taghint{width:100%;font-size:12px}}

/* iPhone : pas de zoom automatique sur les champs (Safari agrandit la page si un champ a moins de 16 px) */
@media (max-width:760px){input,select,textarea{font-size:16px!important}html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}}

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

@media (max-width:760px){
  canvas,img,svg,video{max-width:100%;height:auto}
  .card table,main>table{display:block;overflow-x:auto;max-width:100%}
  .defile{max-width:100%}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
}

/* les cartes ne peuvent jamais être plus larges que leur colonne (WebKit : min-width:auto des enfants de grille) */
.grid>*,.card{min-width:0}
@media (max-width:760px){.card>div[style*="display:flex"]{max-width:100%;overflow-x:auto}.photos,.galerie{max-width:100%}}

.bname .bans{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:13px;color:var(--muted);margin-left:4px;white-space:nowrap}

/* fiche : portrait avec bouton, parents, unions */
.portrait-bloc{float:right;position:relative;margin:0 0 10px 14px}.portrait-bloc .portrait{float:none;margin:0}
.portrait.vide{display:flex;align-items:center;justify-content:center;font-family:"TeX Gyre Pagella",Palatino,Georgia,serif;font-size:44px;color:var(--muted);background:#f1ede2}
.portrait-btn{position:absolute;right:-4px;bottom:2px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0;font-size:16px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)}
details.inline{display:inline-block;margin-left:6px}details.inline summary{cursor:pointer;color:var(--accent);font-size:12.5px;list-style:none}details.inline summary::-webkit-details-marker{display:none}
.union-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px}.union-row .cb{display:flex;align-items:center;gap:6px;margin:0}.union-row .cb input{width:auto}
.union-date{display:inline-flex;gap:6px;align-items:center}.union-date input{width:64px}.union-date select{width:auto}.union-date input[name=mar_a]{width:74px}

/* fiche : deux colonnes, carte « ajuster » en pleine largeur, contacts */
.grid.fiche{grid-template-columns:minmax(300px,1fr) minmax(300px,1.15fr);align-items:start}
.grid.fiche>.card.ajuster{grid-column:1/-1}
.contacts{display:flex;gap:8px;align-items:center}.contacts .ico{display:inline-block;width:26px;height:26px}.contacts .ico svg{width:26px;height:26px;display:block}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}.contact-grid input{font-size:13px}
.arbo a.cj{font-weight:400;color:var(--accent)}
@media (max-width:760px){.grid.fiche{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}

/* fiche : carte d'identité pleine largeur, puis mise à jour et ajustements côte à côte */
.fiche-info{margin-bottom:18px}
.kv.large{grid-template-columns:150px 1fr 150px 1fr;column-gap:22px}
.grid.fiche2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){.kv.large{grid-template-columns:150px 1fr}.grid.fiche2{grid-template-columns:1fr}}
@media (max-width:760px){.kv.large{grid-template-columns:1fr}}
/* les dix branches : la ligne des conjoints sur une seule ligne */
table.hub th:nth-child(1),table.hub td.lbl{width:38%}table.hub th:nth-child(2),table.hub th:nth-child(3){width:31%}
.bname small{white-space:nowrap;font-size:12.5px}

/* hub : les sélecteurs de la famille entière restent dans leur colonne */
table.hub tr:has(.dl) .mini{flex-wrap:wrap}.mini .dl{min-width:0;width:100%}.mini .dl select{max-width:100%}

/* fiche : tout empilé, carte d'identité plus grande */
.pile{display:grid;grid-template-columns:1fr;gap:18px}
.fiche-info{padding:26px 28px}.fiche-info h1{font-size:34px}.fiche-info .kv.large{font-size:15.5px;row-gap:9px;margin-top:18px}
.fiche-info .portrait,.fiche-info .portrait.vide{width:150px;height:150px}.fiche-info .portrait.vide{font-size:56px}
.fiche-info .btn{font-size:14px}
@media (max-width:760px){.fiche-info{padding:14px}.fiche-info h1{font-size:26px}.fiche-info .portrait,.fiche-info .portrait.vide{width:110px;height:110px}}

.fiche-info .kv.section{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* hub : colonne des branches plus large, sélecteurs compacts */
table.hub th:nth-child(1),table.hub td.lbl{width:44%}table.hub th:nth-child(2),table.hub th:nth-child(3){width:28%}
.mini .dl label{display:flex;align-items:center;gap:6px;font-size:12.5px;margin:0 0 4px}.mini .dl select{font-size:13px;padding:5px 8px}
.mini .dl .dlico{position:static;margin-top:2px}
@media (max-width:760px){table.hub th:nth-child(1),table.hub td.lbl{width:100%}}

table.hub tr:has(.dl) .mini .dl{flex:0 0 100%;width:100%;min-width:0}
table.hub tr:has(.dl) .mini .dl select{max-width:100%;width:100%}

/* fiche : une information par ligne, sur toute la largeur */
.fiche-info .kv.large{grid-template-columns:160px 1fr}

/* hub : choix de la vue sous la vignette de l'arbre complet */
.vue{display:flex;align-items:center;gap:8px;margin:0 0 8px;max-width:270px}.vue label{margin:0;font-size:12.5px;color:var(--muted)}.vue select{font-size:13px;padding:5px 8px;flex:1;min-width:0}
/* ---- arbre de branche cliquable ---- */
.arbre-br{margin:0 0 22px}
.h-arbre{display:flex;align-items:center;gap:12px}
.br-dl{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#4E68A8;text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:#fff;line-height:1}
.br-dl:hover{border-color:#4E68A8;background:#eef1f7}
.br-stage{position:relative;width:100%;max-height:85vh;border:1px solid var(--line);border-radius:8px;background:#f5f1e6;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.br-stage.drag{cursor:grabbing}.br-stage svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.br-stage .node.clic{cursor:pointer}.br-stage .node.clic:hover rect:nth-of-type(2),.br-stage .node.clic:hover path:nth-of-type(2){filter:drop-shadow(0 0 6px rgba(78,104,168,.8))}
.br-stage .node.clic:hover text:first-of-type{text-decoration:underline}.br-stage .cj[data-uid]{cursor:pointer}.br-stage .cj[data-uid]:hover{text-decoration:underline;fill:#2f4a86}
.br-ctrl{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2}.br-ctrl button{width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:#333;padding:0}.br-ctrl button:hover{background:#eef1f7}
/* ---- ajout de photo dans une branche ---- */
.galbtn{font-size:13px;padding:4px 10px;margin-left:6px;vertical-align:baseline}
.galform[hidden]{display:none}.galform{margin:12px 0 26px;max-width:640px;display:flex;gap:16px;align-items:flex-start}.galform img{width:150px;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none}.galchamps{flex:1;min-width:0}
@media(max-width:760px){.galform{flex-direction:column}.galform img{width:100%;height:auto;max-height:220px}}
/* ---- albums photo : accueil, dix enfants, souvenirs ---- */
.album-accueil{margin:18px 0 8px}.album-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0}.album-ligne .muted{font-size:14px}.album-ligne .galbtn{margin-left:0}
.galboutons{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lien-retirer,button.lien-retirer{background:none;border:0;box-shadow:none;padding:0;font-weight:400;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer}.lien-retirer:hover{color:var(--danger)}
.photo-vide{width:150px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.5px dashed var(--line);border-radius:6px;color:var(--muted);text-decoration:none;font-size:12px;line-height:1.25;text-align:center;padding:6px;background:rgba(255,255,255,.35)}
.photo-vide:hover{border-color:var(--accent);color:var(--accent);background:#fff}.album-plus{font-size:20px;line-height:1}
.fratrie-actions{font-size:12px;color:var(--muted);margin-top:4px}.fratrie-actions a{color:var(--muted)}.fratrie-actions form{display:inline}
.intro-souvenirs{max-width:760px}h2.annee-souvenir{margin:26px 0 6px;font-variant-numeric:tabular-nums}h2.annee-souvenir small{font-size:15px;font-weight:400}
.souvenirs-vide{margin:22px 0;padding:22px;border:1.5px dashed var(--line);border-radius:10px;max-width:760px}.souvenirs-vide p{margin:4px 0}
.album-ajout .galform select{max-width:220px}
.fratrie-bloc{margin:4px 0 22px}
.fratrie-vide{margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;max-width:560px;min-height:150px;padding:16px 20px;border:1.5px dashed var(--line);border-radius:10px;color:var(--muted);text-decoration:none;text-align:center;background:rgba(255,255,255,.3)}
.fratrie-vide .album-lab{font-size:15px}.fratrie-vide small{font-size:12px;max-width:420px;line-height:1.35}.fratrie-vide:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.fratrie-photo{margin:0 auto;max-width:760px;text-align:center}.fratrie-photo img{width:auto;max-width:100%;margin:0 auto;max-height:min(520px,65vh);height:auto;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;display:block}.fratrie-photo figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:6px}.fratrie-photo figcaption a{color:var(--muted)}

/* onglet Recherche */
.recherche-form{max-width:720px;padding:14px}.recherche-form input{width:100%;font-size:17px}
.recherche-res{display:grid;gap:10px;max-width:720px;margin-top:16px}
.rligne{padding:12px 16px;display:grid;gap:4px}.rnom{font-size:17px}.rnom a{font-weight:600}.rliens{font-size:14px}

/* carte : bulles groupées par foyer */
.leaflet-popup-content .foyer,.zone-res .foyer{margin-top:7px;padding-top:6px;border-top:1px solid #ece6d6;line-height:1.35}
.leaflet-popup-content .foyer>a,.zone-res .foyer>a{font-weight:700}
.leaflet-popup-content .foyer .enfants,.zone-res .foyer .enfants{margin:3px 0 0 15px;padding-left:8px;border-left:2px solid #ddd5c0;font-size:.9em}
.leaflet-popup-content .foyer .enfants a,.zone-res .foyer .enfants a{font-weight:400;color:#5b564c}
.carte-legende{background:#fbf8f0;border:1px solid #d9d0bc;border-radius:8px;padding:7px 12px;font-size:14px;color:#3b352c;box-shadow:0 1px 4px rgba(0,0,0,.18)}
/* carte : sélection d'une zone */
#map{position:relative}
.zone-btn{background:#fbf8f0;border:1px solid #d9d0bc;border-radius:8px;padding:7px 12px;font-size:14px;color:#3b352c;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;font-family:inherit}
.zone-btn:hover{background:#f1ecdd}.zone-btn.on{background:#4e6b2f;color:#fff;border-color:#3d5a1f}
#map.zone-active,#map.zone-active .leaflet-interactive{cursor:crosshair!important;touch-action:none}
.zone-res{position:absolute;z-index:1000;right:10px;top:104px;bottom:26px;width:340px;max-width:calc(100% - 20px);display:flex;flex-direction:column;background:#fbf8f0;border:1px solid #d9d0bc;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:14px;color:#3b352c}
.zone-res[hidden]{display:none}
.zone-tete{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid #d9d0bc;line-height:1.45}
.zone-fermer{border:0;background:none;font-size:16px;cursor:pointer;color:#6b6459;padding:2px 6px}
.zone-liste{overflow:auto;padding:4px 12px 12px;overscroll-behavior:contain}
.zone-ville h3{margin:14px 0 0;font-size:15px}.zone-ville h3 small{font-weight:400;color:#7a7468;margin-left:4px}
@media (max-width:760px){.zone-res{left:10px;right:10px;width:auto;top:auto;bottom:24px;max-height:55%}}