/* ============================================================
 *  CERENIX ERP — Page d'accueil publique (vitrine)
 * ============================================================
 *  Fichier : css/vitrine.css
 *  Rôle    : Mise en forme de index.php (accroche, points forts,
 *            fonctionnalités, filières, origine) et surcharge du menu public
 *            (.navbar-public) sur cette seule page, via body.vit-page.
 *  Auteur  : Claude (Cerenix ERP)
 *  Créé le : 2026-09-28 — refonte validée sur maquette (canvas « Accueil
 *            public Cerenix »). Remplace, pour index.php, les classes du
 *            BLOC 6 de style.css (.hero-section, .story-*, .features-*),
 *            laissées en place — style.css n'est pas retouché hors jetons.
 *
 *  Dépend de : style.css (jetons --cx-*, --cx-paper*, --cx-text-display,
 *              --cx-text-section ; .cx-btn ; BLOC 6.1 .navbar-public)
 *  Consommé par : index.php uniquement.
 *
 *  ⚠ `body` est un conteneur flex sur TOUTES les pages (style.css) : un
 *    enfant centré par `margin: auto` cesse de s'étirer et se dimensionne à
 *    son contenu. D'où `width: 100%` sur .vit-main et .vit-wrap
 *    [feedback_min_width_auto_debordement].
 * ============================================================
 *  [BLOC 1] — Page et conteneur
 *  [BLOC 2] — Menu public (surcharge)
 *  [BLOC 3] — Accroche
 *  [BLOC 4] — Points forts
 *  [BLOC 5] — Titres de section et fonctionnalités
 *  [BLOC 6] — Filières
 *  [BLOC 7] — Notre origine
 *  [BLOC 8] — Téléphone
 * ============================================================ */

/* ============================================================
 *  [BLOC 1] — Page et conteneur
 * ============================================================ */
body.vit-page { background: var(--cx-paper); color: var(--cx-gray-900); }

.vit-main { width: 100%; min-width: 0; }

.vit-wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--cx-space-8);
}

.vit-accent { color: var(--cx-green-700); }

/* ============================================================
 *  [BLOC 2] — Menu public (surcharge, index.php seulement)
 * ============================================================ */
.vit-page .navbar-public {
    padding: 0;
    background: color-mix(in srgb, var(--cx-paper) 92%, transparent);
    border-bottom: 1px solid var(--cx-paper-line);
    box-shadow: none;
}
.vit-page .nav-content {
    max-width: 1200px;
    min-height: 72px;
    padding: 0 var(--cx-space-8);
    gap: var(--cx-space-6);
}
.vit-page .nav-content .logo {
    gap: var(--cx-space-2);
    font-size: var(--cx-text-xl);
    letter-spacing: 0.06em;
    color: var(--cx-green-900);
}
.vit-page .logo-icon { color: var(--cx-green-700); }
/* Liens au centre, boutons à droite : la marge auto pousse les boutons. */
.vit-page .nav-links { gap: var(--cx-space-8); margin-left: auto; }
.vit-page .nav-links a:not(.btn) {
    font-weight: 500;
    color: var(--cx-gray-700);
}

/* ============================================================
 *  [BLOC 3] — Accroche
 * ============================================================ */
.vit-hero {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-10);
    padding-top: calc(var(--cx-space-10) * 2.5);
    padding-bottom: calc(var(--cx-space-10) * 2);
}
.vit-hero__titre {
    /* En em (proportionnel à la taille fluide) : 2 lignes au bureau comme sur
       la maquette. 16ch coupait en 3 (constaté en ligne le 2026-09-28). */
    max-width: 13.7em;
    margin: 0;
    font-size: var(--cx-text-display);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--cx-gray-900);
}
.vit-hero__bas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cx-space-10);
    padding-top: var(--cx-space-8);
    border-top: 1px solid var(--cx-paper-line);
}
.vit-hero__texte {
    max-width: 40rem;
    margin: 0;
    font-size: var(--cx-text-xl);
    line-height: 1.55;
    color: var(--cx-gray-600);
}
.vit-hero__cta {
    flex-shrink: 0;
    min-height: 54px;
    border-radius: var(--cx-radius-lg);
    font-weight: 700;
}
.vit-hero__fleche {
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
 *  [BLOC 4] — Points forts
 * ============================================================
 *  Trois colonnes séparées par des filets ; minmax(0, 1fr), jamais 1fr nu.
 */
.vit-atouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vit-atout {
    display: flex;
    align-items: flex-start;
    gap: var(--cx-space-3);
    padding: var(--cx-space-6);
    border-top: 1px solid var(--cx-paper-line);
    border-bottom: 1px solid var(--cx-paper-line);
}
.vit-atout:first-child { padding-left: 0; }
.vit-atout:last-child  { padding-right: 0; }
.vit-atout + .vit-atout { border-left: 1px solid var(--cx-paper-line); }
.vit-atout__ico {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--cx-green-700);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vit-atout__corps { display: flex; flex-direction: column; gap: var(--cx-space-1); min-width: 0; }
.vit-atout__titre { margin: 0; font-size: var(--cx-text-lg); font-weight: 700; color: var(--cx-gray-900); }
.vit-atout__texte { margin: 0; font-size: var(--cx-text-md); line-height: 1.5; color: var(--cx-gray-600); }

/* ============================================================
 *  [BLOC 5] — Titres de section et fonctionnalités
 * ============================================================ */
.vit-section {
    padding-top: calc(var(--cx-space-10) * 2.5);
    padding-bottom: calc(var(--cx-space-10) * 2.5);
}
.vit-section__tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cx-space-10);
    margin-bottom: var(--cx-space-10);
}
.vit-titre {
    margin: 0;
    font-size: var(--cx-text-section);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cx-gray-900);
}
.vit-titre--clair { color: var(--cx-white); }
.vit-intro {
    max-width: 26rem;
    margin: 0;
    font-size: var(--cx-text-lg);
    line-height: 1.55;
    color: var(--cx-gray-600);
}

