/* PasDePanic AI — « Indigo et kola » : indigo de teinture et ocre de noix de kola sur fond blanc, neutres teintés d'indigo. Polices système, aucun appel externe. */
:root {
  --fond: #f6f6fb;
  --surface: #ffffff;
  --encre: #14163a;
  --doux: #4e5378;
  --trait: #d8daea;
  --pale: #edecf8;
  --indigo: #1e2560;
  --indigo-texte: #1e2560;
  --sur-indigo: #f2f3fa;
  --indigo-doux: #c3c7e6;
  --ocre: #c89000;
  --ocre-text: #8a5a00;
  --ocre-pale: #f7ebd3;
  --vert: #0b6b4f;
  --vert-pale: #e2f2ea;
  --ambre: #8a5300;
  --ambre-pale: #f7ebd6;
  --gris: #4b4e5c;
  --gris-pale: #e8e9ee;
  --tissage: rgba(255, 255, 255, 0.055);
  --trait-clair: rgba(255, 255, 255, 0.22);
  --ombre: 0 1px 0 rgba(20, 22, 58, 0.05), 0 10px 22px -18px rgba(20, 22, 58, 0.55);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0e1024;
    --surface: #161a34;
    --encre: #edeef7;
    --doux: #a8adcf;
    --trait: #2a2f52;
    --pale: #1c2144;
    --indigo: #171c4e;
    --indigo-texte: #b3bbf2;
    --sur-indigo: #edeef7;
    --indigo-doux: #b6bbe0;
    --ocre: #eab94e;
    --ocre-text: #eab94e;
    --ocre-pale: #3a2e10;
    --vert: #57c9a2;
    --vert-pale: #12372e;
    --ambre: #f0b44a;
    --ambre-pale: #3a2b0c;
    --gris: #b9bcd4;
    --gris-pale: #232741;
    --ombre: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 24px -18px rgba(0, 0, 0, 0.85);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.62 system-ui, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
.interieur {
  max-width: 1060px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
header { background: var(--surface); }
.bandeau { border-bottom: 3px solid var(--ocre); }
.bandeau .interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 22px;
  padding-block: 14px;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--indigo-texte);
  text-decoration: none;
}
.marque::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--ocre);
}
.marque:hover { color: var(--encre); }
nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--doux);
  text-decoration: none;
  padding: 6px 1px;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--encre); border-bottom-color: var(--ocre); }
nav a[aria-current="page"] { color: var(--indigo-texte); border-bottom-color: var(--indigo-texte); }
main {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
  padding-block: clamp(26px, 4vw, 40px) clamp(48px, 7vw, 84px);
}
section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
section[id], #marches { scroll-margin-top: 18px; }
/* Segoe UI Black (titres sous Windows) dessine l'apostrophe U+2019 comme un accent aigu : Arial Black la remplace,
   pour ce seul caractère. Polices locales seulement, aucun appel externe. */
