/* Feuille propre du CALENDRIER EN MOIS (.cclub-scal*) : chargee seule par le shortcode [cclub_stages_calendrier] ET par l'ecran de l'assistant intervention scolaire (le back-office ne charge pas la feuille commune du front, qui restylerait ses composants). Presentation exacte de la maquette du 2026-10-13. */
/* LOT F (2.21.0) -- CALENDRIER DES STAGES ET TOURNOIS : presentation EXACTE de la maquette validee par le president le 2026-10-13 (docs/reference/maquettes/MAQ-CALENDRIER-STAGES.html), aux jetons de la
   charte. Trois colonnes de mois, jours L M M J V S D, un aplat par serie de stages, la trame des vacances, un anneau pour un tournoi du club. Aucun `style=` : tout passe par ces classes. */
.cclub-scal { max-width: 680px; margin: 1rem 0; }
.cclub-scal__lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--cclub-n6, #60636A); margin: 0 0 14px; }
.cclub-scal__lg span { display: inline-flex; align-items: center; gap: 6px; }
.cclub-scal__sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; box-sizing: border-box; }
.cclub-scal__vide { color: var(--cclub-n6, #60636A); font-size: 13px; margin: 0 0 14px; }
.cclub-scal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.cclub-scal--c1 .cclub-scal__grid { grid-template-columns: minmax(0, 1fr); }
.cclub-scal--c2 .cclub-scal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cclub-scal--c4 .cclub-scal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .cclub-scal--c3 .cclub-scal__grid, .cclub-scal--c4 .cclub-scal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cclub-scal .cclub-scal__grid { grid-template-columns: minmax(0, 1fr); } }
.cclub-scal__mo { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--cclub-n8, #24262C); }
.cclub-scal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cclub-scal__h { font-size: 11px; color: var(--cclub-n5, #83868E); text-align: center; }
.cclub-scal__d { font-size: 11px; text-align: center; padding: 4px 0; border-radius: 4px; color: var(--cclub-n6, #60636A); min-height: 22px; box-sizing: border-box; }
.cclub-scal__d--v, .cclub-scal__sw--v { background: var(--cclub-n1, #F0F3FC); }
.cclub-scal__sw--v { border: 0.5px solid var(--cclub-n3, #D4D7E0); }
.cclub-scal__d--f, .cclub-scal__sw--f { background: var(--cclub-ambre-fond, #FCF2E3); }
.cclub-scal__d--f { color: var(--cclub-ambre-encre, #794A00); font-weight: 600; }
.cclub-scal__d--s1, .cclub-scal__sw--s1 { background: var(--cclub-bleu-fond, #EDF3FF); }
.cclub-scal__d--s2, .cclub-scal__sw--s2 { background: var(--cclub-vert-fond, #E9F8EC); }
.cclub-scal__d--s3, .cclub-scal__sw--s3 { background: var(--cclub-ambre-fond, #FCF2E3); }
.cclub-scal__d--s4, .cclub-scal__sw--s4 { background: var(--cclub-n2, #E4E8F0); }
.cclub-scal__d--s1, .cclub-scal__d--s2, .cclub-scal__d--s3, .cclub-scal__d--s4 { font-weight: 600; }
.cclub-scal__d--s1 { color: var(--cclub-bleu-encre, #445793); }
.cclub-scal__d--s2 { color: var(--cclub-vert-encre, #0A6D37); }
.cclub-scal__d--s3 { color: var(--cclub-ambre-encre, #794A00); }
.cclub-scal__d--s4 { color: var(--cclub-n8, #24262C); }
.cclub-scal__d--t, .cclub-scal__sw--t { box-shadow: inset 0 0 0 1.5px var(--cclub-rouge-plein, #AF2B23); }

/* 2.21.0 -- une date ECARTEE (assistant intervention scolaire) : hachures obliques aux couleurs de la charte (gris du site) ; le motif est dans l'infobulle. */
.cclub-scal__d--x, .cclub-scal__sw--x { background: repeating-linear-gradient(135deg, var(--cclub-n3, #D4D7E0) 0 2px, var(--cclub-n1, #F0F3FC) 2px 4px); }
.cclub-scal__d--x { color: var(--cclub-n6, #60636A); font-weight: 600; }

/* TEINTES SOUTENUES (calendriers des assistants du back-office : `cclub-scal--fort`) -- retour du president du 2026-10-13 : << les teintes sont un peu pales >>. Memes teintes de la charte, melangees a leur encre : la seance retenue (vert), les vacances (bleu), le jour ferie (ambre) se lisent d'un coup d'oeil ; la maquette du site n'est pas touchee. */
.cclub-scal--fort .cclub-scal__d--v, .cclub-scal--fort .cclub-scal__sw--v { background: color-mix(in srgb, var(--cclub-bleu-encre, #445793) 7%, #fff); }
.cclub-scal--fort .cclub-scal__sw--v { border-color: color-mix(in srgb, var(--cclub-bleu-encre, #445793) 35%, #fff); }
.cclub-scal--fort .cclub-scal__d--f, .cclub-scal--fort .cclub-scal__sw--f { background: color-mix(in srgb, var(--cclub-ambre-encre, #794A00) 16%, #fff); }
.cclub-scal--fort .cclub-scal__d--x, .cclub-scal--fort .cclub-scal__sw--x { background: repeating-linear-gradient(135deg, var(--cclub-n3, #D4D7E0) 0 2px, var(--cclub-n1, #F0F3FC) 2px 4px); }
/* le jour de stage vient APRES vacances et ferie : un jour de stage en vacances prend la couleur du stage (constat du 2026-10-18 : la regle des vacances, declaree apres, l'emportait et les jours de stage restaient pales) */
.cclub-scal--fort .cclub-scal__d--s2, .cclub-scal--fort .cclub-scal__sw--s2 { background: color-mix(in srgb, var(--cclub-vert-encre, #0A6D37) 42%, #fff); }
.cclub-scal--fort .cclub-scal__d--s2 { color: var(--cclub-n8, #24262C); font-weight: 700; }   /* jour de stage : vert franc, texte fonce (retour du president du 2026-10-18 : contraste insuffisant avec les vacances) */

/* 2.21.0 (mode calendrier des stages) -- GENRES DE PUBLIC : colorier par public, pas par serie. Chaque regle vaut pour la case (`d--`) ET pour l'echantillon de la legende (`sw--`), declares ensemble : ils ne peuvent pas diverger. */
.cclub-scal__d--pe, .cclub-scal__sw--pe { background: color-mix(in srgb, var(--cclub-rouge-encre, #9B2C25) 24%, #fff); }
.cclub-scal__d--pa, .cclub-scal__sw--pa { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cclub-bleu-encre, #445793) 42%, #fff) 0 3px, color-mix(in srgb, var(--cclub-bleu-encre, #445793) 12%, #fff) 3px 6px); }   /* DALTONISME : enfants / adultes ne tiennent PAS a la teinte seule -- enfants en APLAT, adultes HACHURES, tous publics moitie aplat moitie hachure */
.cclub-scal__d--pt, .cclub-scal__sw--pt { background: linear-gradient(135deg, color-mix(in srgb, var(--cclub-rouge-encre, #9B2C25) 24%, #fff) 50%, transparent 50%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--cclub-bleu-encre, #445793) 42%, #fff) 0 3px, color-mix(in srgb, var(--cclub-bleu-encre, #445793) 12%, #fff) 3px 6px); }
.cclub-scal__d--pe, .cclub-scal__d--pa, .cclub-scal__d--pt { font-weight: 600; }
.cclub-scal__d--pe { color: var(--cclub-rouge-encre, #9B2C25); }
.cclub-scal__d--pa { color: var(--cclub-bleu-encre, #445793); }
.cclub-scal__d--pt { color: var(--cclub-n8, #24262C); }
/* une case CLIQUABLE (jour de stage) : un bouton qui a l'allure de la case ; la pastille dit le nombre de stages du jour */
button.cclub-scal__d--clic { border: 0; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; position: relative; width: 100%; overflow: visible; }   /* un <button> peut rogner ses enfants : la pastille du nombre de stages sort du cadre du jour */
button.cclub-scal__d--clic:hover, button.cclub-scal__d--clic:focus-visible { box-shadow: 0 0 0 1.5px var(--cclub-n5, #83868E); outline: none; }
.cclub-scal__n { position: absolute; right: -4px; top: -6px; z-index: 2; min-width: 14px; height: 14px; border-radius: 7px; background: var(--cclub-n8, #24262C); color: #fff; font-size: 9px; line-height: 1; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-sizing: border-box; box-shadow: 0 0 0 1.5px #fff; }   /* a cheval sur l'angle (le chiffre du jour reste lisible) ; z-index : au-dessus des cases voisines, qui la rognaient */
.cclub-scal__consigne { margin: 0 0 10px; font-size: 13px; color: var(--cclub-n6, #60636A); }
.cclub-scal__consigne::before { content: "\261B "; }
button.cclub-scal__d--clic { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28); }   /* un jour cliquable se SOULIGNE : on voit qu'on peut cliquer */
/* la fenetre d'un jour */
.cclub-scal-fen { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow: auto; z-index: 100000; }
.cclub-scal-fen__c { background: #fff; border-radius: 12px; padding: 16px; max-width: 640px; width: 100%; position: relative; box-sizing: border-box; }
.cclub-scal-fen__x { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--cclub-n6, #60636A); padding: 4px 8px; }