/* =========================================================================
   Capture — feuille de style autonome.
   Aucun lien avec styles.css : MaxWatch reste intact.
   ========================================================================= */

:root {
    /* Encre et neutres : legerement biaises vers l'indigo plutot que gris purs. */
    --encre: #1b1836;
    --encre-douce: #413c63;
    --gris: #6b6885;
    --gris-clair: #74718c;   /* 4,7:1 sur blanc — lisible en projection */
    --trait: #9a97ad;        /* non textuel uniquement : filets, chevrons */

    --papier: #f7f6fd;
    --surface: #ffffff;
    --surface-creuse: #f2f0fb;
    --brume: #e6e3f5;
    --brume-forte: #d3cfeb;

    /* Accent unique. */
    --indigo: #4f46e5;
    --indigo-profond: #3730a3;
    --indigo-voile: #eeecfd;

    /* Chambre noire : la console de progression. */
    --nuit: #16142b;
    --nuit-claire: #241f45;

    /* Semantique, volontairement distincte de l'accent. */
    --ok: #0f766e;
    --ok-voile: #e3f4f1;
    --alerte: #b45309;
    --alerte-voile: #fdf2e2;
    --erreur: #be123c;
    --erreur-voile: #fdeaef;

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

    --rayon: 10px;
    --hauteur-entete: 72px;   /* remesure au demarrage par le JS */
    --rayon-sm: 6px;
    --ombre: 0 1px 2px rgba(27, 24, 54, .06), 0 4px 12px rgba(27, 24, 54, .05);
    --ombre-forte: 0 12px 40px rgba(27, 24, 54, .16);
}

*, *::before, *::after { box-sizing: border-box; }

/* Un selecteur de classe l'emporte sur la regle [hidden] du navigateur : sans
   cette ligne, tout element portant .cap-btn reste visible malgre l'attribut. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--police);
    background: var(--papier);
    color: var(--encre);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
    border-radius: var(--rayon-sm);
}

/* ---------- En-tete ---------- */

.cap-entete {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--brume);
    position: sticky;
    top: 0;
    z-index: 40;
}

.cap-marque { display: flex; align-items: center; gap: 12px; }

/* Diaphragme : rappel photographique, dessine plutot que decoratif. */
.cap-objectif {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--indigo);
    display: grid; place-items: center;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 1px var(--brume-forte);
    flex-shrink: 0;
}
.cap-objectif::after {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--surface);
    opacity: .92;
}

.cap-titre { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.cap-sous-titre {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gris);
}

.cap-entete-fin { margin-left: auto; display: flex; align-items: center; gap: 20px; }

.cap-stats { display: flex; gap: 24px; }
.cap-stat { text-align: right; }
.cap-stat b {
    display: block;
    font-family: var(--mono);   /* ce sont des donnees : meme regle qu'ailleurs */
    font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.cap-stat span {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--gris-clair);
}

.cap-retour {
    color: var(--gris); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 8px 12px;
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon-sm);
    transition: border-color .15s, color .15s;
}
.cap-retour:hover { color: var(--indigo); border-color: var(--brume-forte); }

/* ---------- Structure ---------- */

.cap-atelier {
    display: grid;
    grid-template-columns: 372px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 28px 60px;
    align-items: start;
    max-width: 1800px;
    margin: 0 auto;
}

@media (max-width: 1080px) {
    .cap-atelier { grid-template-columns: minmax(0, 1fr); }
}

.cap-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--hauteur-entete) + 16px); }
@media (max-width: 1080px) { .cap-rail { position: static; } }

.cap-carte {
    background: var(--surface);
    border: 1px solid var(--brume);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.cap-carte-tete {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 16px;
    border-bottom: 1px solid var(--brume);
}
.cap-carte-tete h2 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--encre-douce);
}
.cap-compteur {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gris);
    background: var(--surface-creuse);
    padding: 3px 8px;
    border-radius: 20px;
}

.cap-corps { padding: 16px 16px; }

/* ---------- Boutons ---------- */

.cap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--rayon-sm);
    background: var(--indigo);
    color: #fff;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .08s, box-shadow .15s;
}
.cap-btn:hover:not(:disabled) { background: var(--indigo-profond); }
.cap-btn:active:not(:disabled) { transform: translateY(1px); }
.cap-btn:disabled {
    cursor: not-allowed;
    background: var(--surface-creuse);
    color: var(--gris-clair);
    border-color: var(--brume-forte);
}
.cap-btn--large { min-height: 46px; }   /* le libelle change de longueur */

.cap-btn--fantome { background: transparent; color: var(--encre-douce); border-color: var(--brume-forte); }
.cap-btn--fantome:hover:not(:disabled) { background: var(--surface-creuse); color: var(--indigo); border-color: var(--brume-forte); }

.cap-btn--large { width: 100%; padding: 12px; font-size: 14.5px; }

.cap-btn--mini {
    padding: 4px 8px; font-size: 12px;
    background: transparent; color: var(--gris);
    border-color: transparent;
}
.cap-btn--mini:hover:not(:disabled) { background: var(--surface-creuse); color: var(--indigo); }
.cap-btn--mini.est-danger:hover:not(:disabled) { background: var(--erreur-voile); color: var(--erreur); }

/* ---------- Champs ---------- */

.cap-champ { display: flex; flex-direction: column; gap: 5px; }
.cap-champ + .cap-champ { margin-top: 12px; }

.cap-etiquette {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--gris);
}

.cap-saisie {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon-sm);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.cap-saisie:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-voile);
}
.cap-saisie--url { font-family: var(--mono); font-size: 12.5px; }

/* ---------- Liste des sujets ---------- */

.cap-sujets {
    max-height: 46vh; overflow-y: auto;
    /* Indique la continuation plutot que trancher un item en plein milieu.
       Leve par est-au-bout, pilotee au defilement cote JS. */
    mask-image: linear-gradient(to top, transparent 0, #000 24px);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 24px);
}
.cap-sujets.est-au-bout { mask-image: none; -webkit-mask-image: none; }

/* Collant dans le rail — savoir dans quel groupe on se trouve en defilant
   103 sujets — mais pas dans la liste des seances, ou il se figeait derriere
   l'en-tete faute de z-index. */
.cap-sujets .cap-groupe-titre { position: sticky; top: 0; z-index: 1; }

.cap-groupe-titre {
    padding: 8px 16px 5px;
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gris-clair);
    background: var(--surface);
}

/* Dans la liste des seances, le changement de jour doit se voir : une bande
   pleine largeur plutot qu'une etiquette discrete au ras des rangees. */
.cap-seances .cap-groupe-titre {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--encre-douce);
    background: var(--surface-creuse);
    border-top: 1px solid var(--brume-forte);
    border-bottom: 1px solid var(--brume);
}
.cap-seances > .cap-groupe-titre:first-child { border-top: none; }
.cap-seances .cap-groupe-titre::after {
    content: ""; flex: 1; height: 1px; background: var(--brume-forte);
}

