/* ==========================================================================
   Les six animations interactives des résultats (section 06).
   16 septembre 2026, sur demande. La mécanique est dans resultats-anim.js :
   la zone porte --p, de 0 à 1, et tout ce qui suit s'en déduit.

   Les couleurs sont celles du système : encre noire et gris lisible pour le
   texte, gradient de site pour les visuels, jamais de violet sur du texte.
   ========================================================================== */

.carte .carte-anim.anim-arme {
  --p: 0;
  position: relative;
  justify-content: space-between;
  gap: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 20);
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* La zone touche le bord de la carte : l'anneau passe à l'intérieur. */
.carte .carte-anim.anim-arme:focus-visible { outline-offset: -4px; }

.anim-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  font-family: var(--font-corps);
  color: var(--noir);
}

.anim-scene p { margin: 0; }

.carte .anim-arme .anim-legende {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--gris-lisible);
}

/* --- 1. Sur mesure -------------------------------------------------------- */

.sm-grille {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 10);
}

.sm-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6%;
  padding: 9%;
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-sm);
  background: var(--blanc);
  opacity: calc(1 - var(--p) * .6);
  transform: scale(calc(1 - var(--p) * .08));
}

.sm-page i {
  position: relative;
  display: block;
  block-size: 7%;
  border-radius: 2px;
  background: #E4E4E4;
  overflow: hidden;
}
.sm-page i:nth-child(1) { block-size: 26%; }
.sm-page i:nth-child(2) { inline-size: 80%; }
.sm-page i:nth-child(3) { inline-size: 64%; }
.sm-page i:nth-child(4) { inline-size: 40%; margin-block-start: auto; block-size: 12%; }

.sm-vous {
  z-index: 1;
  opacity: 1;
  border-color: rgb(28 28 28 / calc(.08 + var(--p) * .06));
  transform:
    translateY(calc(var(--p) * (50% + 5px)))
    scale(calc(1 + var(--p) * .45));
  box-shadow: 0 calc(var(--p) * 10px) calc(var(--p) * 30px) rgb(28 28 28 / calc(var(--p) * .16));
}

/* La couleur et la forme propres se posent par-dessus les barres grises. */
.sm-vous i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-site);
  opacity: var(--p);
}
.sm-vous i:nth-child(1) { border-radius: 4px 4px 12px 4px; }
.sm-vous i:nth-child(2)::after,
.sm-vous i:nth-child(3)::after { background: var(--noir); opacity: calc(var(--p) * .85); }
.sm-vous i:nth-child(4) { inline-size: calc(40% + var(--p) * 18%); border-radius: var(--r-full); }

.sm-tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  transform: translate(20%, -60%) scale(.62);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: clamp(0, calc(var(--p) * 3 - 2), 1);
}

/* --- 2. Conforme ---------------------------------------------------------- */

.anim-scene:has(.cf-pile) {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 8);
}

.cf-pile {
  flex: 1;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-couche {
  --q: clamp(0, calc((var(--p) * 5 - var(--i) - .6) * 5), 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 12);
  border: 1px dashed rgb(28 28 28 / calc(.18 * (1 - var(--q))));
  border-radius: var(--r-sm);
  background: rgb(28 28 28 / calc(.03 * (1 - var(--q))));
  box-shadow: 0 0 0 1px rgb(28 28 28 / calc(.08 * var(--q))), 0 4px 12px -6px rgb(28 28 28 / calc(.2 * var(--q)));
  transform: translateX(calc((1 - var(--q)) * 6px));
  overflow: hidden;
}

/* Le filet coloré qui dit la couche à jour. */
.cf-couche::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 3px;
  background: var(--gradient-site);
  transform: scaleY(var(--q));
}

.cf-nom {
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.2;
}

.cf-etat {
  display: grid;
  justify-items: end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.cf-avant,
.cf-apres { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; }
.cf-avant { color: var(--gris-lisible); opacity: calc(1 - var(--q)); }
.cf-apres { color: var(--noir); opacity: var(--q); }
.cf-apres svg { inline-size: 12px; block-size: 12px; color: var(--bleu); }

.cf-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 8);
}

