/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cabestian — la vignette « interrogeable » : on pose une question, le dossier répond.
   ───────────────────────────────────────────────────────────────────────────────────────
   Ce qu'elle remplace : un schéma qui figurait la question par des barres grises, c'est-à-
   dire par du faux texte. Il montrait qu'il se passait quelque chose sans dire quoi — et
   c'est la fonction qui différencie le produit qui s'en trouvait la moins claire de la page.

   Ici, la vraie question s'écrit et la vraie réponse tombe, en trois temps : on parle, ça
   s'écrit, ça répond. L'orbe est un portage vanilla du « Siri Orb » de SmoothUI
   (github.com/educlopez/smoothui, MIT), reteinté dans la palette Cabestian. Son mécanisme
   est un maillage de sept dégradés coniques tournant à des vitesses premières entre elles,
   flouté et contrasté, recouvert d'UNE TRAME DE POINTS peinte de la couleur exacte de la
   page. C'est la piste de marque « un point vaut une pièce » appliquée à une sphère, et
   c'est ce qui a décidé du choix de ce composant plutôt que d'un dégradé animé.

   Sans JavaScript, la vignette est servie dans son état final : question écrite, réponse
   affichée. Le script ne fait que la démonter puis la remonter (même principe que les
   schémas des autres cartes, cf. champ-scene.js).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}

