/* Carrousel « les tâches que vous n'aurez plus à faire ».
   Une file d'écrans qui défile, un par agent, avec le mock-up de son livrable
   réel — la fausse page Notion, le faux mail, le faux tableur.

   La section ne pose aucun fond : elle laisse passer le dégradé pastel de la
   page, comme les autres sections du site. Ce qui noyait les mock-ups au premier
   jet, ce n'était pas le dégradé — c'étaient les fonds empilés par-dessus (une
   carte off-white, puis un cadre dégradé autour de chaque écran). Ils sont
   partis : l'écran est posé seul sur la page, un liseré et une ombre suffisent
   à le décoller.

   Le markup des mock-ups vient de /mes-agents-ia : il est confiné sous .mck
   (voir carrousel-agents-mockups.css), rien n'en sort.
   Défilement natif (scroll-snap) : pas de bibliothèque, clavier et tactile
   fonctionnent d'office. */

.section_agents-carrousel {
  position: relative;
  padding-top: 120px;
  /* La section suivante pose déjà son propre haut de page : ajouter un bas ici
     doublait l'écart. */
  padding-bottom: 8px;
  overflow: hidden;
}

/* --------------------------------------------------------------- l'en-tête */
/* Asymétrie reprise de `.section_against` : le titre tient une colonne étroite
   à gauche, le reste vit à droite. */

.ac_entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-bottom: 56px;
  text-align: center;
}

.ac_intro { max-width: 720px; }

.ac_kicker { color: #12111799; }

/* SwissNow 600, pas de VCNudge : le condensé reste au H1 de la page. */
.ac_titre {
  font-family: Swissnow, Arial, sans-serif;
  font-size: 42px;
  line-height: 52px;
  font-weight: 600;
  margin: 10px 0 0;
  text-wrap: balance;
}

.ac_chapo {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 26px;
  color: #121117b3;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- la piste */

.ac_piste {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: max(24px, calc((100vw - 1368px) / 2));
  padding: 4px max(24px, calc((100vw - 1368px) / 2)) 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.ac_piste::-webkit-scrollbar { display: none; }

.ac_piste:focus-visible {
  outline: 2px solid #121117;
  outline-offset: 4px;
  border-radius: 20px;
}

/* ---------------------------------------------------------------- la carte */

.ac_carte {
  scroll-snap-align: start;
  flex: 0 0 300px;
  width: 300px;
}

/* L'aperçu : même hauteur pour tous. Les mock-ups n'ont pas la même longueur —
   coupés au même endroit et fondus en bas, ils donnent une file régulière, et
   la coupe dit qu'il y a une vraie page derrière. */
.ac_ecran {
  height: 300px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px #1211171a, 0 2px 4px -2px #12111726, 0 26px 46px -22px #12111766;
  -webkit-mask-image: linear-gradient(#000 62%, #0000);
  mask-image: linear-gradient(#000 62%, #0000);
}

/* Les mock-ups viennent d'une colonne de 400px ; ramenés à 300px ils gardaient
   leurs tailles en pixels absolus et le texte sortait trop gros. Le zoom les
   remet à l'échelle de la carte, la largeur compense pour qu'ils la remplissent
   toujours. */
.ac_ecran > div {
  zoom: .82;
  width: 122%;
}

/* La carte s'étire à la hauteur de la plus haute (flex row) : la légende suit,
   et la ligne des outils est poussée en bas. Sans ça le filet se décale d'une
   carte à l'autre dès qu'une liste d'outils passe sur deux lignes. */
.ac_carte { display: flex; flex-direction: column; }

.ac_legende {
  padding: 20px 4px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ac_emoji {
  font-size: 17px;
  line-height: 1;
  margin-right: 8px;
}

.ac_nom {
  margin: 0;
  font-family: Swissnow, Arial, sans-serif;
  font-size: 21px;
  line-height: 27px;
  font-weight: 600;
}

.ac_promesse {
  margin: 6px 0 16px;
  font-size: 16px;
  line-height: 23px;
  color: #121117b3;
}

/* Les bulles : le gain, pas l'outil. Une par ligne — en ligne elles passaient à
   deux rangs sur les libellés longs et se décalaient d'une carte à l'autre.
   Elles restent contre la promesse : elles la prolongent, elles ne ferment pas
   la carte. */
.ac_bulles {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.ac_bulle {
  background: #121117;
  color: #f8f9ec;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Abcfavoritmono Book', Arial, sans-serif;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: .3px;
}

/* ------------------------------------------------------------- la commande */

.ac_commande {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  padding-bottom: 6px;
}

.ac_fleche {
  width: 46px;
  height: 46px;
  border: 1px solid #12111733;
  border-radius: 50%;
  background: #0000;
  color: #121117;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}

.ac_fleche:hover { background: #121117; color: #f8f9ec; border-color: #121117; }
.ac_fleche:focus-visible { outline: 2px solid #121117; outline-offset: 3px; }
.ac_fleche[disabled] { opacity: .28; cursor: default; }
.ac_fleche[disabled]:hover { background: #0000; color: #121117; border-color: #12111733; }

.ac_fleche svg { width: 19px; height: 19px; }

.ac_compteur {
  min-width: 58px;
  text-align: center;
  color: #12111799;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .section_agents-carrousel { padding-top: 80px; padding-bottom: 0; }
  .ac_entete { gap: 24px; margin-bottom: 36px; }
  .ac_titre { font-size: 34px; line-height: 42px; }
}

@media (max-width: 767px) {
  .ac_piste {
    gap: 16px;
    scroll-padding-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .ac_carte { flex-basis: 268px; width: 268px; }
  .ac_ecran { height: 262px; }
  .ac_titre { font-size: 30px; line-height: 38px; }
  .ac_chapo { font-size: 17px; line-height: 25px; }
  .ac_nom { font-size: 19px; line-height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac_piste { scroll-behavior: auto; }
}