/* =========================================================
   site.css — Epsylon Services
   Objectif : styles globaux + pages (Home / Contact / CGV / Portfolio) + effets “ambient”
   ========================================================= */

/* =========================================================
   1) BOOTSTRAP DEFAULTS / BASE
   - Petits overrides sur Bootstrap et base HTML
   ========================================================= */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Focus : garder un focus visible (accessibilité) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Base layout : nécessaire pour footer sticky (via margin-bottom body) */
html {
    position: relative;
    min-height: 100%;
}

/* ✅ On garde la marge pour le footer (footer fixe / hauteur approx) */
body {
    margin-bottom: 60px;
}

/* Comportement placeholders Bootstrap (form-floating) */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* =========================================================
   2) EPSYLON VARIABLES (Design System)
   - Palette / couleurs réutilisées partout
   - À modifier ici si on changes la DA
   ========================================================= */

:root {
    --text-dark: #EAF0FF;
    --muted-dark: #A9B4D0;
    --neon: #2AA8FF;
    --neon2: #6BE6FF;
    --black: #070A12;
    --black2: #0B1020;
    /* boutons (dégradé bleu) */
    --blueBtn: #0b1d46;
    --blueBtn2: #0a1736;
}


/* =========================================================
   3) GLOBAL BACKGROUND
   - Fond global sombre + halos ambiants
   - Important : s’applique aussi aux marges autour du contenu
   ========================================================= */

