/* ==========================================================================
   Page Solutions (« Où en est votre entreprise ? »), design v3
   Pattern agentsia/solutions-page, script assets/js/solutions.js.
   Une frise des étapes à gauche (collante), les étapes à droite : la phrase
   que dit le client, ce que l'agent change, puis les agents de l'étape.
   Sans script : toutes les étapes visibles, variante « existe déjà » du lancement.
   ========================================================================== */

.sol-page {
  max-width: 1312px;
  margin: 0 auto;
  padding: 150px 24px 120px;
}

/* ===== En-tête ===== */
.sol-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sol-page p.sol-kicker,
.sol-page p.sol-step__k {
  margin: 0;
  font-size: var(--fs-kicker, 10px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-2);
}
.sol-page h1.sol-h1 {
  margin: 0;
  font-size: clamp(36px, 4.2vw, var(--fs-h1, 56px));
  line-height: 1.1;
  color: var(--ink);
}
.sol-page p.sol-lead { margin: 0; max-width: 560px; font-size: var(--fs-lead, 20px); letter-spacing: -0.03em; line-height: 1.4; color: var(--text-2); }

/* Choix « Je crée / existe déjà » : segment gris, option active blanche. Masqué sans script. */
.sol-seg { display: none; gap: 0; margin-top: 12px; padding: 4px; border-radius: var(--r-card); background: #ebe9e1; }
.sol-page.is-js .sol-seg { display: inline-flex; }
.sol-seg p.sol-seg__opt { margin: 0; }
.sol-seg__opt a {
  display: block;
  padding: 9px 16px;
  border-radius: var(--r-btn);
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--text-2);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.sol-seg__opt a:hover { color: var(--ink); }
.sol-seg__opt a[aria-current="true"],
.sol-seg__opt a[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.sol-seg__opt a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ===== Frise + étapes ===== */
.sol-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 72px; }

.sol-tl { position: sticky; top: calc(50vh - 210px); display: flex; flex-direction: column; }
.sol-tl::before,
.sol-tl::after { content: ""; position: absolute; left: 6px; top: 30px; width: 1px; height: 360px; }
.sol-tl::before { background: rgb(0 0 0 / .14); }
.sol-tl::after { height: calc(360px * var(--p, 0)); background: var(--ink); }
.sol-tl p.sol-tl__i { margin: 0; }
.sol-tl__i a {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 13px auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-content: center;
  height: 60px;
  color: var(--text-2);
  text-decoration: none;
}
.sol-tl__i a::before {
  content: "";
  grid-row: 1 / 3;
  align-self: center;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 1px solid rgb(0 0 0 / .3);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .4s ease, border-color .4s ease, transform .5s ease;
}
.sol-tl__i--extra a::before { border-style: dashed; }
.sol-tl__i em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.sol-tl__i a { font-family: var(--display); font-size: 21px; letter-spacing: -0.02em; line-height: 1.1; }
.sol-tl__i em { font-family: var(--agentsia-font-sans); line-height: 1.4; }
.sol-tl__i a:hover,
.sol-tl__i.is-on a { color: var(--ink); }
.sol-tl__i.is-done a::before,
.sol-tl__i.is-on a::before { border-color: var(--ink); background: var(--ink); }
.sol-tl__i.is-on a::before { transform: scale(1.45); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgb(0 0 0 / .18); }
.sol-tl__i a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Une étape : texte à gauche, agents à droite. Estompée tant qu'elle n'est pas au centre (avec script). */
.sol-step {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  min-height: 78vh;
  scroll-margin-top: 120px;
}
.sol-page.is-js .sol-step { opacity: .22; transition: opacity .6s ease; }
.sol-page.is-js .sol-step.is-on { opacity: 1; }
.sol-step__l { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sol-page p.sol-step__q {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, var(--fs-h2, 40px));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.sol-page p.sol-step__b {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: var(--fs-body, 16px);
  line-height: 1.45;
  color: var(--text-2);
}
/* Coche verte (icon/check du design system) */
.sol-page p.sol-step__b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%233d5a45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sol-step__ctas { margin: 8px 0 0; }

/* Variante du lancement : « existe déjà » par défaut, « je crée » sur choix. */
.sol-launch { display: flex; flex-direction: column; gap: 24px; }
.sol-launch--new { display: none; }
.sol-page.is-new .sol-launch--new { display: flex; }
.sol-page.is-new .sol-launch--old { display: none; }

/* ===== Cartes d'agents : aplat de la couleur de l'agent, nom en haut, visage en bas ===== */
.sol-step__r { display: flex; justify-content: center; gap: 12px; }
.sol-card {
  position: relative;
  flex: 0 1 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 5 / 7;
  min-height: 0;
  overflow: hidden;
  border: 3px solid var(--surface);
  border-radius: var(--r-card);
  background: var(--c, var(--tag-bg));
  transition: transform .5s ease;
}
.sol-card:nth-child(1) { transform: rotate(-1.6deg); }
.sol-card:nth-child(2) { transform: rotate(1.2deg); }
.sol-card:nth-child(3) { transform: rotate(-.8deg); }
.sol-card:hover { transform: translateY(-4px); }
.sol-card--custom { background: var(--surface); border-color: var(--surface); }
.sol-page p.sol-card__name {
  position: relative;
  z-index: 1;
  margin: 14px 6px 0;
  font-family: var(--display);
  font-size: clamp(13px, .97vw, 14px);   /* « Documentaliste » tient dans la carte, même en Instrument Sans (plus large que Season Mix) */
  overflow-wrap: normal;   /* « Documentaliste » ne se coupe pas en deux */
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}
.sol-card__name a { color: inherit; text-decoration: none; }
/* Toute la carte est cliquable quand l'agent a sa page */
.sol-card__name a::after { content: ""; position: absolute; inset: -200px -20px; z-index: 2; }
.sol-card__name a:focus-visible { outline: none; }
.sol-card:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.sol-card figure.sol-card__face { margin: 0 auto -6%; width: 86%; }
/* Format carré réservé : sans lui, le visage (SVG en chargement différé) fait 0 px de haut et Safari ne le charge jamais. */
.sol-card figure.sol-card__face img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sol-card--custom figure.sol-card__face { width: 46%; margin: auto; }

/* ===== Pied ===== */
.sol-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.sol-foot p { margin: 0; font-size: 16px; color: var(--text-2); }
.sol-foot__a a { color: var(--ink); text-decoration: none; }
.sol-foot__a a::after { content: " →"; }
.sol-foot__a a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Écran intermédiaire (901 à 1279 px) : frise gardée, cartes sous le texte (côte à côte, elles tombaient à 73 px) ===== */
@media (min-width: 901px) and (max-width: 1279px) {
  .sol-wrap { gap: 48px; }
  .sol-step { grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: center; }
  .sol-step__r { justify-content: flex-start; }
}

/* ===== Téléphone et tablette : pas de frise, étapes empilées ===== */
@media (max-width: 900px) {
  .sol-page { padding: 120px 20px 80px; }
  .sol-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .sol-tl { display: none; }
  .sol-step { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding: 40px 0; }
  .sol-page.is-js .sol-step { opacity: 1; }
  .sol-step__r { justify-content: flex-start; }
  .sol-card { flex-basis: 31%; }
  .sol-page p.sol-card__name { margin: 10px 4px 0; font-size: 13px; }
  .sol-seg__opt a { padding: 8px 10px; font-size: 13px; }
  .sol-foot { flex-direction: column; align-items: flex-start; }
}

/* Très petit téléphone (iPhone SE) : « Documentaliste » tient encore dans sa carte. */
@media (max-width: 380px) {
  .sol-page p.sol-card__name { margin: 10px 3px 0; font-size: 12px; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-page.is-js .sol-step,
  .sol-card,
  .sol-tl__i a::before { transition: none; }
}