/* ═══════════════════════════════════════════════════════════════════
   Résaskill — bandeau « Les prochaines dates »
   Code court [resaskill_prochains] + widget Elementor `resaskill-prochains`.

   Vaut pour les ÉVÉNEMENTS comme pour les COURS & ATELIERS : en base ce
   sont les memes lignes datees de la table services, seul `type` change.

   ── Deux regles du projet qui dictent la structure de ce fichier ──

   1. `.rsk-pe` est le CONTENEUR de requete (`container-type`). Une
      requete de conteneur ne peut styler ni le conteneur lui-meme ni ses
      ancetres : toute regle `@container` qui viserait `.rsk-pe` serait
      SILENCIEUSEMENT MORTE (piege paye en 2.4.184). D'ou le panneau
      `.rsk-pe-panneau`, enfant : c'est lui qui porte le fond, le padding
      et l'arrondi, donc tout ce qui doit changer avec la largeur.
      Pour la meme raison `--rsk-pe-carte-l` est redefini sur
      `.rsk-pe-piste`, jamais sur `:root`.

   2. Les tokens portent des valeurs de repli partout ou ils servent.
      Le widget Elementor les ecrit sur `{{WRAPPER}} .rsk-pe` ; un token
      oublie sans repli ne produit aucune erreur, juste un fond
      transparent ou un texte invisible.
   ═══════════════════════════════════════════════════════════════════ */

.rsk-pe,
.rsk-pe *,
.rsk-pe *::before,
.rsk-pe *::after { box-sizing: border-box; }