.carte .anim-arme .cf-fin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-full);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: clamp(0, calc(var(--p) * 8 - 7), 1);
  transform: scale(calc(.85 + clamp(0, calc(var(--p) * 8 - 7), 1) * .15));
}
.cf-fin svg { inline-size: 12px; block-size: 12px; }

/* --- 3. Rapide ------------------------------------------------------------ */

.rp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--spacing) * 16);
}

.rp-ligne { display: flex; flex-direction: column; gap: calc(var(--spacing) * 8); }

.carte .anim-arme .rp-nom {
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.2;
  color: var(--noir);
}

.rp-piste {
  position: relative;
  block-size: 6px;
  border-radius: var(--r-full);
  background: var(--gris-clair);
}

.rp-piste::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: calc(var(--p) * 100%);
  border-radius: inherit;
  background: #D8D8D8;
}

.rp-decision {
  --q: clamp(0, calc((var(--p) - var(--x)) * 80 + 1), 1);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--x) * 100%);
  inline-size: 14px;
  block-size: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--blanc);
  border: 1.5px solid rgb(28 28 28 / .25);
  box-shadow: 0 0 0 calc(var(--q) * 4px) rgb(0 145 255 / .16);
  transform: scale(calc(.7 + var(--q) * .3));
}

.rp-decision::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--gradient-site);
  opacity: var(--q);
}

.rp-axe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gris-lisible);
}

.rp-legende { display: inline-flex; align-items: center; gap: 6px; text-transform: none; }
.rp-legende i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--gradient-site);
}

/* La tête de lecture traverse les deux pistes. */
.rp-tete {
  position: absolute;
  inset-block: 0 calc(var(--spacing) * 26);
  inset-inline-start: calc(var(--p) * 100%);
  inline-size: 0;
  border-inline-start: 1px dashed rgb(28 28 28 / .4);
  pointer-events: none;
}

.rp-jour {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translateX(calc(var(--p) * -100% + 4px - var(--p) * 8px));
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- 4. KPI ---------------------------------------------------------------
   Refait le 16 septembre 2026 au soir, sur demande. Une source, un faisceau,
   une grille d'indicateurs éteints qui s'allument par vague, et une dernière
   rangée qui se perd : c'est le fondu qui dit « infini », pas un chiffre. */

.kp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carte .anim-arme .kp-source {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--r-full);
  border: 1px solid rgb(28 28 28 / calc(.1 - var(--p) * .1));
  background: var(--blanc);
  box-shadow:
    0 0 0 calc(var(--p) * 5px) rgb(102 71 240 / .08),
    0 6px 16px -8px rgb(0 145 255 / calc(var(--p) * .7));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--noir);
}

.kp-source i {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: #D8D8D8;
  position: relative;
  overflow: hidden;
}

.kp-source i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-site);
  opacity: clamp(0, calc(var(--p) * 6), 1);
}

/* Le faisceau descend de la source et s'évase sur la grille. */
.kp-faisceau {
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 8%;
  block-size: 86%;
  background: radial-gradient(60% 70% at 50% 0%, rgb(0 145 255 / .14), rgb(102 71 240 / .05) 55%, transparent 80%);
  opacity: clamp(0, calc(var(--p) * 3), 1);
  transform-origin: 50% 0;
  transform: scaleY(clamp(0, calc(var(--p) * 1.6), 1));
  pointer-events: none;
}

.kp-grille {
  position: relative;
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  /* La quatrième rangée se perd : l'infini est dans le fondu. */
  -webkit-mask-image: linear-gradient(#000 64%, transparent 98%);
  mask-image: linear-gradient(#000 64%, transparent 98%);
}

.kp-tuile {
  /* La vague : chaque tuile part selon sa distance à la source. */
  --q: clamp(0, calc((var(--p) * 4.4 - var(--d)) * 2.2), 1);
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  border: 1px dashed rgb(28 28 28 / calc(.14 * (1 - var(--q))));
  background: rgb(255 255 255 / var(--q));
  box-shadow:
    0 0 0 1px rgb(28 28 28 / calc(.07 * var(--q))),
    0 6px 14px -8px rgb(28 28 28 / calc(.28 * var(--q)));
  transform: translateY(calc((1 - var(--q)) * -4px)) scale(calc(.96 + var(--q) * .04));
}

.kp-vide,
.kp-nom { grid-area: 1 / 1; }

.kp-vide {
  display: block;
  inline-size: 62%;
  block-size: 6px;
  border-radius: 3px;
  background: #E8E8E8;
  opacity: calc(1 - var(--q));
}

.kp-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.1;
  color: var(--noir);
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 3px));
}

