/* Graphen Studio — Prospection grands comptes
   Un seul écran, sans défilement : le titre à gauche, les cinq étapes de la
   méthode en haut à droite avec le paragraphe de l'étape survolée, et en bas
   son triptyque. Au repos, c'est la première étape qui s'affiche. */

/* La page tient exactement dans l'écran : la marge basse de 10 px est prise
   sur la hauteur, pas ajoutée, sinon la page gagne une barre de défilement
   pour 10 pixels. */
.page--pros {
  --gap: 10px;
  --ease-smooth: cubic-bezier(.215, .61, .355, 1);
  gap: 0 var(--gap);
  padding: 0 var(--edge) var(--edge);
  height: 100vh;
  height: 100dvh;
}

.pros-side {
  grid-column: 1 / 3;
  padding-right: 10px;
}
.pros-side.page__title { height: 100%; }

/* En haut : la liste des comptes, et à sa droite le paragraphe du compte
   survolé, aligné sur la première ligne de la liste. En bas : le triptyque. */
.pros-main {
  grid-column: 3 / 7;
  position: relative;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap);
  align-items: start;
}

/* ---------- Liste des comptes ---------- */

/* Cinq étapes de la méthode : un titre, et son sous-titre en dessous. */
.pros-list { grid-column: 1 / 2; display: flex; flex-direction: column; gap: 14px; }
.pros-list a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.pros-list__sub {
  font-size: 13px;
  line-height: 1.25;
  color: #9c9c9c;
  /* Une ligne : le sous-titre déborde sur la colonne voisine, restée vide
     jusqu'au paragraphe. */
  white-space: nowrap;
}
/* Gris au repos, noir au survol ; le sous-titre reste gris. */
.pros-list .roll { --c1: var(--grey); --c2: var(--ink); }

/* Page Prospection : les titres des étapes en Outfit, la police des titres du
   site (h1, logo) ; le sous-titre reste en Archivo. Sur mobile, le même titre
   est la première moitié de la légende du triptyque. Même corps qu'avant
   (14 px), pour garder le calage du paragraphe sur le dernier sous-titre.
   Informations garde l'Archivo. */
.page--pros:not(.page--infos) .pros-list .roll,
.page--pros:not(.page--infos) .pros-strip__cap span:first-child {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- Paragraphe du compte ---------- */
/* Les paragraphes sont superposés dans la même case ; seul celui du compte
   survolé est visible, avec le même fondu que le triptyque. */

/* Le paragraphe est calé à droite avec padding d'espacement. */
.pros-content { grid-column: 2 / 5; display: grid; justify-items: end; padding-right: 40px; }
.pros-panel {
  grid-area: 1 / 1;
  max-width: 420px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease-smooth), visibility 0s linear .7s;
}
.pros-panel.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.pros-panel p {
  font-family: "Archivo", "Archivo Placeholder", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .02em;
}
/* Chaque étape tient en deux paragraphes et onze lignes. La dernière ligne
   tombe alors sur la ligne de base du dernier sous-titre de la liste
   (« En main propre, contre signature ») : première ligne de base à 35 px,
   dix interlignes de 20,25 px, plus cet écart, font 263,94 px. Un texte
   modifié doit garder onze lignes au total dans les 420 px du bloc ; si la
   liste change, l'écart est à recalculer. */
.pros-panel p + p { margin-top: 26.44px; }
.pros-panel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Triptyque ---------- */

.pros-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 943 / 308;
}
.pros-strip__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Hauteur de rangée explicite : sans elle, le « height: 100% » des images
     ne trouve rien à quoi se rapporter, les photos reprennent leur hauteur
     naturelle et débordent du triptyque. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  /* Fondu enchaîné entre les panneaux du triptyque */
  transition: opacity .7s var(--ease-smooth), visibility 0s linear .7s;
}
.pros-strip__panel.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.pros-strip__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le nom du compte n'apparaît sous le triptyque que sur mobile, où la liste
   survolable disparaît. */