body {
    background: radial-gradient(1100px 650px at 18% 12%, rgba(42,168,255,.10), transparent 60%), radial-gradient(1100px 650px at 82% 18%, rgba(107,230,255,.08), transparent 60%), linear-gradient(180deg, #0b0f1c 0%, #070a12 100%);
    color: #0f172a; /* (peu utilisé car le texte principal est souvent re-coloré sur les cards) */
}


/* =========================================================
   4) NAVBAR + FOOTER
   - Styles cohérents (fond sombre, bord néon, hover doux)
   ========================================================= */

/* Navbar (version “standard”) */
.epsy-nav {
    background: rgba(7,10,18,.96);
    border-bottom: 1px solid rgba(42,168,255,.18);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
}

/* Brand (texte) */
.epsy-brand {
    font-weight: 700;
    letter-spacing: .2px;
}

.epsy-brand-accent {
    color: var(--neon);
}

/* Liens navbar */
.navbar .nav-link {
    color: rgba(234,240,255,.86) !important;
    border-radius: 12px;
    padding: 8px 10px !important;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

    .navbar .nav-link:hover {
        color: #ffffff !important;
        background: rgba(42,168,255,.10);
        box-shadow: 0 0 0 1px rgba(42,168,255,.18);
    }

/* Footer */
.epsy-footer {
    background: rgba(7,10,18,.96);
    border-top: 1px solid rgba(42,168,255,.16);
    box-shadow: 0 -10px 26px rgba(0,0,0,.22);
}

.epsy-footer-inner {
    padding: 14px 0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.epsy-footer-left {
    color: rgba(234,240,255,.72);
    font-size: .95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.epsy-footer-brand {
    color: rgba(234,240,255,.92);
    font-weight: 650;
}

.epsy-footer-siren {
    color: rgba(234,240,255,.85);
}

.epsy-footer-right {
    display: flex;
    gap: 14px;
}

/* Liens du footer (style “pill”) */
.epsy-footer-link {
    color: rgba(234,240,255,.78);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(42,168,255,.16);
    background: rgba(11,16,32,.45);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

    .epsy-footer-link:hover {
        transform: translateY(-1px);
        color: #fff;
        border-color: rgba(42,168,255,.45);
        box-shadow: 0 0 0 1px rgba(42,168,255,.20), 0 0 20px rgba(42,168,255,.18);
    }

/* Petit badge “en ligne / statut / etc.” */
.epsy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(234,240,255,.78);
    border: 1px solid rgba(42,168,255,.22);
    background: rgba(11,16,32,.55);
    padding: 6px 10px;
    border-radius: 999px;
}

.epsy-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--neon);
    box-shadow: 0 0 12px rgba(42,168,255,.45);
}

/* Séparateur visuel dans le footer */
.footer-separator {
    margin: 0 8px;
    color: rgba(255,255,255,0.4);
}


/* =========================================================
   5) HOME
   - Card centrale, titres, CTA, image, responsive
   ========================================================= */

.home-wrapper {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.home-card {
    background: rgba(7,10,18,.96);
    border-radius: 24px;
    padding: 52px 34px;
    max-width: 1400px;
    width: 100%;
    border: 1px solid rgba(42,168,255,.22);
    box-shadow: 0 26px 80px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.home-inner {
    position: relative;
    z-index: 1;
}

/* Titre + scan néon (effet “barre” qui traverse) */
.home-title {
    font-size: 3.25rem;
    font-weight: 780;
    margin: 0 0 10px;
    color: var(--text-dark);
    letter-spacing: .2px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .home-title::after {
        content: "";
        position: absolute;
        top: -10%;
        left: -35%;
        width: 40%;
        height: 140%;
        background: linear-gradient( 90deg, rgba(42,168,255,0), rgba(42,168,255,.65), rgba(107,230,255,.35), rgba(42,168,255,0) );
        transform: skewX(-20deg);
        filter: blur(0.2px);
        opacity: .85;
        animation: epsyScan 3.8s ease-in-out infinite;
        pointer-events: none;
        mix-blend-mode: screen;
    }

@keyframes epsyScan {
    0% {
        left: -45%;
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    55% {
        opacity: .9;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

.home-subtitle {
    color: rgba(234,240,255,.82);
    font-size: 1.32rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 16px;
}

.home-trust {
    color: rgba(169,180,208,.95);
    font-size: 1.22rem;
    line-height: 1.85;
    max-width: 980px;
    margin: 0 auto 18px;
}

/* Zone des 2 gros CTA */
.home-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Boutons CTA (style principal bleu) */
.home-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 260px;
    padding: 20px 26px;
    border-radius: 18px;
    color: #eaf0ff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .3px;
    background: linear-gradient(180deg, rgba(11,29,70,.98), rgba(10,23,54,.98));
    border: 1px solid rgba(42,168,255,.35);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
    overflow: hidden;
}

    /* Halo animé derrière le CTA (donne du vivant, sans “flashy”) */
    .home-btn::before {
        content: "";
        position: absolute;
        inset: -42px;
        border-radius: 999px;
        background: radial-gradient( circle, rgba(42,168,255,.75) 0%, rgba(42,168,255,.34) 26%, rgba(107,230,255,.18) 42%, rgba(42,168,255,0) 68% );
        filter: blur(13px);
        opacity: .95;
        animation: epsyHaloRotate 4s linear infinite, epsyHaloPulse 2s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes epsyHaloRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes epsyHaloPulse {
    0%,100% {
        opacity: .70;
    }

    50% {
        opacity: 1;
    }
}

.home-btn:hover {
    transform: translateY(-2px) scale(1.045);
    border-color: rgba(42,168,255,.92);
    filter: brightness(1.12);
    box-shadow: 0 0 0 2px rgba(42,168,255,.26), 0 0 40px rgba(42,168,255,.36), 0 0 90px rgba(107,230,255,.16);
}

    /* Petit “shine” au hover (passage lumière rapide) */
    .home-btn:hover::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: linear-gradient( 120deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.16) 35%, rgba(255,255,255,0) 60% );
        transform: translateX(-40%);
        animation: epsyShine .55s ease-out forwards;
        pointer-events: none;
    }

@keyframes epsyShine {
    to {
        transform: translateX(55%);
    }
}

/* Variante GOLD (CTA secondaire / mise en avant) */
.home-btn-gold {
    background: linear-gradient(180deg, rgba(90,70,20,.98), rgba(65,50,15,.98));
    border-color: rgba(255,200,90,.55);
    color: #fff8e6;
}

    .home-btn-gold::before {
        background: radial-gradient( circle, rgba(255,210,110,.75) 0%, rgba(255,200,90,.38) 26%, rgba(255,180,70,.18) 42%, rgba(255,180,70,0) 68% );
        filter: blur(14px);
        opacity: .95;
        animation: epsyHaloRotate 6.5s linear infinite, epsyHaloPulseGold 2.8s ease-in-out infinite;
    }

@keyframes epsyHaloPulseGold {
    0%,100% {
        opacity: .75;
    }

    50% {
        opacity: 1;
    }
}

.home-btn-gold:hover {
    transform: translateY(-3px) scale(1.07);
    filter: brightness(1.18);
    box-shadow: 0 0 0 3px rgba(255,200,90,.35), 0 0 70px rgba(255,200,90,.45), 0 0 140px rgba(255,180,70,.25);
}

/* SVG mail (dans le CTA gold) */
.mail-svg {
    width: 34px;
    height: 34px;
    margin-left: 14px;
    stroke: var(--neon);
    stroke-width: 2.8px;
    fill: rgba(42,168,255,.10);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(42,168,255,.55));
    opacity: .95;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.home-btn-gold:hover .mail-svg {
    transform: translateX(6px);
    filter: drop-shadow(0 0 10px rgba(42,168,255,.80)) drop-shadow(0 0 18px rgba(42,168,255,.55));
    opacity: 1;
}

/* Image / visuel principal */
.home-visual {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    width: 100%;
}

    .home-visual img {
        width: min(100%, 1100px);
        height: auto;
        border-radius: 22px;
        border: 1px solid rgba(42,168,255,.30);
        box-shadow: 0 0 0 1px rgba(42,168,255,.18), 0 0 60px rgba(42,168,255,.22);
    }

/* CTA intro */
.home-cta-intro {
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(225,235,255,.92);
    text-shadow: none;
}

/* Responsive HOME */
@media (max-width: 768px) {
    .home-card {
        padding: 34px 22px;
    }

    .home-title {
        font-size: 2.0rem;
    }

    .home-btn {
        min-width: 0;
        width: 100%;
    }

    .home-visual img {
        width: min(100%, 720px);
    }
}

/* Container bootstrap plus large (mise en page “wide”) */
@media (min-width: 992px) {
    .container {
        max-width: 1680px;
    }
}


/* =========================================================
   6) CONTACT FORM (styles “base”)
   - Form centré, champs sombres, focus néon
   ========================================================= */

.contact-form {
    margin-top: 32px;
    display: grid;
    gap: 22px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.contact-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .contact-group label {
        color: rgba(234,240,255,.85);
        font-weight: 600;
        font-size: .95rem;
    }

    .contact-group input,
    .contact-group textarea {
        background: rgba(11,16,32,.95);
        border: 1px solid rgba(42,168,255,.28);
        border-radius: 14px;
        padding: 14px 16px;
        color: #eaf0ff;
        font-size: 1rem;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

        .contact-group input::placeholder,
        .contact-group textarea::placeholder {
            color: rgba(169,180,208,.55);
        }

        .contact-group input:focus,
        .contact-group textarea:focus {
            outline: none;
            border-color: rgba(42,168,255,.75);
            box-shadow: 0 0 0 2px rgba(42,168,255,.22), 0 0 28px rgba(42,168,255,.25);
        }

.contact-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Message succès (TempData) */
.contact-success {
    margin: 18px auto 0;
    max-width: 720px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(42,168,255,.30);
    background: rgba(11,16,32,.65);
    color: rgba(234,240,255,.92);
    box-shadow: 0 0 18px rgba(42,168,255,.18);
}

/* Erreurs champs (ModelState) */
.field-error {
    color: rgba(255, 180, 180, .95);
    font-size: .95rem;
    margin-top: 6px;
}

/* Mention tarifs contact */
.contact-tarif-mention {
    margin-top: 14px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(234,240,255,.70);
}

    .contact-tarif-mention strong {
        color: rgba(255,200,90,.95);
    }

    .contact-tarif-mention a {
        color: rgba(42,168,255,.90);
        text-decoration: none;
        margin-left: 4px;
    }

        .contact-tarif-mention a:hover {
            text-decoration: underline;
        }


/* =========================================================
   7) CGV
   - Texte lisible, titres accentués, liens visibles
   ========================================================= */

.cgv-content {
    max-width: 980px;
    margin: 24px auto 0 auto;
    text-align: left;
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
    font-size: 1.02rem;
}

    .cgv-content p {
        margin: 10px 0 14px 0;
        color: rgba(255,255,255,0.86);
    }

    .cgv-content h2 {
        margin-top: 26px;
        margin-bottom: 10px;
        font-size: 1.35rem;
        color: rgba(255,255,255,0.95);
        text-shadow: 0 0 10px rgba(0,170,255,0.35);
        border-left: 3px solid rgba(0,170,255,0.7);
        padding-left: 12px;
    }

    .cgv-content h3 {
        margin-top: 18px;
        margin-bottom: 8px;
        font-size: 1.15rem;
        color: rgba(255,255,255,0.92);
        text-shadow: 0 0 8px rgba(0,170,255,0.25);
    }

    .cgv-content ul {
        margin: 8px 0 14px 18px;
        padding: 0;
    }

    .cgv-content li {
        margin: 6px 0;
        color: rgba(255,255,255,0.86);
    }

    .cgv-content strong {
        color: rgba(255,255,255,0.98);
    }

    .cgv-content a {
        color: rgba(0,170,255,0.95);
        text-decoration: none;
    }

        .cgv-content a:hover {
            text-decoration: underline;
        }


/* =========================================================
   8) PORTFOLIO NOTE 
   ========================================================= */

.portfolio-note {
    margin: 16px auto 22px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(11,16,32,.55);
    border: 1px solid rgba(42,168,255,.16);
    color: rgba(234,240,255,.78);
    max-width: 980px;
}


/* =========================================================
   9) TARIFS – NOTE IMPORTANTE (minimum 10€)
   ========================================================= */

.tarif-note-important {
    margin: 18px auto 26px;
    padding: 14px 16px;
    max-width: 820px;
    text-align: center;
    background: rgba(11,16,32,.70);
    border: 1px solid rgba(255,200,90,.45);
    border-radius: 14px;
    color: rgba(234,240,255,.90);
    font-size: .95rem;
    line-height: 1.6;
    box-shadow: 0 0 0 1px rgba(255,200,90,.18), 0 0 28px rgba(255,200,90,.22);
}


/* =========================================================
   10) AMBIENT (typing lettre par lettre)
   - Effet “background vivant” derrière le contenu
   - Important : z-index + mobile off
   ========================================================= */

.epsy-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Contenu au-dessus du fond ambient */
header,
main,
footer,
.home-card {
    position: relative;
    z-index: 2;
}

/* “ligne” positionnée via variables CSS --x / --y */
.ambient-line {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: .55; /* discret (évite l’effet guirlande) */
    filter: saturate(1.05);
}

/* texte tapé + curseur */
.ambient-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    /* largeur animée (typing) */
    width: 0;
    /* style néon multicolore mais maîtrisé */
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: .15px;
    background: linear-gradient( 90deg, rgba(42,168,255,1), rgba(107,230,255,1), rgba(205,120,255,.85), rgba(255,200,90,.80), rgba(42,168,255,1) );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* glow doux */
    text-shadow: 0 0 8px rgba(42,168,255,.18), 0 0 14px rgba(107,230,255,.12);
    /* curseur */
    border-right: 2px solid rgba(234,240,255,.55);
    padding-right: 10px;
    /* 2 anims : typing + clignotement curseur */
    animation: epsyType var(--t) steps(var(--c), end) infinite, epsyCaret 0.9s steps(1,end) infinite;
    animation-delay: var(--d), var(--d);
}

/* typing : tape -> pause -> efface -> pause */
@keyframes epsyType {
    0% {
        width: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    45% {
        width: calc(var(--c) * 1ch);
        opacity: 1;
    }
    /* tape */
    62% {
        width: calc(var(--c) * 1ch);
        opacity: 1;
    }
    /* pause pleine */
    92% {
        width: 0;
        opacity: .65;
    }
    /* efface */
    100% {
        width: 0;
        opacity: 0;
    }
    /* reset */
}

@keyframes epsyCaret {
    0%,49% {
        border-right-color: rgba(234,240,255,.55);
    }

    50%,100% {
        border-right-color: rgba(234,240,255,0);
    }
}

/* Scan léger global (bande lumineuse qui traverse) */
.epsy-ambient::after {
    content: "";
    position: absolute;
    top: -25%;
    left: -50%;
    width: 40%;
    height: 170%;
    background: linear-gradient( 90deg, rgba(42,168,255,0), rgba(42,168,255,.12), rgba(205,120,255,.09), rgba(255,200,90,.07), rgba(42,168,255,0) );
    transform: skewX(-18deg);
    opacity: .40;
    mix-blend-mode: screen;
    animation: epsyScanBg 6.5s linear infinite; /* plus lent = plus pro */
    pointer-events: none;
}

@keyframes epsyScanBg {
    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }
}

/* Mobile : on coupe l’ambient (perf + lisibilité) */
@media (max-width: 992px) {
    .epsy-ambient {
        display: none;
    }
}


/* =========================================================
   11) FIX LISIBILITÉ TEXTE (home-card / pages)
   - Ajuste taille / couleurs texte sur fond sombre
   ========================================================= */

.home-card,
.home-card p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgba(220,228,245,.88); /* plus doux que blanc */
    text-shadow: none;
}

    .home-card li,
    .home-subtitle {
        font-size: 1.15rem;
        line-height: 1.85;
        color: rgba(215,225,245,.90);
        text-shadow: none;
    }

.home-trust {
    font-size: 1.15rem;
    line-height: 1.95;
    color: rgba(200,215,235,.88);
    text-shadow: none;
}

/* Titres dans la card (forcer au-dessus des overrides éventuels) */
.home-card h1,
.home-card h2,
.home-card h3 {
    color: rgba(234,240,255,.96) !important;
}

/* Ambient : si besoin de calmer encore visuellement */
.epsy-ambient {
    opacity: .55;
}

/* Sécurité : l’ambient doit rester derrière */
header,
main,
footer,
.home-card,
.home-inner {
    position: relative;
    z-index: 2;
}

/* Responsive texte */
@media (max-width: 768px) {
    .home-subtitle {
        font-size: 1.25rem;
    }

    .home-trust,
    .home-card p {
        font-size: 1.15rem;
    }

    .home-cta-intro {
        font-size: 1.1rem;
    }
}

/* Card un poil plus opaque (lisibilité) */
.home-card {
    background: rgba(7,10,18,.97);
}


/* =========================================================
   12) PORTFOLIO – UI PRO (cards + layout + CTA)
   - Design fidèle à la DA : noir, néon, sections propres
   ========================================================= */

.portfolio-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.portfolio-section {
    background: rgba(7,10,18,.92);
    border: 1px solid rgba(42,168,255,.20);
    border-radius: 18px;
    padding: 22px 22px;
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
}

    .portfolio-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 420px at 18% 14%, rgba(42,168,255,.10), transparent 55%), radial-gradient(800px 380px at 86% 26%, rgba(107,230,255,.06), transparent 60%);
        pointer-events: none;
    }

.portfolio-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.portfolio-title {
    margin: 0;
    font-size: 2.05rem;
    font-weight: 780;
    color: rgba(234,240,255,.96);
    text-shadow: 0 0 14px rgba(42,168,255,.18);
}

.portfolio-badge {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .85rem;
    border: 1px solid rgba(42,168,255,.28);
    background: rgba(11,16,32,.55);
    color: rgba(234,240,255,.86);
    box-shadow: 0 0 0 1px rgba(42,168,255,.08);
}

.portfolio-desc {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: rgba(234,240,255,.72);
    line-height: 1.7;
}

.portfolio-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 16px;
    align-items: start;
}

.portfolio-box {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(42,168,255,.22);
    background: rgba(11,16,32,.65);
    box-shadow: 0 0 0 1px rgba(42,168,255,.10), 0 0 26px rgba(42,168,255,.08);
}

.portfolio-box-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: rgba(234,240,255,.92);
    text-align: center;
}

.portfolio-box p {
    margin: 0 0 10px;
    color: rgba(220,228,245,.88);
    line-height: 1.75;
    text-shadow: none;
}

.portfolio-h3 {
    margin-top: 14px;
    font-size: 1.05rem;
    color: rgba(234,240,255,.92);
}

.portfolio-points {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(7,10,18,.55);
}

.portfolio-points-title {
    margin: 0 0 10px;
    font-weight: 700;
    color: rgba(234,240,255,.88);
}

.portfolio-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

    .portfolio-list li {
        position: relative;
        padding-left: 18px;
        color: rgba(234,240,255,.82);
        line-height: 1.5;
    }

        .portfolio-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(42,168,255,.95);
            box-shadow: 0 0 12px rgba(42,168,255,.45);
        }

.portfolio-timecodes {
    margin: 0;
    padding-left: 18px;
    color: rgba(234,240,255,.82);
}

.portfolio-sep {
    border: 0;
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 18px 0;
}

/* Bloc CTA final */
.portfolio-cta {
    background: rgba(7,10,18,.92);
    border: 1px solid rgba(42,168,255,.20);
    border-radius: 18px;
    padding: 24px 22px;
    text-align: center;
    box-shadow: 0 22px 70px rgba(0,0,0,.25);
}

    .portfolio-cta h2 {
        margin: 0 0 8px;
        color: rgba(234,240,255,.96);
        text-shadow: 0 0 14px rgba(42,168,255,.18);
    }

    .portfolio-cta p {
        margin: 0;
        color: rgba(234,240,255,.74);
        line-height: 1.65;
    }

@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-title {
        font-size: 1.75rem;
    }
}


/* =========================================================
   13) CONTACT – CARD AUTOUR DU FORMULAIRE
   - Encapsule le formulaire dans une card dédiée
   ========================================================= */

.contact-card {
    max-width: 820px;
    margin: 22px auto 0;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(7,10,18,.92);
    border: 1px solid rgba(42,168,255,.22);
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
}

    .contact-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 420px at 18% 14%, rgba(42,168,255,.10), transparent 55%), radial-gradient(800px 380px at 86% 26%, rgba(107,230,255,.06), transparent 60%);
        pointer-events: none;
    }

    /* Tout ce qui est dans la card doit passer au-dessus du ::before */
    .contact-card > * {
        position: relative;
        z-index: 1;
    }

/* Pour éviter que la grille du form colle au bord */
.contact-form {
    margin-top: 0;
}


/* =========================================================
   14) CONTACT – VERSION “CENTRÉE” + NDA + CGV
   - set de règles plus “finalisées”
   - Important : c’est volontairement redondant avec la section 6,
     car on as renforcé/ajusté les styles ensuite.
   ========================================================= */

/* Tout centrer sur la page contact (conteneurs/blocs) */
.contact-tarif-mention,
.nda-note,
.contact-success,
.contact-card,
.contact-cgv-mention {
    text-align: center;
}

/* Mention tarif (version ajustée) */
.contact-tarif-mention {
    margin-top: 10px;
    font-size: 0.95rem;
    color: rgba(234,240,255,.72);
}

    .contact-tarif-mention strong {
        color: rgba(255,200,90,.95);
    }

    .contact-tarif-mention a {
        color: rgba(42,168,255,.92);
        text-decoration: none;
        margin-left: 6px;
    }

        .contact-tarif-mention a:hover {
            text-decoration: underline;
        }

/* Bloc NDA (propre + pas agressif) */
.nda-note {
    margin: 18px auto 0;
    padding: 16px 18px;
    max-width: 920px;
    border-radius: 18px;
    background: rgba(11,16,32,.70);
    border: 1px solid rgba(42,168,255,.22);
    color: rgba(220,228,245,.88);
    box-shadow: 0 0 0 1px rgba(42,168,255,.08), 0 0 22px rgba(42,168,255,.10);
}

    .nda-note p {
        margin: 0;
        line-height: 1.65;
    }

    .nda-note strong {
        color: rgba(234,240,255,.94);
    }

/* ✅ Card autour du formulaire (reprise) */
.contact-card {
    max-width: 820px;
    margin: 22px auto 0;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(7,10,18,.92);
    border: 1px solid rgba(42,168,255,.22);
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
}

    .contact-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 420px at 18% 14%, rgba(42,168,255,.10), transparent 55%), radial-gradient(800px 380px at 86% 26%, rgba(107,230,255,.06), transparent 60%);
        pointer-events: none;
    }

    .contact-card > * {
        position: relative;
        z-index: 1;
    }

