/* ═══════════════════════════════════════════════════════════════
   Planning des cours & ateliers - [resaskill_planning_cours]
   et widget Elementor « Planning des cours ».

   LOI N1 / 5.6 : AUCUN repli responsive ecrit en dur. Les trois
   paliers (ordinateur / tablette / mobile) ne font que designer
   l'une des deux dispositions ; les valeurs, elles, ne sont
   ecrites qu'UNE fois (--pc-ligne-* et --pc-compact-*).
   Le shortcode pose data-d / data-t / data-m sur la racine.

   ── REECRITURE DU 2026-09-20 (2.4.182) ────────────────────────
   Trois defauts de structure corriges, tous visibles en mobile :

   1. La carte etait en `height` FIXE avec `overflow:hidden`. Des
      que le contenu depassait, il etait ampute en silence - et le
      bouton etant le dernier element de la pile, c'est TOUJOURS
      lui qui disparaissait. C'est exactement le symptome rapporte.
      -> `min-height` + `grid-auto-rows:1fr` sur la liste : les
      cartes gardent toutes la meme hauteur, mais c'est la plus
      haute qui donne le ton. Plus rien n'est coupe, jamais.

   2. Les paliers se basent sur la largeur de la FENETRE, alors
      qu'un widget Elementor vit dans une colonne dont la largeur
      n'a aucun rapport. Une colonne a 33 % en « ordinateur »
      recevait donc la disposition « ligne » sur 300 px de large.
      -> requetes de CONTENEUR (@container) : la carte se regle sur
      la largeur dont elle dispose reellement. C'est ce que faisait
      le cadre d'appareil de la maquette, et c'est pour ca qu'elle
      etait juste a toutes les tailles.

   3. Aucune protection contre les regles du theme. Un theme qui
      pose `word-break:break-all` coupait les titres au milieu d'un
      mot (« Canipaddl / e 18/09 »).
      -> remise a zero explicite de la coupure de mots.
   ═══════════════════════════════════════════════════════════════ */

.rsk-pc {
  /* Reglages, surcharges en ligne par le shortcode (par palier). */
  --rsk-pc-r: 14px;
  --rsk-pc-h: 104px;
  --rsk-pc-photo: 132px;
  --rsk-pc-gap: 12px;
  --rsk-pc-accent: #B28E4B;

  /* Pulsation de la pastille d'etat. */
  --rsk-pc-pulse-tempo: 2s;

  /* Teintes de base, alignees sur le tunnel. */
  --rsk-pc-ink: #12336B;
  --rsk-pc-muted: #6B7A93;
  --rsk-pc-line: #E4E8EF;
  --rsk-pc-surface: #fff;
  --rsk-pc-vert: #1F9D55;
  --rsk-pc-rouge: #C0392B;

  /* ── Disposition « ligne » : tout sur une rangee ──
     Les quatre colonnes se resserrent avec le conteneur au lieu de
     garder des largeurs fixes qui finissaient par ne plus tenir :
     - la photo ne prend jamais plus de 22 % de la carte,
     - les places ont un plancher (elles restent lisibles) et un
       plafond (elles ne mangent pas le titre),
     - la colonne du bouton est en `auto` : elle fait EXACTEMENT la
       largeur du bouton, ni plus ni moins. C'etait une valeur fixe
       (148px), et un libelle un peu long y etait tronque en
       « Reser... ». Avec `auto`, c'est le titre qui cede de la place
       au bouton, jamais l'inverse.
     C'est le « bouton qui adapte sa taille a son espace ». */
  --pc-ligne-cols: min(var(--rsk-pc-photo), 22cqi) minmax(0, 1fr) clamp(92px, 15cqi, 150px) auto;
  --pc-ligne-rows: minmax(0, 1fr);
  --pc-ligne-areas: "photo infos places action";
  --pc-ligne-places: center;
  --pc-ligne-places-pad: 0 6px;
  --pc-ligne-action: flex-end;
  --pc-ligne-btnw: auto;
  --pc-ligne-lieu: inline;
  --pc-ligne-lignes: 2;

  /* ── Disposition « compacte » : photo a gauche, le reste empile ──
     Deux rangees souples encadrent le texte : il reste centre alors
     que la photo couvre la carte de haut en bas.
     La photo est plafonnee a 34 % : sur une carte etroite, le texte
     garde toujours les deux tiers de la largeur. C'est ce qui evite
     le titre ecrase dans une colonne de 70 px. */
  --pc-compact-cols: min(var(--rsk-pc-photo), 34cqi) minmax(0, 1fr);
  --pc-compact-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  --pc-compact-areas: "photo ." "photo infos" "photo places" "photo action" "photo .";
  --pc-compact-places: flex-start;
  --pc-compact-places-pad: 2px 15px 0;
  --pc-compact-action: stretch;
  --pc-compact-btnw: 100%;
  --pc-compact-lieu: none;
  --pc-compact-lignes: 3;

  /* La carte se regle sur SA largeur, pas sur celle de la fenetre. */
  container: rskpc / inline-size;
  /* Pour pouvoir se resserrer dans un parent en flex ou en grille. */
  min-width: 0;

  box-sizing: border-box;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--rsk-pc-ink);
}
.rsk-pc *, .rsk-pc *::before, .rsk-pc *::after { box-sizing: border-box; }