.kp-nom i {
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--gradient-site);
}

/* --- 5. Propriété --------------------------------------------------------- */

.anim-scene:has(.pr-cases) {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 8);
}

.pr-colonnes,
.pr-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--spacing) * 12);
}

.pr-cases { position: relative; flex: 1; min-height: 0; }

.pr-case {
  grid-column: 1;
  grid-row: 1;
  border: 1px dashed rgb(28 28 28 / .2);
  border-radius: var(--r-md);
}

.pr-case.pr-case-vous {
  grid-column: 2;
  border: 1px solid rgb(28 28 28 / calc(.08 + var(--p) * .1));
  background: rgb(0 145 255 / calc(var(--p) * .05));
}

.pr-pieces {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--spacing) * 5);
  margin: 0;
  padding: calc(var(--spacing) * 8);
  list-style: none;
}

.pr-piece {
  --q: clamp(0, calc((var(--p) - var(--i) * .15 - .05) / .4), 1);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--gris-grille);
  background: var(--blanc);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  /* Une colonne plus la gouttière, soit la garniture comprise. */
  transform: translateX(calc(var(--q) * (100% + var(--spacing) * 28)));
  box-shadow: 0 4px 10px -6px rgb(28 28 28 / calc(.1 + var(--q) * .2));
}

.pr-piece::before {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #D8D8D8;
  background-image: linear-gradient(rgb(0 145 255 / var(--q)), rgb(0 145 255 / var(--q)));
}

.pr-frais {
  position: relative;
  display: grid;
  align-items: center;
  block-size: 24px;
  padding-inline: 10px;
  border-radius: var(--r-sm);
  background: var(--gris-clair);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
}

.pr-barre {
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: calc((1 - clamp(0, calc((var(--p) - .1) / .8), 1)) * 100%);
  background: #DCDCDC;
}

.pr-avant,
.pr-apres { position: relative; grid-area: 1 / 1; }
.pr-avant { color: var(--gris-lisible); opacity: clamp(0, calc((.9 - var(--p)) * 10), 1); }
.pr-apres { color: var(--noir); opacity: clamp(0, calc((var(--p) - .9) * 10), 1); }

/* --- 6. Rentable ---------------------------------------------------------- */

.anim-scene:has(.rt) {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}

.rt {
  flex: 1;
  min-height: 0;
  inline-size: 100%;
  overflow: visible;
}

.rt-repere { stroke: #8F8F8F; stroke-width: 1; stroke-dasharray: 3 3; }
.rt-base { stroke: var(--gris-grille); stroke-width: 1; }

.rt-texte {
  fill: #646464;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.rt-mois { fill: var(--noir); }

.rt-courbe {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
}

.rt-tete { stroke: rgb(28 28 28 / .35); stroke-width: 1; stroke-dasharray: 2 3; }

.rt-point {
  fill: var(--blanc);
  stroke: var(--bleu);
  stroke-width: 2.5;
}

/* Sous prefers-reduced-motion, rien ne s'anime de lui-même : les transitions
   globales sont déjà coupées par tokens.css, la scène suit la main. */


/* Sur une fenêtre basse, les six cartes tiennent quand même dans un écran
   (styles.css, « chiffre en coin ») : les deux scènes les plus hautes se
   resserrent au lieu d'être coupées. 17 septembre 2026, sur demande. */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 880px) {
  .cf-pile { gap: calc(var(--spacing) * 2); }
  .cf-couche { padding-block: calc(var(--spacing) * 2); }
  .cf-tete { margin-block-end: calc(var(--spacing) * -3); }
  .pr-pieces { gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 4); }
  .carte .anim-arme .pr-piece { padding-block: 1px; }
  .anim-scene:has(.pr-cases),
  .anim-scene:has(.cf-pile) { gap: calc(var(--spacing) * 5); }
}