/* =============================================================================
   ENYTRACK — page /tarifs, reconstruction des deux visuels V4 en vrai HTML.

   Les visuels livres sont deux PNG ou tout le texte est peint dans l image. Ici
   chaque mot est du texte reel : lisible sur telephone, indexable, selectionnable,
   et les boutons « Ouvrir mon compte » sont de vrais liens vers /register.

   Charte reprise de homepage.css (variables --et-*) pour que la page tarifs et
   l accueil soient rigoureusement de la meme famille.
   ============================================================================= */

.tf-body {
  background: #fff;
}

/* -----------------------------------------------------------------------------
   Ossature commune aux deux ecrans
   -------------------------------------------------------------------------- */
.tf-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 3.6vw, 76px);
}

/* Le fond photo est une vraie image (donc responsive et mise en cache), posee en
   couche de fond et estompee vers le haut et vers la gauche pour que le texte
   reste parfaitement lisible — c est ce que montrent les deux maquettes. */
.tf-fond {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  pointer-events: none;
}

.tf-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

/* La photo de l ecran 1 est une bande large (ratio 3.2). En « cover » elle etait
   recadree sur un gros plan flou. On la pose donc en BANDE ancree en bas, a sa vraie
   proportion, comme sur la maquette ou les voitures occupent le bas de l ecran. */
.tf-offre .tf-fond {
  inset: auto 0 0 0;
  height: auto;
}

.tf-offre .tf-fond {
  height: 54%;
}

.tf-offre .tf-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 26% bottom;
}

.tf-offre::before {
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.86) 34%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(90deg, #fff 6%, rgba(255, 255, 255, 0.72) 34%, rgba(255, 255, 255, 0.1) 58%);
}

.tf-pourquoi .tf-fond img {
  object-position: center right;
}