.cap-sujet {
    position: relative;
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--brume);
    transition: background .12s;
}
.cap-sujet:hover { background: var(--surface-creuse); }
.cap-sujet.est-inactif .cap-sujet-nom,
.cap-sujet.est-inactif .cap-sujet-url { opacity: .45; }

.cap-sujet input[type="checkbox"] { margin-top: 4px; accent-color: var(--indigo); width: 15px; height: 15px; flex-shrink: 0; }

.cap-sujet-texte { min-width: 0; flex: 1; }
.cap-sujet-nom {
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.cap-sujet-url {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gris);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-sujet-meta {
    font-size: 10.5px; color: var(--gris-clair);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.cap-sujet-actions {
    position: absolute;
    right: 8px; bottom: 4px;
    display: flex; gap: 1px;
    padding: 2px;
    border-radius: var(--rayon-sm);
    background: var(--surface-creuse);
    box-shadow: -8px 0 8px var(--surface-creuse);
    opacity: 0; pointer-events: none;
    transition: opacity .12s;
}
.cap-sujet:hover .cap-sujet-actions,
.cap-sujet:focus-within .cap-sujet-actions { opacity: 1; pointer-events: auto; }

/* ---------- Options de capture ---------- */

.cap-options { display: flex; flex-direction: column; gap: 12px; }

.cap-choix { display: flex; gap: 8px; flex-wrap: wrap; }

.cap-jeton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--brume-forte);
    border-radius: 30px;
    font-size: 12.5px; font-weight: 600;
    color: var(--encre-douce);
    cursor: pointer;
    user-select: none;
    transition: all .14s;
}
.cap-jeton input { display: none; }
.cap-jeton:hover { border-color: var(--indigo); color: var(--indigo); }
.cap-jeton.est-choisi {
    background: var(--indigo-voile);
    border-color: var(--indigo);
    color: var(--indigo-profond);
}
.cap-jeton small { font-family: var(--mono); font-size: 10.5px; opacity: .7; font-weight: 500; }

.cap-bascule { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cap-bascule input { accent-color: var(--indigo); width: 15px; height: 15px; }

.cap-note {
    font-size: 11.5px; color: var(--gris);
    line-height: 1.45;
    padding: 8px 12px;
    background: var(--surface-creuse);
    border-radius: var(--rayon-sm);
    border-left: 2px solid var(--brume-forte);
}
.cap-note b { color: var(--encre-douce); font-weight: 600; }

/* ---------- Planches contact ---------- */

.cap-planche { padding: 16px 16px 16px; }

.cap-planche-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.cap-planche-tete h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.cap-planche-url {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--gris);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-planche-url:hover { color: var(--indigo); text-decoration: underline; }


.cap-vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 16px;
    /* Sans cela, une figure 4/3 est etiree a la hauteur de sa voisine 9/16 :
       deux cadres sur trois n'etaient que du vide. */
    align-items: start;
}

/* Une epreuve : cadre fin, image rognee en haut, legende en mono dessous. */
.cap-epreuve {
    margin: 0;                 /* figure porte une marge de 40px par defaut */
    border: 1px solid var(--brume);
    border-radius: var(--rayon-sm);
    overflow: hidden;
    background: var(--surface-creuse);
    cursor: zoom-in;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cap-epreuve:hover {
    border-color: var(--indigo);
    box-shadow: 0 6px 20px rgba(79, 70, 229, .16);
}
/* Un negatif mobile n'a pas la forme d'un negatif bureau : c'est la raison
   d'etre de l'outil, elle doit se lire dans la planche. */
.cap-epreuve--mobile .cap-epreuve-image { aspect-ratio: 9 / 16; }

.cap-epreuve-image {
    display: block; width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover; object-position: top center;
    background: var(--brume);
    border-bottom: 1px solid var(--brume);
}

.cap-epreuve-pied {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px;
    background: var(--surface);
}
.cap-format {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--indigo-voile);
    color: var(--indigo-profond);
}
.cap-format svg { width: 12px; height: 12px; }
.cap-dimensions {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--mono); font-size: 10.5px;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

.cap-drapeau--erreur { background: var(--erreur-voile); color: var(--erreur); }

.cap-drapeau {
    display: inline-block;
    font-size: 10px; font-weight: 600;
    padding: 1px 8px; border-radius: 3px;
    background: var(--alerte-voile); color: var(--alerte);
}

/* ---------- Etat vide ---------- */

.cap-vide {
    text-align: center;
    padding: 64px 28px;
    color: var(--gris);
}
.cap-vide-objectif {
    width: 58px; height: 58px; margin: 0 auto 16px;
    border-radius: 50%;
    border: 2px dashed var(--brume-forte);
    display: grid; place-items: center;
}
.cap-vide-objectif::after {
    content: ""; width: 20px; height: 20px;
    border-radius: 50%; background: var(--brume-forte);
}
.cap-vide h3 { font-size: 16px; color: var(--encre); margin-bottom: 5px; }
.cap-vide p { margin: 0; font-size: 13.5px; }

/* ---------- Modales ---------- */

.cap-voile {
    position: fixed; inset: 0;
    background: rgba(22, 20, 43, .62);
    display: grid; place-items: center;
    padding: 28px;
    z-index: 90;
    /* Le backdrop-filter a ete retire : Chrome conservait sa couche composee
       apres le passage en display:none, si bien que le voile restait visible
       jusqu'au premier mouvement de souris. Le fond a 62 % separe deja
       suffisamment, et un fondu remplace l'effet perdu. */
    transition: opacity .16s ease, visibility .16s;
}
/* On masque par opacite plutot que par display : plus de bascule de couche,
   donc plus d'artefact, et la disparition devient progressive. */
.cap-voile[hidden] {
    display: grid !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.cap-voile[hidden] { display: none; }

.cap-modale {
    background: var(--surface);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
    width: 100%; max-width: 640px;
    max-height: 88vh;
    display: flex; flex-direction: column;
}
.cap-modale--large { max-width: 940px; }

.cap-modale-tete {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--brume);
}
.cap-modale-tete h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.cap-modale-corps { padding: 16px 20px; overflow-y: auto; }
.cap-modale-pied {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--brume);
    background: var(--surface-creuse);
    border-radius: 0 0 var(--rayon) var(--rayon);
}

.cap-fermer {
    margin-left: auto;
    background: transparent; border: none;
    font-size: 22px; line-height: 1; color: var(--gris-clair);
    cursor: pointer; padding: 2px 8px; border-radius: var(--rayon-sm);
}
.cap-fermer:hover { background: var(--surface-creuse); color: var(--encre); }

/* ---------- Resultats du crawler ---------- */

.cap-trouvailles { display: flex; flex-direction: column; gap: 1px; }

.cap-trouvaille {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    border-radius: var(--rayon-sm);
}
.cap-trouvaille:hover { background: var(--surface-creuse); }
.cap-trouvaille input { margin-top: 3px; accent-color: var(--indigo); width: 15px; height: 15px; flex-shrink: 0; }
.cap-trouvaille-texte { min-width: 0; flex: 1; }
.cap-trouvaille-titre { font-size: 13px; font-weight: 600; line-height: 1.35; }
.cap-trouvaille-url {
    font-family: var(--mono); font-size: 11px; color: var(--gris);
    word-break: break-all;
}

.cap-externe { opacity: .78; }
.cap-externe .cap-trouvaille-titre { font-weight: 500; }

.cap-section-titre {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 8px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--gris);
}
.cap-section-titre:first-child { margin-top: 0; }
.cap-section-titre::after {
    content: ""; flex: 1; height: 1px; background: var(--brume);
}

/* ---------- Visionneuse ---------- */

.cap-visionneuse {
    position: fixed; inset: 0;
    /* Opaque : a 93 % la page defilait encore derriere l'epreuve, ce qui
       rendait le calque de difference illisible. */
    background: var(--nuit);
    z-index: 100;
    display: flex; flex-direction: column;
}
.cap-visionneuse[hidden] { display: none; }

.cap-visionneuse-tete {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 24px;
    color: #cfcaf0;
    border-bottom: 1px solid var(--nuit-claire);
    flex-shrink: 0;
}
.cap-visionneuse-tete h3 { font-size: 14px; font-weight: 600; color: #fff; }
.cap-visionneuse-tete .cap-dimensions { color: #9d97c9; }
.cap-visionneuse-tete .cap-fermer { color: #9d97c9; font-size: 26px; flex-shrink: 0; }
.cap-visionneuse-tete .cap-fermer:hover { background: var(--nuit-claire); color: #fff; }

.cap-visionneuse-corps {
    flex: 1; overflow: auto;
    padding: 24px;
    display: flex; justify-content: center; align-items: flex-start; gap: 24px;
}
.cap-visionneuse-corps img {
    max-width: 100%;
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre-forte);
    background: #fff;
}

/* Comparaison : deux epreuves cote a cote, chacune sous-titree. */
.cap-comparaison { display: flex; gap: 20px; align-items: flex-start; }
.cap-comparaison figure { margin: 0; flex: 1; min-width: 0; }
.cap-comparaison figcaption {
    font-family: var(--mono); font-size: 11.5px;
    color: #9d97c9;
    padding: 8px 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.cap-comparaison img { width: 100%; }

/* ---------- Accessibilite ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   Seances — une carte unique contenant N rangees.
   Le succes est silencieux : seule l'anomalie depense de l'encre.
   ========================================================================= */

.cap-seances { display: flex; flex-direction: column; }

.cap-seance {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    width: 100%;
    min-height: 62px;
    padding: 12px 16px 12px 20px;
    border: none;
    border-top: 1px solid var(--brume);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.cap-seances > .cap-seance:first-child { border-top: none; }
.cap-seance:hover { background: var(--surface-creuse); }

/* Filet de statut : transparent quand tout va bien. Une liste saine a un
   bord gauche parfaitement propre ; le moindre probleme casse la ligne. */
.cap-seance::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
}
.cap-seance.a-echecs::before { background: var(--alerte); }
.cap-seance.est-perdue::before { background: var(--erreur); }
.cap-seance.est-interrompue::before {
    background: repeating-linear-gradient(
        180deg, var(--trait) 0 4px, transparent 4px 8px);
}

.cap-seance-apercu {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--brume);
    object-fit: cover; object-position: top center;
    background: var(--surface-creuse);
}
.cap-seance-apercu--vide {
    display: grid; place-items: center;
    border-style: dashed; border-color: var(--brume-forte);
}
.cap-seance-apercu--vide::after {
    content: ""; width: 14px; height: 14px;
    border-radius: 50%; background: var(--brume-forte);
}

.cap-seance-identite { flex: 1; min-width: 0; }
.cap-seance-titre {
    display: block;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    color: var(--encre);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-seance-technique {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--gris);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Le peigne : un tiret par epreuve. Porte le volume, le taux d'echec et la
   completude dans une seule forme, lisible sans lire un chiffre. */
.cap-peigne {
    display: flex; align-items: flex-end; gap: 3px;
    flex-shrink: 0;
    margin-right: 4px;
}
.cap-dent {
    width: 3px; height: 20px;
    border-radius: 1px;
    /* Le succes est silencieux : l'indigo est reserve aux commandes. */
    background: var(--encre-douce);
}
.cap-dent.est-ratee { background: var(--erreur); }
.cap-dent.est-vide { background: transparent; box-shadow: inset 0 0 0 1px var(--brume-forte); }

.cap-peigne--mini .cap-dent { height: 14px; }

.cap-seance-heure {
    flex-shrink: 0;
    font-family: var(--mono); font-size: 12px;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

.cap-chevron {
    flex-shrink: 0;
    font-size: 17px; line-height: 1;
    color: var(--trait);
    transition: transform .12s, color .12s;
}
.cap-seance:hover .cap-chevron { transform: translateX(2px); color: var(--indigo); }

/* =========================================================================
   Fil d'Ariane du rapport detaille
   ========================================================================= */

.cap-fil {
    position: sticky; top: var(--hauteur-entete); z-index: 30;
    display: flex; align-items: center; gap: 12px;
    height: 44px;
    padding: 0 4px;
    margin-bottom: 16px;
    background: var(--papier);
    border-bottom: 1px solid var(--brume);
}
.cap-fil-retour {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon-sm);
    background: transparent;
    font-size: 13px; font-weight: 600;
    color: var(--encre-douce);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cap-fil-retour:hover { color: var(--indigo); border-color: var(--indigo); }
.cap-fil-separateur { color: var(--brume-forte); }
.cap-fil-titre { font-size: 13px; font-weight: 700; }
.cap-fil-fin { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.cap-fil-technique {
    font-family: var(--mono); font-size: 11.5px; color: var(--gris);
    font-variant-numeric: tabular-nums;
}

.cap-rapport { animation: cap-entree .14s ease-out; }
@keyframes cap-entree {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Fiche technique du rapport */
.cap-fiche {
    display: flex; flex-wrap: wrap; gap: 32px;
    padding: 16px 16px;
    margin-bottom: 16px;
}
.cap-fiche-bloc span {
    display: block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--gris-clair);
    margin-bottom: 3px;
}
.cap-fiche-bloc b {
    font-family: var(--mono);
    font-size: 20px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.cap-fiche-bloc.a-echecs b { color: var(--erreur); }

/* Les echecs se lisent avant les vignettes, jamais apres. */
.cap-echecs {
    padding: 16px 16px;
    margin-bottom: 16px;
    background: var(--erreur-voile);
    border-radius: var(--rayon);
    border-left: 3px solid var(--erreur);
}
.cap-echecs h4 {
    margin: 0 0 8px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--erreur);
}
.cap-echec {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--encre-douce);
    padding: 3px 0;
}

/* Dans le rapport, les blocs par sujet perdent le chrome de carte :
   des cartes imbriquees dans une carte trahissent le travail non fini. */
.cap-planche--nue {
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--brume);
}
.cap-planche--nue:last-child { border-bottom: none; padding-bottom: 0; }
.cap-vignettes--rapport {
    /* 178px est illisible en projection sur une page 1920. */
    grid-template-columns: repeat(auto-fill, 264px);
    justify-content: start;
}

/* =========================================================================
   Rail : recherche et rangees a hauteur bornee
   ========================================================================= */

.cap-recherche { padding: 12px 16px 0; }

.cap-aucun-resultat {
    padding: 24px 16px; text-align: center;
    font-size: 13px; color: var(--gris);
}

/* Un chemin d'URL n'est pas un titre : il se lit en mono, comme toute
   donnee technique. */
.cap-trouvaille-titre.est-chemin {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}

/* Filtre actif sur la liste des seances : visible et revocable d'un clic. */
.cap-filtre-actif {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 8px;
    border: 1px solid var(--indigo);
    border-radius: 20px;
    background: var(--indigo-voile);
    color: var(--indigo-profond);
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
}
.cap-filtre-actif:hover { background: var(--surface); }
.cap-filtre-actif span { font-size: 14px; line-height: 1; opacity: .7; }

/* Une dent qui represente un groupe partiellement execute. */
.cap-dent.est-partielle {
    background: linear-gradient(to top, var(--encre-douce) 50%, transparent 50%);
    box-shadow: inset 0 0 0 1px var(--brume-forte);
}

/* Au-dela de 40 epreuves, les cases se resserrent : on ne distingue plus le
   contenu, seulement rempli / en cours / vide — ce qui suffit. */

/* Filtrage : masquer coute une bascule de classe, la reconstruction du rail
   coutait ~156 ms par caractere tape. */
.cap-sujet.est-masque,
.cap-groupe-titre.est-masque { display: none; }

/* Le navigateur saute la mise en page de ce qui sort du champ de vision.
   Sans cela, reafficher 1000 rangees apres un filtre coutait 69 ms de layout ;
   la taille intrinseque evite que la barre de defilement ne saute. */
.cap-sujet {
    content-visibility: auto;
    contain-intrinsic-size: auto 70px;
}
.cap-seance {
    content-visibility: auto;
    contain-intrinsic-size: auto 69px;
}
/* Une planche de 100 epreuves : meme raison, plus le decodage des images. */
.cap-epreuve {
    content-visibility: auto;
    contain-intrinsic-size: auto 237px;
}

/* Pagination des seances : n'apparait que lorsqu'il y a plus d'une page. */
.cap-pagination {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--brume);
}
.cap-pagination-etat {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
    margin-left: auto; margin-right: auto;
}

/* =========================================================================
   Ecart de silhouette — la pastille qui dit d'un coup d'oeil si la page a
   bouge depuis le passage precedent. Couleurs semantiques, jamais l'accent.
   ========================================================================= */

.cap-epreuve { position: relative; }

.cap-ecart {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px;
    border-radius: 11px;
    font-family: var(--mono);
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(27, 24, 54, .18);
}
/* En surimpression sur une vignette seulement ; ailleurs elle suit le flux. */
.cap-epreuve .cap-ecart { position: absolute; top: 8px; right: 8px; z-index: 2; }

.cap-ecart.est-premiere   { background: var(--surface-creuse); color: var(--gris); }
.cap-ecart.est-stable     { background: var(--ok-voile);      color: var(--ok); }
.cap-ecart.est-bouge      { background: var(--alerte-voile);  color: var(--alerte); }
.cap-ecart.est-differente { background: var(--erreur-voile);  color: var(--erreur); }

/* Epingle de reference : la capture sert de ligne de base et echappe a la purge. */
.cap-epingle {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(27, 24, 54, .18);
    color: var(--gris-clair);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.cap-epreuve:hover .cap-epingle,
.cap-epreuve:focus-within .cap-epingle,
.cap-epingle.est-posee { opacity: 1; }
.cap-epingle.est-posee { color: var(--indigo); background: var(--indigo-voile); }
.cap-epingle:hover { color: var(--indigo); }
.cap-epingle svg { width: 13px; height: 13px; }

/* =========================================================================
   Visionneuse : « Comparer » devient une action de premier plan, et les
   modes de comparaison s'affichent une fois celle-ci ouverte.
   ========================================================================= */

.cap-visionneuse-identite {
    display: flex; align-items: baseline; gap: 12px;
    /* flex-basis 0 : le bloc prend la place restante sans jamais imposer sa
       largeur naturelle. Sans cela un libelle long poussait le bouton de
       fermeture hors de l'en-tete, jusqu'a une largeur nulle. */
    flex: 1 1 0;
    min-width: 0;
}
.cap-visionneuse-identite h3 {
    font-size: 14px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-visionneuse-identite .cap-dimensions {
    /* Neutralise le margin-left:auto de la classe de base, qui rejetait la
       ligne technique a l'oppose du titre — d'ou un titre qui paraissait
       colle en haut alors que le bloc etait bien centre. */
    margin-left: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-visionneuse-identite h3 { flex-shrink: 0; max-width: 40%; }

.cap-visionneuse-reference {
    font-family: var(--mono); font-size: 11.5px;
    color: #9d97c9;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 300px; overflow: hidden; text-overflow: ellipsis;
}

.cap-modes { display: flex; gap: 4px; flex-shrink: 0; }
.cap-mode {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border: 1px solid #3b3563;
    border-radius: var(--rayon-sm);
    background: transparent;
    color: #cfcaf0;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.cap-mode:hover { border-color: var(--indigo); color: #fff; }
.cap-mode.est-choisi { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.cap-mode kbd {
    font-family: var(--mono); font-size: 10.5px;
    padding: 1px 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .14);
}

/* --- Clignotement : deux images superposees, une seule visible ----------- */
.cap-clignotement { position: relative; max-width: 100%; }
.cap-clignotement img { display: block; max-width: 100%; border-radius: var(--rayon-sm); }
.cap-clignotement img + img { position: absolute; inset: 0; }
.cap-clignotement.montre-avant img:last-child { visibility: hidden; }

/* --- Rideau : une seule image en pleine largeur, revelee au glissement --- */
.cap-rideau { position: relative; max-width: 100%; user-select: none; }
.cap-rideau img { display: block; width: 100%; border-radius: var(--rayon-sm); }
.cap-rideau img + img {
    position: absolute; inset: 0;
    clip-path: inset(0 calc(100% - var(--rideau, 50%)) 0 0);
}
.cap-rideau-poignee {
    position: absolute; top: 0; bottom: 0;
    left: var(--rideau, 50%);
    width: 2px; background: var(--indigo);
    cursor: ew-resize;
}
.cap-rideau-poignee::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--indigo);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* --- Calque de diff : les pixels changes en surimpression --------------- */
.cap-calque { position: relative; max-width: 100%; }
.cap-calque img { display: block; max-width: 100%; border-radius: var(--rayon-sm); }
.cap-calque img + img { position: absolute; inset: 0; }

.cap-etiquette-mode {
    position: sticky; top: 0;
    align-self: flex-start;
    font-family: var(--mono); font-size: 11.5px;
    color: #9d97c9;
    padding: 4px 0 8px;
}

/* =========================================================================
   Barre d'action contextuelle
   Elle apparait des le premier sujet coche. C'est la reponse au probleme
   central : cocher une case ne produisait aucun effet visible, et l'action
   principale vivait sous la pliure.
   ========================================================================= */

.cap-barre-action {
    position: sticky;
    top: var(--hauteur-entete);
    z-index: 45;
    display: flex; align-items: center; gap: 16px;
    height: 72px;
    padding: 0 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--brume-forte);
    box-shadow: 0 6px 20px rgba(27, 24, 54, .10);
    animation: cap-barre-entree .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cap-barre-entree {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cap-barre-compte {
    font-size: 18px; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--encre);
    white-space: nowrap;
}
.cap-barre-estimation {
    font-family: var(--mono); font-size: 13px;
    color: var(--gris);
    white-space: nowrap;
}

.cap-lien {
    border: none; background: none; padding: 0;
    font-size: 13px; font-weight: 600;
    color: var(--gris);
    text-decoration: underline;
    cursor: pointer;
}
.cap-lien:hover { color: var(--indigo); }

.cap-choix--barre { margin-left: auto; flex-wrap: nowrap; }

/* Le seul aplat indigo de la page, et il est enorme : lisible du fond
   d'une salle en projection. */
.cap-btn--action {
    height: 48px;
    padding: 0 28px;
    font-size: 17px; font-weight: 600;
    flex-shrink: 0;
}
.cap-btn--action:disabled {
    /* Jamais grise : un bouton desactive n'explique jamais pourquoi.
       Il reste cliquable et signale ce qui manque. */
    background: var(--indigo);
    color: #fff;
    border-color: transparent;
    opacity: 1;
    cursor: pointer;
}

/* Halo attirant l'oeil vers le rail quand on lance sans rien avoir choisi. */
@keyframes cap-halo {
    0%, 100% { box-shadow: var(--ombre); }
    35%      { box-shadow: 0 0 0 4px var(--indigo-voile), 0 0 0 5px var(--indigo); }
}
.cap-carte.est-signalee { animation: cap-halo .9s ease-in-out; }

/* --- L'amorce permanente dans l'en-tete --------------------------------- */
.cap-btn--amorce {
    margin-left: 24px;
    height: 44px;
    padding: 0 20px;
    font-size: 14.5px;
    flex-shrink: 0;
}

/* --- Reglages ----------------------------------------------------------- */
.cap-reglages { position: relative; }
.cap-reglages-bouton {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon-sm);
    background: transparent;
    color: var(--gris);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.cap-reglages-bouton:hover { color: var(--indigo); border-color: var(--indigo); }
.cap-reglages-bouton svg { width: 18px; height: 18px; }

.cap-reglages-panneau {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    z-index: 60;
    width: 320px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
}
.cap-reglages-aide {
    margin: 8px 0 12px;
    font-size: 12px; line-height: 1.45;
    color: var(--gris);
}

/* Sans sujet choisi, la barre n'existe pas : la premiere carte ne doit pas
   sauter quand elle apparait. */
.cap-atelier { scroll-margin-top: calc(var(--hauteur-entete) + 72px); }

/* =========================================================================
   Deux axes de lecture. La liste des seances repond a « qu'ai-je lance » ;
   la vue par sujet repond a « qu'est-ce qui a change sur cette page », qui
   est la question que l'usager se pose reellement.
   ========================================================================= */

.cap-onglets {
    display: flex; gap: 4px;
    margin-bottom: 16px;
}
.cap-onglet {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--rayon-sm);
    background: transparent;
    font-size: 13.5px; font-weight: 600;
    color: var(--gris);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cap-onglet:hover { color: var(--indigo); }
.cap-onglet.est-choisi {
    background: var(--surface);
    border-color: var(--brume-forte);
    color: var(--encre);
}

/* --- Une ligne par page surveillee -------------------------------------- */
.cap-veille { display: flex; flex-direction: column; }

.cap-suivi {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--brume);
}
.cap-veille > .cap-suivi:first-child { border-top: none; }
.cap-suivi:hover { background: var(--surface-creuse); }

.cap-suivi-apercu {
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--brume); border-radius: 6px;
    object-fit: cover; object-position: top center;
    background: var(--surface-creuse);
    cursor: zoom-in;
}
.cap-suivi-identite { flex: 1; min-width: 0; }
.cap-suivi-nom {
    display: block;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-suivi-url {
    display: block;
    font-family: var(--mono); font-size: 11.5px; color: var(--gris);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cap-suivi-format {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

/* La bande temporelle : une pastille par passage, de la plus ancienne a la
   plus recente. Coloree par ecart, comme la vue « Changes » de la Wayback
   Machine : on sait quoi comparer avant meme d'avoir ouvert quoi que ce soit. */
.cap-bande { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.cap-passage {
    width: 14px; height: 22px;
    border: none; border-radius: 3px;
    cursor: pointer;
    padding: 0;
    transition: transform .1s;
}
.cap-passage:hover { transform: scaleY(1.18); }
/* La reference ne grossit pas : agrandir la pastille deformait son triangle,
   qui laissait une trainee. Sa forme suffit deja a la designer. */
.cap-passage.est-reference:hover { transform: none; filter: brightness(1.25); }
.cap-passage.est-premiere   { background: var(--brume-forte); }
.cap-passage.est-stable     { background: var(--ok-voile);    box-shadow: inset 0 0 0 1px var(--ok); }
.cap-passage.est-bouge      { background: var(--alerte-voile); box-shadow: inset 0 0 0 1px var(--alerte); }
.cap-passage.est-differente { background: var(--erreur-voile); box-shadow: inset 0 0 0 1px var(--erreur); }
.cap-passage.est-reference  { outline: 2px solid var(--indigo); outline-offset: 1px; }

.cap-suivi-date {
    flex-shrink: 0;
    font-family: var(--mono); font-size: 11.5px; color: var(--gris);
    font-variant-numeric: tabular-nums;
    min-width: 118px; text-align: right;
}

/* =========================================================================
   La reference : ligne de base contre laquelle tout est compare.
   Elle doit se voir sans crier — un fanion indigo au-dessus de sa pastille,
   et un rappel date dans la ligne.
   ========================================================================= */

.cap-bande { padding-top: 8px; }          /* place pour le fanion */

.cap-passage { position: relative; }

.cap-passage.est-reference { height: 28px; outline: none; }
/* Un fanion triangulaire pointe vers la pastille de reference. Une forme
   differente se repere bien plus vite qu'une nuance de contour. */
.cap-passage.est-reference::before {
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: -9px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--indigo);
}
/* Le liseré passe par une ombre interne plutot qu'un pseudo-element en
   inset : un element positionne tombe sur des demi-pixels selon sa position
   dans la bande, ce qui donnait des traits d'epaisseur inegale. L'ombre est
   tracee depuis la boite elle-meme, donc identique partout. */
.cap-passage.est-reference {
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 3px var(--indigo);
}

.cap-suivi-reference {
    flex-shrink: 0;
    min-width: 104px;
    display: flex; align-items: center; gap: 6px;
}
.cap-jeton-reference {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--indigo-voile);
    color: var(--indigo-profond);
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.cap-jeton-reference::before {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--indigo);
}

/* Une comparaison dont la base a change : elle n'a plus ete examinee. */
.cap-a-revoir {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--alerte-voile);
    color: var(--alerte);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
}
.cap-suivi.est-a-revoir { background: rgba(180, 83, 9, .04); }

/* --- Menu d'un passage --------------------------------------------------- */

.cap-passage-menu {
    position: fixed;
    z-index: 70;
    /* Assez large pour que « Comparer a la reference » tienne sur une ligne :
       un libelle replie sur deux lignes deforme le menu et se lit mal. */
    width: 280px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
}
.cap-passage-menu[hidden] { display: none; }

.cap-passage-menu-date {
    font-family: var(--mono); font-size: 12px;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.cap-passage-menu-etat {
    font-size: 11.5px; color: var(--gris);
    margin: 4px 0 12px;
}
.cap-passage-menu .cap-btn { width: 100%; justify-content: center; }
.cap-passage-menu .cap-btn + .cap-btn { margin-top: 8px; }

/* =========================================================================
   LE BANC DE DEVELOPPEMENT
   Trois bandes horizontales. Un plateau ou l'epreuve se construit, un rideau
   d'obturateur qui la revele, et une bande-film ou elle se range.
   Rien ne bouge qui ne soit declenche par un evenement reel du serveur.
   ========================================================================= */

:root {
    /* Courbes : entrees decelerees, sorties accelerees, mecanismes lineaires. */
    --e-entree:    cubic-bezier(.05, .7, .1, 1);
    --e-sortie:    cubic-bezier(.3, 0, .8, .15);
    --e-standard:  cubic-bezier(.2, 0, 0, 1);

    --plateau: #0f0d20;                    /* plus sombre que --nuit */
    --fil:     rgba(129, 118, 245, .28);
    --fil-vif: rgba(129, 118, 245, .55);
    --lame:    #a5b4fc;
}

.cap-console {
    background: var(--nuit);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-forte);
    margin-bottom: 20px;
}
.cap-console[hidden] { display: none; }

/* --- Tete --------------------------------------------------------------- */

.cap-labo-tete {
    display: flex; align-items: center; gap: 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--nuit-claire);
}
.cap-labo-identite { flex: 1; min-width: 0; }
.cap-labo-sujet {
    font-size: 30px; font-weight: 600; letter-spacing: -.02em;
    color: #fff; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-labo-meta {
    font-family: var(--mono); font-size: 12.5px;
    color: #9d97c9; margin-top: 4px;
}
.cap-labo-format {
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #cfcaf0;
    padding: 5px 10px;
    border: 1px solid #3b3563; border-radius: 4px;
    flex-shrink: 0;
}
.cap-labo-compteur {
    font-family: var(--mono); font-size: 40px; font-weight: 700;
    color: #fff; font-variant-numeric: tabular-nums;
    letter-spacing: -.03em; flex-shrink: 0;
}
.cap-labo-compteur i { color: #565083; font-style: normal; margin: 0 2px; }

.cap-labo-bouton {
    padding: 7px 14px;
    border: 1px solid #3b3563; border-radius: var(--rayon-sm);
    background: transparent; color: #cfcaf0;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.cap-labo-bouton:hover { border-color: var(--indigo); color: #fff; }

/* Le temoin ne bat plus en boucle : il est allume, et ne pulse qu'au
   declenchement. Une pulsation continue n'apprend rien apres la premiere. */
.cap-temoin {
    width: 12px; height: 12px; border-radius: 50%;
    background: #f43f5e; flex-shrink: 0;
    box-shadow: 0 0 10px rgba(244, 63, 94, .7);
}
.cap-temoin.est-fini { background: var(--ok); box-shadow: 0 0 10px rgba(15, 118, 110, .6); }
@keyframes cap-declic { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } }
.cap-temoin.est-declenche { animation: cap-declic .4s var(--e-standard); }

/* --- Le plateau --------------------------------------------------------- */

.cap-plateau-zone {
    display: flex; align-items: stretch; justify-content: center; gap: 20px;
    padding: 32px 24px 20px;
}

/* Regle statique, graduee a la hauteur reelle de la page photographiee.
   Elle ne bouge pas, donc elle est incapable de mentir. */
.cap-regle {
    width: 44px; flex-shrink: 0;
    position: relative;
    border-right: 1px solid rgba(207, 202, 240, .12);
}
.cap-regle span {
    position: absolute; right: 6px;
    font-family: var(--mono); font-size: 11px;
    color: rgba(207, 202, 240, .45);
    transform: translateY(-50%);
}
.cap-regle span::after {
    content: ""; position: absolute;
    right: -6px; top: 50%;
    width: 6px; height: 1px;
    background: rgba(207, 202, 240, .3);
}

.cap-plateau {
    position: relative;
    width: min(620px, 60%); height: 350px;
    background: var(--plateau);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .3s var(--e-standard);
}
.cap-plateau.est-resserre { transform: scale(.975); }

/* Le fil de fer : six blocs qui figurent la page en construction. */
.cap-fil-de-fer { position: absolute; inset: 0; }
.cap-bloc {
    position: absolute;
    border: 1px solid var(--fil);
    border-radius: 2px;
    opacity: 0;
    transition: border-color .2s linear, opacity .12s linear;
}
.cap-fil-de-fer.est-pose .cap-bloc {
    animation: cap-bloc-entree .32s var(--e-entree) both;
}
@keyframes cap-bloc-entree {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.cap-fil-de-fer.est-actif .cap-bloc { border-color: var(--fil-vif); }

/* Defilement : le seul mouvement ample, et il est vrai — l'outil fait
   reellement defiler la page a cet instant. */
.cap-fil-de-fer.est-defilant { animation: cap-defilement 12s linear infinite; }
@keyframes cap-defilement {
    from { transform: translateY(0); }
    to   { transform: translateY(-24%); }
}
/* Stabilisation : longue deceleration vers la position finale. */
.cap-fil-de-fer.est-stabilise {
    animation: none;
    transform: none;
    transition: transform .9s var(--e-entree);
}

/* Le bandeau de consentement : il apparait, puis glisse hors cadre. */
.cap-bandeau {
    position: absolute;
    left: 8%; right: 8%; bottom: 6%;
    height: 26%;
    border: 1px solid var(--fil-vif);
    background: rgba(129, 118, 245, .08);
    border-radius: 2px;
    animation: cap-bandeau-entree .2s var(--e-entree) both;
}
.cap-bandeau.est-ecarte { animation: cap-bandeau-sortie .42s var(--e-sortie) forwards; }
@keyframes cap-bandeau-entree { from { opacity: 0; } to { opacity: 1; } }
@keyframes cap-bandeau-sortie { to { transform: translateY(130%); opacity: 0; } }

/* Grille des tiers, posee a la stabilisation. */
.cap-tiers {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .2s linear;
    background:
        linear-gradient(to right, transparent 33.3%, rgba(207,202,240,.14) 33.3% 33.4%, transparent 33.4%),
        linear-gradient(to right, transparent 66.6%, rgba(207,202,240,.14) 66.6% 66.7%, transparent 66.7%),
        linear-gradient(to bottom, transparent 33.3%, rgba(207,202,240,.14) 33.3% 33.4%, transparent 33.4%),
        linear-gradient(to bottom, transparent 66.6%, rgba(207,202,240,.14) 66.6% 66.7%, transparent 66.7%);
}
.cap-tiers.est-visible { opacity: 1; }

/* --- Le rideau d'obturateur : le seul moment cher de l'ecran ------------- */

.cap-plateau-image {
    position: absolute; inset: 0;
    clip-path: inset(0 0 100% 0);
}
.cap-plateau-image img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}
.cap-plateau-image.est-revelee {
    animation: cap-rideau .7s linear forwards;
}
@keyframes cap-rideau {
    from { clip-path: inset(0 0 100% 0); filter: brightness(1.35) contrast(.85); }
    to   { clip-path: inset(0 0 0 0);    filter: none; }
}

/* La lame : la fente de l'obturateur qui descend. */
.cap-lame {
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px; background: var(--lame);
    box-shadow: 0 0 20px 4px rgba(165, 180, 252, .55);
    opacity: 0;
}
.cap-plateau-image.est-revelee .cap-lame {
    animation: cap-lame .7s linear forwards;
}
@keyframes cap-lame {
    0%   { transform: translateY(0);     opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(350px); opacity: 0; }
}

/* Le clac : un liseré qui fait le tour du plateau et s'estompe.
   Pas de flash plein cadre : 34 fois en projection, ce serait agressif. */
.cap-plateau.est-declenchee::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
    animation: cap-clac .26s var(--e-sortie) forwards;
    pointer-events: none;
}
@keyframes cap-clac { to { opacity: 0; } }

.cap-plateau-echec {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 34px;
    color: #f43f5e;
    background: rgba(244, 63, 94, .07);
    box-shadow: inset 0 0 0 2px #f43f5e;
}

/* --- Ligne d'etat et fil des etapes ------------------------------------- */

.cap-labo-etat {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 0 24px 24px;
}
.cap-etat-ligne {
    font-family: var(--mono); font-size: 17px;
    color: #cfcaf0; min-height: 24px;
}
.cap-etat-ligne.est-sortant { animation: cap-etat-sortie .14s var(--e-sortie) forwards; }
.cap-etat-ligne.est-entrant { animation: cap-etat-entree .22s var(--e-entree); }
@keyframes cap-etat-sortie { to { opacity: 0; transform: translateY(-6px); } }
@keyframes cap-etat-entree { from { opacity: 0; transform: translateY(6px); } }

.cap-etapes { display: flex; align-items: center; gap: 0; }
.cap-etape-point {
    width: 9px; height: 9px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--fil);
    flex-shrink: 0;
    transition: background .2s linear, box-shadow .2s linear;
}
.cap-etape-point.est-franchi { background: var(--indigo); box-shadow: none; }
.cap-etape-point.est-courant {
    background: var(--indigo);
    box-shadow: 0 0 0 3px rgba(129, 118, 245, .3);
    animation: cap-respiration 2.2s ease-in-out infinite;
}
@keyframes cap-respiration {
    0%, 100% { box-shadow: 0 0 0 3px rgba(129, 118, 245, .28); }
    50%      { box-shadow: 0 0 0 6px rgba(129, 118, 245, .12); }
}
.cap-etape-filet { width: 26px; height: 1px; background: var(--fil); flex-shrink: 0; }

/* --- La bande-film ------------------------------------------------------ */

.cap-film {
    height: 104px;
    background: var(--nuit-claire);
    border-top: 1px solid rgba(207, 202, 240, .08);
    display: flex; align-items: center;
    overflow: hidden;
    position: relative;
    /* Perforations : deux liseres de carres, et le rail devient une pellicule. */
    background-image:
        repeating-linear-gradient(to right, rgba(207,202,240,.10) 0 4px, transparent 4px 12px),
        repeating-linear-gradient(to right, rgba(207,202,240,.10) 0 4px, transparent 4px 12px);
    background-size: 100% 4px, 100% 4px;
    background-position: 0 6px, 0 calc(100% - 6px);
    background-repeat: no-repeat;
    mask-image: linear-gradient(to right, transparent, #000 80px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 80px);
}
.cap-film-rail {
    display: flex; align-items: center; gap: 8px;
    padding: 0 24px;
    transition: transform .42s var(--e-entree);
    margin-left: auto;
}
.cap-film-rail.est-centre { margin: 0 auto; }

.cap-vue {
    width: 58px; height: 80px;
    border-radius: 3px;
    background: var(--plateau);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.cap-vue.est-attente { box-shadow: inset 0 0 0 1px rgba(207, 202, 240, .12); background: #241f45; }
.cap-vue img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cap-vue.est-ratee { box-shadow: inset 0 0 0 2px #f43f5e; display: grid; place-items: center; }
.cap-vue.est-ratee::after { content: "\00d7"; font-family: var(--mono); font-size: 18px; color: #f43f5e; }

/* Le vol : l'epreuve part du plateau et se range dans le rail. */
.cap-vol {
    position: fixed; z-index: 80;
    border-radius: 4px; overflow: hidden;
    pointer-events: none;
    transition: transform .52s var(--e-sortie), opacity .52s var(--e-sortie);
}
.cap-vol img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* --- Tiroir du journal --------------------------------------------------- */

.cap-journal-tiroir { border-top: 1px solid var(--nuit-claire); }
.cap-journal-tiroir[hidden] { display: none; }
.cap-journal { max-height: 200px; overflow-y: auto; padding: 12px 24px 16px; }

/* --- Mouvement reduit : on retire le deplacement, pas l'information ------ */
@media (prefers-reduced-motion: reduce) {
    .cap-plateau-image.est-revelee { animation: cap-fondu .24s linear forwards; }
    @keyframes cap-fondu { from { opacity: 0; clip-path: inset(0 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
    .cap-plateau-image.est-revelee .cap-lame { animation: none; opacity: 0; }
    .cap-fil-de-fer.est-defilant { animation: none; }
    .cap-etape-point.est-courant { animation: none; box-shadow: 0 0 0 4px rgba(129, 118, 245, .35); }
    .cap-film-rail { transition: none; }
    .cap-vol { display: none; }
}

/* Journal du tiroir : conserve pour le developpeur, replie pour le public. */
.cap-journal { font-family: var(--mono); font-size: 12px; line-height: 1.7; }
.cap-ligne { display: flex; gap: 12px; color: #9d97c9; }
.cap-ligne b { color: #cfcaf0; font-weight: 500; }
.cap-ligne.est-ok b { color: #5eead4; }
.cap-ligne.est-erreur b { color: #fda4af; }
.cap-ligne.est-etape b { padding-left: 24px; color: #9d97c9; }
.cap-ligne-heure { color: #565083; flex-shrink: 0; }

/* Bouton de reference dans la visionneuse : c'est la, en voyant l'image,
   que l'on decide qu'elle fait foi — pas depuis une pastille de 14 px. */
.cap-btn--reference {
    border-color: #3b3563;
    color: #cfcaf0;
    flex-shrink: 0;
}
.cap-btn--reference,
.cap-btn--reference:hover:not(:disabled) {
    /* Ce bouton vit sur fond sombre : le fond clair herite de --fantome
       donnait du blanc sur presque blanc, soit un contraste de 1,03:1. */
    background: transparent;
    color: #fff;
}
.cap-btn--reference { color: #cfcaf0; }
.cap-btn--reference:hover:not(:disabled) {
    border-color: var(--indigo);
    background: rgba(129, 118, 245, .18);
}
.cap-btn--reference.est-posee {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
}
.cap-btn--reference:disabled { opacity: .45; cursor: default; }

/* Bouton « Revu » de la visionneuse : coche pleine quand la comparaison a
   ete examinee contre la reference courante. */
.cap-btn--revu.est-revu {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

/* Le glissement natif de l'image faisait croire que c'etait ainsi qu'on
   actionnait le rideau. Seule la poignee — et le clic sur le cadre —
   deplacent le balai. */
.cap-rideau img, .cap-clignotement img, .cap-calque img, .cap-comparaison img {
    -webkit-user-drag: none;
    user-select: none;
}
.cap-rideau { cursor: ew-resize; }

/* =========================================================================
   Profondeur d'exploration — une carte par niveau, avec un schema imbrique
   qui montre ce que le crawl ira reellement chercher. Les rectangles sont
   proportionnels au nombre de pages atteintes : le niveau 2 se lit
   immediatement comme « beaucoup plus ».
   ========================================================================= */

.cap-profondeurs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cap-profondeur {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px;
    border: 1px solid var(--brume-forte);
    border-radius: var(--rayon);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.cap-profondeur:hover { border-color: var(--indigo); }
.cap-profondeur.est-choisi {
    border-color: var(--indigo);
    background: var(--indigo-voile);
    box-shadow: 0 0 0 1px var(--indigo);
}

.cap-profondeur-tete { display: flex; align-items: baseline; gap: 8px; }
.cap-profondeur-titre { font-size: 14px; font-weight: 700; color: var(--encre); }
.cap-profondeur-compte {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--gris); margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Le schema : rectangles imbriques, un ton d'indigo par niveau. */
.cap-treemap {
    display: block;
    width: 100%; height: 76px;
    border-radius: var(--rayon-sm);
    background: var(--surface-creuse);
    overflow: hidden;
}
.cap-profondeur.est-choisi .cap-treemap { background: var(--surface); }

.cap-tm-depart { fill: var(--indigo); }
.cap-tm-niveau1 { fill: var(--indigo); opacity: .45; }
.cap-tm-niveau2 { fill: var(--indigo); opacity: .2; }
.cap-tm-vide { fill: var(--brume); }
.cap-tm-lien { stroke: var(--brume-forte); stroke-width: 1; fill: none; }

.cap-profondeur-note {
    font-size: 11.5px; line-height: 1.4;
    color: var(--gris);
}
.cap-profondeur.est-choisi .cap-profondeur-note { color: var(--encre-douce); }

/* ---------- Session SSO et quotas ---------- */

.cap-session {
    display: flex; align-items: center; gap: 12px;
    padding-left: 20px;
    border-left: 1px solid var(--brume);
}
.cap-session-identite {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--encre-douce); text-decoration: none;
    font-size: 12.5px; font-weight: 600;
}
.cap-session-lien:hover { color: var(--indigo); }
.cap-pastille-plan {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--indigo-voile); color: var(--indigo-profond);
    font-size: 11px; font-weight: 700;
    letter-spacing: .03em;
}
.cap-session-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-session-quota {
    font-size: 11px; color: var(--gris);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cap-btn--alertes { font-size: 12.5px; font-weight: 600; }

/* ---------- Journal des alertes ---------- */

.cap-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-alerte {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--brume); border-radius: var(--rayon-sm);
    font-size: 12.5px;
}
.cap-alerte-statut {
    flex: none;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cap-alerte-statut--envoyee { background: var(--ok-voile); color: var(--ok); }
.cap-alerte-statut--echec   { background: var(--erreur-voile); color: var(--erreur); }
.cap-alerte-statut--ignoree { background: var(--surface-creuse); color: var(--gris); }
.cap-alerte-texte { flex: 1; color: var(--encre-douce); }
.cap-alerte-date { flex: none; font-family: var(--mono); font-size: 11px; color: var(--gris); }

.cap-canal-ligne { display: flex; gap: 8px; align-items: center; }
.cap-canal-ligne .cap-saisie { flex: 1; }