/* CONSOLE RESEAU — import du fichier "Swifto Site Console" du projet de
   design (adapte a nos couleurs/tokens et au meme gabarit de titres que
   le reste de la page). Le dashboard reseau embarque ($adminBoardHtml,
   voir index.php) n'est volontairement pas retouche. */

/* Meme largeur que le module Modulaire juste au-dessus (au lieu du
   .wrap standard a 1140px). */
#console .wrap {
    max-width: 1400px;
}

/* Remonte la section pour resorber l'ecart avec le cadre final de
   Modulaire juste au-dessus (fond identique, aucune couture visible). */
#console {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 96px;
}

/* #console n'a pas le padding-top standard de .section (voir ci-dessus) :
   le scroll-margin-top generique (24px, pense pour les sections qui
   gardent ce padding) ne suffit pas a degager le bandeau de nav fixe en
   arrivant via un lien, desktop comme mobile. */
#console { scroll-margin-top: 90px; }

/* Meme gabarit de gros titre que les autres sections de la page. */
#console .section-title {
    font: var(--weight-bold) clamp(24px, 7vw, 52px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
#console .section-title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

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

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

/* --- 4 cartes (reutilise .card-grid / .feature-card du systeme) --- */
.console-features {
    margin-top: clamp(40px, 6vw, 64px);
}
/* Les 4 cartes sur une seule ligne (le .card-grid du systeme est a 3
   colonnes par defaut) ; le breakpoint mobile du systeme (860px) reste
   inchange pour l'empilement en colonne unique. */
@media (min-width: 861px) {
    .console-features { grid-template-columns: repeat(4, 1fr); }
}
.console-features .feature-card p + p {
    margin-top: 10px;
}

/* Icone + titre sur la meme ligne, puis un filet avant le texte : casse
   le cote "bloc de texte" d'un simple empilement icone/titre/paragraphe. */
.console-features .feature-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}
.console-features .feature-card h3 {
    margin: 0;
    min-width: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#console .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);
}

/* --- Titre milieu, reutilise pour "Votre reseau, sous les yeux." et
   le titre du bandeau sombre. --- */
.console-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);
}
.console-subtitle .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- En-tete de la vitrine (titre+texte / tags) --- */
.console-showcase-head {
    margin-top: clamp(56px, 8vw, 88px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}
/* Texte cale a droite (comme les autres gros titres en quinconce de la
   page) ; les tags restent a gauche. */
.console-showcase-head__text {
    margin-left: auto;
    max-width: 560px;
    text-align: right;
}
.console-showcase-head__text p {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}
.console-showcase-head__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}
.console-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);
}
.console-tag--accent {
    background: var(--primary-quiet);
    color: var(--primary);
}

/* --- Cadre de la capture d'ecran de la console --- */
.console-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);
}
.console-frame__viewport {
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 1600 / 1110;
    overflow: hidden;
}
.console-frame__canvas {
    width: 1600px;
    height: 1110px;
    transform-origin: top left;
    transform: scale(calc(100cqw / 1600px));
}
.console-frame__canvas a,
.console-frame__canvas button { cursor: pointer; }

/* --- Bandeau final : meme traitement que le cadre "Le vrai plus" de
   Modulaire (degrade tres discret + bordure couleur marque), colonne
   centree titre / description / bouton. --- */
.console-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;
}
.console-cta p {
    margin: 14px 0 0;
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}
.console-cta__actions {
    margin-top: 24px;
}
.console-cta__btn-light {
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}
.console-cta__btn-light:hover { background: var(--primary-hover); }

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