/* ==========================================================================
   Planning des formations — reprise de formation/formations-planning.php de
   l'ancien site.
   Ce que la page reprend : les sessions à venir, les filtres ville et type,
   l'export du planning, les états vides.
   Ce qu'elle change, et pourquoi :
   · l'ancienne page posait une grille de cartes de 350px, toutes identiques,
   chacune répétant le mois en pastille — vingt cartes pour un planning de
   vingt sessions, et le mois écrit vingt fois. Ici les sessions sont des
   LIGNES groupées par mois : un planning se lit en colonne, comme un
   calendrier, et l'œil descend les dates au lieu de balayer des cartes ;
   · les styles étaient écrits en attributs `style` inline, avec des dégradés
   et des rayons (16, 20, 25px) étrangers à la charte. Tout passe par les
   jetons du site : rouge #CC0000, Circe, the-seasons, --radius-btn ;
   · la feuille Professional est chargée avant celle-ci : surtitre, titre
   didone et lien à filet viennent de là, le planning n'ajoute que ce qui
   lui est propre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Écran 1 — l'annonce et les filtres.
   -------------------------------------------------------------------------- */

.planning-tete {
  padding: var(--u16) 0 var(--u8);
  background: var(--black);
}

.planning-titre {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}

/* --------------------------------------------------------------------------
   La recherche. Un champ unique remplace les deux rangées de boutons ville et
   type : au-delà de trois ou quatre villes la rangée devenait un mur de
   pastilles, et elle ne répondait pas à la question qu'on se pose vraiment —
   « est-ce que c'est près de chez moi ». Le champ, lui, accepte le nom de la
   ville, son code postal, son département, l'intitulé de la formation ou le
   mois.
   Le public de ces formations est celui des salons : on y travaille debout,
   souvent sur téléphone entre deux clientes, et pas toujours avec de bons yeux.
   D'où un champ haut et large, un corps de texte au-dessus du 16px (en dessous,
   iOS zoome tout seul à la mise au point), et un contraste franc plutôt que le
   gris sur gris habituel des barres de recherche.
   -------------------------------------------------------------------------- */

.planning-recherche {
  margin-top: var(--u8);
  padding-top: var(--u6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.planning-recherche__label {
  display: block;
  margin-bottom: var(--u2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.planning-recherche__champ {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 640px;
}

.planning-recherche__icone {
  position: absolute;
  left: var(--u3);
  color: var(--muted);
  pointer-events: none;
}

.planning-recherche__input {
  width: 100%;
  min-height: 60px;
  padding: 0 var(--u3) 0 calc(var(--u3) * 2 + 20px);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-btn);
  background: var(--black-elegant);
  color: var(--white);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color var(--ease), background var(--ease);
}

.planning-recherche__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.planning-recherche__input:hover {
  border-color: rgb(255 255 255 / 0.5);
}

.planning-recherche__input:focus-visible {
  outline: none;
  border-color: var(--white);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.planning-recherche__input::-webkit-search-cancel-button {
  filter: invert(1);
  cursor: var(--cursor-pointer);
}

.planning-recherche__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--u3);
  margin-top: var(--u3);
}

.planning-recherche__compte {
  margin: 0;
  font-size: 1rem;
  color: var(--beige);
}

.planning-recherche__compte [data-planning-compte] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--red);
}

.planning-recherche__pdf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--u3);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
  transition: background var(--ease), border-color var(--ease);
}

.planning-recherche__pdf svg {
  flex: none;
  transition: transform var(--ease);
}

.planning-recherche__pdf:hover {
  border-color: var(--white);
  background: rgb(255 255 255 / 0.08);
}

.planning-recherche__pdf:hover svg {
  transform: translateY(2px);
}

.planning-recherche__pdf:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Écran 2 — le planning, un bloc par mois.
   -------------------------------------------------------------------------- */

.planning-liste {
  padding: 0 0 var(--u16);
  background: var(--black);
}

.planning-mois + .planning-mois {
  margin-top: var(--u8);
}

.planning-mois__titre {
  display: flex;
  align-items: center;
  gap: var(--u3);
  margin: 0 0 var(--u3);
  font-family: var(--font-sans);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red);
}

.planning-mois__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.15);
}

.planning-sessions {
  display: grid;
  gap: var(--u2);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.planning-session__lien {
  display: grid;
  grid-template-columns: 23rem minmax(0, 1fr) 11rem 7rem auto;
  gap: var(--u3);
  align-items: center;
  padding: var(--u3);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-btn);
  background: var(--black-elegant);
  color: var(--white);
  cursor: var(--cursor-pointer);
  transition: border-color var(--ease), background var(--ease);
}

.planning-session__lien:hover,
.planning-session__lien:focus-visible {
  border-color: var(--red);
  background: var(--surface);
}

.planning-session__lien:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.planning-session__dates,
.planning-session__ville,
.planning-session__duree {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.planning-session__icone {
  flex: none;
  color: var(--muted);
}

.planning-session__dates {
  font-weight: 700;
}

.planning-session__dates span::first-letter {
  text-transform: uppercase;
}

.planning-session__objet {
  min-width: 0;
}

.planning-session__titre {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.planning-session__module {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--beige);
}

.planning-session__ville,
.planning-session__duree {
  color: var(--beige);
}

.planning-session__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red);
}

.planning-session__action svg {
  flex: none;
  transition: transform var(--ease);
}

.planning-session__lien:hover .planning-session__action svg,
.planning-session__lien:focus-visible .planning-session__action svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .planning-session__action svg { transition: none; }
  .planning-session__lien:hover .planning-session__action svg { transform: none; }
}

/* --------------------------------------------------------------------------
   États vides — aucune session au planning, ou aucune qui passe le filtre.
   -------------------------------------------------------------------------- */

.planning-vide {
  margin: var(--u8) 0 0;
  padding: var(--u8) var(--u4);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-btn);
  background: var(--black-elegant);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

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

.planning-vide a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: var(--cursor-pointer);
}

.planning-vide a:hover,
.planning-vide a:focus-visible {
  color: var(--beige);
}

.planning-vide__titre {
  display: block;
  margin-bottom: var(--u2);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--white);
}

.planning-vide__lien {
  margin-top: var(--u4);
}

/* --------------------------------------------------------------------------
   Réserver — le calendrier Calendly, au bas du planning.
   -------------------------------------------------------------------------- */

.planning-reserver {
  margin: var(--u16) 0 0;
  padding-top: var(--u8);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  scroll-margin-top: calc(var(--header-h) + var(--u4));
}

.planning-reserver__titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.planning-reserver__lead {
  margin: var(--u3) 0 var(--u6);
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--beige);
}

.planning-reserver__lead.is-precise {
  color: var(--white);
}

.planning-reserver__agenda {
  padding: var(--u2);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--black-elegant);
}

.planning-reserver__agenda .calendly-inline-widget {
  border-radius: calc(var(--radius-media) - 8px);
  overflow: hidden;
}

.planning-reserver__secours {
  margin: var(--u2) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}

.planning-reserver__secours a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: var(--cursor-pointer);
  transition: color var(--ease);
}

.planning-reserver__secours a:hover,
.planning-reserver__secours a:focus-visible {
  color: var(--beige);
}

.planning-retour {
  margin: var(--u8) 0 0;
}

/* --------------------------------------------------------------------------
   Sous 1100px, la ligne à cinq colonnes ne tient plus : elle se replie en
   fiche, dans le même ordre de lecture.
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .planning-session__lien {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--u2) var(--u3);
    align-items: start;
  }
  .planning-session__dates,
  .planning-session__objet {
    grid-column: 1 / -1;
  }
  .planning-session__action {
    grid-column: 2;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  .planning-tete {
    padding-top: var(--u12);
  }
  .planning-reserver__agenda {
    padding: var(--u1);
    overflow-x: auto;
  }
  .planning-recherche__pied {
    justify-content: flex-start;
  }
  .planning-recherche__pdf {
    width: 100%;
    justify-content: center;
  }
  .planning-session__lien {
    grid-template-columns: minmax(0, 1fr);
  }
  .planning-session__action {
    grid-column: 1;
    justify-self: start;
    padding-top: var(--u1);
  }
}

/* --------------------------------------------------------------------------
   Impression — c'est le « Télécharger en PDF » de la page : la fenêtre
   d'impression du navigateur enregistre en PDF, et ne retient que les sessions
   laissées visibles par le filtre. Remplace l'export TCPDF de l'ancien site,
   qui demandait une dépendance et un second point d'entrée à maintenir.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Les deux blocs qui n'existent que sur le papier — en-tête au logo et pied
   aux adresses. Masqués ici, montrés dans @media print plus bas.
   -------------------------------------------------------------------------- */
.impression-tete,
.impression-pied {
  display: none;
}

/* --------------------------------------------------------------------------
   IMPRESSION
   Le planning se punaise en salon, se glisse dans un dossier, se tend à une
   stagiaire. Sur papier ce n'est donc pas une capture du site : c'est une
   feuille composée pour elle-même — logo en tête, calendrier en colonnes,
   adresses en pied. La charte tient en trois choses qui, elles, traversent :
   le rouge, la titraille didone, et les capitales espacées.
   Tout est en millimètres et en points : sur une page, la référence est le
   papier, pas la fenêtre.
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4;
    margin: 15mm 15mm 13mm;
  }
  body {
    color: #000;
    background: #fff;
  }
  body,
  .page-planning,
  .planning-liste {
    padding: 0;
    background: #fff;
  }
  .container {
    width: auto;
    margin: 0;
    padding: 0;
  }
  .site-header,
  .site-footer,
  .skip-link,
  .retour-barre,
  .retour-fin,
  .planning-tete,
  .planning-session__action,
  .planning-session__icone,
  .planning-reserver {
    display: none;
  }
  .reveal,
  .planning-session__lien {
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* ---- En-tête de la feuille ------------------------------------------- */
  .impression-tete {
    display: block;
    margin: 0 0 11mm;
    text-align: center;
  }
  .impression-tete__logo {
    display: block;
    width: 48mm;
    height: auto;
    margin: 0 auto 8mm;
  }
  .impression-tete__titre {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 23pt;
    line-height: 1.14;
    letter-spacing: 0;
    color: #000;
  }
  .impression-tete__date {
    margin: 3.5mm 0 0;
    font-size: 8pt;
    letter-spacing: 0.14em;
    color: #6b6b6b;
  }
  .impression-tete::after {
    content: "";
    display: block;
    width: 16mm;
    height: 1pt;
    margin: 7mm auto 0;
    background: var(--red);
  }
  /* ---- Le calendrier ---------------------------------------------------- */
  .planning-mois {
    margin: 0 0 7mm;
  }
  .planning-mois__titre {
    display: flex;
    align-items: center;
    gap: 4mm;
    margin: 0 0 1mm;
    font-family: var(--font-sans);
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    break-after: avoid;
  }
  .planning-mois__titre::after {
    content: "";
    flex: 1;
    height: 0.5pt;
    background: #d5d5d5;
  }
  .planning-sessions {
    display: block;
    gap: 0;
  }
  .planning-session {
    border-bottom: 0.4pt solid #e4e4e4;
    break-inside: avoid;
  }
  .planning-session__lien {
    display: grid;
    grid-template-columns: 56mm 1fr 30mm 16mm;
    align-items: baseline;
    gap: 0 4mm;
    padding: 3.2mm 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #000;
    text-decoration: none;
  }
  .planning-session__dates,
  .planning-session__objet,
  .planning-session__ville,
  .planning-session__duree {
    grid-column: auto;
  }
  .planning-session__dates {
    display: block;
    font-size: 8.5pt;
    font-weight: 600;
    line-height: 1.35;
    color: #000;
  }
  .planning-session__objet {
    display: block;
  }
  .planning-session__titre {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12.5pt;
    line-height: 1.2;
    color: #000;
  }
  .planning-session__module {
    display: block;
    margin: 1mm 0 0;
    font-size: 6.5pt;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a8a8a;
  }
  .planning-session__ville,
  .planning-session__duree {
    display: block;
    font-size: 8pt;
    letter-spacing: 0.06em;
    color: #333;
  }
  .planning-session__duree {
    text-align: right;
    color: #6b6b6b;
  }
  .planning-vide {
    color: #333;
  }
  .planning-vide__titre {
    color: #000;
  }
  /* ---- Pied de la feuille ----------------------------------------------- */
  .impression-pied {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10mm;
    margin: 11mm 0 0;
    padding: 5mm 0 0;
    border-top: 1pt solid var(--red);
    break-inside: avoid;
  }
  .impression-pied__intitule {
    margin: 0 0 1.5mm;
    font-family: var(--font-sans);
    font-size: 6.5pt;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
  }
  .impression-pied__adresse {
    margin: 0;
    font-size: 8.5pt;
    line-height: 1.45;
    color: #000;
    overflow-wrap: anywhere;
  }
  .impression-pied__contact {
    grid-column: 1 / -1;
    margin: 5mm 0 0;
    font-size: 8pt;
    letter-spacing: 0.06em;
    color: #6b6b6b;
  }
}