* { margin:0; padding:0; box-sizing:border-box; }
/* 2026-09-01 : `overflow-x: clip` (et NON `hidden`). `hidden` sur un seul axe force
   l'autre axe à `auto` → <body> devient un conteneur de défilement EN PLUS de <html>.
   Deux scrollers imbriqués = scroll tactile saccadé / qui "accroche" sur iOS Safari
   (et l'ancre de défilement qui saute). `clip` coupe le débordement horizontal SANS
   créer de conteneur scrollable et sans casser `position:sticky`. */
html, body { overflow-x: clip; }
/* 2026-08-31/09-01 : PLUS AUCUNE contrainte `touch-action` sur html/body.
   Toute valeur ≠ `auto` sur l'élément qui EST le conteneur de défilement (ici
   <html>) casse le scroll tactile sur iOS Safari et diverses WebViews — c'était
   la cause de "impossible de scroller avec les doigts, toute la page". On accepte
   le pinch-zoom natif de la page (récupérable, comportement mobile standard) ;
   seul le calendrier garde son zoom 2 doigts dédié (#main-canvas-wrap). */
body {
  /* Fond de page calmé (redesign 2026-08-29) : gamme nuit unifiée, blobs très discrets
     pour rester cohérent avec l'instrument. */
  background:
    radial-gradient(ellipse at 6%  4%,  rgba(46,26,92,0.34) 0%, transparent 46%),
    radial-gradient(ellipse at 95% 95%, rgba(24,20,64,0.30) 0%, transparent 46%),
    radial-gradient(ellipse at 92% 8%,  rgba(34,22,74,0.24) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 40%, rgba(20,14,44,0.30) 0%, transparent 60%),
    #05030f;
  /* Was background-attachment:fixed - a well-known mobile performance killer, forcing
     the browser to repaint this whole gradient background on every scroll frame since
     it has to stay pinned to the viewport while the rest of the page scrolls under it.
     On a memory-constrained embedded WebView this is a very plausible cause of
     content displaying incorrectly at unpredictable points while scrolling, anywhere
     on the page - not specific to any one section. Letting it scroll normally with the
     page content avoids that repaint cost entirely; the visual difference (the
     gradient blobs move with the page instead of staying anchored to the viewport
     corners) is minor. */
  min-height: 100vh;
  font-family: 'Crimson Text', serif;
  color: #e8e0d0;
  /* overflow-x : géré plus haut par `html, body { overflow-x: clip }` */
}
header {
  text-align:center; padding:26px 28px 16px;
  /* Redesign 2026-09-05 : la séparation avec le calendrier est désormais portée par
     .hdr-final-sep (filet + étoile) plutôt que par une bordure rigide. */
  background:
    radial-gradient(ellipse 55% 80% at 50% 34%, rgba(90,60,150,0.24) 0%, transparent 68%),
    linear-gradient(180deg, #0e0820 0%, #060412 100%);
  overflow:hidden;
}
/* ── Décor de profondeur : orbites d'astrolabe, presque invisibles ── */
#hdr-orbits{
  position:absolute; left:50%; top:36%; transform:translate(-50%,-50%);
  width:min(680px,94vw); height:min(680px,94vw);
  pointer-events:none; z-index:0; opacity:0.55;
}
#hdr-orbits svg{ width:100%; height:100%; display:block; }
#hdr-orbits circle{ fill:none; stroke:rgba(212,168,32,0.5); }
/* ── Petite composition céleste au-dessus du titre ── */
.hdr-kicker{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:8px; user-select:none;
}
.hdr-kicker-line{ width:46px; height:1px; background:linear-gradient(90deg,transparent,rgba(212,168,32,0.55)); }
.hdr-kicker span.hdr-kicker-line:last-of-type{ background:linear-gradient(270deg,transparent,rgba(212,168,32,0.55)); }
.hdr-kicker-moon,.hdr-kicker-star{ font-size:14px; color:#e8c060; text-shadow:0 0 10px rgba(232,192,96,0.6); }
/* ── Séparateur discret sous les sous-titres ── */
.hdr-mini-sep{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:10px auto 0; max-width:260px; user-select:none;
}
.hdr-mini-sep-line{ flex:1; height:1px; background:rgba(212,168,32,0.35); }
.hdr-mini-sep-star{ font-size:11px; color:#e8c060; text-shadow:0 0 10px rgba(212,168,32,0.6); }
/* ── Ligne Métatron ∞ [année] ∞ Métatron ── */
.hdr-year-row{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:14px; flex-wrap:nowrap;
}
.hdr-deco{ display:inline-flex; align-items:center; gap:6px; opacity:0.7; flex-shrink:0; }
.hdr-deco svg{ width:28px; height:28px; filter:drop-shadow(0 0 5px rgba(180,140,70,0.45)); }
.hdr-infinity{ font-size:16px; color:#b8935a; text-shadow:0 0 8px rgba(184,147,90,0.5); font-family:serif; line-height:1; user-select:none; }
/* ── Rangée boutons Outils / Polaristar ── */
.hdr-tools-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:12px; flex-wrap:wrap;
}
#account-btn{
  background:rgba(10,6,24,0.45); border:1px solid rgba(212,168,32,0.4);
  color:#c8a050; font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px;
  padding:0 20px; height:40px; border-radius:999px; cursor:pointer; transition:all 0.25s;
  text-transform:uppercase; display:flex; align-items:center; gap:9px;
  box-sizing:border-box;
}
#account-btn:hover{
  border-color:#d4a820; color:#ffe87a; background:rgba(212,168,32,0.07);
  box-shadow:0 0 16px rgba(212,168,32,0.28);
}
/* #header-right-wrap (donc #account-btn) est masqué sur tous les formats — voir le
   bloc roue de raccourcis. L'accès au compte passe par la roue #ps-constella-rfab. */
/* ── Séparation finale, avant le calendrier ── */
.hdr-final-sep{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; position:relative; z-index:1;
}
.hdr-final-sep-line{ flex:1; height:1px; max-width:320px;
  background:linear-gradient(90deg,transparent,#d4a820 40%,#f2dc9c 50%,#d4a820 60%,transparent);
}
.hdr-final-sep-star{ font-size:13px; color:#ffe87a; text-shadow:0 0 14px rgba(212,168,32,0.7); }
#hdrStars {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0.45;
}
header > *:not(#hdrStars):not(#polaristar-home-btn):not(#header-right-wrap):not(#hdr-orbits) { position:relative; z-index:1; }
header h1 {
  font-family:'Cinzel',serif; font-size:88px; letter-spacing:24px; font-weight:700;
  color:#ffe87a; line-height:1;
  text-shadow:
    0 0 18px rgba(255,248,214,0.85),
    0 0 46px rgba(212,168,32,0.55),
    0 0 100px rgba(212,168,32,0.28);
}
header p {
  font-size:15px; letter-spacing:6px; font-weight:600;
  color:#c0a870; margin-top:8px; text-transform:uppercase;
  text-shadow:0 0 16px rgba(212,168,32,0.5);
}
.year-nav {
  display:flex; align-items:center; gap:0; margin:0;
  background:rgba(10,6,24,0.55); border:1px solid rgba(212,168,32,0.45);
  border-radius:999px; padding:5px 6px;
}
.year-nav button {
  background:none; border:none; color:#d4a820; border-radius:50%;
  width:30px; height:30px; font-size:16px; cursor:pointer; transition:all 0.25s;
  display:flex; align-items:center; justify-content:center;
}
.year-nav button:hover { background:rgba(212,168,32,0.18); color:#ffe87a; box-shadow:0 0 12px rgba(212,168,32,0.4); }
.year-nav button:active { transform:scale(0.9); }
.year-nav span { font-family:'Cinzel',serif; font-size:22px; color:#ffe87a; min-width:130px; padding:0 12px; text-align:center; letter-spacing:2px; text-shadow:0 0 16px rgba(212,168,32,0.6); }
/* ── ZOOM : fenêtre fixe (clippe) ▸ couche zoomable (transform) ▸ contenu calendrier ──
   Le scale()/translate() du pinch n'est appliqué QU'À #main-canvas-wrap. #constella-viewport
   reste, lui, immobile et masque tout débordement → le cadran agrandi ne recouvre jamais
   le header ni les outils. z-index:0 + overflow:hidden = contexte d'empilement qui contient
   les aiguilles (.clock-hand z-index:999) sous le contenu du header (z-index:1). */
#constella-viewport {
  position:relative; z-index:0; overflow:clip;
  margin-top:40px;
}
#main-canvas-wrap {
  /* Groupe graphique unique : SVG + graduations + étoile + aiguilles + lune.
     Les .clock-hand sont positionnées relativement à CE conteneur (positionHandDiv)
     et sont mises à l'échelle par le MÊME transform que le SVG → pivot toujours centré. */
  margin-top:0;
}
#main-canvas {
  display:block; width:100%; height:auto; cursor:default;
  /* GPU layer promotion (transform/will-change) is applied via JS in render(), AFTER
     the SVG's content is fully built, not here statically - see the comment there for
     why. */
}
.clock-hand {
  position: absolute;
  z-index: 999;
  border-radius: 2px;
  pointer-events: none;
  transform-origin: 50% 100%;
  /* Les aiguilles sont tournées à chaque seconde (CSS transform) et re-synchronisées
     au zoom : les garder sur une couche compositeur stable évite qu'elles
     "disparaissent" pendant un scroll / pinch-zoom sur mobile. */
  will-change: transform;
  backface-visibility: hidden;
}
/* ── TRIAL BANNER ── */
#trial-banner {
  position:sticky; top:0; z-index:300;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:9px 20px; flex-wrap:wrap;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px;
  background:linear-gradient(90deg,#0e0830,#1e0e50,#0e0830);
  border-bottom:1px solid #d4a82055;
}
#trial-banner.trial-active { color:#c8b870; }
#trial-banner.trial-expired { background:linear-gradient(90deg,#1a0608,#300a10,#1a0608); color:#c07060; border-bottom-color:#c0606055; }
#trial-banner-text { letter-spacing:2px; }
#trial-upgrade-btn {
  background:none; border:1px solid #d4a820; color:#d4a820;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px;
  padding:5px 16px; cursor:pointer; transition:all 0.2s;
}
#trial-upgrade-btn:hover { background:#d4a820; color:#000; }
/* ── PAYWALL MODAL ── */
#paywall-overlay.open { display:flex !important; animation:mFadeIn 0.2s ease; }
#paywall-modal {
  background:linear-gradient(160deg,#100840 0%,#08041a 100%);
  border:1px solid #d4a820; padding:36px 40px 32px;
  width:min(480px,94vw); text-align:center;
  box-shadow:0 0 80px rgba(212,168,32,0.25),0 0 160px rgba(80,20,200,0.2);
}
.pw-stars { font-size:16px; color:#d4a820; letter-spacing:10px; margin-bottom:20px;
  text-shadow:0 0 14px rgba(212,168,32,0.8); }