.vit-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cx-space-5);
}
.vit-carte {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
    padding: var(--cx-space-8);
    background: var(--cx-white);
    border: 1px solid var(--cx-paper-line);
    border-radius: var(--cx-radius-xl);
}
.vit-carte__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--cx-radius-xl);
    background: var(--cx-green-50);
    color: var(--cx-green-700);
}
.vit-carte__ico--alerte { background: var(--cx-amber-50); color: var(--cx-amber-700); }
.vit-carte__ico svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vit-carte__titre { margin: 0; font-size: var(--cx-text-xl); font-weight: 700; color: var(--cx-gray-900); }
.vit-carte__texte { margin: 0; font-size: var(--cx-text-md); line-height: 1.6; color: var(--cx-gray-600); }

/* ============================================================
 *  [BLOC 6] — Filières
 * ============================================================ */
.vit-filieres {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: var(--cx-space-10);
    align-items: center;
    padding: calc(var(--cx-space-10) * 1.4) calc(var(--cx-space-10) * 1.6);
    border-radius: var(--cx-radius-xl);
    background: var(--cx-green-900);
    color: var(--cx-white);
}
.vit-filieres__tete { display: flex; flex-direction: column; gap: var(--cx-space-3); }
.vit-filieres__intro { margin: 0; font-size: var(--cx-text-lg); line-height: 1.55; color: var(--cx-green-100); }
.vit-filieres__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.vit-filiere {
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
    min-height: 60px;
    padding: 0 var(--cx-space-4);
    border-radius: var(--cx-radius-xl);
    background: color-mix(in srgb, var(--cx-white) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cx-white) 16%, transparent);
    font-size: var(--cx-text-lg);
    font-weight: 600;
}
.vit-filiere svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--cx-green-100);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
 *  [BLOC 7] — Notre origine
 * ============================================================ */
.vit-histoire {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: calc(var(--cx-space-10) * 1.8);
    align-items: center;
}
.vit-histoire__mot {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--cx-space-6);
    padding: var(--cx-space-10);
    border-radius: var(--cx-radius-xl);
    background: var(--cx-paper-200);
}
.vit-histoire__etiquette {
    font-family: var(--cx-font-mono);
    font-size: var(--cx-text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-amber-700);
}
.vit-histoire__nom {
    font-size: calc(var(--cx-text-display) * 1.25);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--cx-gray-900);
}
.vit-histoire__ix { font-family: var(--cx-font-mono); font-weight: 500; color: var(--cx-green-700); }
.vit-histoire__texte { display: flex; flex-direction: column; gap: var(--cx-space-5); }
.vit-histoire__texte p {
    margin: 0;
    font-size: var(--cx-text-lg);
    line-height: 1.65;
    color: var(--cx-gray-700);
}

/* ============================================================
 *  [BLOC 8] — Téléphone et tablette
 * ============================================================ */
@media (max-width: 1023.98px) {
    .vit-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vit-filieres { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .vit-wrap { padding-inline: var(--cx-space-4); }

    /* Menu : logo + boutons sur la 1re ligne, liens en pastilles dessous,
       défilables. Surcharge la règle de style.css (liens centrés, repliés). */
    .vit-page .nav-content {
        flex-wrap: wrap;
        gap: var(--cx-space-2) var(--cx-space-3);
        padding: var(--cx-space-2) var(--cx-space-4);
        min-height: 0;
    }
    .vit-page .nav-actions { margin-left: auto; }
    .vit-page .navbar-public .nav-links {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: var(--cx-space-2);
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .vit-page .nav-links a:not(.btn) {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 var(--cx-space-3);
        border: 1px solid var(--cx-paper-line);
        border-radius: var(--cx-radius-full);
        background: var(--cx-white);
        font-size: var(--cx-text-md);
    }

    .vit-hero { padding-top: var(--cx-space-10); padding-bottom: var(--cx-space-10); gap: var(--cx-space-6); }
    .vit-hero__bas { flex-direction: column; align-items: stretch; gap: var(--cx-space-6); padding-top: var(--cx-space-5); }
    .vit-hero__texte { font-size: var(--cx-text-lg); }
    .vit-hero__cta { justify-content: center; }

    .vit-atouts { grid-template-columns: minmax(0, 1fr); }
    .vit-atout,
    .vit-atout:first-child,
    .vit-atout:last-child { padding: var(--cx-space-4) 0; border-bottom: 0; }
    .vit-atout + .vit-atout { border-left: 0; }
    .vit-atouts { border-bottom: 1px solid var(--cx-paper-line); }

    .vit-section { padding-top: calc(var(--cx-space-10) * 1.4); padding-bottom: calc(var(--cx-space-10) * 1.4); }
    .vit-section__tete { flex-direction: column; align-items: flex-start; gap: var(--cx-space-3); margin-bottom: var(--cx-space-6); }
    .vit-grille { grid-template-columns: minmax(0, 1fr); gap: var(--cx-space-3); }
    .vit-carte { padding: var(--cx-space-5); }

    .vit-filieres { padding: var(--cx-space-8) var(--cx-space-5); gap: var(--cx-space-5); }
    .vit-filieres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cx-space-2); }
    .vit-filiere { min-height: 52px; padding: 0 var(--cx-space-3); font-size: var(--cx-text-md); }

    .vit-histoire { grid-template-columns: minmax(0, 1fr); gap: var(--cx-space-6); }
    .vit-histoire__mot { padding: var(--cx-space-6); }
}