/* Même métrique et même étude pour les trois origines de trafic. */
.conversion-benchmark {
  margin-top: 42px;
  color: #12213d;
}
.conversion-benchmark__heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 32px;
  margin-bottom: 25px;
}
.conversion-benchmark__heading h3 {
  font-size: clamp(24px, 2.25vw, 30px);
  letter-spacing: -.04em;
  line-height: 1.16;
  text-wrap: balance;
}
.conversion-benchmark__heading p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4c5d7a;
  text-wrap: pretty;
}
.conversion-benchmark__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.conversion-benchmark__metric {
  min-width: 0;
  padding: 22px 24px 24px;
  background: #ffffffc9;
  border-radius: 18px;
  box-shadow: 0 2px 6px #13265b03, 0 8px 28px #13265b04;
}
.conversion-benchmark__metric--ai {
  background: radial-gradient(ellipse at 95% 0%, #fff 0%, #ffffff00 68%),
    linear-gradient(140deg, #e1e6ff 0%, #badbff 68%, #c6eeff 100%);
}
.conversion-benchmark__channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 24px;
  font-size: 15px;
  font-weight: 550;
  color: #354a70;
}
.conversion-benchmark__value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 16px;
  font-size: clamp(42px, 4.1vw, 59px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.conversion-benchmark__value small { font-size: .52em; letter-spacing: -.03em; }
.conversion-benchmark__metric--ai .conversion-benchmark__value { color: #174fc5; }
.conversion-benchmark__label {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.4;
  color: #4c5d7a;
}
.conversion-benchmark__track {
  height: 9px;
  margin-top: 23px;
  overflow: hidden;
  border-radius: 9px;
  background: #d7e2f380;
}
.conversion-benchmark__bar {
  display: block;
  height: 100%;
  width: var(--benchmark-share);
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, #9cb4db, #718dbe);
}
.conversion-benchmark__metric--ai .conversion-benchmark__bar {
  background: linear-gradient(90deg, #416cff, #087cc6);
}
.conversion-benchmark__lift {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  color: #385783;
  font-size: 14px;
  line-height: 1.5;
}
.conversion-benchmark__lift strong { font-size: 21px; letter-spacing: -.035em; color: #174fc5; }
.conversion-benchmark__source {
  margin-top: 14px;
  color: #4c5d7a;
  font-size: 13px;
  line-height: 1.6;
}
.conversion-benchmark__source summary {
  display: flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.conversion-benchmark__source summary::-webkit-details-marker { display: none; }
.conversion-benchmark__source summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: #315184;
}
.conversion-benchmark__source[open] summary::after { content: '−'; }
.conversion-benchmark__source summary:focus-visible,
.conversion-benchmark__source a:focus-visible { outline: 2px solid #275cff; outline-offset: 4px; border-radius: 3px; }
.conversion-benchmark__source p { margin: 6px 0; max-width: 850px; text-wrap: pretty; }
.conversion-benchmark__source a { display: inline-flex; align-items: center; min-height: 44px; color: #174fc5; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .conversion-benchmark__heading { display: block; }
  .conversion-benchmark__heading p { margin-top: 10px; }
  .conversion-benchmark__metric { padding: 20px 18px; }
  .conversion-benchmark__grid { gap: 14px; }
}
@media (max-width: 600px) {
  .conversion-benchmark { margin-top: 32px; }
  .conversion-benchmark__grid { grid-template-columns: 1fr; gap: 12px; }
  .conversion-benchmark__metric { position: relative; padding: 20px; }
  .conversion-benchmark__value { position: absolute; top: 19px; right: 20px; margin: 0; font-size: 36px; }
  .conversion-benchmark__label { font-size: 13px; margin-top: 4px; }
  .conversion-benchmark__channel { padding-right: 90px; }
  .conversion-benchmark__track { margin-top: 18px; }
  .conversion-benchmark__lift { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
  .conversion-benchmark__lift > span:first-child { grid-row: 1 / 3; align-self: center; }
  .conversion-benchmark__lift strong { font-size: 20px; }
}
@media (max-width: 360px) {
  .conversion-benchmark__metric { padding: 18px 15px; }
  .conversion-benchmark__channel { font-size: 14px; }
  .conversion-benchmark__value { right: 15px; font-size: 32px; }
  .conversion-benchmark__label { max-width: 155px; }
}

/* Identités des plateformes, regroupées avec leur origine de trafic. */
.conversion-benchmark__logos { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.conversion-benchmark__logos img { display: block; width: 23px; height: 23px; object-fit: contain; }
.conversion-benchmark__logos .conversion-benchmark__google { width: 65px; height: 23px; }
@media (min-width: 601px) and (max-width: 900px) {
  .conversion-benchmark__channel { min-height: 58px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; }
}
@media (max-width: 600px) {
  .conversion-benchmark__metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .conversion-benchmark__channel { grid-column: 1 / -1; padding-right: 0; }
  .conversion-benchmark__value { position: static; grid-column: 2; grid-row: 2; margin-top: 16px; }
  .conversion-benchmark__label { grid-column: 1; grid-row: 2; align-self: center; margin-top: 16px; }
  .conversion-benchmark__track { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .conversion-benchmark__logos { gap: 7px; }
  .conversion-benchmark__logos img { width: 21px; height: 21px; }
  .conversion-benchmark__logos .conversion-benchmark__google { width: 59px; height: 21px; }
}

.conversion-benchmark__tiktok { position: relative; display: block; flex: 0 0 23px; width: 23px; height: 23px; overflow: hidden; }
.conversion-benchmark__tiktok img { position: absolute; max-width: none; width: 106.56px; height: 43.7px; left: -9.21px; top: -10.34px; }
@media (max-width: 360px) {
  .conversion-benchmark__tiktok { flex-basis: 21px; width: 21px; height: 21px; }
  .conversion-benchmark__tiktok img { width: 97.295px; height: 39.9px; left: -8.408px; top: -9.442px; }
}