/*
  Home V4 — ③ Outils en zigzag (PRODUIT, ZIGZAG, 10/11/2026 ; commande LEAD 14:37 UTC).
  UNE section, quatre blocs qui s'enchaînent : Handoff (texte à gauche, démo à droite), Merge (démo à gauche),
  Summarize, Memo. Chaque bloc : sur-titre = icône + nom de l'outil (forme .hf-kicker), grand titre, 2 ou 3 points,
  un lien vers la page de l'outil, la carte animée sur un fond coloré. Pas d'épinglage au défilement.

  Retours de Kevin sur la v3 servie (10/11, via LEAD, lot T3-B) :
    - pas de filet avant le sur-titre « Tools » ;
    - un outil = un écran : chaque bloc fait au moins la hauteur de l'écran (100svh), contenu centré ; on ne voit
      pas l'outil suivant avant de défiler. Sous 900 px, le bloc empilé (texte puis démo) reste d'environ un écran ;
    - un cadre de trop : on garde le fond coloré (.zz-scene) et la carte blanche (.hb-card) ; le cadre du milieu
      (le fond dégradé .hb-stage, ses anneaux et sa courbe) disparaît dans cette section, la carte blanche prend sa place ;
    - pas de bouton pause VISIBLE dans cette section : depuis la décision LEAD 10/11 (WCAG 2.2.2), celui des cartes
      n'apparaît qu'au focus clavier (boucle.css), ici comme ailleurs (voir zigzag.mjs).

  Contrat :
    <link rel="stylesheet" href="/assets/handoff-boucle-v4/boucle.css">
    <link rel="stylesheet" href="/assets/handoff-boucle-v4/outils.css">
    <link rel="stylesheet" href="/assets/home-sections-v4/zigzag.css">
    <script type="module" src="/assets/handoff-boucle-v4/boucle.mjs"></script>
    <script type="module" src="/assets/handoff-boucle-v4/outils.mjs"></script>
    <script type="module" src="/assets/home-sections-v4/zigzag.mjs"></script>   (après les deux autres)
    balisage : tools/produit-home-v4/fragments/outils.html
  Système V4 seulement : jetons --b-* de site/assets/navigation-v4/shell.css. Aucun appel hors du site.

  DA V4 (SOCLE 12/11/2026 ; LEAD 08:2x, ordre de Kevin « le workspace et le site suivent le panneau ») : les jetons --b-* et les
  polices LISENT le système (/assets/systeme-v4/uncook-v4.css, lié par la pose du shell avant shell.css) ; le sur-titre de
  chaque bloc porte la pastille de SON outil (.uck-pastille[data-outil] dans le balisage). Plus de @font-face propres à cette
  section : ce sont les fichiers du système (mêmes octets). Aucune valeur recopiée ; mêmes mots, même composition.
  NOTE D'INCIDENT 12/11 (QUALITÉ 10:58 CET, NON D1) : une page qui charge cette feuille sans le système doit rester celle de main.
  Chaque var(--uck-…) porte en repli la valeur EXACTE de main 5310f8d8 ; les @font-face de la section sont rétablis pour ce repli
  (un navigateur ne télécharge une face que si elle sert).
*/

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


