/* Styles propres à projets/arbre_capetien/index.html — extrait du <style> inline (charte partagée : /assets/site.css) */
:root{
  --azur:#0E1B3A; --azur2:#142a52; --azur3:#1e3a68; --azur-line:#2a4778;
  --nav-h:64px; --paper:#0e1b3a; --paper-dark:#142a52; --brand:#ECE6D6; --gold:#C8A35B; --muted:#b9c4dd; --ink:#ECE6D6;
  --or:#C8A35B; --or-clair:#E7CE8E; --or-vif:#F2DCA0;
  --ivoire:#ECE6D6; --brume:#9aa6c4; --brume2:#6f7da0;
  --rouge:#b85c4e;
  --indent:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{background:var(--azur);}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, #16294e 0%, var(--azur) 55%, #0a1430 100%) fixed;
  color:var(--ivoire);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:15px; line-height:1.55; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px 80px}

/* ---- en-tête ---- */
header{padding:54px 0 26px;text-align:center;position:relative}
.lys{font-size:30px;color:var(--or);opacity:.85;letter-spacing:.4em;margin-bottom:14px;text-indent:.4em}
h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,6vw,62px);
   line-height:1.02;letter-spacing:.01em;color:var(--ivoire)}
h1 em{font-style:italic;color:var(--or-clair)}
.these{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2.4vw,21px);font-style:italic;
   color:var(--brume);max-width:740px;margin:14px auto 0;line-height:1.45}
.these b{color:var(--ivoire);font-weight:600;font-style:normal}

/* ---- frise temporelle ---- */
.frise-bloc{margin:30px 0 8px;background:linear-gradient(180deg,rgba(20,42,82,.5),rgba(14,27,58,.2));
   border:1px solid var(--azur-line);border-radius:12px;padding:18px 20px 12px}
.frise-titre{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brume2);margin-bottom:10px}
svg.frise{display:block;width:100%;height:118px;overflow:visible;cursor:pointer;touch-action:none}
.band{opacity:.9}
.band-label{font-family:'Montserrat';font-size:9.5px;letter-spacing:.04em;fill:var(--azur);font-weight:600}
.ev-tick{stroke:var(--brume2);stroke-width:1;stroke-dasharray:2 3}
.ev-dot{fill:var(--or)}
.ev-label{font-size:9px;fill:var(--brume);font-family:'Montserrat'}
.axis-yr{font-size:10px;fill:var(--brume2);font-family:'Montserrat'}
.head-line{stroke:var(--or-vif);stroke-width:2}
.head-glow{stroke:var(--or);stroke-width:7;opacity:.25;filter:blur(2px)}
.head-lys{fill:var(--or-vif);cursor:grab}
.head-lys:active{cursor:grabbing}
.range-row{display:flex;align-items:center;gap:14px;margin-top:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;flex:1;height:3px;background:var(--azur-line);border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
   background:var(--or-vif);border:2px solid var(--azur);cursor:pointer;box-shadow:0 0 0 1px var(--or)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--or-vif);border:2px solid var(--azur);cursor:pointer}
.jumps{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.jump{font-family:'Montserrat';font-size:11.5px;letter-spacing:.02em;color:var(--brume);
   background:rgba(30,58,104,.4);border:1px solid var(--azur-line);border-radius:20px;padding:5px 13px;cursor:pointer;transition:.18s}
.jump:hover,.jump:focus-visible{color:var(--azur);background:var(--or-clair);border-color:var(--or-clair);outline:none}

/* ---- lecture de l'année ---- */
.annee-bloc{text-align:center;margin:30px 0 8px}
.annee{font-family:'Cormorant Garamond',serif;font-size:clamp(56px,12vw,104px);font-weight:600;
   line-height:.9;color:var(--or-clair);letter-spacing:.01em}
.regime{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brume);margin-top:8px}

/* ---- grille principale ---- */
.grid{display:grid;grid-template-columns:1fr 372px;gap:26px;margin-top:22px;align-items:start}
@media(max-width:920px){.grid{grid-template-columns:1fr}}

