/* Supported AIs EN, au style de /handoff-v4/ (PRODUIT, 10/11/2026 ; LEAD 17:5x UTC, décision de Kevin : les 8 IA sur tous les plans).
   Refonte 11/11 (revue de Kevin, LEAD 20:1x UTC : « pas jolie, plein de cadres ») : la démo switch passe sous le hero, chaque IA
   est UNE carte claire (nom en grand, une ligne, des pastilles, une note), sans liste encadrée ni filets intérieurs.
   Seconde refonte du 11/11 (LEAD 09:0x UTC, Kevin voit « la même page qu'avant ») : plus aucune carte, une liste éditoriale (voir ②).
   La page charge les feuilles de Handoff telles quelles (hero, sections .hf-*, boucle, étapes, closer) ; celle-ci n'ajoute que :
   ① le hero, repris de /handoff-v4/hero-0114.css et de la règle mobile de Handoff, sous l'identifiant de CETTE page (#supported-ais),
     avec la boucle « switch » posée sous le bouton comme l'objet du hero de Handoff ;
   ② l'intro à ancres (.sa-intro / .sa-index) et la liste éditoriale des huit IA (.sa-list / .sa-row).
   Système V4 seulement (variables --hr-* posées par refonte-1110.css sur .hf3). Aucune couleur d'une autre marque, aucun logo. */

