/* Section « Tarif & modalités » de /services/ — issue de la fusion de
   l'ancienne page /pricing/ (direction explicite).

   Reprend les mêmes tokens --li-* que le reste de la page (déclarés par
   services-hero.css sur .services-hero/.services-feed ; redéclarés ici
   pour .services-rate, même convention que chaque autre fichier de ce
   dossier — aucun n'importe les tokens d'un autre).

   La recette visuelle de la carte TJM (badge fusée, échelle
   typographique du prix, halo bleu-violet) est reprise de l'ancien
   pricing-cards.css avec les mêmes valeurs, sous des noms de classes
   propres (.rate-*), pour que la suppression de ce fichier ne casse
   rien. */

.services-rate {
  --li-card-bg: rgba(38, 32, 56, 0.55);
  --li-card-blur: blur(24px);
  --li-border: rgba(255, 255, 255, 0.08);
  --li-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --li-text: rgba(255, 255, 255, 0.92);
  --li-text-secondary: rgba(255, 255, 255, 0.6);
}

.services-rate .section__inner {
  max-width: 1560px;
}

/* Cible de l'ancre #tarif — AUCUN scroll-margin-top (valeur par défaut,
   0) : l'arrivée aligne le haut de la section sur le haut du viewport,
   et c'est le padding-top de la section qui dégage l'en-tête fixe.

   Pourquoi pas un scroll-margin-top, comme au premier jet : il laissait
   voir le bas de la section précédente. L'espace entre les deux venait du
   padding-bottom de .services-hero, donc le haut de la BOÎTE de cette
   section se trouvait 130px sous le bandeau de résultats. Reculer de
   139px pour dégager l'en-tête ramenait mécaniquement ce bandeau dans le
   champ — mesuré : son bas à 9px du haut du viewport.

   L'espacement est donc porté par CETTE section (voir padding-top plus
   bas) et non par la précédente : le haut de sa boîte coïncide alors avec
   la fin du contenu précédent, qui sort exactement du champ. */

/* Espacement vertical entre les deux grands ensembles de la page, porté
   ENTIÈREMENT ici (services-hero.css met son padding-bottom à 0) : c'est
   ce qui fait coïncider le haut de cette boîte avec la fin du contenu
   précédent, et donc ce qui rend l'arrivée à l'ancre propre. Les valeurs
   dégagent l'en-tête fixe : 80px de barre + 30 de respiration en mobile,
   107 + 43 à partir de 1024px (hauteurs réelles, header.css). */
.services-rate {
  padding-top: 110px;
  padding-bottom: 110px;
}

@media (min-width: 1024px) {
  .services-rate {
    /* Occupe la hauteur du viewport, et centre son contenu dedans.
       C'est ce qui met le titre de la colonne gauche AU MILIEU en hauteur
       à l'arrivée sur #tarif (direction explicite), sans découvrir ce
       qu'il y a au-dessus.

       Pourquoi pas un simple scroll-margin-top pour faire descendre le
       repère : la section mesure 691px pour un viewport de 900px, donc la
       centrer demanderait 104px d'espace au-dessus — 194px sur un écran
       de 1080px de haut. Cet espace ne peut venir que du bas de la
       section précédente, dont le bandeau de résultats réapparaîtrait
       alors dans le champ. Une valeur fixe ne centrerait juste qu'à une
       seule hauteur d'écran.

       Avec min-height: 100vh, l'arrivée aligne le haut de la section sur
       le haut du viewport — donc rien de la section précédente n'est
       visible — et le contenu se centre tout seul, à n'importe quelle
       hauteur d'écran.

       Le padding reste comme plancher : sur un écran court (moins de
       ~800px de haut), le contenu dépasse la hauteur du viewport et c'est
       lui qui reprend la main, sans jamais être comprimé. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* .section__inner devient enfant flexible : sans cette largeur il se
     réduirait à la largeur de son contenu au lieu de tenir la grille. */
  .services-rate > .section__inner {
    width: 100%;
  }

  /* Même matrice que la première partie : 0.9fr / 1.6fr = 36 % / 64 %,
     dans la fourchette 34-38 / 62-66 demandée, même gap de 56px. */
  .page-split--services-rate {
    max-width: 1560px;
    --page-split-intro: 0.9fr;
    --page-split-content: 1.6fr;
    --page-split-gap: 56px;
    /* La colonne gauche est CENTRÉE face aux cartes, pas alignée en haut
       (.page-split vaut `start` par défaut). Mesuré : la colonne fait
       345px contre 401px pour les cartes, donc `start` la laissait 28px
       trop haut — et son titre paraissait décalé vers le haut de la
       section. Même parti que les colonnes d'intro de /ai-hub/, /blogs/
       et /skills/, qui sont elles aussi centrées verticalement. */
    align-items: center;
  }
}

/* ---- Colonne gauche ------------------------------------------------- */

.services-rate-title {
  margin-top: 0;
}

.services-rate-subtitle {
  max-width: 42ch;
  margin-top: clamp(14px, 1.6vw, 18px);
}

.services-rate-reassurance {
  margin: clamp(16px, 1.8vw, 20px) 0 0;
  font-family: var(--font-satoshi);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--li-text-secondary);
}

