/* ══════════════════════════════════════════════════════════════
   Cartes de prestations  -  [resaskill_cartes] / widget « Cartes »
   ══════════════════════════════════════════════════════════════

   Calquee sur « WS - Table de prix » (ws-booster) : memes positions de
   pastille, memes modes de photo, meme vocabulaire de reglages.

   TROIS REGLES DEJA PAYEES SUR CE PROJET :

   1. Requete de CONTENEUR, pas paliers d'ecran. Le bloc vit dans une
      colonne qui peut faire 320 px sur un ecran de 1920.
   2. Aucune hauteur fixe. Les cartes s'egalisent par la grille, le pied
      se colle en bas par `margin-top: auto`. Un `height` + `overflow`
      ampute toujours le bouton.
   3. Tout token porte une VALEUR DE REPLI : la carte peut se retrouver
      hors de portee des variables, et un fond transparent fait
      disparaitre le bouton sans la moindre erreur.
*/

.rsk-ct {
  /* ── Tokens. Surchargeables par le widget (selecteurs Elementor),
        « Design formulaire » et l'emplacement. ── */
  --rsk-ct-acc: #C93622;
  --rsk-ct-acc-doux: #FDF0EC;
  --rsk-ct-fg: #1C1917;
  --rsk-ct-fg2: #57534E;
  --rsk-ct-fg3: #8A827C;
  --rsk-ct-bg: #FFFFFF;
  --rsk-ct-bg2: #FAF8F6;
  --rsk-ct-line: #E7E2DD;
  --rsk-ct-r: 18px;
  --rsk-ct-gap: 22px;
  --rsk-ct-min: 260px;
  --rsk-ct-align: center;
  --rsk-ct-liste-align: flex-start;
  --rsk-ct-amplitude: 3;
  --rsk-ct-coche-taille: 20px;
  --rsk-ct-exclue-op: .5;
  --rsk-ct-photo-h: 170px;
  --rsk-ct-photo-taille: 110px;
  --rsk-ct-photo-debord: 46px;
  --rsk-ct-photo-r: 14px;
  --rsk-ct-photo-pos: center;
  --rsk-ct-photo-espace: 16px;
  --rsk-ct-ombre: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 32px -12px rgba(28, 25, 23, .18);

  container-type: inline-size;
  container-name: rskct;
  display: grid;
  gap: var(--rsk-ct-gap, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rsk-ct-min, 260px)), 1fr));
  align-items: stretch;
  min-width: 0;
}

/* Le code court n'a pas de contrôle responsive : il plafonne les colonnes
   par un attribut, la grille retombant d'elle-même en dessous.

   🔴 La requête interroge l'HÔTE (.rsk-ct-hote), pas .rsk-ct : une requête de
   conteneur ne peut pas styler son propre conteneur. Jusqu'à la 2.4.245 elle
   interrogeait .rsk-ct et visait .rsk-ct : règle morte, `colonnes` sans effet. */
