/* =========================================================================
   Lingua — accueil : socle de la scene « Verre » (prototype 2), integre a la
   landing publique. Sous-ensemble de /verre/accueil.css (le socle commun des
   prototypes), repris ici SANS les remises a zero globales (body, *, h1, ul…)
   qui casseraient la feuille de style de la landing.

   Les jetons sont scopes a .acc-scene pour ne pas ecraser les jetons :root de
   la landing. La couche « verre » (fond, bulles, bouton pillule) reste dans
   /verre/verre.css, chargee apres ce fichier pour surclasser le calque neutre
   ci-dessous.
   ========================================================================= */

.acc-scene {
    --fond: #F5F4FB;
    --surface: #FFFFFF;
    --encre: #1F1D36;
    --gris: #6B6880;
    --brume: #E5E3F1;

    --indigo: #4F46E5;
    --indigo-soutenu: #3730A3;
    --indigo-profond: #312E81;
    --voile: #EEECFB;

    --conforme: #059669;
    --non-conforme: #DC2626;
    --incertain: #D97706;
    --erreur: #64748B;

    --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

    /* Fond de la scene (couleur dominante du shader) : repris du prototype. */
    --scene-fond: #EEECFB;
}

/* ---------- Bouton ---------- */

.acc-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.acc-bouton--lancer {
    background: var(--indigo);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .75);
}
.acc-bouton--lancer:hover { background: var(--indigo-soutenu); }

.acc-bouton:disabled {
    opacity: .72;
    cursor: progress;
}

/* Anneau a deux couleurs : net sur fond clair comme sur fond sombre (scene). */
.acc-bouton:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--indigo);
}

/* ---------- Scene ---------- */

.acc-scene {
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: 72vh;
    border-radius: 18px;
    overflow: hidden;
    background: var(--scene-fond);
    box-shadow:
        0 36px 70px -28px rgba(49, 46, 129, .55),
        0 14px 28px -14px rgba(49, 46, 129, .4),
        0 0 0 1px rgba(79, 70, 229, .22);
}

/* Sans WebGL : message centre, sur une pastille lisible quel que soit le fond. */
.acc-sans-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 48px);
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: var(--encre);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 14px rgba(31, 29, 54, .2);
}

/* ---------- Calque : verre neutre, surclasse par verre.css ---------- */

.acc-calque {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    pointer-events: none;
}
.acc-calque :is(a, button, input, select, textarea, summary, [tabindex]) { pointer-events: auto; }

.acc-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.acc-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .88);
    color: var(--encre);
    font-family: var(--mono);
    font-size: 12.5px;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 4px 14px rgba(31, 29, 54, .2), 0 0 0 1px rgba(255, 255, 255, .5);
}
.acc-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-cadenas { flex: none; width: 13px; height: 13px; color: var(--conforme); }

/* Deux rangees : phase a gauche et score a droite, puis les compteurs. */
.acc-etat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    color: var(--encre);
    font-size: 12.5px;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 4px 14px rgba(31, 29, 54, .2), 0 0 0 1px rgba(255, 255, 255, .5);
}

.acc-phase {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--indigo-soutenu);
}
.acc-phase::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gris);
}
.acc-scene[data-etat="exploration"] .acc-phase::before,
.acc-scene[data-etat="analyse"] .acc-phase::before,
.acc-scene[data-etat="rapport"] .acc-phase::before {
    background: var(--indigo);
    animation: acc-pouls 1.1s ease-out infinite;
}
.acc-scene[data-etat="termine"] .acc-phase::before { background: var(--conforme); }

@keyframes acc-pouls {
    from { box-shadow: 0 0 0 0 rgba(79, 70, 229, .45); }
    to { box-shadow: 0 0 0 7px rgba(79, 70, 229, 0); }
}

.acc-compteurs {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.acc-compteur {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--gris);
}
.acc-compteur b {
    color: var(--encre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.acc-compteur--conforme::before,
.acc-compteur--non-conforme::before,
.acc-compteur--incertain::before,
.acc-compteur--erreur::before {
    content: "";
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.acc-compteur--conforme::before { background: var(--conforme); }
.acc-compteur--non-conforme::before { background: var(--non-conforme); }
.acc-compteur--incertain::before { background: var(--incertain); }
.acc-compteur--erreur::before { background: var(--erreur); }

.acc-score {
    grid-area: 1 / 2;
    justify-self: end;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris);
}
.acc-score b {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--indigo-profond);
}

/* Statut annonce par les lecteurs d'ecran (aria-live), invisible a l'ecran. */
.acc-statut,
.acc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Secours : video, affiche ou panneau (secours.js) ---------- */

.acc-secours-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: var(--scene-fond);
}
/* Au repos, l'image respire a peine ; elle se fige des que l'essai demarre. */
.acc-scene[data-etat="repos"] .acc-secours-media {
    animation: acc-respire 6s ease-in-out infinite alternate;
}
@keyframes acc-respire {
    from { transform: scale(1); }
    to { transform: scale(1.015); }
}

.acc-secours-panneau {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--scene-fond);
}
.acc-secours-carte {
    max-width: 440px;
    padding: 22px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    color: var(--encre);
    text-align: center;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .5);
}
.acc-secours-carte strong { display: block; margin-bottom: 6px; font-size: 17px; }
.acc-secours-carte p { font-size: 14px; line-height: 1.5; text-wrap: balance; }
.acc-secours-note { margin-top: 8px; font-size: 12.5px !important; color: var(--gris); }

/* Sous la barre du haut : discret, mais la cause reste lisible au survol (title). */
.acc-badge {
    position: absolute;
    top: 70px;
    right: 14px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .7);
    color: var(--encre);
    font-size: 11px;
    line-height: 1.4;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
}

/* ---------- Petit ecran ---------- */

@media (max-width: 900px) {
    .acc-barre .acc-bouton { padding: 8px 14px; font-size: 14px; }
    .acc-url { padding: 7px 11px; font-size: 12px; }
    .acc-compteurs { gap: 4px 10px; font-size: 12px; }
    .acc-scene { aspect-ratio: 4 / 5; max-height: 78vh; max-height: 78svh; }
}

/* Etroit : seuls les points colores et les nombres des verdicts restent a l'ecran. */
@media (max-width: 640px) {
    .acc-compteur--conforme .acc-compteur-nom,
    .acc-compteur--non-conforme .acc-compteur-nom,
    .acc-compteur--incertain .acc-compteur-nom,
    .acc-compteur--erreur .acc-compteur-nom {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-bouton { transition: none; }
    .acc-scene .acc-phase::before,
    .acc-scene .acc-secours-media { animation: none !important; }
}