@font-face {
  font-family: "PdP Apostrophe";
  src: local("Arial Black"), local("ArialMT-Black");
  unicode-range: U+2019;
  font-weight: 100 900;
}
h1, h2, h3 {
  margin: 0;
  font-family: "PdP Apostrophe", system-ui, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--encre);
}
h1 { font-size: clamp(30px, 5.4vw, 46px); }
h2 { font-size: clamp(22px, 3.2vw, 28px); }
h3 { font-size: 17.5px; letter-spacing: -0.015em; }
p { margin: 0; max-width: 70ch; }
ul { margin: 0; padding-left: 1.15em; }
li { max-width: 76ch; }
a { color: var(--ocre-text); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
code {
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--pale);
  color: var(--encre);
  padding: 1px 5px;
  border-radius: 3px;
}
.promesse {
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: calc(max(16px, env(safe-area-inset-left, 0px)) + clamp(0px, 2vw, 30px));
  padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + clamp(0px, 2vw, 30px));
  padding-block: clamp(30px, 5vw, 50px);
  background-color: var(--indigo);
  background-image:
    repeating-linear-gradient(90deg, var(--tissage) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, var(--tissage) 0 1px, transparent 1px 9px);
  color: var(--sur-indigo);
  gap: 14px;
}
.promesse h1 { color: var(--sur-indigo); max-width: 24ch; }
.promesse p { color: var(--indigo-doux); font-size: clamp(16px, 2.1vw, 18.5px); max-width: 62ch; }
.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.offres article {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--indigo-texte);
  border-radius: 0 6px 6px 0;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--ombre);
}
.offres article:nth-child(2) { border-left-color: var(--ocre); }
.offres p { color: var(--doux); }
.marches { gap: 14px; }
.marches > p { color: var(--doux); }
.pays {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.pays li {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-top: 5px solid var(--ocre);
  border-radius: 0 0 5px 5px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.pays h3 { color: var(--indigo-texte); font-size: 18px; }
.pays p { color: var(--doux); font-size: 15px; max-width: none; }
.preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: 1px;
  background: var(--trait-clair);
  overflow: hidden;
}
@media (max-width: 479px) {
  /* 2 colonnes : un dernier compteur seul sur sa ligne occupe toute la largeur (pas de case vide) */
  .preuves div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.preuves div {
  background: var(--indigo);
  padding: clamp(16px, 2.5vw, 22px) 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.preuves b {
  color: var(--ocre);
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.preuves span { color: var(--indigo-doux); font-size: 13.5px; line-height: 1.4; }
#methode {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-top: 4px solid var(--indigo-texte);
  border-radius: 0 0 6px 6px;
  padding: clamp(18px, 2.5vw, 26px);
  box-shadow: var(--ombre);
}
#contact {
  background: var(--pale);
  border: 1px solid var(--trait);
  border-top: 4px solid var(--ocre);
  border-radius: 6px;
  padding: clamp(18px, 2.5vw, 26px);
}
#methode p, #contact p { color: var(--doux); }
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  color: var(--encre);
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.carte:hover { border-color: var(--ocre); transform: translateY(-2px); }
.carte h3 { font-size: 17px; }
.carte p { color: var(--doux); font-size: 14.5px; line-height: 1.55; max-width: none; }
.statut {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
}
.s-production { background: var(--vert-pale); color: var(--vert); }
.s-demo, .s-beta { background: var(--ambre-pale); color: var(--ambre); }
.s-prototype, .s-sommeil { background: var(--gris-pale); color: var(--gris); }
.fiche { gap: clamp(16px, 2.4vw, 22px); }
.fiche section {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--indigo-texte);
  border-radius: 0 5px 5px 0;
  padding: 14px 16px 17px;
  gap: 9px;
}
.fiche h2 { font-size: clamp(19px, 2.6vw, 23px); }
.fiche ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.1em; }
.fiche li { font-size: 15.5px; }
.fil { font-size: 14px; }
.fil a {
  color: var(--doux);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.fil a:hover { color: var(--indigo-texte); border-bottom-color: var(--ocre); }
.chapo { font-size: clamp(16.5px, 2vw, 18.5px); color: var(--doux); max-width: 64ch; }
.periode { font-size: 13.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
.preuve {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ocre-text);
  background: var(--ocre-pale);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: 1px;
  white-space: nowrap;
  cursor: help;
}
.vide { color: var(--doux); }
:focus-visible {
  outline: 3px solid var(--ocre-text);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Raccords du CTO (11/11) : contact en maquette, pied A/B, Confidentialité, sur les variables « Indigo et kola ». --- */
#contact { display: flex; flex-direction: column; gap: 12px; }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.canal { background: var(--surface); border: 1px solid var(--trait); border-top: 3px solid var(--ocre); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.bouton { display: inline-block; background: var(--ocre); color: var(--indigo); font: inherit; font-weight: 800; padding: 10px 18px; border: 0; border-radius: 6px; text-decoration: none; cursor: pointer; }
.bouton:focus-visible, .formulaire :focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }
.numero, .courriel { color: var(--doux); font-size: 15px; overflow-wrap: anywhere; }
.maquette { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ambre); background: var(--ambre-pale); padding: 1px 8px; border-radius: 4px; }
.formulaire { display: grid; gap: 6px; max-width: 560px; background: var(--surface); border: 1px solid var(--trait); padding: 16px; }
.formulaire .maquette, .formulaire .bouton { justify-self: start; }
.formulaire label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.formulaire input, .formulaire select, .formulaire textarea { font: inherit; color: var(--encre); background: var(--fond); border: 1px solid var(--trait); border-radius: 6px; padding: 8px 10px; width: 100%; }
.formulaire .bouton { margin-top: 10px; }
.etat-envoi { color: var(--ambre); font-weight: 600; }
.pied { border-top: 1px solid var(--trait); background: var(--surface); }
.pied .interieur { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 16px; font-size: 14px; }
.pied a { color: var(--doux); }
.confidentialite ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }

/* Schema vivant et carte des marches : styles STATIQUES (complets sans JavaScript), sur les variables « Indigo et kola ».
   L'animation (anim.css) ne fait qu'allumer et deplacer ces elements. */
.vivant { display: flex; flex-direction: column; gap: 14px; }
.schema { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
.schema-etroit { display: none; max-width: 420px; }
@media (max-width: 719px) { .schema-large { display: none; } .schema-etroit { display: block; } }
.schema .lien { stroke: var(--indigo-doux, var(--trait)); stroke-width: 2; stroke-linecap: round; }
.schema .paquet { fill: var(--ocre); opacity: 0; }
.schema .noeud .corps { fill: var(--indigo); }
.schema .noeud .halo { fill: none; stroke: var(--ocre); stroke-width: 3; opacity: .9; }
.schema .agent .corps { fill: var(--surface); stroke: var(--indigo); stroke-width: 3; }
.schema .agent .halo { fill: var(--ocre-pale); opacity: .9; }
.schema text { fill: var(--encre); font: 700 15px system-ui, "Segoe UI", Roboto, sans-serif; }
.schema .legende { fill: var(--doux); font-weight: 500; font-size: 13px; }
.schema .chiffre { fill: var(--ocre-text, var(--encre)); font-weight: 800; }
.marches-grille { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .marches-grille { grid-template-columns: minmax(280px, 380px) 1fr; } }
svg.carte { display: block; width: 100%; max-width: 420px; height: auto; background: var(--indigo); border-radius: 12px; }
svg.carte .graticule line { stroke: var(--sur-indigo, #fff); stroke-opacity: .08; stroke-width: 1; }
svg.carte .arc { fill: none; stroke: var(--ocre); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .7; }
svg.carte .coeur { fill: var(--ocre); }
svg.carte .onde { fill: none; stroke: var(--ocre); stroke-width: 1.5; opacity: .35; }
svg.carte text { fill: var(--sur-indigo, #fff); font: 700 15px system-ui, "Segoe UI", Roboto, sans-serif; }
/* Texte lu par les lecteurs d'ecran, invisible a l'ecran (chiffres sous les rouleaux). */
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preuves b { position: relative; }

/* Bloc « Vos taches » (12/11) : styles STATIQUES, complets sans JavaScript, sur les variables « Indigo et kola ». */
.taches { display: flex; flex-direction: column; gap: 14px; }
.taches-svg { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; }
.taches-etroit { display: none; max-width: 420px; }
@media (max-width: 719px) { .taches-large { display: none; } .taches-etroit { display: block; } }
.taches .lien-tache { stroke: var(--indigo-doux, var(--trait)); stroke-width: 2; stroke-linecap: round; fill: none; }
.taches .carte-tache .corps { fill: var(--pale); stroke: var(--trait); stroke-width: 1.5; }
.taches .carte-tache text { fill: var(--encre); font: 600 15px system-ui, "Segoe UI", Roboto, sans-serif; }
.taches .agent-tache .halo { fill: var(--ocre-pale); }
.taches .agent-tache .corps { fill: var(--surface); stroke: var(--indigo-texte); stroke-width: 3; }
.taches .chaine-legende { fill: var(--doux); font: 600 14px system-ui, "Segoe UI", Roboto, sans-serif; }
.taches .sortie .corps { fill: var(--indigo); }
.taches .sortie text { fill: var(--sur-indigo); font: 700 15px system-ui, "Segoe UI", Roboto, sans-serif; }
.taches .sortie .coche { fill: none; stroke: var(--ocre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.taches .paquet-tache { fill: var(--ocre); opacity: 0; }

/* Bloc vidéo — page d'accueil */

/* Cadre : ratio 16/9, liseré ocre en haut */
.video-cadre {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--indigo);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--ocre);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ombre);
}

/* La vidéo remplit le cadre */
.video-cadre video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--indigo);
}

/* Focus clavier visible */
.video-cadre video:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: -3px; /* a l interieur : le cadre rogne tout ce qui deborde (overflow hidden) */
}

/* Légende */
.video p {
  color: var(--doux);
  max-width: 70ch;
}

/* Revelations au defilement, titres mot a mot, relief des cartes. Ecrit par le CTO (2 missions mimo sans fichier, 11/11).
   transform et opacity SEULEMENT ; tout etat cache n'existe que sous html.anim (pose par le JS). */
html.anim :is(.promesse, .offres article, .vivant, .marches, .pays li, .preuves div, #methode, #contact) {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
html.anim :is(.promesse, .offres article, .vivant, .marches, .pays li, .preuves div, #methode, #contact).visible { opacity: 1; transform: none; }
html.anim :is(.pays li, .preuves div):nth-child(2) { transition-delay: 80ms; }
html.anim :is(.pays li, .preuves div):nth-child(3) { transition-delay: 160ms; }
html.anim :is(.pays li, .preuves div):nth-child(4) { transition-delay: 240ms; }
/* Titres : les mots montent un par un quand le titre devient visible. */
html.anim .mot { display: inline-block; opacity: 0; transform: translateY(.4em);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 60ms); }
html.anim .visible .mot, html.anim .visible > .mot { opacity: 1; transform: none; }
/* Cartes de realisation (a.carte, page Realisations ; jamais la carte SVG des marches). */
a.carte { position: relative; transition: transform .25s ease-out; }
a.carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 14px 30px -14px rgba(20, 22, 58, .45); opacity: 0; transition: opacity .25s ease-out; }
a.carte:hover, a.carte:focus-visible { transform: translateY(-4px); }
a.carte:hover::after, a.carte:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.anim :is(.promesse, .offres article, .vivant, .marches, .pays li, .preuves div, #methode, #contact), html.anim .mot { opacity: 1; transform: none; }
  a.carte:hover, a.carte:focus-visible { transform: none; }
}

/* Schema vivant, carte des marches, compteurs en rouleaux. Ecrit par le CTO (2 missions mimo sans fichier, 11/11).
   transform et opacity SEULEMENT ; elements SVG transformes autour de leur propre centre. */
.vivant .agent .corps, .vivant .paquet, svg.carte .coeur, svg.carte .onde { transform-box: fill-box; transform-origin: center; }
/* 1. Schema : les etapes s'allument dans l'ordre, les agents pulsent, les paquets voyagent. */
html.anim .vivant .noeud .halo, html.anim .vivant .agent .halo { opacity: 0; }
.vivant.en-marche .noeud .halo, .vivant.en-marche .agent .halo { animation: allume .6s ease-out both; }
.vivant.en-marche [data-etape="2"] .halo, .vivant.en-marche .agent .halo { animation-delay: .6s; }
.vivant.en-marche [data-etape="3"] .halo { animation-delay: 1.2s; }
.vivant.en-marche [data-etape="4"] .halo { animation-delay: 1.8s; }
.vivant.en-marche .agent .corps { animation: pulse 2.4s ease-in-out calc(var(--i) * .3s + .6s) infinite; }
.vivant.en-marche .paquet { animation: voyage 1.6s ease-in-out infinite; }
.vivant.en-marche .paquet[data-etape="1"] { animation-delay: .3s; }
.vivant.en-marche .paquet[data-etape="2"] { animation-delay: .9s; }
.vivant.en-marche .paquet[data-etape="3"] { animation-delay: 1.5s; }
.vivant.en-marche .paquet[data-etape="4"] { animation-delay: 2.1s; }
@keyframes allume { from { opacity: 0; } to { opacity: .9; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes voyage { 0% { opacity: 0; transform: translateX(0); } 15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--long)); } }
/* 2. Carte : les pays s'allument l'un apres l'autre, une onde se propage, les arcs apparaissent. */
html.anim svg.carte .coeur, html.anim svg.carte .arc { opacity: .25; }
html.anim svg.carte .onde { opacity: 0; }
svg.carte.allumee .coeur { animation: pays .6s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .35s) both; }
svg.carte.allumee .arc { animation: arc .8s ease-out calc(var(--i) * .35s + .4s) both; }
svg.carte.allumee .onde { animation: onde 2.8s ease-out calc(var(--i) * .35s) infinite; }
@keyframes pays { from { opacity: .25; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes arc { from { opacity: .25; } to { opacity: .7; } }
@keyframes onde { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
/* 3. Compteurs : chaque colonne roule jusqu'a son chiffre (transform seulement). */
.rouleau { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.colonne { display: block; }
.colonne span { display: block; height: 1.1em; }
.preuves.roule .colonne { transform: translateY(calc(var(--cible) * -1.1em));
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .vivant .halo { opacity: .9 !important; } .vivant .paquet { opacity: 0 !important; }
  svg.carte .coeur { opacity: 1 !important; transform: none !important; } svg.carte .arc { opacity: .7 !important; }
}

/* Mission OpenCode mimo 20261112-151123-9e92 (97 s), auditee par le CTO : animation du bloc taches, transform et opacity seulement, 3 cycles, pause hors ecran. */

/* Cadrage des transformations sur la boîte de chaque élément */
.taches .paquet-tache,
.taches .agent-tache .corps,
.taches .sortie .coche {
  transform-box: fill-box;
  transform-origin: center;
}

/* Départ masqué, seulement si les animations sont permises */
html.anim .taches .paquet-tache,
html.anim .taches .sortie .coche {
  opacity: 0;
}

/* Voyage des paquets : 3 passages, décalé par étape */
.taches.en-marche .paquet-tache {
  animation: voyage-tache 1.6s ease-in-out 0s 3 both;
}
.taches.en-marche .paquet-tache[data-etape="2"] {
  animation-delay: 0.8s;
}

/* Pouls des agents, décalé selon leur rang */
.taches.en-marche .agent-tache .corps {
  animation: pouls-tache 1.6s ease-in-out calc(var(--i) * .25s + .4s) 3;
}

/* Coche finale, une seule fois */
.taches.en-marche .sortie .coche {
  animation: coche-tache .5s ease-out 1.4s 1 both;
}

/* Pause tant que la section n'est pas à l'écran */
.taches.en-marche:not(.a-l-ecran)
  :is(.paquet-tache, .agent-tache .corps, .sortie .coche) {
  animation-play-state: paused;
}

@keyframes voyage-tache {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--long));
  }
}

@keyframes pouls-tache {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes coche-tache {
  from {
    opacity: 0;
    transform: scale(.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mouvement réduit : pas d'animation, états fixes */
@media (prefers-reduced-motion: reduce) {
  .taches .paquet-tache,
  .taches .agent-tache .corps,
  .taches .sortie .coche {
    animation: none !important;
  }
  .taches .paquet-tache {
    opacity: 0 !important;
  }
  .taches .sortie .coche {
    opacity: 1 !important;
  }
}