/* EXCEPTION AU CONTROLE DES CLASSES ORPHELINES (cf. CLAUDE.md) :
   .rsk-pc-ouvrir n'a volontairement aucune regle ici. C'est un simple
   crochet pour le clic, toujours pose EN PLUS de .rsk-pc-btn, dont il
   herite donc tout le style. Ne pas lui inventer d'apparence. */

/* Un theme qui pose word-break:break-all coupait les titres au milieu
   d'un mot. On impose la coupure normale ; seul un mot plus long que
   sa colonne sera encore coupe, ce qui est le comportement voulu.
   La classe est DOUBLEE volontairement : en simple, la regle pesait
   autant qu'un `.mon-theme *` et perdait sur le seul ordre des
   feuilles - or l'ordre entre theme et extension n'est pas garanti. */
.rsk-pc.rsk-pc, .rsk-pc.rsk-pc * { word-break: normal; overflow-wrap: break-word; hyphens: none; }

/* Aiguillage des paliers : on ne recopie que des references. */
.rsk-pc[data-d="ligne"]   { --pc-cols: var(--pc-ligne-cols);   --pc-rows: var(--pc-ligne-rows);   --pc-areas: var(--pc-ligne-areas);   --pc-places: var(--pc-ligne-places);   --pc-places-pad: var(--pc-ligne-places-pad);   --pc-action: var(--pc-ligne-action);   --pc-btnw: var(--pc-ligne-btnw);   --pc-lieu: var(--pc-ligne-lieu);   --pc-lignes: var(--pc-ligne-lignes); }
.rsk-pc[data-d="compact"] { --pc-cols: var(--pc-compact-cols); --pc-rows: var(--pc-compact-rows); --pc-areas: var(--pc-compact-areas); --pc-places: var(--pc-compact-places); --pc-places-pad: var(--pc-compact-places-pad); --pc-action: var(--pc-compact-action); --pc-btnw: var(--pc-compact-btnw); --pc-lieu: var(--pc-compact-lieu); --pc-lignes: var(--pc-compact-lignes); }

@media (max-width: 1024px) {
  .rsk-pc[data-t="ligne"]   { --pc-cols: var(--pc-ligne-cols);   --pc-rows: var(--pc-ligne-rows);   --pc-areas: var(--pc-ligne-areas);   --pc-places: var(--pc-ligne-places);   --pc-places-pad: var(--pc-ligne-places-pad);   --pc-action: var(--pc-ligne-action);   --pc-btnw: var(--pc-ligne-btnw);   --pc-lieu: var(--pc-ligne-lieu);   --pc-lignes: var(--pc-ligne-lignes); }
  .rsk-pc[data-t="compact"] { --pc-cols: var(--pc-compact-cols); --pc-rows: var(--pc-compact-rows); --pc-areas: var(--pc-compact-areas); --pc-places: var(--pc-compact-places); --pc-places-pad: var(--pc-compact-places-pad); --pc-action: var(--pc-compact-action); --pc-btnw: var(--pc-compact-btnw); --pc-lieu: var(--pc-compact-lieu); --pc-lignes: var(--pc-compact-lignes); }
}
@media (max-width: 767px) {
  .rsk-pc[data-m="ligne"]   { --pc-cols: var(--pc-ligne-cols);   --pc-rows: var(--pc-ligne-rows);   --pc-areas: var(--pc-ligne-areas);   --pc-places: var(--pc-ligne-places);   --pc-places-pad: var(--pc-ligne-places-pad);   --pc-action: var(--pc-ligne-action);   --pc-btnw: var(--pc-ligne-btnw);   --pc-lieu: var(--pc-ligne-lieu);   --pc-lignes: var(--pc-ligne-lignes); }
  .rsk-pc[data-m="compact"] { --pc-cols: var(--pc-compact-cols); --pc-rows: var(--pc-compact-rows); --pc-areas: var(--pc-compact-areas); --pc-places: var(--pc-compact-places); --pc-places-pad: var(--pc-compact-places-pad); --pc-action: var(--pc-compact-action); --pc-btnw: var(--pc-compact-btnw); --pc-lieu: var(--pc-compact-lieu); --pc-lignes: var(--pc-compact-lignes); }
}

