/* =====================================================================
   SAINT-CYPRIEN · plannings.css — la grille utilisable + le poster couleur.
   Même DA showroom : fond sombre, chrome, spark. Les lignes s'allument au
   survol ; le poster reste EN COULEUR (filter:none), cliquable, CLS 0.
   ===================================================================== */

.pl-wrap { padding-block: clamp(3rem,7vw,6rem); }

/* --------------------------- FILTRES ------------------------------ */
.filters { display: grid; gap: 1.2rem; margin-bottom: clamp(1.8rem,4vw,2.8rem); }
.fgroup { display: grid; gap: .6rem; }
.fgroup__k { font: 600 .62rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--spark); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--step--1)/1 var(--f-ui); padding: .58em 1.05em; border-radius: 100px; border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--paper-2); transition: border-color .3s, color .3s, background .3s, transform .2s var(--ease-spring); }
.chip:hover { border-color: var(--spark); color: var(--ink); transform: translateY(-1px); }
.chip:active { transform: scale(.94); border-color: var(--spark); color: var(--ink); }
.chip.is-on { background: var(--spark); border-color: var(--spark); color: var(--on-spark); }
.chip:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

/* --------------------------- LA GRILLE ---------------------------- */
.pgrid { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 620px){ .pgrid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .pgrid { grid-template-columns: repeat(3,1fr); } }
.pday { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; align-self: start; }
.pday__h { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); padding: 1rem 1.15rem .75rem; border-bottom: 1px solid var(--line); }
.pday__list { display: grid; }
.slot { display: grid; grid-template-columns: 3.1rem 1fr; gap: .95rem; align-items: baseline; padding: .8rem 1.15rem; border-bottom: 1px solid var(--line-soft); transition: background .3s, box-shadow .3s; }
.slot:last-child { border-bottom: 0; }
.slot:nth-child(even) { background: rgba(var(--spark-rgb),.028); }
/* les lignes s'allument au survol — la lumière sur le créneau */
.slot:hover { background: var(--paper-3); box-shadow: inset 3px 0 0 var(--spark); }
.slot__t { font: 600 .84rem/1.2 var(--f-mono); color: var(--spark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.slot__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.slot__name { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
/* coach + niveau = l'info que l'on vient chercher, pas de la déco → --ink-soft */
.slot__meta { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.pl-empty { text-align: center; color: var(--ink-soft); padding: 2.2rem; border: 1px dashed var(--line); border-radius: var(--radius); font-size: var(--step-0); }

/* --------------------------- LE POSTER ---------------------------- */
.pl-poster { display: block; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease-spring), box-shadow .35s; }
.pl-poster:hover { transform: translateY(-3px); box-shadow: var(--glow), var(--shadow); }
.pl-poster img { width: 100%; height: auto; display: block; filter: none; }   /* EN COULEUR — loi §5 */
.pl-poster::after { content: "Ouvrir en grand ↗"; position: absolute; right: .9rem; bottom: .9rem; font: 600 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-spark); background: var(--spark); padding: .6em .95em; border-radius: 100px; box-shadow: var(--shadow); }

/* ------------------------ NOTES PRATIQUES ------------------------- */
.pnotes { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px){ .pnotes { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 920px){ .pnotes { grid-template-columns: repeat(4,1fr); } }
.pnote { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 1.15rem 1.25rem; transition: transform .35s var(--ease-spring), border-color .3s; }
.pnote:hover { transform: translateY(-3px); border-color: rgba(var(--ink-rgb),.3); }
.pnote b { display: block; font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: var(--step-0); margin-bottom: .4rem; }
.pnote span { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }

/* --------- Le créneau sans encadrant nommé : marqué, pas caché ------ */
.slot--tbd { background: linear-gradient(90deg, rgba(var(--spark-2-rgb),.06), transparent 60%); }
.slot--tbd .slot__meta { display: inline-flex; align-items: center; gap: .7ch; flex-wrap: wrap; }

/* ------------------- LA SEMAINE EN CHIFFRES ----------------------- *
   Cinq nombres comptés sur la grille (jamais saisis). Ils donnent le poids
   de la semaine avant qu'on ne filtre quoi que ce soit. */
.pl-pulse { display: grid; gap: 1px; grid-template-columns: repeat(2,1fr); background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(1.6rem,3.5vw,2.4rem); }
@media (min-width: 720px){ .pl-pulse { grid-template-columns: repeat(5,1fr); } }
.pulse { background: var(--paper-2); padding: clamp(.95rem,2vw,1.3rem) 1.1rem; display: flex; flex-direction: column; gap: .35rem; transition: background .35s; }
.pulse:hover { background: var(--paper-3); }
.pulse__v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem,4.5vw,2.5rem); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pulse__l { font: 600 .62rem/1.45 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }

/* ------------------- COMPTEUR + REMISE À ZÉRO --------------------- */
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: clamp(1rem,2.4vw,1.6rem); }
.pl-count { font: 600 .7rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spark); }
.pl-reset, .pl-empty__reset { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--step--1)/1 var(--f-ui); padding: .55em 1.05em; border-radius: 100px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; transition: border-color .3s, color .3s, transform .2s var(--ease-spring); }
.pl-reset:hover, .pl-empty__reset:hover { border-color: var(--spark); color: var(--ink); transform: translateY(-1px); }
.pl-reset:active, .pl-empty__reset:active { transform: scale(.94); }
.pl-reset:focus-visible, .pl-empty__reset:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.pl-empty__reset { margin-top: .9rem; }