/* ---------------------------------------------------------------------------
   Planning des espaces — capsule.s
   Porte le 12 septembre 2026 depuis le prototype du 9, valide par Laura
   (« la vision semaine est vraiment impressionnante »).

   Les creneaux viennent des quatre agendas Google de l'association, lus par un
   service qui masque les intitules hors convention avant de les publier.

   Toutes les classes portent le prefixe `cpl-` : les noms du prototype
   (.case, .grille, .colonne, .date, .note) entreraient en collision avec
   Kadence sur une page reelle.

   Les variables sont posees sur le conteneur et non sur :root, pour ne pas
   entrer en concurrence avec celles du theme. Chacune a un repli, de sorte que
   le composant tienne meme si le theme change ses propres jetons.
   --------------------------------------------------------------------------- */

.cpl-planning {
  --blanc: #FFFFFF;
  --creme: #FBF4E6;
  --creme-f: #F4EBDA;
  --encre: #3A2A14;
  --encre-douce: #57452C;
  --attenue: #8C7A5E;
  --filet: #E4DACB;
  --terracotta: #C15634;
  --terracotta-f: #A9482B;
  --or: #E6B422;

  --titre: 'Quicksand', 'Trebuchet MS', sans-serif;
  --corps: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --rail: 58px;
  --ligne: 26px;

  color: var(--encre);
  font-family: var(--corps);
  line-height: 1.6;

  /* ⚠️ Ajoute le 14 septembre, sur des captures d'iPhone. La grille fait 980 px
     de large dans une fenetre de 390 : Safari iOS considere alors le bloc comme
     trop large pour l'ecran et grossit son texte de lui-meme. Les titres
     debordaient des gelules et « LIBRE TOUTE LA JOURNEE » perdait sa derniere
     lettre, alors que le reste de la page, lui, etait juste. Rien dans la
     feuille ne fixait ce reglage, d'ou le gonflement. Le defaut ne se voit pas
     sur un navigateur de bureau reduit a la largeur d'un telephone : il demande
     un vrai appareil. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.cpl-planning *, .cpl-planning *::before, .cpl-planning *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Maquette du planning capsule.s
   La charte du client fait foi : direction « Arche et lumiere », deja active
   sur capsules-arts.com. Aucune couleur, aucune police inventee ici.
   Parti pris unique : les deux salles ne sont pas distinguees par un code
   couleur ajoute, elles portent leur propre nom. La capsule blanche est claire,
   la capsule noire est sombre. Le troisieme cas, hors les murs, n'est pas une
   salle : ses dates vivent sous la grille, dans « Les prochains rendez-vous ».

   Version du 9 septembre : les donnees viennent desormais des agendas eux-memes
   et non d'un mail, la semaine passe a sept jours pour que le temps libre se
   voie, et une vue mois s'ajoute pour la disponibilite.
   --------------------------------------------------------------------------- */

/* -------------------------------------------------------------- en-tete */

.cpl-planning .cpl-filet-or {
  width: 200px;
  height: 1px;
  margin: 18px 0 16px;
  background: linear-gradient(90deg, var(--or) 0%, var(--or) 76%, transparent 100%);
  position: relative;
}

.cpl-planning .cpl-filet-or::after {
  content: "";
  position: absolute;
  left: 84px;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--or);
  transform: rotate(45deg);
}

/* --------------------------------------------------------- barre d'outils */

.cpl-planning .cpl-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-bottom: 22px;
}

.cpl-planning .cpl-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cpl-planning .cpl-filtre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--blanc);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--encre);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.cpl-planning .cpl-filtre:hover { background: var(--creme); }

.cpl-planning .cpl-filtre[aria-pressed="false"] { opacity: 0.42; background: var(--blanc); }

.cpl-planning .cpl-filtre:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.cpl-planning .cpl-pastille { width: 12px; height: 14px; border-radius: 6px 6px 2px 2px; flex: 0 0 auto; }

.cpl-planning .cpl-pastille--blanche { background: var(--creme); border: 1px solid var(--filet); }

.cpl-planning .cpl-pastille--noire { background: var(--encre); }

.cpl-planning .cpl-pastille--hors { background: var(--blanc); border: 1px dashed var(--or); }

