/* ════════ CUTTLIST — COLORIS « AURORA » ════════
   Chargé APRÈS app.css. Chaque coloris ne touche que l'accent, les trois
   foyers du mesh (--a1/--a2/--a3) et les fonds de vignette. Le matériau
   — verre, rayons courts, typographie, ombres — ne bouge jamais.
   L'utilisateur choisit son ambiance depuis le panneau Apparence. */

/* ─── 1 · AURORA (défaut) — violet → cyan, une pointe de rose ─── */
[data-pal="aurora"]{
  --acc:#7C5CFF; --acc-2:#22D3EE; --acc-soft:rgba(124,92,255,.17); --on-acc:#fff;
  --a1:rgba(124,92,255,.42); --a2:rgba(34,211,238,.28); --a3:rgba(236,72,153,.20);
  --v1:linear-gradient(158deg,rgba(124,92,255,.16),rgba(0,0,0,.34));
  --v2:linear-gradient(158deg,rgba(34,211,238,.14),rgba(0,0,0,.34));
  --v3:linear-gradient(158deg,rgba(236,72,153,.13),rgba(0,0,0,.34));
  --v4:linear-gradient(158deg,rgba(61,220,151,.12),rgba(0,0,0,.34));
  --stage:linear-gradient(158deg,rgba(124,92,255,.18),rgba(0,0,0,.4));
}
[data-pal="aurora"][data-theme="light"]{
  --acc:#6B46F5; --acc-2:#0891B2; --acc-soft:rgba(107,70,245,.10);
  --a1:rgba(124,92,255,.16); --a2:rgba(34,211,238,.13); --a3:rgba(236,72,153,.09);
  --v1:linear-gradient(158deg,#E9E6FF,#DAD5F7); --v2:linear-gradient(158deg,#DDF3F8,#CBE8F0);
  --v3:linear-gradient(158deg,#FBE7F1,#F2D8E6); --v4:linear-gradient(158deg,#DEF5EB,#CDEBDD);
  --stage:linear-gradient(158deg,#E9E6FF,#D6D0F5);
}

/* ─── 2 · OCÉAN — bleu électrique → cyan. Le plus lisible. ─── */
[data-pal="ocean"]{
  --acc:#1E5EFF; --acc-2:#38BDF8; --acc-soft:rgba(30,94,255,.18); --on-acc:#fff;
  --a1:rgba(30,94,255,.44); --a2:rgba(56,189,248,.26); --a3:rgba(99,102,241,.18);
  --v1:linear-gradient(158deg,rgba(30,94,255,.17),rgba(0,0,0,.34));
  --v2:linear-gradient(158deg,rgba(56,189,248,.15),rgba(0,0,0,.34));
  --v3:linear-gradient(158deg,rgba(99,102,241,.14),rgba(0,0,0,.34));
  --v4:linear-gradient(158deg,rgba(20,184,166,.12),rgba(0,0,0,.34));
  --stage:linear-gradient(158deg,rgba(30,94,255,.2),rgba(0,0,0,.4));
}
[data-pal="ocean"][data-theme="light"]{
  --acc:#1D4ED8; --acc-2:#0284C7; --acc-soft:rgba(29,78,216,.10);
  --a1:rgba(30,94,255,.16); --a2:rgba(56,189,248,.12); --a3:rgba(99,102,241,.08);
  --v1:linear-gradient(158deg,#E2EAFF,#CFDCFA); --v2:linear-gradient(158deg,#DEF1FC,#C9E6F7);
  --v3:linear-gradient(158deg,#E6E7FD,#D4D6F6); --v4:linear-gradient(158deg,#D9F3EF,#C4E9E2);
  --stage:linear-gradient(158deg,#E2EAFF,#CBD9F8);
}

/* ─── 3 · NÉON — cyan → magenta. Le plus électrique. ─── */
[data-pal="neon"]{
  --acc:#00E5FF; --acc-2:#F472B6; --acc-soft:rgba(0,229,255,.16); --on-acc:#04121A;
  --a1:rgba(0,229,255,.34); --a2:rgba(244,114,182,.26); --a3:rgba(124,92,255,.20);
  --v1:linear-gradient(158deg,rgba(0,229,255,.15),rgba(0,0,0,.36));
  --v2:linear-gradient(158deg,rgba(244,114,182,.14),rgba(0,0,0,.36));
  --v3:linear-gradient(158deg,rgba(124,92,255,.14),rgba(0,0,0,.36));
  --v4:linear-gradient(158deg,rgba(61,220,151,.12),rgba(0,0,0,.36));
  --stage:linear-gradient(158deg,rgba(0,229,255,.16),rgba(0,0,0,.42));
}
[data-pal="neon"][data-theme="light"]{
  --acc:#0E7490; --acc-2:#BE185D; --acc-soft:rgba(14,116,144,.10); --on-acc:#fff;
  --a1:rgba(0,229,255,.13); --a2:rgba(244,114,182,.11); --a3:rgba(124,92,255,.08);
  --v1:linear-gradient(158deg,#DBF6FB,#C6ECF4); --v2:linear-gradient(158deg,#FBE4F0,#F3D2E5);
  --v3:linear-gradient(158deg,#EBE6FE,#DCD4F8); --v4:linear-gradient(158deg,#DDF5EC,#CAEBDE);
  --stage:linear-gradient(158deg,#DBF6FB,#C0E8F2);
}

/* ─── 4 · FORÊT — vert → cyan. Le plus proche du sujet. ─── */
[data-pal="foret"]{
  --acc:#22C58A; --acc-2:#67E8F9; --acc-soft:rgba(34,197,138,.17); --on-acc:#04140C;
  --a1:rgba(34,197,138,.36); --a2:rgba(103,232,249,.24); --a3:rgba(163,230,53,.16);
  --v1:linear-gradient(158deg,rgba(34,197,138,.16),rgba(0,0,0,.34));
  --v2:linear-gradient(158deg,rgba(103,232,249,.14),rgba(0,0,0,.34));
  --v3:linear-gradient(158deg,rgba(163,230,53,.12),rgba(0,0,0,.34));
  --v4:linear-gradient(158deg,rgba(45,212,191,.13),rgba(0,0,0,.34));
  --stage:linear-gradient(158deg,rgba(34,197,138,.18),rgba(0,0,0,.4));
  --ok:#7DE8B4; --ok-soft:rgba(125,232,180,.14);
}
[data-pal="foret"][data-theme="light"]{
  --acc:#0F9D6B; --acc-2:#0E7490; --acc-soft:rgba(15,157,107,.10); --on-acc:#fff;
  --a1:rgba(34,197,138,.15); --a2:rgba(103,232,249,.11); --a3:rgba(163,230,53,.08);
  --v1:linear-gradient(158deg,#DCF5EA,#C7ECDA); --v2:linear-gradient(158deg,#DDF4F9,#C8E9F1);
  --v3:linear-gradient(158deg,#EDF6DC,#DEEDC6); --v4:linear-gradient(158deg,#D9F2EF,#C3E7E2);
  --stage:linear-gradient(158deg,#DCF5EA,#C2E8D6);
}

/* ─── 5 · BRAISE — orange → ambre. La chaleur de l'atelier. ─── */
[data-pal="braise"]{
  --acc:#FF6B2C; --acc-2:#FBBF24; --acc-soft:rgba(255,107,44,.17); --on-acc:#180702;
  --a1:rgba(255,107,44,.36); --a2:rgba(251,191,36,.22); --a3:rgba(236,72,153,.18);
  --v1:linear-gradient(158deg,rgba(255,107,44,.16),rgba(0,0,0,.36));
  --v2:linear-gradient(158deg,rgba(251,191,36,.14),rgba(0,0,0,.36));
  --v3:linear-gradient(158deg,rgba(236,72,153,.13),rgba(0,0,0,.36));
  --v4:linear-gradient(158deg,rgba(168,85,247,.12),rgba(0,0,0,.36));
  --stage:linear-gradient(158deg,rgba(255,107,44,.18),rgba(0,0,0,.42));
  --prem:#FFD27A; --prem-soft:rgba(255,210,122,.14);
}
[data-pal="braise"][data-theme="light"]{
  --acc:#DC5314; --acc-2:#B45309; --acc-soft:rgba(220,83,20,.10); --on-acc:#fff;
  --a1:rgba(255,107,44,.15); --a2:rgba(251,191,36,.11); --a3:rgba(236,72,153,.07);
  --v1:linear-gradient(158deg,#FFE8DC,#FAD7C4); --v2:linear-gradient(158deg,#FDF0D5,#F7E3BB);
  --v3:linear-gradient(158deg,#FCE4EE,#F5D2E2); --v4:linear-gradient(158deg,#F0E6FB,#E3D6F5);
  --stage:linear-gradient(158deg,#FFE8DC,#F8D2BB);
}

/* ─── 6 · AMÉTHYSTE — violet profond → magenta. Le plus dense. ─── */
[data-pal="amethyste"]{
  --acc:#A855F7; --acc-2:#E879F9; --acc-soft:rgba(168,85,247,.18); --on-acc:#fff;
  --a1:rgba(168,85,247,.42); --a2:rgba(232,121,249,.24); --a3:rgba(56,189,248,.16);
  --v1:linear-gradient(158deg,rgba(168,85,247,.17),rgba(0,0,0,.36));
  --v2:linear-gradient(158deg,rgba(232,121,249,.14),rgba(0,0,0,.36));
  --v3:linear-gradient(158deg,rgba(56,189,248,.13),rgba(0,0,0,.36));
  --v4:linear-gradient(158deg,rgba(124,92,255,.14),rgba(0,0,0,.36));
  --stage:linear-gradient(158deg,rgba(168,85,247,.2),rgba(0,0,0,.42));
}
[data-pal="amethyste"][data-theme="light"]{
  --acc:#7E22CE; --acc-2:#C026D3; --acc-soft:rgba(126,34,206,.10);
  --a1:rgba(168,85,247,.15); --a2:rgba(232,121,249,.11); --a3:rgba(56,189,248,.08);
  --v1:linear-gradient(158deg,#F0E4FE,#E2D2FA); --v2:linear-gradient(158deg,#FBE4FD,#F3D2F7);
  --v3:linear-gradient(158deg,#E0EFFC,#CCE2F7); --v4:linear-gradient(158deg,#EAE6FE,#DAD3F9);
  --stage:linear-gradient(158deg,#F0E4FE,#DFCCF9);
}

/* ═══ MODE CARTE « IMAGE PLEINE » ═══
   Le visuel occupe toute la carte ; le texte devient un panneau de verre
   sombre posé dessus. Ne s'applique qu'aux cartes plan : les cartes
   sociales gardent leur forme, ce qui donne du rythme au feed. */
.ovl--in{display:none;margin:0 0 11px}
[data-cards="full"] .card--plan .viz{aspect-ratio:4/5}
[data-cards="full"] .card--plan .ovl--on-viz{display:none}
[data-cards="full"] .card--plan .ovl--in{display:flex}
[data-cards="full"] .card--plan .body{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  border-radius:6px;padding:13px 14px 12px;
  /* une par carte, donc 20 flous sur un feed : un fond dense suffit */
  background:linear-gradient(to top,rgba(6,6,20,.92),rgba(6,6,20,.66));
  border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
[data-cards="full"] .card--plan .body h3,
[data-cards="full"] .card--plan:hover .body h3{color:#fff}
[data-cards="full"] .card--plan .by{color:rgba(255,255,255,.66);margin-bottom:10px}
[data-cards="full"] .card--plan .by b{color:#fff}
[data-cards="full"] .card--plan .stats{border-top-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.6);padding-top:10px}
[data-cards="full"] .card--plan .stats b{color:rgba(255,255,255,.92)}
[data-cards="full"] .card--plan .viz::after{background:linear-gradient(to bottom,
  rgba(0,0,0,.18) 0%,transparent 30%,rgba(0,0,0,.3) 100%)}
/* panneau allégé : au repos le titre et l'auteur suffisent */
@media (hover:hover){
  [data-cards="full"] .card--plan .ovl--in,
  [data-cards="full"] .card--plan .stats{
    max-height:0;opacity:0;overflow:hidden;margin-bottom:0;padding-top:0;border-top-width:0;
    transition:max-height .3s cubic-bezier(.2,.8,.2,1),opacity .22s,margin .3s,padding .3s}
  [data-cards="full"] .card--plan:hover .ovl--in{max-height:60px;opacity:1;margin-bottom:10px}
  [data-cards="full"] .card--plan:hover .stats{max-height:40px;opacity:1;padding-top:10px;border-top-width:1px}
  [data-cards="full"] .card--plan .by{margin-bottom:0;transition:margin .3s}
  [data-cards="full"] .card--plan:hover .by{margin-bottom:10px}
}

/* ─── le sélecteur ─── */
.palbtn{position:relative}
.palpop{position:absolute;top:46px;right:0;width:252px;border-radius:8px;padding:8px;z-index:90;
  display:none;flex-direction:column;gap:2px;
  background:var(--glass-2);backdrop-filter:blur(28px) saturate(1.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--edge);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.12)}
.palpop.on{display:flex}
.palsep{height:1px;background:var(--edge-2);margin:6px 5px}
.palpop h5{font-family:'Space Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:6px 9px 4px}
.palrow{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:5px;cursor:pointer;
  transition:.15s;text-align:left;width:100%}
.palrow:hover{background:var(--glass-3)}
.palrow.on{background:var(--acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 34%,transparent)}
.palrow .sw{width:28px;height:28px;border-radius:5px;flex:none;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.palrow .sw i{position:absolute;right:0;top:0;bottom:0;width:40%;opacity:.95}
.palrow .swIc{background:var(--glass-3);border:1px solid var(--edge-2);display:grid;place-items:center;
  color:var(--muted)}
.palrow .swIc .ic{width:15px;height:15px}
.palrow.on .swIc{color:var(--acc-2);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.palrow b{font-size:.86rem;font-weight:600;display:block}
.palrow em{font-style:normal;font-size:.72rem;color:var(--muted);display:block;line-height:1.3}
.palrow .ck{margin-left:auto;color:var(--acc-2);font-weight:700;opacity:0}
.palrow .ck .ic{width:14px;height:14px;stroke-width:2.4}
.palrow.on .ck{opacity:1}