/* arbre */
.arbre-bloc{background:linear-gradient(180deg,rgba(20,42,82,.34),rgba(14,27,58,.12));
   border:1px solid var(--azur-line);border-radius:12px;overflow:hidden}
.arbre-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--azur-line);
   font-size:11px;letter-spacing:.04em;color:var(--brume2)}
.tgl{font-family:'Montserrat';font-size:11px;letter-spacing:.03em;color:var(--brume);
   background:rgba(30,58,104,.4);border:1px solid var(--azur-line);border-radius:6px;padding:5px 11px;cursor:pointer;transition:.16s}
.tgl[aria-pressed=true]{color:var(--azur);background:var(--or-clair);border-color:var(--or-clair)}
.tgl:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
.arbre{max-height:660px;overflow:auto;padding:16px 16px 24px}
.arbre::-webkit-scrollbar{width:11px;height:11px}
.arbre::-webkit-scrollbar-thumb{background:var(--azur3);border-radius:6px}
.arbre::-webkit-scrollbar-corner{background:transparent}
.ttree{display:inline-block;min-width:100%;--gap:26px;--rowc:15px}
.ttree{--tline:#39568c}
.tnode{position:relative}
.tchildren{padding-left:var(--gap)}
.tchildren.collapsed{display:none}
/* trait vertical reliant les enfants d'un même père */
.tchildren>.tnode::after{content:'';position:absolute;left:calc(-1*var(--gap) + 18px);top:0;height:100%;border-left:1.5px solid var(--tline)}
.tchildren>.tnode:last-child::after{height:var(--rowc)}
/* équerre horizontale vers chaque enfant */
.tchildren>.tnode>.trow::before{content:'';position:absolute;left:calc(-1*var(--gap) + 18px);top:var(--rowc);width:calc(var(--gap) - 18px);border-top:1.5px solid var(--tline)}
.trow{position:relative;display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:7px;white-space:nowrap;transition:background .15s,opacity .25s}
.trow:hover{background:rgba(30,58,104,.55)}
.trow.lineage{background:rgba(40,71,120,.62)}
.trow.lineage .nm{color:var(--or-clair)}
.trow.dead{opacity:.4}
.trow.dead .nm{color:var(--brume)}
.trow.king{background:rgba(200,163,91,.17);box-shadow:inset 0 0 0 1px rgba(200,163,91,.5)}
.trow.king .nm{color:var(--or-vif)}
.trow.aine .nm{color:var(--or-vif)}
.caret{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;
   color:var(--or);cursor:pointer;user-select:none;font-size:14px;line-height:1;
   background:rgba(200,163,91,.10);border:1px solid var(--azur-line);transition:.15s}
.caret:hover{background:rgba(200,163,91,.26);color:var(--or-vif);border-color:var(--or)}
.caret:focus-visible{outline:2px solid var(--or-clair);outline-offset:1px}
.caret.leaf{visibility:hidden}
.caret.closed{background:var(--or);color:var(--azur);border-color:var(--or-clair);font-size:13px;box-shadow:0 0 9px rgba(200,163,91,.55)}
.caret.closed:hover{background:var(--or-vif);color:var(--azur);border-color:var(--or-clair)}
.bar{flex:0 0 auto;width:10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.nm{font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.2;color:var(--ivoire)}
.nm .age{color:var(--brume);font-weight:400;font-size:.78em;letter-spacing:.02em}
.meta{font-size:10.5px;color:var(--brume2);letter-spacing:.02em}
.br-tag{font-size:9.5px;letter-spacing:.05em;color:var(--brume2);text-transform:uppercase}
.slot{display:flex;gap:5px;align-items:center}
.badge{flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;
   border-radius:11px;background:var(--or);color:var(--azur);font-family:'Montserrat';font-weight:700;font-size:11px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.badge.crown{background:var(--or-vif)}
.crownmark{color:var(--or-vif);font-size:14px}
/* mode « vivants seulement » : on masque les défunts et les traits */
.hideDead .trow.dead{display:none}
.hideDead .tchildren>.tnode::after,.hideDead .tchildren>.tnode>.trow::before{display:none}
/* mode « déjà nés seulement » : masque les rameaux futurs et rogne le trait au dernier né */
.hideUnborn .tnode.unborn{display:none}
.tnode.lastVis::after{height:var(--rowc)}
/* rois de France et leurs ascendants seulement */
.onlyKings .tnode.offtrunk{display:none}
/* plein écran de l'arbre */
.arbre-bloc:fullscreen,.arbre-bloc:-webkit-full-screen{background:var(--azur);border:none;border-radius:0}
.arbre-bloc:fullscreen .arbre,.arbre-bloc:-webkit-full-screen .arbre{max-height:calc(100vh - 122px)}
/* barre d'année (curseur) visible seulement en plein écran */
.fs-year-bar{display:none}
.arbre-bloc:fullscreen .fs-year-bar,.arbre-bloc:-webkit-full-screen .fs-year-bar{display:flex;align-items:center;gap:18px;padding:11px 22px;border-bottom:1px solid var(--azur-line);background:rgba(20,42,82,.4)}
.fs-annee{font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;color:var(--or-clair);min-width:74px}
.fs-regime{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brume);white-space:nowrap}
.fs-year-bar input[type=range]{flex:1}
.arbre-bloc:fullscreen .arbre-tools,.arbre-bloc:-webkit-full-screen .arbre-tools{padding:14px 22px}

/* panneau */
.panneau{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px}
.card{background:linear-gradient(180deg,rgba(20,42,82,.55),rgba(14,27,58,.3));
   border:1px solid var(--azur-line);border-radius:12px;padding:16px 17px}
.card h3{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brume2);font-weight:600;margin-bottom:11px}
.trone-nom{font-family:'Cormorant Garamond',serif;font-size:25px;line-height:1.1;color:var(--or-vif)}
.trone-sub{font-size:12px;color:var(--brume);margin-top:4px}
.trone-vacant .trone-nom{color:var(--brume);font-style:italic}

.divergence{background:rgba(184,92,78,.14);border:1px solid rgba(184,92,78,.5);border-radius:9px;
   padding:10px 12px;font-size:12px;color:#e8b3a8;line-height:1.45}
.divergence b{color:#f3cabf}

ol.succ{list-style:none;counter-reset:none}
ol.succ li{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid rgba(42,71,120,.4)}
ol.succ li:last-child{border-bottom:none}
.rk{flex:0 0 auto;display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;
   background:rgba(200,163,91,.16);border:1px solid var(--or);color:var(--or-clair);
   font-size:11.5px;font-weight:700;font-family:'Montserrat'}
.rk.one{background:var(--or);color:var(--azur);border-color:var(--or)}
.succ .s-nm{font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.15;color:var(--ivoire)}
.succ .s-meta{font-size:10px;color:var(--brume2);letter-spacing:.02em}
.tag-roi{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--azur);background:var(--or-vif);
   padding:1px 6px;border-radius:9px;font-weight:700;margin-left:2px}
.tag-dauphin{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-clair);border:1px solid var(--or);
   padding:1px 6px;border-radius:9px;margin-left:2px}

.cadette .cad-nom{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--or-clair);line-height:1.12}
.cad-br{font-size:11px;color:var(--brume);margin-top:3px;letter-spacing:.03em}
.cad-note{font-size:11.5px;color:var(--brume2);margin-top:8px;line-height:1.45;font-style:italic}

