/* =====================================================================
   Convention collective sur l'accueil
   - Échue : écran de moniteur, compteur rouge en direct, tracé plat (asystolie) balayé.
   - Signée : petit cadran vert, rythme normal, qui mène à la convention.
   ===================================================================== */
.moniteur-convention {
  --rouge-ecran: #ff3b30;
  --rouge-ecran-doux: rgba(255, 59, 48, .22);
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(36px, 6vw, 64px);
  color: #e8edf5;
  background-color: #070d19;
  /* quadrillé de moniteur : grands et petits carreaux, teintés de rouge */
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 59, 48, .14), transparent 70%),
    linear-gradient(rgba(255, 90, 80, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 80, .10) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  border-block: 3px solid var(--rouge-ecran);
}
/* lueur qui respire en fond (couche d'ambiance) */
.moniteur-convention::before {
  content: ""; position: absolute; inset: -20% 10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 59, 48, .18), transparent);
  animation: moniteur-souffle 4s ease-in-out infinite;
}
@keyframes moniteur-souffle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.moniteur-cadre { position: relative; }
.moniteur-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: clamp(18px, 3vw, 28px); }
.moniteur-tete h2 {
  margin: 0; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15;
}
.moniteur-direct {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px;
  border: 1px solid rgba(255, 59, 48, .55); border-radius: var(--r-rond, 999px);
  background: rgba(255, 59, 48, .12); color: #ffb3ad;
  font-family: var(--titre); font-weight: 700; font-size: .9rem; letter-spacing: .04em;
}
.moniteur-direct i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rouge-ecran);
  box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); animation: direct-battement 1s ease-out infinite;
}
@keyframes direct-battement {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); }
}

/* --- Compteur : six cases, chiffres rouges lumineux */
.compteur {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px);
}
.compteur-case {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(12px, 2vw, 22px) 6px clamp(10px, 1.6vw, 16px);
  border-radius: var(--r-2, 12px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 59, 48, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -12px 24px -16px rgba(255, 59, 48, .35);
}
.compteur-chiffre {
  font-family: var(--titre); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 6.2vw, 5rem); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--rouge-ecran);
  text-shadow: 0 0 18px rgba(255, 59, 48, .55), 0 0 2px rgba(255, 160, 150, .9);
}
.compteur-unite { margin-top: 8px; font-size: clamp(.78rem, 1.3vw, .95rem); color: #9aa6b8; }
/* les années pèsent plus lourd que le reste */
.compteur-ans .compteur-chiffre { font-size: clamp(2.6rem, 7.4vw, 6rem); }
/* chaque changement : petit choc lumineux (couche principale) */
.compteur-case.vient-de-changer .compteur-chiffre { animation: chiffre-choc 600ms cubic-bezier(.2, 0, 0, 1); }
.compteur-case.vient-de-changer { animation: case-lueur 700ms cubic-bezier(.2, 0, 0, 1); }
@keyframes chiffre-choc {
  0% { transform: scale(1.12); color: #ffd0cc; text-shadow: 0 0 30px rgba(255, 59, 48, .95), 0 0 4px #fff; }
  100% { transform: none; }
}
@keyframes case-lueur {
  0% { border-color: rgba(255, 59, 48, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px -4px rgba(255, 59, 48, .6); }
  100% { border-color: rgba(255, 59, 48, .22); }
}

/* --- Tracé plat, balayé de gauche à droite comme un moniteur */
.moniteur-trace {
  position: relative; height: 56px; margin-block: clamp(18px, 3vw, 28px) 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.moniteur-trace::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: rgba(255, 59, 48, .55); box-shadow: 0 0 8px rgba(255, 59, 48, .45);
}
.trace-tete {
  position: absolute; top: 50%; left: 0; width: 220px; height: 3px; transform: translate(-100%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 120, 110, .4) 60%, #fff);
  border-radius: 2px; box-shadow: 0 0 14px 2px rgba(255, 59, 48, .7);
  animation: trace-balayage 3.2s linear infinite;
}
.trace-tete::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translateY(-50%); background: #fff; box-shadow: 0 0 12px 4px rgba(255, 59, 48, .9);
}
@keyframes trace-balayage { from { left: 0; } to { left: calc(100% + 220px); } }

.moniteur-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.moniteur-pied p { margin: 0; }
.moniteur-greve {
  display: inline-flex; align-items: center; gap: 8px; color: var(--jaune);
  font-family: var(--titre); font-weight: 700; font-size: 1.15rem;
}
.moniteur-message { color: #b8c2d1; flex: 1 1 280px; }
.bouton.bouton-alerte {
  background: var(--rouge-ecran); border-color: var(--rouge-ecran); color: #fff;
  box-shadow: 0 6px 20px -8px rgba(255, 59, 48, .8);
}
.bouton.bouton-alerte:hover, .bouton.bouton-alerte:focus-visible { background: #ff5247; border-color: #ff5247; color: #fff; transform: translateY(-1px); }
.bouton.bouton-alerte:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 767.98px) {
  .compteur { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .moniteur-pied .bouton { width: 100%; justify-content: center; }
}

/* --- Convention signée : cadran vert, cliquable */
.convention-zone { padding-block: 24px 0; }
.convention-active {
  display: inline-flex; align-items: center; gap: 16px; max-width: 100%;
  padding: 12px 20px 12px 14px; border-radius: var(--r-3, 18px);
  background: linear-gradient(135deg, #f1fbf5, #ffffff);
  border: 1px solid rgba(24, 121, 78, .35); color: var(--encre); text-decoration: none;
  box-shadow: 0 1px 0 rgba(20, 42, 76, .04), 0 8px 24px -14px rgba(24, 121, 78, .55);
  transition: transform 200ms cubic-bezier(.2, 0, 0, 1), box-shadow 200ms cubic-bezier(.2, 0, 0, 1);
}
.convention-active:hover, .convention-active:focus-visible {
  transform: translateY(-2px); color: var(--encre);
  box-shadow: 0 1px 0 rgba(20, 42, 76, .04), 0 14px 30px -14px rgba(24, 121, 78, .7);
}
.convention-active:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
.convention-active-pouls {
  flex: none; width: 64px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-2, 12px); background: #0c2a1c;
}
.convention-active-pouls svg { width: 52px; height: 22px; }
.convention-active-pouls path {
  fill: none; stroke: #3ddc84; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; filter: drop-shadow(0 0 3px rgba(61, 220, 132, .8));
  animation: pouls-vert 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pouls-vert { 0% { stroke-dashoffset: 160; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -160; } }
.convention-active-texte { display: flex; flex-direction: column; line-height: 1.25; }
.convention-active-texte strong { font-family: var(--titre); font-size: 1.15rem; color: var(--vert); }
.convention-active-texte span { color: var(--gris); }
.convention-active > .bi { color: var(--vert); font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .moniteur-convention::before, .moniteur-direct i, .trace-tete, .convention-active-pouls path,
  .compteur-case.vient-de-changer, .compteur-case.vient-de-changer .compteur-chiffre { animation: none !important; }
  .trace-tete { display: none; }
  .convention-active-pouls path { stroke-dashoffset: 0; }
}