/* planning.css — page publique /creations/planning.
   Univers "poste de contrôle spatial" : fond étoilé, nébuleuses, équerres
   de visée façon HUD de vaisseau — même vocabulaire que le vrai hud-jeu.html
   de la chaîne. C'est ce panneau que planning-export.js reproduit au Canvas
   pour les exports, avec la même palette et la même géométrie. */

/* 720px convient au panneau HTML (une liste à une colonne) et à l'aperçu
   vertical, mais l'aperçu horizontal (16:9, voir le seuil de 700px dans
   planning-export.js) y paraît minuscule sur un écran d'ordinateur : au-delà
   de ce seuil, on lui laisse toute la largeur habituelle du site. */
.planning-board-wrap { padding: 0 var(--gutter) 40px; max-width: 720px; margin: 0 auto; }
@media (min-width: 701px) {
    .planning-board-wrap { max-width: var(--maxw); }
}

/* Canvas visible où planning-export.js dessine directement le même rendu
   que les fichiers téléchargés (voir dessinerStory/dessinerLarge) : il
   remplace le panneau HTML une fois prêt, et reste caché par défaut pour
   que le planning s'affiche quand même si JS échoue. */
.planning-apercu {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
/* [hidden] a la même spécificité que .planning-apercu ; sans ce garde-fou,
   la règle display: block ci-dessus gagnerait sur l'attribut et un canvas
   vide s'afficherait avant que le JS n'ait fini de dessiner dedans. */
.planning-apercu:not([hidden]) { display: block; }

.planning-board {
    --pl-encre:        #050110;
    --pl-violet:       #A855F7;
    --pl-magenta:      #E93CFF;
    /* Réchauffé d'un jaune citron (#FFE23D) vers un ambre "tally light" de
       régie TV : même rôle dans le design (HUD, heures), juste plus chaud.
       Repris à l'identique dans Planning::COULEURS (PHP) et dans les
       nombreux "#FFE23D" de planning-export.js : retinter les trois si on
       retouche encore cette couleur. */
    --pl-jaune:        #FFA83D;
    --pl-cyan:         #4CE0D2;
    --pl-texte:        #F4ECFF;
    --pl-texte-doux:   #9C8AC2;
    --pl-trait:        rgba(168, 85, 247, 0.4);

    /* Reste à sa largeur de liste même quand .planning-board-wrap s'élargit
       pour l'aperçu horizontal : une liste à une colonne n'a rien à gagner
       à s'étirer sur toute la largeur d'un écran d'ordinateur. */
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem 2rem;
    border: 1px solid var(--pl-trait);

    background-image:
        radial-gradient(1.6px 1.6px at 8% 12%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 22% 68%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 38% 24%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 55% 82%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 72% 15%, rgba(168,85,247,.9), transparent),
        radial-gradient(1.2px 1.2px at 85% 55%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 92% 88%, rgba(233,60,255,.85), transparent),
        radial-gradient(1px 1px at 12% 92%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 65% 40%, #fff, transparent),
        radial-gradient(120% 90% at 10% -10%, rgba(168, 85, 247, 0.38), transparent 60%),
        radial-gradient(110% 90% at 100% 15%, rgba(76, 224, 210, 0.14), transparent 55%),
        radial-gradient(120% 100% at 90% 115%, rgba(233, 60, 255, 0.22), transparent 60%),
        linear-gradient(var(--pl-encre), var(--pl-encre));
}

.planning-board__coin {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--pl-violet);
    opacity: .8;
}
.planning-board__coin--hg { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.planning-board__coin--hd { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-color: var(--pl-jaune); }
.planning-board__coin--bg { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-color: var(--pl-jaune); }
.planning-board__coin--bd { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.page-header p.planning-periode {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-color);
}

.planning-board__jours { position: relative; display: grid; gap: 0.75rem; margin-top: 0.5rem; }

/* Hauteur fixe et éléments toujours à la même position, quel que soit le
   contenu : un « Repos » et un nom de jeu à rallonge doivent occuper
   exactement la même place dans la liste, jamais étirer leur ligne. */
.planning-jour {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 92px;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pl-trait);
    border-radius: var(--radius-sm);
    color: var(--pl-texte);
}
/* Pas d'opacité réduite : un jour de repos doit rester repérable au premier
   coup d'œil, pas se fondre dans le décor. Bordure en tirets + fond en
   dégradé nébuleuse, comme un signal « veille » plutôt qu'une case grisée. */
.planning-jour.est-repos {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.07), rgba(107, 114, 128, 0.1));
    border-style: dashed;
}
.planning-jour.est-repos .planning-jour__vignette {
    background: radial-gradient(circle at 32% 28%, rgba(168, 85, 247, 0.3), rgba(255, 255, 255, 0.03) 72%);
}

.planning-jour__corps { display: grid; gap: 0.35rem; min-width: 0; flex: 1; }

.planning-jour__vignette {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pl-trait);
    flex-shrink: 0;
}
.planning-jour__vignette[data-couleur="violet"]  { border-color: var(--pl-violet); }
.planning-jour__vignette[data-couleur="magenta"] { border-color: var(--pl-magenta); }
.planning-jour__vignette[data-couleur="jaune"]   { border-color: var(--pl-jaune); }
.planning-jour__vignette[data-couleur="vert"]    { border-color: #3BA55C; }
.planning-jour__vignette[data-couleur="gris"]    { border-color: #6B7280; }

.planning-jour__vignette img { width: 100%; height: 100%; object-fit: cover; }
.planning-jour__vignette svg { width: 32px; height: 32px; color: var(--pl-texte); }
.planning-jour__vignette[data-couleur="violet"]  svg { color: var(--pl-violet); }
.planning-jour__vignette[data-couleur="magenta"] svg { color: var(--pl-magenta); }
.planning-jour__vignette[data-couleur="jaune"]   svg { color: var(--pl-jaune); }
.planning-jour__vignette[data-couleur="vert"]    svg { color: #3BA55C; }
.planning-jour__vignette[data-couleur="gris"]    svg { color: #9C8AC2; }

.planning-jour__nom {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--pl-texte-doux);
}

.planning-jour__detail {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.planning-jour__libelle {
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planning-jour__repos { font-size: 1.2rem; font-style: italic; font-weight: 500; color: var(--pl-texte-doux); }
.planning-jour__heures { font-family: var(--font-mono); font-size: 1.05rem; color: var(--pl-jaune); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
/* Ligne à part plutôt que sur la ligne du titre/heure : un live à plusieurs
   ne doit pas grignoter la place du nom du jeu ou forcer sa troncature. */
.planning-jour__feats {
    font-size: 0.9rem;
    color: var(--pl-texte-doux);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planning-board__signature {
    position: relative;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--pl-texte-doux);
}

@media (max-width: 480px) {
    .planning-board { padding: 1.75rem 1.1rem 1.6rem; }
    .planning-jour { padding: 0.9rem 0.9rem; gap: 0.8rem; min-height: 82px; }
    .planning-jour__vignette { width: 62px; height: 62px; }
    .planning-jour__libelle { font-size: 1.18rem; }
    .planning-jour__repos { font-size: 1.1rem; }
    .planning-jour__heures { font-size: 0.98rem; }
    .planning-jour__nom { font-size: 0.92rem; }
}

/* --- Export ------------------------------------------------------------------
   Barre d'action juste sous le titre : on veut pouvoir exporter tout de
   suite, sans devoir d'abord descendre lire le planning entier. */
.planning-export { padding: 0 var(--gutter) 32px; max-width: 640px; margin: 0 auto; text-align: center; }
.planning-export__boutons { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }