/* =====================================================================
   modern.css — Couche de modernisation Mediavea (chargée en dernier)
   Rafraîchit typographie, couleurs, héro, cartes, boutons, footer
   SANS modifier la structure HTML ni l'identité (bleu Mediavea conservé).
   ===================================================================== */

:root {
    --mv-blue:        #0e70b7;
    --mv-blue-dark:   #0a5690;
    --mv-blue-light:  #5cb1ce;
    --mv-accent:      #f59e0b;   /* accent chaud pour les CTA */
    --mv-ink:         #1a2b3a;
    --mv-muted:       #5b6b7a;
    --mv-bg-soft:     #f5f8fb;
    --mv-border:      #e6edf3;
    --mv-radius:      14px;
    --mv-shadow:      0 6px 24px rgba(14,112,183,.10);
    --mv-shadow-lg:   0 14px 40px rgba(14,112,183,.16);
    --mv-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --mv-head:        'Montserrat', 'Inter', Arial, sans-serif;
}

/* ---------- Typographie ---------- */
body {
    font-family: var(--mv-font) !important;
    color: var(--mv-ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--mv-head) !important;
    color: var(--mv-blue);
    letter-spacing: -.01em;
    font-weight: 700;
}

h2, h3 { font-weight: 700; }

.container p, p { font-size: 1.02rem; }
.pgros { font-size: 1.12rem !important; line-height: 1.7; }
.text-justify { text-align: left !important; }   /* le justifié nuit à la lisibilité */

a {
    color: var(--mv-blue);
    transition: color .2s ease;
}
a:hover { color: var(--mv-blue-dark); }

/* ---------- Barre de navigation ---------- */
#navbar-c {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 2px 18px rgba(0,0,0,.06);
    transition: box-shadow .3s ease, background .3s ease;
}
#navbar-c .nav-link {
    color: var(--mv-ink) !important;
    font-weight: 600;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
}
#navbar-c .nav-link:hover { color: var(--mv-blue) !important; background: var(--mv-bg-soft); }

/* ---------- Héro (home + #mainh1) ---------- */
#devis, #mainh1 {
    background: linear-gradient(135deg, var(--mv-blue-dark) 0%, var(--mv-blue) 55%, var(--mv-blue-light) 100%) !important;
    position: relative;
}
#maintitle, #devis-ct h1, #mainh1 h1 {
    font-family: var(--mv-head) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
    line-height: 1.12;
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
#devis-bt {
    display: inline-block;
    background: var(--mv-accent);
    color: #1a2b3a !important;
    font-weight: 700;
    padding: .95rem 2.4rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(245,158,11,.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
#devis-bt:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(245,158,11,.5); color:#1a2b3a !important; }

/* Vidéo de fond : on l'efface sur mobile pour préserver le LCP */
.video-c .videofond { object-fit: cover; }
@media (max-width: 768px) {
    .video-c, .videofond { display: none !important; }
    #devis { background: linear-gradient(135deg, var(--mv-blue-dark), var(--mv-blue-light)) !important; }
}

/* ---------- Sections ---------- */
.cc { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.cbord { border-top: 1px solid var(--mv-border); }
.cgris { background: var(--mv-bg-soft); }

.homelink a { color: var(--mv-blue); }
.homelink a:hover { color: var(--mv-blue-dark); }

/* ---------- Cartes ---------- */
.card3 {
    background: #fff;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    box-shadow: var(--mv-shadow);
    padding: 1.4rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.card3:hover { transform: translateY(-4px); box-shadow: var(--mv-shadow-lg); }
.card3 .card-title, .card3 h2 { font-size: 1.15rem; color: var(--mv-blue); }
.card3 img { border-radius: 10px; }
.navlink a {
    font-weight: 600;
    color: var(--mv-blue);
}

/* ---------- Boutons génériques ---------- */
.btn, input#submit, #submit {
    border-radius: 999px !important;
    font-weight: 600 !important;
}
input#submit, #submit {
    background: var(--mv-blue) !important;
    color: #fff !important;
    border: none !important;
    padding: .8rem 2.2rem !important;
    box-shadow: 0 8px 22px rgba(14,112,183,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
input#submit:hover, #submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,112,183,.4); }

/* ---------- Citation ---------- */
.quote p { color: var(--mv-accent); font-style: italic; }
.quote cite { color: var(--mv-muted); }

/* ---------- Bandeau chiffres-clés (E-E-A-T) ---------- */
.mv-stats {
    background: linear-gradient(135deg, var(--mv-blue-dark), var(--mv-blue));
    color: #fff;
}
.mv-stats .mv-stat { padding: 1.2rem .5rem; text-align: center; }
.mv-stat .mv-num {
    font-family: var(--mv-head);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    display: block;
}
.mv-stat .mv-lbl { font-size: .95rem; opacity: .92; margin-top: .35rem; display:block; }

/* ---------- Formulaire de contact ---------- */
.md-form .form-control { border-radius: 10px; }
.md-form label { color: var(--mv-muted); }

/* ---------- Footer ---------- */
.page-footer {
    background: var(--mv-ink);
    color: #c8d3dd;
}
.page-footer a { color: #c8d3dd; }
.page-footer a:hover { color: #fff; }
.page-footer .planSite { color: #fff; font-family: var(--mv-head); letter-spacing: .04em; }
.footer-copyright { background: rgba(0,0,0,.25); color: #9fb0bd; }

/* ---------- Menus déroulants (méga-menu façon RadioShop) ---------- */
#navbar-c .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: var(--mv-shadow-lg);
    padding: .6rem;
    margin-top: .4rem;
}
#navbar-c .dropdown-item {
    border-radius: 8px;
    padding: .6rem .9rem;
    font-weight: 600;
    color: var(--mv-ink);
    white-space: normal;
}
#navbar-c .dropdown-item:hover { background: var(--mv-bg-soft); color: var(--mv-blue); }

/* ---------- Libellé "overline" de section ---------- */
.mv-overline {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mv-blue-light);
    margin-bottom: .4rem;
}

/* ---------- Bande de logos clients ---------- */
.mv-logos { background: #fff; }
.mv-logos .mv-logo-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.4rem 3rem;
}
.mv-logos img {
    max-height: 54px;
    width: auto;
    filter: grayscale(100%);
    opacity: .65;
    transition: filter .3s ease, opacity .3s ease;
}
.mv-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Témoignages ---------- */
.mv-quote-card {
    background: #fff;
    border: 1px solid var(--mv-border);
    border-left: 4px solid var(--mv-blue);
    border-radius: var(--mv-radius);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--mv-shadow);
    font-style: italic;
    color: var(--mv-ink);
}
.mv-quote-card .mv-quote-author { font-style: normal; font-weight: 700; color: var(--mv-blue); margin-top: .8rem; }

/* ---------- Accordéon FAQ ---------- */
.mv-faq-intro { color: var(--mv-muted); max-width: 640px; margin: 0 auto 1.5rem; }
.mv-faq-item {
    background: #fff;
    border: 1px solid var(--mv-border);
    border-radius: 12px;
    margin-bottom: .85rem;
    box-shadow: 0 2px 10px rgba(14,112,183,.05);
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.mv-faq-item[open] { box-shadow: var(--mv-shadow); }
.mv-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 3rem 1.1rem 1.3rem;
    font-family: var(--mv-head);
    font-weight: 700;
    color: var(--mv-blue);
    position: relative;
    font-size: 1.05rem;
}
.mv-faq-item summary::-webkit-details-marker { display: none; }
.mv-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--mv-blue-light);
    transition: transform .25s ease;
    line-height: 1;
}
.mv-faq-item[open] summary::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); }
.mv-faq-a {
    padding: 0 1.3rem 1.2rem;
    color: var(--mv-ink);
}
.mv-faq-a p { margin: 0; line-height: 1.7; }

/* ---------- Étapes / process ---------- */
.csteps {
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius);
    background: var(--mv-bg-soft);
    padding: 2rem;
}
.card-subtitle { color: var(--mv-blue); font-weight: 700; }

/* ---------- Cartes de contenu sectorielles ---------- */
.cardImageF, .card { border-radius: var(--mv-radius); }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }