/* ========================================================================== L'agenda — Musiques Tangentes Les couleurs sont celles du site (kit Elementor) ; elles sont redéclarées ici pour que l'agenda se présente pareil dans l'administration, où le kit n'est pas chargé, et sur le site. ========================================================================== */ /* Le menu de statut est posé sur et non dans l'agenda — sinon le cadre de la grille, qui masque ce qui dépasse, le couperait. Il est donc hors de portée des jetons déclarés sur .mt-agenda : on les lui donne aussi, faute de quoi son fond blanc n'existe pas et il se lit par transparence. */ .mt-agenda,.mt-ag-menu{ --mt-encre:#16141A; --mt-texte:#5B5762; --mt-doux:#8A8590; --mt-fond:#FBFAF8; --mt-surface:#FFFFFF; --mt-surface2:#F4F1EC; --mt-bordure:#E8E4DE; --mt-bordure-forte:#D5CFC6; /* « Rose vif » du kit Elementor. Le nom est « accent » et non « rose » à dessein : la charte du site appelle --mt-rose le rose *clair* #ECA1C7, et deux sens pour un même nom finissent toujours par se croiser. */ --mt-accent:#E61974; --mt-libre:#006633; --mt-libre-fond:#E2F0E7; --mt-option:#B4600A; --mt-option-fond:#FBEBD9; --mt-reserve:#0B5E8A;--mt-reserve-fond:#E1F0F8; --mt-annule:#6B6B6B; --mt-annule-fond:#EFEFEF; /* Un pixel et quart par minute : c'est ce qu'il faut pour qu'un créneau de trente minutes — le plus court, et le plus fréquent — laisse tenir ses deux lignes, l'heure avec la salle puis la discipline avec la personne. En dessous, la seconde ligne se retrouve coupée en deux. */ --px:1.15px; color:var(--mt-texte); font-size:14px; line-height:1.45; margin:1em 0; } .mt-agenda *{box-sizing:border-box} .mt-agenda[aria-busy="true"]{opacity:.55; transition:opacity .12s} /* ── Commandes ───────────────────────────────────────────────────────────── */ .mt-ag-barre{display:flex; flex-wrap:wrap; gap:.6rem .9rem; align-items:center; padding:.6rem .7rem; background:var(--mt-surface2); border:1px solid var(--mt-bordure); border-radius:6px 6px 0 0} .mt-ag-vues{display:flex; gap:2px} .mt-ag-vues button{font:inherit; cursor:pointer; padding:.25rem .7rem; border-radius:4px; border:1px solid transparent; background:transparent; color:var(--mt-texte)} .mt-ag-vues button:hover{background:var(--mt-surface)} .mt-ag-vues button.actif{background:var(--mt-surface); border-color:var(--mt-bordure-forte); color:var(--mt-encre)} .mt-ag-nav{display:flex; align-items:center; gap:.35rem} .mt-ag-nav button{font:inherit; cursor:pointer; min-width:2rem; padding:.25rem .6rem; border:1px solid var(--mt-bordure-forte); border-radius:4px; background:var(--mt-surface); color:var(--mt-texte)} .mt-ag-nav button:hover{border-color:var(--mt-accent); color:var(--mt-encre)} .mt-ag-titre{margin-left:.4rem; color:var(--mt-encre); font-weight:600; text-transform:capitalize} .mt-ag-filtres{display:flex; flex-wrap:wrap; gap:.35rem; margin-left:auto} .mt-ag-filtres select{font:inherit; max-width:14rem; padding:.2rem .4rem; border:1px solid var(--mt-bordure-forte); border-radius:4px; background:var(--mt-surface); color:var(--mt-texte)} .mt-agenda :focus-visible{outline:2px solid var(--mt-accent); outline-offset:2px} /* La pastille de salle. Le liseré intérieur n'est pas un ornement : sans lui, la pastille de la salle Jaune disparaît sur un fond blanc. */ .mt-pastille{display:inline-block; width:.62em; height:.62em; flex:0 0 auto; margin-right:.32em; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(22,20,26,.22); vertical-align:baseline} /* ── Synthèse ────────────────────────────────────────────────────────────── */ .mt-ag-synthese{display:flex; flex-wrap:wrap; gap:.2rem 1.6rem; padding:.7rem .8rem; border:1px solid var(--mt-bordure); border-top:none; background:var(--mt-surface); font-variant-numeric:tabular-nums} .mt-ag-synthese div{display:flex; align-items:baseline; gap:.35rem} .mt-ag-synthese b{font-size:1.15rem; color:var(--mt-encre); font-weight:600} .mt-ag-synthese .mt-st-libre b{color:var(--mt-libre)} .mt-ag-synthese .mt-st-option b{color:var(--mt-option)} .mt-ag-synthese .mt-st-reserve b{color:var(--mt-reserve)} .mt-ag-synthese .mt-st-annule b{color:var(--mt-annule)} .mt-ag-synthese .mt-ag-discret{color:var(--mt-doux); font-size:.92em} .mt-ag-synthese .mt-ag-alerte{color:var(--mt-option)} .mt-ag-conflits{margin:0; padding:.55rem .8rem; border:1px solid var(--mt-accent); border-top:none; background:#FBE3EE; color:var(--mt-encre); font-size:.92em} .mt-ag-vide{margin:0; padding:1.6rem .8rem; text-align:center; color:var(--mt-doux); border:1px solid var(--mt-bordure); border-top:none; background:var(--mt-surface)} /* ── Grille horaire (vues Jour et Semaine) ───────────────────────────────── */ .mt-ag-grille{border:1px solid var(--mt-bordure); border-top:none; border-radius:0 0 6px 6px; background:var(--mt-surface); overflow:hidden} .mt-ag-entetes{display:flex; border-bottom:1px solid var(--mt-bordure); background:var(--mt-surface2)} .mt-ag-entetes > span{flex:1 1 0; min-width:0; padding:.4rem .5rem; text-align:center; font-size:.85em; color:var(--mt-encre); border-left:1px solid var(--mt-bordure)} .mt-ag-entetes .mt-pastille{width:.7em; height:.7em} .mt-ag-entetes > span:first-child{flex:0 0 3.6rem; border-left:none} .mt-ag-entetes b{font-weight:600} .mt-ag-entetes em{display:block; font-style:normal; font-size:.85em; color:var(--mt-doux)} .mt-ag-entetes .mt-ag-ferme{color:var(--mt-doux)} .mt-ag-entetes .mt-ag-orphelin{color:var(--mt-option)} .mt-ag-corps{display:flex; position:relative; overflow-x:auto} .mt-ag-regle{flex:0 0 3.6rem; position:relative; height:calc(var(--total) * var(--px))} .mt-ag-regle span{position:absolute; top:calc(var(--haut) * var(--px)); right:.4rem; transform:translateY(-.55em); font-size:.78em; color:var(--mt-doux); font-variant-numeric:tabular-nums} .mt-ag-colonne{flex:1 1 0; min-width:5.5rem; position:relative; height:calc(var(--total) * var(--px)); border-left:1px solid var(--mt-bordure)} .mt-ag-colonne-fermee{background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--mt-surface2) 6px,var(--mt-surface2) 12px)} .mt-ag-colonne > i{position:absolute; left:0; right:0; top:calc(var(--haut) * var(--px)); border-top:1px solid var(--mt-bordure); opacity:.7} .mt-ag-bloc{position:absolute; overflow:hidden; cursor:default; top:calc(var(--haut) * var(--px)); height:calc(var(--duree) * var(--px)); left:calc(var(--couloir) / var(--couloirs) * 100%); width:calc(100% / var(--couloirs)); padding:.1rem .35rem; border-radius:3px; border-left:3px solid; font-size:.8em; line-height:1.25} .mt-ag-bloc b{display:flex; align-items:baseline; justify-content:space-between; gap:.4em; font-weight:600; font-variant-numeric:tabular-nums} .mt-ag-bloc b > span{flex:0 0 auto; opacity:1} /* Une ligne, coupée par des points de suspension plutôt qu'un texte qui déborde du bloc : la largeur d'une colonne dépend du nombre de salles ou de jours affichés, et « Guitare · Mathieu Boissel » tient sur une ligne à sept colonnes, sur quatre quand il y en a douze. L'infobulle, elle, dit tout. */ .mt-ag-bloc > span{display:block; color:inherit; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mt-ag-bloc em{display:flex; align-items:center; flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; font-style:italic; font-weight:400; opacity:.85} .mt-ag-bloc em .mt-pastille{margin-right:.28em} .mt-ag-bloc .mt-ag-sans-salle{opacity:.5} .mt-ag-bloc[data-mt-editable]{cursor:pointer} .mt-ag-bloc[data-mt-editable]:hover{filter:brightness(.96)} .mt-st-libre{background:var(--mt-libre-fond); border-color:var(--mt-libre); color:var(--mt-libre)} .mt-st-option{background:var(--mt-option-fond); border-color:var(--mt-option); color:var(--mt-option)} .mt-st-reserve{background:var(--mt-reserve-fond);border-color:var(--mt-reserve); color:var(--mt-reserve)} .mt-st-annule{background:var(--mt-annule-fond); border-color:var(--mt-annule); color:var(--mt-annule)} /* Une réservation de salle : même grammaire de couleurs, texture différente. Ce n'est pas un cours, et l'accueil n'en fait pas la même chose. */ .mt-ag-resa{background-image:repeating-linear-gradient(135deg, rgba(22,20,26,.05) 0 3px, transparent 3px 7px)} .mt-ag-resa b > span::before{content:"◆"; font-size:.7em; margin-right:.3em; opacity:.55} .mt-ag-conflits-semaine{border-color:var(--mt-bordure-forte); background:var(--mt-surface2); color:var(--mt-texte)} .mt-ag-annulee{text-decoration:line-through; opacity:.7} .mt-ag-remplace{border-left-style:double; border-left-width:5px} .mt-ag-deplacee{border-left-style:dashed} /* ── Vue Mois ────────────────────────────────────────────────────────────── */ .mt-ag-mois{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:.6rem; border:1px solid var(--mt-bordure); border-top:none; border-radius:0 0 6px 6px; background:var(--mt-surface)} .mt-ag-jn{font-size:.72em; text-transform:uppercase; letter-spacing:.08em; color:var(--mt-doux); text-align:center; padding-bottom:.2rem} .mt-ag-case{min-height:4.2rem; border:1px solid var(--mt-bordure); border-radius:4px; padding:.2rem .3rem; display:flex; flex-direction:column; gap:.15rem} .mt-ag-case > a{color:var(--mt-texte); text-decoration:none; font-size:.85em; font-variant-numeric:tabular-nums} .mt-ag-case > a:hover{color:var(--mt-accent); text-decoration:underline} .mt-ag-hors{border:none; background:transparent; min-height:0} .mt-ag-case-we{background:var(--mt-surface2)} .mt-ag-case-fermee{background:var(--mt-annule-fond); border-style:dashed} .mt-ag-case-jour{border-color:var(--mt-accent); box-shadow:inset 0 0 0 1px var(--mt-accent)} .mt-ag-case-jour > a{color:var(--mt-accent)} .mt-ag-motif{font-style:normal; font-size:.7em; color:var(--mt-doux)} .mt-ag-pts{display:flex; flex-wrap:wrap; gap:2px; margin-top:auto} .mt-ag-pts i{font-style:normal; font-size:.7em; line-height:1.5; padding:0 .3em; border-radius:2px; font-variant-numeric:tabular-nums} .mt-ag-pts .mt-st-libre{background:var(--mt-libre-fond); color:var(--mt-libre)} .mt-ag-pts .mt-st-option{background:var(--mt-option-fond); color:var(--mt-option)} .mt-ag-pts .mt-st-reserve{background:var(--mt-reserve-fond); color:var(--mt-reserve)} .mt-ag-pts .mt-st-annule{background:var(--mt-annule-fond); color:var(--mt-annule)} /* ── Vue Année ───────────────────────────────────────────────────────────── */ .mt-ag-annee{display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.9rem; padding:.8rem; border:1px solid var(--mt-bordure); border-top:none; border-radius:0 0 6px 6px; background:var(--mt-surface)} .mt-ag-mini h4{margin:0 0 .3rem; font-size:.82em; font-weight:600; text-transform:capitalize} .mt-ag-mini h4 a{color:var(--mt-encre); text-decoration:none} .mt-ag-mini h4 a:hover{color:var(--mt-accent)} .mt-ag-mini > div{display:grid; grid-template-columns:repeat(7,1fr); gap:2px} .mt-ag-mini i{display:block; aspect-ratio:1; border-radius:2px; background:var(--mt-surface2)} .mt-ag-mini .mt-ag-hors{background:transparent} .mt-ag-mini .mt-n0{background:var(--mt-surface2)} .mt-ag-mini .mt-n1{background:#CDE4D6} .mt-ag-mini .mt-n2{background:#9CCBB0} .mt-ag-mini .mt-n3{background:#5FA982} .mt-ag-mini .mt-n4{background:var(--mt-libre)} .mt-ag-mini .mt-ag-ferme{background:repeating-linear-gradient(45deg,var(--mt-annule-fond),var(--mt-annule-fond) 2px,transparent 2px,transparent 4px)} /* ── Vue Par personne ────────────────────────────────────────────────────── */ .mt-ag-personnes{display:grid; grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)); gap:.8rem; padding:.8rem; border:1px solid var(--mt-bordure); border-top:none; border-radius:0 0 6px 6px; background:var(--mt-surface)} .mt-ag-personne{border:1px solid var(--mt-bordure); border-radius:5px; padding:.6rem .7rem} .mt-ag-personne h4{margin:0 0 .4rem; font-size:.95em; color:var(--mt-encre); font-weight:600} .mt-ag-personne h4 em{display:block; font-style:normal; font-weight:400; font-size:.85em; color:var(--mt-doux)} .mt-ag-personne ul{list-style:none; margin:0; padding:0} .mt-ag-personne li{display:grid; grid-template-columns:5.5rem 5.5rem 1fr; gap:.1rem .5rem; padding:.25rem 0 .25rem .5rem; border-top:1px dotted var(--mt-bordure); border-left:3px solid; font-size:.85em; font-variant-numeric:tabular-nums} .mt-ag-personne li span:last-child{grid-column:1 / -1; color:var(--mt-doux); font-size:.9em; display:flex; align-items:center} .mt-ag-personne li .mt-ag-sans-salle{font-style:italic; opacity:.7} .mt-ag-personne li b{font-weight:600} /* ── Menu de changement de statut ────────────────────────────────────────── */ .mt-ag-menu{position:absolute; z-index:9999; min-width:9rem; padding:.25rem; background:var(--mt-surface); border:1px solid var(--mt-bordure-forte); border-radius:5px; box-shadow:0 8px 24px -12px rgba(22,20,26,.45)} .mt-ag-menu button{display:block; width:100%; text-align:left; font:inherit; cursor:pointer; padding:.3rem .5rem; border:none; border-radius:3px; background:transparent; color:var(--mt-texte)} .mt-ag-menu button:hover{background:var(--mt-surface2); color:var(--mt-encre)} .mt-ag-menu button[aria-current="true"]{font-weight:600; color:var(--mt-encre)} .mt-ag-menu .mt-ag-menu-titre{padding:.25rem .5rem .35rem; font-size:.78em; color:var(--mt-doux); border-bottom:1px solid var(--mt-bordure); margin-bottom:.25rem} /* ── La porte, quand on n'est pas connecté ───────────────────────────────── */ .mt-agenda-porte{max-width:26rem; margin:2rem auto; padding:1.4rem 1.6rem; border:1px solid #E8E4DE; border-radius:8px; background:#FFFFFF; color:#5B5762} .mt-agenda-porte p{margin:0 0 1rem} .mt-agenda-porte label{display:block; margin-bottom:.6rem} .mt-agenda-porte input[type=text],.mt-agenda-porte input[type=password]{width:100%} /* Le corps de la grille défile latéralement quand il le faut — mais la page, elle, ne doit jamais déborder : c'est la barre de commandes qui plie. */ .mt-agenda,.mt-ag-grille,.mt-ag-mois,.mt-ag-annee,.mt-ag-personnes{max-width:100%} @media (max-width:782px){ .mt-ag-barre{gap:.5rem} .mt-ag-vues,.mt-ag-nav{flex-wrap:wrap} .mt-ag-vues button{padding:.25rem .55rem} .mt-ag-titre{margin-left:0; width:100%} .mt-ag-filtres{margin-left:0; width:100%} .mt-ag-filtres select{flex:1 1 8rem; max-width:none; min-width:0} .mt-ag-colonne{min-width:7rem} .mt-ag-personne li{grid-template-columns:4.6rem 5rem 1fr} } @media (prefers-reduced-motion:reduce){.mt-agenda *{transition:none!important}} /* ── À l'impression ─────────────────────────────────────────────────────── La feuille du jour, affichée à l'accueil, est un usage courant. On retire ce qui ne sert qu'à l'écran — les commandes, les filtres — et on déplie la grille : un cadre qui défile n'imprime que ce qu'il montre. */ @media print{ .mt-ag-barre,.mt-ag-conflits{display:none} .mt-agenda{margin:0; font-size:10pt; color:#000} .mt-ag-synthese{border:none; border-bottom:1pt solid #000; padding-left:0; break-inside:avoid} .mt-ag-grille,.mt-ag-mois,.mt-ag-annee,.mt-ag-personnes{border:none; border-radius:0} .mt-ag-corps{overflow:visible} .mt-ag-colonne{min-width:0} .mt-ag-bloc{border:1pt solid #000; border-left-width:3pt; background:#fff!important; color:#000!important; break-inside:avoid; print-color-adjust:exact} .mt-pastille{print-color-adjust:exact} .mt-ag-personne,.mt-ag-case,.mt-ag-mini{break-inside:avoid} .mt-ag-menu{display:none} }