/* ==========================================================================
   Accueil « partenariat » (23/10/2026) : ce qui s'ajoute aux composants de ads.css.
   1. La démonstration du haut de page (.pt-demo) : le trajet d'une demande, de la
      recherche du client jusqu'au chantier signé. Rythme : assets/partenariat.js.
      Sans JavaScript, ou avec « réduire les animations », tout est affiché d'un bloc.
   2. Le comparatif « ce que vous payez » (.pt-compare).
   3. Les cartes « votre propre source de clients » (.pt-sources).
   ========================================================================== */

/* ---------- 1. Démonstration ---------- */
.pt-demo {
  margin: 0;
  padding: var(--e-5);
  background: var(--blanc);
  border-radius: var(--r-30);
  box-shadow: var(--ombre-demo);
  display: flex;
  flex-direction: column;
  gap: var(--e-4-5);
}

.pt-bloc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  transition: opacity var(--duree-pt-fondu) var(--ease), transform var(--duree-pt-fondu) var(--ease);
}

/* Trait entre deux étapes, et point qui le descend quand l'étape suivante s'allume */
.pt-bloc + .pt-bloc::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--e-4-5));
  left: var(--e-4-5);
  height: var(--e-4-5);
  border-left: 2px dashed var(--filet-pointille);
}

.pt-bloc + .pt-bloc::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--e-4-5) - var(--e-1));
  left: calc(var(--e-4-5) - var(--e-1));
  width: var(--e-2-5);
  height: var(--e-2-5);
  border-radius: 50%;
  background: var(--jaune);
  outline: 1.5px solid var(--encre);
  opacity: 0;
}

.pt-etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.pt-etiquette b {
  width: var(--e-5);
  height: var(--e-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--encre);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0;
}

/* Étape 1 : la recherche */
.pt-barre {
  min-height: var(--cible-tactile);
  padding: 0 var(--e-4);
  display: flex;
  align-items: center;
  gap: var(--e-2-5);
  border: 1px solid var(--filet);
  border-radius: var(--r-pilule);
  background: var(--papier);
  font-size: var(--t-15);
}

.pt-barre svg {
  flex-shrink: 0;
  color: var(--gris);
}

.pt-curseur {
  width: 2px;
  height: 1.1em;
  background: var(--encre);
  opacity: 0;
}

/* Étape 2 : le système d'acquisition */
.pt-canaux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
}

.pt-canaux li {
  padding: var(--e-2-5) var(--e-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1-5);
  border: 1.5px solid var(--filet);
  border-radius: var(--r-16);
  font-size: var(--t-13);
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  transition: background-color var(--duree-pt-fondu) var(--ease), border-color var(--duree-pt-fondu) var(--ease);
}

.pt-canaux svg { color: var(--encre); }

/* Étape 3 : la demande transmise */
.pt-carte-demande {
  padding: var(--e-3-5) var(--e-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-0-5) var(--e-3);
  align-items: center;
  border-radius: var(--r-18);
  background: var(--encre);
  color: var(--s-texte);
}

.pt-carte-demande .pt-icone {
  grid-row: span 3;
  width: var(--e-7);
  height: var(--e-7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-12);
  background: var(--jaune);
  color: var(--encre);
}

.pt-carte-demande strong {
  font-size: var(--t-16);
  font-weight: 500;
}

.pt-carte-demande span {
  font-size: var(--t-14-5);
  color: var(--s-texte-2);
}

/* Étape 4 : le relevé du mois */
.pt-releve-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pt-releve-liste li {
  min-height: var(--e-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-14-5);
  transition: opacity var(--duree-pt-fondu) var(--ease);
}

.pt-etat {
  padding: var(--e-1) var(--e-2-5);
  border-radius: var(--r-pilule);
  background: var(--papier);
  color: var(--gris);
  font-size: var(--t-13);
  font-weight: 500;
  white-space: nowrap;
}

.pt-etat.est-signe {
  background: var(--jaune);
  color: var(--encre);
}

.pt-total {
  padding-top: var(--e-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-15);
  color: var(--gris);
}

.pt-total strong {
  font-size: var(--t-24);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--encre);
}

/* États pilotés par partenariat.js (classe .pt-anime posée sur la figure) */
.pt-anime .pt-bloc {
  opacity: .22;
  transform: translateY(var(--e-1-5));
}