#paywall-modal h3 {
  font-family:'Cinzel',serif; font-size:20px; letter-spacing:5px;
  color:#ffe87a; margin-bottom:10px;
  text-shadow:0 0 20px rgba(212,168,32,0.5);
}
#paywall-msg { font-family:'Crimson Text',serif; font-size:14px; color:#9a8a68; margin-bottom:20px; }
.pw-price {
  font-family:'Cinzel',serif; font-size:36px; font-weight:700;
  color:#d4a820; margin-bottom:6px;
  text-shadow:0 0 20px rgba(212,168,32,0.6);
}
.pw-price span { font-size:14px; color:#8a7a50; letter-spacing:2px; }
.pw-trial-note { font-size:11px; color:#6a8a50; letter-spacing:1px; margin-bottom:20px; font-family:'Cinzel',serif; }
.pw-features {
  list-style:none; margin:20px 0 24px; text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.pw-features li {
  font-family:'Crimson Text',serif; font-size:13px; color:#c0b070;
  padding:6px 12px; background:rgba(212,168,32,0.05);
  border-left:2px solid #d4a82066;
}
.pw-cta {
  width:100%; padding:14px; margin-bottom:10px;
  background:linear-gradient(135deg,#1a0c50,#3a1880);
  border:1px solid #d4a820; color:#ffe87a;
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px;
  cursor:pointer; transition:all 0.2s;
}
.pw-cta:hover { background:linear-gradient(135deg,#2a1870,#5a2ab0); box-shadow:0 0 30px rgba(212,168,32,0.3); }
.pw-close {
  background:none; border:none; color:#4a3a50;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px;
  cursor:pointer; transition:color 0.2s; padding:6px;
}
.pw-close:hover { color:#8a7a90; }
#tip {
  position:fixed; pointer-events:none; z-index:200;
  background:#0c0918ee; border:1px solid #d4a820;
  padding:16px 22px; font-size:17px; color:#e8e0d0;
  opacity:0; transition:opacity 0.15s; max-width:320px;
  font-family:'Crimson Text',serif;
  box-shadow:0 0 28px rgba(80,40,140,0.5);
}
#tip strong { color:#d4a820; display:block; font-size:20px; margin-bottom:4px; }
#tip em { color:#9a8a68; font-style:normal; font-size:14px; }
#notePopup {
  display:none; position:fixed; z-index:600; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#0c0818; border:1px solid #d4a820;
  padding:24px 28px; min-width:320px;
  font-family:'Crimson Text',serif;
  box-shadow:0 0 60px rgba(80,30,160,0.5);
}
#notePopup h3 { font-family:'Cinzel',serif; color:#d4a820; font-size:14px; letter-spacing:2px; margin-bottom:4px; }
#notePopup em { color:#9a8a68; font-size:12px; display:block; margin-bottom:14px; }
#notePopup textarea {
  width:100%; background:#080518; border:1px solid #2a1840;
  color:#e8e0d0; font-family:'Crimson Text',serif; font-size:14px;
  padding:8px; resize:none; height:70px;
}
#notePopup textarea:focus { outline:none; border-color:#d4a820; }
.popup-btns { display:flex; gap:10px; margin-top:10px; }
.popup-btns button { flex:1; padding:7px; font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px; cursor:pointer; border:none; }
#saveBtn { background:#d4a820; color:#000; }
#saveBtn:hover { background:#f0c030; }
/* ── Rappel ── */
#reminder-row { margin-top:12px; border-top:1px solid #2a1840; padding-top:10px; }
#reminder-row label { display:flex; align-items:center; gap:8px; cursor:pointer; color:#9a8a68; font-size:12px; letter-spacing:1px; font-family:'Cinzel',serif; }
#reminder-row label input[type=checkbox] { accent-color:#d4a820; width:14px; height:14px; cursor:pointer; }
#reminderTime {
  display:none; margin-top:8px; width:100%; box-sizing:border-box;
  background:#080518; border:1px solid #2a1840; color:#e8e0d0;
  padding:7px 10px; font-family:'Crimson Text',serif; font-size:14px;
  color-scheme:dark;
}
#reminderTime:focus { outline:none; border-color:#d4a820; }
#reminder-status { font-size:11px; color:#7a9a68; margin-top:6px; display:none; font-family:'Crimson Text',serif; line-height:1.5; }
#reminder-tip { margin-top:10px; padding:8px 10px; background:rgba(212,168,32,0.08); border-left:2px solid #d4a820; color:#b8983a; font-size:11px; font-family:'Crimson Text',serif; line-height:1.6; border-radius:2px; }
#cancelBtn { background:#120c22; color:#9a8a68; border:1px solid #2a1840; }
#cancelBtn:hover { background:#1e1438; color:#e8e0d0; }

/* ── MON COMPTE + OUTILS (redesign 2026-09-05 : rangée capsule sous le sélecteur d'année) ── */
#header-right-wrap {
  display:flex; align-items:center; justify-content:center; gap:12px;
}

/* Quêtes (ex-onglet "Missions" du bas, remonté ici pour être bien visible) */
.quests-book-btn {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,#3a1880,#c8a050);
  border:1px solid rgba(200,160,80,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; transition:all 0.2s;
}
.quests-book-btn:hover { box-shadow:0 0 14px rgba(212,168,32,0.4); transform:scale(1.06); }
.quests-book-btn.active { box-shadow:0 0 0 2px #d4a820, 0 0 14px rgba(212,168,32,0.5); }

/* Logo POLARISTAR = bouton retour à l'accueil (index.html) — flottant, symétrique au bouton S'abonner */
#polaristar-home-btn {
  position:fixed; bottom:28px; left:28px; z-index:8888;
  width:56px; height:56px; border-radius:50%;
  background:#000;
  border:1px solid rgba(212,168,32,0.7);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-size:15px; color:#fff; text-decoration:none; cursor:pointer;
  /* Ombre floue réduite (60px→22px) : un position:fixed avec une grosse ombre se
     re-rasterise à chaque frame quand la barre d'URL mobile se replie au scroll →
     la couche "saute" (bouton qui clignote). On NE met PAS de transform/will-change
     ici : cet élément est enfant de <header> (overflow:hidden) et le promouvoir en
     couche composée le faisait remonter/clipper sur certains navigateurs mobiles. */
  box-shadow:0 0 18px rgba(212,168,32,0.35), 0 0 22px rgba(212,168,32,0.14);
  transition:box-shadow 0.2s, transform 0.2s; flex-shrink:0;
}
#polaristar-home-btn:hover { box-shadow:0 0 24px rgba(212,168,32,0.55); transform:scale(1.06); }
@media(max-width:900px){
  /* `clip` et non `hidden` : `hidden` forçait <body> en conteneur de défilement
     (overflow-y devenait `auto`) EN PLUS de <html> → sur iOS le scroll tactile
     devenait saccadé / "accrochait" et l'ancre de scroll sautait. `clip` masque
     le débordement horizontal sans créer de scroller ni casser `position:sticky`.
     Pas de `!important` : les modales font `body.style.overflow='hidden'` en inline
     pour verrouiller le fond — un `!important` ici l'annulerait. */
  html, body { overflow-x:clip; }

  /* ── Header ── */
  header {
    padding: 12px 16px 8px !important;
    position: relative !important;
  }
  header h1 {
    font-size: clamp(22px, 6.5vw, 48px) !important;
    letter-spacing: clamp(4px, 1.4vw, 16px) !important;
    /* No white-space:nowrap: once the Cinzel webfont swaps in (it's wider than the
       fallback font), a hard nowrap here clipped the title invisibly against
       header's overflow:hidden instead of reflowing - looked like the title
       flickering/disappearing right after load. Wrapping to 2 lines in the rare
       case it's still too wide is far better than invisible clipped text. */
    max-width: 100%;
    overflow-wrap: break-word;
  }
  header p { margin-top: 4px !important; }
  .year-nav { gap: 10px !important; margin-top: 5px !important; padding: 4px 5px !important; }
  /* Header resserré : la rangée Outils/FR-EN/Compte est masquée sur mobile
     (demande user 2026-09-06), on récupère sa hauteur pour le calendrier. */
  .hdr-kicker { margin-bottom: 4px !important; }
  .hdr-mini-sep { margin-top: 8px !important; }
  .hdr-year-row { margin-top: 10px !important; }
  .hdr-final-sep { margin-top: 12px !important; }

  /* ── Symboles : déjà petits (60px/30px) dans le HTML — juste centrage ── */
  #header-deco-left, #header-deco-right {
    display: flex !important; align-items: center !important;
    z-index: 20 !important;
  }
  /* Année et nav : capsule resserrée (demande user 2026-09-05) */
  .year-nav span   { font-size: 14px !important; min-width: 60px !important; padding: 0 6px !important; }
  .year-nav button { width: 32px !important; height: 32px !important; font-size: 13px !important; }

  /* Zones tactiles ≥ 44px (redesign 2026-08-29) */
  .nav-tab { min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  #account-btn { min-height: 40px !important; }
  .quests-book-btn { width: 40px !important; height: 40px !important; }

  /* Header laissé en overflow:visible (le titre Cinzel se faisait rogner en
     overflow:hidden — voir note sur header h1). */
  body > header { overflow: visible !important; }
}
/* Très petit mobile (< 480px) */
@media(max-width:480px){
  header { padding: 10px 10px 6px !important; }
  header h1 {
    font-size: clamp(17px, 6vw, 30px) !important;
    letter-spacing: clamp(2px, 1.1vw, 8px) !important;
  }
  .hdr-deco svg { width: 20px !important; height: 20px !important; }
  .hdr-infinity { font-size: 12px !important; }
  .hdr-year-row { gap: 6px !important; }
  .year-nav span { font-size: 12px !important; min-width: 48px !important; padding: 0 4px !important; }
  .year-nav button { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  /* #header-right-wrap (Mon Compte) est masqué ≤767px — plus de styles compacts à
     lui appliquer ici (Outils + FR/EN retirés, demande user 2026-09-06). */

  /* ── Calendrier SVG : taille gérée par JS, juste centrage ── */
  #constella-viewport { margin-top: 2px !important; }
  #main-canvas-wrap { margin-top: 0 !important; }
  body > header { overflow: visible !important; }
  #main-canvas {
    max-width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Onglets navigation : coller sous le calendrier ── */
  #bottom-nav {
    flex-wrap: wrap !important;
    padding: 12px 8px 8px !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  .nav-tab {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    padding: 10px 6px !important;
    text-align: center !important;
  }
  #bottom-nav #tab-sky { flex: 1 1 100% !important; }
}
/* Taille desktop des décorations header */
@media(min-width:901px){
  .hdr-deco { gap:8px; }
  .hdr-deco svg { width:32px !important; height:32px !important; }
  .hdr-infinity { font-size:18px !important; }
}
#account-btn .acct-avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#3a1880,#d4a820);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; font-weight:700; flex-shrink:0;
}

#account-overlay {
  display:none; position:fixed; inset:0; z-index:700;
  background:rgba(2,0,12,0.85); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#account-overlay.open { display:flex; animation:mFadeIn 0.22s ease; }
#account-modal {
  background:linear-gradient(160deg,#12082e 0%,#08041a 100%);
  border:1px solid #3a2060; width:min(420px,94vw);
  /* The logged-in view now also shows editable pseudo/email/password fields
     below the plan banner, which can run taller than the viewport on phones -
     without this the extra fields were just clipped off-screen with no way
     to scroll down to them. */
  max-height:90vh; overflow-y:auto;
  box-shadow:0 0 60px rgba(80,20,180,0.3); position:relative;
}
.acct-modal-header {
  padding:28px 32px 0;
  border-bottom:1px solid #1e1240;
}
.acct-modal-header h2 {
  font-family:'Cinzel',serif; font-size:20px; letter-spacing:5px;
  color:#ffe87a; margin-bottom:20px;
  text-shadow:0 0 20px rgba(212,168,32,0.4);
}
.acct-tabs { display:flex; gap:0; }
.acct-tab {
  flex:1; padding:10px; background:none; border:none;
  border-bottom:2px solid transparent;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px;
  color:#6a5a40; cursor:pointer; transition:all 0.2s; text-transform:uppercase;
}
.acct-tab.active { color:#d4a820; border-bottom-color:#d4a820; }
.acct-tab:hover:not(.active) { color:#a09060; }
.acct-modal-body { padding:28px 32px 32px; }
.acct-field { margin-bottom:18px; }
.acct-field label {
  display:block; font-family:'Cinzel',serif; font-size:10px;
  letter-spacing:2px; color:#8a7a60; text-transform:uppercase; margin-bottom:7px;
}
.acct-field input {
  width:100%; background:#080518; border:1px solid #2a1840;
  color:#e8e0d0; font-family:'Crimson Text',serif; font-size:15px;
  padding:10px 12px; transition:border-color 0.2s; outline:none;
}
.acct-field input:focus { border-color:#d4a820; }
.acct-field input::placeholder { color:#4a3a50; }
.acct-submit {
  width:100%; padding:12px; margin-top:8px;
  background:linear-gradient(135deg,#1a0c50,#3a1880);
  border:1px solid #d4a820; color:#ffe87a;
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px;
  cursor:pointer; transition:all 0.2s; text-transform:uppercase;
}
.acct-submit:hover { background:linear-gradient(135deg,#2a1870,#5a2ab0); box-shadow:0 0 24px rgba(212,168,32,0.25); }
.acct-divider {
  text-align:center; margin:20px 0 16px;
  font-size:11px; color:#4a3a50; letter-spacing:2px;
  position:relative;
}
.acct-divider::before, .acct-divider::after {
  content:''; position:absolute; top:50%; width:38%; height:1px; background:#1e1240;
}
.acct-divider::before { left:0; } .acct-divider::after { right:0; }
.acct-msg { font-family:'Crimson Text',serif; font-size:13px; margin-top:14px; text-align:center; min-height:18px; }
.acct-msg.ok { color:#60c060; } .acct-msg.err { color:#c06060; }
.acct-plan-banner {
  background:linear-gradient(135deg,#10082a,#1e1060);
  border:1px solid #d4a82055; padding:16px 18px; margin-top:20px;
}
.acct-plan-banner h4 {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px;
  color:#d4a820; margin-bottom:6px;
}
.acct-plan-banner p { font-size:12px; color:#8a7a60; line-height:1.6; }
.acct-plan-banner .plan-cta {
  display:block; margin-top:12px; width:100%; padding:10px;
  background:#d4a820; color:#000; border:none;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px;
  cursor:pointer; text-transform:uppercase; transition:background 0.2s;
}
.acct-plan-banner .plan-cta:hover { background:#f0c030; }
#account-close {
  position:absolute; top:14px; right:16px;
  background:none; border:1px solid #2a1840; color:#6a5a40;
  width:28px; height:28px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
#account-close:hover { border-color:#d4a820; color:#d4a820; }
.acct-logged { text-align:center; }
.acct-logged-avatar {
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg,#3a1880,#d4a820);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; font-weight:700;
  box-shadow:0 0 20px rgba(212,168,32,0.3);
}
.acct-logged-avatar.has-img { background:none; overflow:hidden; border:1px solid rgba(212,168,32,.5); box-shadow:0 0 22px rgba(212,168,32,.45); }
.acct-logged-avatar.has-img img { width:100%; height:100%; object-fit:cover; display:block; }
.acct-logged-email { font-family:'Cinzel',serif; font-size:13px; letter-spacing:2px; color:#c8b880; margin-bottom:6px; }
.acct-plan-badge {
  display:inline-block; padding:3px 12px; border-radius:2px;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px;
  margin-bottom:20px;
}
.acct-plan-badge.free { background:#1a1230; color:#6a5a40; border:1px solid #2a1840; }
.acct-plan-badge.premium { background:linear-gradient(135deg,#3a1880,#7a3a00); color:#ffe87a; border:1px solid #d4a820; }
.acct-plan-badge.polaris { background:linear-gradient(135deg,#3a1080,#7020c0); color:#f0e0ff; border:1px solid #a060e0; }
.acct-plan-badge.galactik { background:#000; color:#fff; border:1px solid rgba(255,255,255,.6); }
/* Carte plan POLARIS 33,33 € — habillage arc-en-ciel */
.ct-plan-rainbow {
  border:3px solid transparent;
  border-image:linear-gradient(115deg,#ff3d6d 0%,#ff9f1c 22%,#ffe94d 40%,#2ee6a0 58%,#3a86ff 76%,#c34bff 100%) 1;
  background:linear-gradient(160deg,rgba(26,9,56,.95),rgba(9,4,24,.95)) padding-box;
  box-shadow:0 0 34px rgba(255,80,120,.16), 0 0 60px rgba(120,80,255,.18);
}
.ct-plan-rainbow::after {
  content:''; position:absolute; left:0; right:0; top:0; height:4px; pointer-events:none;
  background:linear-gradient(90deg,#ff3d6d,#ff9f1c,#ffe94d,#2ee6a0,#3a86ff,#c34bff,#ff3d6d);
}
.ct-plan-rainbow .ctpr-name {
  background:linear-gradient(90deg,#ff5d7a,#ffb020,#ffe94d,#3ce68f,#39a0ff,#c85bff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,150,120,.5));
}
.ct-plan-rainbow .ctpr-badge { background:linear-gradient(90deg,#ff8888,#ffcc55,#66ee88,#55ccff,#cc66ff); color:#160a04; }
.ct-plan-rainbow .ctpr-btn { background:linear-gradient(135deg,#8020c0,#c04010,#204090); border:1px solid rgba(255,255,255,.28); color:#fff; }
.acct-logout {
  width:100%; padding:10px; background:none;
  border:1px solid #2a1840; color:#6a5a60;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px;
  cursor:pointer; text-transform:uppercase; transition:all 0.2s;
}
.acct-logout:hover { border-color:#c06060; color:#c06060; }

/* ── BOTTOM NAV ── */
#bottom-nav {
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:10px;
  padding:30px 30px 10px;
  margin-top:80px;
  /* Filet doré au-dessus des outils, assorti au header/footer (demande user 2026-09-01). */
  border-top:2px solid #d4a820;
  border-image:linear-gradient(90deg,rgba(212,168,32,0) 0%,#d4a820 22%,#f2dc9c 50%,#d4a820 78%,rgba(212,168,32,0) 100%) 1;
  box-shadow:0 -3px 16px rgba(212,168,32,0.16);
}
.nav-tab {
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:4px;
  text-transform:uppercase; color:#c8a870; background:none;
  border:1px solid #5a3a78; padding:12px 28px; cursor:pointer;
  text-shadow:0 0 10px rgba(180,130,80,0.35);
  transition:all 0.3s;
}
.nav-tab:hover { border-color:#d4a820; color:#d4a820; box-shadow:0 0 14px rgba(212,168,32,0.2); }
.nav-tab.active {
  background:#d4a820; color:#0a0a0a; border-color:#d4a820;
  box-shadow:0 0 20px rgba(212,168,32,0.35);
}
.nav-tab.locked {
  opacity:0.42; cursor:not-allowed; border-color:#3a2050;
  color:#6a5080; text-shadow:none;
}
.nav-tab.locked:hover { border-color:#3a2050; color:#6a5080; box-shadow:none; }
.nav-tab.locked::after { content:' ⬡'; font-size:10px; opacity:0.6; }
/* #tab-missions n'est qu'un ancrage pour toggleSection() — l'accès Quêtes se fait par le
   raccourci flottant #sub-fab (bas-droite). Ne JAMAIS l'afficher (le `display:flex!important`
   mobile de .nav-tab annulait son `display:none` inline → bouton « Quêtes » parasite). */
#tab-missions { display: none !important; }

/* Onglet « Horloge Solaire/Lunaire » : seul sur sa ligne, AU-DESSUS des autres */
.nav-break { flex-basis:100% !important; width:100%; height:0; margin:0; padding:0; border:0; }
#bottom-nav #tab-sky { flex:0 0 auto !important; margin-bottom:4px; }

/* ── IMMERSION ASTRAE ──────────────────────────────────────────────────────
   Tokens repris À L'IDENTIQUE du :root de astrae.html — l'onglet + la section
   « ASTRAE » de Constella empruntent exactement l'identité chromatique d'Astrae
   (or chaud sur bleu-nuit très sombre, violet uniquement en halo ambiant).
   Portée limitée à ces deux sélecteurs : le reste de Constella n'est pas touché.
   ────────────────────────────────────────────────────────────────────────── */
#astral-section, .nav-tab-astrae {
  --bg:      #05051a;
  --gold:    #c9a84c;
  --gold-l:  #e8d5a3;
  --purple:  #7b5ea7;
  --text:    #e6dac2;
  --dim:     #c2b48f;
  --border:  rgba(201,168,76,0.25);
  --glow:    rgba(201,168,76,0.45);
  --purple-glow: rgba(123,94,167,0.18);
}

/* ── BOUTON ASTRAE · Thème de Vie ── */
.nav-tab-astrae {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 42px 12px;
  border-color:var(--purple);
  background:linear-gradient(160deg,#0a0730 0%,#140d3a 60%,#0a0730 100%);
  box-shadow:0 0 18px var(--purple-glow), inset 0 0 14px rgba(123,94,167,0.06);
  position:relative; overflow:hidden; white-space:nowrap;
}
.nav-tab-astrae::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,0.08) 50%,transparent 100%);
  animation:astraeShimmer 3s ease-in-out infinite;
}
@keyframes astraeShimmer {
  0%,100%{opacity:0} 50%{opacity:1}
}
.nta-sub {
  font-family:'Cinzel Decorative',cursive; font-size:13px; letter-spacing:8px;
  color:var(--gold-l); text-transform:uppercase; line-height:1;
  text-shadow:0 0 14px var(--glow), 0 0 34px rgba(201,168,76,0.25);
}
.nta-main {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:4px;
  color:var(--dim); text-transform:uppercase; line-height:1.3;
}
.nav-tab-astrae:hover {
  border-color:var(--gold);
  box-shadow:0 0 28px var(--glow), 0 0 50px var(--purple-glow), inset 0 0 20px rgba(201,168,76,0.08);
}
.nav-tab-astrae:hover .nta-sub  { color:#fff8e0; text-shadow:0 0 18px rgba(255,240,180,0.9); }
.nav-tab-astrae:hover .nta-main { color:var(--gold-l); }
.nav-tab-astrae.active {
  background:linear-gradient(160deg,#120d50 0%,#2e1a80 60%,#120d50 100%);
  border-color:var(--gold);
  box-shadow:0 0 30px var(--glow), 0 0 60px rgba(123,94,167,0.3);
}
.nav-tab-astrae.active .nta-sub  { color:var(--gold-l); text-shadow:0 0 22px var(--glow), 0 0 50px rgba(201,168,76,0.4); }
.nav-tab-astrae.active .nta-main { color:var(--gold-l); }

/* ── THÈME ASTRAL ── */
#astral-section { text-align:left; }
.astral-grid { display:grid; grid-template-columns:370px 1fr; gap:2.5rem; align-items:start; margin-bottom:2rem; }
@media(max-width:900px){ .astral-grid { grid-template-columns:1fr; } }
.astral-label { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.2rem; color:var(--gold); text-transform:uppercase; margin-bottom:.9rem; opacity:.9; }
.astral-card {
  background:rgba(8,8,50,.65);
  border:1px solid var(--border);
  border-radius:14px; padding:1.8rem 1.6rem; margin-bottom:1rem;
  box-shadow:0 0 40px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.astral-card:hover {
  border-color:var(--gold);
  box-shadow:0 0 46px rgba(201,168,76,0.24), 0 0 70px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,0.07);
  transform:translateY(-2px);
}
.astral-glyph-badge {
  width:86px; height:86px; margin:.7rem auto .9rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:currentColor;
  background:rgba(201,168,76,0.05);
  border:1px solid rgba(201,168,76,0.2);
  box-shadow:0 0 24px var(--glow), inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow:0 0 20px currentColor;
}
.astral-sign-name {
  font-family:'Cinzel Decorative',cursive; font-size:1.5rem; letter-spacing:1px; color:var(--gold-l);
  margin-bottom:.6rem; font-weight:400; text-shadow:0 0 20px var(--glow);
}
.astral-sign-desc {
  font-family:'Crimson Text',serif; font-size:1rem; color:var(--gold-l); opacity:.82;
  line-height:1.75; font-style:italic;
}
.planet-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(5,5,26,.85); border:1px solid var(--border); border-radius:8px; margin-bottom:5px; }
.aspect-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.astrae-btn {
  display:inline-block; margin:0; padding:.9rem 2.8rem;
  background:linear-gradient(135deg,#120d50,#2e1a80);
  border:1px solid var(--gold); border-radius:50px;
  color:var(--gold-l); font-family:'Cinzel Decorative',cursive; font-size:.95rem; letter-spacing:.2rem;
  text-decoration:none; text-transform:none; font-weight:400;
  box-shadow:0 0 20px rgba(201,168,76,0.18);
  transition:all .3s; position:relative; overflow:hidden;
}
.astrae-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.12),transparent);
  transform:translateX(-100%); transition:transform .5s;
}
.astrae-btn:hover::before { transform:translateX(100%); }
.astrae-btn:hover {
  background:linear-gradient(135deg,#1e1470,#4a28b0);
  border-color:var(--gold); color:#fff8e0;
  box-shadow:0 0 40px rgba(201,168,76,0.38);
  transform:translateY(-2px);
}

/* ── GUIDE LUNAIRE ── */
#lunar-guide {
  display:none;
  max-width:1400px; margin:0 auto; padding:40px 30px 80px;
}
#lunar-guide.visible { display:block; }

/* ── AGRICULTURE LUNAIRE (onglet dédié, ex « Jardinage Lunaire ») ── */
#agri-lunaire {
  display:none;
  max-width:1400px; margin:0 auto; padding:40px 30px 80px;
}
#agri-lunaire.visible { display:block; }
#astral-section {
  display:none;
  max-width:1400px; margin:0 auto; padding:50px 30px 80px;
  text-align:center;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(123,94,167,0.16) 0%, transparent 70%),
    var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
}
#astral-section::before {
  content:'✦ · · · ✦ · · · ✦';
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-size:9px; letter-spacing:10px; color:rgba(201,168,76,0.3);
  pointer-events:none;
}
#astral-section.visible { display:block; }
#astral-section h2 {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin-bottom:10px; border:none; background:none;
}
.astral-h2-astrae {
  font-family:'Cinzel Decorative',cursive; font-size:11px; letter-spacing:14px;
  color:var(--purple); opacity:.9; text-transform:uppercase;
  text-shadow:0 0 18px rgba(123,94,167,0.6);
}
.astral-h2-title {
  font-family:'Cinzel Decorative',cursive; font-size:34px; letter-spacing:.2rem;
  color:var(--gold-l); text-transform:uppercase; line-height:1.1;
  text-shadow:0 0 30px var(--glow), 0 0 70px rgba(201,168,76,0.25);
}
#astral-section .guide-subtitle {
  font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.4rem;
  color:var(--dim); text-transform:uppercase; margin-bottom:50px;
}
#astral-section .coming-soon {
  font-family:'Crimson Text',serif; font-size:18px; color:var(--dim);
  font-style:italic; margin-top:60px; opacity:.7;
}
#lunar-guide h2, #agri-lunaire h2 {
  font-family:'Cinzel',serif; font-size:28px; letter-spacing:8px;
  color:#d4a820; text-align:center; margin-bottom:6px;
  text-shadow:0 0 30px rgba(212,168,32,0.4);
}
#lunar-guide .guide-subtitle, #agri-lunaire .guide-subtitle {
  text-align:center; font-size:13px; letter-spacing:3px;
  color:#8a7a60; text-transform:uppercase; margin-bottom:50px;
}
.phase-block {
  margin-bottom:60px; border:1px solid #1a1230; border-radius:4px;
  background:radial-gradient(ellipse 130% 100% at 22% -10%, color-mix(in srgb, var(--phase-accent,#6a4ad0) 16%, #0c0a18) 0%, #0c0a18 55%, #08060f 100%);
  overflow:hidden; transition:border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.phase-block.phase-active {
  border-color:rgba(212,168,32,0.9);
  background:radial-gradient(ellipse 130% 100% at 22% -10%, color-mix(in srgb, var(--phase-accent,#6a4ad0) 24%, #131020) 0%, #131020 55%, #0a0818 100%);
  box-shadow:0 0 40px rgba(212,168,32,0.35), 0 0 80px rgba(212,168,32,0.15), inset 0 0 60px rgba(212,168,32,0.08);
}
.phase-block.phase-active .phase-header {
  background:rgba(212,168,32,0.08);
}
.phase-header {
  display:flex; align-items:stretch; border-bottom:1px solid #1a1230;
  background:linear-gradient(120deg, color-mix(in srgb, var(--phase-accent,#6a4ad0) 14%, transparent) 0%, transparent 65%);
}
.phase-title-cell {
  min-width:200px; padding:24px 28px;
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid #1a1230;
}
.phase-title-cell h3 {
  font-family:'Cinzel',serif; font-size:20px; letter-spacing:3px; margin-bottom:4px;
  text-shadow:0 0 16px currentColor;
}
.phase-title-cell .phase-days {
  font-size:15px; color:#a09070; letter-spacing:2px;
  font-family:'Cinzel',serif;
}
.phase-title-cell .phase-emoji {
  font-size:32px; margin-bottom:6px;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--phase-accent,#d4a820) 70%, transparent));
}
.phase-info-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  flex:1;
}
.phase-info-item {
  padding:16px 18px; border-right:1px solid #1a1608;
  display:flex; flex-direction:column; gap:5px;
}
.phase-info-item:last-child { border-right:none; }
.phase-info-item .info-label {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px;
  color:#9a8a70; text-transform:uppercase;
}
.phase-info-item .info-value {
  font-family:'Crimson Text',serif; font-size:17px; color:#d8c890;
  line-height:1.5;
}

/* Circaseptan table */
.circa-table {
  width:100%; border-collapse:collapse;
}
.circa-table th {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px;
  color:#9a8a70; text-transform:uppercase; padding:12px 14px;
  text-align:left; border-bottom:1px solid #1a1230;
  background:linear-gradient(180deg,#0d0c1e 0%,#090818 100%);
}
.circa-table td {
  font-family:'Crimson Text',serif; font-size:16px; color:#c8b898;
  padding:11px 14px; border-bottom:1px solid #100e1e;
  vertical-align:top; transition:background 0.25s;
}
.circa-table tr:last-child td { border-bottom:none; }
.circa-table tr:hover td { background:#151228; }
.circa-day-num {
  font-family:'Cinzel',serif; font-size:13px; color:#7a6a50;
  min-width:28px; display:inline-block;
}
.circa-phase-name {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px; font-weight:700;
  text-shadow:0 0 10px currentColor;
}
.circa-desc {
  font-size:15px; color:#bcae90; line-height:1.6;
}
.circa-note {
  font-size:15px; color:#ac9c7e; font-style:italic;
}
.color-dot {
  display:inline-block; width:12px; height:12px; border-radius:50%;
  margin-right:6px; vertical-align:middle;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, currentColor 45%, #fff) 0%, currentColor 55%, color-mix(in srgb, currentColor 70%, #000) 100%) !important;
  box-shadow:0 0 6px currentColor, 0 0 16px color-mix(in srgb, currentColor 65%, transparent), inset 0 -1px 2px rgba(0,0,0,0.45);
}
.chakra-badge {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:1px;
  padding:3px 10px; border:1px solid #2a2010; border-radius:2px;
  display:inline-block;
  background:color-mix(in srgb, currentColor 16%, transparent);
  text-shadow:0 0 8px currentColor;
}
.note-badge {
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:1px;
  color:#e0c888;
  text-shadow:0 0 8px rgba(212,168,32,0.45);
}


@media(max-width:900px){
  .phase-header { flex-direction:column; }
  .phase-info-grid { grid-template-columns:repeat(2,1fr); }
  .phase-title-cell { min-width:auto; border-right:none; border-bottom:1px solid #1a1608; }
  .circa-table { font-size:11px; }
  .circa-table th, .circa-table td { padding:6px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   AGRICULTURE LUNAIRE — identité « almanach lunaire agricole »
   Vert végétal · terre · beige · argent lunaire · or discret.
   Interface cyclique, contemplative, temporelle.
   ══════════════════════════════════════════════════════════════════════ */
#agri-lunaire{
  --gl-green:#5cbf82; --gl-green-deep:#2f7a4c; --gl-leaf:#3a6b46;
  --gl-earth:#a98a5f; --gl-earth-deep:#6b543a; --gl-beige:#d9ccb2;
  --gl-silver:#c6d4e2; --gl-silver-dim:#8fa2b6; --gl-gold:#d8b74a;
  --gl-ink:#d3ddcf; --gl-ink-dim:#93a78f;
  --gl-panel:linear-gradient(165deg,#101a13 0%,#0c130e 100%);
  --gl-line:rgba(120,150,120,.16);
}
.garden-widget{
  margin-bottom:56px; border:1px solid var(--gl-line); border-radius:18px;
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(198,212,226,.06) 0%, transparent 55%),
    radial-gradient(130% 70% at 10% 110%, rgba(92,191,130,.07) 0%, transparent 55%),
    var(--gl-panel);
  box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  padding:0; overflow:hidden;
}
/* fine trame organique quasi invisible */
.garden-widget::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(150,180,150,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.garden-widget{ position:relative; }

/* ── HERO : la Lune ── */
.gl-hero{
  display:grid; grid-template-columns:minmax(150px,190px) 1fr; gap:34px; align-items:center;
  padding:38px 36px 34px;
  background:linear-gradient(180deg, rgba(198,212,226,.05), transparent 70%);
  border-bottom:1px solid var(--gl-line);
}
.gl-moon-wrap{ display:flex; justify-content:center; }
.gl-moon{
  position:relative; width:100%; max-width:180px; aspect-ratio:1;
  animation:glMoonIn 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes glMoonIn{ from{ opacity:0; transform:scale(.82) } to{ opacity:1; transform:scale(1) } }
.gl-moon svg{ width:100%; height:100%; display:block;
  filter:drop-shadow(0 0 26px rgba(198,212,226,.28)) drop-shadow(0 0 60px rgba(150,175,205,.14)); }
.gl-moon-halo{
  position:absolute; inset:-18%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,214,228,.16) 0%, transparent 62%);
  animation:glHalo 6s ease-in-out infinite;
}
@keyframes glHalo{ 0%,100%{ opacity:.5; transform:scale(.98) } 50%{ opacity:1; transform:scale(1.03) } }

.gl-hero-info{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.gl-phase-name{
  font-family:'Cinzel',serif; font-size:clamp(19px,3.4vw,26px); letter-spacing:2px;
  color:var(--gl-silver); text-shadow:0 0 24px rgba(198,212,226,.25);
}
.gl-phase-meta{ font-family:'Crimson Text',serif; font-size:15px; color:var(--gl-ink-dim); line-height:1.6; }
.gl-phase-meta b{ color:var(--gl-beige); font-weight:600; }
.gl-illum-bar{ height:5px; border-radius:3px; background:rgba(198,212,226,.12); overflow:hidden; margin:4px 0 2px; max-width:260px; }
.gl-illum-fill{ height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--gl-silver-dim), var(--gl-silver));
  transition:width 1s cubic-bezier(.2,.8,.2,1); }

/* ── Cycle circulaire (Nouvelle → 1er Q → Pleine → Dernier Q) ── */
.gl-cycle{ display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap; }
.gl-cycle svg{ width:96px; height:96px; flex-shrink:0; }
.gl-cycle-legend{ font-family:'Crimson Text',serif; font-size:13.5px; color:var(--gl-ink-dim); line-height:1.7; }
.gl-cycle-legend b{ color:var(--gl-green); font-weight:600; }
.gl-next{
  font-family:'Crimson Text',serif; font-size:13.5px; color:var(--gl-ink-dim); font-style:italic;
  border-left:2px solid var(--gl-leaf); padding-left:12px; margin-top:4px;
}
.gl-next b{ color:var(--gl-beige); font-style:normal; }

/* ── Bloc AUJOURD'HUI ── */
.gl-today{ padding:32px 36px 30px; }
.gl-today-head{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:5px; text-transform:uppercase;
  color:var(--gl-green); margin-bottom:4px;
  display:flex; align-items:center; gap:12px;
}
.gl-today-head::after{ content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(92,191,130,.4), transparent); }
.garden-today-line{
  font-family:'Crimson Text',serif; font-size:15.5px; color:var(--gl-ink); line-height:1.7;
  margin:6px 0 20px;
}
.garden-today-line strong{ color:var(--gl-beige); font-style:normal; }

.gl-species-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.garden-select{
  flex:1 1 220px; min-width:0;
  background:#0c1510; border:1px solid rgba(120,150,120,.3); border-radius:12px;
  color:var(--gl-beige); font-family:'Cinzel',serif; font-size:16px; font-weight:600; letter-spacing:1px;
  padding:13px 18px; outline:none; cursor:pointer;
  transition:border-color .25s, box-shadow .25s;
}
.garden-select:hover{ border-color:rgba(92,191,130,.6); }
.garden-select:focus{ border-color:var(--gl-green); box-shadow:0 0 0 3px rgba(92,191,130,.14); }
.garden-select optgroup{ background:#0c1510; color:var(--gl-green); }
.garden-select option{ background:#0c1510; color:var(--gl-beige); }
.garden-print-btn{
  background:transparent; border:1px solid rgba(217,204,178,.3); border-radius:12px;
  color:var(--gl-beige); font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:2px;
  padding:12px 18px; cursor:pointer; text-transform:uppercase; transition:all .25s;
}
.garden-print-btn:hover{ border-color:var(--gl-beige); background:rgba(217,204,178,.06); }

/* ── Grille des 4 travaux ── */
.garden-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.garden-tile{
  border:1px solid var(--gl-line); border-radius:14px; padding:18px 16px;
  background:linear-gradient(170deg,#0e1712,#0b120d);
  display:flex; flex-direction:column; gap:9px;
  position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  animation:glTileIn .5s ease both;
}
@keyframes glTileIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.garden-tile:nth-child(1){ animation-delay:.02s } .garden-tile:nth-child(2){ animation-delay:.08s }
.garden-tile:nth-child(3){ animation-delay:.14s } .garden-tile:nth-child(4){ animation-delay:.2s }
.garden-tile::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gl-earth); }
.garden-tile.favorable::before{ background:linear-gradient(180deg,var(--gl-green),var(--gl-green-deep)); }
.garden-tile.favorable{ box-shadow:0 0 22px rgba(92,191,130,.1); border-color:rgba(92,191,130,.22); }
.garden-tile.neutre::before{ background:var(--gl-earth); }
.garden-tile.defavorable{ opacity:.62; }
.garden-tile.defavorable::before{ background:#5a5346; }
.garden-tile.jour-ideal{
  border-color:rgba(216,183,74,.55);
  background:linear-gradient(165deg,#15170e,#101206);
  box-shadow:0 0 30px rgba(216,183,74,.2), inset 0 0 40px rgba(216,183,74,.05);
}
.garden-tile.jour-ideal::before{ background:linear-gradient(180deg,var(--gl-gold),#9a7c1e); width:3px; }
.garden-tile-badge{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(135deg,#8a6f1e,var(--gl-gold)); color:#12140a;
  font-family:'Cinzel',serif; font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; box-shadow:0 2px 10px rgba(216,183,74,.4);
}
.garden-tile-head{ display:flex; align-items:center; gap:9px; }
.garden-tile-icon{ font-size:19px; filter:saturate(.8); }
.garden-tile-label{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px; color:var(--gl-beige); text-transform:uppercase; }
.garden-tile-status{ font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gl-ink-dim); }
.garden-tile.favorable .garden-tile-status{ color:var(--gl-green); }
.garden-tile.neutre .garden-tile-status{ color:var(--gl-earth); }
.garden-tile.jour-ideal .garden-tile-status{ color:var(--gl-gold); }
.garden-tile-reason{ font-family:'Crimson Text',serif; font-size:13.5px; color:var(--gl-ink-dim); line-height:1.55; }

/* ── Influence des Astres ── */
.garden-astres-section{ margin:0; padding:28px 36px; border-top:1px solid var(--gl-line);
  background:linear-gradient(180deg, rgba(198,212,226,.03), transparent); }
.garden-astres-title{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; color:var(--gl-silver-dim);
  text-transform:uppercase; margin-bottom:12px; }
.garden-astres-sun{ font-family:'Crimson Text',serif; font-size:14.5px; color:var(--gl-ink-dim); font-style:italic; margin-bottom:16px; }
.garden-astres-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.garden-astre-card{ border:1px solid var(--gl-line); border-radius:12px;
  background:linear-gradient(170deg,#0e1712,#0b120d); padding:14px 12px; display:flex; flex-direction:column; gap:6px; }
.garden-astre-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.garden-astre-sym{ font-size:15px; }
.garden-astre-name{ font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:1px; color:var(--gl-beige); text-transform:uppercase; }
.garden-astre-sign{ font-family:'Crimson Text',serif; font-size:12.5px; color:var(--gl-silver); margin-left:auto; }
.garden-astre-do{ font-family:'Crimson Text',serif; font-size:12px; color:var(--gl-green); line-height:1.45; }
.garden-astre-avoid{ font-family:'Crimson Text',serif; font-size:12px; color:var(--gl-earth); line-height:1.45; }
@media(max-width:900px){ .garden-astres-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .garden-astres-grid{ grid-template-columns:1fr; } }

/* ── Filtre par action ── */
.garden-filter-section{ margin:0; padding:28px 36px 34px; border-top:1px solid var(--gl-line); }
.garden-filter-title{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; color:var(--gl-silver-dim);
  text-transform:uppercase; margin-bottom:14px; }
.garden-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.garden-filter-btn{
  background:#0c1510; border:1px solid rgba(120,150,120,.25); border-radius:22px;
  color:var(--gl-ink-dim); font-family:'Cinzel',serif; font-size:11.5px; letter-spacing:1px;
  padding:10px 18px; cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .25s, color .25s, background .25s;
}
.garden-filter-btn:hover{ border-color:rgba(92,191,130,.5); color:var(--gl-beige); }
.garden-filter-btn:active{ transform:scale(.94); }
.garden-filter-btn.active{
  background:linear-gradient(135deg,#1a3a24,#14301e); border-color:var(--gl-green); color:#dff3e4;
  box-shadow:0 0 18px rgba(92,191,130,.22);
}
.garden-filter-results{ display:none; animation:glFade .4s ease both; }
@keyframes glFade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.garden-filter-group{ margin-bottom:18px; }
.garden-filter-group-title{ font-family:'Crimson Text',serif; font-style:italic; font-size:13px; color:var(--gl-ink-dim); margin-bottom:10px; }
.garden-filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.garden-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--gl-line); border-left:3px solid var(--gl-earth); border-radius:20px;
  background:#0c1510; color:var(--gl-ink); font-family:'Crimson Text',serif; font-size:13.5px;
  padding:6px 13px; cursor:default;
}
.garden-chip.favorable{ border-left-color:var(--gl-green); }
.garden-chip.neutre{ border-left-color:var(--gl-earth); }
.garden-chip.defavorable{ border-left-color:#5a5346; opacity:.6; }
.garden-chip.jour-ideal{ border-color:rgba(216,183,74,.5); background:#15170e; box-shadow:0 0 12px rgba(216,183,74,.16); color:var(--gl-gold); }

@media(max-width:900px){ .garden-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){
  .gl-hero{ grid-template-columns:1fr; gap:20px; padding:28px 20px 24px; text-align:center; }
  .gl-moon{ max-width:132px; margin:0 auto; }
  .gl-hero-info{ align-items:center; }
  .gl-cycle{ justify-content:center; }
  .gl-next{ text-align:left; }
  .gl-today, .garden-astres-section, .garden-filter-section{ padding-left:20px; padding-right:20px; }
  .garden-grid{ grid-template-columns:1fr; }
  .gl-species-row{ flex-direction:column; align-items:stretch; }
  .garden-print-btn{ width:100%; }
}

/* Impression ciblée : le bouton "Imprimer / Télécharger" clone le contenu dans ce
   conteneur, masque le reste de la page via .printing-garden, puis window.print()
   (l'utilisateur choisit "Enregistrer en PDF" pour télécharger). Palette Constella
   (or #d4a820 / violet #7b5ea7) sur fond clair pour rester imprimable, avec la case
   "Jour idéal" nettement mise en évidence — cohérent avec l'affichage à l'écran. */
#garden-print-mount { display:none; }
@media print {
  body.printing-garden > *:not(#garden-print-mount) { display:none !important; }
  body.printing-garden #garden-print-mount {
    display:block !important; background:#fdf9ef; color:#2a2418; padding:22px;
    font-family:Georgia,'Crimson Text',serif;
  }
  body.printing-garden #garden-print-mount h2 {
    font-family:Georgia,serif; color:#7a5a0a; border-bottom:2px solid #d4a820; padding-bottom:8px;
  }
  body.printing-garden #garden-print-mount .garden-today-print {
    color:#5a4a2a; margin-bottom:18px;
  }
  body.printing-garden #garden-print-mount .garden-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  body.printing-garden #garden-print-mount .garden-tile {
    background:#fff; border:1px solid #d8cba8; border-left:4px solid #b8a880;
    break-inside:avoid; box-shadow:none; padding:14px 16px;
  }
  body.printing-garden #garden-print-mount .garden-tile.favorable { border-left-color:#2f8a4e; }
  body.printing-garden #garden-print-mount .garden-tile.defavorable { border-left-color:#9a8a68; opacity:1; }
  /* Case "Jour idéal" : bordure or épaisse + fond teinté + ruban visible, y compris en N&B */
  body.printing-garden #garden-print-mount .garden-tile.jour-ideal {
    border:2px solid #b8860b; background:#fbf0d0;
  }
  body.printing-garden #garden-print-mount .garden-tile-badge {
    position:static; display:inline-block; margin-bottom:2px;
    background:#b8860b; color:#fff; box-shadow:none;
  }
  body.printing-garden #garden-print-mount .garden-tile-label { color:#3a2f10 !important; }
  body.printing-garden #garden-print-mount .garden-tile.favorable .garden-tile-status { color:#1f6b3a !important; }
  body.printing-garden #garden-print-mount .garden-tile.neutre .garden-tile-status,
  body.printing-garden #garden-print-mount .garden-tile.jour-ideal .garden-tile-status { color:#8a6014 !important; }
  body.printing-garden #garden-print-mount .garden-tile.defavorable .garden-tile-status { color:#6a5a40 !important; }
  body.printing-garden #garden-print-mount .garden-tile-reason { color:#463c28 !important; }

  /* Influence des Astres — incluse dans l'impression pour une vision d'ensemble */
  body.printing-garden #garden-print-mount .garden-astres-section { margin-top:22px; padding-top:16px; border-top:1px solid #d8cba8; }
  body.printing-garden #garden-print-mount .garden-astres-title,
  body.printing-garden #garden-print-mount .garden-filter-title { color:#7a5a0a !important; }
  body.printing-garden #garden-print-mount .garden-astres-sun { color:#5a4a2a !important; }
  body.printing-garden #garden-print-mount .garden-astres-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  body.printing-garden #garden-print-mount .garden-astre-card { background:#fff; border:1px solid #d8cba8; break-inside:avoid; padding:10px 8px; }
  body.printing-garden #garden-print-mount .garden-astre-name,
  body.printing-garden #garden-print-mount .garden-astre-sign { color:#3a2f10 !important; }
  body.printing-garden #garden-print-mount .garden-astre-do    { color:#1f6b3a !important; }
  body.printing-garden #garden-print-mount .garden-astre-avoid { color:#8a5a40 !important; }

  /* Filtre par action — inclus seulement s'il était actif au moment de l'impression */
  body.printing-garden #garden-print-mount .garden-filter-section { margin-top:22px; padding-top:16px; border-top:1px solid #d8cba8; }
  body.printing-garden #garden-print-mount .garden-filter-row { display:none; } /* les boutons n'ont pas de sens à l'impression */
  body.printing-garden #garden-print-mount .garden-filter-group-title { color:#5a4a2a !important; }
  body.printing-garden #garden-print-mount .garden-chip { background:#fff; border:1px solid #d8cba8; color:#3a2f10; break-inside:avoid; }
  body.printing-garden #garden-print-mount .garden-chip.favorable { border-left-color:#2f8a4e; }
  body.printing-garden #garden-print-mount .garden-chip.defavorable { border-left-color:#9a8a68; opacity:1; }
  body.printing-garden #garden-print-mount .garden-chip.jour-ideal { border-color:#b8860b; background:#fbf0d0; box-shadow:none; }

  /* Mention de propriété intellectuelle */
  body.printing-garden #garden-print-mount .garden-print-footer {
    margin-top:28px; padding-top:12px; border-top:1px solid #d8cba8;
    font-family:Georgia,serif; font-size:10px; color:#8a7a5a; text-align:center;
  }
}

/* ── MONTH MODAL ── */
#month-modal-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(2,0,12,0.88);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#month-modal-overlay.open { display:flex; animation:mFadeIn 0.22s ease; }
@keyframes mFadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
#month-modal {
  background:linear-gradient(160deg,#120830 0%,#08041a 100%);
  border:1px solid #d4a820;
  box-shadow:0 0 60px rgba(212,168,32,0.22),0 0 120px rgba(100,30,200,0.18);
  width:min(1000px,96vw); max-height:86vh;
  overflow-y:auto; padding:36px 40px 32px; position:relative;
}
#month-modal::-webkit-scrollbar{width:4px;}
#month-modal::-webkit-scrollbar-track{background:#08041a;}
#month-modal::-webkit-scrollbar-thumb{background:#3a2060;border-radius:2px;}
.month-modal-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:28px; border-bottom:1px solid #2a1848; padding-bottom:20px;
}
.month-modal-title {
  font-family:'Cinzel',serif; font-size:30px; letter-spacing:8px;
  font-weight:700; color:#ffe87a;
  text-shadow:0 0 20px rgba(212,168,32,0.5);
}
.month-modal-sub { font-family:'Cinzel',serif; font-size:13px; letter-spacing:4px; color:#c0aa70; margin-top:6px; }
#month-modal-close {
  background:none; border:1px solid #5a3a80; color:#b0a070;
  width:32px; height:32px; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; flex-shrink:0;
}
#month-modal-close:hover { border-color:#d4a820; color:#d4a820; }
.modal-days-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.modal-day-header {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px;
  color:#b09860; text-transform:uppercase; text-align:center;
  padding:4px 0 8px; border-bottom:1px solid #3a2860;
}
.modal-day-cell {
  background:#0e0828; border:1px solid #2e2050; border-radius:3px;
  padding:8px 7px; cursor:pointer; transition:all 0.18s;
  position:relative; min-height:78px;
}
.modal-day-cell:hover { background:#1c1240; border-color:#7a4ab0; }
.modal-day-cell.is-today { border-color:#ffe033; background:#14102e; box-shadow:0 0 14px rgba(255,224,51,0.22); }
.modal-day-num { font-family:'Cinzel',serif; font-size:13px; color:#e8d890; font-weight:700; text-shadow:0 0 6px rgba(220,200,100,0.4); }
.modal-day-cell.is-today .modal-day-num { color:#ffe033; text-shadow:0 0 10px #ffe033cc; }
.modal-day-greg { font-size:10px; color:#a08c60; margin-top:2px; }
.modal-day-moon { font-size:12px; margin-top:4px; display:block; }
.modal-day-card {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:1px;
  margin-top:4px; font-weight:700; opacity:0.85;
}
.modal-day-note {
  font-size:10px; color:#d4b870; margin-top:4px; font-style:italic;
  line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.modal-note-dot {
  width:6px; height:6px; border-radius:50%; background:#d4a820;
  position:absolute; top:6px; right:6px;
  box-shadow:0 0 6px rgba(212,168,32,0.6);
}
.modal-day-edit {
  position:absolute; bottom:5px; right:6px;
  font-size:14px; color:#6a5a40; opacity:0.25;
  cursor:pointer; transition:all 0.18s;
  line-height:1; user-select:none;
  background:none; border:none; padding:2px 3px;
  border-radius:3px;
}
.modal-day-cell:hover .modal-day-edit {
  opacity:1; color:#d4a820;
  text-shadow:0 0 10px rgba(212,168,32,0.7);
  background:rgba(212,168,32,0.08);
}
.modal-day-cell.has-note .modal-day-edit {
  opacity:0.6; color:#c8a050;
}

/* ── NOTES & RDV SECTION ── */
#notes-section {
  display:none; max-width:1400px; margin:0 auto; padding:40px 30px 80px;
}
#notes-section.visible { display:block; }
#notes-section h2 {
  font-family:'Cinzel',serif; font-size:28px; letter-spacing:8px;
  color:#d4a820; text-align:center; margin-bottom:6px;
  text-shadow:0 0 30px rgba(212,168,32,0.4);
}
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:40px; }
.note-card {
  background:#0a0820; border:1px solid #2a1848; border-radius:4px;
  padding:18px 20px; cursor:pointer; transition:all 0.2s; position:relative;
}
.note-card:hover { border-color:#d4a820; background:#120e30; box-shadow:0 0 16px rgba(212,168,32,0.1); }
.note-card-date { font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px; color:#d4a820; margin-bottom:3px; }
.note-card-greg { font-size:11px; color:#6a5a40; margin-bottom:10px; }
.note-card-text { font-family:'Crimson Text',serif; font-size:14px; color:#c0b090; line-height:1.6; }
.note-card-moon { font-size:18px; position:absolute; top:14px; right:16px; }
.notes-empty { text-align:center; padding:60px 0; font-family:'Crimson Text',serif; font-size:18px; color:#4a3a30; font-style:italic; }
#notes-quick-form { background:#0a0620; border:1px solid #2a1848; border-radius:4px; padding:20px 24px; margin-bottom:4px; }
#notes-quick-form .nqf-title { font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; color:#d4a820; text-transform:uppercase; margin-bottom:14px; border-bottom:1px solid #1e1240; padding-bottom:8px; }
#notes-quick-date { background:#0d0922; border:1px solid #3a2a60; color:#d8cfe8; padding:8px 12px; font-family:Georgia,serif; font-size:13px; border-radius:2px; margin-bottom:10px; display:block; }
#notes-quick-text { width:100%; background:#0d0922; border:1px solid #3a2a60; color:#d8cfe8; padding:10px 14px; font-family:'Crimson Text',serif; font-size:14px; border-radius:2px; resize:vertical; margin-bottom:12px; box-sizing:border-box; }
#notes-quick-save { background:linear-gradient(135deg,#1a1040,#2a1a60); border:1px solid #c9a84c; color:#c9a84c; padding:9px 24px; font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px; cursor:pointer; border-radius:2px; }
#notes-quick-save:hover { border-color:#e8c870; color:#e8c870; }
#nqf-rdv-hint { margin:2px 0 14px; font-size:11.5px; color:#8a7aa8; font-family:'Crimson Text',serif; letter-spacing:.4px; line-height:1.6; }
#nqf-rdv-hint a { color:#d4a820; text-decoration:none; border-bottom:1px solid rgba(212,168,32,.35); }
#nqf-rdv-hint a:hover { color:#e8c870; border-bottom-color:#e8c870; }

/* ══ ÉCRAN D'ENTRÉE — Système Constella (13 cycles → Polaristar) ══
   Refonte 2026-09-03 : remplace l'ancienne "boîte de pierre" (machine.jpg,
   parallaxe L/R, médaillons zodiaque). Une SEULE construction géométrique :
   grand cercle + 13 cercles répartis (angle = i·2π/13) + étoile centrale
   + 13 lignes convergentes. window.piSkip conservé (flux ?section=). */
#pi-wrap {
  position:fixed; inset:0; z-index:10000;
  background:radial-gradient(ellipse at 50% 43%, #0a0722 0%, #060420 44%, #050318 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .55s ease;
  --pi-accent:#e8c46a;   /* or chaud */
  --pi-cool:#8a7bd8;     /* violet céleste */
  --pi-line:#6a5ba8;
}
#pi-wrap.pi-gone { opacity:0; pointer-events:none; }

#pi-dust {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; will-change:transform;
}

/* #pi-stage porte le "bloom" (zoom de sortie) — #pi-sys porte la parallaxe */
#pi-stage {
  position:relative; z-index:2;
  width:min(85vw, 60vh); height:min(85vw, 60vh);
  display:flex; align-items:center; justify-content:center;
  transition:transform 1.15s cubic-bezier(.55,0,.85,.14), opacity .85s ease-in .3s;
  will-change:transform;
}
/* zoom "à travers Polaris" — ease-in = accélération ; grossit franchement */
#pi-wrap.pi-bloom #pi-stage { transform:scale(15); opacity:0; }
#pi-sys { width:100%; height:100%; overflow:visible; will-change:transform; }

/* — grand cercle + anneaux + graduations — */
.pi-ring       { fill:none; stroke:var(--pi-cool); }
.pi-ring-main  { stroke-opacity:.34; stroke-width:1.1; }
.pi-ring-ghost { stroke-opacity:.11; stroke-width:.7; }
.pi-tick       { stroke:var(--pi-cool); stroke-opacity:.22; stroke-width:1; }
.pi-tick-fine  { stroke:var(--pi-cool); stroke-opacity:.09; stroke-width:.6; }

/* — 13 lignes convergentes (dormantes au repos) — */
.pi-line {
  stroke:var(--pi-line); stroke-width:1; stroke-opacity:.15;
  transition:stroke-opacity .45s ease, stroke-width .45s ease, stroke .45s ease;
}
.pi-line.pi-live { stroke:var(--pi-accent); stroke-opacity:.7; stroke-width:1.4; }
#pi-lines.pi-all-live .pi-line { stroke:var(--pi-accent); stroke-opacity:.92; stroke-width:1.7; }

/* — 13 cercles périphériques — */
.pi-node { cursor:pointer; }
.pi-node .pi-node-halo { opacity:0; transition:opacity .4s ease; }
.pi-node .pi-node-disc { fill:#0c0922; fill-opacity:.72; stroke:var(--pi-cool); stroke-opacity:.62; stroke-width:1; transition:stroke-opacity .35s ease, stroke .35s ease; }
.pi-node .pi-node-core { fill:#d9ceff; opacity:.62; transition:opacity .35s ease, fill .35s ease; }
.pi-node.pi-hot .pi-node-halo { opacity:.55; }
.pi-node.pi-hot .pi-node-disc { stroke:var(--pi-accent); stroke-opacity:1; }
.pi-node.pi-hot .pi-node-core { fill:#fff3d6; opacity:1; }
#pi-nodes.pi-focus .pi-node:not(.pi-hot) { opacity:.38; transition:opacity .4s ease; }
.pi-node:focus { outline:none; }
.pi-node:focus .pi-node-disc { stroke:var(--pi-accent); stroke-opacity:.9; }

/* — étoile Polaristar (bouton) — */
#pi-star { cursor:pointer; }
#pi-star:focus { outline:none; }
.pi-star-halo { opacity:.5; animation:piBreath 7s ease-in-out infinite; }
.pi-star-ray  { stroke:#fff6e2; stroke-width:.8; stroke-opacity:.4; }
.pi-star-body { fill:#fff6e0; stroke:var(--pi-accent); stroke-width:.6; stroke-opacity:.7;
                transition:fill .3s ease, filter .3s ease; }
.pi-star-core { fill:#fffef8; }
.pi-star-hit  { fill:transparent; }
.pi-star-pulse{ fill:none; stroke:#fff2cf; stroke-width:2; opacity:0; }
#pi-star:hover .pi-star-halo,
#pi-star:focus .pi-star-halo,
#pi-star.pi-armed .pi-star-halo { opacity:.92; }
#pi-star:hover .pi-star-body,
#pi-star.pi-armed .pi-star-body { fill:#fff; }
@keyframes piBreath { 0%,100%{opacity:.46} 50%{opacity:.8} }

.pi-pulse { fill:#fff3d0; }

.pi-nlabel { font-family:'Cinzel',serif; fill:#f2e3ba; font-size:15px; letter-spacing:.16em; text-anchor:middle; opacity:0; transition:opacity .28s ease; }
.pi-enter-txt { font-family:'Cinzel',serif; font-size:13px; letter-spacing:.3em; fill:#ffe9b0; text-anchor:middle; opacity:0; transition:opacity .3s ease; }
#pi-wrap.pi-enter-show .pi-enter-txt { opacity:.95; }

/* ══ TITRE CONSTELLA — inscription céleste + repères astronomiques ══
   Décoration UNIQUEMENT autour du titre. Ne touche pas au cadran.
   Hiérarchie de lumière : étoile centrale du cadran > titre > étoile crest
   > 13 cercles > ornements/géométrie (les plus faibles). */
/* #pi-head ancré à une distance FIXE au-dessus du cadran (indépendant de la
   hauteur du bloc titre) → l'écart titre / cadran reste constant partout. */
#pi-head {
  position:absolute; left:50%; transform:translateX(-50%);
  top:auto; bottom:calc(50% + min(85vw, 60vh) / 2 + 18px);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px;
  text-align:center; pointer-events:none;
}

/* crest = repères célestes AU-DESSUS du titre (élément de flux, déborde librement) */
#pi-crest {
  width:min(74vw, 392px); height:auto; overflow:visible;
  margin-bottom:9px; pointer-events:none;
}
#pi-crest g { opacity:0; transition:opacity .9s ease; }

/* écran trop court → on retire la décoration, titre collé en haut */
@media (max-height: 600px) {
  #pi-crest { display:none; }
  #pi-head { bottom:auto; top:10px; }
}

.pi-cg-arc    { fill:none; stroke:#4b3f86; stroke-width:1; stroke-opacity:.28; }
.pi-cg-faint  { stroke-opacity:.15; }
.pi-cg-ray    { stroke:#5a4f92; stroke-width:.7; stroke-opacity:.14; }
.pi-cg-orbit  { fill:none; stroke:#544a8e; stroke-width:.8; stroke-opacity:.2; }
.pi-cg-dot    { fill:#8f83c4; }

.pi-ca-arc    { fill:none; stroke:var(--pi-accent); stroke-width:1; stroke-opacity:.32; }
.pi-ca-tick   { stroke:var(--pi-accent); stroke-width:1; stroke-opacity:.4; }

.pi-cc-link   { stroke:#8a7bd8; stroke-width:.7; stroke-opacity:.22; }
.pi-cc-star   { fill:#d7ccf2; }
.pi-cc-star.pi-tw { animation:piTwinkle 7s ease-in-out infinite; }

.pi-cs-ray    { stroke:#fff3dc; stroke-width:.9; stroke-opacity:.5; }
.pi-cs-body   { fill:#fff6e6; }
.pi-cs-core   { fill:#fffefa; }
#pi-crest-star { animation:piCrestBreath 8.5s ease-in-out infinite; }

@keyframes piCrestBreath { 0%,100%{ opacity:.62 } 50%{ opacity:.9 } }
@keyframes piTwinkle     { 0%,100%{ opacity:.28 } 45%{ opacity:.28 } 60%{ opacity:1 } 75%{ opacity:.28 } }

/* — ligne du titre + ornements latéraux — */
#pi-title-row { position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.6vw,22px); }
.pi-orn { position:relative; display:block; width:clamp(42px,12vw,120px); height:12px;
  transform:scaleX(0); transition:transform .62s cubic-bezier(.3,0,.2,1); }
.pi-orn-l { transform-origin:right; }
.pi-orn-r { transform-origin:left; }
.pi-orn::before { content:""; position:absolute; top:50%; height:1px; }
.pi-orn-l::before { left:0;  right:16px; background:linear-gradient(90deg, transparent, rgba(232,196,106,.42)); }
.pi-orn-r::before { right:0; left:16px;  background:linear-gradient(270deg, transparent, rgba(232,196,106,.42)); }
.pi-orn::after { position:absolute; top:50%; transform:translateY(-50%);
  font-size:8px; letter-spacing:2.5px; color:rgba(232,196,106,.55); line-height:1; }
.pi-orn-l::after { content:"· \2726"; right:0; }
.pi-orn-r::after { content:"\2726 ·"; left:0; }
#pi-head.pi-orn-in .pi-orn { transform:scaleX(1); }

#pi-title-text {
  font-family:'Cinzel',serif; letter-spacing:.66em; font-size:clamp(15px,3.3vw,24px);
  text-transform:uppercase; white-space:nowrap; cursor:pointer; pointer-events:auto;
  color:#e8d2a0;   /* repli si background-clip:text non supporté */
  text-shadow:0 0 18px rgba(233,205,150,.32);
  filter:blur(7px);
  opacity:0;
  transition:opacity .95s ease, filter .95s ease, letter-spacing .95s ease;
}
/* inscription dorée : dégradé clippé au texte + lueur douce via drop-shadow */
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  #pi-title-text {
    background:linear-gradient(102deg, #e6d09c 0%, #e6d09c 40%, #fff3d6 50%, #e6d09c 60%, #e6d09c 100%);
    background-size:280% 100%; background-position:120% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:none;
    filter:blur(7px) drop-shadow(0 0 13px rgba(233,205,150,.34));
  }
}
#pi-head.pi-lit #pi-title-text {
  opacity:1; letter-spacing:.5em;
  filter:blur(0) drop-shadow(0 0 12px rgba(233,205,150,.32));
  animation:piSheen 1150ms ease .06s 1 both;
}
@keyframes piSheen { 0%{ background-position:120% 0 } 100%{ background-position:24% 0 } }

#pi-sub {
  font-family:'Cinzel',serif; letter-spacing:.28em; font-size:clamp(9px,1.7vw,12px);
  color:rgba(214,200,154,.58); text-transform:uppercase; white-space:nowrap;
  opacity:0; transition:opacity .9s ease .15s;
}
#pi-head.pi-lit #pi-sub { opacity:1; }

#pi-hint {
  position:absolute; bottom:5.5%; left:50%; transform:translateX(-50%);
  font-family:'Cinzel',serif; letter-spacing:.32em; font-size:clamp(9px,1.6vw,12px);
  color:rgba(232,200,120,.9); text-transform:uppercase; white-space:nowrap; z-index:3; cursor:pointer;
  text-shadow:0 0 14px rgba(232,196,106,.55);
  opacity:0; animation:pibl 2.8s ease-in-out infinite;
}
@keyframes pibl { 0%,100%{opacity:.3} 50%{opacity:.85} }
#pi-wrap.pi-ready #pi-hint { opacity:.6; }

@media (prefers-reduced-motion: reduce) {
  #pi-stage, #pi-title-text, #pi-sub { transition:none; }
  #pi-head.pi-lit #pi-title-text { animation:none; background-position:24% 0; }
  #pi-crest-star, .pi-cc-star.pi-tw { animation:none; }
  .pi-star-halo { animation:none; opacity:.68; }
  #pi-hint { animation:none; opacity:.6; }
}

/* ── CALENDRIER 2D ── */
#cards-section {
  display:none;
  max-width:1400px; margin:0 auto; padding:40px 30px 80px;
}
#cards-section.visible { display:block; }
#cards-section h2 {
  font-family:'Cinzel',serif; font-size:28px; letter-spacing:8px;
  color:#d4a820; text-align:center; margin-bottom:6px;
  text-shadow:0 0 30px rgba(212,168,32,0.4);
}
#cards-section .guide-subtitle {
  text-align:center; font-size:13px; letter-spacing:3px;
  color:#8a7a60; text-transform:uppercase; margin-bottom:50px;
}

/* ── Carte héro ── */
.card-hero-wrap {
  display:flex; flex-direction:column; align-items:center; margin-bottom:60px;
}
/* ─── Cartes dorées magiques ─────────────────────────────── */
@keyframes pcShimmer {
  0%   { transform:translateX(-140%) skewX(-12deg); opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:0.7; }
  100% { transform:translateX(240%) skewX(-12deg); opacity:0; }
}
@keyframes pcBorderPulse {
  0%,100% { box-shadow:
    0 0 0 1px rgba(212,168,32,0.5),
    0 0 18px rgba(212,168,32,0.25),
    0 0 48px rgba(80,20,160,0.4),
    0 4px 16px rgba(0,0,0,0.7); }
  50% { box-shadow:
    0 0 0 1px rgba(255,230,100,0.75),
    0 0 28px rgba(212,168,32,0.45),
    0 0 60px rgba(80,20,160,0.5),
    0 4px 20px rgba(0,0,0,0.8); }
}
.playing-card {
  position:relative; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10px; transition:transform 0.25s, box-shadow 0.25s;
  /* Double bordure or : externe + interne */
  border:2px solid rgba(212,168,32,0.75);
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.8),
    0 0 0 4px rgba(212,168,32,0.30),
    inset 0 0 0 1.5px rgba(255,240,140,0.18),
    inset 0 2px 0 rgba(255,248,180,0.22),
    0 0 28px rgba(212,168,32,0.25),
    0 0 55px rgba(80,20,160,0.40),
    0 6px 20px rgba(0,0,0,0.75);
}
/* Fond texturé alchimique + vignette interne dorée */
.playing-card::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(255,248,160,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(212,168,32,0.08)  0%, transparent 55%),
    radial-gradient(ellipse at 0%  50%,  rgba(255,240,120,0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 50%, rgba(255,240,120,0.06) 0%, transparent 45%),
    repeating-linear-gradient(55deg,
      rgba(212,168,32,0.018) 0, rgba(212,168,32,0.018) 1px,
      transparent 1px, transparent 9px);
}
/* Reflet lumineux diagonal (hero uniquement via .hero class ci-dessous) */
.playing-card.hero::after {
  content:''; position:absolute; top:-40px; bottom:-40px; left:-60px;
  width:90px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,248,180,0.20),rgba(255,255,220,0.10),transparent);
  animation:pcShimmer 4s ease-in-out 1s infinite;
}
/* ── Textes des cartes — brillants & lisibles ── */
.pc-top-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  z-index:2; position:relative;
}
.pc-top-val {
  font-family:'Cinzel',serif; font-weight:700; line-height:1;
  /* Halo de couleur + lisibilité maximale */
  filter:brightness(1.35) drop-shadow(0 0 4px currentColor);
}
.pc-top-sym {
  font-family:serif; line-height:1;
  filter:brightness(1.2) drop-shadow(0 0 3px currentColor);
}
.pc-center-area {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:1; gap:6px; pointer-events:none;
}
.pc-big-sym   { line-height:1; filter:brightness(1.3); }
.pc-face-glyph{ line-height:1; filter:brightness(1.3); }
.pc-center-sub {
  font-family:'Cinzel',serif; text-transform:uppercase;
  letter-spacing:2px; font-weight:700;
  /* Plein opaque, ombre portée légère */
  opacity:1;
  text-shadow:0 1px 4px rgba(0,0,0,0.9), 0 0 8px currentColor;
}
.pc-bottom-label {
  z-index:2; position:relative; text-align:center;
  font-family:'Cinzel',serif; text-transform:uppercase;
  letter-spacing:2px; line-height:1; font-weight:700;
  /* Bande de fond sombre pour lisibilité + halo de couleur */
  text-shadow:0 1px 6px rgba(0,0,0,1), 0 0 10px currentColor;
}

/* Semaine illuminée sur le SVG circulaire (popup ouverte) */
@keyframes cardWeekPulse {
  0%,100% { filter:drop-shadow(0 0 4px #d4a820) brightness(2); }
  50%     { filter:drop-shadow(0 0 9px #ffe87a) brightness(2.8); }
}
g.card-week-glow {
  animation: cardWeekPulse 1.6s ease-in-out infinite;
}
g.cs-day-selected { animation: cardWeekPulse 1.4s ease-in-out infinite; }
.modal-day-cell.mm-day-flash { border-color:#f4d98a; box-shadow:0 0 18px rgba(244,217,138,0.55); transition:box-shadow .3s; }

/* ── Scintillement cosmique des étoiles SVG ── */
@keyframes cosmicTwinkle {
  0%,100% { opacity:0.35; }
  50%     { opacity:1; }
}
.ctw  { animation:cosmicTwinkle 2.8s ease-in-out infinite; }
.ctw2 { animation:cosmicTwinkle 4.3s ease-in-out 1.1s infinite; }
.ctw3 { animation:cosmicTwinkle 3.6s ease-in-out 0.6s infinite; }
.ctw4 { animation:cosmicTwinkle 5.1s ease-in-out 1.9s infinite; }

/* Pulsation lente du mois actif — opacity uniquement (GPU-friendly), 1 seul élément SVG */
@keyframes psPulse { 0%,100% { opacity:0.20; } 50% { opacity:0.5; } }
.ps-pulse { animation:psPulse 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }

/* Card héro — grande */
.playing-card.hero {
  width:200px; height:300px; padding:14px;
  border:2px solid rgba(212,168,32,0.85);
  box-shadow:
    0 0 0 1px rgba(255,240,140,0.20),
    inset 0 0 50px rgba(212,168,32,0.08),
    inset 0 2px 0 rgba(255,248,180,0.18),
    0 0 60px rgba(212,168,32,0.40),
    0 0 120px rgba(80,20,180,0.50),
    0 12px 40px rgba(0,0,0,0.8);
}
.playing-card.hero .pc-top-val  { font-size:20px; }
.playing-card.hero .pc-top-sym  { font-size:17px; }
.playing-card.hero .pc-big-sym  { font-size:86px; filter:drop-shadow(0 0 14px currentColor) drop-shadow(0 0 32px currentColor); }
.playing-card.hero .pc-face-glyph { font-size:72px; filter:drop-shadow(0 0 14px currentColor) drop-shadow(0 0 32px currentColor); }
.playing-card.hero .pc-center-sub  { font-size:11px; }
.playing-card.hero .pc-bottom-label { font-size:10px; }

/* Méta sous la héro */
.card-hero-meta-row {
  margin-top:20px; text-align:center;
}
.card-hero-name {
  font-family:'Cinzel',serif; font-size:20px; letter-spacing:5px;
  color:#ffe87a; margin-bottom:6px;
  text-shadow:0 0 20px rgba(212,168,32,0.5);
}
.card-hero-week {
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:4px; font-weight:700;
  color:#e0c060; margin-top:4px;
  text-shadow:0 0 14px rgba(212,168,32,0.55);
}
.card-hero-range {
  font-family:'Crimson Text',serif; font-size:16px; font-style:italic; font-weight:600;
  color:#f0dc9c; margin-top:6px; letter-spacing:0.4px;
  text-shadow:0 0 16px rgba(212,168,32,0.55), 0 0 32px rgba(212,168,32,0.25);
}

/* ── Grille 2D ── */
.cards-2d-wrap { max-width:1100px; margin:0 auto; }

/* Blocs saisonniers */
.cards-family-block {
  margin-bottom:28px; border-radius:6px; overflow:hidden;
  border:1px solid transparent;
}
.cards-family-block.s-hiver    { background:linear-gradient(170deg,#06091e 0%,#040714 100%); border-color:#1e2860; }
.cards-family-block.s-printemps{ background:linear-gradient(170deg,#04100a 0%,#020a05 100%); border-color:#184030; }
.cards-family-block.s-ete      { background:linear-gradient(170deg,#140e00 0%,#0a0700 100%); border-color:#503000; }
.cards-family-block.s-automne  { background:linear-gradient(170deg,#140600 0%,#0a0300 100%); border-color:#502010; }

/* Bandeau saison */
.season-banner {
  display:flex; align-items:center; gap:22px;
  padding:22px 26px 18px; position:relative; overflow:hidden;
}
/* Hachures + vignette lumineuse */
.season-banner::before {
  content:''; position:absolute; inset:0;
  opacity:0.10;
  background:repeating-linear-gradient(60deg,currentColor 0,currentColor 1px,transparent 1px,transparent 14px);
}
.season-banner::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 70%);
}
.season-banner .sb-sym {
  line-height:1; flex-shrink:0;
  filter:drop-shadow(0 0 18px currentColor) drop-shadow(0 0 36px currentColor) brightness(1.3);
}
.season-banner .sb-info { flex:1; }
.season-banner .sb-saison {
  font-family:'Cinzel',serif; font-size:30px; letter-spacing:8px; font-weight:700;
  text-transform:uppercase; line-height:1;
  text-shadow:0 0 22px currentColor, 0 0 50px currentColor, 0 2px 4px rgba(0,0,0,0.9);
  filter:brightness(1.25);
}
.season-banner .sb-meta {
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:3px; font-weight:600;
  opacity:0.90; margin-top:7px;
  text-shadow:0 0 12px currentColor, 0 1px 4px rgba(0,0,0,0.8);
}
.season-banner .sb-weeks {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:3px; font-weight:700;
  opacity:0.85; text-align:right;
  text-shadow:0 0 10px currentColor;
}

/* Thèmes couleur par saison — couleurs plus vives */
.s-hiver     .season-banner { color:#8aabff; border-bottom:2px solid #2a3880; }
.s-printemps .season-banner { color:#5aee8a; border-bottom:2px solid #1e6038; }
.s-ete       .season-banner { color:#ffd050; border-bottom:2px solid #604800; }
.s-automne   .season-banner { color:#ff9060; border-bottom:2px solid #602810; }

.season-cards-area { padding:16px 14px 18px; }

.cards-family-title { display:none; } /* remplacé par season-banner */
.cards-row-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
}
/* ── Vue Semaine (Calendrier 2D) ── */
#cards-week-view { display:none; }
.cwv-back { background:none; border:1px solid #3a2060; color:#9a8a60; font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; padding:8px 22px; cursor:pointer; margin-bottom:24px; transition:all 0.2s; }
.cwv-back:hover { border-color:#d4a820; color:#d4a820; }
.cwv-header { display:flex; align-items:center; gap:18px; padding:16px 22px; border:1px solid rgba(212,168,32,0.25); margin-bottom:24px; background:rgba(14,8,38,0.7); }
.cwv-card-sym { font-size:40px; line-height:1; }
.cwv-card-name { font-family:'Cinzel',serif; font-size:17px; letter-spacing:4px; margin-bottom:4px; }
.cwv-card-meta { font-family:'Crimson Text',serif; font-size:14px; color:#7a6a50; }
.cwv-days-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media(max-width:860px){ .cwv-days-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:520px){ .cwv-days-grid{ grid-template-columns:repeat(2,1fr); } }
.cwv-day { border:1px solid #2a1848; padding:12px 10px; background:rgba(8,4,20,0.7); display:flex; flex-direction:column; gap:6px; transition:border-color 0.2s; }
.cwv-day.cwv-today { background:rgba(25,12,55,0.9); }
.cwv-day-header { display:flex; justify-content:space-between; align-items:baseline; }
.cwv-day-name { font-family:'Cinzel',serif; font-size:14px; letter-spacing:2px; font-weight:700; color:#ffe066; text-shadow:0 0 12px rgba(212,168,32,0.6); }
.cwv-moon { font-size:11px; color:#6a5a80; }
/* CONSTELLA primaire, date civile secondaire (le Calendrier 2D représente CONSTELLA) */
.cwv-ifc-date { font-family:'Crimson Text',serif; font-size:15px; font-weight:700; color:#d8c088; text-shadow:0 0 8px rgba(212,168,32,0.3); }
.cwv-greg-date { font-family:'Crimson Text',serif; font-size:11px; font-style:italic; color:#7a6e88; }
.cwv-note { width:100%; min-height:90px; background:rgba(10,5,20,0.8); border:1px solid #2a1848; color:#e0d8c8; font-family:'Crimson Text',serif; font-size:14px; line-height:1.7; padding:8px 10px; resize:vertical; box-sizing:border-box; transition:border-color 0.2s; }
.cwv-note:focus { outline:none; border-color:#d4a820; }
.cwv-note.saved { border-color:#3a9a50; }
.cwv-today-badge { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; color:#ffe033; text-align:center; margin-bottom:2px; }
.playing-card.mini {
  width:96px; height:138px; padding:8px 7px;
  border:1.5px solid rgba(212,168,32,0.30);
  cursor:pointer;
}
.playing-card.mini:hover {
  transform:translateY(-5px) scale(1.03);
  border-color:rgba(212,168,32,0.75);
  box-shadow:
    0 0 0 0.5px rgba(255,240,140,0.20),
    0 0 20px rgba(212,168,32,0.40),
    0 0 40px rgba(212,168,32,0.18),
    0 10px 28px rgba(0,0,0,0.6);
}
.playing-card.mini .pc-top-val   { font-size:14px; }
.playing-card.mini .pc-top-sym   { font-size:13px; }
.playing-card.mini .pc-big-sym   {
  font-size:36px;
  filter:brightness(1.4) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);
}
.playing-card.mini .pc-face-glyph{
  font-size:30px;
  filter:brightness(1.4) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);
}
.playing-card.mini .pc-center-sub{
  font-size:8px; letter-spacing:1.5px; font-weight:700;
  text-shadow:0 1px 4px rgba(0,0,0,0.95);
}
.playing-card.mini .pc-bottom-label {
  font-size:9px; letter-spacing:1.5px; font-weight:700;
  padding-top:3px;
  text-shadow:0 1px 6px rgba(0,0,0,1), 0 0 10px currentColor;
}
.playing-card.mini.cc-current {
  border:2px solid rgba(212,168,32,1) !important;
  background:linear-gradient(160deg,#1e1050 0%,#0c0530 100%) !important;
  animation: pcBorderPulse 2.4s ease-in-out infinite !important;
}
.playing-card.mini.cc-current .pc-big-sym,
.playing-card.mini.cc-current .pc-face-glyph {
  filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 22px currentColor);
}
.playing-card.mini.cc-current .pc-top-val { text-shadow:0 0 8px currentColor; }

/* Semaine label sous chaque mini-carte */
.mini-card-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.mini-week-label {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:1.5px; font-weight:700;
  color:#c0aed0; text-align:center;
  text-shadow:0 0 10px rgba(160,120,220,0.5);
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.mini-week-label.cur {
  color:#ffe066;
  text-shadow:0 0 12px rgba(212,168,32,0.85), 0 0 26px rgba(212,168,32,0.4);
}
.mini-week-range {
  font-family:'Crimson Text',serif; font-size:12px; letter-spacing:0.4px;
  font-style:italic; font-weight:600; color:#d8c088; text-transform:none;
  text-shadow:0 0 10px rgba(212,168,32,0.4);
}
.mini-week-label.cur .mini-week-range { color:#ffe89a; text-shadow:0 0 14px rgba(212,168,32,0.7); }
.mini-week-greg {
  font-family:'Crimson Text',serif; font-size:10px; letter-spacing:0.3px;
  font-style:italic; font-weight:400; color:#7a6e92; text-transform:none; text-shadow:none;
}
.mini-week-label.cur .mini-week-greg { color:#b8a878; }

@media(max-width:900px){
  .playing-card.hero { width:160px; height:240px; }
  .playing-card.hero .pc-big-sym   { font-size:68px; }
  .playing-card.hero .pc-face-glyph{ font-size:58px; }
  .playing-card.hero .pc-top-val   { font-size:16px; }
  .playing-card.hero .pc-top-sym   { font-size:14px; }
  .cards-row-grid { grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:8px; }
  .playing-card.mini { width:80px; height:116px; }
  .playing-card.mini .pc-big-sym    { font-size:28px; }
  .playing-card.mini .pc-face-glyph { font-size:24px; }
  .playing-card.mini .pc-top-val    { font-size:12px; }
  .playing-card.mini .pc-top-sym    { font-size:11px; }
  .playing-card.mini .pc-bottom-label { font-size:7px; }
  .mini-week-label { font-size:11px; }
  .mini-week-range { font-size:10px; }
}

/* ════════════════════════════════════════════════
   MOBILE — ≤ 768px
   ════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Sections : padding réduit */
  #lunar-guide, #agri-lunaire, #dashboard-section, #earth-section,
  #cards-section, #sky-section, #compass-section {
    padding: 24px 14px 60px !important;
  }

  /* ── Ciel en Direct ── */
  .sky-compare-grid { grid-template-columns: 1fr !important; }
  .sky-info-grid    { grid-template-columns: 1fr !important; }
  #sky-section .sky-detail-grid { grid-template-columns: 1fr !important; }
  #sky-section .sky-card { padding: 16px 16px !important; }

  /* ── Guide Lunaire : 5 colonnes → 2 ── */
  .phase-info-grid { grid-template-columns: repeat(2,1fr) !important; }
  .phase-title-cell { border-right: none !important; border-bottom: 1px solid #1a1608; }

  /* ── Tableau de Bord ── */
  .db-cosmic-trio   { grid-template-columns: repeat(2,1fr) !important; }
  .db-new-row       { flex-direction: column !important; }
  .db-select, .db-date-input { width: 100% !important; }

  /* ── Notes grid ── */
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)) !important; }

  /* ── Calendrier 2D : hero ── */
  .card-hero-wrap     { flex-direction: column !important; align-items: center !important; gap: 18px !important; }
  .card-hero-meta-row { text-align: center !important; }

  /* ── Calendrier 2D : titre + bandeau saison ── */
  #cards-section h2 { font-size: 22px !important; letter-spacing: 4px !important; }
  .season-banner { gap: 14px !important; padding: 18px 18px 14px !important; }
  .season-banner .sb-sym svg { width: 42px !important; height: 42px !important; }
  .season-banner .sb-saison { font-size: 21px !important; letter-spacing: 4px !important; }
  .season-banner .sb-meta   { font-size: 11.5px !important; letter-spacing: 1.5px !important; margin-top: 5px !important; }
  .season-banner .sb-weeks  { font-size: 11px !important; letter-spacing: 2px !important; }

  /* ── Boussole : cardinal 4→2 ── */
  .compass-cardinal-grid { grid-template-columns: repeat(2,1fr) !important; max-width: 100% !important; }

  /* ── Cœur Terrestre : containers intérieurs ── */
  #earth-premium-content [style*="max-width:600px"],
  #earth-premium-content [style*="max-width:720px"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #earth-premium-content [style*="max-width:600px"][style*="margin-left:auto"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Popup note ── */
  #notePopup {
    min-width: 0 !important;
    width: calc(100vw - 28px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 22px 18px !important;
  }

  /* ── Modal mois ── */
  #month-modal-overlay .month-modal-inner,
  [class*="month-modal"] { width: calc(100vw - 20px) !important; max-height: 90vh !important; overflow-y: auto !important; }

  /* ── Abonnements ── */
  #pricing-plans { flex-direction: column !important; align-items: center !important; }
}

/* ════════════════════════════════════════════════
   TRÈS PETIT MOBILE — ≤ 480px
   ════════════════════════════════════════════════ */
@media(max-width:480px){
  /* Sections */
  #lunar-guide, #agri-lunaire, #dashboard-section, #earth-section,
  #cards-section, #sky-section, #compass-section {
    padding: 16px 10px 50px !important;
  }
  /* titres de section : moins d'interlettrage pour tenir sur une ligne */
  #lunar-guide h2, #agri-lunaire h2 { letter-spacing:3px !important; font-size:23px !important; }

  /* ── Ciel en Direct ── */
  #sky-section .sky-triad .tv { font-size: 16px !important; }

  /* ── Guide Lunaire : 1 colonne ── */
  .phase-info-grid { grid-template-columns: 1fr !important; }
  .phase-info-item { border-bottom: 1px solid #1a1608; }
  .phase-info-item:last-child { border-bottom: none; }
  .circa-table { font-size: 13px !important; }
  .circa-table th, .circa-table td { padding: 8px 8px !important; }

  /* ── Tableau de bord ── */
  .db-cosmic-trio   { grid-template-columns: 1fr !important; }
  .db-top-grid      { grid-template-columns: 1fr !important; }
  .db-entry-header  { flex-wrap: wrap !important; }
  .db-entry-cycle   { margin-left: 0 !important; width: 100% !important; }
  .db-journal-header{ flex-direction: column !important; }
  .db-journal-cats  { width: 100% !important; }
  .db-cat-btn       { font-size: 11px !important; padding: 5px 10px !important; }

  /* ── Notes ── */
  .notes-grid { grid-template-columns: 1fr !important; }

  /* ── Vue semaine (Calendrier 2D) ── */
  .cwv-card-sym  { font-size: 28px !important; }
  .cwv-card-name { font-size: 13px !important; }
  .cwv-day-name  { font-size: 12px !important; }
  .cwv-moon      { font-size: 10px !important; }
  .cwv-ifc-date  { font-size: 13px !important; }
  .cwv-greg-date { font-size: 10px !important; }
  .cwv-note      { font-size: 13px !important; min-height: 70px !important; }

  /* ── Cœur Terrestre : harmoniques ── */
  #earth-harmonics > div { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  #earth-harmonics > div > div:first-child { text-align: left !important; min-width: 0 !important; }

  /* ── Boussole ── */
  .compass-cardinal-grid { grid-template-columns: repeat(2,1fr) !important; }
  #compass-section > p   { font-size: 14px !important; }

  /* ── Calendrier 2D : titre + bandeau + sous-titre ── */
  #cards-section h2 { font-size: 20px !important; letter-spacing: 3px !important; }
  #cards-section .guide-subtitle { font-size: 10.5px !important; letter-spacing: 2px !important; margin-bottom: 34px !important; }
  .season-banner { gap: 12px !important; padding: 15px 14px 12px !important; }
  .season-banner .sb-sym svg { width: 34px !important; height: 34px !important; }
  .season-banner .sb-saison { font-size: 18px !important; letter-spacing: 3px !important; }
  .season-banner .sb-meta   { font-size: 10.5px !important; letter-spacing: 1px !important; margin-top: 4px !important; }
  .season-banner .sb-weeks  { font-size: 10px !important; letter-spacing: 1.5px !important; }
  .season-cards-area { padding: 14px 10px 16px !important; }

  /* ── Cards mini : 3 par ligne, plus grandes et lisibles ── */
  .cards-row-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .playing-card.mini { width: 100% !important; max-width: 106px !important; height: auto !important; aspect-ratio: 5 / 7 !important; }
  .playing-card.mini .pc-big-sym    { font-size: 34px !important; }
  .playing-card.mini .pc-face-glyph { font-size: 28px !important; }
  .playing-card.mini .pc-top-val    { font-size: 13px !important; }
  .playing-card.mini .pc-top-sym    { font-size: 12px !important; }
  .playing-card.mini .pc-center-sub { font-size: 7.5px !important; }
  .playing-card.mini .pc-bottom-label { font-size: 8px !important; }
  .mini-card-wrap  { gap: 4px !important; }
  .mini-week-label { font-size: 10px !important; letter-spacing: 1px !important; }
  .mini-week-range { font-size: 9.5px !important; }
  .mini-week-greg  { font-size: 9px !important; }
}

/* Vignette étoile "quête disponible" sur les liens vers les autres outils Polaristar */
#tools-menu a:not([href="athanor.html"]):not([href^="akasha.html?openQuests"]):not(.qst-no-badge){ position:relative; }
#tools-menu a:not([href="athanor.html"]):not([href^="akasha.html?openQuests"]):not(.qst-no-badge)::after{
  content:'✦'; position:absolute; top:2px; right:6px; font-size:9px; color:#ffe87a;
  text-shadow:0 0 6px rgba(255,232,122,.9), 0 0 12px rgba(212,168,32,.7);
  animation: questBadgePulse 1.8s ease-in-out infinite;
}
@keyframes questBadgePulse{ 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.25);} }

/* Vignette étoile sur l'onglet Boussole (accomplit la quête "Mission Boussole") */
.qst-tab-badge{ position:relative; }
.qst-tab-badge::after{
  content:'✦'; position:absolute; top:-2px; right:2px; font-size:10px; color:#ffe87a;
  text-shadow:0 0 6px rgba(255,232,122,.9), 0 0 12px rgba(212,168,32,.7);
  animation: questBadgePulse 1.8s ease-in-out infinite;
}

/* ── Mon Compte — modale « carte de connexion » centrée (refonte 2026-09-06) ── */
#acctBackdrop{ display:none; position:fixed; inset:0; z-index:1999; background:rgba(4,2,16,.7); backdrop-filter:blur(6px); }
#acctBackdrop.open{ display:block; }
#acctDropdown{
  display:none; position:fixed; z-index:2000;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) scale(.96);
  width:min(300px,calc(100vw - 48px)); max-height:86vh; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  background:linear-gradient(160deg,#150a34,#0a0620); border:1px solid #d4a820;
  border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.75), 0 0 40px rgba(212,168,32,.15);
  font-family:'Cinzel',serif;
}
#acctDropdown.open{ display:block; opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
#acctDropdown::before{
  content:"\2726  Mon Compte"; display:block; text-align:center;
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:#ffe87a; padding:14px 16px 10px;
}
#acctDropdownPlanRow{ padding:14px 16px; border-bottom:1px solid #3a2060; }
.acct-dd-points{
  display:none; padding:10px 16px; border-bottom:1px solid #3a2060;
  align-items:center; gap:8px; text-decoration:none; color:inherit; cursor:pointer;
}
.acct-dd-points-label{ font-size:9px; letter-spacing:1px; color:#9a8ab0; text-transform:uppercase; }
.acct-dd-points-value{ margin-left:auto; font-size:13px; color:#e8c870; }
.acct-dd-btn{
  width:100%; text-align:left; border-radius:0; background:none; border:none;
  border-bottom:1px solid #3a2060; padding:11px 16px; font-size:11px; letter-spacing:1px;
  color:#c8a050; cursor:pointer; font-family:'Cinzel',serif; transition:background .2s;
}
.acct-dd-btn:hover{ background:rgba(212,168,32,.1); }
.acct-dd-btn.logout{ border-bottom:none; color:#d09090; }

/* ═══ Rendez-vous — Calendrier 2D + modale (identité CONSTELLA : nuit, or, ivoire, filets fins) ═══ */
#cal2d-events{
  max-width:640px; margin:0 auto 30px; padding:0 4px;
}
.c2e-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:9px; margin-bottom:6px;
  border-bottom:1px solid rgba(214,170,60,0.30);
}
.c2e-title{
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#d4a820;
}
.c2e-add{
  background:linear-gradient(135deg,#150c30,#0a0620); border:1px solid rgba(214,170,60,0.45);
  color:#e8c870; font-family:'Cinzel',serif; font-size:10px; letter-spacing:1.5px;
  padding:7px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:border-color .2s,color .2s;
}
.c2e-add:hover{ border-color:#f4d98a; color:#f4d98a; }
#c2e-list{ display:flex; flex-direction:column; }
.c2e-daygroup{ margin-top:14px; }
.c2e-dayhdr{
  font-family:'Crimson Text',serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:#b8ac90; margin-bottom:5px; padding-left:2px;
}
.c2e-cs{ color:#c9b06a; margin-left:8px; letter-spacing:1px; }
/* ── Recherche CONSTELLA + civile ── */
.c2e-search-wrap{ margin:8px 0 4px; position:relative; }
.c2e-search{
  width:100%; box-sizing:border-box; background:#080518;
  border:1px solid rgba(214,170,60,0.28); border-radius:999px;
  color:#efe6d0; padding:8px 14px; font-family:'Crimson Text',serif; font-size:13px;
  color-scheme:dark; transition:border-color .2s;
}
.c2e-search:focus{ outline:none; border-color:#f4d98a; }
.c2e-search::placeholder{ color:#6a5a80; font-style:italic; }
.c2e-search-hint{ font-size:11px; color:#8a7aa8; padding:4px 6px 0; font-family:'Crimson Text',serif; min-height:15px; }
.c2e-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid rgba(224,208,160,0.12);
  padding:11px 4px; cursor:pointer; color:#efe6d0; font-family:'Crimson Text',serif;
  transition:background .15s;
}
.c2e-item:hover{ background:rgba(214,170,60,0.06); }
.c2e-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 6px currentColor; }
.c2e-time{ font-size:13px; color:#f0c44a; letter-spacing:.5px; flex:0 0 46px; }
.c2e-name{ font-size:14px; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c2e-rec{ font-size:11px; color:#8090cc; flex:0 0 auto; }
.c2e-rel{ font-size:11px; color:#8a7aa8; flex:0 0 auto; letter-spacing:.3px; }
.c2e-empty{
  text-align:center; padding:30px 16px; color:#8a7aa8; font-family:'Crimson Text',serif; line-height:2;
}
.c2e-empty .c2e-empty-star{ font-size:20px; color:#d4a820; letter-spacing:6px; display:block; margin-bottom:6px; }

#ev-modal{
  display:none; position:fixed; inset:0; z-index:2600;
  background:rgba(4,2,14,0.90);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow-y:auto; padding:40px 16px;
}
#ev-modal.open{ display:block; }
.evm-card{
  position:relative; max-width:460px; margin:0 auto;
  background:linear-gradient(160deg,#0e0830,#08041a);
  border:1px solid rgba(214,170,60,0.34); border-radius:14px;
  padding:26px 22px 22px; box-shadow:0 0 40px rgba(0,0,0,0.55);
}
.evm-star{ position:absolute; top:14px; right:16px; color:#d4a820; font-size:14px; opacity:.7; }
.evm-title{
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:3px; text-transform:uppercase;
  color:#e8c870; margin-bottom:18px; padding-bottom:10px;
  border-bottom:1px solid rgba(214,170,60,0.22);
}
.evm-label{
  display:block; font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:#b8ac90; margin:13px 0 5px;
}
.evm-input{
  width:100%; box-sizing:border-box; background:#080518;
  border:1px solid rgba(224,208,160,0.20); border-radius:6px;
  color:#efe6d0; padding:9px 11px; font-family:'Crimson Text',serif; font-size:14px;
  color-scheme:dark; transition:border-color .2s;
}
.evm-input:focus{ outline:none; border-color:#d4a820; }
textarea.evm-input{ resize:vertical; }
.evm-row{ display:flex; gap:12px; }
.evm-col{ flex:1 1 0; min-width:0; }
.evm-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.evm-chip{
  background:#0a0620; border:1px solid rgba(224,208,160,0.20); border-radius:999px;
  color:#b8ac90; font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:1px;
  padding:6px 12px; cursor:pointer; transition:all .15s;
}
.evm-chip.sel{ border-color:#d4a820; color:#f4d98a; background:rgba(212,168,32,0.10); }
.evm-colors{ display:flex; gap:10px; }
.evm-swatch{
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:border-color .15s, transform .15s;
}
.evm-swatch.sel{ border-color:#efe6d0; transform:scale(1.12); }
.evm-reminders{ display:flex; flex-direction:column; gap:7px; }
.evm-rem-opt{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-family:'Crimson Text',serif; font-size:13px; color:#cfc4a8; letter-spacing:.4px;
}
.evm-rem-opt input{ accent-color:#d4a820; width:15px; height:15px; cursor:pointer; }
.evm-err{ color:#e08a7a; font-family:'Crimson Text',serif; font-size:12px; margin-top:12px; min-height:0; }
.evm-btns{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.evm-save{
  flex:1 1 auto; background:linear-gradient(135deg,#1a1040,#2a1a60);
  border:1px solid #c9a84c; color:#e8c870; font-family:'Cinzel',serif;
  font-size:11px; letter-spacing:2px; padding:10px 18px; border-radius:6px; cursor:pointer;
}
.evm-save:hover{ border-color:#f4d98a; color:#f4d98a; }
.evm-del{
  background:none; border:1px solid rgba(224,120,110,0.4); color:#d09090;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:1.5px; padding:10px 14px;
  border-radius:6px; cursor:pointer;
}
.evm-del:hover{ border-color:#e08a7a; color:#e08a7a; }
.evm-cancel{
  background:none; border:1px solid rgba(224,208,160,0.20); color:#b8ac90;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:1.5px; padding:10px 14px;
  border-radius:6px; cursor:pointer;
}
.evm-cancel:hover{ color:#efe6d0; }
@media(max-width:520px){
  .evm-row{ flex-direction:column; gap:0; }
  .evm-btns{ flex-direction:column; }
  .evm-del, .evm-cancel{ width:100%; }
}