/* ============================================================
   mediserv.fr — main.css
   Charte alignee sur le CRM V4 (bleu / vert / jaune Mediserv).
   Mobile-first responsive, sans framework. Sans-serif moderne.
   ============================================================ */

/* ===== Reset minimal ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #2c3e50;
    background: #ffffff;
}
h1, h2, h3, h4, h5 { line-height: 1.25; margin: 0 0 0.6em; color: #1a3a5e; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { margin: 0 0 1em; }
ul { padding-left: 1.4em; }
img { max-width: 100%; height: auto; display: block; }
a {
    color: #1565c0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a:hover, a:focus { color: #0d3d75; }

/* ===== Variables charte Mediserv (alignees CRM) ===== */
:root {
    --mds-bleu:        #89A4BF;       /* bleu Mediserv */
    --mds-bleu-fonce:  #5478a0;
    --mds-bleu-clair:  #d9e4ee;
    --mds-bleu-pale:   #f3f7fb;
    --mds-vert:        #8fca6a;
    --mds-vert-fonce:  #6ba14d;
    --mds-vert-clair:  #e3f1d6;
    --mds-jaune:       #f5d76e;
    --mds-jaune-pale:  #fff7d9;

    --mds-gris-tres-clair: #f8f9fa;
    --mds-gris-clair:      #e1e6eb;
    --mds-gris:            #a1aab3;
    --mds-gris-fonce:      #4a5560;
    --mds-noir:            #1a2530;

    --mds-radius: 8px;
    --mds-radius-petit: 4px;
    --mds-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --mds-shadow-fort: 0 8px 24px rgba(0,0,0,0.12);
    --mds-transition: 0.2s ease;
}

/* ===== Skip link (accessibilite) ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--mds-bleu-fonce);
    color: #fff;
    padding: 10px 16px;
    z-index: 1000;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ===== Utilitaires ===== */
.visuallyhidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ===== Header / Navigation ===== */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--mds-gris-clair);
    box-shadow: var(--mds-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-conteneur {
    max-width: 90%;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.header-logo {
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
}
.header-logo img { display: block; height: 50px; width: auto; }

.site-nav { flex: 1; }
.nav-burger {
    display: none;
    background: none;
    border: 1px solid var(--mds-gris);
    border-radius: var(--mds-radius-petit);
    width: 40px; height: 40px;
    cursor: pointer;
    padding: 0;
}
.burger-icone, .burger-icone::before, .burger-icone::after {
    display: block;
    background: var(--mds-gris-fonce);
    height: 2px;
    width: 22px;
    margin: 5px auto;
    transition: var(--mds-transition);
}
.burger-icone::before, .burger-icone::after {
    content: '';
    position: relative;
}
.nav-liste {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    justify-content: center;
}
.nav-item a {
    display: block;
    padding: 10px 16px;
    color: var(--mds-gris-fonce);
    text-decoration: none;
    border-radius: var(--mds-radius-petit);
    font-weight: 500;
    transition: var(--mds-transition);
}
.nav-item a:hover, .nav-item a:focus {
    background: var(--mds-bleu-pale);
    color: var(--mds-bleu-fonce);
}
.nav-item-actif a {
    color: var(--mds-bleu-fonce);
    background: var(--mds-bleu-clair);
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Boutons ===== */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--mds-radius-petit);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--mds-transition);
    text-align: center;
    line-height: 1.3;
}
.btn-primaire {
    background: var(--mds-bleu-fonce);
    color: #fff;
    border-color: var(--mds-bleu-fonce);
}
.btn-primaire:hover, .btn-primaire:focus {
    background: #34537a;
    border-color: #34537a;
    color: #fff;
}
.btn-secondaire {
    background: #fff;
    color: var(--mds-bleu-fonce);
    border-color: var(--mds-bleu-fonce);
}
.btn-secondaire:hover, .btn-secondaire:focus {
    background: var(--mds-bleu-clair);
    color: var(--mds-bleu-fonce);
}
.btn-grand { padding: 14px 26px; font-size: 1.05rem; }

/* ===== Sections ===== */
main { min-height: 60vh; }
.section-titre { text-align: center; margin-bottom: 32px; }

.hero {
    background: linear-gradient(135deg, var(--mds-bleu-pale) 0%, var(--mds-vert-clair) 100%);
    padding: 80px 20px;
    text-align: center;
}
.hero-conteneur { max-width: 900px; margin: 0 auto; }
.hero-titre { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 16px; }
.hero-baseline { font-size: 1.15rem; color: var(--mds-gris-fonce); max-width: 700px; margin: 0 auto 32px; }
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.bandeau-services { padding: 60px 20px; }
.bandeau-conteneur { max-width: 1200px; margin: 0 auto; }
.services-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.service-carte {
    background: #fff;
    border: 1px solid var(--mds-gris-clair);
    border-radius: var(--mds-radius);
    padding: 28px;
    box-shadow: var(--mds-shadow);
    transition: var(--mds-transition);
}
.service-carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--mds-shadow-fort);
    border-color: var(--mds-bleu);
}
.service-carte h3 { color: var(--mds-bleu-fonce); margin-bottom: 12px; }
.lien-fleche {
    color: var(--mds-bleu-fonce);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
}
.lien-fleche:hover { text-decoration: underline; }

.bandeau-qualite {
    background: var(--mds-jaune-pale);
    padding: 24px 20px;
    text-align: center;
    border-top: 3px solid var(--mds-jaune);
}
.qualite-mention { margin: 0; color: var(--mds-gris-fonce); }
.qualite-mention strong { color: var(--mds-noir); }

/* ===== Footer ===== */
.site-footer {
    background: var(--mds-noir);
    color: var(--mds-gris-clair);
    padding: 48px 20px 20px;
    margin-top: 80px;
}
.footer-conteneur {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
.footer-bloc h2.footer-titre {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-baseline { color: var(--mds-gris); }
.footer-liens {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-liens li { margin-bottom: 8px; }
.footer-liens a {
    color: var(--mds-gris-clair);
    text-decoration: none;
}
.footer-liens a:hover, .footer-liens a:focus {
    color: var(--mds-jaune);
    text-decoration: underline;
}
.footer-bas {
    max-width: 1200px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid #2a3a48;
    text-align: center;
    color: var(--mds-gris);
    font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 800px) {
    .header-conteneur { flex-wrap: wrap; gap: 12px; }
    .nav-burger { display: block; }
    .nav-liste {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        margin-top: 12px;
        padding: 8px 0;
        border-top: 1px solid var(--mds-gris-clair);
    }
    .nav-liste.ouvert { display: flex; }
    .nav-item a { padding: 12px 16px; border-radius: 0; }
    .header-actions { margin-left: auto; }
    .hero { padding: 60px 16px; }
    .bandeau-services { padding: 40px 16px; }
}

/* ===== Focus visible (a11y) ===== */
:focus-visible {
    outline: 3px solid var(--mds-jaune);
    outline-offset: 2px;
}