.tf-pourquoi::before {
  background:
    linear-gradient(90deg, #fff 12%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.18) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 30%);
}

/* -----------------------------------------------------------------------------
   Colonne de texte
   -------------------------------------------------------------------------- */
.tf-offre-grid,
.tf-pourquoi-grid {
  display: grid;
  align-items: center;
  gap: clamp(28px, 3.4vw, 60px);
}

.tf-copy {
  min-width: 0;
}

.tf-eyebrow {
  margin: 0 0 10px;
  color: var(--et-ink);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Le titre de l ecran 1 est compose sur trois lignes fixes, exactement comme la
   maquette : « 60 vehicules » / « offerts a vie, » en bleu / « puis 8,50 EUR HT/mois ».
   Des lignes explicites valent mieux qu un retour automatique qui bouge a chaque
   largeur d ecran. */
.tf-h1--lignes span {
  display: block;
}

.tf-h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  color: var(--et-ink);
  font-size: clamp(2.1rem, 3.5vw, 3.9rem);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.tf-lead {
  max-width: 42ch;
  margin: 0 0 26px;
  color: var(--et-ink-soft);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.6;
}

.tf-para {
  max-width: 56ch;
  margin: 0 0 16px;
  color: var(--et-ink-soft);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.68;
}

.tf-para strong {
  color: var(--et-ink);
}

.tf-claim {
  margin: 22px 0 24px;
  color: var(--et-blue);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tf-cta {
  min-width: 260px;
  justify-content: center;
  padding-block: 16px;
  font-size: 1.02rem;
}

/* Bandeau de rassurance : trois mentions courtes separees par des points */
.tf-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.tf-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--et-ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
}

.tf-trust li + li::before {
  margin-right: 10px;
  color: #9fb2d6;
  content: "\00B7";
}

.tf-trust .et-icon {
  width: 17px;
  height: 17px;
  color: var(--et-blue);
}

/* -----------------------------------------------------------------------------
   ECRAN 1 — la carte du forfait
   -------------------------------------------------------------------------- */
.tf-carte {
  position: relative;
  padding: clamp(24px, 2.4vw, 40px);
  border: 1px solid rgba(202, 219, 252, 0.9);
  border-radius: clamp(20px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(16, 52, 128, 0.16);
  backdrop-filter: blur(6px);
}

.tf-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 15px;
  border-radius: 999px;
  background: #dbe7ff;
  color: var(--et-blue-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.tf-badge--clair {
  background: #e7efff;
}

/* Dans la carte de rappel, le badge et la pastille sont centres et empiles. */
.tf-badge--bloc {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* Sur la pastille d annonce, seule la premiere partie est en bleu gras ;
   la mention de prix reste discrete, comme sur la maquette. */
.tf-section .et-kicker span {
  color: var(--et-ink-soft);
  font-weight: 500;
}

.tf-section .et-kicker strong {
  color: var(--et-blue-2);
  font-weight: 750;
}

.tf-carte-titre {
  margin: 0 0 14px;
  color: var(--et-ink);
  font-size: clamp(1.1rem, 1.35vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tf-carte-titre strong {
  font-weight: 850;
}

.tf-prix {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}

.tf-prix strong {
  color: var(--et-blue);
  font-size: clamp(3rem, 4.6vw, 5rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.05em;
}

.tf-prix span {
  color: var(--et-ink);
  font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  font-weight: 600;
}

.tf-prix-sous {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e4ecfb;
  color: var(--et-ink-soft);
  font-size: 0.86rem;
}

/* Les 18 lignes du forfait, sur deux colonnes comme la maquette */
/* Remplissage en COLONNES et non en lignes : la maquette liste 1 a 9 a gauche puis
   10 a 18 a droite. Un remplissage par lignes donnerait 1-2 / 3-4 / ... */
.tf-fonctions {
  display: grid;
  gap: 11px 26px;
  margin: 0 0 24px;
  padding: 0;
  grid-auto-flow: column;
  grid-template-rows: repeat(9, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.tf-fonctions li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--et-ink);
  font-size: 0.87rem;
  line-height: 1.45;
}

.tf-fonctions .et-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--et-blue);
}

/* Les precisions entre parentheses sont composees plus discretement. */
.tf-fonctions em {
  color: #7d8fb3;
  font-style: normal;
}

.tf-carte-cta {
  justify-content: center;
  width: 100%;
  padding-block: 17px;
  font-size: 1.02rem;
}

.tf-assurances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e4ecfb;
  list-style: none;
}

.tf-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--et-ink-soft);
  font-size: 0.8rem;
}

.tf-assurances .et-icon {
  width: 17px;
  height: 17px;
  color: #7f9bd4;
}

/* -----------------------------------------------------------------------------
   ECRAN 2 — la carte de rappel, les trois arguments, la banniere
   -------------------------------------------------------------------------- */
.tf-rappel {
  padding: clamp(22px, 2vw, 32px) clamp(20px, 2vw, 34px);
  border: 1px solid rgba(202, 219, 252, 0.9);
  border-radius: clamp(20px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(16, 52, 128, 0.16);
  text-align: center;
  backdrop-filter: blur(6px);
}

.tf-rappel-pastille {
  display: inline-grid;
  width: 74px;
  height: 74px;
  margin: 6px 0 14px;
  border-radius: 50%;
  background: #e8f0ff;
  place-items: center;
}

.tf-rappel-pastille .et-icon {
  width: 34px;
  height: 34px;
  color: var(--et-blue);
}

.tf-rappel-cent {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4ecfb;
  line-height: 1.05;
}

.tf-rappel-cent strong {
  display: block;
  color: var(--et-ink);
  font-size: clamp(2.6rem, 3.4vw, 3.7rem);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.tf-rappel-cent span {
  display: block;
  color: var(--et-ink);
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  font-weight: 750;
}

.tf-rappel-cent em {
  display: block;
  margin-top: 2px;
  color: var(--et-blue);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  font-style: normal;
  font-weight: 800;
}

.tf-rappel-prix {
  margin: 0;
  line-height: 1.05;
}

.tf-rappel-prix strong {
  display: block;
  color: var(--et-blue);
  font-size: clamp(2.4rem, 3.2vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.tf-rappel-prix span {
  display: block;
  margin-top: 6px;
  color: var(--et-ink);
  font-size: 1.05rem;
  font-weight: 650;
}

.tf-rappel-sous {
  margin: 14px 0 0;
  color: var(--et-ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tf-trois {
  display: grid;
  gap: 14px;
  margin: clamp(28px, 3vw, 46px) 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
}

.tf-engagements-head {
  max-width: 820px;
  margin: clamp(38px, 4vw, 60px) auto 0;
  text-align: center;
}

.tf-engagements-head .tf-eyebrow {
  display: block;
  color: var(--et-blue);
}

.tf-engagements-head h2 {
  margin: 0;
  color: var(--et-ink);
  font-size: clamp(1.65rem, 2.7vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.tf-engagements li {
  min-width: 0;
}

.tf-trois li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border: 1px solid rgba(210, 225, 252, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(18, 54, 130, 0.08);
}

.tf-trois strong {
  display: block;
  margin-bottom: 5px;
  color: var(--et-ink);
  font-size: 0.98rem;
  font-weight: 750;
}

.tf-trois span {
  color: var(--et-ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.tf-banniere {
  display: grid;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  margin-top: clamp(26px, 2.8vw, 44px);
  padding: clamp(22px, 2.4vw, 36px) clamp(24px, 2.8vw, 46px);
  border-radius: clamp(18px, 1.8vw, 24px);
  background:
    radial-gradient(circle at 12% 50%, rgba(30, 96, 255, 0.42), transparent 46%),
    linear-gradient(135deg, #041038, #071c4d 58%, #04143c);
  grid-template-columns: auto 1fr auto;
}

/* Le bouclier de marque est deja colore : pose sur un cadre bleu fonce il devenait
   illisible. On le laisse respirer sur le fond marine, a sa taille de maquette. */
.tf-banniere-logo {
  display: inline-grid;
  width: 68px;
  height: 68px;
  place-items: center;
}

.tf-banniere-logo img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(12, 76, 255, 0.55));
}

.tf-banniere-titre {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 2.3vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.tf-banniere-titre .et-accent {
  color: #4d8bff;
}

.tf-banniere-actions {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.tf-banniere-actions .tf-trust {
  margin: 0;
  justify-content: center;
}

.tf-banniere-actions .tf-trust li {
  color: #b9caea;
}

.tf-banniere-actions .tf-trust .et-icon {
  color: #7fa8f5;
}

/* -----------------------------------------------------------------------------
   Adaptations d ecran. Au-dessus de 1080 px : deux colonnes, comme la maquette.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  .tf-offre-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .tf-pourquoi-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

/* Palier tablette et petit portable : la page tarifs suit la meme regle que le
   reste du site — deux colonnes des 880 px, et non la version telephone etiree. */
@media (min-width: 880px) and (max-width: 1080px) {
  .tf-offre-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(20px, 2.6vw, 34px);
  }

  .tf-pourquoi-grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: clamp(20px, 2.6vw, 34px);
  }

  .tf-trois {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .tf-banniere {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
  }

  .tf-rappel {
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 879px) {
  .tf-offre-grid,
  .tf-pourquoi-grid {
    grid-template-columns: 1fr;
  }

  .tf-h1,
  .tf-lead {
    max-width: none;
  }

  .tf-rappel {
    max-width: 460px;
    margin-inline: auto;
  }

  .tf-trois {
    grid-template-columns: 1fr;
  }

  .tf-banniere {
    justify-items: center;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tf-offre::before,
  .tf-pourquoi::before {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 46%, rgba(255, 255, 255, 0.72) 100%);
  }
}

@media (max-width: 760px) {
  /* Une seule colonne sur telephone. Il faut AUSSI annuler le remplissage en
     colonnes et le nombre de rangees, sinon la grille reste sur deux colonnes
     de neuf lignes et le texte se casse en quatre. */
  .tf-fonctions {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  .tf-assurances {
    justify-content: flex-start;
  }

  .tf-cta,
  .tf-carte-cta {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /* Les séparateurs ponctuels fonctionnent sur une seule ligne au bureau, mais
     deviennent des points isolés dès que les trois garanties passent sur deux
     lignes. Les icônes suffisent à les distinguer sur téléphone. */
  .tf-trust {
    gap: 10px 18px;
  }

  .tf-trust li + li::before {
    display: none;
    margin: 0;
    content: none;
  }
}

/* A 320 px, la derniere ligne du titre doit rester une phrase tarifaire lisible :
   le montant et son unite ne doivent jamais se retrouver separes. */
@media (max-width: 360px) {
  .tf-h1 {
    max-width: 100%;
    font-size: clamp(1.35rem, 8.5vw, 2.05rem);
  }

  .tf-h1--lignes span:last-child {
    white-space: nowrap;
  }
}