/* ═══════════════════════════════════════════════════════════════════════════
   Calendrier des ateliers — La Rose des Sables By Saliha
   Remplace l'ancien bandeau vert « Calendrier {année} » (.v1__cal, atelier.css)
   sur la page Nos Ateliers. Adapté de la maquette Claude Design livrée dans
   /integration (assets/css/calendrier-ateliers.css) : structure, comportements
   et points de rupture (960 / 640 / 380px) conservés à l'identique.

   Deux adaptations volontaires par rapport à l'export, documentées dans le
   rapport du lot :
   - Polices Jost/Cormorant (Google Fonts) → var(--rds-font-body)/var(--rds-font-title)
     — le thème charge déjà Lato + Cormorant Garamond en local, aucune police
     supplémentaire n'est introduite ;
   - Couleurs de l'export → tokens réels de style.css. L'export utilisait encore
     la palette d'avant le 2026-07-24 (grenat #A33C4A, eucalyptus #6E8475, vert
     profond #4D6356, taupe #7E6A66) : reprendre ces valeurs littéralement
     aurait réintroduit dans le thème des couleurs explicitement migrées.
     Voir CLAUDE.md, « Lot du 2026-07-24 ».

   Aucun `:root` ici (contrainte du thème depuis le 2026-07-24 : la palette de
   marque vit uniquement dans style.css). La sous-palette des 4 types d'ateliers
   — inédite, propre à ce module — est scopée à `.rds-workshop-calendar`.
   Le focus clavier n'est PAS redéfini : la règle globale `:focus-visible`
   (functions.php, double anneau prune + halo blanc) s'applique déjà à tous les
   éléments interactifs du module. Seule exception : la carte, dont le lien de
   titre couvre toute la surface — l'anneau y est reporté du lien vers la carte
   via `:has()`, une question de PLACEMENT et non de couleur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sous-palette des 4 types + teintes de statut — scopée ici ET sur
   .rds-workshop-single (fiche individuelle, single-rds_event.php) : les deux
   contextes réutilisent exactement les mêmes médaillons/pastilles de statut,
   source unique plutôt que deux déclarations qui pourraient diverger. */
.rds-workshop-calendar, .rds-workshop-single {
  --rds-wc-floral: #BC6E77;       /* médaillon floral — famille rose signature, plus saturé */
  --rds-wc-enfants: #A8867E;      /* médaillon parent-enfant — neutre chaud, sans équivalent existant */
  --rds-wc-floral-ink: #95404B;   /* libellé catégorie floral — 6,06:1 sur --rds-surface */
  --rds-wc-enfants-ink: #7A564D;  /* libellé catégorie parent-enfant — 5,77:1 */
  --rds-wc-special-ink: #7A5F22;  /* libellé catégorie spécial (médaillon or) — 5,41:1, non utilisé ailleurs comme texte */
  --rds-wc-status-ok-text: #3B4F43;  /* texte pastille « Places disponibles » — 7,91:1 */
  --rds-wc-status-closed-text: #6B4A12;  /* texte pastille « Inscriptions clôturées » — 6,14:1 sur la pastille composée */

  background: var(--rds-surface);
  color: var(--rds-encre);
  font-family: var(--rds-font-body);
  font-weight: 300;
  padding: 6rem 3rem 6.5rem;
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.rds-workshop-calendar * { box-sizing: border-box; }
.rds-workshop-calendar svg { display: block; }
.rds-workshop-calendar [hidden] { display: none !important; }
.rds-workshop-calendar a { color: var(--rds-accent); text-decoration: none; }
.rds-workshop-calendar a:hover { color: var(--rds-vert-deep); }
.rds-workshop-calendar ul { list-style: none; padding: 0; margin: 0; }
.rds-workshop-calendar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #2A1F1A05 3px 4px);
}
.rds-workshop-calendar__inner { max-width: 1180px; margin: 0 auto; position: relative; }

