/*
  Home V4 — « Works with 8 AIs » (composant neuf, prêt à poser par PRODUIT, 10/11/2026), entre ③ Outils et ④ Vitals.
  Une section claire, même fond que ③ Outils (zigzag.css) : à gauche le sur-titre « Works with » (sans filet), le titre,
  la ligne d'appui, les 8 IA en pastilles de texte et le lien « See all 8 AIs » ; à droite la boucle Handoff « switch »
  sur un fond coloré, carte blanche, sans le cadre du milieu (même traitement que zigzag.css). Sous 900 px : une colonne,
  la démo dessous. Tient en une hauteur d'écran à 1440×900. Pas d'épinglage. Aucun appel hors du site.

  Pastilles : du TEXTE, aucun logo, aucune couleur de marque d'un tiers ; noms et ordre lus de works-with.mjs (IAS).
  Bouton pause/lecture de la boucle : celui de boucle.css, visible au seul focus clavier ; ce fichier ne le masque pas.
  Mouvement réduit : boucle.css coupe les transitions et animations de la carte ; ce fichier n'en pose aucune.

  Contrat :
    <link rel="stylesheet" href="/assets/handoff-boucle-v4/boucle.css">
    <link rel="stylesheet" href="/assets/works-with-v4/works-with.css">
    <script type="module" src="/assets/handoff-boucle-v4/boucle.mjs"></script>
    <script type="module" src="/assets/works-with-v4/works-with.mjs"></script>
    balisage : tools/works-with-v4/POSE.md
  Système V4 seulement : jetons --b-* de site/assets/navigation-v4/shell.css, posés ici comme dans zigzag.css.
*/

@font-face { font-family: UckWwJakarta; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/plus-jakarta-sans-700.ttf') format('truetype'); }
@font-face { font-family: UckWwDM; font-weight: 400; font-display: swap; src: url('/_home-v4/assets/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: UckWwDM; font-weight: 600; font-display: swap; src: url('/_home-v4/assets/dm-sans-600.ttf') format('truetype'); }
@font-face { font-family: UckWwDM; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/dm-sans-700.ttf') format('truetype'); }

.ww {
  --b-blue: #4458AC; --b-ink: #263153; --b-lavender: #EEF0FC; --b-lime: #E4EE99; --b-muted: #5C6480; --b-paper: #FCFCFF;
  --ww-ligne: #DADFF0;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: clamp(56px, 9vh, 104px) 0;
  color: var(--b-ink);
  background:
    radial-gradient(ellipse 40% 30% at 0% 0%, #F4F8DA 0%, #F4F8DA00 72%),
    radial-gradient(ellipse 42% 30% at 100% 100%, #EEF0FC 0%, #EEF0FC00 72%),
    var(--b-paper);
  font: 400 16px/1.55 UckWwDM, 'DM Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ww *, .ww *::before, .ww *::after { box-sizing: border-box; }

.ww-cadre {
  width: min(1200px, calc(100% - 112px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  gap: 80px;
  align-items: center;
}
.ww-copie { min-inline-size: 0; }

/* Le sur-titre : la forme .zz-kicker, sans filet ni tiret. */
.ww-kicker {
  display: inline-block;
  margin: 0 0 16px;
  font: 700 12px/1.5 UckWwDM, 'DM Sans', Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-blue);
}
.ww-titre {
  margin: 0;
  font: 700 52px/1.06 UckWwJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
  letter-spacing: -.035em;
  color: var(--b-ink);
  text-wrap: balance;
}
.ww-chapo { margin: 18px 0 0; max-width: 40ch; font-size: 19px; line-height: 1.55; color: var(--b-muted); }

/* Les 8 IA : des pastilles de texte, neutres. */
.ww-ias {
  list-style: none;
  margin: 32px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ww-ia {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ww-ligne), 0 6px 16px -12px #26315366;
  font: 600 15px/1.3 UckWwDM, 'DM Sans', Arial, sans-serif;
  color: var(--b-ink);
  white-space: nowrap;
}

.ww-lien {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 30px;
  font: 600 16px/1.3 UckWwDM, 'DM Sans', Arial, sans-serif;
  color: var(--b-blue); text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.ww-lien:hover { border-bottom-color: transparent; }
.ww-lien:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 4px; border-radius: 3px; }

/* ---------- La scène : la boucle switch sur un fond coloré ---------- */
.ww-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-inline-size: 0;
  padding: 40px;
  border-radius: 36px;
  background: linear-gradient(135deg, #EEF4C6 0%, #EEF0FC 55%, #E1E6FB 100%);
}
.ww-scene::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 999px;
  width: 64%; height: 32%; left: 18%; top: -14%;
  background: #fff; filter: blur(48px); opacity: .8; transform: rotate(-6deg);
}
.ww-scene > .hb { display: block; inline-size: 100%; }
/* Un emplacement vide (module absent) garde la taille de la carte. */
.ww-scene > .hb:empty { aspect-ratio: 4 / 3; border-radius: 28px; background: #ffffff8c; box-shadow: inset 0 0 0 1px #ffffffcc; }

/* Un cadre de trop (Kevin, 10/11, repris de zigzag.css) : pas de fond dégradé entre le fond coloré et la carte blanche.
   La scène .hb-stage garde sa proportion (boucle.css : 4/3, puis 10/13 sous 520 px) mais devient transparente ; la carte la remplit. */
.ww-scene > .hb .hb-stage { background: none; border-radius: 0; overflow: visible; }
.ww-scene > .hb .hb-bg { display: none; }
.ww-scene > .hb .hb-card {
  inset: 0;
  inline-size: auto;
  margin: 0;
  border-radius: clamp(16px, 3.4cqi, 26px);
  box-shadow: 0 1.6em 3.6em -1.4em rgba(38, 49, 83, .42), 0 .2em .6em rgba(38, 49, 83, .08);
}

/* ---------- Grand écran : la section tient la hauteur de la fenêtre, contenu centré ---------- */
@media (min-width: 901px) {
  .ww { min-block-size: 100vh; min-block-size: 100svh; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .ww-cadre { width: calc(100% - 64px); gap: 48px; }
  .ww-titre { font-size: 44px; }
  .ww-scene { padding: 26px; border-radius: 30px; }
}

/* ---------- Mobile : une colonne, le texte puis la démo ---------- */
@media (max-width: 900px) {
  .ww { padding: 80px 0; }
  .ww-cadre { width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ww-titre { font-size: 34px; line-height: 1.1; }
  .ww-chapo { font-size: 17px; margin-top: 14px; }
  .ww-ias { margin-top: 24px; gap: 8px; }
  .ww-ia { padding: 8px 14px; font-size: 14px; }
  .ww-lien { margin-top: 24px; }
  .ww-scene { padding: 14px; border-radius: 24px; }
}
@media (max-width: 400px) {
  .ww-scene > .hb:empty { aspect-ratio: 10 / 13; border-radius: 20px; }
}