/*
  Studio 36 — Page Tarifs (design.md §10). Cartes-colonnes par studio +
  tableau comparatif toujours visible en dessous (plus de toggle : le
  comparatif est un contenu de la page, pas une vue alternative masquee).
*/

.pricing-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

/* ---------- Cartes (design.md §10.2) ---------- */

.pricing-cards__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* Exactement 3 colonnes : 3 studios au total (Studio::activeOnly()). */
  .pricing-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
  Carte "offre" plutot que carte "tableau de prix" : photo reelle du studio
  en tete (accroche visuelle, la meme matiere que le reste du site), puis un
  bandeau des 3 durees en mini-colonnes (comparaison en un coup d'oeil, la
  duree recommandee "allumee" en ambre) plutot que 3 lignes empilees qui
  pesaient toutes pareil visuellement.
*/
.pricing-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --studio-color: var(--accent);
  transition: transform var(--duration-standard) var(--ease-out),
              border-color var(--duration-standard) var(--ease-out),
              box-shadow var(--duration-standard) var(--ease-out);
}

/* Halo dans la couleur signature du studio (pas un rouge/or generique) : la
   carte "s'allume" au survol dans sa propre teinte, comme un canal de regie
   qu'on active. */
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--studio-color) 45%, transparent);
}

.pricing-card--plateau-show { --studio-color: var(--studio-plateau-show); }
.pricing-card--brique-room { --studio-color: var(--studio-brique-room); }
.pricing-card--blue-room { --studio-color: var(--studio-blue-room); }

.pricing-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
}

.pricing-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-expressive) var(--ease-out);
}

.pricing-card__photo:hover .pricing-card__photo-img {
  transform: scale(1.05);
}

.pricing-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 6, 7, 0.85), transparent 55%);
}

.pricing-card__photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: var(--studio-color);
}

.pricing-card__photo-label {
  position: absolute;
  z-index: 2;
  left: var(--space-5);
  bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4-size);
  color: var(--text-primary);
}

.pricing-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}

.pricing-card__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  /* Pas d'overflow:hidden ici (contrairement au premier jet) : le badge
     "Populaire" doit pouvoir deborder par-dessus le bord superieur. Les
     coins arrondis sont donc portes par les cellules extremes plutot que
     par le conteneur. */
}

.pricing-card__tier:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.pricing-card__tier:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pricing-card__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "en bas" : les 3 cellules occupent deja la meme hauteur (grid stretch),
     le contenu est cale sur le bas plutot qu'en haut pour que les 3 prix
     restent alignes sur la meme ligne, meme quand la cellule "Populaire"
     est plus haute (badge en plus) ou qu'un libelle passe sur 2 lignes
     ("Journee de production"). */
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2) var(--space-3);
  background: var(--surface-1);
  text-align: center;
}

.pricing-card__tier--best {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}

.pricing-card__tier-flag {
  /* Ruban centre sur la bordure superieure de sa cellule (pattern standard,
     safe maintenant que .pricing-card__strip n'a plus d'overflow:hidden). */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.pricing-card__tier-label {
  color: var(--text-muted);
}

.pricing-card__tier-price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-h5-size);
  color: var(--text-primary);
}

.pricing-card__tier--best .pricing-card__tier-price {
  color: var(--accent);
}

.pricing-card__tier-vat {
  font-family: var(--font-body);
  font-size: var(--text-micro-size);
  font-weight: 400;
  color: var(--text-muted);
}

.pricing-card__tier-duration {
  margin-top: 2px;
  font-size: var(--text-micro-size);
  color: var(--text-muted);
}

.pricing-card__included {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-3);
}

.pricing-card__included li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}

.pricing-card__included svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
}

.pricing-card__cta {
  margin-top: auto;
  width: 100%;
}

/* ---------- Page studio individuelle : 3 cartes tarif (design.md §9.1.7/§10.2) ---------- */

.studio-pricing-cards {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .studio-pricing-cards {
    /* stretch (valeur par defaut de la grille) plutot que start : les 3
       cartes doivent occuper exactement la meme hauteur, quel que soit le
       nombre de lignes de texte de chacune (ex. la carte 2h n'a pas
       d'encart "Economisez", elle serait sinon nettement plus basse). */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Carte pensee comme une "tranche de console" de regie (design.md §1 —
   concept "Cinematic Control Room") : contenu aligne a gauche et separe par
   des filets fins plutot qu'une carte marketing centree classique ; la carte
   recommandee est "allumee" (liseré + fond ambre tres discret + halo) a la
   maniere d'un canal actif, les deux autres restent "eteintes" (neutres). */
.studio-pricing-cards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.studio-pricing-cards__card--best {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
  box-shadow: 0 0 32px var(--accent-glow-strong);
}

.studio-pricing-cards__badge {
  position: absolute;
  top: 0;
  left: var(--space-5);
  /* Repose sur le liseré gauche de la carte "allumee" (pattern "ruban"),
     plutot que centree sur toute la largeur : coherent avec le contenu
     desormais aligne a gauche. */
  transform: translateY(-50%);
  z-index: 1;
  white-space: nowrap;
  background: var(--surface-1);
  border: 1px solid var(--accent);
  color: var(--text-primary);
}

.studio-pricing-cards__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.studio-pricing-cards__price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

.studio-pricing-cards__price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-h2-size);
  color: var(--text-primary);
  line-height: 1;
}