/* ── En-tête du module ── */
.rds-workshop-calendar__header { text-align: center; max-width: 58ch; margin: 0 auto 2.6rem; }
/* Reprise typographique 2026-07-30 : kicker aligné EXACTEMENT sur `.surtitre`
   (style.css) — même taille/graisse/letter-spacing que tous les eyebrows
   réellement rendus ailleurs sur cette page (.v1__mot-eyebrow, .v1__edito-tag).
   Il héritait jusqu'ici de font-weight:300 (racine .rds-workshop-calendar),
   plus fin que ces références qui sont toutes en 400. */
.rds-workshop-calendar__kicker {
  font-size: .7rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--rds-taupe);
  margin: 0 0 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.rds-workshop-calendar__kicker svg { width: 34px; height: 14px; color: var(--rds-or); }
/* Même gabarit de clamp() que les autres h2 de cette page (.v1__pratique h2,
   .v1__cta h2) — le titre du calendrier avait son propre plafond, plus grand
   qu'aucun autre h2 du site (2,9rem vs 2,6rem). */
.rds-workshop-calendar__title {
  font-family: var(--rds-font-title); font-weight: 500; font-style: normal;
  font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0; line-height: 1.2;
}
.rds-workshop-calendar__title em { font-style: italic; color: var(--rds-accent); }
.rds-workshop-calendar__intro { font-size: .95rem; line-height: 1.8; color: var(--rds-taupe); margin: 1rem 0 0; text-wrap: pretty; }

/* ── Légende des 4 types (purement informative — ne filtre pas) ──
   ≥ 961px (desktop/laptop) : les 4 items tiennent sur une seule ligne, à
   largeur égale (flex:1 1 0), jamais de retour à la ligne du groupe — voir la
   media query dédiée plus bas. En dessous (tablette/mobile, même seuil que le
   reste du module), le comportement d'origine (wrap libre) est conservé.

   ⚠️ **La marge basse s'écrit `.rds-workshop-calendar .rds-workshop-legend`
   (0-2-0), jamais sur la classe seule.** Le reset `.rds-workshop-calendar ul`
   (0-1-1, plus haut) l'emporte sur `.rds-workshop-legend` (0-1-0) : la marge
   déclarée ici n'a jamais été appliquée — écart mesuré à **0 px** entre la
   dernière légende et l'élément suivant, à 1440, 1024, 820 comme à 390 px, où
   la légende occupe quatre lignes et touchait le cadre. Le même piège vaut
   pour la déclaration du bloc ≤ 640px. Corrigé au lot 1.33.0 ; la valeur
   elle-même (2.4rem) est celle voulue à l'origine, elle n'a pas changé. */