.these-card{background:linear-gradient(180deg,rgba(40,30,58,.5),rgba(20,16,40,.3));border-color:#3a3460}
.these-card h3{color:#b9a8d8}
.these-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid rgba(80,70,120,.3)}
.these-row:last-child{border-bottom:none}
.these-pic{flex:0 0 auto;width:8px;border-radius:3px;align-self:stretch}
.these-nom{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--ivoire);line-height:1.15}
.these-lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--brume2)}
.these-txt{font-size:11.5px;color:var(--brume);line-height:1.5;margin-top:2px}

/* légende */
.legende{display:flex;flex-wrap:wrap;gap:8px 16px;margin:26px 2px 0;font-size:11px;color:var(--brume)}
.lg{display:flex;align-items:center;gap:6px}
.lg i{width:11px;height:11px;border-radius:3px;display:inline-block}

footer{margin-top:34px;border-top:1px solid var(--azur-line);padding-top:20px;font-size:11.5px;color:var(--brume2);line-height:1.6}
footer b{color:var(--brume)}
footer a{color:var(--or);text-decoration:none;border-bottom:1px dotted var(--or)}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--azur2);border:1px solid var(--or);
   border-radius:8px;padding:8px 11px;max-width:260px;font-size:11.5px;color:var(--ivoire);line-height:1.45;
   box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip .tip-br{color:var(--or-clair);font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:3px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- saisie manuelle de l'année ---- */
.year-entry{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brume2);white-space:nowrap}
.year-entry input,#yearInputFs{width:74px;background:rgba(30,58,104,.45);border:1px solid var(--azur-line);border-radius:7px;color:var(--ivoire);font-family:'Montserrat';font-size:14px;padding:6px 8px;text-align:center;-moz-appearance:textfield}
.year-entry input::-webkit-outer-spin-button,.year-entry input::-webkit-inner-spin-button,#yearInputFs::-webkit-outer-spin-button,#yearInputFs::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.year-entry input:focus,#yearInputFs:focus{outline:none;border-color:var(--or-clair);background:rgba(30,58,104,.7)}
/* ---- contrôle de zoom de l'arbre ---- */
.zoom-ctl{display:inline-flex;align-items:center;gap:6px}
.zbtn{min-width:30px;font-size:16px;font-weight:700;padding:3px 9px;line-height:1}
#zoomLevel{font-size:11px;color:var(--brume);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.ttree{transform-origin:top left}