.cpl-planning .cpl-droite { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.cpl-planning .cpl-compte { font-size: 13.5px; color: var(--attenue); font-variant-numeric: tabular-nums; margin: 0; }

.cpl-planning .cpl-compte b { color: var(--encre); font-weight: 600; }

.cpl-planning .cpl-bascule { display: flex; background: var(--creme); border-radius: 999px; padding: 3px; gap: 2px; }

.cpl-planning .cpl-bascule button {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--attenue);
  cursor: pointer;
}

.cpl-planning .cpl-bascule button[aria-pressed="true"] { background: var(--terracotta); color: var(--blanc); }

.cpl-planning .cpl-bascule button:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* ------------------------------------------------------------- la grille */

.cpl-planning .cpl-cadre { overflow-x: auto; padding-bottom: 6px; }

.cpl-planning .cpl-grille {
  min-width: 980px;
  display: grid;
  grid-template-columns: var(--rail) repeat(var(--jours, 7), 1fr);
  border-top: 1px solid var(--filet);
  border-left: 1px solid var(--filet);
  border-radius: 14px;
  overflow: hidden;
}

.cpl-planning .cpl-jour-tete, .cpl-planning .cpl-rail-tete {
  padding: 10px 11px;
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: var(--creme);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
}

.cpl-planning .cpl-rail-tete { background: var(--creme-f); }

.cpl-planning .cpl-jour-tete span { display: block; font-family: var(--corps); font-weight: 400; font-size: 12px; color: var(--attenue); }

/* Un jour ou rien n'est pose se reconnait des l'en-tete, avant meme de
   parcourir la colonne du regard. */

.cpl-planning .cpl-jour-tete--libre { background: #FFFCF3; box-shadow: inset 0 1px 0 var(--or); }

.cpl-planning .cpl-jour-tete--libre span { color: var(--terracotta); }

.cpl-planning .cpl-rail {
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: var(--creme-f);
  display: grid;
}

.cpl-planning .cpl-rail time {
  padding: 0 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--attenue);
  text-align: right;
  transform: translateY(-7px);
}

.cpl-planning .cpl-colonne { position: relative; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); display: grid; }

.cpl-planning .cpl-colonne--libre { background: #FFFCF3; }

.cpl-planning .cpl-trame { border-top: 1px solid var(--creme-f); grid-column: 1; }

.cpl-planning .cpl-trame--heure { border-top-color: var(--filet); }

.cpl-planning .cpl-pistes { position: absolute; inset: 0; display: flex; gap: 2px; padding: 0 2px; }

.cpl-planning .cpl-piste { flex: 1 1 0; position: relative; }

/* Le mot qui se pose sur une colonne vide. Discret : c'est le blanc qui
   porte l'information, pas l'etiquette. */

.cpl-planning .cpl-jour-libre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Sur le fond dore du jour libre, le gris d'origine tombait a 1,9:1 et ne se
     lisait plus. Ce brun dore tient a 4,7:1 pour un rendu identique a l'oeil. */
  color: #8C6E22;
  writing-mode: vertical-rl;
  pointer-events: none;
}

/* ---------------------------------------------------------- les creneaux */

/* Chaque creneau est une petite capsule : dome en haut, base posee. C'est la
   forme signature du lieu, reprise a l'echelle du planning. Le rayon du dome
   est calcule sur la hauteur du bloc, faute de quoi un atelier de 45 minutes
   deviendrait une pastille et un cours de deux heures un simple rectangle. */

.cpl-planning .cpl-creneau {
  position: absolute;
  left: 0;
  right: 0;
  padding: 6px 7px 5px;
  /* Arrondi AUX DEUX BOUTS, comme la gelule de Nos Capsule.s : une base plate
     faisait une arche posee, et une colonne d'arches fait un cimetiere. Le
     rayon est calcule sur la hauteur du bloc et borne par sa largeur, sinon un
     bloc etroit devient un ovale dont les angles rognent le texte. */
  border-radius: var(--dome, 20px);
  border: 1px solid var(--filet);
  background: var(--creme);
  color: var(--encre);
  text-align: center;
  overflow: hidden;
  transition: opacity 200ms ease, transform 200ms ease;
}

.cpl-planning .cpl-creneau--noire { background: var(--encre); border-color: var(--encre); color: var(--creme); }

.cpl-planning .cpl-creneau--hors { background: var(--blanc); border: 1px dashed var(--or); }

.cpl-planning .cpl-creneau:hover { transform: translateY(-1px); }

.cpl-planning .cpl-creneau[hidden] { display: none; }

/* Le sceau dore qui scelle les deux moities de la capsule. Sur le site il
   separe le logo du nom ; ici il separe l'heure de ce qui se joue. Pose sur la
   ligne d'heure et debordant de part et d'autre, il est recoupe par la forme
   arrondie grace au debordement masque du bloc. */

.cpl-planning .cpl-creneau__h { position: relative; white-space: nowrap; overflow: hidden; }

.cpl-planning .cpl-creneau__h::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -3px;
  height: 2px;
  background: var(--or);
}

/* Sous une heure de cours, le bloc n'a pas la place d'un sceau : il garderait
   le trait et perdrait le titre. */

.cpl-planning .cpl-creneau--mini .cpl-creneau__h::after { display: none; }

/* Une colonne qui se divise en deux ou trois pistes rend chaque bloc etroit,
   et c'est alors la largeur qui manque, pas la duree. Ce qui cede n'est donc
   pas le meme que sur un bloc court : la structure d'abord, puis l'heure, le
   titre toujours en dernier. Sans cela le mercredi affichait « Théât… ». */

.cpl-planning .cpl-creneau--e2 .cpl-creneau__q, .cpl-planning .cpl-creneau--e3 .cpl-creneau__q { display: none; }

.cpl-planning .cpl-creneau--e3 .cpl-creneau__h { display: none; }

.cpl-planning .cpl-creneau--e3 { padding: 4px 3px; }

.cpl-planning .cpl-creneau--e2 .cpl-creneau__t { font-size: 11.5px; line-height: 1.2; }

.cpl-planning .cpl-creneau--e3 .cpl-creneau__t { font-size: 10px; line-height: 1.18; letter-spacing: -0.01em; }

/* Une location n'est pas une activite de la maison : elle garde la couleur de
   sa salle, mais perd son sceau dore et ne dit jamais qui loue. */

.cpl-planning .cpl-creneau--loc { opacity: 0.62; }

.cpl-planning .cpl-creneau--loc .cpl-creneau__h::after { background: var(--filet); }

.cpl-planning .cpl-creneau--noire.cpl-creneau--loc .cpl-creneau__h::after { background: var(--attenue); }

.cpl-planning .cpl-creneau--court { padding: 4px 5px 4px; }

.cpl-planning .cpl-creneau--court .cpl-creneau__q { display: none; }

.cpl-planning .cpl-creneau--court .cpl-creneau__t { font-size: 11.5px; }

.cpl-planning .cpl-creneau--mini { padding: 3px 4px; }

.cpl-planning .cpl-creneau--mini .cpl-creneau__h { font-size: 9.5px; }

.cpl-planning .cpl-creneau--mini .cpl-creneau__t { font-size: 10.5px; line-height: 1.15; }

.cpl-planning .cpl-creneau__h { display: block; font-size: 10.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; opacity: 0.72; }

.cpl-planning .cpl-creneau__t {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  /* « Anniversaires » sortait entier de sa capsule et n'en montrait que la
     moitie. La cesure francaise coupe aux syllabes, « Anniver-saires » et non
     « Annivers/aires » ; `break-word` ne sert que si le mot ne cede pas. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.cpl-planning .cpl-creneau__q { display: block; font-size: 10.5px; line-height: 1.3; opacity: 0.66; margin-top: 1px; }

/* ------------------------------------------------------------- vue mois */
/* Trois formes ont ete essayees avant celle-ci. Une grille de cases carrees,
   qui n'est pas une capsule. Des pilules vides teintees par le taux
   d'occupation, justes mais muettes et toutes semblables d'un jour a l'autre.
   Puis une gelule par structure portant son logo, ecartee le 14 septembre : le
   relief devait venir des logos qui changent d'un jour au suivant, mais LA
   PETITE ACADEMIE occupe 253 des 403 creneaux releves et le meme petit logo
   rouge se repetait presque partout.

   Le mois se lit maintenant en sept colonnes capsules, une par jour de
   semaine, et chaque journee annonce ses creneaux en toutes lettres. Le mois
   repond a « qu'est-ce qui occupe le lieu, et quels jours sont libres » ; la
   semaine repond a « a quelle heure, et dans quelle salle ».

   Les positions viennent de --c et --r, jamais d'un style en ligne : sous
   760 px la grille redevient un bloc et les journees s'empilent dans l'ordre
   chronologique, parce qu'empiler les colonnes mettrait tous les lundis a la
   suite. */

.cpl-planning .cpl-mois {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--sem, 5), auto);
  gap: 0 10px;
  min-width: 840px;
}