.rds-workshop-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2.4rem; max-width: 900px; }
.rds-workshop-calendar .rds-workshop-legend { margin: 0 auto 2.4rem; }
.rds-workshop-legend__item { display: flex; align-items: center; gap: .7rem; }
.rds-workshop-legend__text { font-size: .75rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-encre); }
.rds-workshop-legend__text small { display: block; font-size: .72rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--rds-taupe); margin-top: .2rem; }
@media (min-width: 961px) {
  .rds-workshop-legend { flex-wrap: nowrap; max-width: none; gap: 0 2rem; }
  .rds-workshop-legend__item { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* ── Filtres — deux groupes, cumulables ── */
.rds-workshop-filters {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: center;
  padding: 1.2rem 0 1.6rem; border-top: 1px solid #2A1F1A0F; border-bottom: 1px solid #2A1F1A0F; margin-bottom: 1.6rem;
}
.rds-workshop-filters__group { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.rds-workshop-filters__label { font-size: .75rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-taupe); flex: 0 0 auto; }
.rds-workshop-filters__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.rds-workshop-filter {
  appearance: none; background: none; border: 1px solid #2A1F1A26; border-radius: 24px; min-height: 40px; padding: 0 .95rem;
  font-family: var(--rds-font-body); font-weight: 400; font-size: .78rem; letter-spacing: .06em; color: var(--rds-encre);
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; transition: var(--rds-transition);
}
.rds-workshop-filter svg { width: 14px; height: 14px; color: currentColor; opacity: .75; }
.rds-workshop-filter__tick { display: none; margin-left: -.2rem; }
.rds-workshop-filter__tick svg { width: 13px; height: 13px; opacity: 1; }
.rds-workshop-filter:hover { border-color: var(--rds-or); background: #C9A45814; }
/* état actif : fond plein + coche + graisse — jamais la couleur seule */
.rds-workshop-filter.is-active { background: var(--rds-vert-deep); border-color: var(--rds-vert-deep); color: var(--rds-cta-texte); font-weight: 500; box-shadow: inset 0 0 0 1px #FFFFFF33; }
.rds-workshop-filter.is-active .rds-workshop-filter__tick { display: block; }
.rds-workshop-filter.is-active svg { opacity: 1; }

/* ── Navigation mensuelle — jamais de carrousel, jamais de défilement horizontal ── */
.rds-workshop-months { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; justify-content: center; margin-bottom: 2.6rem; }
.rds-workshop-months ul { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.rds-workshop-months a {
  min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .8rem;
  font-size: .75rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-taupe);
  border-bottom: 2px solid transparent; transition: var(--rds-transition);
}
.rds-workshop-months a:hover { color: var(--rds-encre); border-color: #C9A45880; }
/* mois actif : couleur + graisse + filet doré — trois signaux, jamais la couleur seule */
.rds-workshop-months a.is-current { color: var(--rds-encre); font-weight: 500; border-color: var(--rds-or); }

/* ── Médaillons de type ── */
.rds-workshop-medallion { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--rds-fond); }
.rds-workshop-medallion svg { width: 28px; height: 28px; }
.rds-workshop-medallion--sm { width: 42px; height: 42px; }
.rds-workshop-medallion--sm svg { width: 24px; height: 24px; }
.rds-workshop-card--floral .rds-workshop-medallion, .rds-workshop-medallion--floral { background: var(--rds-wc-floral); }
.rds-workshop-card--ceram .rds-workshop-medallion, .rds-workshop-medallion--ceram { background: var(--rds-vert); }
.rds-workshop-card--special .rds-workshop-medallion, .rds-workshop-medallion--special { background: var(--rds-or); }
.rds-workshop-card--enfants .rds-workshop-medallion, .rds-workshop-medallion--enfants { background: var(--rds-wc-enfants); }
.rds-workshop-card--floral .rds-workshop-card__category { color: var(--rds-wc-floral-ink); }
.rds-workshop-card--ceram .rds-workshop-card__category { color: var(--rds-vert); }
.rds-workshop-card--special .rds-workshop-card__category { color: var(--rds-wc-special-ink); }
.rds-workshop-card--enfants .rds-workshop-card__category { color: var(--rds-wc-enfants-ink); }

/* ── Pastilles d'état — cinq valeurs, pas une de plus ──
   Chaque état combine un mot, un pictogramme de silhouette distincte (feuille ·
   disque plein · croix · cadran · cadenas) et un traitement de fond : jamais la
   couleur seule. « Passé » (2026-08-14) n'apparaît jamais dans le calendrier,
   qui ne liste que les ateliers à venir : il ne se voit que sur la fiche
   individuelle d'un atelier dont la date est dépassée, atteinte par un lien
   direct.
   « Inscriptions clôturées » (2026-08-22), lui, se voit BIEN dans le
   calendrier : c'est l'état d'un atelier encore à venir dont les inscriptions
   en ligne ont fermé la veille à 19:15. Son ocre est mesuré à 6,14:1 sur le
   fond réellement composé de la pastille (#ECDFD2) — pas sur la carte nue,
   qu'un fond translucide ne laisse jamais voir tel quel. */
.rds-workshop-status {
  display: inline-flex; align-items: center; gap: .38rem; border-radius: 24px; padding: .42rem .75rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; font-weight: 400;
}
.rds-workshop-status svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rds-workshop-status.is-available { background: #37734A24; border-color: #37734A59; color: var(--rds-wc-status-ok-text); }
.rds-workshop-status.is-full { background: #73375714; border-color: #73375759; color: var(--rds-cta-hover); }
.rds-workshop-status.is-cancelled { background: var(--rds-encre); border-color: var(--rds-encre); color: var(--rds-fond); font-weight: 500; }
.rds-workshop-status.is-past { background: #2A1F1A0F; border-color: #2A1F1A45; color: var(--rds-taupe); }
.rds-workshop-status.is-closed { background: #8A5A0E1F; border-color: #8A5A0E59; color: var(--rds-wc-status-closed-text); }

/* ── Groupe de mois ── */
.rds-workshop-month { margin-bottom: 3rem; }
.rds-workshop-month:last-child { margin-bottom: 0; }
.rds-workshop-month__header {
  display: flex; align-items: baseline; gap: 1rem; padding: 0 0 .85rem; margin: 0 0 1.5rem;
  border-bottom: 1px solid #C9A45866; scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
/* Reprise finale avant présentation (2026-08-01) : cette règle supprimait
   l'anneau prune (`outline: none`) pour TOUT focus (pas seulement
   `:focus-visible`), ne laissant survivre que le halo blanc du double anneau
   global (functions.php) — contraste mesuré ~1,23:1 sur le fond rose clair du
   module, insuffisant. Contredisait déjà le commentaire d'en-tête de ce
   fichier (« le focus clavier n'est PAS redéfini ») : supprimée plutôt que
   corrigée, l'anneau double prune + halo blanc de la règle `:focus-visible`
   globale s'applique donc désormais ici exactement comme sur tout le reste du
   site (aucun style de focus propre à ce module, ni déplacement de mise en
   page : outline/box-shadow ne participent pas au flux). */
.rds-workshop-month__ornament { width: 30px; height: 13px; color: var(--rds-or); flex: 0 0 auto; align-self: center; }
.rds-workshop-month__name {
  font-family: var(--rds-font-title); font-style: normal; font-weight: 500; font-size: 2rem; line-height: 1;
  letter-spacing: .005em; margin: 0;
}
.rds-workshop-month__year { font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-taupe); }
.rds-workshop-month__items { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: stretch; }

/* ── Carte éditoriale ──
   Hauteur alignée sur la plus haute de la ligne (grid stretch) ; la pastille
   reste ancrée en haut, l'action en bas. Jamais de hauteur fixe. */
.rds-workshop-card {
  display: grid; grid-template-columns: 88px 50px minmax(0,1fr) auto; gap: .95rem; align-items: stretch;
  background: var(--rds-fond); border: 1px solid #2A1F1A1F; border-radius: var(--rds-radius);
  padding: 1.3rem 1.35rem; position: relative; overflow: hidden; transition: var(--rds-transition);
  color: var(--rds-encre); min-height: 126px;
}
.rds-workshop-card::before { content: ''; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 0; background: var(--rds-or); transition: var(--rds-transition); }
.rds-workshop-card:hover { border-color: #C9A45880; box-shadow: 0 6px 26px #2A1F1A0F; transform: translateY(-2px); color: var(--rds-encre); }
.rds-workshop-card:hover::before { width: 2px; }
.rds-workshop-card__date { align-self: center; text-align: center; border-right: 1px solid #2A1F1A1F; padding-right: .85rem; }
.rds-workshop-card__weekday { display: block; font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-taupe); }
.rds-workshop-card__day { display: block; font-family: var(--rds-font-title); font-weight: 300; font-size: 2.45rem; line-height: 1; letter-spacing: -.02em; margin: .08rem 0 .12rem; }
.rds-workshop-card__month { display: block; font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--rds-taupe); }
.rds-workshop-card__year { display: block; font-size: .66rem; font-weight: 400; letter-spacing: .1em; color: var(--rds-taupe); margin-top: .15rem; }
.rds-workshop-card .rds-workshop-medallion { align-self: center; }
.rds-workshop-card__body { align-self: center; min-width: 0; }
/* overflow-wrap (RDS-CAL-016, détecté par tests/workshop-calendar/) : la
   colonne « body » de la grille de carte (minmax(0,1fr)) peut se retrouver
   très étroite (~78px) au palier 2 colonnes (961-960px non concerné, mais
   ~1024px avec une carte de ~451px) — un titre dont un mot dépasse cette
   largeur débordait horizontalement sans wrap. text-wrap:pretty ne coupe
   qu'aux espaces ; overflow-wrap force le repli à l'intérieur d'un mot trop
   long plutôt que de déborder. Titre réel concerné : « Photophores émaillés
   et bougeoirs pour la Toussaint en famille » (#186). */
.rds-workshop-card__title { font-family: var(--rds-font-title); font-weight: 400; font-size: 1.28rem; line-height: 1.28; margin: 0; text-wrap: pretty; overflow-wrap: break-word; }
.rds-workshop-card__category { font-size: .75rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; margin: .45rem 0 0; }
.rds-workshop-card__location { display: flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--rds-taupe); margin: .5rem 0 0; }
.rds-workshop-card__location svg { width: 14px; height: 14px; color: var(--rds-or); flex: 0 0 auto; }
.rds-workshop-card__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .8rem; text-align: right; }
/* CTA aligné sur les tailles réelles de .btn-primary/.btn-outline (12px, 400,
   letter-spacing .18em) — moins d'espacement ici volontairement (.12em) car
   c'est un lien inline, pas un bouton plein. */
.rds-workshop-card__cta { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-accent); white-space: nowrap; }
.rds-workshop-card__cta svg { width: 13px; height: 13px; transition: var(--rds-transition); }
.rds-workshop-card:hover .rds-workshop-card__cta svg { transform: translateX(3px); }
/* état annulé : atténué mais parfaitement lisible — jamais « cassé » */
.rds-workshop-card.is-cancelled { background: #F4E5DE73; border-style: dashed; border-color: #2A1F1A40; }
.rds-workshop-card.is-cancelled .rds-workshop-card__title, .rds-workshop-card.is-cancelled .rds-workshop-card__day { color: #54443E; }
.rds-workshop-card.is-cancelled .rds-workshop-medallion { filter: saturate(.35); opacity: .85; }

/* Focus clavier de la carte : le lien de titre couvre toute la surface
   (::after position absolute) — le contour est donc reporté du lien vers la
   carte quand le navigateur supporte :has(), pour entourer la carte entière
   plutôt que le seul texte du lien. Mêmes tokens que le focus global du site
   (functions.php) : ce n'est pas un style de focus différent, seulement un
   placement différent. */
.rds-workshop-card__link { text-decoration: none; }
.rds-workshop-card__link::after { content: ''; position: absolute; inset: 0; }
@supports selector(:has(*)) {
  .rds-workshop-card__link:focus-visible { outline: none; box-shadow: none; }
  .rds-workshop-card:has(.rds-workshop-card__link:focus-visible) {
    outline: 2px solid var(--rds-focus); outline-offset: 3px; border-radius: 2px;
    box-shadow: 0 0 0 3px var(--rds-focus-halo);
  }
}

/* ── Affichage progressif des mois (lot finalisation 2026-07-31) ──
   Même langage visuel que .rds-workshop-filter (pilule, bordure fine, texte
   capitales) plutôt qu'un .btn-primary/.btn-outline* du reste du site : ces
   classes vivent dans style.css/services.css, jamais chargées sur la page
   Atelier (atelier.css) — cohérence avec les autres contrôles DU module,
   pas avec des composants dont le CSS n'est pas présent ici. */
.rds-workshop-calendar__more-wrap { display: flex; justify-content: center; margin-top: 2.6rem; }
.rds-workshop-calendar__more {
  appearance: none; background: none; border: 1px solid var(--rds-accent); border-radius: 24px;
  min-height: 44px; padding: 0 1.7rem;
  font-family: var(--rds-font-body); font-weight: 400; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rds-accent); cursor: pointer; transition: var(--rds-transition);
}
.rds-workshop-calendar__more:hover { background: var(--rds-accent); color: var(--rds-cta-texte); }

/* ── État vide (filtré ou aucun atelier programmé) ── */
.rds-workshop-calendar__empty { text-align: center; font-size: .9rem; color: var(--rds-taupe); padding: 2.4rem 1rem; border: 1px dashed #2A1F1A26; border-radius: var(--rds-radius); }
.rds-workshop-calendar__reset { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--rds-accent); padding: .2rem 0; margin-left: .2rem; font-family: var(--rds-font-body); font-size: .9rem; color: var(--rds-accent); cursor: pointer; position: relative; }
/* Cible tactile ≥ 44×44px (RDS-CAL-014) sans agrandir le bouton visuellement :
   zone de frappe invisible, centrée sur le bouton, plancher 44px sur chaque
   axe — technique standard qui n'affecte ni la mise en page ni l'apparence. */
.rds-workshop-calendar__reset::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* ══ ≤ 960px — tablette : une seule colonne de cartes ══ */
@media (max-width: 960px) {
  .rds-workshop-calendar { padding: 4.5rem 2rem 5rem; }
  .rds-workshop-month__items { grid-template-columns: 1fr; }
  .rds-workshop-month__name { font-size: 1.8rem; }
}

/* ══ ≤ 640px — mobile ══
   Reprise 2026-07-30 : les overrides de taille de police propres à ce palier
   ont été retirés pour les libellés/métadonnées (titre, intro, légende,
   filtre, jour de semaine/mois/année de carte, titre de carte, CTA) — ils
   tombaient sous la nouvelle base desktop et redonnaient l'effet « trop petit »
   sur mobile. Seules restent les propriétés de mise en page (dimensions
   tactiles ≥44px, grille de carte, alignement inline jour/année). */
@media (max-width: 640px) {
  .rds-workshop-calendar { padding: 2.6rem 1.25rem 3rem; }
  .rds-workshop-calendar__header { margin-bottom: 1.8rem; }
  .rds-workshop-legend { gap: .9rem 1.2rem; justify-content: flex-start; }
  /* 0-2-0 obligatoire (voir la légende plus haut) — et 2rem, pas 1.6rem :
     la légende s'empile ici sur quatre lignes, l'espace doit se lire comme
     une séparation de blocs, pas comme un interligne de la légende. */
  .rds-workshop-calendar .rds-workshop-legend { margin-bottom: 2rem; }
  .rds-workshop-legend__item { gap: .5rem; }
  .rds-workshop-medallion { width: 46px; height: 46px; }
  .rds-workshop-medallion svg { width: 26px; height: 26px; }
  .rds-workshop-filters { gap: .9rem; justify-content: flex-start; padding: 1rem 0 1.2rem; margin-bottom: 1.2rem; }
  .rds-workshop-filters__group { gap: .45rem; align-items: flex-start; }
  .rds-workshop-filters__label { width: 100%; }
  .rds-workshop-filter { min-height: 44px; padding: 0 .9rem; }
  .rds-workshop-months { justify-content: flex-start; margin-bottom: 1.8rem; gap: .5rem; }
  .rds-workshop-months ul { justify-content: flex-start; }
  .rds-workshop-months a { min-height: 44px; padding: 0 .7rem; }
  .rds-workshop-month { margin-bottom: 2.2rem; }
  .rds-workshop-month__header { gap: .7rem; padding-bottom: .7rem; margin-bottom: 1.1rem; }
  .rds-workshop-month__ornament { width: 24px; }
  .rds-workshop-month__name { font-size: 1.55rem; }
  .rds-workshop-month__items { gap: 1rem; }
  .rds-workshop-card {
    grid-template-columns: 46px minmax(0,1fr); grid-template-areas: 'med date' 'body body' 'right right';
    gap: .75rem .9rem; padding: 1.2rem 1.15rem; align-items: center; min-height: 0;
  }
  .rds-workshop-card__date { grid-area: date; align-self: center; border-right: 0; padding-right: 0; text-align: left; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; }
  .rds-workshop-card__day { font-size: 1.85rem; margin: 0; }
  .rds-workshop-card__year { display: inline; margin: 0 0 0 .35em; color: inherit; }
  .rds-workshop-card .rds-workshop-medallion { grid-area: med; width: 46px; height: 46px; }
  .rds-workshop-card__body { grid-area: body; }
  .rds-workshop-card__aside { grid-area: right; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: .6rem; padding-top: .7rem; border-top: 1px solid #2A1F1A14; }
  .rds-workshop-card__cta { min-height: 44px; align-items: center; }
}

/* ══ ≤ 380px — mobile étroit ══ */
@media (max-width: 380px) {
  .rds-workshop-calendar { padding: 2.2rem 1rem 2.6rem; }
  .rds-workshop-card { padding: 1.05rem 1rem; }
  .rds-workshop-card__day { font-size: 1.65rem; }
  .rds-workshop-card__aside { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .rds-workshop-card__cta { min-height: 40px; }
  .rds-workshop-filter { padding: 0 .8rem; }
}

/* ══ Réduction des animations ══
   RDS-CAL-008 : ne pas se limiter aux transitions du composant — style.css
   déclare `html { scroll-behavior: smooth; }` sans garde reduced-motion
   (défaut du thème, hors périmètre de ce lot). Cette page utilise beaucoup
   d'ancres (navigation mensuelle, retour au calendrier depuis la fiche) :
   neutraliser aussi le défilement fluide ici, comme creations.css le fait
   déjà pour le même défaut sitewide (`:root { scroll-behavior: auto }`). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .rds-workshop-calendar *, .rds-workshop-calendar *::before { transition: none !important; animation: none !important; }
  .rds-workshop-card:hover { transform: none; }
  .rds-workshop-card:hover .rds-workshop-card__cta svg { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fiche individuelle d'un atelier (single-rds_event.php)
   Réutilise le médaillon de type et la pastille de statut du calendrier (voir
   la sous-palette scopée `.rds-workshop-calendar, .rds-workshop-single` en
   tête de fichier) à l'intérieur du chrome générique de page.php
   (.page-banner / .page-content-area / .page-body, style.css) — aucun style
   de page dupliqué.
   ═══════════════════════════════════════════════════════════════════════════ */
.rds-workshop-single { max-width: 640px; margin: 0 auto; }
.rds-workshop-single svg { display: block; }
/* .page-body a (style.css, 0-1-1) écrase sinon la couleur voulue ici (même
   piège que .rds-workshop-single__cta plus bas) : spécificité 0-2-1 pour la battre. */
.page-body a.rds-workshop-single__back {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .08em;
  color: var(--rds-taupe); text-decoration: none; margin-bottom: 2rem;
}
.page-body a.rds-workshop-single__back:hover { color: var(--rds-accent); }
/* Nom de l'atelier, sous le bandeau : le `<h1>` y est désormais le titre fixe
   « Détails de l'atelier ». Typographie de `.page-body h2` (style.css) ; seul
   son `margin` de 3rem, pensé pour un titre de section, est neutralisé ici —
   0-2-0, qui l'emporte sur `.page-body h2` (0-1-1) sans `!important`. */
.page-body .rds-workshop-single__name { margin: 0 0 1.2rem; }
.rds-workshop-single__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; }
.rds-workshop-single__head .rds-workshop-medallion { flex: 0 0 auto; }
.rds-workshop-single__category { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .3rem; color: var(--rds-taupe); }
.rds-workshop-single__status { margin: 0; }
.rds-workshop-single__meta { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid #2A1F1A1F; }
.rds-workshop-single__meta li {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid #2A1F1A1F;
  font-size: .95rem; color: var(--rds-encre);
}
.rds-workshop-single__meta svg { width: 18px; height: 18px; color: var(--rds-or); flex: 0 0 auto; }
.rds-workshop-single__desc { font-size: 1rem; line-height: 1.75; color: var(--rds-taupe); margin: 0 0 2.4rem; }
.rds-workshop-single__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
/* .page-body a (style.css, 0-1-1) écrase sinon le texte de .btn-primary/.btn-outline
   (0-1-0) : sur .btn-primary le texte devient prune sur fond prune — invisible.
   Constaté par capture d'écran, pas à la lecture du CSS. Spécificité 0-3-1,
   sans !important, pour battre .page-body a proprement. */
.page-body .rds-workshop-single__cta a.btn-primary { color: var(--rds-cta-texte); }
.page-body .rds-workshop-single__cta a.btn-outline { color: var(--rds-encre); }
.page-body .rds-workshop-single__cta a.btn-outline:hover { color: var(--rds-fond); }

@media (max-width: 400px) {
  /* « Appeler pour réserver » + padding global dépassait la largeur utile
     d'une fiche atelier à 320 px. Les CTA deviennent des rangées fluides et
     peuvent revenir à la ligne, sans réduire la cible tactile. */
  .rds-workshop-single__cta a.btn-primary,
  .rds-workshop-single__cta a.btn-outline {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}