/* Theme Ghibli : theme CLAIR, chaleureux, dans l'esprit aquarelle des films du
   studio (Totoro, Chihiro, Kiki) : papier creme, prairie sauge, ciel doux.
   Aucun personnage ni logo : les nuages et la colline sont dessines en SVG/CSS.
   Purement visuel : chaque regle est bornee a :root[data-theme="ghibli"], le
   balisage et le comportement des pages sont identiques aux autres themes.
   Palette : creme #faf3e0, encre brune #3b2f25, sauge #46774a (fond des boutons,
   contraste AA avec le texte blanc), ciel #7fb7d9, tuile #b23e2a, ocre #85570a.
   Polices (Google Fonts, cf. champ `polices` du registre) : Kalam pour les
   titres manuscrits, Nunito pour le corps. */

:root[data-theme="ghibli"]{
  color-scheme:light;
  --gb-ink:#3b2f25; --gb-cream:#faf3e0; --gb-paper:#fffaf0;
  --gb-sage:#5b8f5a; --gb-sage-dark:#46774a; --gb-sky:#7fb7d9; --gb-sky-soft:#dcecf3;
  --gb-tile:#c8553d; --gb-ochre:#d9a441;
  --gb-hand:"Kalam","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --gb-font:"Nunito","Zen Maru Gothic","Segoe UI",system-ui,sans-serif;
  --gb-frame:#fffdf7;                 /* liseré blanc cassé des aquarelles */
  --gb-warm:rgba(120,84,40,.16);      /* ombre chaude */

  --bg:#faf3e0; --bg-soft:#f3ead0;
  --surface:#fffaf0; --surface-2:#f4ead0; --surface-hover:#eddfbb;
  --border:#d6c49a; --border-soft:#e7dbb9;
  --text:#3b2f25; --text-dim:#5a4a3c; --text-faint:#75634f;
  --accent:#3f7043; --accent-hover:#2f5a35; --accent-dim:#46774a;
  --accent-soft:rgba(91,143,90,.17);
  --danger:#a83a27; --danger-hover:#8c2f1f; --danger-soft:rgba(200,85,61,.15);
  --success:#2c6a33; --success-soft:rgba(91,143,90,.2);
  --warning:#7d5109; --warning-soft:rgba(217,164,65,.24);
  --purple:#5f4589; --purple-soft:rgba(95,69,137,.12);
  --radius-sm:14px; --radius:20px; --radius-lg:26px;
  --shadow:0 12px 28px rgba(120,84,40,.24),0 2px 6px rgba(120,84,40,.12);
  --shadow-sm:0 3px 10px rgba(120,84,40,.14);
  --nav-bg:rgba(255,250,236,.88);
}