.rsk-pe {
    /* Le bandeau se regle sur SA largeur, pas sur celle de l'ecran : un
       widget Elementor vit dans une colonne qui peut faire 420 px sur un
       ecran de 1920. */
    container-type: inline-size;
    container-name: rskpe;

    --rsk-pe-ink:       #12336B;
    --rsk-pe-muted:     #6B7A93;
    --rsk-pe-fond:      #FBF6EC;
    --rsk-pe-carte:     #FFFFFF;
    --rsk-pe-accent:    #C8922F;
    --rsk-pe-accent-fg: #FFFFFF;
    --rsk-pe-r:         18px;
    --rsk-pe-r-bloc:    22px;
    --rsk-pe-carte-l:   246px;
    --rsk-pe-gap:       16px;

    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.rsk-pe-panneau {
    background: var(--rsk-pe-fond, #FBF6EC);
    border-radius: var(--rsk-pe-r-bloc, 22px);
    padding: 18px;
}

.rsk-pe-inner {
    display: grid;
    grid-template-columns: minmax(190px, 248px) minmax(0, 1fr);
    gap: var(--rsk-pe-gap, 16px);
    align-items: stretch;
}

/* Sans bloc d'introduction, le rail prend toute la largeur. */
.rsk-pe-inner.sans-intro { grid-template-columns: minmax(0, 1fr); }

/* ── Le bloc d'introduction ───────────────────────────────────────── */
.rsk-pe-intro {
    background: var(--rsk-pe-carte, #FFFFFF);
    border-radius: var(--rsk-pe-r, 18px);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.rsk-pe-picto {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #F6EEDC;
    color: var(--rsk-pe-accent, #C8922F);
    flex: none;
}
@supports (background: color-mix(in srgb, red 5%, white)) {
    .rsk-pe-picto { background: color-mix(in srgb, var(--rsk-pe-accent, #C8922F) 14%, #fff); }
}
.rsk-pe-picto svg { width: 22px; height: 22px; }

.rsk-pe-titre {
    font-family: 'Bricolage Grotesque', Georgia, serif;
    font-size: clamp(19px, 2.4cqi, 25px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--rsk-pe-ink, #12336B);
    margin: 0;
}

.rsk-pe-sous {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--rsk-pe-muted, #6B7A93);
}

.rsk-pe-lien {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rsk-pe-ink, #12336B);
    text-decoration: none;
}
.rsk-pe-lien:hover { color: var(--rsk-pe-accent, #C8922F); }
.rsk-pe-lien svg { width: 15px; height: 15px; transition: transform .15s ease; }
.rsk-pe-lien:hover svg { transform: translateX(3px); }

/* ── Le rail ──────────────────────────────────────────────────────────
   Il DEFILE horizontalement : la hauteur du bandeau ne depend pas du
   nombre de dates. Quatre ou douze, meme bandeau. */
.rsk-pe-rail { position: relative; min-width: 0; }

.rsk-pe-piste {
    display: flex;
    gap: var(--rsk-pe-gap, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rsk-pe-piste::-webkit-scrollbar { display: none; }

/* Le rail est atteignable au clavier : fleches gauche/droite une fois
   qu'il a le focus, comme n'importe quelle zone defilante. */
.rsk-pe-piste:focus-visible {
    outline: 2px solid var(--rsk-pe-ink, #12336B);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Voile du bord : pose par le JS SEULEMENT quand il reste vraiment
   quelque chose a voir de ce cote-la. Un voile permanent annonce un
   contenu cache qui n'existe pas. */
.rsk-pe-rail::before,
.rsk-pe-rail::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.rsk-pe-rail::before {
    left: 0;
    background: linear-gradient(to left, rgba(251, 246, 236, 0), var(--rsk-pe-fond, #FBF6EC));
}
.rsk-pe-rail::after {
    right: 0;
    background: linear-gradient(to right, rgba(251, 246, 236, 0), var(--rsk-pe-fond, #FBF6EC));
}
.rsk-pe-rail.a-gauche::before,
.rsk-pe-rail.a-droite::after { opacity: 1; }

/* ── Les fleches de defilement ────────────────────────────────────────
   Un rail qui deborde sans moyen de le faire defiler est un contenu
   inatteignable a la souris (la molette ne defile pas horizontalement).
   Elles n'apparaissent QUE quand il reste quelque chose de ce cote. */
.rsk-pe-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--rsk-pe-carte, #FFFFFF);
    color: var(--rsk-pe-ink, #12336B);
    box-shadow: 0 3px 12px rgba(18, 51, 107, .18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity .18s ease, background .15s ease, color .15s ease;
}
.rsk-pe-nav svg { width: 16px; height: 16px; }
.rsk-pe-nav.est-gauche { left: 6px; }
.rsk-pe-nav.est-droite { right: 6px; }
.rsk-pe-rail.a-gauche .rsk-pe-nav.est-gauche,
.rsk-pe-rail.a-droite .rsk-pe-nav.est-droite { opacity: 1; visibility: visible; }
.rsk-pe-nav:hover {
    background: var(--rsk-pe-accent, #C8922F);
    color: var(--rsk-pe-accent-fg, #FFFFFF);
}
.rsk-pe-nav:focus-visible {
    outline: 2px solid var(--rsk-pe-ink, #12336B);
    outline-offset: 2px;
    opacity: 1;
    visibility: visible;
}

/* ── Une carte ────────────────────────────────────────────────────── */
.rsk-pe-carte {
    flex: 0 0 var(--rsk-pe-carte-l, 246px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--rsk-pe-carte, #FFFFFF);
    border-radius: var(--rsk-pe-r, 18px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}
a.rsk-pe-carte:hover, button.rsk-pe-carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(18, 51, 107, .10);
}
.rsk-pe-carte:focus-visible {
    outline: 2px solid var(--rsk-pe-ink, #12336B);
    outline-offset: 3px;
}

/* ── Le cadre de la photo ─────────────────────────────────────────────
   🔴 TOUTES LES PHOTOS DOIVENT FAIRE LA MEME TAILLE, quelle que soit
   celle du fichier d'origine. Le cadre impose le format, l'image le
   remplit en etant recadree -- jamais deformee, jamais redimensionnee
   vers le bas : `object-fit: cover` garde la pleine resolution.

   L'image est en POSITION ABSOLUE, et ce n'est pas un detail. Presque
   tous les themes WordPress posent `img { height: auto }` : avec une
   image en flux, cette seule regle annule notre `height: 100%`, l'image
   reprend sa hauteur naturelle, pousse le cadre, et les cartes se
   retrouvent avec des photos de hauteurs differentes -- exactement ce que
   montrait la capture du 01/10/2026. En absolu, `inset: 0` fixe les
   quatre cotes : `height: auto` n'a plus rien a decider.
   Et on n'ecrit pas `!important` : on retire la prise, on ne se bat pas. */
.rsk-pe-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--rsk-pe-ratio, 16 / 10);
    background: #E7EDF4;
    overflow: hidden;
    line-height: 0;
    flex: none;
}
/* Repli pour les navigateurs sans aspect-ratio (Safari < 15) : sans lui
   le cadre s'ecrase a zero et la pastille se pose dans le vide. */
@supports not (aspect-ratio: 16 / 10) {
    .rsk-pe-photo { height: 0; padding-bottom: 62.5%; }
}
.rsk-pe-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

/* Pas de photo sur la fiche : un aplat discret plutot qu'un trou blanc,
   pour que la carte garde exactement la meme hauteur que ses voisines. */
.rsk-pe-photo.est-vide {
    background: linear-gradient(135deg, #EDF2F7 0%, #E2E8F0 100%);
}

/* La pastille de date chevauche le bas de la photo : c'est elle qui
   donne son caractere a la carte. Le corps lui reserve sa place. */
.rsk-pe-date {
    position: absolute;
    left: 12px;
    bottom: -14px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 24px);
    height: 28px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--rsk-pe-carte, #FFFFFF);
    color: var(--rsk-pe-ink, #12336B);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(18, 51, 107, .13);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rsk-pe-corps {
    /* 24 en haut : la pastille deborde de 14 px, il lui faut sa place. */
    padding: 24px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
}

.rsk-pe-nom {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rsk-pe-ink, #12336B);
    /* Deux lignes au plus, puis on coupe proprement. Jamais de hauteur
       fixe : c'est la ligne du bas qui sauterait (piege §7). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rsk-pe-masquee {
    font-weight: 600;
    font-size: 11.5px;
    color: #B45309;
}

.rsk-pe-bas {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
}

.rsk-pe-lieu {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--rsk-pe-muted, #6B7A93);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rsk-pe-lieu svg { flex: none; width: 13px; height: 13px; }

.rsk-pe-fleche {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #F6EEDC;
    color: var(--rsk-pe-accent, #C8922F);
    transition: background .15s ease, color .15s ease;
}
@supports (background: color-mix(in srgb, red 5%, white)) {
    .rsk-pe-fleche { background: color-mix(in srgb, var(--rsk-pe-accent, #C8922F) 16%, #fff); }
}
.rsk-pe-fleche svg { width: 15px; height: 15px; }
a.rsk-pe-carte:hover .rsk-pe-fleche,
button.rsk-pe-carte:hover .rsk-pe-fleche {
    background: var(--rsk-pe-accent, #C8922F);
    color: var(--rsk-pe-accent-fg, #FFFFFF);
}

.rsk-pe-complet {
    flex: none;
    padding: 5px 10px;
    border-radius: 999px;
    background: #FEE2E2;
    color: #991B1B;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.rsk-pe-vide {
    margin: 0;
    padding: 26px 4px;
    font-size: 14px;
    color: var(--rsk-pe-muted, #6B7A93);
}

/* Messages reserves a l'administrateur connecte. */
.rsk-pe-note {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Paliers de CONTENEUR ─────────────────────────────────────────────
   Ils ne visent que des DESCENDANTS de `.rsk-pe` : viser `.rsk-pe` ou
   `:root` donnerait une regle morte sans le moindre avertissement. */
@container rskpe (max-width: 720px) {
    .rsk-pe-inner { grid-template-columns: minmax(0, 1fr); }
    .rsk-pe-intro { padding: 16px 18px; }
    .rsk-pe-titre { font-size: 20px; }
}
@container rskpe (max-width: 420px) {
    .rsk-pe-panneau { padding: 14px; }
    .rsk-pe-piste   { --rsk-pe-carte-l: 210px; }
}

/* Palier d'APPAREIL, en complement : il reste le choix de l'utilisateur,
   la requete de conteneur est le filet. */
@media (max-width: 560px) {
    .rsk-pe-carte { flex-basis: min(78cqi, 260px); }
}

/* Un visiteur qui a demande moins d'animation en obtient moins. */
@media (prefers-reduced-motion: reduce) {
    .rsk-pe-piste { scroll-behavior: auto; }
    .rsk-pe-carte,
    .rsk-pe-fleche,
    .rsk-pe-lien svg { transition: none; }
    a.rsk-pe-carte:hover, button.rsk-pe-carte:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   La carte en <button> — quand aucune page de reservation n'existe
   ═══════════════════════════════════════════════════════════════════
   En mode « fenetre » la carte clique quand meme : le tunnel est
   embarque dans la page. Faute de lien, la balise est un <button>, qui
   apporte ses propres marges, bordure, fond, police et texte centre.
   Sans cette remise a zero, cette carte-la serait plus etroite que ses
   voisines et son contenu centre. */
button.rsk-pe-carte {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   La fenetre de reservation
   ═══════════════════════════════════════════════════════════════════
   Elle vit sur <body>, DEPLACEE la par le JS : un `position: fixed` se
   recale sur le premier ancetre portant transform / filter /
   will-change, et Elementor en pose un des qu'une animation d'entree
   est activee sur le conteneur. Sans ce deplacement, la fenetre
   s'ancrerait au bloc, pas a l'ecran.

   🔴 Corollaire : elle n'herite plus des tokens poses sur `.rsk-pe`.
   Le JS les recopie, mais CHAQUE var(--rsk-pe-*) doit porter une
   valeur de repli -- un token oublie donnerait une fenetre
   transparente, sans la moindre erreur. Meme famille que le piege
   n°6 des modales. */
.rsk-pe-modale[hidden] { display: none; }

.rsk-pe-modale {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.rsk-pe-voile {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 40, .55);
    /* Pas de fermeture au clic : voir la croix ci-dessous. */
}

.rsk-pe-fenetre {
    position: relative;
    width: min(980px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--rsk-pe-carte, #FFFFFF);
    border-radius: var(--rsk-pe-r-bloc, 22px);
    box-shadow: 0 24px 60px rgba(9, 20, 40, .28);
    overflow: hidden;
    box-sizing: border-box;
}

/* 🔴 Exactement UN enfant en flex:1 + overflow-y:auto dans une colonne
   flex a hauteur bornee. Sans lui, le bas du tunnel serait coupe par
   l'`overflow:hidden` de la fenetre, bouton de paiement compris, et
   aucune barre de defilement ne permettrait de s'en sortir. */
.rsk-pe-corps {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.rsk-pe-croix {
    position: absolute;
    top: 10px; right: 12px;
    z-index: 2;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid var(--rsk-pe-line, #E4E8EF);
    border-radius: 50%;
    background: var(--rsk-pe-carte, #FFFFFF);
    color: var(--rsk-pe-ink, #12336B);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    padding: 0;
}
.rsk-pe-croix:hover { background: #F1F5F9; }
.rsk-pe-croix:focus-visible {
    outline: 2px solid var(--rsk-pe-ink, #12336B);
    outline-offset: 2px;
}

/* La page derriere ne defile plus tant que la fenetre est ouverte. */
html.rsk-pe-fige, html.rsk-pe-fige body { overflow: hidden; }

/* ══ « Me prévenir » sur une séance complète ────────── 2.4.231 ══

   La carte devient un <button> : le survol doit le montrer, sinon la
   pastille promet une action que personne ne voit (règle du §7 :
   ce qui a l'air cliquable doit l'être, et inversement). */
.rsk-pe-complet.est-attente {
    transition: background .15s ease, color .15s ease;
}
button.rsk-pe-carte:hover .rsk-pe-complet.est-attente,
button.rsk-pe-carte:focus-visible .rsk-pe-complet.est-attente {
    background: #991B1B;
    color: #fff;
}