/* Anthelixa · « Le journal n'a pas de gomme » (planche C, validée par Yann le 13/10/2026). Chargée après site.css, sur la
   page Sécurité et données seulement (et sa version anglaise, en/security-and-data.html, depuis le 14/10).

   Le haut de la page, en registre Nuit : à gauche le titre, le chapeau, la preuve, l'appel ; à droite le journal d'une
   nuit (exemple, données fictives), une ligne par entrée : l'heure, le signe de l'acteur, le résumé, l'empreinte. Chaque
   ligne s'ouvre sur son entrée (un <details> natif), avec l'essai « Essayer d'effacer cette ligne ».
   Dessous, « Et si quelqu'un passait outre ? » : trois maillons de la chaîne ; passer outre le stockage change une ligne,
   son empreinte aussi, et la ligne suivante ne la suit plus.
   Le mono sert aux données du produit : heures, numéros, actes, empreintes, messages du stockage.
   Les signes : le carré, un worker ; le rond, une personne ; l'anneau, un déclencheur (posé par une personne).
   L'état de repos est l'état final ; le mouvement n'existe que sous .journal-ex.est-anime (assets/js/journal.js), jamais
   en prefers-reduced-motion. Aucun orange ici : le seul point orange est celui du titre de la page. */

/* ------------------------------------------------------------------ le haut de la page */
.journal-heros .eyebrow { margin-bottom: 18px; }
.journal-grille { display: grid; gap: 32px; align-items: start; grid-template-areas: "titre" "journal" "corps"; }
.journal-titre { grid-area: titre; min-width: 0; }
.journal-heros .journal-titre .title-page { max-width: 14ch; }
.journal-titre .chapeau strong { font-weight: 500; color: var(--blanc); }
.journal-ex { grid-area: journal; min-width: 0; }
.journal-corps { grid-area: corps; min-width: 0; }
.journal-corps .preuve { margin-top: 0; }
.journal-corps .actions { margin-top: 32px; }
@media (min-width: 1000px) {
  .journal-grille {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 0;
    grid-template-areas: "titre journal" "corps journal";
  }
  .journal-corps .preuve { margin-top: 26px; }
}

/* ------------------------------------------------------------------ le journal */
.journal-ex { border: 1px solid var(--filet-nuit-fort); border-radius: var(--rayon); }
.journal-ex__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--filet-nuit); }
.journal-ex__titre { display: inline-flex; align-items: center; gap: 10px; font-family: var(--texte); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.journal-ex__titre .picto { width: 18px; height: 18px; }
.journal-ex__aide { font-size: 14px; line-height: 1.4; color: var(--blanc-doux); }
.journal-ex__liste { margin: 0; padding: 6px 0; list-style: none; }

.entree summary {
  display: grid; grid-template-columns: 68px 14px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  padding: 9px 18px; list-style: none; cursor: pointer;
}
.entree summary::-webkit-details-marker { display: none; }
.entree summary:hover, .entree details[open] summary { background: var(--filet-nuit); }
.entree summary:focus-visible { outline: 2px solid var(--blanc); outline-offset: -2px; }
.entree__heure { font-family: var(--mono); font-size: 13.5px; line-height: 1.5; color: var(--blanc-doux); font-variant-numeric: tabular-nums; }
.entree__resume { font-size: 15.5px; line-height: 1.45; color: var(--blanc); }
.entree__empreinte { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--gris-2); }
.entree__empreinte:empty { display: none; }
/* sur la ligne survolée ou ouverte (fond gris 3), l'empreinte passe en blanc doux : 4,5:1 au moins */
.entree summary:hover .entree__empreinte, .entree details[open] .entree__empreinte { color: var(--blanc-doux); }

.entree__signe { display: inline-block; width: 10px; height: 10px; align-self: center; background: var(--blanc); }
.entree__signe--worker { border-radius: 2px; }
.entree__signe--humain { border-radius: 50%; }
.entree__signe--declencheur { border-radius: 50%; background: transparent; border: 1.5px solid var(--blanc); }

/* le matin : la même chaîne, une autre lumière */
.entree--matin { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--filet-nuit-fort); }

/* l'entrée ouverte */
.entree__detail { padding: 4px 18px 14px 112px; background: var(--filet-nuit); }
.entree__champs { display: grid; gap: 6px; margin: 0; padding-top: 8px; border-top: 1px solid var(--filet-nuit-fort); }
.champ { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 14px; }
.champ dt { font-size: 13.5px; line-height: 1.5; color: var(--blanc-doux); }
.champ dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--blanc); overflow-wrap: anywhere; }
.champ__mono { font-family: var(--mono); font-size: 13px !important; }

/* l'essai, sur la ligne ouverte */
.entree__effacer { margin-top: 12px; }
.entree__reponse:empty { display: none; }
.entree__reponse { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--blanc); font-size: 14.5px; line-height: 1.5; color: var(--blanc); }
.entree__reponse p + p { margin-top: 4px; color: var(--blanc-doux); }
.entree__reponse strong { display: block; font-weight: 500; }
.entree__reponse .message { font-size: 13.5px; }

@media (max-width: 639.98px) {
  .entree summary { grid-template-columns: auto 10px minmax(0, 1fr); row-gap: 2px; padding: 10px 14px; }
  .entree__resume { grid-column: 1 / -1; }
  .entree__empreinte { grid-column: 1 / -1; }
  .entree__detail { padding: 4px 14px 14px; }
  .champ { grid-template-columns: minmax(0, 1fr); }
  .journal-ex__tete { padding-inline: 14px; }
}