.qz{
  /* Palette Cabestian. Les bleus de la marque dominent ; le bordeaux ne tient qu'un stop
     sur quatre — assez pour signer, pas assez pour teindre l'image (retour Maxime : pas de
     bordeaux dominant dans un visuel). La saturation est tenue à 1,1 et non 1,35 comme
     dans l'original : au-delà, le maillage vire au cyan et sort de la charte. */
  --qz-c1:oklch(55% 0.11 255);   /* azurite vif   */
  --qz-c2:oklch(79% 0.055 248);  /* cashmere      */
  --qz-c3:oklch(36% 0.075 258);  /* azurite fondu */
  --qz-c4:oklch(45% 0.14 20);    /* bordeaux      */
  --qz-page:var(--paper-top,#F5F8FC);   /* la couleur qui perce la trame de points */
  --qz-ink:var(--light-ink,#0B1B27);
  --qz-soft:var(--light-soft,#3D5168);
  --qz-rule:var(--rule,rgba(11,27,39,.15));
  --qz-accent:var(--ruby,#63001F);
  display:block;
}

/* ── la barre ────────────────────────────────────────────────────────────────────────── */
.qz-barre{
  display:flex;align-items:center;gap:13px;padding:11px 13px 11px 11px;
  background:#fff;border:1px solid var(--qz-rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(11,27,39,.04),0 8px 24px -16px rgba(11,27,39,.28);
}
.qz-txt{
  flex:1 1 auto;min-width:0;font-size:var(--t-base);line-height:1.4;color:var(--qz-ink);
  letter-spacing:-.005em;
  /* DEUX lignes, pas une. Les questions sont celles que la carte cite déjà entre
     guillemets — jusqu'à cent signes : « Quelles tâches ont glissé depuis la dernière
     révision, et lesquelles touchent le chemin critique ? ». Sur une ligne, il aurait
     fallu les raccourcir, et le dessin aurait cessé de dire ce que le texte affirme.
     La hauteur est réservée d'emblée (min-height) : sans elle, la barre grandissait d'une
     ligne au milieu de la frappe et faisait sauter tout ce qui suit. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.4em);
}
.qz-caret{
  display:inline-block;width:1.5px;height:1.05em;background:var(--qz-accent);
  vertical-align:-.16em;margin-left:2px;opacity:0;
}
.qz-envoi{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--qz-accent);
  display:grid;place-items:center;opacity:.32;transition:opacity .3s ease;
}
.qz-envoi svg{width:12px;height:12px}

/* ── l'orbe ──────────────────────────────────────────────────────────────────────────── */
.qz-orb{
  --orb:34px;
  /* Réglages liés à la taille : à 34 px, le flou, le contraste, le pas de trame et le
     rayon de masque de l'original (calibrés pour 192 px) écrasaient la sphère en un point
     noir. Ce sont les valeurs que sa fonction de mise à l'échelle donne pour cette taille. */
  --blur:1px;--contrast:1.44;--dot:.14px;--spread:.5px;--mask:5%;--rim:2px;
  --tour:26s;--derive:11s;
  position:relative;flex:0 0 auto;display:grid;grid-template-areas:"stack";
  width:var(--orb);height:var(--orb);border-radius:50%;overflow:hidden;isolation:isolate;
  transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1);
}
.qz-orb::before,.qz-orb::after,.qz-orb > i{
  content:"";display:block;grid-area:stack;width:100%;height:100%;border-radius:50%;
}
.qz-orb::before{
  background:
    conic-gradient(from calc(var(--angle) *  2) at 25% 70%, var(--qz-c3), transparent 20% 80%, var(--qz-c3)),
    conic-gradient(from calc(var(--angle) *  2) at 45% 75%, var(--qz-c2), transparent 30% 60%, var(--qz-c2)),
    conic-gradient(from calc(var(--angle) * -3) at 80% 20%, var(--qz-c1), transparent 40% 60%, var(--qz-c1)),
    conic-gradient(from calc(var(--angle) *1.5) at 60% 35%, var(--qz-c4), transparent 25% 75%, var(--qz-c4)),
    conic-gradient(from calc(var(--angle) *  2) at 15%  5%, var(--qz-c2), transparent 10% 90%, var(--qz-c2)),
    conic-gradient(from calc(var(--angle) *  1) at 20% 80%, var(--qz-c1), transparent 10% 90%, var(--qz-c1)),
    conic-gradient(from calc(var(--angle) * -2) at 85% 10%, var(--qz-c3), transparent 20% 80%, var(--qz-c3));
  box-shadow:inset var(--qz-page) 0 0 var(--spread) calc(var(--spread) * .2);
  filter:blur(var(--blur)) contrast(var(--contrast)) saturate(1.1);
  animation:qz-tourne var(--tour) linear infinite;
}
/* LA TRAME : des points de la couleur de la page, posés sur le maillage */
.qz-orb::after{
  background-image:radial-gradient(circle at center, var(--qz-page) var(--dot), transparent var(--dot));
  background-size:calc(var(--dot) * 2) calc(var(--dot) * 2);
  backdrop-filter:blur(calc(var(--blur) * 2)) contrast(calc(var(--contrast) * 2));
  mix-blend-mode:overlay;
  mask-image:radial-gradient(black var(--mask), transparent 75%);
}
/* le reflet qui dérive : sans lui, le disque reste plat */
.qz-orb .qz-sheen{
  background:
    radial-gradient(circle at 30% 24%, hsl(0 0% 100% / .3), transparent 34%),
    radial-gradient(circle at 72% 80%, hsl(0 0% 100% / .07), transparent 48%);
  mix-blend-mode:screen;
  animation:qz-derive var(--derive) ease-in-out infinite alternate;
}
/* l'arête éclairée en haut, l'ombre en bas : c'est ce qui en fait une sphère */
.qz-orb .qz-rim{
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100% / .16),
    inset 0 var(--rim) calc(var(--rim) * 2) hsl(0 0% 100% / .22),
    inset 0 calc(var(--rim) * -1.2) calc(var(--rim) * 2.4) hsl(0 0% 0% / .4);
  pointer-events:none;
}
@keyframes qz-tourne{to{--angle:360deg}}
@keyframes qz-derive{
  0%{transform:translate(-6%,-4%) scale(1.05)}
  100%{transform:translate(7%,6%) scale(1.12)}
}

/* ── TEMPS 1 · l'écoute ──────────────────────────────────────────────────────────────
   Cinq barres qui montent et retombent à des rythmes décalés. Ce n'est pas une vraie
   mesure du son : c'est le signe convenu qu'un micro est ouvert, comme les trois points
   d'un message en cours de frappe. La vignette ne prétend pas écouter. */
/* Repliée par défaut, et non pas simplement transparente : posée en `flex:1 1 auto` avec
   une opacité nulle, elle continuait d'occuper sa place et volait 215 px au texte, qui se
   tronquait alors en plein milieu de la question. Elle ne prend de la largeur que pendant
   le temps où elle parle. */
.qz-onde{
  flex:0 0 0;width:0;overflow:hidden;
  display:flex;align-items:center;gap:4px;height:22px;
  opacity:0;transition:opacity .3s ease;
}
.qz-onde span{
  display:block;width:3px;border-radius:2px;background:var(--qz-c1);
  height:20%;transform-origin:center;
}
.qz-etat-ecoute .qz-onde{flex:1 1 auto;width:auto;opacity:1}
.qz-etat-ecoute .qz-onde span{animation:qz-parle 1.05s ease-in-out infinite}
.qz-onde span:nth-child(1){animation-delay:0s}
.qz-onde span:nth-child(2){animation-delay:.13s}
.qz-onde span:nth-child(3){animation-delay:.27s}
.qz-onde span:nth-child(4){animation-delay:.09s}
.qz-onde span:nth-child(5){animation-delay:.21s}
@keyframes qz-parle{
  0%,100%{height:22%}
  30%{height:86%}
  55%{height:40%}
  75%{height:64%}
}
/* pendant l'écoute l'orbe s'ouvre un peu et tourne plus vite : il est « attentif » */
.qz-etat-ecoute .qz-orb{--orb:38px;--tour:9s}
.qz-etat-ecoute .qz-txt{display:none}
.qz-etat-ecoute .qz-onde{min-height:calc(2 * 1.4em)}

/* ── TEMPS 2 · l'écriture ────────────────────────────────────────────────────────────── */
.qz-etat-ecrit .qz-caret{opacity:1;animation:qz-blink 1.06s steps(1) infinite}
@keyframes qz-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── TEMPS 3 · la réponse ────────────────────────────────────────────────────────────── */
.qz-etat-repond .qz-caret{opacity:0;animation:none}
.qz-etat-repond .qz-envoi{opacity:1}
/* l'orbe réfléchit : plus vif un instant, puis il revient à son repos */
.qz-etat-cherche .qz-orb{--tour:5s}

.qz-rep{margin-top:18px;display:grid;gap:0;list-style:none;padding:0}
.qz-rep li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;
  padding:9px 0;border-top:1px solid var(--qz-rule);
}
.qz-rep .t{font-size:var(--t-petit);color:var(--qz-ink);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qz-rep .d{font-family:var(--fm);font-size:var(--t-petit);color:var(--qz-accent);white-space:nowrap}
.qz-rep .d.nul{color:var(--qz-soft)}
/* `.qz .qz-src` et non `.qz-src` : dans la carte d'ouverture, `.c-hero p` (cards.css, une
   classe ET un élément) l'emportait et passait la source en 16 px sur deux lignes, là où
   elle est dessinée en micro. C'était la moitié du vide mesuré sous la vignette à 390 px. */
.qz .qz-src{margin-top:12px;font-family:var(--fm);font-size:var(--t-micro);line-height:1.5;letter-spacing:.04em;
  color:var(--qz-soft);max-width:none}

/* état démonté, posé par le script seul : sans lui, tout est visible (cf. l'en-tête) */
.qz-arme .qz-rep li,
.qz-arme .qz-src{opacity:0;transform:translateY(6px)}
.qz-rep li,.qz-src{transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.qz-arme.qz-etat-repond .qz-rep li,
.qz-arme.qz-etat-repond .qz-src{opacity:1;transform:none}

/* ── Posée dans la carte d'ouverture ─────────────────────────────────────────────────
   Elle occupe la place du schéma qu'elle remplace, et reprend ses deux règles de calage :
   la largeur plafond de la toile (476 px) et l'alignement sur la fin du rail. */
.c-hero .viz .qz{flex:1 1 auto;max-width:476px;margin-left:auto}
@media (max-width:1060px){
  .c-hero .viz .qz{margin-left:0}   /* empilée, elle repart du bord gauche */

  /* Carte empilée : pendant l'écoute et la frappe (quatre secondes et demie), la place
     réservée à la réponse restait un trou de 230 px entre la barre et « Interrogeable »,
     que le lecteur mobile traverse en défilant (audit du 23/09, m6). La place reste
     réservée — la retirer ferait sauter le texte de la carte au moment de la réponse —,
     mais elle se lit comme une réponse EN ATTENTE : les filets des quatre lignes sont
     posés, et deux traits pâles tiennent la place du libellé et du délai. Les traits
     s'effacent quand la réponse arrive, ligne par ligne, avec la cascade du script
     (transition-delay posé sur chaque li, hérité ici). À côte à côte, le schéma voisin
     occupe la hauteur : rien ne change au-dessus de 1060 px. */
  .qz-arme .qz-rep li{
    opacity:1;transform:none;
    background:
      linear-gradient(var(--qz-rule),var(--qz-rule)) left center/var(--qz-ph,52%) 7px no-repeat,
      linear-gradient(var(--qz-rule),var(--qz-rule)) right center/34px 7px no-repeat;
    transition:background-size .35s ease;
  }
  .qz-arme .qz-rep li:nth-child(2){--qz-ph:40%}
  .qz-arme .qz-rep li:nth-child(3){--qz-ph:28%}
  .qz-arme .qz-rep li:nth-child(4){--qz-ph:46%}
  .qz-arme .qz-rep li>*{opacity:0;transform:translateY(6px);
    transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);transition-delay:inherit}
  .qz-arme.qz-etat-repond .qz-rep li{background-size:0 7px,0 7px}
  .qz-arme.qz-etat-repond .qz-rep li>*{opacity:1;transform:none}
}

@media (max-width:620px){
  /* TROIS lignes sous 620 px : mesuré à 390 px de fenêtre, la colonne de texte tombe à
     240 px une fois l'orbe et le bouton déduits, et la plus longue des questions (98
     signes, celle de la planification) réclame alors une ligne de plus. Sur deux, elle
     se coupait avant le point d'interrogation — soit exactement le mot qui en fait une
     question. */
  .qz-txt{font-size:13.5px;-webkit-line-clamp:3;min-height:calc(3 * 1.4em)}
  .qz-etat-ecoute .qz-onde{min-height:calc(3 * 1.4em)}
  .qz-barre{padding:10px 11px 10px 10px;gap:11px}
  .qz-orb{--orb:30px}
}

/* Mouvement réduit : aucune séquence, aucune rotation. La vignette est déjà dans son état
   final — c'est le principe de tous les dessins de ces pages. */
@media (prefers-reduced-motion:reduce){
  .qz-orb::before,.qz-orb .qz-sheen,.qz-onde span,.qz-caret{animation:none}
  .qz-orb{transition:none}
  .qz-rep li,.qz-src{transition:none}
}