/* Le filet de securite « carte trop etroite pour la disposition en
   ligne » n'est PAS ecrit ici : son seuil est un reglage, et la regle
   @container correspondante est emise par le shortcode dans le
   <style> de l'instance (voir render_planning_cours). Cette feuille
   se contente de definir le jeu de variables qu'elle viendra
   pointer - aucun repli en dur, conformement a la LOI N1. */

/* ── La liste ──
   grid-auto-rows:1fr = toutes les cartes prennent la hauteur de la
   plus haute. C'est ce qui remplace le `height` fixe : hauteur
   uniforme, mais plus aucun contenu ampute. */
.rsk-pc-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--rsk-pc-gap);
}

/* ── La carte ── */
.rsk-pc-carte {
  display: grid;
  align-items: center;
  grid-template-columns: var(--pc-cols);
  grid-template-rows: var(--pc-rows);
  grid-template-areas: var(--pc-areas);
  min-height: var(--rsk-pc-h);
  height: 100%;
  background: var(--rsk-pc-surface);
  border: 1px solid var(--rsk-pc-line);
  border-radius: var(--rsk-pc-r);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.rsk-pc-carte:hover { box-shadow: 0 10px 26px -14px rgba(18, 51, 107, .4); border-color: #D6DCE6; }
.rsk-pc-carte.est-complet { opacity: .72; }

.rsk-pc-photo {
  grid-area: photo;
  align-self: stretch;
  /* La largeur vient de la colonne de grille, qui sait se resserrer.
     L'ecrire ici en dur (comme avant) empechait tout resserrement. */
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background: #DCE3EC;
}
.rsk-pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rsk-pc-infos { grid-area: infos; padding: 0 15px; min-width: 0; }
.rsk-pc-nom {
  font-size: clamp(14px, 3.4cqi, 15.5px);
  font-weight: 800; color: var(--rsk-pc-ink); line-height: 1.25;
  /* Nombre de lignes maxi selon la disposition : la carte ne s'etire
     pas indefiniment, mais elle ne coupe plus le bouton pour autant. */
  display: -webkit-box; -webkit-line-clamp: var(--pc-lignes); -webkit-box-orient: vertical; overflow: hidden;
}
.rsk-pc-quand {
  margin-top: 4px; font-size: clamp(11.5px, 2.9cqi, 12.5px); color: var(--rsk-pc-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rsk-pc-sep { width: 3px; height: 3px; border-radius: 50%; background: #C3CBD8; flex: none; }
.rsk-pc-lieu { display: var(--pc-lieu); }
.rsk-pc-lieu-sep { display: var(--pc-lieu); }

.rsk-pc-places {
  grid-area: places;
  display: flex; align-items: center; justify-content: var(--pc-places);
  gap: 7px; font-size: clamp(11.5px, 2.9cqi, 13px); font-weight: 700;
  /* En compacte, le meme retrait que le titre : les deux etaient
     desalignes (6px contre 15px) faute d'une regle vivante. */
  padding: var(--pc-places-pad);
  min-width: 0;
}
.rsk-pc-pastille { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rsk-pc-dispo { color: var(--rsk-pc-vert); }
.rsk-pc-dispo .rsk-pc-pastille { background: var(--rsk-pc-vert); }
.rsk-pc-rupture { color: var(--rsk-pc-rouge); }
.rsk-pc-rupture .rsk-pc-pastille { background: var(--rsk-pc-rouge); }

/* ── Pastille pulsante ─────────────────────────────────────────
   Reprise fidele du widget « Pastille d'annonce » de WS Booster :
   deux ondes concentriques qui s'ecartent en s'effacant.

   La seconde part a MI-PARCOURS de la premiere - `calc(tempo / 2)`
   et non un delai fixe. C'est le detail qui compte : avec une
   seconde en dur, accelerer le tempo faisait se superposer les deux
   ondes au lieu de les alterner. (Lecon deja payee dans WS Booster,
   on ne la repaie pas ici.)

   `background: inherit` fait suivre la couleur de l'etat sans une
   regle de plus - la pseudo prend le fond de sa pastille.

   Seule la pastille VERTE pulse. Une pastille rouge « Rupture » qui
   clignote attirerait l'oeil sur la seule carte ou il n'y a rien a
   faire, et la carte est deja attenuee (opacity .72). Pour la faire
   pulser aussi, retirer les `.rsk-pc-dispo` des selecteurs. */
.rsk-pc[data-pulse="1"] .rsk-pc-dispo .rsk-pc-pastille::before,
.rsk-pc[data-pulse="1"] .rsk-pc-dispo .rsk-pc-pastille::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  pointer-events: none;
  animation: rsk-pc-pastille-pulse var(--rsk-pc-pulse-tempo) ease-out infinite;
}
.rsk-pc[data-pulse="1"] .rsk-pc-dispo .rsk-pc-pastille::after {
  animation-delay: calc(var(--rsk-pc-pulse-tempo) / 2);
}

@keyframes rsk-pc-pastille-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ── Mise en veille hors ecran (REGLE N 2quater du socle) ──
   Une boucle infinie qui tourne sur un planning sorti de l'ecran, ou
   dans un onglet en arriere-plan, ne se voit pas mais consomme. Le
   contrat est dans le BON SENS : c'est la classe qui met en PAUSE.
   Sans le script, tout tourne comme avant - rien ne disparait.
   Meme poids que la regle ci-dessus, mais posee APRES : elle gagne. */
.rsk-pc.est-hors-vue .rsk-pc-dispo .rsk-pc-pastille::before,
.rsk-pc.est-hors-vue .rsk-pc-dispo .rsk-pc-pastille::after,
.rsk-pc.est-onglet-cache .rsk-pc-dispo .rsk-pc-pastille::before,
.rsk-pc.est-onglet-cache .rsk-pc-dispo .rsk-pc-pastille::after {
  animation-play-state: paused;
}

.rsk-pc-action {
  grid-area: action;
  display: flex; align-items: center; justify-content: var(--pc-action);
  padding: 6px 15px 0; min-width: 0;
}
.rsk-pc[data-d="ligne"] .rsk-pc-action { padding: 0 15px; }

/* 🔴 Les deux variables portent une valeur de REPLI. La fenetre de detail
   vit sur <body>, hors de `.rsk-pc` : elle ne recoit ces tokens que parce
   que le JS les y recopie. Le jour ou cette recopie manque (racine retiree
   par le constructeur Elementor, valeur vide), `background: var(--x)` sans
   repli rend le bouton TRANSPARENT - texte blanc sur fond blanc, bouton
   invisible. Aucune erreur, juste un parcours mort. */
.rsk-pc-btn {
  border: none; border-radius: calc(var(--rsk-pc-r, 14px) * .62);
  padding: clamp(9px, 2.2cqi, 12px) clamp(12px, 2.8cqi, 18px);
  cursor: pointer;
  font-family: inherit; font-size: clamp(12px, 3.2cqi, 13.5px); font-weight: 700;
  line-height: 1.2;
  color: #fff; background: var(--rsk-pc-accent, #B28E4B);
  width: var(--pc-btnw); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .15s ease, transform .1s ease;
}
.rsk-pc-btn:hover { filter: brightness(1.07); }
.rsk-pc-btn:active { transform: scale(.97); }
.rsk-pc-btn:focus-visible { outline: 2px solid var(--rsk-pc-ink); outline-offset: 2px; }
.rsk-pc-btn[disabled] { background: #AEB7C4; cursor: not-allowed; }

/* ── Planning vide : un bandeau, jamais un trou (2.4.228) ──
   Le titre dit qu'il n'y a rien POUR L'INSTANT, et le formulaire
   permet d'etre prevenu. Toutes les couleurs ont un repli : le bloc
   doit tenir sans aucun token pose par le shortcode. */
.rsk-pc-vide {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(18px, 4cqi, 28px);
  background: var(--rsk-pc-surface, #fff);
  border: 1px dashed var(--rsk-pc-line, #E4E8EF);
  border-radius: var(--rsk-pc-r, 14px);
  color: var(--rsk-pc-ink, #12336B);
  text-align: left;
}
.rsk-pc-vide-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--rsk-pc-accent, #B28E4B);
  background: color-mix(in srgb, var(--rsk-pc-accent, #B28E4B) 12%, transparent);
}
.rsk-pc-vide-corps { flex: 1 1 auto; min-width: 0; }
.rsk-pc-vide-titre { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 2px 0 4px; }
.rsk-pc-vide-texte { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--rsk-pc-muted, #6B7A93); }
/* Les cours complets du mois (2.4.252) : la preuve qu'on fait des cours,
   et qu'ils se remplissent. Lecture seule : rien n'est cliquable, donc
   rien n'en a l'air (pas de curseur, pas d'elevation au survol). */
.rsk-pc-complets { margin: 0 0 16px; }
.rsk-pc-complets-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rsk-pc-muted, #6B7A93); margin: 0 0 8px;
}
/* Prefixe .rsk-pc : un theme pose couramment .entry-content ul { padding; list-style }
   (0,1,1), qui battait une classe seule et faisait deborder le bandeau. */
.rsk-pc .rsk-pc-complets-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  /* minmax(0,1fr) : sans lui la piste prend la largeur du nom le plus long
     (nowrap) et le bandeau deborde de sa colonne. Mesure au banc d essai. */
  grid-template-columns: minmax(0, 1fr);
}
.rsk-pc .rsk-pc-complet {
  list-style: none;
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 9px 12px; border-radius: calc(var(--rsk-pc-r, 14px) * .62);
  background: #F7F9FC; border: 1px solid var(--rsk-pc-line, #E4E8EF);
}
.rsk-pc-complet-date {
  flex: 0 0 auto; width: 44px; padding: 4px 0; border-radius: 8px; text-align: center;
  background: var(--rsk-pc-surface, #fff); border: 1px solid var(--rsk-pc-line, #E4E8EF);
  line-height: 1.1;
}
.rsk-pc-complet-jour { display: block; font-size: 17px; font-weight: 700; color: var(--rsk-pc-ink, #12336B); }
.rsk-pc-complet-mois { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--rsk-pc-muted, #6B7A93); }
.rsk-pc-complet-infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rsk-pc-complet-nom {
  font-size: 14px; font-weight: 600; color: var(--rsk-pc-ink, #12336B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-pc-complet-quand { font-size: 12.5px; color: var(--rsk-pc-muted, #6B7A93); }
.rsk-pc-complet-quand::first-letter { text-transform: uppercase; }
.rsk-pc-complet-badge {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--rsk-pc-rouge, #C0392B);
  background: color-mix(in srgb, var(--rsk-pc-rouge, #C0392B) 10%, transparent);
}

.rsk-pc-alerte {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0;
}
.rsk-pc-alerte input[type="email"] {
  box-sizing: border-box;
  flex: 1 1 220px; min-width: 0; margin: 0;
  padding: 11px 14px; font: inherit; font-size: 14px;
  color: var(--rsk-pc-ink, #12336B); background: #F7F9FC;
  border: 1px solid var(--rsk-pc-line, #E4E8EF); border-radius: calc(var(--rsk-pc-r, 14px) * .62);
}
.rsk-pc-alerte input[type="email"]:focus {
  outline: none; background: #fff;
  border-color: var(--rsk-pc-accent, #B28E4B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsk-pc-accent, #B28E4B) 22%, transparent);
}
.rsk-pc-alerte .rsk-pc-btn { flex: 0 0 auto; width: auto; font-size: 14px; padding: 11px 18px; }
.rsk-pc-alerte-msg { flex: 1 0 100%; margin: 0; min-height: 0; font-size: 12.5px; line-height: 1.45; color: var(--rsk-pc-muted, #6B7A93); }
.rsk-pc-alerte-msg:empty { display: none; }
.rsk-pc-alerte-msg.est-erreur { color: #C0392B; }
.rsk-pc-alerte-rgpd { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--rsk-pc-muted, #6B7A93); }
.rsk-pc-alerte-ok {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  font-size: 14px; line-height: 1.5;
}
/* Libelle lu par les lecteurs d'ecran, invisible a l'oeil. */
.rsk-pc-alerte-lbl {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Champ piege anti-robots : hors de l'ecran, jamais display:none
   (certains robots ignorent les champs caches de cette facon). */
.rsk-pc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@container rskpc (max-width: 420px) {
  .rsk-pc-vide { flex-direction: column; gap: 10px; }
  .rsk-pc-alerte .rsk-pc-btn { flex: 1 1 100%; }
}

/* ── Fenetre de detail ─────────────────────────────────────── */
.rsk-pc-voile {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(9, 20, 40, .55);
  display: none; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .22s ease;
}
.rsk-pc-voile.est-ouvert { display: flex; }
.rsk-pc-voile.est-affiche { opacity: 1; }
.rsk-pc-modal {
  background: #fff; border-radius: calc(var(--rsk-pc-r, 14px) + 4px);
  width: min(560px, 100%); max-height: min(88vh, 800px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  transform: translate3d(0, 18px, 0) scale(.97);
  transition: transform .3s cubic-bezier(.22, .78, .3, 1);
}
.rsk-pc-voile.est-affiche .rsk-pc-modal { transform: none; }
/* 1. la photo en banniere */
/* 🔴 LA BANNIERE NE RECADRE PAS. L'image s'affiche ENTIERE, hauteur libre.
   Demande de Lovinsky le 22/09/2026 : « c'etait pour voir la banniere du
   haut en entiere et pas coupee comme ca ».
   Avant : hauteur fixe + `object-fit: cover` -> la photo etait rognee en
   haut et en bas, et la reduire pendant la saisie aggravait le recadrage
   jusqu'a couper les visages. Une photo de seance EST l'argument de vente :
   la rogner pour gagner des pixels est un mauvais echange.
   `min-height` couvre le cas « pas d'image » (la croix et le nom sont
   positionnes dessus, il leur faut un support).

   ⚠️ Pas de `max-height` ici, et c'est deliberе. Plafonner la hauteur
   d'une image en `width:100%` force soit le recadrage (`cover`), soit des
   bandes grises sur les cotes (`contain`) -- essaye et rejete le
   22/09/2026. La banniere prend donc la hauteur NATURELLE de la photo ;
   quand la fenetre est basse, c'est le pied qui defile, pas l'image qui
   se fait couper. */
.rsk-pc-m-banniere {
  position: relative; flex: none; background: #DCE3EC;
  min-height: 120px; line-height: 0;
}
.rsk-pc-m-banniere img {
  width: 100%; height: auto; display: block;
}
/* Le nom, en haut a gauche, sur un fond blanc flou. Il laisse voir la
   photo tout en restant lisible sur une image claire comme sur une image
   sombre -- d'ou le fond opaque a 78 % PLUS le flou, et non le flou seul,
   qui ne suffit pas sur un ciel blanc. `max-width` l'empeche de courir
   sous le bouton de fermeture. */
.rsk-pc-m-nom {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  max-width: calc(100% - 68px);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  backdrop-filter: blur(9px) saturate(1.3);
  box-shadow: 0 2px 10px rgba(9, 20, 40, .12);
  font-size: 14.5px; font-weight: 800; line-height: 1.25;
  color: var(--rsk-pc-ink, #12336B);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Navigateur sans backdrop-filter : on rend le fond franchement opaque,
   sinon le texte passe sur la photo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rsk-pc-m-nom { background: rgba(255, 255, 255, .94); }
}
.rsk-pc-m-fermer {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(255, 255, 255, .93);
  color: #0F2547; font-size: 20px; line-height: 1; cursor: pointer;
}
/* 2. le bandeau d'infos */
.rsk-pc-m-bandeau {
  flex: none; background: #F7F9FC; border-bottom: 1px solid var(--rsk-pc-line, #E4E8EF);
  padding: 13px 20px; display: flex; flex-wrap: wrap; gap: 16px;
}
.rsk-pc-m-info { display: flex; flex-direction: column; gap: 2px; }
.rsk-pc-m-info b { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: #93A0B4; font-weight: 700; }
.rsk-pc-m-info span { font-size: 13.5px; font-weight: 700; color: #12336B; }
/* 3. le texte, qui defile si besoin */
.rsk-pc-m-corps { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; font-size: 14px; line-height: 1.68; color: #3C4A61; }
.rsk-pc-m-titre { font-size: 19px; font-weight: 800; color: #12336B; margin: 0 0 8px; }

/* Pendant la saisie, le corps de la fiche disparait. Sans cela il restait
   une bande de quelques pixels, avec sa propre barre de defilement : un
   residu de l'etape precedente, qui donnait l'impression d'un bug.
   🔴 MAIS le corps etait AUSSI la seule zone qui defilait (flex:1 + overflow
   auto). Le masquer sans passer le relais laissait le formulaire deborder
   d'une fenetre en overflow:hidden : bas du formulaire coupe, bouton de
   validation inatteignable, aucune barre de defilement. Bug livre en
   2.4.196, corrige en 2.4.197.
   REGLE : dans une colonne flex a hauteur bornee, il doit TOUJOURS rester
   exactement un enfant en `flex:1 1 auto; overflow-y:auto`. En masquer un,
   c'est designer son remplacant dans la meme regle. */
.rsk-pc-modal.est-formulaire .rsk-pc-m-corps { display: none; }
.rsk-pc-modal.est-formulaire .rsk-pc-m-pied {
  flex: 1 1 auto;
  min-height: 0;          /* sans lui, un enfant flex refuse de retrecir */
  overflow-y: auto;
  border-top: none;       /* le corps a disparu : plus rien a separer */
}

/* ── Ordinateur et tablette : gagner de la place SANS toucher a la photo ──
   Demande de Lovinsky le 21/09/2026 : ne pas avoir a defiler pour atteindre
   le bouton de validation.
   ⚠️ J'avais d'abord reduit la banniere a 108 px pendant la saisie. C'etait
   la mauvaise economie : avec `object-fit: cover`, reduire = ROGNER, et la
   photo se retrouvait coupee en plein visage (signale le 22/09/2026).
   La place se prend donc ailleurs : fenetre plus large et plus haute,
   bandeau et pied resserres. La banniere, elle, garde l'image entiere.
   Le defilement du pied reste le filet pour les fenetres basses. */
@media (min-width: 768px) {
  .rsk-pc-modal { width: min(620px, 100%); max-height: min(94vh, 960px); }
  .rsk-pc-modal.est-formulaire .rsk-pc-m-bandeau { padding-top: 10px; padding-bottom: 10px; }
  .rsk-pc-modal.est-formulaire .rsk-pc-m-pied { padding-top: 14px; }
}
.rsk-pc-m-corps img { max-width: 100%; height: auto; }
/* 4. le bouton, toujours visible */
.rsk-pc-m-pied { flex: none; padding: 14px 20px; border-top: 1px solid var(--rsk-pc-line, #E4E8EF); background: #fff; }

/* ── Formulaire d'inscription (2.4.185) ────────────────────────
   Le bouton « Reserver » n'envoie plus le visiteur ailleurs : il
   deplie ces champs, et c'est le SERVEUR qui decide ensuite ou
   aller (panier WooCommerce, ou confirmation immediate).
   Toutes ces classes sont produites par le JS : chacune a donc sa
   regle ici, sans exception - c'est le piege documente dans
   CLAUDE.md (une classe generee sans style se retrouve collee au
   bord de son conteneur, et tranchee par l'overflow). */
.rsk-pc-form { margin-top: 2px; }
/* Ligne de tete du formulaire : retour a gauche, intitule a cote. */
.rsk-pc-fhaut {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
}
.rsk-pc-ftitre {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--rsk-pc-ink, #12336B);
}
.rsk-pc-fretour {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--rsk-pc-line, #E4E8EF); border-radius: 999px;
  background: #fff; cursor: pointer;
  font: inherit; font-size: 12.5px; color: #5B6B84;
  transition: border-color .15s ease, color .15s ease;
}
.rsk-pc-fretour:hover { border-color: #C3CCDA; color: var(--rsk-pc-ink, #12336B); }
.rsk-pc-fretour:focus-visible { outline: 2px solid var(--rsk-pc-ink, #12336B); outline-offset: 2px; }

/* Demande expresse (droit de retractation). Ton neutre : c'est une
   mention legale, pas un avertissement. La dramatiser ferait hesiter au
   moment precis ou le visiteur valide. */
.rsk-pc-retract {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 14px; padding: 13px 15px;
  background: #F7F9FC; border: 1px solid var(--rsk-pc-line, #E4E8EF);
  border-radius: 12px; cursor: pointer;
  font-size: 12.5px; line-height: 1.6; color: #5B6B84;
  transition: border-color .15s ease, background .15s ease;
}
.rsk-pc-retract:hover { border-color: #CBD5E4; }
.rsk-pc-retract input[type="checkbox"] {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--rsk-pc-accent, #B28E4B); cursor: pointer;
}
.rsk-pc-retract-lien {
  display: inline-block; margin-top: 3px;
  color: var(--rsk-pc-ink, #12336B); text-decoration: underline;
}
/* Case oubliee : on la designe, sans bloc d'erreur supplementaire. */
.rsk-pc-retract.est-manquant {
  border-color: #C0392B; background: #FEF3F2; color: #3C4A61;
}

/* ── Etape de paiement par carte (2.4.198) ─────────────────────
   Le visiteur paie sans quitter la fenetre. Sobre volontairement :
   au moment de donner sa carte, tout ornement inquiete. */
.rsk-pc-payresume {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 15px; margin-bottom: 14px;
  background: #F7F9FC; border: 1px solid var(--rsk-pc-line, #E4E8EF);
  border-radius: 12px;
  font-size: 13.5px; color: #5B6B84;
}
.rsk-pc-payresume strong {
  font-size: 17px; font-weight: 800; color: var(--rsk-pc-ink, #12336B);
  white-space: nowrap;
}
/* Le champ carte est rendu par le module de paiement : on ne lui impose
   qu'une reserve de place, pour que la fenetre ne saute pas a l'arrivee. */
.rsk-pc-carte-champ { min-height: 150px; margin-bottom: 14px; }
.rsk-pc-attente {
  display: flex; align-items: center; justify-content: center;
  min-height: 150px; border-radius: 12px;
  background: #F7F9FC; border: 1px dashed var(--rsk-pc-line, #E4E8EF);
  font-size: 13px; color: var(--rsk-pc-muted, #6B7A93);
}
/* Paiement en cours : la fenetre se verrouille. Fermer ici encaisserait
   sans enregistrer la reservation. */
.rsk-pc-modal.est-paiement .rsk-pc-m-fermer {
  opacity: .35; pointer-events: none;
}
.rsk-pc-modal.est-paiement .rsk-pc-fretour { display: none; }
.rsk-pc-champs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 12px;
}
.rsk-pc-champ { min-width: 0; }
.rsk-pc-plein { grid-column: 1 / -1; }
.rsk-pc-champ label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--rsk-pc-muted, #6B7A93); margin-bottom: 5px;
}
/* 🔴 `box-sizing` OBLIGATOIRE. Sans lui, `width:100%` + 24px de padding +
   2px de bordure font un champ 26px PLUS LARGE que sa colonne : il mange
   la gouttiere et les deux champs se touchent. On ne peut pas compter sur
   le theme du site pour le poser -- c'est du CSS public, il doit tenir
   seul. (Signale par Lovinsky le 21/09/2026, visible sur olykan.) */
.rsk-pc-champ input {
  box-sizing: border-box;
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  color: var(--rsk-pc-ink, #12336B); background: #F7F9FC;
  border: 1px solid var(--rsk-pc-line, #E4E8EF); border-radius: 10px;
}
.rsk-pc-champ input:focus {
  outline: none; background: #fff;
  border-color: var(--rsk-pc-accent, #B28E4B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsk-pc-accent, #B28E4B) 22%, transparent);
}
/* Le message d'erreur ne prend de la place que lorsqu'il en a a dire. */
.rsk-pc-ferr {
  display: none; color: #C0392B; font-size: 12.5px; line-height: 1.45;
  margin-bottom: 10px;
}
.rsk-pc-ferr.est-visible { display: block; }
.rsk-pc-ok {
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
}
.rsk-pc-btn[disabled] { opacity: .85; }

/* Note reservee aux administrateurs (page de reservation manquante). */
.rsk-pc-note {
  margin: 0 0 12px; padding: 11px 14px;
  background: #FFF7E6; border: 1px solid #F0D9A8; border-left: 3px solid #B28E4B;
  border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: #6B5426;
}
.rsk-pc-note strong { color: #4A3A14; }

/* Requete de FENETRE, pas de conteneur : la fiche est posee sur <body>,
   donc hors du conteneur `rskpc`. Une regle @container n'y matcherait
   jamais - c'est le piege releve sur l'agenda le meme jour. */
@media (max-width: 420px) {
  .rsk-pc-champs { grid-template-columns: 1fr; }
}

/* La fenetre est posee sur <body> : aucun conteneur nomme au-dessus
   d'elle, donc les clamp() en cqi y seraient sans reference. On remet
   des tailles fixes pour tout ce qu'elle contient. */
.rsk-pc-modal .rsk-pc-btn {
  width: 100%; padding: 15px; font-size: 15.5px;
  white-space: normal; overflow: visible; text-overflow: clip;
}

@media (max-width: 480px) {
  .rsk-pc-voile { padding: 0; align-items: flex-end; }
  .rsk-pc-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rsk-pc-carte, .rsk-pc-btn, .rsk-pc-voile, .rsk-pc-modal { transition: none; }
  .rsk-pc[data-pulse="1"] .rsk-pc-dispo .rsk-pc-pastille::before,
  .rsk-pc[data-pulse="1"] .rsk-pc-dispo .rsk-pc-pastille::after { animation: none; display: none; }
}

/* ══ « Me prévenir » dans la fenêtre d'une séance ────── 2.4.231 ══

   Le FORMULAIRE vient du composant partagé (attente.css). Ici on lui
   donne seulement les couleurs du planning.

   🔴 La fenêtre vit sur <body> : elle ne reçoit que les tokens que
   le JS y recopie (--rsk-pc-r et --rsk-pc-accent). Chaque passage porte
   donc une valeur de repli -- un token absent rendrait le bouton
   transparent, sans erreur (piège n°6 des modales).

   Les anciennes règles .rsk-pc-att* (2.4.229) sont RETIRÉES : plus
   aucun code ne produit ces classes. */
.rsk-pc-modal {
  --rsk-att-accent: var(--rsk-pc-accent, #4F46E5);
  --rsk-att-r: var(--rsk-pc-r, 10px);
}