/* Prototype 2 · Verre — aurore vive et lumineuse.
   Le fond de la scene est dessine par le shader (scene.js) : --scene-fond en est la
   couleur dominante, que le panneau de secours reprend. Le calque (barre en haut,
   etat en bas) est un verre blanc : rgba(255,255,255,.6), flou de 16 px, liseré blanc. */

:root {
    --scene-fond: #EEECFB;
    --verre: rgba(255, 255, 255, .6);
    --verre-bord: rgba(255, 255, 255, .85);
    --verre-ombre: 0 12px 30px -14px rgba(49, 46, 129, .5), inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ---------- Calque : du verre blanc, de l'encre, un bouton indigo ---------- */

.acc-url,
.acc-etat {
    background: var(--verre);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--verre-bord);
    box-shadow: var(--verre-ombre);
    color: var(--encre);
}

.acc-url {
    padding: 8px 15px;
    font-weight: 600;
}

.acc-bouton--lancer {
    padding: 10px 22px;
    border-color: rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: linear-gradient(180deg, #5B54EE 0%, #4F46E5 100%);
    box-shadow: 0 12px 24px -10px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.acc-bouton--lancer:hover { background: linear-gradient(180deg, #4F46E5 0%, #3730A3 100%); }

/* Au repos, le bouton respire : l'appel a l'action est la premiere chose qu'on voit. */
.acc-scene[data-etat="repos"] .acc-bouton--lancer:not(:disabled) {
    animation: v-souffle 2.6s ease-in-out infinite;
}
@keyframes v-souffle {
    0%, 100% { box-shadow: 0 12px 24px -10px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 0 rgba(79, 70, 229, .4); }
    50% { box-shadow: 0 12px 24px -10px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 9px rgba(79, 70, 229, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .acc-scene .acc-bouton--lancer { animation: none !important; }
}

/* Panneau d'etat : phase, pages, score sur la premiere ligne ; verdicts sur la seconde. */
.acc-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 7px 15px;
    border-radius: 18px;
}
.acc-compteurs { display: contents; } /* les compteurs deviennent des elements du panneau */

.acc-phase { order: 1; }
.acc-compteur--pages { order: 2; }
.acc-score { order: 4; margin-left: auto; }
.acc-saut { order: 5; flex: 0 0 100%; height: 0; margin-top: -4px; } /* saut de ligne sans double ecart */
.acc-compteur--conforme { order: 6; }
.acc-compteur--non-conforme { order: 7; }
.acc-compteur--incertain { order: 8; }
.acc-compteur--erreur { order: 9; }

.acc-score {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 600;
    color: var(--gris);
}
.acc-score b {
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    color: var(--indigo-profond);
}
.acc-score small { font-size: 11.5px; }

.acc-compteur b { font-weight: 800; }
.acc-compteur--conforme b { color: var(--conforme); }
.acc-compteur--non-conforme b { color: var(--non-conforme); }
.acc-compteur--incertain b { color: var(--incertain); }
.acc-compteur--erreur b { color: var(--erreur); }

@media (max-width: 640px) {
    .acc-etat {
        gap: 4px 10px;
        padding: 7px 12px;
        font-size: 11.5px;
    }
    /* Phase et score en haut ; pages et verdicts tiennent sur une seule ligne dessous. */
    .acc-score { order: 2; }
    .acc-saut { order: 3; }
    .acc-compteur--pages { order: 4; }
}

/* ---------- Couche HTML de la scene : en-tetes de piles, bulles, liste ----------
   Aucune transition ni animation ici : scene.js pose position et opacite a chaque
   image (la video de secours est enregistree sous horloge simulee). --u suit la
   taille de la scene : la video, plus grande, garde les memes proportions. */

.v-couche {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    font-family: var(--police);
    color: var(--encre);
}
.v-tete,
.v-bulle,
.v-note {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

.v-tete {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--u, 1));
    padding: calc(5px * var(--u, 1)) calc(12px * var(--u, 1));
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px -10px rgba(49, 46, 129, .5);
    font-size: calc(12.5px * var(--u, 1));
    font-weight: 700;
    line-height: 1.2;
}
.v-point {
    width: calc(9px * var(--u, 1));
    height: calc(9px * var(--u, 1));
    border-radius: 50%;
    background: var(--c);
}
.v-nb {
    font-size: calc(15px * var(--u, 1));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--c);
}
.v-tete--conforme { --c: var(--conforme); }
.v-tete--non-conforme { --c: var(--non-conforme); }
.v-tete--incertain { --c: var(--incertain); }
.v-tete--erreur { --c: var(--erreur); }
/* Les noms de piles arrivent en minuscules (tc sur nouns.*) : la majuscule
   d'en-tete est posee ici, pas dans les dictionnaires. */
.v-nom {
    text-transform: capitalize;
}

/* Scene « live » de l'ecran de progression (app) : meme empreinte visuelle
   que le dendrogramme qu'elle remplace (440 px, fond sombre). */
.vl-panneau {
    position: relative;
    flex: 0 0 auto;
    height: 440px;
    margin: 0 0 18px;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(120% 140% at 50% 0%, #1d2352 0%, #131740 55%, #0d1030 100%);
}
.vl-couche {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-family: var(--police);
    color: var(--encre);
}

/* Bulle : la phrase fautive s'affiche un instant au-dessus de sa carte. */
.v-bulle {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--u, 1));
    max-width: calc(220px * var(--u, 1));
    padding: calc(8px * var(--u, 1)) calc(12px * var(--u, 1));
    border: 1px solid rgba(255, 255, 255, .95);
    border-left: calc(4px * var(--u, 1)) solid var(--non-conforme);
    border-radius: calc(12px * var(--u, 1));
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 30px -12px rgba(127, 29, 29, .5);
    font-size: calc(12px * var(--u, 1));
    line-height: 1.3;
    white-space: normal;
}
.v-bulle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-5px * var(--u, 1));
    width: calc(10px * var(--u, 1));
    height: calc(10px * var(--u, 1));
    background: rgba(255, 255, 255, .94);
    transform: translateX(-50%) rotate(45deg);
}
.v-bulle b {
    font-size: calc(13px * var(--u, 1));
    color: #B91C1C;
}
.v-bulle span { color: var(--gris); }

/* Scene etroite (mobile) : la bulle ne garde que la phrase, la liste se resserre. */
.v-compact .v-bulle {
    max-width: calc(160px * var(--u, 1));
    padding: calc(6px * var(--u, 1)) calc(10px * var(--u, 1));
}
.v-compact .v-bulle b { font-size: calc(12px * var(--u, 1)); }
.v-compact .v-bulle span { display: none; }
.v-compact .v-note {
    gap: calc(5px * var(--u, 1));
    padding-right: calc(8px * var(--u, 1));
    font-size: calc(10px * var(--u, 1));
}
.v-compact .v-langue { font-size: calc(9px * var(--u, 1)); }

/* Liste des lignes fautives sous la pile des non conformes. */
.v-note {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--u, 1));
    padding: calc(4px * var(--u, 1)) calc(11px * var(--u, 1)) calc(4px * var(--u, 1)) calc(5px * var(--u, 1));
    border: 1px solid rgba(220, 38, 38, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 18px -10px rgba(127, 29, 29, .55);
    font-size: calc(11.5px * var(--u, 1));
    font-weight: 700;
    line-height: 1.2;
    color: #B91C1C;
}
.v-langue {
    padding: calc(2px * var(--u, 1)) calc(7px * var(--u, 1));
    border-radius: 999px;
    background: var(--non-conforme);
    font-size: calc(10px * var(--u, 1));
    font-style: normal;
    letter-spacing: .06em;
    color: #fff;
}