.zz {
  --b-blue: var(--uck-accent, #4458AC); --b-ink: var(--uck-ink, #263153); --b-lavender: var(--uck-tint, #EEF0FC); --b-lime: var(--uck-lime, #E4EE99); --b-muted: var(--uck-ink-muted, #5C6480); --b-paper: var(--uck-paper, #FCFCFF);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 0 0;
  color: var(--b-ink);
  background:
    radial-gradient(ellipse 42% 28% at 100% 0%, #EEF0FC 0%, #EEF0FC00 72%),
    radial-gradient(ellipse 36% 24% at 0% 100%, #F4F8DA 0%, #F4F8DA00 72%),
    var(--b-paper);
  font: var(--uck-fw-body, 400) 16px/1.55 var(--uck-font-body, UckZzDM, 'DM Sans', Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.zz *, .zz *::before, .zz *::after { box-sizing: border-box; }

.zz-cadre { width: min(1200px, calc(100% - 112px)); margin-inline: auto; }

/* ---------- La tête de section ---------- */
.zz-tete { max-width: 760px; margin: 0 auto; text-align: center; }
.zz-kicker {
  display: inline-block;
  margin: 0 0 16px;
  font: var(--uck-fw-strong, 700) 12px/1.5 var(--uck-font-body, UckZzDM, 'DM Sans', Arial, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-blue);
}
.zz-titre {
  margin: 0;
  font: var(--uck-fw-head, 700) 52px/1.06 var(--uck-font-head, UckZzJakarta, 'Plus Jakarta Sans', Arial, sans-serif);
  letter-spacing: -.035em;
  color: var(--b-ink);
  text-wrap: balance;
}
.zz-chapo { margin: 18px auto 0; max-width: 40ch; font-size: 19px; line-height: 1.55; color: var(--b-muted); }

/* ---------- Un bloc : texte d'un côté, démo de l'autre ---------- */
.zz-blocs { list-style: none; margin: 0; padding: 0; }
.zz-bloc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.6fr);
  gap: 88px;
  align-items: center;
  align-content: center;
  /* Un outil = un écran (Kevin, 10/11) : le bloc fait la hauteur de l'écran, son contenu au centre. */
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: 56px;
}
.zz-bloc:nth-child(even) { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5fr); }
.zz-bloc:nth-child(even) .zz-scene { order: -1; }

/* Le sur-titre : la forme .hf-kicker, l'icône de l'outil à la place du filet. */
.zz-outil {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font: var(--uck-fw-strong, 700) 12px/1.5 var(--uck-font-body, UckZzDM, 'DM Sans', Arial, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-blue);
}
/* La pastille de l'outil : fond et encre viennent du système (.uck-pastille[data-outil]) ; ici seulement sa taille dans le sur-titre. */
.zz .zz-icone {
  display: grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px; border-radius: var(--uck-radius-icon, 10px);
  /* Système lié : la teinte de l'outil ([data-outil] → --uck-p-*). Sans système : le bleu plein et le glyphe blanc de main. */
  background: var(--uck-p-bg, var(--b-blue)); color: var(--uck-p-ink, #fff);
}
.zz .zz-icone svg { inline-size: 19px; block-size: 19px; display: block; }

.zz-h {
  margin: 0;
  font: var(--uck-fw-head, 700) 44px/1.08 var(--uck-font-head, UckZzJakarta, 'Plus Jakarta Sans', Arial, sans-serif);
  letter-spacing: -.032em;
  color: var(--b-ink);
  text-wrap: balance;
}
.zz-h span { display: block; color: var(--b-blue); }

.zz-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.zz-points li {
  position: relative;
  padding-inline-start: 34px;
  max-width: 44ch;
  font-size: 17px; line-height: 1.55;
  color: var(--b-muted);
}
.zz-points li::before {
  content: '';
  position: absolute; inset-inline-start: 0; top: .2em;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--b-lime);
}
/* La coche, en filets : aucune image. */
.zz-points li::after {
  content: '';
  position: absolute; inset-inline-start: 7.5px; top: calc(.2em + 5.5px);
  inline-size: 7px; block-size: 11px;
  border: solid var(--b-ink); border-width: 0 2.4px 2.4px 0;
  border-radius: 1px;
  transform: rotate(42deg);
}
.zz-points b { font-weight: var(--uck-fw-strong, 600); color: var(--b-ink); }

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

/* ---------- La scène : la carte animée sur un fond coloré ---------- */
.zz-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-inline-size: 0;
  padding: 40px;
  border-radius: 36px;
}
.zz-scene::before, .zz-scene::after { content: ''; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none; }
.zz-scene > .hb { display: block; inline-size: 100%; }
/* Un emplacement vide (module absent) garde la taille des cartes. */
.zz-scene > .hb:empty { aspect-ratio: 6 / 5; border-radius: 28px; background: #ffffff8c; box-shadow: inset 0 0 0 1px #ffffffcc; }

.zz-scene--lime {
  background: linear-gradient(150deg, #F6F9DE 0%, #E9F0B0 100%);
}
.zz-scene--lime::before { width: 70%; height: 38%; background: #fff; filter: blur(50px); opacity: .8; right: -18%; top: -12%; transform: rotate(-14deg); }
.zz-scene--lime::after { width: 60%; height: 30%; background: #dfe4fb; filter: blur(50px); opacity: .9; left: -20%; bottom: -8%; transform: rotate(10deg); }

.zz-scene--lavande {
  background: linear-gradient(150deg, #F2F4FE 0%, #DCE2FA 100%);
}
.zz-scene--lavande::before { width: 70%; height: 34%; background: #F2F6CF; filter: blur(50px); opacity: .95; left: -18%; top: -10%; transform: rotate(12deg); }
.zz-scene--lavande::after { width: 56%; height: 30%; background: #fff; filter: blur(46px); opacity: .85; right: -14%; bottom: -6%; transform: rotate(-8deg); }

.zz-scene--mixte {
  background: linear-gradient(135deg, #EEF4C6 0%, #EEF0FC 55%, #E1E6FB 100%);
}
.zz-scene--mixte::before { width: 64%; height: 32%; background: #fff; filter: blur(48px); opacity: .8; left: 18%; top: -14%; transform: rotate(-6deg); }

.zz-scene--ciel {
  background: linear-gradient(160deg, #E8ECFC 0%, #CCD5F6 100%);
}
.zz-scene--ciel::before { width: 66%; height: 34%; background: #F4F8DA; filter: blur(52px); opacity: .9; right: -16%; top: -10%; transform: rotate(-12deg); }
.zz-scene--ciel::after { width: 58%; height: 30%; background: #fff; filter: blur(48px); opacity: .7; left: -16%; bottom: -8%; transform: rotate(14deg); }

/* Un cadre de trop (Kevin, 10/11) : dans cette section, plus de fond dégradé entre le fond coloré et la carte blanche.
   La scène .hb-stage garde sa proportion (elle donne la hauteur) mais devient transparente ; la carte la remplit.
   Vaut pour les cartes d'outils (outils.*) et pour la boucle Handoff « court » (boucle.*, lue sans la modifier). */
.zz-scene > .hb .hb-stage { background: none; border-radius: 0; overflow: visible; }
.zz-scene > .hb .hb-bg { display: none; }
.zz-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);
}
/* NOTE D'INCIDENT (décision LEAD 10/11 sur recommandation PRODUIT) : le masquage « .zz-scene .hb-toggle { display: none } »
   est retiré — il aurait caché aussi le bouton du focus clavier. Le bouton reste invisible à la souris et au toucher
   (boucle.css) ; au focus clavier il se pose dans le coin de la carte blanche. */

/* La carte Handoff (boucle « court ») prend la hauteur des cartes d'outils (6/5, puis 4/5 sous 400 px). */
.zz-scene > .hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 6 / 5; }
@container hb (max-width: 400px) {
  .zz-scene > .hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 4 / 5; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .zz-cadre { width: calc(100% - 64px); }
  .zz-bloc, .zz-bloc:nth-child(even) { gap: 48px; }
  .zz-titre { font-size: 44px; }
  .zz-h { font-size: 36px; }
  .zz-scene { padding: 26px; border-radius: 30px; }
  .zz-points li { font-size: 16px; }
}

/* ---------- Mobile : une colonne, le texte puis la démo, dans le même ordre pour les quatre ---------- */
@media (max-width: 900px) {
  .zz { padding: 80px 0 0; }
  .zz-cadre { width: calc(100% - 48px); }
  .zz-titre { font-size: 34px; line-height: 1.1; }
  .zz-chapo { font-size: 17px; margin-top: 14px; }
  .zz-bloc, .zz-bloc:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px; }
  .zz-bloc:nth-child(even) .zz-scene { order: 0; }
  .zz-outil { margin-bottom: 14px; }
  .zz-h { font-size: 30px; line-height: 1.12; }
  .zz-points { margin-top: 22px; gap: 12px; }
  .zz-points li { max-width: none; }
  .zz-lien { margin-top: 24px; }
  .zz-scene { padding: 14px; border-radius: 24px; }
}
@media (max-width: 400px) {
  .zz-scene > .hb:empty { aspect-ratio: 4 / 5; border-radius: 20px; }
}

/* ---------- Train 4 (LEAD 10/11 17:1x) : un outil = UN écran aussi sur téléphone ----------
   Mesuré avant, à 390×844 : chaque bloc faisait 934–967 px (1,1 écran) — 405–439 px de texte, 421 px de démo, 108 px
   d'espacements. Deux gestes, rien de retiré :
     ① les espacements et le texte se resserrent un peu (titre 27 px, points 15 px ; sous 760 px de haut, 22 px et 14 px) ;
     ② la démo prend la hauteur qui reste : --zz-h = 100svh moins la réserve du texte (--zz-reserve), jamais plus haute
        que sa proportion 4/5, jamais plus basse que 315 px. Sa taille de texte suit sa hauteur (--hb-fs = hauteur / 26,2,
        le rapport de la carte 4/5 d'origine : 393 px pour 15 px). Toutes les mesures des cartes sont en em : la carte
        réduite est la même carte, à plus petite échelle — rien ne déborde, rien n'est coupé en haut.
   Vaut pour les cartes d'outils (outils.*) et la boucle Handoff « court » (boucle.*), lues sans les modifier ; carte
   étroite seulement (≤ 400 px, la carte 4/5). 1440 inchangé (aucune règle hors de ces requêtes). */
@media (max-width: 900px) {
  .zz { --zz-reserve: 460px; }
  .zz-bloc, .zz-bloc:nth-child(even) { gap: 16px; padding-block: 18px; }
  .zz-scene { padding: 10px; }
  .zz-outil { margin-bottom: 10px; }
  .zz-h { font-size: 27px; line-height: 1.1; }
  .zz-points { margin-top: 16px; gap: 8px; }
  .zz-points li { font-size: 15px; line-height: 1.5; }
  .zz-lien { margin-top: 16px; }
  @container hb (max-width: 400px) {
    .zz-scene > .hb .hb-stage,
    .zz-scene > .hb[data-handoff-boucle="court"] .hb-stage {
      --zz-h: min(125cqi, max(315px, calc(100svh - var(--zz-reserve))));
      --hb-fs: clamp(11px, calc(var(--zz-h) / 26.2), 15px);
      aspect-ratio: auto;
      block-size: var(--zz-h);
    }
  }
}
@media (max-width: 900px) and (max-height: 760px) {
  .zz { --zz-reserve: 332px; }
  /* La boucle Handoff « court » : son fil se resserre d'un cran pour que le premier message reste entier au-dessus du
     bandeau Vitals (sans cela, le fil remonte de 12 px à 375×667 — boucle.mjs followThread). */
  .zz-scene > .hb[data-handoff-boucle="court"] .hb-thread { padding-block-start: .6em; gap: .5em; }
  .zz-bloc, .zz-bloc:nth-child(even) { gap: 10px; padding-block: 10px; }
  .zz-scene { padding: 8px; border-radius: 20px; }
  .zz .zz-icone { inline-size: 28px; block-size: 28px; border-radius: var(--uck-radius-ai, 9px); }
  .zz-outil { margin-bottom: 8px; }
  .zz-h { font-size: 22px; }
  .zz-points { margin-top: 12px; gap: 6px; }
  .zz-points li { font-size: 14px; line-height: 1.45; padding-inline-start: 30px; }
  .zz-points li::before { inline-size: 20px; block-size: 20px; top: .1em; }
  .zz-points li::after { inset-inline-start: 6.5px; top: calc(.1em + 4.5px); }
  .zz-lien { margin-top: 12px; font-size: 15px; }
}