/* ── ① Hero ── */
#supported-ais{height:auto;min-height:0;overflow:visible}
.hf3>#supported-ais{scroll-margin-top:var(--header)}
#supported-ais .hero-grid{height:auto;display:block;padding:32px 0 28px}
#supported-ais .hero-copy{text-align:center;max-width:940px;margin:0 auto}
#supported-ais .tool-label{display:flex;align-items:center;justify-content:center;gap:10px;font:600 24px/1.3 DM,Arial,sans-serif;color:var(--blue);margin:0 0 18px}
#supported-ais .hero-title{font:700 64px/1.1 Jakarta,Arial,sans-serif;letter-spacing:-.05em;max-width:20ch;color:var(--blue);margin:0 auto 22px}
#supported-ais .lede{font-size:18px;line-height:1.55;max-width:67ch;margin:0 auto 24px}
#supported-ais .hero-action{display:flex;flex-direction:column;align-items:center;gap:12px}
#supported-ais .hero-action .allowance{font-size:12px;line-height:1.5;max-width:none}
.hf3 #supported-ais .hero-action .button{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 22px -16px #4458acee}
.hf3 #supported-ais .hero-action .button span{transition:transform .2s ease}
.hf3 #supported-ais .hero-action .button:hover{background:var(--hr-blue-d);transform:translateY(-2px);box-shadow:0 18px 30px -16px #4458acf2}
.hf3 #supported-ais .hero-action .button:hover span{transform:translate(2px,-2px)}
.hf3 #supported-ais .hero-action .button:focus-visible{outline:3px solid var(--hr-blue);outline-offset:4px}
@media(max-width:1000px) and (min-width:761px){#supported-ais .hero-title{font-size:54px}#supported-ais .lede{font-size:17px}}
@media(max-width:760px){
  #supported-ais .hero-grid{padding-block:14px 20px}
  #supported-ais .tool-label{font-size:20px;gap:8px;margin-bottom:8px}
  #supported-ais .hero-title{font-size:33px;line-height:1.1;max-width:none;margin-bottom:12px}
  #supported-ais .lede{font-size:15px;line-height:1.55;max-width:36ch;margin-bottom:14px}
  #supported-ais .hero-action .allowance{font-size:12px;max-width:32ch}
}

/* ①bis La démo « switch » sous le bouton : l'objet du hero, comme celui de /handoff-v4/. La boucle porte sa propre scène. */
#supported-ais .sa-hero-demo{width:min(880px,calc(100% - var(--gutter,20px)*2));margin:56px auto 0;padding:0}
#supported-ais .sa-hero-demo .hb{display:block;width:100%}
#supported-ais .sa-hero-demo .hb:empty{aspect-ratio:4/3;border-radius:24px;background:linear-gradient(150deg,#F4F6FF 0%,#DCE2FA 100%)}
.hf3>.opening>#supported-ais{padding-bottom:96px}

/* ── ② Les huit IA (seconde refonte du 11/11, LEAD 09:0x UTC : « la même page qu'avant ») : AUCUNE carte.
   Une intro centrée à ancres, puis une liste éditoriale : une rangée pleine largeur par IA, un filet fin entre deux rangées,
   une rangée sur deux sur un fond à peine teinté. Le nom est au corps des h2 de /handoff-v4/ (Jakarta 44). ── */
.hf3 .hf-prototype .sa-directory{padding:0;background:var(--hr-paper)}
.hf3 .sa-intro{text-align:center;padding:72px 0 104px}
.hf3 .hf-prototype .sa-intro h2{margin:0 auto;max-width:22ch}
.hf3 .hf-prototype .sa-intro-lede{margin:22px auto 0;max-width:56ch;font:400 19px/1.6 DM,Arial,sans-serif;color:var(--hr-muted)}
.hf3 .sa-index ul{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hf3 .sa-index li{margin:0;padding:0}
.hf3 .sa-index a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--hr-lav);color:var(--hr-blue);font:600 15px/1.2 DM,Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.hf3 .sa-index a:hover{background:var(--hr-blue);color:#fff}
.hf3 .sa-index a:focus-visible{outline:3px solid var(--hr-blue);outline-offset:3px}
.hf3 .sa-list{border-bottom:1px solid color-mix(in srgb,var(--hr-ink) 12%,transparent)}
.hf3 .sa-row{margin:0;border-top:1px solid color-mix(in srgb,var(--hr-ink) 12%,transparent);scroll-margin-top:var(--header,88px)}
.hf3 .sa-row:nth-child(even){background:color-mix(in srgb,var(--hr-lav) 55%,var(--hr-paper))}
.hf3 .sa-row-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;padding:64px 0 68px}
.hf3 .hf-prototype .sa-row h3{font:700 44px/1.1 Jakarta,Arial,sans-serif;letter-spacing:-.04em;color:var(--hr-ink);margin:0}
.hf3 .hf-prototype .sa-host{margin:12px 0 0;font:500 14px/1.4 DM,Arial,sans-serif;color:var(--hr-muted);overflow-wrap:anywhere}
.hf3 .sa-row-body{padding-top:6px}
.hf3 .hf-prototype .sa-line{margin:0;font:400 19px/1.6 DM,Arial,sans-serif;color:var(--hr-ink);max-width:52ch}
.hf3 .sa-pills{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hf3 .sa-pills li{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 13px 7px 9px;border-radius:999px;background:var(--hr-lav);font:600 13px/1.2 DM,Arial,sans-serif;color:var(--hr-blue);white-space:nowrap}
.hf3 .sa-row:nth-child(even) .sa-pills li{background:var(--hr-paper)}
.hf3 .sa-pills li>svg{flex:none;width:18px;height:18px;padding:4px;border-radius:50%;background:var(--hr-lime);color:var(--hr-ink);box-sizing:border-box}
.hf3 .hf-prototype .sa-note{margin:18px 0 0;font:400 14px/1.55 DM,Arial,sans-serif;color:var(--hr-muted);max-width:60ch}
.hf3 .hf-prototype .sa-note+.sa-note{margin-top:6px}

@media (max-width:1100px){.hf3 .sa-row-in{gap:44px}.hf3 .hf-prototype .sa-row h3{font-size:38px}}
@media (max-width:900px){
  .hf3 .sa-intro{padding:48px 0 56px}
  .hf3 .hf-prototype .sa-intro-lede{font-size:17px}
  .hf3 .sa-index ul{margin-top:32px;gap:8px}
  .hf3 .sa-row-in{grid-template-columns:minmax(0,1fr);gap:16px;padding:40px 0 44px}
  .hf3 .sa-row-body{padding-top:0}
}
@media (max-width:760px){
  #supported-ais .sa-hero-demo{margin-top:32px}
  .hf3>.opening>#supported-ais{padding-bottom:56px}
}
@media (max-width:600px){
  .hf3 .hf-prototype .sa-row h3{font-size:34px}
  .hf3 .hf-prototype .sa-line{font-size:16px}
  .hf3 .sa-index a{min-height:40px;padding:0 16px;font-size:14px}
  .hf3 .sa-pills{margin-top:18px;gap:6px}
  .hf3 .sa-pills li{font-size:12.5px;padding:6px 11px 6px 8px}
}
@media (prefers-reduced-motion:reduce){
  .hf3 #supported-ais .hero-action .button,.hf3 #supported-ais .hero-action .button span{transition:none}
  .hf3 #supported-ais .hero-action .button:hover,.hf3 #supported-ais .hero-action .button:hover span{transform:none}
  .hf3 .sa-index a{transition:none}
}