.journal-ex__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 18px 16px; border-top: 1px solid var(--filet-nuit); }
.journal-ex__exemple { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-2); }
.journal-ex__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; line-height: 1.4; color: var(--blanc-doux); }
.journal-ex__legende .entree__signe { margin-left: 6px; }
.journal-ex__legende .entree__signe:first-child { margin-left: 0; }
@media (max-width: 639.98px) { .journal-ex__pied { padding-inline: 14px; } }

/* ------------------------------------------------------------------ le mouvement : la nuit s'écrit */
.entree:nth-child(1) { --d: .4s; }
.entree:nth-child(2) { --d: 1.2s; }
.entree:nth-child(3) { --d: 2s; }
.entree:nth-child(4) { --d: 2.8s; }
.entree:nth-child(5) { --d: 3.6s; }
.entree:nth-child(6) { --d: 4.4s; }
.entree:nth-child(7) { --d: 5.6s; }
.entree:nth-child(8) { --d: 6.4s; }
@media (prefers-reduced-motion: no-preference) {
  .journal-ex.est-anime .entree { animation: c-ligne .3s ease var(--d) both; }
  .journal-ex.est-anime .entree__resume { animation: c-ecrit .6s steps(24, end) var(--d) both; }
  .journal-ex.est-anime .entree__empreinte { animation: c-scelle .35s ease calc(var(--d) + .6s) both; }
  .journal-ex.est-en-pause, .journal-ex.est-en-pause * { animation-play-state: paused !important; }
  .entree summary.est-refuse { animation: c-refus .42s cubic-bezier(.36, .07, .19, .97) both; }
  .maillon.est-refuse { animation: c-refus .42s cubic-bezier(.36, .07, .19, .97) both; }
}
@keyframes c-ligne { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-ecrit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes c-scelle { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-refus { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }

/* ------------------------------------------------------------------ l'essai : « Et si quelqu'un passait outre ? » */
.essai .title-section { max-width: 18ch; }
.essai-grille { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .essai-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; } }
.essai-texte, .essai__banc { min-width: 0; }
.essai-texte .lead { max-width: 52ch; }

.chaine { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.maillon { position: relative; display: grid; row-gap: 6px; padding: 14px 16px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier-chaud); }
.maillon + .maillon::before { content: ""; position: absolute; left: 28px; top: -23px; width: 2px; height: 22px; background: var(--nuit); }
.maillon__n { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris-3); }
.maillon__resume { font-size: 16px; line-height: 1.45; }
.maillon__empreintes { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--gris-3); }
.maillon__empreintes b { font-weight: 500; color: var(--nuit); }
.maillon__empreintes:has(b:empty) { display: none; }
.maillon--cible { border-color: var(--nuit); }

.maillon.est-falsifie { border-width: 2px; padding: 13px 15px; }
.maillon.est-falsifie .maillon__resume { font-weight: 500; }
.maillon.est-falsifie [data-hash]::after { content: "(nouvelle)"; margin-left: .6em; font-weight: 400; }
.maillon.est-rompu::before { background: transparent !important; border-left: 2px dashed var(--nuit); width: 0 !important; }
.maillon.est-rompu [data-prec] { text-decoration: line-through; text-decoration-thickness: 2px; }
.maillon.est-rompu [data-prec]::after { content: "ne suit plus"; display: inline-block; margin-left: .6em; text-decoration: none; font-weight: 400; }
/* en anglais (en/security-and-data.html, 14/10) : les deux mêmes mentions, traduites */
.maillon.est-falsifie [data-hash]:lang(en)::after { content: "(new)"; }
.maillon.est-rompu [data-prec]:lang(en)::after { content: "no longer matches"; }

.essai__gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.essai__gestes .btn { min-height: 48px; padding: 10px 18px; font-size: 16px; }
@media (max-width: 479.98px) { .essai__gestes .btn { width: 100%; } }
.lien-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  border: 0; background: transparent; color: var(--iris); font-size: 16px; font-weight: 500; line-height: 1.2;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer;
}
.lien-bouton:hover { text-decoration-thickness: 2px; }
/* l'attribut hidden l'emporte sur le display de .commande, .essai__gestes et .lien-bouton (14/10) : sans JavaScript, ni
   gestes inertes ; sans mouvement, ni Pause inerte ; au repos, pas de « Rétablir la ligne » */
.journal-ex [data-commande][hidden], .essai__gestes[hidden], .essai__gestes [hidden] { display: none; }
.essai__reponse { min-height: 96px; margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--nuit); background: var(--papier-chaud); font-size: 16px; line-height: 1.5; }
.essai__reponse p + p { margin-top: 6px; }
.essai__casse { font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.message { font-family: var(--mono); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.essai__refus strong { display: block; font-weight: 500; }

/* sur papier : l'impression n'imprime pas les fonds, le journal passe au noir sur blanc */
@media print {
  .journal-ex, .journal-ex * { color: #000 !important; border-color: #000 !important; }
  .entree__signe { border: 1.5px solid #000; background: none; }
  .entree__effacer, .journal-ex [data-commande], .essai__gestes { display: none !important; }
}