/* Anthelixa · « Nos workers savent dire non » (planche A, validée par Yann le 13/10/2026). Chargée après site.css, sur
   deux pages seulement :
   - la page des workers (workers/index.html), dont elle est le haut : à gauche le titre, le chapeau, la preuve et l'appel ;
     à droite les cinq refus, chacun barré net d'un trait blanc qui révèle ce que le worker fait à la place, puis la chute.
     Sur téléphone : le titre, les refus, puis le reste ;
   - l'accueil (index.html), où les cinq refus sont la preuve du bloc « Le problème n'a jamais été la technologie », sans
     titre-slogan ni chute (.refus--preuve) : sur ordinateur, un refus et sa réponse sur une même rangée.
   L'état de repos est l'état final (tout barré, chaque réponse visible) : sans JavaScript, ou en prefers-reduced-motion,
   rien ne bouge et tout se lit, en liste. Le mouvement n'existe que sous .refus.est-anime, posée par assets/js/refus.js.
   Aucun orange ici : le seul point orange est celui du titre de la page. */

/* ------------------------------------------------------------------ le haut de la page des workers */
.refus-heros .breadcrumb { margin-bottom: 28px; }
.refus-grille { display: grid; gap: 32px; grid-template-areas: "titre" "refus" "corps"; }
.refus-titre { grid-area: titre; min-width: 0; }
.refus-titre .eyebrow { margin-bottom: 18px; }
.refus-heros .refus-titre .title-page { max-width: 12ch; }
.refus-heros .refus { grid-area: refus; }
.refus-corps { grid-area: corps; min-width: 0; }
.refus-corps .chapeau { margin-top: 0; }
.refus-corps .chapeau strong { font-weight: 500; color: var(--blanc); }
.refus-corps .actions { margin-top: 32px; }
@media (min-width: 1000px) {
  .refus-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 0;
    grid-template-areas: "titre refus" "corps refus";
  }
  .refus-corps .chapeau { margin-top: 26px; }
}

/* ------------------------------------------------------------------ les refus */
.refus { min-width: 0; }
.refus__titre { font-family: var(--texte); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--blanc-doux); }
.refus__liste { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-nuit); }
.refus__ligne { display: block; padding: 13px 0 14px; border-bottom: 1px solid var(--filet-nuit); }
/* le refus : un bloc qui porte le verbe en ligne (inline), pour que son trait suive chaque ligne du texte */
.refus__non { display: block; }
.refus__verbe {
  display: inline; font-family: var(--display); font-weight: 600;
  font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m);
  color: var(--gris-2);
  /* le trait : un fond d'une seule couleur, tiré de gauche à droite ; « clone » le redonne à chaque ligne du texte,
     sinon un refus sur deux lignes serait barré entre les deux */
  background-image: linear-gradient(var(--blanc), var(--blanc));
  background-repeat: no-repeat; background-position: 0 58%; background-size: 100% 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* ce qu'il fait à la place : une flèche au trait, puis la phrase, en blanc (le refus s'éteint, la réponse s'allume) */
.refus__place { display: grid; margin-top: 4px; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; font-size: 16px; line-height: 1.45; color: var(--blanc); }
.refus__place::before {
  content: ""; width: 16px; height: 16px; margin-top: 3px; background: var(--blanc);
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
}

.refus__chute {
  margin-top: 28px; font-family: var(--display); font-weight: 600;
  font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); color: var(--blanc);
}
.refus__chute > span { display: block; }
.refus__commandes { margin-top: 22px; }
.refus__commandes:not(:has(.commande:not([hidden]))) { display: none; }

/* ------------------------------------------------------------------ l'accueil : la preuve, sous la carte d'Anthelixa */
.refus--preuve { margin-top: 40px; }
@media (min-width: 900px) { .refus--preuve { margin-top: 72px; } }
.refus--preuve .refus__verbe { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); background-position: 0 60%; background-size: 100% 2px; }
.refus--preuve .refus__ligne { padding: 12px 0 13px; }
.refus--preuve .refus__place { font-size: 16px; }
@media (min-width: 900px) {
  /* un refus et sa réponse sur une même rangée : le tableau « non, à la place » */
  .refus--preuve .refus__ligne { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 40px; align-items: baseline; padding: 16px 0 17px; }
  .refus--preuve .refus__place { margin-top: 0; font-size: 17px; }
}
.refus__lien { margin-top: 18px; font-size: 17px; }

/* ------------------------------------------------------------------ le mouvement */
.refus__ligne:nth-child(1) { --d: .45s; }
.refus__ligne:nth-child(2) { --d: 1.15s; }
.refus__ligne:nth-child(3) { --d: 1.85s; }
.refus__ligne:nth-child(4) { --d: 2.55s; }
.refus__ligne:nth-child(5) { --d: 3.25s; }
.refus { --fin: 4.2s; }
/* l'accueil : plus court, moins de cinq secondes en tout, sans commande */
.refus--preuve .refus__ligne:nth-child(1) { --d: .15s; }
.refus--preuve .refus__ligne:nth-child(2) { --d: .6s; }
.refus--preuve .refus__ligne:nth-child(3) { --d: 1.05s; }
.refus--preuve .refus__ligne:nth-child(4) { --d: 1.5s; }
.refus--preuve .refus__ligne:nth-child(5) { --d: 1.95s; }

/* l'accueil, avant d'entrer à l'écran : rien n'est encore barré (posé par refus.js, seulement si le mouvement est accepté) */
.refus.est-pret .refus__ligne { opacity: 0; }
.refus.est-anime .refus__ligne { animation: refus-entree .45s var(--ease) var(--d) both; }
.refus.est-anime .refus__verbe {
  animation:
    refus-trait .3s cubic-bezier(.7, 0, .25, 1) calc(var(--d) + .4s) both,
    refus-eteint .4s ease calc(var(--d) + .7s) both;
}
.refus--preuve.est-anime .refus__verbe { animation-name: refus-trait-fin, refus-eteint; }
.refus.est-anime .refus__place { animation: refus-raison .4s var(--ease) calc(var(--d) + .7s) both; }
.refus.est-anime .refus__chute { animation: refus-chute .6s var(--ease) var(--fin) both; }
.refus.est-en-pause *, .refus.est-en-pause { animation-play-state: paused !important; }

@keyframes refus-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes refus-trait { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
@keyframes refus-trait-fin { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
@keyframes refus-eteint { from { color: var(--blanc); } to { color: var(--gris-2); } }
@keyframes refus-raison { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes refus-chute { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* rien ne bouge si le visiteur demande moins de mouvement, même si une classe restait posée */
@media (prefers-reduced-motion: reduce) {
  .refus.est-pret .refus__ligne { opacity: 1; }
  .refus.est-anime .refus__ligne, .refus.est-anime .refus__verbe, .refus.est-anime .refus__place, .refus.est-anime .refus__chute { animation: none; }
}

/* sur papier : le trait et le texte passent au noir (l'impression n'imprime pas les fonds) */
@media print {
  .refus__verbe { background: none; text-decoration: line-through; color: #000 !important; }
  .refus__place::before { content: "→"; width: auto; height: auto; margin: 0; background: none; -webkit-mask: none; mask: none; }
  .refus__commandes { display: none; }
}