/* =============================================================================
   REFONTE VISITEUR — Direction « cabinet » (esprit jane-oberdorff.fr)
   Thème alternatif, chargé seul selon le cookie visitor_theme=cabinet.
   Palette pétrole / rose poudré / corail · Quicksand + ABeeZee.
   ========================================================================== */

:root {
    --petrol:      #104858;
    --petrol-deep: #0b333f;
    --petrol-card: #0d3d4a;
    --pink:        #eea3a3;
    --coral:       #f56f70;
    --coral-deep:  #e05758;

    --paper:       #ffffff;
    --paper-2:     #f4f6f6;
    --card:        #ffffff;
    --ink:         #223438;
    --ink-soft:    #5a6b6e;
    --muted:       #8a9a9d;
    --line:        #e0e6e6;
    --line-card:   #e6ecec;

    --radius:      16px;
    --radius-lg:   18px;
    --shadow:      0 22px 52px -28px rgba(16, 72, 88, .32);
    --shadow-sm:   0 16px 40px -24px rgba(16, 72, 88, .24);
    --wrap:        1160px;

    --font-family-primary:   'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
    --font-family-secondary: 'ABeeZee', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-base-size: 16px;

    /* Menu (consommé par refonte-menu.css) */
    --nav-fg:            #d5e3e6;
    --nav-fg-strong:     #ffffff;
    --nav-hover-bg:      rgba(255, 255, 255, .12);
    --nav-cta-bg:        #f56f70;
    --nav-cta-bg-hover:  #e05758;
    --nav-cta-fg:        #ffffff;
    --nav-cta-shadow:    0 12px 24px -14px rgba(245, 111, 112, .8);
    --nav-panel-bg:      #ffffff;
    --nav-panel-border:  #e0e6e6;
    --nav-panel-shadow:  0 26px 60px -24px rgba(16, 72, 88, .34);
    --nav-panel-fg:      #223438;
    --nav-panel-fg-soft: #5a6b6e;
    --nav-panel-accent:  #c05a5b;
    --nav-mobile-bg:     #104858;
    --nav-mobile-top:    66px;
}

/* ------------------------------------------------------------------ Base --- */

body {
    background: var(--paper) !important;
    background-image: none !important;
    color: var(--ink);
    font-family: var(--font-family-secondary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-title, .article-title, .section-title {
    font-family: var(--font-family-primary);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--petrol) !important;
}

a { color: var(--petrol); }
a:hover { color: var(--coral); }

main {
    background: transparent !important;
    font-size: 1.02rem;
    padding: 0 !important;
}

.page-section,
.google-reviews-section .container,
.temoignages .container {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 64px 40px 90px;
}

/* -------------------------------------------------------------- Boutons --- */

.btn,
.btn-primary,
.content-block-button .btn,
#contact-form button,
.view-all-btn,
.article-footer .btn,
.podcast-watch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: .96rem;
    text-decoration: none;
    border: 0;
    transition: transform .18s ease, background .18s ease;
    box-shadow: 0 14px 30px -16px rgba(245, 111, 112, .6);
}
.btn:hover,
.btn-primary:hover,
.content-block-button .btn:hover,
.view-all-btn:hover,
.podcast-watch-btn:hover {
    background: var(--coral-deep);
    color: #fff;
    transform: translateY(-2px);
}
.btn-ghost {
    background: transparent;
    color: var(--petrol);
    box-shadow: inset 0 0 0 2px var(--petrol);
}
.btn-ghost:hover {
    background: rgba(16, 72, 88, .06);
    color: var(--petrol);
    box-shadow: inset 0 0 0 2px var(--petrol);
}

/* --------------------------------------------------------------- Header --- */
/* Comportement du menu : assets/styles/refonte-menu.css */

