/* Pages de contenu — spécialités et secteurs
   angelique-osteo.fr
   Même chrome que les pages intérieures (nav, pied de page, menu ?). */

:root {
    --primary:#53775c;
    --primary-deep:#3f6b4c;
    --ink:#3d3530;
    --muted:#5c534c;
    --bg:#fdfcfb;
    --hero:linear-gradient(160deg,#f7f4ef 0%,#e7e0d8 100%);
    --card:#ffffff;
    --line:#e8e2db;
    --nav:rgba(255,255,255,.97);
    --nav-border:#f0ece8;
    --soft:#f9f7f4;
    --link:#2f5c40;
    --shadow:0 10px 30px rgba(61,53,48,.06);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
    background:var(--bg);
    color:var(--ink);
    font-family:'Poppins', sans-serif;
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img { max-width:100%; height:auto; }

a { color:var(--link); }

a:hover { text-decoration:none; }

:focus-visible {
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.navbar {
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 4%;
    background:var(--nav);
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    box-shadow:0 2px 20px rgba(0,0,0,.05);
    border-bottom:1px solid transparent;
}

.logo-img { max-height:40px; width:auto; }

.hamburger {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:24px;
    height:18px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:1100;
    flex-shrink:0;
}

.hamburger span {
    display:block;
    height:2px;
    width:100%;
    background:var(--ink);
    border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
}

.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

.navbar-links {
    display:none;
    flex-direction:column;
    list-style:none;
    position:fixed;
    top:60px;
    left:0;
    right:0;
    background:var(--nav);
    padding:12px 0 8px;
    box-shadow:0 4px 20px rgba(0,0,0,.1);
    z-index:999;
    border-top:1px solid var(--nav-border);
}

.navbar-links.open { display:flex; }

.navbar-links a {
    display:block;
    color:var(--ink);
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    padding:14px 5%;
    letter-spacing:.05em;
    border-bottom:1px solid var(--nav-border);
}

.navbar-links a:hover,
.navbar-links a[aria-current="page"] {
    color:var(--primary-deep);
    background:var(--soft);
}

.btn-rdv {
    padding:8px 18px;
    font-size:13px;
    font-weight:600;
    color:#fff !important;
    text-decoration:none;
    background:linear-gradient(135deg,#aa4ec0,#9650a8);
    border-radius:50px;
    white-space:nowrap;
    flex-shrink:0;
}

.page-hero {
    padding:84px 5% 28px;
    background:var(--hero);
}

.breadcrumb ol {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    list-style:none;
    font-size:.75rem;
    color:var(--muted);
    margin-bottom:14px;
}

.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb li:not(:last-child)::after { content:"/"; margin-left:6px; color:#6e6e6e; }
.breadcrumb [aria-current="page"] { color:var(--ink); font-weight:500; }

.badge {
    display:inline-block;
    padding:5px 14px;
    background:#2f5c40;
    color:#fff;
    border-radius:50px;
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.page-hero h1 {
    font-family:'Playfair Display', serif;
    font-weight:600;
    font-size:clamp(1.7rem, 7vw, 2.35rem);
    line-height:1.2;
    color:var(--ink);
    max-width:18em;
    margin-bottom:12px;
}

.lead {
    font-size:1rem;
    color:var(--muted);
    max-width:40rem;
    margin-bottom:18px;
}

.page-figure {
    margin:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    max-height:220px;
    background:var(--card);
}

.page-figure img {
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.page-body {
    padding:28px 5% 56px;
    max-width:820px;
}

.page-body h2 {
    font-family:'Playfair Display', serif;
    font-size:1.45rem;
    font-weight:600;
    line-height:1.25;
    margin:1.6em 0 .5em;
    color:var(--ink);
}

.page-body p,
.page-body li { margin-bottom:.85em; }

.page-body ul { padding-left:1.15em; }

.page-body strong { font-weight:600; }

.practical,
.page-cta,
.see-also {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px 16px;
    margin-top:1.6em;
    box-shadow:var(--shadow);
}

.practical h2,
.page-cta h2,
.see-also h2 { margin-top:0; }

.practical dl { margin:0; }

.practical div {
    display:grid;
    gap:2px;
    padding:10px 0;
    border-top:1px solid var(--line);
}

.practical dt {
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary-deep);
    font-weight:600;
}

.practical dd { margin:0; color:var(--ink); }

.page-cta p { margin-bottom:14px; }

.btn-docto {
    display:inline-block;
    background:linear-gradient(135deg,#aa4ec0,#9650a8);
    color:#fff !important;
    text-decoration:none;
    font-weight:600;
    border-radius:50px;
    padding:12px 22px;
    font-size:.92rem;
}

.btn-docto:hover { background:linear-gradient(135deg,#9650a8,#8a489c); }

.see-also ul {
    list-style:none;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.see-also a { font-weight:500; }

.page-blur-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.55);
    z-index:1500;
}

.page-blur-overlay.active { display:block; pointer-events:auto; }

@media (min-width:768px) {
    .page-blur-overlay { display:none !important; }
}

.floating-help {
    position:fixed;
    bottom:18px;
    right:16px;
    z-index:2000;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.floating-actions {
    display:none;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    margin-bottom:10px;
}

.floating-actions.open { display:flex; }

.floating-action-btn {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 16px 8px 12px;
    text-decoration:none;
    color:var(--ink);
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    cursor:pointer;
}

.help-toggle {
    width:46px;
    height:46px;
    background:#aa4ec0;
    border-radius:50%;
    border:none;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(191,122,208,.4);
}

.grecaptcha-badge { visibility:hidden !important; }

.site-footer {
    padding:36px 5% 28px;
    background:var(--soft);
    text-align:center;
    border-top:1px solid var(--line);
}

.footer-partners { margin-bottom:22px; }

.partner-logos {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px 22px;
}

.partner-logos img {
    height:32px;
    width:auto;
    max-width:120px;
    object-fit:contain;
}

.footer-specialites { margin:0 auto 22px; max-width:740px; }

.footer-specialites p {
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--primary-deep);
    font-weight:600;
    margin-bottom:8px;
}

.footer-specialites ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 14px;
    list-style:none;
    padding:0;
    margin:0;
}

.footer-specialites a {
    font-size:.8rem;
    color:var(--link);
    text-decoration:none;
}

.footer-specialites a:hover,
.footer-specialites a[aria-current="page"] { text-decoration:underline; }

.footer-bottom {
    border-top:1px solid var(--line);
    padding-top:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
}

.footer-info p { font-size:.9rem; color:var(--ink); line-height:1.7; margin:0; }
.footer-info a { color:var(--ink); text-decoration:none; }
.footer-legal p { font-size:.78rem; color:var(--muted); margin-top:6px; }
.footer-legal a { color:var(--primary-deep); }

.animate-on-scroll {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
}

.animate-on-scroll.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
    .animate-on-scroll { opacity:1; transform:none; transition:none; }
}

@media (min-width:768px) {
    .hamburger { display:none; }

    .navbar-links {
        display:flex !important;
        flex-direction:row;
        position:static;
        background:none;
        padding:0;
        box-shadow:none;
        border:none;
        gap:26px;
        margin-left:auto;
        margin-right:28px;
    }

    .navbar-links a {
        display:inline;
        padding:0;
        border:none;
        background:none;
        font-size:13px;
    }

    .navbar-links a:hover { background:none; color:var(--primary-deep); }

    .page-hero { padding:116px 8% 40px; }
    .page-body { padding:36px 8% 72px; }
    .page-figure, .page-figure img { max-height:280px; height:280px; }
    .footer-bottom {
        flex-direction:row;
        justify-content:space-between;
        text-align:left;
        align-items:flex-start;
    }
}

@media (min-width:1024px) {
    .navbar { height:100px; }
    .logo-img { max-height:70px; }
    .navbar-links { gap:36px; margin-right:36px; }
    .navbar-links a { font-size:14px; letter-spacing:1px; }
    .btn-rdv { padding:12px 28px; font-size:14px; }
    .page-hero { padding:140px 10% 52px; }
    .page-hero h1 { font-size:2.7rem; }
}

/* Sombre : même classe que theme-init.js (html.theme-dark). */
html.theme-dark {
    --ink:#f6f1e8;
    --muted:#e4ded2;
    --bg:#171e1b;
    --hero:linear-gradient(160deg,#1c2420 0%,#171e1b 100%);
    --card:#232c27;
    --line:#314038;
    --nav:rgba(23,30,27,.96);
    --nav-border:#314038;
    --soft:#121816;
    --link:#c5dccb;
    --primary-deep:#c5dccb;
    --shadow:none;
}

html.theme-dark .page-blur-overlay { background:rgba(23,30,27,.72); }
html.theme-dark .breadcrumb li:not(:last-child)::after { color:#c5c3bc; }