/** * MyZen — Planning « parcours cours → horaires » (couche par-dessus myzen-planning.css). * Grille de cartes-cours (photo du type de cours) → détail avec Jour/Semaine. * Couleurs/polices = variables globales Ativo/VamTam (repli inclus). */ .myzen-pl{ --pl-surface:#FFFFFF; --pl-cream:var(--e-global-color-vamtam_accent_4,#F2E9E3); --pl-ink:var(--e-global-color-vamtam_accent_2,#344033); --pl-body:#4A443C; --pl-muted:var(--e-global-color-vamtam_accent_7,#948B80); --pl-accent:var(--e-global-color-vamtam_accent_1,#D45700); --pl-accent-soft:#FBEEE4; --pl-line:#EBE4DC; --pl-ok-ink:#2E6B3E;--pl-ok-bg:#E7F1E9; --pl-wait-ink:#9A6A00;--pl-wait-bg:#F8EED6; --pl-full-ink:#9A9A9A;--pl-full-bg:#F0EFEC; --pl-display:"Gotu",Georgia,serif; --pl-radius:18px; --pl-shadow:0 12px 36px rgba(64,58,51,.08); max-width:960px;margin:0 auto; } .myzen-pl *{box-sizing:border-box;} .myzen-planning__login{color:var(--pl-body);background:var(--pl-cream);border-radius:12px;padding:12px 16px;font-size:14.5px;} .myzen-planning__login a{color:var(--pl-accent);font-weight:700;} .myzen-planning__feedback{margin:8px 0;font-size:14px;} .myzen-planning__feedback.is-error{color:#B3261E;} .myzen-planning__feedback.is-success{color:var(--pl-ok-ink);} .myzen-planning__empty{color:var(--pl-muted);font-size:15px;padding:8px 0;} /* ---------- Vue 1 : grille des cours ---------- */ .myzen-pl__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:8px;} .myzen-pl__course{display:block;text-align:left;width:100%;background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:var(--pl-radius);padding:0;overflow:hidden;cursor:pointer;font-family:inherit;transition:transform .14s ease,box-shadow .15s ease,border-color .15s ease;} .myzen-pl__course:hover{transform:translateY(-3px);box-shadow:var(--pl-shadow);border-color:#DCD3CA;} .myzen-pl__course:focus-visible{outline:2px solid var(--pl-accent);outline-offset:2px;} .myzen-pl__photo{position:relative;display:flex;align-items:flex-end;min-height:172px;background-size:cover;background-position:center;} /* Voile dégradé plein hauteur : opaque en bas (100%) → transparent en haut (0%). */ .myzen-pl__photo::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,18,13,1) 0%,rgba(24,18,13,0) 100%);pointer-events:none;} .myzen-pl__ph--1{background:linear-gradient(135deg,#D45700,#E07B3A);} .myzen-pl__ph--2{background:linear-gradient(135deg,#344033,#4B5B48);} .myzen-pl__ph--3{background:linear-gradient(135deg,#C87A54,#E3A57E);} .myzen-pl__ph--4{background:linear-gradient(135deg,#B5502A,#D77E4E);} .myzen-pl__ph--5{background:linear-gradient(135deg,#6E7F5E,#93A181);} .myzen-pl__ph--6{background:linear-gradient(135deg,#9A6A00,#C79A3D);} .myzen-pl__overlay{position:relative;width:100%;padding:16px 18px 15px;background:none;} .myzen-pl__cname{display:block;font-family:var(--pl-display);font-size:22px;color:#fff;font-weight:500;line-height:1.12;} .myzen-pl__clvl{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:999px;margin-top:9px;} .myzen-pl__cfoot{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;} .myzen-pl__ccount{font-size:13px;color:var(--pl-muted);font-weight:600;} .myzen-pl__cgo{font-size:13px;color:var(--pl-accent);font-weight:700;} /* Basculement grille / détail (piloté par [hidden] via le JS) */ .myzen-pl__grid[hidden],.myzen-pl__detail[hidden]{display:none;} /* ---------- Vue 0 : grille des catégories (Catégorie → Cours → Séance) ---------- */ .myzen-pl__catgrid[hidden],.myzen-pl__coursegrid[hidden]{display:none;} .myzen-pl__coursegrid{animation:myzen-pl-fade .26s ease;} /* auto-fit : les 3 catégories remplissent la ligne (pas de piste vide). */ .myzen-pl__catgrid .myzen-pl__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} /* Cartes catégorie un cran plus grandes que les cartes cours. */ .myzen-pl__cat .myzen-pl__photo{min-height:210px;} .myzen-pl__cat .myzen-pl__cname{font-size:26px;} @media (prefers-reduced-motion:reduce){.myzen-pl__coursegrid{animation:none;}} .myzen-pl__detail{animation:myzen-pl-fade .26s ease;} @keyframes myzen-pl-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){.myzen-pl__detail{animation:none;}} /* ---------- Vue 2 : détail cours ---------- */ .myzen-pl__back{background:none;border:none;color:var(--pl-muted);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;padding:6px 0;margin-bottom:12px;} .myzen-pl__back:hover{color:var(--pl-accent);} .myzen-pl__dname{font-family:var(--pl-display);font-size:30px;color:var(--pl-ink);font-weight:500;margin:0 0 6px;line-height:1.1;} .myzen-pl__ddesc{color:var(--pl-body);font-size:15px;max-width:62ch;margin:0 0 6px;} .myzen-pl__bar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:20px;} .myzen-pl__seg{display:inline-flex;background:var(--pl-cream);border-radius:999px;padding:4px;gap:2px;} .myzen-pl__segbtn{appearance:none;border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--pl-muted);padding:8px 20px;border-radius:999px;cursor:pointer;transition:all .14s ease;} .myzen-pl__segbtn[aria-selected="true"]{background:#fff;color:var(--pl-ink);box-shadow:0 1px 3px rgba(64,58,51,.14);} .myzen-pl__segbtn:focus-visible{outline:2px solid var(--pl-accent);outline-offset:2px;} .myzen-pl__nav{display:inline-flex;align-items:center;gap:10px;} .myzen-pl__navbtn{appearance:none;border:1px solid var(--pl-line);background:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--pl-ink);display:grid;place-items:center;} .myzen-pl__navbtn:hover{border-color:var(--pl-accent);color:var(--pl-accent);} .myzen-pl__navbtn[disabled]{opacity:.4;cursor:default;border-color:var(--pl-line);color:var(--pl-muted);} .myzen-pl__period{font-weight:600;color:var(--pl-ink);min-width:150px;text-align:center;font-size:14.5px;} .myzen-pl__days{margin-top:8px;} .myzen-pl .myzen-planning__day{margin-top:22px;} .myzen-pl .myzen-planning__day[hidden]{display:none;} .myzen-pl .myzen-planning__day-title{font-family:var(--pl-display);font-size:18px;color:var(--pl-ink);font-weight:500;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--pl-line);} .myzen-pl .myzen-planning__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} /* ---------- Cartes de séance (restyle) ---------- */ .myzen-pl .myzen-session{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:16px;padding:15px 20px;transition:border-color .15s ease,box-shadow .15s ease;} .myzen-pl .myzen-session:hover{border-color:#DCD3CA;box-shadow:var(--pl-shadow);} .myzen-pl .myzen-session[data-status="confirmed"]{border-color:#CFE3D4;} .myzen-pl .myzen-session__main{order:1;display:flex;align-items:baseline;gap:14px;flex:1 1 240px;min-width:0;} .myzen-pl .myzen-session__time{font-family:var(--pl-display);font-size:21px;color:var(--pl-accent);font-variant-numeric:tabular-nums;flex:none;line-height:1;} .myzen-pl .myzen-session__title{font-weight:700;color:var(--pl-ink);font-size:15.5px;} .myzen-pl .myzen-session__meta{order:4;display:flex;gap:6px;flex-wrap:wrap;color:var(--pl-muted);font-size:13px;flex:1 1 100%;padding-left:35px;} .myzen-pl .myzen-session__meta span:not(:last-child)::after{content:"·";margin-left:6px;} .myzen-pl .myzen-session__places{order:2;font-size:13px;color:var(--pl-body);font-weight:600;flex:none;white-space:nowrap;} .myzen-pl .myzen-session__action{order:3;flex:none;display:flex;align-items:center;gap:10px;} .myzen-pl .myzen-btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;border:1.5px solid var(--pl-accent);background:transparent;color:var(--pl-accent);cursor:pointer;transition:transform .12s ease,background .15s ease;white-space:nowrap;} .myzen-pl .myzen-btn:hover{background:var(--pl-accent-soft);} .myzen-pl .myzen-btn--primary{background:var(--pl-accent);color:#fff;} .myzen-pl .myzen-btn--primary:hover{transform:translateY(-1px);background:#bd4d00;} .myzen-pl .myzen-btn[disabled]{opacity:.6;cursor:default;} .myzen-pl .myzen-badge{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap;background:var(--pl-cream);color:var(--pl-ink);} .myzen-pl .myzen-badge--ok{color:var(--pl-ok-ink);background:var(--pl-ok-bg);} .myzen-pl .myzen-badge--full{color:var(--pl-full-ink);background:var(--pl-full-bg);} @media (max-width:680px){ .myzen-pl .myzen-session__meta{padding-left:0;} .myzen-pl .myzen-session__action{margin-left:auto;} .myzen-pl__bar{gap:14px;} } /* ---------- En-tête de la grille (match maquette) ---------- */ .myzen-pl__head{margin-bottom:28px;} .myzen-pl__eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pl-muted);font-weight:600;margin:0 0 10px;} .myzen-pl__h1{font-family:var(--pl-display);font-weight:500;color:var(--pl-ink);font-size:36px;line-height:1.05;margin:0 0 6px;letter-spacing:-.01em;} .myzen-pl__sub{color:var(--pl-muted);font-size:16px;margin:0;} .myzen-pl__dname{font-size:36px;} /* ---------- Neutralise le style « bouton pilule » du thème Ativo ---------- Le thème stylise TOUS les