/* "Economisez" en badge plutot qu'en texte brut : lecture plus rapide,
   registre "bonne affaire" plus marque (fond succes discret). */
.studio-pricing-cards__saving {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  background: var(--success-soft);
  color: var(--success);
}

.studio-pricing-cards__compared {
  color: var(--text-muted);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}

.studio-pricing-cards__included {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

.studio-pricing-cards__included-label {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.studio-pricing-cards__included ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}

.studio-pricing-cards__included li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.studio-pricing-cards__included svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

.studio-pricing-cards__cta {
  /* Pousse le CTA en bas de chaque carte, meme quand une carte voisine a
     plus de contenu (encart "Economisez") : les 3 boutons restent alignes
     sur la meme ligne quelle que soit la hauteur du texte au-dessus. */
  margin-top: auto;
  width: 100%;
}

/* ---------- Comparateur (design.md §10.3) ---------- */

/* Toujours visible sous les cartes (plus de toggle) : filet + espacement
   genereux pour marquer clairement le debut d'un nouveau bloc de contenu
   plutot qu'un tableau qui s'enchainerait brutalement apres les cartes. */
.pricing-cards__footnote {
  margin-top: var(--space-5);
  color: var(--text-muted);
}

.pricing-compare {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-hairline);
}

.pricing-compare h2 {
  margin-bottom: var(--space-6);
}

/* Le tableau est encadre comme un vrai panneau (fond + bordure + coins
   arrondis) plutot que pose nu sur le fond de la section — coherent avec
   le reste du site ou toute donnee tabulaire vit dans une carte. */
.pricing-compare__scroll {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.pricing-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.pricing-compare th,
.pricing-compare td {
  padding: var(--space-4) var(--space-5);
  text-align: right;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.pricing-compare thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h5-size);
  color: var(--text-primary);
}

.pricing-compare thead th:first-child {
  text-align: left;
}

/* Liseré couleur signature du studio en tete de colonne : relie visuellement
   le tableau aux cartes juste au-dessus, meme motif que le reste du site. */
.pricing-compare__studio {
  position: relative;
  --studio-color: var(--accent);
}

.pricing-compare__studio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--studio-color);
}

.pricing-compare__studio--plateau-show { --studio-color: var(--studio-plateau-show); }
.pricing-compare__studio--brique-room { --studio-color: var(--studio-brique-room); }
.pricing-compare__studio--blue-room { --studio-color: var(--studio-blue-room); }

.pricing-compare th[scope="row"] {
  text-align: left;
  font-family: var(--font-body);
  color: var(--text-secondary);
  position: sticky;
  left: 0;
  background: var(--surface-1);
}

/* Cellule "meilleur rapport duree/prix" reelle (sprice_is_best_value) :
   distinguee par la couleur du texte uniquement, sans fond surligne. */
.pricing-compare td.pricing-compare__cell--best {
  color: var(--accent);
  font-weight: 500;
}

.pricing-compare tbody tr {
  transition: background var(--duration-standard) var(--ease-out);
}

.pricing-compare tbody tr:hover {
  background: var(--surface-2);
}

.pricing-compare tbody tr:last-child th,
.pricing-compare tbody tr:last-child td {
  border-bottom: none;
}

/* Sous 768px : une carte par duree (Session 2h/4h/Journee) plutot qu'un
   tableau a defiler horizontalement — meme approche que .studios-compare
   (studios.css) et .equipment-table (content.css), un <td data-label="..">
   par studio redessine en ligne libelle/valeur. */
@media (max-width: 767px) {
  .pricing-compare__scroll {
    overflow-x: visible;
  }

  .pricing-compare table {
    min-width: 0;
  }

  .pricing-compare thead {
    display: none;
  }

  .pricing-compare tbody tr {
    display: block;
    padding: var(--space-4) var(--space-5);
  }

  .pricing-compare th[scope="row"],
  .pricing-compare td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: none;
    position: static;
    background: none;
  }

  .pricing-compare th[scope="row"] {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-hairline);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .pricing-compare td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-muted);
  }
}

/* ---------- Construisez votre production (design.md §10.4) ---------- */

.pricing-build__group {
  margin-top: var(--space-7);
}

.pricing-build__group:first-of-type {
  margin-top: var(--space-6);
}

.pricing-build__group-label {
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.pricing-build__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 600px) {
  .pricing-build__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing-build__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.pricing-option-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.pricing-option-card__icon svg {
  width: 24px;
  height: 24px;
}

.pricing-option-card__description {
  color: var(--text-secondary);
}

.pricing-option-card__mode {
  color: var(--accent);
  margin-top: auto;
  padding-top: var(--space-2);
}

.pricing-option-card__cta {
  margin-top: var(--space-2);
}

.pricing-build__note {
  margin-top: var(--space-6);
}