/* ---------- Fond : ciel pale, papier grene, nuages et colline ---------- */
:root[data-theme="ghibli"] body{
  font-family:var(--gb-font);
  background:
    /* grain de papier (bruit fractal tres transparent) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    /* lavis de ciel qui s'efface dans le creme */
    linear-gradient(#d9ebf2 0,#eaf1e6 220px,#faf3e0 520px) var(--bg);
  background-attachment:fixed;
}
:root[data-theme="ghibli"] ::selection{background:#bcd9a6;color:var(--gb-ink)}
:root[data-theme="ghibli"] *{scrollbar-color:#a9bf8f #f3ead0}

/* Nuages : un calque fixe deux fois plus large que l'ecran, qui glisse d'une
   demi-largeur puis reboucle (les deux moities sont identiques). Derriere tout
   (z-index:-1), jamais cliquable, coupe en reduced-motion. */
:root[data-theme="ghibli"] body::before{
  content:"";position:fixed;top:0;left:0;width:200vw;height:46vh;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='260' viewBox='0 0 1000 260' fill='%23fff'%3E%3Cg opacity='.78'%3E%3Cellipse cx='150' cy='80' rx='70' ry='26'/%3E%3Ccircle cx='120' cy='62' r='30'/%3E%3Ccircle cx='170' cy='55' r='38'/%3E%3Cellipse cx='215' cy='84' rx='50' ry='20'/%3E%3C/g%3E%3Cg opacity='.6'%3E%3Cellipse cx='560' cy='150' rx='90' ry='22'/%3E%3Ccircle cx='520' cy='132' r='26'/%3E%3Ccircle cx='585' cy='122' r='34'/%3E%3Cellipse cx='650' cy='152' rx='50' ry='18'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Cellipse cx='860' cy='60' rx='60' ry='20'/%3E%3Ccircle cx='840' cy='46' r='24'/%3E%3Ccircle cx='885' cy='42' r='28'/%3E%3C/g%3E%3C/svg%3E")
    0 0/50% 100% repeat-x;
  animation:gb-nuages 260s linear infinite;
}
/* Colline : herbe ondulee en bas de page, derriere le contenu. */
:root[data-theme="ghibli"] body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:84px;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='84' viewBox='0 0 800 84' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q100 8 200 40 T400 34 T600 42 T800 46 V84 H0Z' fill='%23bcd6a0' fill-opacity='.7'/%3E%3Cpath d='M0 62 Q120 32 260 58 T520 54 T800 62 V84 H0Z' fill='%2394bd84' fill-opacity='.75'/%3E%3C/svg%3E")
    0 100%/800px 84px repeat-x;
}
@keyframes gb-nuages{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Titres : manuscrit chaleureux ---------- */
:root[data-theme="ghibli"] h1,
:root[data-theme="ghibli"] h2,
:root[data-theme="ghibli"] h3{font-family:var(--gb-hand);letter-spacing:0}
:root[data-theme="ghibli"] h1{
  font-size:2rem;font-weight:700;color:var(--gb-ink);line-height:1.25;
  padding-bottom:.55rem;margin-bottom:1.3rem;
  /* filet a la plume : trait sauge qui s'effile */
  background:linear-gradient(90deg,var(--gb-sage),rgba(91,143,90,0) 70%) left bottom/100% 3px no-repeat;
}
:root[data-theme="ghibli"] h2{font-size:1.4rem;color:var(--gb-sage-dark)}
:root[data-theme="ghibli"] h2::before{content:"✿ ";color:var(--gb-tile);font-size:.75em}
:root[data-theme="ghibli"] h3{color:var(--gb-ink)}
:root[data-theme="ghibli"] a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1.5px}
:root[data-theme="ghibli"] a:hover{color:var(--accent-hover)}
:root[data-theme="ghibli"] .meta-line{color:var(--text-dim)}

/* ---------- Barre de navigation : bandeau de papier ---------- */
:root[data-theme="ghibli"] nav{
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(120,84,40,.14);
}
:root[data-theme="ghibli"] nav .brand{
  font-family:var(--gb-hand);font-size:1.4rem;font-weight:700;color:var(--gb-sage-dark);
}
:root[data-theme="ghibli"] nav a.nav-link{
  font-weight:700;border-radius:99px;color:var(--text-dim);
}
:root[data-theme="ghibli"] nav a.nav-link:hover{background:var(--surface-2);color:var(--gb-ink)}
:root[data-theme="ghibli"] nav a.nav-link.active{
  background:#dcebc8;color:#2c5230;box-shadow:inset 0 0 0 1.5px rgba(70,119,74,.45);
}
:root[data-theme="ghibli"] nav #theme-toggle{
  font-size:1.15rem;line-height:1;padding:.35rem .65rem;border-radius:99px;
}

/* ---------- Panneaux : papier, coins ronds, ombre chaude ---------- */
:root[data-theme="ghibli"] .card,
:root[data-theme="ghibli"] details.section,
:root[data-theme="ghibli"] .table-wrap,
:root[data-theme="ghibli"] table{
  border:1.5px solid var(--border-soft);box-shadow:var(--shadow-sm);
}
:root[data-theme="ghibli"] .table-wrap table{box-shadow:none;border:none}
:root[data-theme="ghibli"] table{border-radius:var(--radius)}
:root[data-theme="ghibli"] details.section > summary{
  font-family:var(--gb-hand);font-size:1.2rem;color:var(--gb-ink);
}
:root[data-theme="ghibli"] details.section > summary:hover{background:#f6efd6}
:root[data-theme="ghibli"] details.section[open] > summary{
  background:linear-gradient(90deg,rgba(91,143,90,.16),rgba(127,183,217,.1));
}
:root[data-theme="ghibli"] details.section > summary .count{
  font-family:var(--gb-font);color:#2c5230;background:#dcebc8;border-color:#a9c993;
}

/* ---------- Affiches : aquarelles encadrees de blanc cassé ---------- */
:root[data-theme="ghibli"] .poster-card.card,
:root[data-theme="ghibli"] .grid a.card{
  padding:7px;background:var(--gb-frame);border:1px solid #e3d6b2;border-radius:20px;
  box-shadow:0 4px 12px rgba(120,84,40,.18),inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .3s ease,box-shadow .3s ease;
}
:root[data-theme="ghibli"] .poster-card .poster-wrap,
:root[data-theme="ghibli"] .grid a.card .poster-wrap{
  position:relative;border-radius:14px;background:#efe4c6;
}
:root[data-theme="ghibli"] .poster-card .poster-wrap img,
:root[data-theme="ghibli"] .grid a.card .poster-wrap img{
  /* teinte douce, comme un lavis : legerement adoucie et rechauffee */
  filter:saturate(.92) sepia(.1) contrast(.97);
}
/* Voile d'aquarelle sur l'affiche : bord assombri chaud + reflet de papier */
:root[data-theme="ghibli"] .poster-card .poster-wrap::after,
:root[data-theme="ghibli"] .grid a.card .poster-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,244,214,.22),transparent 40%);
  box-shadow:inset 0 0 18px rgba(110,80,40,.28);
}
:root[data-theme="ghibli"] .poster-card .poster-wrap .poster-fallback{background:#efe4c6}
:root[data-theme="ghibli"] .poster-card .card-title,
:root[data-theme="ghibli"] .grid a.card .title{color:var(--gb-ink);font-weight:700}
:root[data-theme="ghibli"] .poster-card .card-meta,
:root[data-theme="ghibli"] .grid a.card .title .year{color:var(--text-dim)}
/* Survol : l'ombre « respire » (pulsation lente), la carte se souleve */
:root[data-theme="ghibli"] .poster-card.card:hover,
:root[data-theme="ghibli"] .grid a.card:hover{
  transform:translateY(-4px);border-color:#cbb98d;
  animation:gb-respire 3.6s ease-in-out infinite;
}
@keyframes gb-respire{
  0%,100%{box-shadow:0 8px 20px rgba(120,84,40,.22),0 0 0 0 rgba(127,183,217,.0)}
  50%{box-shadow:0 14px 30px rgba(120,84,40,.3),0 0 0 6px rgba(127,183,217,.28)}
}
/* Pastilles posees sur l'affiche : brun chaud, texte creme */
:root[data-theme="ghibli"] .poster-card .overlay .badge{
  background:rgba(59,47,37,.82);border-color:rgba(255,250,240,.4);color:#fff8e8;
}
:root[data-theme="ghibli"] .poster-card .overlay .badge.s-warn{color:#ffd98a}
:root[data-theme="ghibli"] .poster-card button.btn-remove{
  background:rgba(59,47,37,.82);border-color:rgba(255,250,240,.4);color:#fff8e8;border-radius:50%;
}
:root[data-theme="ghibli"] .poster-card button.btn-remove:hover{
  background:var(--gb-tile);border-color:var(--gb-tile);color:#fff;
}
/* Les items d'une liste sont deplaçables : le curseur reste celui du balisage. */

/* ---------- Champs ---------- */
:root[data-theme="ghibli"] label{color:var(--text-dim);font-weight:700}
:root[data-theme="ghibli"] input,
:root[data-theme="ghibli"] select,
:root[data-theme="ghibli"] textarea{
  background:#fffdf7;border:1.5px solid var(--border);border-radius:16px;color:var(--text);
  box-shadow:inset 0 1px 3px rgba(120,84,40,.1);
}
:root[data-theme="ghibli"] input::placeholder{color:var(--text-faint)}
:root[data-theme="ghibli"] input:focus,
:root[data-theme="ghibli"] select:focus,
:root[data-theme="ghibli"] textarea:focus{
  border-color:var(--gb-sage);box-shadow:0 0 0 4px rgba(127,183,217,.35);outline:none;
}

/* ---------- Boutons : galets de sauge ---------- */
:root[data-theme="ghibli"] button,
:root[data-theme="ghibli"] a.btn{
  font-family:var(--gb-font);font-weight:800;background:var(--gb-sage-dark);color:#fff;
  border:1px solid rgba(47,90,53,.5);border-radius:99px;
  box-shadow:0 2px 0 rgba(47,90,53,.35),0 4px 10px rgba(70,119,74,.22);
  transition:background .2s,box-shadow .25s,transform .12s;
}
:root[data-theme="ghibli"] button:hover,
:root[data-theme="ghibli"] a.btn:hover{
  background:#3a6a3f;color:#fff;box-shadow:0 3px 0 rgba(47,90,53,.35),0 8px 18px rgba(70,119,74,.32);
}
:root[data-theme="ghibli"] button:focus-visible,
:root[data-theme="ghibli"] a:focus-visible{outline:3px solid var(--gb-sky);outline-offset:2px}
:root[data-theme="ghibli"] button.btn-ghost{
  background:rgba(255,250,240,.7);color:var(--text-dim);border-color:var(--border);box-shadow:none;
}
:root[data-theme="ghibli"] button.btn-ghost:hover{background:var(--surface-2);color:var(--gb-ink);box-shadow:none}
:root[data-theme="ghibli"] button.btn-danger{
  background:transparent;color:var(--danger);border-color:rgba(168,58,39,.45);box-shadow:none;
}
:root[data-theme="ghibli"] button.btn-danger:hover{background:var(--danger-soft);color:var(--danger-hover);box-shadow:none}
:root[data-theme="ghibli"] button.btn-remove{
  background:var(--surface);color:var(--danger);border-color:var(--border);box-shadow:var(--shadow-sm);
}
:root[data-theme="ghibli"] button.btn-remove:hover{background:var(--danger-soft);color:var(--danger-hover)}
:root[data-theme="ghibli"] button.btn-mini,
:root[data-theme="ghibli"] button.btn-mini:hover{background:transparent;border:none;box-shadow:none}
:root[data-theme="ghibli"] button.btn-mini{color:var(--text-faint)}
:root[data-theme="ghibli"] button.btn-mini:hover{color:var(--danger)}
:root[data-theme="ghibli"] button:disabled,
:root[data-theme="ghibli"] button:disabled:hover{
  background:var(--surface-2);color:var(--text-faint);border-color:var(--border);box-shadow:none;transform:none;
}
:root[data-theme="ghibli"] button.switch-toggle,
:root[data-theme="ghibli"] button.switch-toggle:hover{
  background:transparent;border:none;box-shadow:none;color:var(--text-dim);
}
:root[data-theme="ghibli"] .switch-track{background:#e6dbbb;border-color:#c9b98f}
:root[data-theme="ghibli"] .switch-thumb{background:#8a7a64}
:root[data-theme="ghibli"] button.switch-toggle[aria-checked="true"] .switch-track{
  background:var(--gb-sage-dark);border-color:#2f5a35;
}
:root[data-theme="ghibli"] button.switch-toggle[aria-checked="true"] .switch-thumb{background:#fff}

/* ---------- Badges : galets colores, texte fonce sur teinte claire ---------- */
:root[data-theme="ghibli"] .badge{font-family:var(--gb-font);font-weight:800;text-transform:none;letter-spacing:.01em;font-size:.8rem}
:root[data-theme="ghibli"] .s-searching{background:var(--warning-soft);color:var(--warning)}
:root[data-theme="ghibli"] .s-downloading,
:root[data-theme="ghibli"] .s-waiting_release{background:rgba(127,183,217,.28);color:#1d5878}
:root[data-theme="ghibli"] .s-validating{background:var(--purple-soft);color:var(--purple)}
:root[data-theme="ghibli"] .s-completed{background:var(--success-soft);color:var(--success)}
:root[data-theme="ghibli"] .s-failed,
:root[data-theme="ghibli"] .s-error{background:var(--danger-soft);color:var(--danger)}
:root[data-theme="ghibli"] .s-needs_review,
:root[data-theme="ghibli"] .s-waiting_space,
:root[data-theme="ghibli"] .s-waiting_approval{background:rgba(217,164,65,.28);color:#6e4606}
:root[data-theme="ghibli"] .s-info{background:rgba(127,183,217,.28);color:#1d5878}
:root[data-theme="ghibli"] .s-warn{background:var(--warning-soft);color:var(--warning)}
:root[data-theme="ghibli"] .s-duplicate_rejected{background:var(--surface-2);color:var(--text-faint);border-color:var(--border)}
:root[data-theme="ghibli"] .chips a:hover .badge{border-color:var(--gb-sage)}
/* Pastille vivante des etats en cours : respiration douce */
:root[data-theme="ghibli"] .s-searching::before,
:root[data-theme="ghibli"] .s-downloading::before,
:root[data-theme="ghibli"] .s-validating::before{animation:gb-souffle 2.4s ease-in-out infinite}
@keyframes gb-souffle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- Tableaux ---------- */
:root[data-theme="ghibli"] th{
  font-family:var(--gb-font);font-weight:800;color:#2f5a35;background:#e3edcf;
  border-bottom:1.5px solid #c5d6a8;
}
:root[data-theme="ghibli"] td{border-bottom-color:var(--border-soft)}
:root[data-theme="ghibli"] tbody tr:hover{background:#f8f0d9}
:root[data-theme="ghibli"] tr.row-link:hover{background:rgba(127,183,217,.2)}
:root[data-theme="ghibli"] td small,
:root[data-theme="ghibli"] .id-num{color:var(--text-faint)}
:root[data-theme="ghibli"] table code{color:var(--text-dim);background:#f3ead0;border-radius:6px;padding:.05rem .3rem}

/* ---------- Alertes, journal, etats vides ---------- */
:root[data-theme="ghibli"] .warn{
  background:#fbe9de;border:1.5px solid rgba(200,85,61,.5);border-radius:var(--radius);color:var(--text);
}
:root[data-theme="ghibli"] .warn strong{color:var(--danger)}
:root[data-theme="ghibli"] .journal li{
  background:var(--surface);border-radius:14px;border-left-width:5px;
}
:root[data-theme="ghibli"] .journal li.lvl-info{border-left-color:var(--gb-sky)}
:root[data-theme="ghibli"] .journal li.lvl-warn{border-left-color:var(--gb-ochre)}
:root[data-theme="ghibli"] .journal li.lvl-error{border-left-color:var(--gb-tile)}
:root[data-theme="ghibli"] .journal time{color:var(--text-faint)}
:root[data-theme="ghibli"] .journal .msg{color:var(--text-dim)}
:root[data-theme="ghibli"] .empty-state{
  font-family:var(--gb-hand);font-size:1.1rem;color:var(--text-dim);
  border:2px dashed var(--border);border-radius:var(--radius);background:rgba(255,250,240,.6);
}
:root[data-theme="ghibli"] .empty-state::before{content:"☘";display:block;font-size:1.6rem;color:var(--gb-sage);margin-bottom:.3rem}

/* Squelettes de recherche : lavis de papier plutot que gris */
:root[data-theme="ghibli"] .skeleton{
  background:linear-gradient(100deg,#f0e6c9 30%,#fbf5e2 50%,#f0e6c9 70%);background-size:250% 100%;
}

/* ---------- Menu de choix du theme ---------- */
:root[data-theme="ghibli"] #theme-menu{
  background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:.45rem;
  box-shadow:var(--shadow);
}
:root[data-theme="ghibli"] #theme-menu button{
  font-family:var(--gb-font);font-weight:700;color:var(--text);box-shadow:none;
  background:transparent;border-color:transparent;border-radius:14px;
}
:root[data-theme="ghibli"] #theme-menu button:hover{background:var(--surface-2);color:var(--gb-ink);box-shadow:none}
:root[data-theme="ghibli"] #theme-menu button[aria-checked="true"]{
  background:#dcebc8;border-color:#7fa66f;color:#24452a;
}

/* ---------- Mobile : nuages et colline plus discrets ---------- */
@media (max-width:640px){
  :root[data-theme="ghibli"] h1{font-size:1.6rem}
  :root[data-theme="ghibli"] h2{font-size:1.25rem}
  :root[data-theme="ghibli"] nav .brand{font-size:1.25rem}
  :root[data-theme="ghibli"] .poster-card.card,
  :root[data-theme="ghibli"] .grid a.card{padding:5px;border-radius:16px}
  :root[data-theme="ghibli"] body::after{height:56px;background-size:560px 56px}
}

/* ---------- Mouvement reduit : plus aucun nuage qui derive ni ombre qui respire ---------- */
@media (prefers-reduced-motion:reduce){
  :root[data-theme="ghibli"] body::before{animation:none!important}
  :root[data-theme="ghibli"] .poster-card.card:hover,
  :root[data-theme="ghibli"] .grid a.card:hover{animation:none!important;box-shadow:var(--shadow)}
  :root[data-theme="ghibli"] .s-searching::before,
  :root[data-theme="ghibli"] .s-downloading::before,
  :root[data-theme="ghibli"] .s-validating::before{animation:none!important}
}