@media (min-width: 1024px) {
  .services-rate-reassurance {
    max-width: 34ch;
  }
}

/* ---- Colonne droite : les deux cartes ------------------------------ */

.services-rate-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Côte à côte seulement à partir de 1280px — et pas dès 768px comme au
   premier jet. Raison mesurée, pas estimée : les deux CTA de la carte TJM
   doivent tenir sur UNE ligne (direction explicite). Largeurs réellement
   rendues, relevées dans le navigateur — bouton primaire 234px (largeur
   FIXE de .btn), lien secondaire 134px en français, 92px en anglais —
   soit 384px nécessaires avec la gouttière. En dessous de 1280px, la
   piste de cette carte n'offrait que 321px à 1440px et 272px à 1280px :
   les CTA passaient l'un sous l'autre à TOUTES les largeurs de bureau.

   Empilées, la carte TJM récupère toute la colonne droite (599px à
   1024px, 736px à 768px) et les deux CTA tiennent largement. C'est ce qui
   rend la contrainte vraie partout, plutôt qu'à une seule largeur. */
@media (min-width: 1280px) {
  .services-rate-cards {
    /* 1.2fr / 0.8fr : la carte TJM est la plus large, c'est elle qui doit
       tenir la ligne de CTA. `start` — et jamais `stretch` : la carte
       Cadre est dimensionnée par son contenu, pas étirée à la hauteur de
       sa voisine (direction explicite). */
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: start;
  }
}

.rate-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(26px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
    var(--li-card-bg);
  backdrop-filter: var(--li-card-blur);
  -webkit-backdrop-filter: var(--li-card-blur);
  border: 1px solid var(--li-border);
  border-radius: 20px;
  box-shadow: var(--li-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* Halo localisé, en pseudo-élément statique dont seule l'OPACITÉ
   transitionne : jamais un blur() animé, jamais un listener mousemove,
   jamais de halo qui suit le curseur (direction explicite). */
.rate-card::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -2;
  border-radius: inherit;
  background: var(--rate-halo, none);
  filter: blur(28px);
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.rate-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
}

.rate-card:hover::before {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .rate-card,
  .rate-card::before {
    transition: none;
  }

  .rate-card:hover {
    transform: none;
  }
}

/* ---- Carte TJM ----------------------------------------------------- */

.rate-card--price {
  align-items: center;
  text-align: center;
  padding-block: 32px 34px;
  /* Bordure un peu plus présente que les autres cartes, et lumière
     interne bleu-violet : c'est la carte la plus attractive de la page,
     sans être démesurée. */
  border-color: rgba(255, 255, 255, 0.16);
  --rate-halo:
    radial-gradient(60% 60% at 25% 15%, rgba(63, 123, 248, 0.6), transparent 70%),
    radial-gradient(55% 55% at 78% 85%, rgba(184, 107, 248, 0.55), transparent 70%);
  background:
    radial-gradient(130% 110% at 0% 0%, rgba(63, 123, 248, 0.18), transparent 62%),
    radial-gradient(130% 110% at 100% 100%, rgba(184, 107, 248, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
    var(--li-card-bg);
}

.rate-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.55);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 5px rgba(135, 92, 255, 0.05), 0 0 22px rgba(211, 76, 255, 0.22);
  overflow: hidden;
  /* Pulsation TRÈS subtile du contour : 4,5s, amplitude faible, jamais un
     clignotement. Seules box-shadow/border-color varient — aucun
     reflow. */
  animation: rate-badge-pulse 4.5s ease-in-out infinite;
}

@keyframes rate-badge-pulse {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 5px rgba(135, 92, 255, 0.04), 0 0 20px rgba(211, 76, 255, 0.18);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.8);
    box-shadow: 0 0 0 6px rgba(135, 92, 255, 0.09), 0 0 30px rgba(211, 76, 255, 0.3);
  }
}