.cpl-planning .cpl-vue-titre {
  margin: 0 0 14px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 20px;
  color: var(--encre);
}

.cpl-planning .cpl-vue-titre span { color: var(--attenue); font-weight: 500; }

/* Le fond de colonne traverse toutes les lignes : c'est lui, et non les
   journees, qui porte l'arche. Pose avant les journees dans le DOM, et
   maintenu dessous par z-index, pour que le jour courant garde son fond. */
.cpl-planning .cpl-col {
  grid-column: var(--c);
  grid-row: 1 / -1;
  z-index: 0;
  border-radius: 64px 64px 14px 14px;
  background: var(--creme);
}

.cpl-planning .cpl-col--we { background: #F7EFE0; }

.cpl-planning .cpl-mois-tete {
  grid-column: var(--c);
  grid-row: 1;
  z-index: 1;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-align: center;
  padding: 19px 8px 12px;
}

.cpl-planning .cpl-jourm {
  grid-column: var(--c);
  grid-row: var(--r);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  padding: 12px 11px 15px;
  border-top: 1px solid rgba(214, 198, 170, 0.55);
}

/* Les jours du mois voisin restent visibles, en retrait : les effacer
   laisserait des trous dans les colonnes de debut et de fin de mois. */
.cpl-planning .cpl-jourm--hors { opacity: 0.42; }

.cpl-planning .cpl-jourm-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cpl-planning .cpl-jourm-num {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--encre);
}

.cpl-planning .cpl-jourm-num small {
  font-weight: 500;
  font-size: 12px;
  color: var(--attenue);
  margin-left: 4px;
}

/* Affiche seulement quand les colonnes sont empilees, voir la requete media. */
.cpl-planning .cpl-jourm-nom { display: none; }

.cpl-planning .cpl-jourm-mot {
  font-size: 12px;
  font-weight: 700;
  color: var(--terracotta-f);
}

.cpl-planning .cpl-jourm--auj {
  background: rgba(193, 86, 52, 0.09);
  border-radius: 11px;
  border-top-color: transparent;
}

.cpl-planning .cpl-jourm--auj .cpl-jourm-num { color: var(--terracotta-f); }

/* Une journee sans occupation connue garde le cerne d'or du jour libre, la
   convention deja en place dans la version precedente. Aucune couleur n'est
   ajoutee ici : la charte du client n'a pas de vert. */
.cpl-planning .cpl-jourm--libre {
  background: #FFFCF3;
  box-shadow: inset 0 0 0 1px var(--or);
  border-radius: 11px;
  border-top-color: transparent;
}

.cpl-planning .cpl-jourm--libre .cpl-jourm-num { color: var(--terracotta); }

.cpl-planning .cpl-jourm-plus {
  margin: 1px 0 0;
  padding-left: 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--terracotta-f);
}

.cpl-planning .cpl-jourm-rien {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--encre-douce);
}

/* Hors de la fenetre relevee, le service ne dit rien. La hachure porte le sens
   a elle seule, et le mot reste court : la phrase entiere, repetee sur les
   sept jours d'une premiere semaine non couverte, remplissait la vue. */
.cpl-planning .cpl-jourm-nr {
  margin: 0;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--attenue);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px, #F1E8D8 7px, #F1E8D8 14px);
}

/* ------------------------------------------------ un creneau dans le mois */

.cpl-planning .cpl-cm {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 8px;
  align-items: start;
}

.cpl-planning .cpl-cm__filet {
  grid-row: 1 / 3;
  width: 3px;
  min-height: 24px;
  border-radius: 2px;
  align-self: stretch;
}

/* L'heure et l'intitule coulent ensemble : ils se partagent toute la largeur
   restante au lieu de se la disputer en deux colonnes. `break-word` et non
   `anywhere`, sans quoi « Anniversaires » se coupe en « Anniversaire / s ». */
.cpl-planning .cpl-cm__quoi {
  margin: 0;
  font-size: 13px;
  line-height: 1.32;
  color: var(--encre);
  overflow-wrap: break-word;
}

