/* ============================================
   TRIKROMI — Page Tarifs
   Réutilise style.css / creativ.css / direction-artistique.css.
   Spécificités : cartes de tarifs, bloc accompagnement, liste infos.
   ============================================ */

/* ---------- BLOC INTRO 2 COLONNES : aligné sur la largeur du titre ----------
   Scopé .page-tarifs pour ne pas impacter studio / direction-artistique
   (composant partagé). Le titre "Location studio photo" (font 7.6vw) a une
   marge constante de 15.7% de chaque côté ; on cale les 2 blocs de texte
   exactement sur ces bords pour qu'ils soient aussi larges que le titre. */
.page-tarifs .cr-intro2col {
  padding-left: 15.7vw;
  padding-right: 15.7vw;
}
/* Sur mobile le bloc passe en 1 colonne (≤900px) : on rend la marge normale
   pour ne pas écraser le texte. */
@media (max-width: 900px) {
  .page-tarifs .cr-intro2col {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* ---------- CARTES DE TARIFS ---------- */
.tarifs {
  width: 100%;
  padding: clamp(50px, 5.5vw, 105px) var(--page-margin) 0;
}
.tarif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.45vw, 28px);
}
.tarif-card {
  border-radius: 22px;
  padding: clamp(20px, 1.85vw, 36px);
  display: flex;
  flex-direction: column;
}
.tarif-card--dark { background: #1a1a1a; color: #fff; }
.tarif-card--light { background: #d9d9d9; color: var(--color-black); }
/* La 1re carte de la ligne 2 démarre en colonne 2 */
.tarif-card--col2 { grid-column-start: 2; }

.tarif-card__name {
  font-size: clamp(11px, 0.72vw, 14px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: clamp(12px, 1.2vw, 22px);
}
.tarif-card__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(12px, 1.2vw, 22px);
  padding-bottom: clamp(12px, 1.2vw, 22px);
  border-bottom: 1px solid currentColor;
}
.tarif-card--dark .tarif-card__price { border-color: rgba(255,255,255,0.18); }
.tarif-card--light .tarif-card__price { border-color: rgba(0,0,0,0.15); }
.tarif-card__amount,
.tarif-card__dur {
  font-size: clamp(22px, 1.92vw, 37px);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.tarif-card__desc {
  font-size: clamp(11px, 0.78vw, 15px);
  line-height: 1.35;
  opacity: 0.6;
  margin-bottom: clamp(14px, 1.4vw, 26px);
}
.tarif-card__list { display: flex; flex-direction: column; gap: clamp(7px, 0.7vw, 13px); }
.tarif-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: clamp(11px, 0.82vw, 15px);
  line-height: 1.3;
}
.tarif-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  opacity: 0.8;
}

/* Pied des tarifs : bouton + note */
.tarifs__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5%;
  margin-top: clamp(24px, 2.6vw, 50px);
}
.tarifs__note {
  max-width: 460px;
  margin-left: auto;
  text-align: right;
  font-size: clamp(12px, 0.85vw, 16px);
  color: #595959;
  letter-spacing: -0.02em;
}

/* ---------- BLOC ACCOMPAGNEMENT : tags numérotés ---------- */
.accomp-tags {
  display: grid;
  grid-template-columns: auto auto;
  gap: clamp(8px, 0.8vw, 15px) clamp(18px, 1.9vw, 38px);
  justify-content: start;
}
.accomp-tags li { display: flex; align-items: center; gap: clamp(10px, 1vw, 18px); }
.accomp-id {
  font-size: clamp(11px, 0.72vw, 14px);
  color: #868686;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.accomp-name {
  background: #e4e4e4;
  border-radius: 999px;
  padding: clamp(5px, 0.5vw, 9px) clamp(12px, 1vw, 18px);
  font-size: clamp(11px, 0.8vw, 15px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- LISTE INFORMATIONS ---------- */
.infos {
  width: 100%;
  padding: clamp(30px, 3vw, 58px) var(--page-margin) 0;
  display: flex;
  justify-content: center;
}
.infos__list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6vw, 11px);
}
.infos__list li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(14px, 1.1vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #595959;
}
.infos__list li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Espacements de sections (page Tarifs) ---------- */
.page-tarifs .cr-fullimg + .cr-bigcenter { padding-top: clamp(60px, 7.45vw, 143px); }
.page-tarifs .feature + .contact { padding-bottom: var(--space-before-footer); }

/* ============================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================ */

/* --- Cartes de tarifs : survol (élévation + ombre) --- */
.page-tarifs .tarif-card {
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.45s ease,
              opacity 0.45s ease;
}
.page-tarifs .tarif-card:hover { transform: translateY(-10px); }
.page-tarifs .tarif-card--dark:hover  { box-shadow: 0 22px 55px rgba(0,0,0,0.30); }
.page-tarifs .tarif-card--light:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.16); }