/* Formulaire : largeur propre + champs centrés */
.contact-form {
    margin-top: 0;
    display: grid;
    gap: 18px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Labels centrés (mais saisie confortable) */
.contact-group label {
    text-align: center;
    color: rgba(234,240,255,.85);
    font-weight: 650;
}

/* Champs : on garde texte aligné à gauche pour taper facilement */
.contact-group input,
.contact-group textarea {
    width: 100%;
    text-align: left;
    background: rgba(11,16,32,.95);
    border: 1px solid rgba(42,168,255,.28);
    border-radius: 14px;
    padding: 14px 16px;
    color: rgba(234,240,255,.92);
}

    .contact-group input::placeholder,
    .contact-group textarea::placeholder {
        color: rgba(169,180,208,.55);
    }

/* Mention CGV sur la page contact */
.contact-cgv-mention {
    margin: 6px 0 0;
    font-size: .92rem;
    color: rgba(234,240,255,.70);
}

    .contact-cgv-mention a {
        color: rgba(42,168,255,.95);
        text-decoration: none;
    }

        .contact-cgv-mention a:hover {
            text-decoration: underline;
        }

/* Zone bouton */
.contact-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Erreurs centrées */
.field-error {
    display: block;
    text-align: center;
    color: rgba(255, 180, 180, .95);
    margin-top: 6px;
}

/* Signature mentions légales */
/* Mention identité ultra discrète – Mentions légales */
.legal-identity-note {
    margin-top: 2.5rem;
    font-size: 0.22em; /* ✅ beaucoup plus petit */
    opacity: 0.05; /* déjà validé : très discret */
    text-align: center;
    color: inherit;
    text-shadow: none; /* quasi imperceptible */
    line-height: 1.05;
}




/* =========================================================
   15) NAVBAR – BRAND “OPTION 2”
   - Version “logo gros” sans agrandir la navbar
   - Important : cette section redéfinit .epsy-nav / .epsy-brand
     (utile dans _Layout.cshtml)
   ========================================================= */

/* Navbar : on autorise le débordement pour laisser le logo dépasser */
.epsy-nav {
    background: rgba(7,10,18,.96);
    border-bottom: 1px solid rgba(42,168,255,.18);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    overflow: visible; /* ✅ permet au logo de dépasser sans agrandir */
}

/* Trait néon sous navbar (utilisé dans le layout)
   ✅ France (Bleu / Blanc / Rouge) — blanc un peu plus visible */
.epsy-nav-underline {
    height: 2px;
    width: 100%;
    background: linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgba(35, 90, 255, 0.75) 35%, /* bleu (inchangé) */
    rgba(255, 255, 255, 0.88) 50%, /* blanc + visible */
    rgba(235, 60, 60, 0.75) 65%, /* rouge (inchangé) */
    rgba(0,0,0,0) 100% );
    box-shadow: 0 0 10px rgba(35, 90, 255, 0.16), /* bleu (inchangé) */
    0 0 10px rgba(235, 60, 60, 0.14), /* rouge (inchangé) */
    0 0 8px rgba(255, 255, 255, 0.18); /* blanc discret */
}