.pros-strip__cap { display: none; }

/* ================= Tablette et mobile ================= */

/* Affichage responsive : disposition en blocs successifs */
@media (max-width: 1199px) {
  .page--pros { height: auto; padding-top: 140px; padding-bottom: 0; }
  .pros-side, .pros-main { grid-column: 1 / -1; }
  .pros-side.page__title { height: auto; }
  .pros-main { padding-top: 0; display: block; }
  /* Sans survol, le paragraphe n'a pas d'étape à suivre, et la liste du haut
     ferait doublon avec les légendes. */
  .pros-content, .pros-list { display: none; }

  .pros-strip { position: static; aspect-ratio: auto; }
  .pros-strip__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0 4px;
    margin-bottom: 23px;
  }
  .pros-strip__panel img { height: auto; aspect-ratio: 121 / 115; }
  .pros-strip__cap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .pros-strip__cap span:last-child { text-align: right; }

}

/* ---------- Informations ----------
   Même page, avec trois étapes. Le texte y est le contenu : sous 1200 px,
   prospection.js range chaque paragraphe sous la légende de son bloc au lieu
   de le masquer. */

.pros-panel .pros-panel__lead { font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.pros-panel__cities { display: flex; flex-wrap: wrap; gap: 0 20px; }
.page--infos .pros-panel p + p { margin-top: 10px; }

@media (max-width: 1199px) {
  .page--infos .pros-strip__panel .pros-panel {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    width: auto !important;
    max-width: none;
    margin-top: 12px;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .page--infos .pros-panel p { font-size: 14px; line-height: 18.2px; }
  .page--infos .pros-panel p + p { margin-top: 10px; }
  .page--infos .pros-strip__panel { margin-bottom: 48px; }
  .page--infos { padding-bottom: 40px; }
}

/* ================= Prospection : téléphone et tablette ================= */

.pros-m { display: none; }

@media (max-width: 1199px) {
  .page--pros:not(.page--infos) .pros-strip,
  .page--pros:not(.page--infos) .pros-list,
  .page--pros:not(.page--infos) .pros-content { display: none; }
  .page--pros:not(.page--infos) { padding-bottom: 60px; }

  .pros-m { display: block; }
  .pros-m__bloc { display: flex; flex-direction: column; }
  .pros-m__titre { margin: 0; font: inherit; }
  .pros-m__images img { display: block; width: 100%; object-fit: cover; }
  /* Le paragraphe, rangé ici, quitte la superposition du grand écran */
  .pros-m .pros-panel {
    grid-area: auto;
    width: auto !important;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .pros-m .pros-panel p + p { margin-top: 0; }

  /* Titre centré, texte en Archivo 12/15,6 à 10 px du bord : libellé,
     paragraphes à 20 px l'un de l'autre, puis deux photos de 380 × 317 à
     5 px du bord, 2 px entre elles ; 43 px avant et après les photos. */
  .page--pros:not(.page--infos) .pros-side { text-align: center; padding-top: 0; padding-bottom: 60px; }
  .page--pros:not(.page--infos) .pros-side h1 { font-size: 20px; line-height: 18px; letter-spacing: 0; }
  .page--pros:not(.page--infos) .pros-m__bloc { font-size: 12px; line-height: 15.6px; letter-spacing: .03em; }
  .page--pros:not(.page--infos) .pros-m__sous { color: #a1a1a1; }
  .page--pros:not(.page--infos) .pros-m__texte { margin-top: 10px; }
  .page--pros:not(.page--infos) .pros-m .pros-panel p {
    font-size: 12px; line-height: 15.6px; font-weight: 500; letter-spacing: .03em;
  }
  .page--pros:not(.page--infos) .pros-m .pros-panel p + p { margin-top: 20px; }
  .page--pros:not(.page--infos) .pros-m__images {
    display: flex; flex-direction: column; gap: 2px;
    margin: 43px -5px 43px;
  }
  .page--pros:not(.page--infos) .pros-m__images img { aspect-ratio: 380 / 317; }
}