.rate-badge__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rate-badge__star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: rate-star-fall 2.6s linear infinite;
}

.rate-badge__star--1 { left: 30%; animation-delay: 0s; }
.rate-badge__star--2 { left: 52%; animation-delay: 0.9s; }
.rate-badge__star--3 { left: 71%; animation-delay: 1.7s; }

@keyframes rate-star-fall {
  0%   { transform: translateY(-8px); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: translateY(58px); opacity: 0; }
}

.rate-badge__rocket {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rate-badge,
  .rate-badge__star {
    animation: none;
  }

  .rate-badge__star {
    opacity: 0.5;
  }
}

.rate-card__label {
  margin: 0;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb8ff;
}

.rate-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 0;
}

.rate-card__price-amount {
  font-family: var(--font-satoshi);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  color: #fff;
}

@media (min-width: 640px) {
  .rate-card__price-amount {
    font-size: 64px;
  }
}

.rate-card__price-currency {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.rate-card__price-unit {
  font-family: var(--font-satoshi);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--li-text-secondary);
}

.rate-card__tagline {
  margin: 12px 0 0;
  font-family: var(--font-satoshi);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--li-text);
}

.rate-card__divider {
  width: 100%;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14) 22%,
    rgba(255, 255, 255, 0.14) 78%,
    transparent
  );
}

/* ---- Les deux CTA -------------------------------------------------- */

.rate-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  width: 100%;
}

/* Chaque CTA garde une base souple plutôt qu'une largeur fixe : ils
   restent sur UNE ligne tant que la piste le permet raisonnablement, et
   ne se cassent qu'en dessous (direction explicite). Le lien secondaire
   ne rétrécit jamais sous son texte. */
/* .btn porte une largeur FIXE de 234px (button.css), dimensionnée pour
   les CTA pleine largeur du reste du site. Ici elle est relâchée au
   profit de la largeur du texte plus un rembourrage : c'est le seul
   moyen de tenir les deux CTA sur une ligne, et rien d'autre du bouton ne
   change — même dégradé, même hauteur de 56px, même rayon, même
   typographie, mêmes états. Le min-width garde une cible confortable si
   un jour le libellé raccourcit. */
.rate-card__cta-primary {
  flex: 0 1 auto;
  width: auto;
  min-width: 200px;
  padding-inline: 26px;
  white-space: nowrap;
}

.rate-card__cta-secondary {
  flex: 0 0 auto;
  position: relative;
  font-family: var(--font-satoshi);
  font-weight: 600;
  font-size: 14px;
  color: var(--li-text);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.rate-card__cta-secondary:hover,
.rate-card__cta-secondary:focus-visible {
  color: #fff;
  border-bottom-color: rgba(159, 184, 255, 0.9);
}

.rate-card__cta-secondary:focus-visible {
  outline: 2px solid #9fb8ff;
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rate-card__cta-secondary {
    transition: none;
  }
}

.rate-card__micro {
  margin: 18px 0 0;
  font-family: var(--font-satoshi);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--li-text-secondary);
}

/* ---- Carte Cadre d'intervention ------------------------------------ */

.rate-card--terms {
  --rate-halo: radial-gradient(70% 70% at 50% 0%, rgba(63, 123, 248, 0.28), transparent 72%);
}

.rate-card__title {
  margin: 0 0 18px;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
}

.rate-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.rate-terms__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.rate-terms__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid rgba(63, 123, 248, 0.34);
  background: rgba(63, 123, 248, 0.12);
  color: #9fb8ff;
}

.rate-terms__text {
  font-family: var(--font-satoshi);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--li-text);
}

.rate-card__divider--terms {
  margin: 20px 0 16px;
}

.rate-card__footnote {
  margin: 0;
  font-family: var(--font-satoshi);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--li-text-secondary);
}