/* Meme convention que la vue semaine : la capsule blanche est claire, la noire
   est sombre, et ce qui n'est pas une salle est en or. L'agenda ne dit pas
   quelle salle occupe un evenement ou un hors les murs, donc aucun aplat de
   salle ne l'affirme. */
.cpl-planning .cpl-cm--blanche .cpl-cm__filet {
  background: #EFE3CD;
  box-shadow: inset 0 0 0 1px #DCC7A2;
}

.cpl-planning .cpl-cm--noire .cpl-cm__filet { background: var(--encre); }
.cpl-planning .cpl-cm--hors .cpl-cm__filet { background: var(--or); }

.cpl-planning .cpl-cm__h {
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Un creneau sans intitule publiable : le service masque tout ce qui sort de
   la convention de nommage, les agendas contenant aussi des rendez-vous
   personnels. Le mot reste, l'objet ne se dit pas. */
.cpl-planning .cpl-cm--muet .cpl-cm__t { color: var(--attenue); font-style: italic; }

.cpl-planning .cpl-cm__ou {
  grid-column: 2;
  font-size: 11px;
  line-height: 1.3;
  color: var(--attenue);
}

/* --------------------------------------------- le mois sur un telephone */
/* Sept colonnes de texte ne tiennent pas sur 390 px. Empiler les colonnes
   mettrait tous les lundis a la suite : la grille redevient un bloc, et les
   journees sont deja dans l'ordre chronologique dans le DOM. */
@media (max-width: 760px) {
  .cpl-planning .cpl-mois { display: block; min-width: 0; }
  .cpl-planning .cpl-col,
  .cpl-planning .cpl-mois-tete,
  .cpl-planning .cpl-jourm--hors { display: none; }

  .cpl-planning .cpl-jourm {
    border-top: 1px solid var(--filet);
    padding: 13px 4px 15px;
  }

  .cpl-planning .cpl-jourm--auj,
  .cpl-planning .cpl-jourm--libre { padding-inline: 11px; }

  .cpl-planning .cpl-jourm-nom {
    display: inline;
    font-family: var(--titre);
    font-weight: 600;
    font-size: 13px;
    color: var(--encre-douce);
  }
}

/* ------------------------------------------------------- prochaines dates */

/* Le titre du bloc « Les prochains rendez-vous ». Sa regle vivait dans la
   section vue mois, qui servait aussi de pied de legende : elle remonte ici,
   ou elle est desormais seule utilisee. */
.cpl-planning .cpl-pied-titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--attenue);
  margin-bottom: 4px;
}

.cpl-planning .cpl-suite { margin-top: 50px; }

.cpl-planning .cpl-suite h2 { margin: 0 0 4px; font-family: var(--titre); font-weight: 600; font-size: 25px; color: var(--terracotta); }

.cpl-planning .cpl-suite > p { margin: 0 0 22px; max-width: 62ch; color: var(--encre-douce); }

.cpl-planning .cpl-dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }

.cpl-planning .cpl-date {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 15px 4px;
  border-bottom: 1px solid var(--filet);
}

.cpl-planning .cpl-date__quand { font-family: var(--titre); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--encre); margin: 0; }

.cpl-planning .cpl-date__quand span { display: block; font-family: var(--corps); font-weight: 400; font-size: 12.5px; color: var(--attenue); }

.cpl-planning .cpl-date__quoi { margin: 0; }

.cpl-planning .cpl-date__quoi strong { display: block; font-family: var(--titre); font-weight: 600; font-size: 16px; color: var(--encre); }

.cpl-planning .cpl-date__quoi span { font-size: 13.5px; color: var(--encre-douce); }