#header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    height: 78px;
    padding: 0 clamp(20px, 5vw, 56px) !important;
    background: var(--petrol) !important;
    color: #fff;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
}
.site-brand { display: flex; flex-direction: column; line-height: 1.18; text-decoration: none; flex-shrink: 0; }
.site-brand-name { font-family: var(--font-family-primary); font-weight: 700; font-size: 1.32rem; color: #fff; }
.site-brand-tag { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #a9c4cb; }

#header .up-menu,
#header .left-header { display: none !important; }

@media (max-width: 899px) {
    #header { height: 66px; }
}

/* ----------------------------------------------------------------- Hero --- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--petrol);
    color: #fff;
    border-bottom: 0;
}
.hero-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 92px) clamp(20px, 5vw, 56px);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-eyebrow {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pink);
    font-weight: 600;
    font-family: var(--font-family-primary);
}
.hero-title {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: clamp(2.3rem, 4.6vw, 3.5rem) !important;
    line-height: 1.16 !important;
    margin: 0 !important;
    color: #fff !important;
}
.hero-title em { font-style: normal; color: var(--pink); }
.hero-lead { font-size: 1.12rem; color: #cfe0e3; max-width: 33em; text-align: justify; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero-actions .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hero-trust { display: flex; align-items: center; gap: 10px; color: #a9c4cb; font-size: .88rem; margin-top: 6px; }
.hero-trust .stars { color: var(--pink); letter-spacing: 2px; }

.hero-media { position: relative; justify-self: end; }
.hero-media::before {
    content: "";
    position: absolute;
    inset: -20px -20px 16px 16px;
    background: var(--pink);
    border-radius: 22px;
    z-index: 0;
}
.hero-media img {
    position: relative;
    z-index: 1;
    width: min(360px, 78vw);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45);
}

/* Héros sans portrait : une seule colonne, centré */
.hero--solo .hero-inner { grid-template-columns: 1fr; max-width: 860px; }
.hero--solo .hero-lead { margin-left: 0; }

.page-hero {
    background: var(--petrol);
    color: #fff;
    border-bottom: 0;
}
.page-hero-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 68px) clamp(20px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-hero-eyebrow {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pink);
    font-weight: 600;
    font-family: var(--font-family-primary);
}
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem) !important; margin: 0 !important; color: #fff !important; }
.page-hero .page-hero-lead { color: #cfe0e3; font-size: 1.08rem; max-width: 40em; }

.page-hero + .page-section,
.hero + .page-section { padding-top: 56px; }

/* ------------------------------------------------------- Blocs de contenu --- */

.content-block-wrapper { margin-bottom: 2.4rem; }
.content-block-wrapper:last-child { margin-bottom: 0; }

.content-block { max-width: 820px; margin-inline: auto; }
.content-block-text h3,
.content-block-image-text h3,
.content-block-gallery h3,
.content-block-map h3 { font-size: 1.5rem; margin: 0 0 1rem; }
.content-block .content { color: var(--ink); }
.content-block .content p { margin: 0 0 1rem; }
.content-block .content a { text-decoration: underline; text-underline-offset: 3px; }

.content-image { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.block-card {
    background: var(--card) !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--line-card);
    padding: 2rem !important;
    box-shadow: var(--shadow-sm) !important;
}
.block-card-elevated { box-shadow: var(--shadow) !important; }
.block-card-outlined { border: 1px solid var(--line-card) !important; box-shadow: none !important; }

.content-block-quote {
    max-width: 720px;
    background: var(--paper-2) !important;
    border: 0 !important;
    border-left: 3px solid var(--coral) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    padding: 2rem 2.4rem !important;
}
.content-block-quote blockquote {
    font-family: var(--font-family-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--petrol);
}
.content-block-quote cite { color: var(--ink-soft); }

.content-block-pdf .pdf-block-link {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 1.4rem 1.8rem;
    background: var(--card);
    border: 1px solid var(--line-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
}
.content-block-pdf .pdf-block-action { color: var(--coral); font-weight: 600; }

.content-block-form {
    max-width: 640px;
    background: var(--card);
    border: 1px solid var(--line-card);
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    box-shadow: var(--shadow-sm);
}
.block-form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2);
    font-family: inherit;
    font-size: .96rem;
    color: var(--ink);
}
.block-form-input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.block-form-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; font-family: var(--font-family-primary); }
.block-form-group { margin-bottom: 1rem; }
.block-form-message.success { color: #2e7d5b; }
.block-form-message.error { color: var(--coral-deep); }

.gallery-grid { gap: 14px; }
.gallery-item { border-radius: var(--radius); }
.gallery-image { border-radius: var(--radius); }
.content-block-map .map-embed-container iframe { border-radius: var(--radius); }

/* --------------------------------------------------------------- Footer --- */

footer {
    background: var(--petrol) !important;
    color: #a9c4cb !important;
    margin-top: 0 !important;
}
.site-footer-grid {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 64px clamp(20px, 5vw, 56px) 34px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer-grid h4 { color: #fff !important; font-size: 1rem; margin: 0 0 4px; font-family: var(--font-family-primary); font-weight: 600; }
.site-footer-col { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.site-footer-col a { color: #a9c4cb; }
.site-footer-col a:hover { color: #fff; }
.site-footer-brand { font-family: var(--font-family-primary); font-weight: 700; font-size: 1.3rem; color: #fff !important; }
.site-footer-legal {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 20px clamp(20px, 5vw, 56px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
footer .footer-content {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 44px clamp(20px, 5vw, 56px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
}
footer .footer-content a { color: #a9c4cb; }
footer .footer-content a:hover { color: #fff; }

/* -------------------------------------------------------- Bandeau contact --- */

#contact-banner {
    background: var(--petrol-deep) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* -------------------------------------------------------- Bottom nav mob. --- */

.bottom-nav-frontend {
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    backdrop-filter: none;
}
.bottom-nav-frontend-item { color: var(--ink-soft) !important; }
.bottom-nav-frontend-item.active,
.bottom-nav-frontend-item:hover { color: var(--coral) !important; }

/* ------------------------------------------------------------- Articles --- */

.search-bar form { display: flex; gap: 10px; max-width: 460px; margin: 0 0 2.4rem; }
.search-bar input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
}
.search-bar input:focus { outline: 2px solid var(--coral); }

.article-card {
    background: var(--card) !important;
    border: 1px solid var(--line-card) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}
.article-card .article-image img { height: 210px; object-fit: cover; }
.article-card h2 { font-size: 1.3rem; }
.article-card h2 a { color: var(--petrol) !important; }
.article-card h2 a:hover { color: var(--coral) !important; }
.article-meta { color: var(--muted); font-size: .82rem; }
.badge-new {
    background: var(--coral) !important;
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .68rem;
    letter-spacing: .08em;
}
.carousel-btn {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--petrol) !important;
    box-shadow: var(--shadow-sm);
}
.carousel-btn:hover { background: var(--paper-2) !important; }
.carousel-indicator { background: #d6e0e0 !important; }
.carousel-indicator.active { background: var(--coral) !important; }

.article-detail .article-header h1,
.article-content .article-header h1 { color: var(--petrol) !important; }

/* ------------------------------------------------------------- Podcasts --- */

.podcast-card {
    background: var(--card) !important;
    border: 1px solid var(--line-card);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}
.podcast-card-content h2 { font-size: 1.02rem; color: var(--petrol); }
.podcast-play-btn { color: #fff; }
.podcast-thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(16, 72, 88, .32));
    opacity: 0;
    transition: opacity .3s;
}
.podcast-thumbnail:hover::after { opacity: 1; }

/* --------------------------------------------------------- Avis Google --- */

.google-reviews-section { background: var(--paper-2); border-block: 1px solid var(--line); }
.google-reviews-section h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--petrol); }
.google-reviews-section .intro-text { color: var(--ink-soft) !important; }
.review-card {
    background: var(--card) !important;
    border: 1px solid var(--line-card) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
}
.review-card::before { background: linear-gradient(90deg, var(--pink), var(--coral)) !important; }
.reviewer-name { font-weight: 600; color: var(--petrol); font-family: var(--font-family-primary); }
.review-text { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.review-stars { color: var(--pink); }

/* --------------------------------------------------------- Calendrier --- */

.wizard-container, .calendar-container { margin-top: 2.5rem !important; }
.wizard-container .step-circle.active,
.wizard-container .step.active .step-circle { border-color: var(--coral) !important; color: var(--coral) !important; }
.wizard-container .step.completed .step-circle { background: var(--coral) !important; border-color: var(--coral) !important; color: #fff !important; }
.wizard-container .btn-primary,
.calendar-container .btn-primary,
.wizard-container button[type="submit"] {
    background: var(--coral) !important;
    border-color: var(--coral) !important;
    color: #fff !important;
}
.fc {
    --fc-button-bg-color: var(--petrol);
    --fc-button-border-color: var(--petrol);
    --fc-button-hover-bg-color: var(--petrol-deep);
    --fc-button-hover-border-color: var(--petrol-deep);
    --fc-button-active-bg-color: var(--petrol-deep);
    --fc-today-bg-color: rgba(245, 111, 112, .1);
}

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-media { justify-self: start; }
    .site-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .site-footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .page-section { padding: 44px 20px 80px; }
}