/* ADMINISTRATION — "Equipes & acces" : qui voit quoi, qui valide quoi.
   Meme structure que la section Console (intro 2 colonnes, 4 cartes,
   showcase + cadre de capture, bandeau final leger). */

/* Meme espacement resserre que les autres sections (Modulaire, Console)
   au lieu du padding par defaut de .section. */
#admin {
    padding-top: 0;
    margin-top: 96px;
}

/* Meme raison que #console (voir console.css) : pas de padding-top
   standard ici, le scroll-margin-top generique ne suffit pas, desktop
   comme mobile. */
#admin { scroll-margin-top: 90px; }

#admin .section-title {
    font: var(--weight-bold) clamp(30px, 4.4vw, 52px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
#admin .section-title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#admin .wrap {
    max-width: 1400px;
}

/* --- Intro : titre a gauche, argument a droite --- */
.admin-intro {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.admin-lead {
    margin: 18px 0 0;
    max-width: 34ch;
    font: var(--weight-medium) clamp(17px, 1.9vw, 21px)/1.5 var(--font-ui);
    color: var(--ink);
}

.admin-intro__right {
    padding-top: clamp(4px, 1.5vw, 30px);
}
.admin-intro__right p {
    margin: 0;
    text-align: left;
    font: var(--type-lead);
    color: var(--muted);
}

/* --- 4 cartes (reutilise .card-grid / .feature-card du systeme) --- */
.admin-features {
    margin-top: clamp(40px, 6vw, 64px);
}
@media (min-width: 861px) {
    .admin-features { grid-template-columns: repeat(4, 1fr); }
}
.admin-features .feature-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}
.admin-features .feature-card h3 {
    margin: 0;
    min-width: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#admin .feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-quiet);
    color: var(--primary);
}

/* --- En-tete du showcase : tags a gauche, titre+texte a droite --- */
.admin-showcase-head {
    margin-top: clamp(56px, 8vw, 88px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}
.admin-showcase-head__text {
    margin-left: auto;
    max-width: 560px;
    text-align: right;
}
.admin-showcase-head__text p {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}
.admin-showcase-head__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-tag {
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--body);
    font: var(--weight-semibold) 12px/1.3 var(--font-ui);
}
.admin-tag--accent {
    background: var(--primary-quiet);
    color: var(--primary);
}

.admin-subtitle {
    margin: 0;
    font: var(--weight-bold) clamp(22px, 2.8vw, 32px)/1.2 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
.admin-subtitle .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Cadre de la capture d'ecran --- */
.admin-frame {
    margin-top: 22px;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lifted);
}
.admin-frame__viewport {
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 1600 / 1110;
    overflow: hidden;
}
.admin-frame__canvas {
    width: 1600px;
    height: 1110px;
    transform-origin: top left;
    transform: scale(calc(100cqw / 1600px));
}
.admin-frame__canvas a,
.admin-frame__canvas button { cursor: pointer; }

/* --- Bandeau final : meme traitement leger que les cadres de
   Modulaire et de la Console. --- */
.admin-cta {
    margin-top: clamp(48px, 6vw, 84px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(11, 61, 145, .08), rgba(122, 60, 219, .08));
    border: 1px solid rgba(11, 61, 145, .22);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.admin-cta p {
    margin: 14px 0 0;
    max-width: 100ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}
.admin-cta__actions {
    margin-top: 24px;
}
.admin-cta__btn {
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}
.admin-cta__btn:hover { background: var(--primary-hover); }

@media (max-width: 900px) {
    .admin-showcase-head__text { max-width: none; }
}

@media (max-width: 759px) {
    .admin-intro { grid-template-columns: 1fr; }
    .admin-showcase-head__text { margin-left: 0; text-align: left; }
}