/* ===== V36 — « Lumière de porte » =====
   Uniquement l'apparence, uniquement à l'intérieur d'une porte (html[data-kd-door]).
   Chaque type de porte a sa lumière ; l'or de KADIARY reste la signature des boutons.
   Pour revenir en arrière : retirer les deux lignes lumiere36 de index.html. */

html[data-kd-door="deux"]   {--kd-h1:#7a1328;--kd-h2:#3a0a17;--kd-acc:#f1d58e;--kd-card:#2a0b14}
html[data-kd-door="famille"]{--kd-h1:#8f3318;--kd-h2:#3b1308;--kd-acc:#ffbe94;--kd-card:#2a0f08}
html[data-kd-door="enfant"] {--kd-h1:#1f5a3c;--kd-h2:#0d2a1c;--kd-acc:#bfe6a8;--kd-card:#0f2219}
html[data-kd-door="amis"]   {--kd-h1:#16305e;--kd-h2:#0a1530;--kd-acc:#9ec5ff;--kd-card:#0d1730}
html[data-kd-door="animal"] {--kd-h1:#7a5214;--kd-h2:#352306;--kd-acc:#ffd98a;--kd-card:#261a08}
html[data-kd-door="moi"]    {--kd-h1:#3b1a5e;--kd-h2:#170a26;--kd-acc:#d9c8ff;--kd-card:#1a0f2a}

/* 1. La lumière qui sort de la porte (fond) + un grain très léger */
html[data-kd-door] body{background:#0b0507}
html[data-kd-door] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(130% 58% at 50% -10%,var(--kd-h1) 0%,var(--kd-h2) 42%,#0b0507 80%);
 transition:background .6s ease}
html[data-kd-door] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:radial-gradient(#ffffff0a 1px,transparent 1px);background-size:3px 3px}

/* 2. En-tête : le type de porte prend sa couleur */
html[data-kd-door] #app>header small{color:var(--kd-acc)!important}
html[data-kd-door] .section-title small{color:var(--kd-acc)!important}
html[data-kd-door] #cloudStatus{border-color:color-mix(in srgb,var(--kd-acc) 40%,transparent)!important;color:var(--kd-acc)!important}

/* 3. « ← Précédent · ⌂ Mes KADIARY » : verre fumé */
html[data-kd-door] .root-nav-v15{background:color-mix(in srgb,var(--kd-h2) 55%,rgba(10,4,6,.55))!important;
 border:1px solid color-mix(in srgb,var(--kd-acc) 22%,transparent);box-shadow:0 10px 30px #0006,inset 0 1px 0 #ffffff10}
html[data-kd-door] .root-nav-v15 button{color:var(--kd-acc)!important;border-color:color-mix(in srgb,var(--kd-acc) 40%,transparent)!important}

/* 4. Les grandes cartes : la lumière de la porte, verre fumé */
html[data-kd-door] .hero{border-color:color-mix(in srgb,var(--kd-acc) 26%,transparent)!important;
 background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--kd-h1) 70%,transparent),transparent 46%),
  linear-gradient(155deg,var(--kd-card),#0c0608 92%)!important;
 box-shadow:0 24px 60px #0007,inset 0 1px 0 #ffffff12}
html[data-kd-door] .surprise{border-color:color-mix(in srgb,var(--kd-acc) 26%,transparent)!important;
 background:linear-gradient(110deg,var(--kd-card),#0e0709)!important;box-shadow:inset 0 1px 0 #ffffff10}

/* 5. Le dock flottant (la barre du bas) */
html[data-kd-door] .bottom-nav{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;
 padding:6px!important;border-radius:26px!important;
 background:color-mix(in srgb,var(--kd-h2) 45%,rgba(14,5,8,.78))!important;
 border:1px solid color-mix(in srgb,var(--kd-acc) 26%,transparent)!important;
 backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
 box-shadow:0 18px 44px #000b,inset 0 1px 0 #ffffff14!important}
html[data-kd-door] .bottom-nav button.active{color:var(--kd-acc)!important}
html[data-kd-door] .bottom-nav button.active::before{background:color-mix(in srgb,var(--kd-acc) 13%,transparent)!important}
html[data-kd-door] .bottom-nav button.active svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--kd-acc) 70%,transparent))}

/* 6. Le bouton « + » : il prend la lumière de la porte */
html[data-kd-door] .fab26-btn{box-shadow:0 0 0 6px color-mix(in srgb,var(--kd-acc) 16%,transparent),0 14px 34px color-mix(in srgb,var(--kd-acc) 38%,transparent)!important}
html[data-kd-door]:not([data-kd-door="deux"]) .fab26-btn{background:radial-gradient(circle at 35% 30%,#fff,var(--kd-acc) 46%,color-mix(in srgb,var(--kd-acc) 50%,#000))!important}
html[data-kd-door] .fab26-veil{background:radial-gradient(circle at 50% 92%,color-mix(in srgb,var(--kd-h2) 92%,transparent),#0b0507f2 70%)!important}

/* ===== V37 — l'intérieur des onglets prend la lumière de la porte ===== */
/* cartes simples (souvenirs, mots, voix, mercis, idées, regards…) */
html[data-kd-door] :is(.memory-card,.mot,.voix,.kept-msg,.grat-item,.grat-atts,.ideas-list a,.names,.regard-item,.voyage-word,.livre-choice label,.rel-mode,.pin-choice,.share-inv,.kdp-cal,.today-media button,.avatar-preview,.door-avatar.empty){
 background:color-mix(in srgb,var(--kd-card) 82%,#050203)!important}
/* calendrier : les jours, les semaines, les mois */
html[data-kd-door] :is(.c28-d,.c28-w,.day-cell,.day-page,.month-card,.week-day){background:var(--kd-card)!important}
html[data-kd-door] :is(.c28-d.ev:not(.ph),.c28-w.full:not(.ph)){background:linear-gradient(160deg,color-mix(in srgb,var(--kd-h1) 55%,var(--kd-card)),var(--kd-card))!important}
html[data-kd-door] .c28-d.today{box-shadow:0 0 0 2px var(--kd-acc),0 0 16px color-mix(in srgb,var(--kd-acc) 45%,transparent)!important}
/* envies, escapades, grilles de souvenirs */
html[data-kd-door] .wish-card{background:var(--kd-card)!important}
html[data-kd-door] :is(.grid article,.trip-card,.today-gift-v15,.mots-entry,.regard-notice button){
 background:linear-gradient(145deg,color-mix(in srgb,var(--kd-h1) 32%,var(--kd-card)),color-mix(in srgb,var(--kd-card) 72%,#000))!important}
html[data-kd-door] .promise{background:radial-gradient(circle at 20%,color-mix(in srgb,var(--kd-h1) 45%,transparent),transparent 40%),var(--kd-card)!important}
html[data-kd-door] #today .surprise.has-photo::before{background:linear-gradient(90deg,color-mix(in srgb,var(--kd-card) 94%,transparent) 20%,color-mix(in srgb,var(--kd-card) 40%,transparent))!important}
html[data-kd-door] .tabs{background:color-mix(in srgb,var(--kd-h2) 55%,rgba(10,4,6,.6))!important}
/* journal secret (porte « Rien que moi ») : on garde le feu de « Brûler » et le ciel étoilé */
html[data-kd-door] :is(.j29-today,.j29-vcard,.j29-input,.j29-padd select,.j29-chips input,.j29-env,.j29-protect,.j29-tile:not(.burn):not(.sky)){background:var(--kd-card)!important}
html[data-kd-door] .j29-moods{background:color-mix(in srgb,var(--kd-card) 90%,transparent)!important}
html[data-kd-door] :is(.j29-ago,.j29-mot,.j29-prom){background:linear-gradient(135deg,color-mix(in srgb,var(--kd-h1) 45%,var(--kd-card)),var(--kd-card))!important}
/* petits titres dorés des onglets : couleur de la porte */
html[data-kd-door] :is(.section-title small,.j29-today small,.story-chapter small){color:var(--kd-acc)!important}

/* ===== V38 — la lumière choisie par chaque personne (elle passe avant celle du type de porte) ===== */
html[data-kd-door][data-kd-light="nuit"]    {--kd-h1:#16305e;--kd-h2:#0a1530;--kd-acc:#9ec5ff;--kd-card:#0d1730}
html[data-kd-door][data-kd-light="bordeaux"]{--kd-h1:#7a1328;--kd-h2:#3a0a17;--kd-acc:#f1d58e;--kd-card:#2a0b14}
html[data-kd-door][data-kd-light="terre"]   {--kd-h1:#8f3318;--kd-h2:#3b1308;--kd-acc:#ffbe94;--kd-card:#2a0f08}
html[data-kd-door][data-kd-light="vert"]    {--kd-h1:#1f5a3c;--kd-h2:#0d2a1c;--kd-acc:#bfe6a8;--kd-card:#0f2219}
html[data-kd-door][data-kd-light="miel"]    {--kd-h1:#7a5214;--kd-h2:#352306;--kd-acc:#ffd98a;--kd-card:#261a08}
html[data-kd-door][data-kd-light="violet"]  {--kd-h1:#3b1a5e;--kd-h2:#170a26;--kd-acc:#d9c8ff;--kd-card:#1a0f2a}
html[data-kd-door][data-kd-light="rose"]    {--kd-h1:#7a2550;--kd-h2:#330c21;--kd-acc:#ffc2dc;--kd-card:#2a0d1c}
html[data-kd-door][data-kd-light="argent"]  {--kd-h1:#3a4252;--kd-h2:#171b23;--kd-acc:#e3e8f2;--kd-card:#161a22}
/* le journal secret prend la couleur de l'humeur du jour (si aucune lumière n'a été choisie) */
html[data-kd-door="moi"][data-kd-mood="soleil"]   {--kd-h1:#8a5a10;--kd-h2:#36230a;--kd-acc:#ffd57a;--kd-card:#271a08}
html[data-kd-door="moi"][data-kd-mood="calme"]    {--kd-h1:#145a5a;--kd-h2:#082828;--kd-acc:#a6eadf;--kd-card:#0b2020}
html[data-kd-door="moi"][data-kd-mood="tendresse"]{--kd-h1:#7d2448;--kd-h2:#340c1e;--kd-acc:#ffc0d6;--kd-card:#2a0d1a}
html[data-kd-door="moi"][data-kd-mood="fatigue"]  {--kd-h1:#3f3270;--kd-h2:#19132e;--kd-acc:#cfc4ff;--kd-card:#1a1530}
html[data-kd-door="moi"][data-kd-mood="orage"]    {--kd-h1:#2c3850;--kd-h2:#11161f;--kd-acc:#b9c8e6;--kd-card:#141922}
/* le choix des lumières dans les réglages de la porte */
.k38-card{margin-top:14px;padding:14px;border-radius:18px;background:#ffffff08;border:1px solid #d8b56a33;text-align:left}
.k38-h{display:flex;gap:12px;align-items:center}.k38-h>span:first-child{width:40px;height:40px;border-radius:12px;background:#ffffff0d;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.k38-h b{display:block;font-size:14.5px}.k38-h small{display:block;color:#cbbbc0;font-size:12.5px;margin-top:2px}
.k38-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;max-width:100%}
.k38-sw{display:flex!important;align-items:center;gap:8px;padding:8px 10px!important;border-radius:14px!important;background:#ffffff08!important;border:1.5px solid #ffffff14!important;color:#efe3e6!important;font-size:11.5px!important;font-weight:700;box-shadow:none!important;margin:0!important;width:100%!important;min-width:0!important;min-height:44px;gap:6px!important;padding:8px 7px!important}
.k38-sw i{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff8,var(--c,#d8b56a) 55%);box-shadow:0 0 10px color-mix(in srgb,var(--c,#d8b56a) 60%,transparent)}
.k38-sw.def i{background:conic-gradient(#a3203d,#c4562c,#c99a2e,#3f9a6a,#3b6fd8,#7b4fc4,#a3203d)}
.k38-sw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.k38-sw.on{border-color:var(--c,#f1d58e)!important;background:color-mix(in srgb,var(--c,#d8b56a) 18%,transparent)!important}

/* Accessibilité : moins d'animations si demandé */
@media (prefers-reduced-motion:reduce){html[data-kd-door] body::before{transition:none}}
/* V38 — noms des lumières en entier : la pastille au-dessus, le nom dessous */
.k38-sw{flex-direction:column!important;justify-content:center;gap:5px!important;min-height:62px!important;padding:8px 4px!important}
.k38-sw i{width:24px;height:24px}
.k38-sw span{white-space:normal!important;text-align:center;line-height:1.15;font-size:11px}

/* ===== V39 — L'Histoire en chapitres (titres d'années, barre d'années, fil doré) ===== */
html[data-kd-door] #storyList.k39-on{position:relative;padding-left:24px;gap:18px!important}
html[data-kd-door] #storyList.k39-on::before{content:"";position:absolute;left:7px;top:70px;bottom:10px;width:2px;border-radius:2px;
 background:linear-gradient(var(--kd-acc),color-mix(in srgb,var(--kd-acc) 35%,transparent) 70%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--kd-acc) 40%,transparent)}
html[data-kd-door] #storyList.k39-on>.story-chapter{position:relative}
html[data-kd-door] #storyList.k39-on>.story-chapter{border-left:3px solid color-mix(in srgb,var(--kd-acc) 75%,transparent)!important;box-shadow:-6px 0 18px -10px var(--kd-acc)}
.k39-chap{position:relative;margin:14px 0 -4px -24px;padding:6px 0 4px 34px;scroll-margin-top:150px}
.k39-chap::before{content:"";position:absolute;left:0;top:10px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff6d6,var(--kd-acc,#f1d58e) 55%,transparent 72%);box-shadow:0 0 18px var(--kd-acc,#f1d58e)}
.k39-chap small{display:block;font:800 10px/1 sans-serif;letter-spacing:.24em;color:var(--kd-acc,#d8b56a)}
.k39-chap b{display:block;font:500 40px/1.05 Georgia,serif;color:#f9f1e8;margin-top:6px;text-shadow:0 0 30px color-mix(in srgb,var(--kd-acc,#f1d58e) 35%,transparent)}
.k39-chap span{display:block;font-size:12.5px;color:#cbbbc0;margin-top:2px}
.k39-years{display:flex;gap:8px;overflow-x:auto;margin:0 0 4px -24px;padding:2px 0 6px;scrollbar-width:none;position:sticky;top:58px;z-index:5}
.k39-years::-webkit-scrollbar{display:none}
.k39-years button{flex:none;height:32px;padding:0 14px!important;border-radius:999px!important;border:1px solid color-mix(in srgb,var(--kd-acc,#d8b56a) 40%,transparent)!important;
 background:color-mix(in srgb,var(--kd-h2,#2a0b14) 70%,rgba(10,4,6,.7))!important;color:var(--kd-acc,#f1d58e)!important;font:800 12px sans-serif!important;box-shadow:none!important;margin:0!important;backdrop-filter:blur(10px)}
.k39-years button.on{background:var(--kd-acc,#f1d58e)!important;color:#1a0c0c!important}