/* ---- optimisation mobile : focus sur l'arbre ---- */
@media(max-width:640px){
  .wrap{padding:0 11px 56px}
  header{padding:26px 0 14px}
  .lys{font-size:21px;letter-spacing:.3em;margin-bottom:9px}
  h1{font-size:clamp(30px,10vw,44px)}
  .these{font-size:14.5px;line-height:1.4;margin-top:11px}
  .frise-bloc{padding:13px 12px 10px;margin:20px 0 6px}
  svg.frise{height:104px}
  .frise-titre{font-size:10px;letter-spacing:.16em}
  .annee-bloc{margin:18px 0 6px}
  .annee{font-size:clamp(42px,15vw,62px)}
  .regime{font-size:11px;letter-spacing:.16em}
  .jumps{display:none}
  .jump{font-size:10.5px;padding:4px 9px}
  .year-entry{font-size:10px}
  .grid{gap:15px;margin-top:14px}
  .arbre{max-height:74vh}
  .arbre-tools{padding:9px 11px;gap:6px;font-size:10px}
  .arbre-tools>span:first-child{flex-basis:100%;margin-bottom:2px}
  .tgl{font-size:10.5px;padding:5px 9px}
  .ttree{--gap:18px}
  .nm{font-size:16px}
  .meta{font-size:9.5px}
  .panneau{position:static}
  .card{padding:13px 14px}
  .legende{font-size:10.5px;gap:6px 13px}
}

/* plein écran sur téléphone : on retire la dynastie pour rallonger le curseur d'années */
@media(max-width:640px){
  .arbre-bloc:fullscreen .fs-regime,.arbre-bloc:-webkit-full-screen .fs-regime{display:none}
  .arbre-bloc:fullscreen .fs-year-bar,.arbre-bloc:-webkit-full-screen .fs-year-bar{gap:10px;padding:10px 13px}
  .arbre-bloc:fullscreen .fs-annee,.arbre-bloc:-webkit-full-screen .fs-annee{font-size:23px;min-width:54px}
  .arbre-bloc:fullscreen #yearInputFs,.arbre-bloc:-webkit-full-screen #yearInputFs{width:58px}
}