/* Brand layout (logo + texte + mini anim) */
.epsy-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
}

/* Logo : GROS, mais sans toucher la navbar (via marges négatives) */
.epsy-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    /* ✅ dépasse visuellement sans modifier la hauteur du nav */
    margin-top: -22px;
    margin-bottom: -22px;
    filter: drop-shadow(0 0 14px rgba(0, 170, 255, 0.45)) drop-shadow(0 0 26px rgba(0, 170, 255, 0.22));
}

/* Bloc texte du brand */
.epsy-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.epsy-brand-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
}

/* Accent “Services” */
.epsy-brand-accent {
    color: var(--neon);
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.35);
}

/* Accroche (style signature lisible) */
.epsy-tagline {
    margin-top: 3px;
    font-size: 0.95rem;
    opacity: 0.80;
    white-space: nowrap;
    font-family: "Segoe UI", Arial, sans-serif;
    font-style: italic;
    letter-spacing: 0.2px;
}

/* Mini icône animée : equalizer */
.epsy-mini-icon {
    display: inline-flex;
    align-items: center;
}

.epsy-eq {
    width: 64px;
    height: 18px;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.35));
}

    .epsy-eq rect {
        fill: rgba(0, 180, 255, 0.9);
        transform-origin: center;
        animation: epsyEQ 1.1s ease-in-out infinite;
    }

        /* décalages pour un rendu “audio” */
        .epsy-eq rect:nth-child(1) {
            animation-delay: 0.00s;
        }

        .epsy-eq rect:nth-child(2) {
            animation-delay: 0.08s;
        }

        .epsy-eq rect:nth-child(3) {
            animation-delay: 0.16s;
        }

        .epsy-eq rect:nth-child(4) {
            animation-delay: 0.24s;
        }

        .epsy-eq rect:nth-child(5) {
            animation-delay: 0.32s;
        }

        .epsy-eq rect:nth-child(6) {
            animation-delay: 0.40s;
        }

        .epsy-eq rect:nth-child(7) {
            animation-delay: 0.32s;
        }

        .epsy-eq rect:nth-child(8) {
            animation-delay: 0.24s;
        }

        .epsy-eq rect:nth-child(9) {
            animation-delay: 0.16s;
        }

        .epsy-eq rect:nth-child(10) {
            animation-delay: 0.08s;
        }

@keyframes epsyEQ {
    0% {
        transform: scaleY(0.45);
        opacity: 0.65;
    }

    50% {
        transform: scaleY(1.25);
        opacity: 1;
    }

    100% {
        transform: scaleY(0.55);
        opacity: 0.75;
    }
}

/* Responsive brand */
@media (max-width: 768px) {
    .epsy-tagline {
        display: none;
    }

    .epsy-logo {
        width: 64px;
        height: 64px;
        margin-top: -12px;
        margin-bottom: -12px;
    }

    .epsy-eq {
        width: 46px;
    }
}

.contact-success {
    white-space: pre-line;
}