/* Effet "focus" : au survol d'une carte, les autres s'estompent */
.page-tarifs .tarif-grid:hover .tarif-card:not(:hover) { opacity: 0.6; }

/* Le montant respire, la durée se décale au survol de la carte */
.page-tarifs .tarif-card__amount {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: left center;
}
.page-tarifs .tarif-card:hover .tarif-card__amount { transform: scale(1.07); }
.page-tarifs .tarif-card__dur { transition: transform 0.4s ease; }
.page-tarifs .tarif-card:hover .tarif-card__dur { transform: translateX(-4px); }

/* Les puces de la carte se décalent légèrement en cascade au survol */
.page-tarifs .tarif-card__list li {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.page-tarifs .tarif-card:hover .tarif-card__list li { transform: translateX(4px); }
.page-tarifs .tarif-card:hover .tarif-card__list li:nth-child(2) { transition-delay: 0.03s; }
.page-tarifs .tarif-card:hover .tarif-card__list li:nth-child(3) { transition-delay: 0.06s; }
.page-tarifs .tarif-card:hover .tarif-card__list li:nth-child(4) { transition-delay: 0.09s; }
.page-tarifs .tarif-card:hover .tarif-card__list li:nth-child(5) { transition-delay: 0.12s; }

/* --- Tags accompagnement : survol = inversion --- */
.page-tarifs .accomp-name {
  transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
  cursor: default;
}
.page-tarifs .accomp-tags li:hover .accomp-name {
  background: #1a1a1a;
  color: #fff;
  transform: translateX(3px);
}

/* --- Liste infos : apparition des items en cascade --- */
.page-tarifs .infos__list.reveal { opacity: 1; transform: none; }  /* on anime les items, pas le bloc */
.page-tarifs .infos__list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.page-tarifs .infos__list.is-visible li { opacity: 1; transform: none; }
.page-tarifs .infos__list.is-visible li:nth-child(1) { transition-delay: 0.05s; }
.page-tarifs .infos__list.is-visible li:nth-child(2) { transition-delay: 0.13s; }
.page-tarifs .infos__list.is-visible li:nth-child(3) { transition-delay: 0.21s; }
.page-tarifs .infos__list.is-visible li:nth-child(4) { transition-delay: 0.29s; }
.page-tarifs .infos__list.is-visible li:nth-child(5) { transition-delay: 0.37s; }

/* --- Bouton "Réserver" : placé dans la case vide (ligne 2 / col 1) --- */
.page-tarifs .tarif-grid .tarif-reserve {
  grid-column: 1;
  grid-row: 2;
  align-self: end;        /* aligné en bas → niveau du bas de CAMÉRA & IMAGES */
  justify-self: start;    /* aligné à gauche → bord de MONOKROMI */
}

/* --- Bouton "Réserver" : flèche au survol --- */
.page-tarifs .tarif-reserve {
  position: relative;
  transition: background 0.25s ease, color 0.25s ease, padding 0.3s ease;
}
.page-tarifs .tarif-reserve::after {
  content: " →";
  opacity: 0;
  margin-left: -10px;
  transition: opacity 0.3s ease, margin-left 0.3s ease;
}
.page-tarifs .tarif-reserve:hover::after { opacity: 1; margin-left: 4px; }

/* Respecte la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .page-tarifs .tarif-card,
  .page-tarifs .tarif-card__amount,
  .page-tarifs .tarif-card__dur,
  .page-tarifs .tarif-card__list li,
  .page-tarifs .accomp-name,
  .page-tarifs .gallery img,
  .page-tarifs .infos__list li { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .tarif-grid { grid-template-columns: repeat(2, 1fr); }
  .tarif-card--col2 { grid-column-start: auto; }
  /* le bouton reprend un flux normal quand la grille se réorganise */
  .page-tarifs .tarif-grid .tarif-reserve {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: start;
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  .tarif-grid { grid-template-columns: 1fr; }
  .tarifs__footer { flex-direction: column; gap: 20px; }
  .tarifs__note { text-align: left; margin-left: 0; }
  .accomp-tags { grid-template-columns: auto; }
}

/* ============================================
   FEATURE en paragraphes (texte node 31:883) — Tarifs
   ============================================ */
.page-tarifs .feature__text--para p { margin: 0; }
.page-tarifs .feature__text--para strong {
  display: inline;               /* gras inline, pas un titre en bloc */
  font-weight: 600;              /* Inter Semi Bold */
}
.page-tarifs .feature__text--para p + p {
  margin-top: 1.32em;            /* ligne vide entre paragraphes (Figma : 45px lh) */
}
/* ---------- IMAGE HAUT : garder la bande fine sur la page tarifs ----------
   (les autres pages cr-fullimg passent au format haut 1848/848) */
.page-tarifs .cr-fullimg img {
  aspect-ratio: 1916 / 410;
  max-height: 56vh;
}