.rsk-ct-hote { container-type: inline-size; container-name: rskcthote; min-width: 0; }
.rsk-ct[data-colonnes="1"] { grid-template-columns: minmax(0, 1fr); }
@container rskcthote (min-width: 760px) {
  .rsk-ct[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsk-ct[data-colonnes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsk-ct[data-colonnes="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsk-ct[data-theme="sombre"] {
  --rsk-ct-acc: #7C6BF5;
  --rsk-ct-acc-doux: #242E4A;
  --rsk-ct-fg: #F5F3F1;
  --rsk-ct-fg2: #B9B2AC;
  --rsk-ct-fg3: #8A827C;
  --rsk-ct-bg: #141C2E;
  --rsk-ct-bg2: #1B2438;
  --rsk-ct-line: #2A3550;
  --rsk-ct-ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6);
}

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

/* Un thème peut imposer une coupure de mot agressive : on la neutralise. */
.rsk-ct.rsk-ct.rsk-ct * {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ── La carte ── */
.rsk-ct-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--rsk-ct-bg, #fff);
  border: 1px solid var(--rsk-ct-line, #E7E2DD);
  border-radius: var(--rsk-ct-r, 18px);
  box-shadow: var(--rsk-ct-ombre, 0 12px 32px -12px rgba(0, 0, 0, .18));
  container-type: inline-size;
  container-name: rskcarte;
  transition: transform .18s ease, border-color .18s ease;
  text-align: var(--rsk-ct-align, center);
}

/* 🔴 LA CARTE NE DECOUPE JAMAIS. C'est la photo qui porte son propre
   `overflow` et son arrondi. Un `overflow: hidden` sur la carte tranchait
   la pastille « en haut » — qui chevauche le bord par construction, comme
   sur la table de prix. Vu a l'ecran le 28/09/2026 alors que ma mesure
   passait : je m'etais accorde 22 px de tolerance au-dessus du bord, donc
   le test validait precisement ce qui etait casse.
   Le ruban diagonal, lui, a besoin d'un decoupage : il porte le sien
   (`clip-path`), qui ne depend d'aucun parent. */
.rsk-ct-carte { overflow: visible; }

/* De la place pour une pastille qui chevauche le bord haut. */
.rsk-ct { padding-top: 16px; }
.rsk-ct[data-photo="debord"] { padding-top: var(--rsk-ct-photo-debord, 46px); }

@media (prefers-reduced-motion: reduce) {
  .rsk-ct-carte { transition: none; }
}

.rsk-ct-survol-souleve .rsk-ct-carte:hover { transform: translateY(calc(var(--rsk-ct-amplitude, 3) * -1px)); }
.rsk-ct-survol-zoom .rsk-ct-carte:hover { transform: scale(calc(1 + var(--rsk-ct-amplitude, 3) / 100)); }
.rsk-ct-carte:hover { border-color: color-mix(in srgb, var(--rsk-ct-acc, #C93622) 40%, var(--rsk-ct-line, #E7E2DD)); }
.rsk-ct-carte.est-avant { border-color: var(--rsk-ct-acc, #C93622); border-width: 1.5px; }

/* ══ La pastille, sept positions ══ */
.rsk-ct-pastille {
  position: absolute;
  z-index: 3;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--rsk-ct-acc, #C93622);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
}

.rsk-ct-carte[data-pastille="haut-centre"] .rsk-ct-pastille { top: 0; left: 50%; transform: translate(-50%, -50%); }
.rsk-ct-carte[data-pastille="haut-gauche"] .rsk-ct-pastille { top: 0; left: 18px; transform: translateY(-50%); }
.rsk-ct-carte[data-pastille="haut-droite"] .rsk-ct-pastille { top: 0; right: 18px; transform: translateY(-50%); }
.rsk-ct-carte[data-pastille="coin-droite"] .rsk-ct-pastille { top: 12px; right: 12px; }
.rsk-ct-carte[data-pastille="coin-gauche"] .rsk-ct-pastille { top: 12px; left: 12px; }

/* Le ruban diagonal porte SON PROPRE découpage : il ne dépend plus de
   l'`overflow` de la carte, qui est absent en mode « photo qui dépasse ».
   Premier essai raté le 27/09 : un décalage en pourcentage sortait le
   texte de la carte, où il se faisait trancher. */
.rsk-ct-carte[data-pastille^="ruban-"] {
  --rsk-ct-ruban: 1;
}
.rsk-ct-carte[data-pastille^="ruban-"] .rsk-ct-pastille {
  top: 22px;
  width: 200px;
  padding: 6px 0;
  border-radius: 0;
  text-align: center;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35);
}
.rsk-ct-carte[data-pastille="ruban-droite"] .rsk-ct-pastille { right: -58px; transform: rotate(45deg); }
.rsk-ct-carte[data-pastille="ruban-gauche"] .rsk-ct-pastille { left: -58px; transform: rotate(-45deg); }
/* La carte ne decoupe plus : c'est le ruban qui impose le sien, et lui
   seul. `clip-path` sur la carte suffit -- il s'applique a tout son
   contenu, y compris la bande qui depasse. */
.rsk-ct-carte[data-pastille^="ruban-"] {
  clip-path: inset(0 round var(--rsk-ct-r, 18px));
}

/* Les pastilles d'angle et de ruban mordent sur la première ligne. */
.rsk-ct-carte[data-pastille="coin-droite"] .rsk-ct-corps > :first-child,
.rsk-ct-carte[data-pastille="ruban-droite"] .rsk-ct-corps > :first-child { padding-right: 76px; }
.rsk-ct-carte[data-pastille="coin-gauche"] .rsk-ct-corps > :first-child,
.rsk-ct-carte[data-pastille="ruban-gauche"] .rsk-ct-corps > :first-child { padding-left: 76px; }

/* ══ La photo ══ */
.rsk-ct-visuel { overflow: hidden; }
.rsk-ct-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--rsk-ct-photo-pos, center);
  display: block;
}

.rsk-ct[data-photo="banniere"] .rsk-ct-visuel {
  height: var(--rsk-ct-photo-h, 170px);
  /* La carte ne decoupe plus : la banniere epouse elle-meme les angles
     hauts de la carte, sinon elle deborderait de l'arrondi. */
  border-radius: calc(var(--rsk-ct-r, 18px) - 1px) calc(var(--rsk-ct-r, 18px) - 1px) 0 0;
}
.rsk-ct[data-photo="banniere"] .rsk-ct-carte.a-photo .rsk-ct-corps { padding-top: var(--rsk-ct-photo-espace, 16px); }

.rsk-ct[data-photo="debord"] .rsk-ct-visuel {
  width: var(--rsk-ct-photo-taille, 110px);
  height: var(--rsk-ct-photo-taille, 110px);
  margin: calc(var(--rsk-ct-photo-debord, 46px) * -1) auto 0;
  border-radius: var(--rsk-ct-photo-r, 14px);
  border: 3px solid var(--rsk-ct-bg, #fff);
  position: relative;
  z-index: 2;
}
.rsk-ct[data-photo="debord"] .rsk-ct-carte.a-photo .rsk-ct-corps { padding-top: var(--rsk-ct-photo-espace, 16px); }

/* ══ Le corps ══ */
.rsk-ct-corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 14px;
  padding: 26px 22px 22px;
  min-width: 0;
}
.rsk-ct-carte.est-avant:not(.a-photo) > .rsk-ct-corps { padding-top: 34px; }

.rsk-ct-type {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rsk-ct-acc, #C93622);
}

.rsk-ct-nom {
  margin: 0;
  font-size: clamp(18px, 6cqi, 22px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--rsk-ct-fg, #1C1917);
}

.rsk-ct-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rsk-ct-fg2, #57534E);
}

/* ══ Le prix ══ */
.rsk-ct-prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  justify-content: var(--rsk-ct-align, center);
}
.rsk-ct-prix b {
  font-size: clamp(30px, 11cqi, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rsk-ct-fg, #1C1917);
}
.rsk-ct-prix span { font-size: 15px; font-weight: 600; color: var(--rsk-ct-fg2, #57534E); }
.rsk-ct-prix small { font-size: 13px; color: var(--rsk-ct-fg3, #8A827C); }
.rsk-ct-prix-barre { font-size: 16px; color: var(--rsk-ct-fg3, #8A827C); }

/* La devise en exposant, comme sur la maquette. */
.rsk-ct-devise-haut .rsk-ct-prix span { align-self: flex-start; font-size: 17px; }

/* Pastilles d'infos (duree, lieu). 2.4.241 : MEME LARGEUR pour toutes,
   celle de la plus longue. Le conteneur interieur est une grille en ligne a
   colonnes `1fr` : sans largeur imposee, chaque colonne prend la largeur du
   contenu le plus long. Plafonnee a la carte, elle retrecit a parts egales et
   le texte se tronque proprement. « Même largeur : non » rend le flux libre. */
.rsk-ct-meta { display: flex; justify-content: var(--rsk-ct-align, center); min-width: 0; }
.rsk-ct-meta-in {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--rsk-ct-tags-gap, 7px);
  max-width: 100%;
}
.rsk-ct-tags-egales-non .rsk-ct-meta-in { display: inline-flex; flex-wrap: wrap; justify-content: inherit; }
.rsk-ct-tag {
  display: block;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 11px;
  border: 1px solid var(--rsk-ct-line, #E7E2DD);
  border-radius: 999px;
  background: var(--rsk-ct-bg2, #FAF8F6);
  color: var(--rsk-ct-fg2, #57534E);
  font-size: 12.5px;
  font-weight: 600;
}

/* ══ Ligne de tête ══ */
.rsk-ct-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--rsk-ct-line, #E7E2DD);
  border-bottom: 1px solid var(--rsk-ct-line, #E7E2DD);
  font-size: 13.5px;
  color: var(--rsk-ct-fg2, #57534E);
  justify-content: var(--rsk-ct-liste-align, flex-start);
  text-align: left;
}
.rsk-ct-tete-ico {
  width: 16px; height: 16px; flex: 0 0 auto;
  stroke: var(--rsk-ct-acc, #C93622); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══ La liste ══ */
.rsk-ct-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  justify-items: var(--rsk-ct-liste-align, flex-start);
}
.rsk-ct-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rsk-ct-fg2, #57534E);
}
.rsk-ct-points li.est-avant { font-weight: 700; color: var(--rsk-ct-fg, #1C1917); }
.rsk-ct-points li.est-exclue { opacity: var(--rsk-ct-exclue-op, .5); }
.rsk-ct-points li.est-exclue .rsk-ct-ligne-texte { text-decoration: line-through; }

.rsk-ct-ligne-texte { flex: 1 1 auto; min-width: 0; }
.rsk-ct-ligne-valeur { flex: 0 0 auto; font-weight: 700; color: var(--rsk-ct-fg, #1C1917); }

.rsk-ct-coche {
  flex: 0 0 auto;
  width: var(--rsk-ct-coche-taille, 20px);
  height: var(--rsk-ct-coche-taille, 20px);
  margin-top: 1px;
  border-radius: 50%;
  background: var(--rsk-ct-acc-doux, #FDF0EC);
  display: grid;
  place-items: center;
}
.rsk-ct-coche svg {
  width: 58%;
  height: 58%;
  stroke: var(--rsk-ct-acc, #C93622);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rsk-ct-coche i, .rsk-ct-coche svg.e-font-icon-svg { font-size: 11px; color: var(--rsk-ct-acc, #C93622); }

/* ══ Le pied ══
   En bas par défaut : `margin-top: auto` colle le bouton au bas de la
   carte, donc les boutons s'alignent d'une carte à l'autre. En haut, il
   suit le prix et ne doit surtout PAS pousser. */
.rsk-ct-pied { margin-top: auto; padding-top: 6px; display: flex; justify-content: var(--rsk-ct-align, center); }
.rsk-ct-pied.est-haut { margin-top: 0; padding-top: 0; }

.rsk-ct-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--rsk-ct-acc, #C93622);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.rsk-ct-btn:hover,
.rsk-ct-btn:focus-visible { filter: brightness(1.07); color: #fff; text-decoration: none; }
.rsk-ct-btn svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; stroke-width: 2.2; fill: none; }

.rsk-ct-complet {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 1px dashed var(--rsk-ct-line, #E7E2DD);
  border-radius: 999px;
  background: var(--rsk-ct-bg2, #FAF8F6);
  color: var(--rsk-ct-fg3, #8A827C);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
}

/* Message réservé à l'administrateur : jamais servi à un visiteur. */
.rsk-ct-note {
  /* HORS de la grille depuis la 2.4.241 (voir rendre_cartes). */
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  background: #F8FAFC;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════
   Fenêtre de réservation (bouton réglé sur « fenêtre »)
   ══════════════════════════════════════════════════════════════
   Elle vit sur <body>, donc HORS de la racine du widget : aucun token
   `--rsk-ct-*` ne l'atteint. Tout est écrit en dur ici — c'est le piège
   n°6 des widgets, payé deux fois. */
.rsk-ct-voile {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 18, 26, .62);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rsk-ct-voile.est-ouverte { display: flex; }

.rsk-ct-modale {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: auto;
}

.rsk-ct-fermer {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1C1917;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
}
.rsk-ct-fermer svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
}

.rsk-ct-modale-corps { min-width: 0; }

body.rsk-ct-fige { overflow: hidden; }

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

   Le libellé « Complet » reste visible, et le bouton passe en version
   déchaînée (contour) : il ne doit pas se faire passer pour un bouton
   de réservation, puisqu'on ne réserve rien. */
.rsk-ct-btn.est-attente {
  background: transparent;
  color: var(--rsk-ct-acc, #4F46E5);
  border: 1px solid currentColor;
  margin-top: 8px;
}

.rsk-ct-btn.est-attente:hover {
  background: var(--rsk-ct-acc, #4F46E5);
  color: #fff;
}