.pt-anime .pt-bloc.est-actif {
  opacity: 1;
  transform: none;
}
.pt-anime .en-route::after { animation: pt-descend var(--duree-pt-trajet) var(--ease) both; }
.pt-anime .pt-curseur { animation: pt-clignote var(--duree-pt-curseur) steps(1) infinite; }

.pt-anime .pt-canaux li.est-allume {
  background: var(--jaune-pale);
  border-color: var(--encre);
}
.pt-anime .pt-releve-liste li { opacity: 0; }
.pt-anime .pt-releve-liste li.est-visible { opacity: 1; }

@keyframes pt-descend {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(var(--e-4-5));
  }
}

@keyframes pt-clignote {
  50% { opacity: 1; }
}

/* ---------- 2. Comparatif « ce que vous payez » ---------- */
.pt-compare .carte {
  background: var(--sombre-carte);
  color: var(--s-texte);
}
.pt-compare .carte p { color: var(--s-texte-2); }

.pt-compare .carte .verdict {
  border-color: var(--s-filet);
  color: var(--s-texte);
}

.pt-compare .carte.est-retenue {
  background: var(--jaune);
  color: var(--encre);
}
.pt-compare .est-retenue p { color: var(--encre); }

.pt-compare .est-retenue .verdict {
  border-color: var(--encre);
  color: var(--encre);
}

.pt-compare .qui {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s-texte-2);
}

.pt-compare .est-retenue .qui { color: var(--encre); }

/* ---------- 3. « Votre propre source de clients » ---------- */
.pt-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  align-items: stretch;
}
.pt-sources .offre { padding: var(--e-6); }

.pt-sources .offre .liens {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
}

.pt-ordre {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.pt-sources .fonce .pt-ordre { color: var(--jaune); }
.pt-sources .fonce .lien-souligne { color: var(--s-texte); }

@media (max-width: 1040px) {
  .pt-sources { grid-template-columns: 1fr; }
  .pt-demo { max-width: 520px; }
}

@media (max-width: 720px) {
  .pt-demo { padding: var(--e-4); }
  .pt-canaux li { font-size: var(--t-12); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-bloc, .pt-canaux li, .pt-releve-liste li { transition: none; }
}

/* Icône du cadenas dans le bloc formulaire : trait foncé sur la pastille jaune */
.bloc-form .rassure .rond { color: var(--encre); }

/* ---------- 4. Alignement des cartes d'une même rangée ----------
   Chaque carte partage les rangées de sa grille (subgrid) : titres, textes et pieds de carte
   démarrent à la même hauteur, et toutes les cartes d'une rangée ont la même taille. */
.etapes,
.quatre,
.pt-compare,
.pt-sources {
  align-items: stretch;
}

.etapes > li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--e-2-5);
}

/* Bloc « Un cadre clair » : l'icône à droite du titre, le texte en dessous sur toute la largeur */
.quatre > .engagement {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-2-5) var(--e-3);
}

.engagement > h3 {
  grid-area: 1 / 1;
  align-self: center;
}

.engagement > .icone {
  grid-area: 1 / 2;
}

.engagement > p {
  grid-column: 1 / -1;
}

.pt-compare > .carte {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: var(--e-3);
}

.pt-sources > .offre {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--e-4);
}

.etapes .quand,
.pt-compare .verdict,
.pt-sources .liens {
  align-self: end;
}

.quatre .icone {
  align-self: center;
}

.pt-compare .qui,
.pt-sources .pt-ordre {
  align-self: start;
}

/* ---------- 5. Première puce : un chiffre au lieu d'une icône, sur fond foncé ---------- */
.puces .pt-puce-forte {
  background: var(--encre);
  color: var(--s-texte);
}

.pt-zero {
  flex-shrink: 0;
  font-size: var(--t-32);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--jaune);
}

.pt-sources .prix { align-content: start; }

/* Comparatif : croix sur les cartes « Ailleurs », coche sur la carte getfound */
.pt-marque {
  width: var(--e-5);
  height: var(--e-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sombre-filet);
  color: var(--sombre-texte-2);
}

.est-retenue .pt-marque {
  background: var(--encre);
  color: var(--jaune);
}

/* Téléphone : les quatre puces l'une sous l'autre, la phrase de la puce « 0 € » tient sur une ligne */
@media (max-width: 720px) {
  .puces { grid-template-columns: 1fr; }
}