/* =============================================================================
   PAGE PROJET : présentation « dépôt GitHub » : en-tête repo + onglets + markdown
   Chargé uniquement par les pages de détail de projet.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. EN-TÊTE TYPE DÉPÔT
   -------------------------------------------------------------------------- */
.repo {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.repo__path { font-family: var(--font-mono); font-size: 1.35rem; margin-bottom: var(--sp-2); }
.repo__owner { color: var(--blue); }
.repo__path strong { color: var(--blue-bright); }
.repo__h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); margin: 0 0 var(--sp-2); }
.repo__visibility {
    font-size: .7rem; font-weight: 600; vertical-align: middle;
    border: 1px solid var(--border-strong); color: var(--text-muted);
    border-radius: var(--radius-full); padding: .1rem .6rem; margin-left: var(--sp-2);
}
.repo__desc { color: var(--text-secondary); margin-bottom: var(--sp-3); max-width: 70ch; }
.repo__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); font-family: var(--font-mono); font-size: .9rem; }
.repo__meta .dot-lang { display: inline-block; width: .8rem; height: .8rem; border-radius: var(--radius-full); background-color: var(--yellow); margin-right: .35rem; vertical-align: middle; }

/* -----------------------------------------------------------------------------
   2. ONGLETS (pattern ARIA tablist)
   -------------------------------------------------------------------------- */
.tabs__list {
    display: flex; flex-wrap: wrap; gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-5);
}
.tabs__tab {
    font-family: var(--font-mono); font-size: .95rem; font-weight: 600;
    color: var(--text-secondary); background: transparent;
    border: none; border-bottom: 2px solid transparent;
    padding: .65rem 1rem; margin-bottom: -1px; cursor: pointer;
}
.tabs__tab:hover { color: var(--blue-bright); background-color: var(--bg-card); }
.tabs__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--orange); }
.tabs__tab .ico { margin-right: .4rem; color: var(--text-muted); }
.tabs__tab[aria-selected="true"] .ico { color: var(--orange); }

.tabs__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Sans JavaScript : on masque la barre d'onglets (inopérante) et on empile les panneaux,
   chacun séparé par un filet. */
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel + .tabs__panel { border-top: 1px solid var(--border); margin-top: var(--sp-6); padding-top: var(--sp-6); }

/* -----------------------------------------------------------------------------
   3. RENDU « MARKDOWN » (façon README)
   -------------------------------------------------------------------------- */
.markdown { max-width: 80ch; }
.markdown > h2:first-child { margin-top: 0; }
.markdown h2 {
    font-size: 1.5rem; margin: var(--sp-6) 0 var(--sp-3);
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.markdown h3 { font-size: 1.15rem; margin: var(--sp-5) 0 var(--sp-2); color: var(--blue-bright); }
.markdown h4 { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-2); }
.markdown p { margin-bottom: var(--sp-4); }
.markdown ul, .markdown ol { margin: 0 0 var(--sp-4) 1.3rem; }
.markdown li { margin-bottom: var(--sp-2); }
.markdown a { color: var(--blue); }

.markdown code {
    font-family: var(--font-mono); font-size: .9em;
    background-color: var(--bg); color: var(--orange);
    border: 1px solid var(--border); border-radius: 4px; padding: .08rem .35rem;
}
.markdown pre {
    background-color: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: var(--sp-4);
    overflow-x: auto; margin-bottom: var(--sp-4);
}
.markdown pre code { background: none; border: none; padding: 0; color: var(--text-secondary); }

.markdown table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-4); font-size: .92rem; }
.markdown caption { text-align: left; color: var(--text-muted); margin-bottom: var(--sp-2); }
.markdown th, .markdown td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.markdown thead th { background-color: var(--bg-elev); color: var(--blue); }
.markdown tbody th { background-color: var(--bg-card); color: var(--text); }

/* Petites pastilles de verdict réutilisées dans le guide */
.dot-tag { display: inline-block; padding: .1rem .5rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; border: 1px solid; }
.dot-tag.ko  { color: var(--red);    border-color: var(--red);    background: var(--tint-red); }
.dot-tag.ok  { color: var(--green);  border-color: var(--tint-green-border);  background: var(--tint-green); }
.dot-tag.semi{ color: var(--yellow); border-color: var(--tint-amber-border); background: var(--tint-amber); }
.dot-tag.na  { color: var(--text-muted); border-color: var(--border); background: var(--bg); }

.markdown .callout {
    margin: var(--sp-4) 0; padding: var(--sp-4);
    border: 1px solid var(--tint-blue-border); border-left: 3px solid var(--blue);
    background-color: var(--tint-blue); border-radius: var(--radius-md);
}

/* -----------------------------------------------------------------------------
   4. CARROUSEL DE CAPTURES (manuel, accessible)
   -------------------------------------------------------------------------- */
.screens { margin-bottom: var(--sp-6); }
.screens > h2 { font-size: 1.3rem; margin-bottom: var(--sp-2); }
.screens > p { color: var(--text-secondary); margin-bottom: var(--sp-4); }

/* Le carrousel est encadré par une fenêtre « terminal » (.screens__window) */
.screens__window { max-width: 860px; margin-inline: auto; }

.carousel { position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.carousel__viewport { position: relative; }
.carousel__slide { margin: 0; }
.carousel__figure { margin: 0; }
.carousel__figure img {
    display: block;
    width: auto; height: auto;          /* taille naturelle… */
    max-width: 100%; max-height: 70vh;  /* …jamais agrandie au-delà : reste nette */
    margin-inline: auto;                /* centrée si plus étroite que la fenêtre */
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background-color: var(--bg);
}
.carousel__figure figcaption {
    color: var(--text-secondary); font-size: .95rem;
    margin-top: var(--sp-3); text-align: center;
}
.carousel__placeholder {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9;
    border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
    color: var(--text-muted); font-family: var(--font-mono); font-size: 1.1rem;
}

/* Avec JS : les captures se superposent dans une zone à hauteur stable
   (calée sur la plus grande) → changer d'image ne décale plus la page. */
html.js .carousel__viewport { display: grid; align-items: center; }
html.js .carousel__slide { grid-area: 1 / 1; visibility: hidden; }
html.js .carousel__slide.is-active { visibility: visible; }

/* Flèches + pastilles, centrées sous l'image, légèrement espacées */
.carousel__controls {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-5); margin-top: var(--sp-5);
}
.carousel__btn {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 1.6rem; line-height: 1;
    color: var(--blue); background-color: var(--bg-elev);
    border: 1px solid var(--blue); border-radius: var(--radius-full);
    cursor: pointer; box-shadow: var(--shadow-md);
    transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.carousel__btn:hover {
    background-color: var(--blue); color: var(--text-on-accent);
    box-shadow: 0 0 0 4px rgba(0, 95, 184, .25); transform: translateY(-2px);
}
.carousel__btn:active { transform: translateY(0); }

.carousel__dots { display: flex; align-items: center; gap: var(--sp-2); }
.carousel__dot {
    width: 11px; height: 11px; padding: 0; cursor: pointer;
    background-color: transparent; border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.carousel__dot:hover { border-color: var(--blue); background-color: var(--tint-blue); }
.carousel__dot[aria-current="true"] { background-color: var(--blue); border-color: var(--blue); transform: scale(1.4); }

@media (max-width: 520px) {
    .carousel__controls { gap: var(--sp-4); }
    .carousel__btn { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* Sans JavaScript : pas de contrôles, on empile les captures */
html:not(.js) .carousel__slide + .carousel__slide { margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-5); }