.cpl-planning .cpl-jeton {
  justify-self: end;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cpl-planning .cpl-jeton--blanche { background: var(--creme); border: 1px solid var(--filet); color: var(--encre-douce); }

.cpl-planning .cpl-jeton--noire { background: var(--encre); color: var(--creme); }

.cpl-planning .cpl-jeton--hors { background: var(--blanc); border: 1px dashed var(--or); color: var(--terracotta-f); }

/* -------------------------------------------------------------- la note */

.cpl-planning .cpl-note { margin-top: 44px; padding: 22px 26px; background: var(--creme); border-radius: 20px; }

.cpl-planning .cpl-note--alerte { background: var(--blanc); border: 1px solid var(--filet); border-left: 3px solid var(--terracotta); border-radius: 12px; }

.cpl-planning .cpl-note h3 { margin: 0 0 10px; font-family: var(--titre); font-weight: 600; font-size: 16px; color: var(--terracotta); }

.cpl-planning .cpl-note p { margin: 0 0 10px; max-width: 68ch; font-size: 14.5px; color: var(--encre-douce); }

.cpl-planning .cpl-note p:last-child { margin-bottom: 0; }

.cpl-planning .cpl-note ul { margin: 0; padding-left: 18px; }

.cpl-planning .cpl-note li { margin-bottom: 9px; font-size: 14.5px; color: var(--encre-douce); max-width: 68ch; }

.cpl-planning .cpl-note li:last-child { margin-bottom: 0; }

.cpl-planning .cpl-note code { font-family: var(--corps); font-weight: 600; font-size: 13.5px; color: var(--encre); background: var(--creme-f); padding: 1px 7px; border-radius: 5px; }

.cpl-planning .cpl-note--alerte code { background: var(--creme); }

@media (max-width: 700px) {
  .cpl-planning .cpl-date { grid-template-columns: 1fr; gap: 5px; }
  .cpl-planning .cpl-jeton { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cpl-planning, .cpl-planning * { transition: none; animation: none; }
}

/* ------------------------------------------------------- navigation */
/* Le prototype montrait une semaine figee : il n'avait pas de navigation.
   Une page vivante en demande une, et elle doit rester lisible au pouce sur
   telephone, d'ou des cibles de 40 px et un retour a la ligne autorise. */
.cpl-planning .cpl-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}

.cpl-planning .cpl-nav .cpl-vue-titre {
  margin: 0;
  flex: 1 1 auto;
  min-width: 12ch;
}

.cpl-planning .cpl-nav__fleche,
.cpl-planning .cpl-nav__auj {
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.cpl-planning .cpl-nav__fleche {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  padding: 0 0 3px;   /* les chevrons ‹ › ne sont pas centres verticalement */
}

.cpl-planning .cpl-nav__auj {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
}

.cpl-planning .cpl-nav__fleche:hover,
.cpl-planning .cpl-nav__auj:hover { background: var(--creme); border-color: var(--or); }

.cpl-planning .cpl-nav__fleche:focus-visible,
.cpl-planning .cpl-nav__auj:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* L'ordre visuel de la barre suit la lecture : la periode d'abord, les
   commandes ensuite. En largeur d'ecran contrainte, « Aujourd'hui » passe a la
   ligne plutot que de comprimer le titre. */
@media (max-width: 560px) {
  .cpl-planning .cpl-nav .cpl-vue-titre { flex: 1 0 100%; order: -1; }
}

/* La capsule blanche n'a pas de variante de créneau en vue semaine : le crème
   de `.cpl-creneau` est déjà sa couleur. La classe reste posée par le script
   comme point d'accroche, sans règle propre, et c'est voulu. */

/* ---------------------------------------- jours hors période relevée */
/* Le service ne couvre qu'une fenêtre glissante. Au-delà, on ne sait rien, et
   ne rien savoir n'est pas être libre : ces jours se lisent en retrait, sans
   le doré du jour libre, sans gélule creuse et sans le mot « libre ». La
   nuance a l'air fine, elle porte tout le sens du planning : affirmer une
   disponibilité que personne n'a vérifiée est le seul vrai risque ici. */
.cpl-planning .cpl-jour-tete--inconnu { background: var(--creme-f); box-shadow: none; }
.cpl-planning .cpl-jour-tete--inconnu span { color: var(--attenue); }

.cpl-planning .cpl-colonne--inconnu {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px, #F7F1E4 7px, #F7F1E4 14px);
}

.cpl-planning .cpl-colonne--inconnu .cpl-jour-libre {
  color: var(--attenue);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* Une flèche éteinte reste visible : elle dit que la période s'arrête là,
   alors qu'une flèche masquée laisserait croire à un défaut d'affichage. */
.cpl-planning .cpl-nav__fleche:disabled {
  opacity: 0.34;
  cursor: default;
  background: var(--blanc);
  border-color: var(--filet);
}

/* Le mot « Heure » se coupait en « Heur / e » : le rail fait 58 px, et la
   Quicksand du site est plus large que celle du prototype. On resserre le mot
   plutôt que d'élargir le rail, qui prendrait sa place sur les colonnes. */
.cpl-planning .cpl-rail-tete {
  padding-inline: 6px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}