/* ==========================================================================
   Emma Galfré — global.css
   ONLY what theme.json cannot handle.
   All values from prototype/style.css → design-emma-galfre.pen
   ========================================================================== */

/* -------------------------------------------------------------------------
   Base reset — theme.json doesn't reset margins
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Zero gap between site-level blocks (header, post-content, footer)
   and between full-width sections inside content.
   theme.json blockGap is 28px for content editing comfort,
   but site structure and stacked sections should touch edge-to-edge */
.wp-site-blocks > * + * {
    margin-top: 0 !important;
}

.is-layout-constrained > .alignfull + .alignfull {
    margin-top: 0 !important;
}

/* Default content spacing — 28px between blocks in FLOW layouts only
   .pen: 6zc8Z gap 28
   Flex layouts use CSS gap (from blockGap) — don't interfere */
.wp-block-group.is-layout-flow > * + .wp-block-heading,
.wp-block-group.is-layout-flow > * + p,
.wp-block-group.is-layout-flow > * + .wp-block-list,
.wp-block-group.is-layout-flow > * + .wp-block-separator,
.wp-block-group.is-layout-flow > * + .wp-block-buttons,
.wp-block-group.is-layout-flow > * + .wp-block-image,
.wp-block-group.is-layout-flow > * + .wp-block-columns,
.wp-block-group.is-layout-flow > * + .wp-block-group {
    margin-top: 28px;
}

.wp-block-group.is-layout-flow > *:first-child {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   SEPARATOR — theme.json can set color but not dimensions
   .pen: decorative = primary-light, 60x2
   .pen: divider = #E8EDE8, 60x1 or 100%x1
   .pen: quote bar = primary, 2x60 vertical
   ------------------------------------------------------------------------- */

/* All separators: no border, flat */
.wp-block-separator {
    border: none !important;
    opacity: 1 !important;
}

/* Decorative: primary-light, 60px x 2px
   .pen: mAGLe, Ew1FD */
.wp-block-separator.has-primary-light-background-color {
    width: 60px !important;
    max-width: 60px !important;
    height: 2px !important;
}

/* Divider: small (presentation), 60px x 1px
   .pen: EuJDO */
.wp-block-separator.has-divider-background-color {
    width: 60px !important;
    max-width: 60px !important;
    height: 1px !important;
}

/* Divider: full-width (footer), 100% x 1px
   .pen: K6OhJ */
.wp-block-separator.is-style-wide {
    width: 100% !important;
    max-width: 100% !important;
    height: 1px !important;
}

/* Centered separators in centered flex */
.is-content-justification-center > .wp-block-separator {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Left-aligned separators (default) */
.is-layout-flex:not(.is-content-justification-center) > .wp-block-separator {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Vertical quote bar
   .pen: N91nY — rectangle, primary, width 2, height 60
   Context: horizontal flex (not vertical) */
.wp-block-group.is-layout-flex:not(.is-vertical)
    > .wp-block-separator.has-primary-background-color {
    width: 2px !important;
    max-width: 2px !important;
    min-width: 2px !important;
    min-height: 60px !important;
    height: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------
   MAX-WIDTH constraints via CSS classes
   .pen: subtext 520, quote 440, presentation 800, body 740
   .pen: CTA title 700, desc 600, quote 500, section-title 800
   ------------------------------------------------------------------------- */
.emma-hero-subtext {
    max-width: 520px;
}
.emma-hero-quote-text {
    max-width: 440px;
}
.emma-presentation-content {
    max-width: 800px;
}
.emma-section-title {
    max-width: 800px;
}
.emma-cta-title {
    max-width: 700px;
}
.emma-cta-desc {
    max-width: 600px;
}
.emma-cta-quote-text {
    max-width: 500px;
}

/* Quote bar container */
.emma-hero-quote > .wp-block-separator {
    width: 2px !important;
    max-width: 2px !important;
    min-width: 2px !important;
    min-height: 60px !important;
    height: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------
   ICON BADGE — .pen: O21IB — circle primary 48x48, radius 24, icon 24 white
   Used via wp:html blocks with inline SVG
   ------------------------------------------------------------------------- */
.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 24px;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
}

/* Inverted variant — .pen: contact cards, bg-light circle, primary icon */
.icon-badge--inverted {
    background-color: var(--wp--preset--color--bg-light);
    color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   MOBILE MENU — off-canvas from right
   Ported 1:1 from prototype/style.css
   Visible at <=1024px, hidden on desktop
   ------------------------------------------------------------------------- */

/* Burger — hidden on desktop */
.emma-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.emma-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--wp--preset--color--text-dark, #1e3322);
    border-radius: 1px;
    transition:
        transform 0.3s,
        opacity 0.3s;
}

/* Burger → X */
.emma-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.emma-burger.is-open span:nth-child(2) {
    opacity: 0;
}
.emma-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay */
.emma-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s;
}

.emma-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* Off-canvas panel — slides from right */
.emma-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background-color: var(--wp--preset--color--bg-white, #ffffff);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 80px 40px 40px;
    display: flex;
    flex-direction: column;
}

.emma-offcanvas.is-open {
    transform: translateX(0);
}

/* Off-canvas links */
.emma-offcanvas__links {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.emma-offcanvas__links li::before {
    display: none;
}

.emma-offcanvas__links a {
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--wp--preset--color--text-dark, #1e3322);
    text-decoration: none;
    transition: color 0.2s;
}

.emma-offcanvas__links a:hover {
    color: var(--wp--preset--color--primary, #1d8644);
}

/* Tablet portrait: show burger, hide desktop nav */
@media (max-width: 1024px) {
    .emma-burger {
        display: flex;
    }
    .emma-nav__desktop {
        display: none !important;
    }
    .emma-nav {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 768px) {
    .emma-nav {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* -------------------------------------------------------------------------
   NAVIGATION — theme.json sets typo, this handles hover/active
   .pen: EXxmc — active link = primary
   ------------------------------------------------------------------------- */
.wp-block-navigation a {
    text-decoration: none;
}
.wp-block-navigation a:hover {
    color: var(--wp--preset--color--primary) !important;
}
.wp-block-navigation a[aria-current="page"] {
    color: var(--wp--preset--color--primary) !important;
}

/* -------------------------------------------------------------------------
   NAVIGATION SUBMENU — dropdown panel
   .pen: Dg8TD — fill bg-white, cornerRadius 4, padding [12,20], gap 4, stroke divider 1px
   .pen: Zg1TS/Dcohb — Inter 13/500, letter-spacing 1px
   ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--bg-white) !important;
    border: 1px solid var(--wp--preset--color--divider) !important;
    border-radius: 4px !important;
    padding: 12px 20px !important;
    gap: 4px !important;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* .pen: Zg1TS — Inter 13/500, letter-spacing 1px */
.wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    padding: 4px 0 !important;
}

/* .pen: Dcohb — active submenu item = primary */
.wp-block-navigation
    .wp-block-navigation__submenu-container
    a[aria-current="page"] {
    color: var(--wp--preset--color--primary) !important;
}

/* -------------------------------------------------------------------------
   IMAGES — object-fit, theme.json can't do this
   .pen: gcNur — hero image 580x620, object-fit cover
   .pen: uhdAD — card image height 220, object-fit cover
   ------------------------------------------------------------------------- */
.emma-hero-image {
    width: 100%;
    flex: 0 0 auto;
}

.emma-hero-image img {
    width: 100%;
    height: var(--emma-hero-img-h);
    object-fit: cover;
    border-radius: 4px;
}

.emma-card-image {
    width: 100%;
    align-self: stretch;
}

.emma-card-image img {
    width: 100%;
    height: var(--emma-card-img-h);
    object-fit: cover;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   CTA BUTTON with phone icon — SVG pseudo-element
   .pen: gWCmg — gap 12, icon phone 20x20 white
   Add class "emma-cta-phone" on the Buttons block
   ------------------------------------------------------------------------- */
.wp-block-button__link:hover {
    cursor: pointer;
}
.emma-cta-phone .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.emma-cta-phone .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
   LIST — small dots for formation list
   theme.json handles 10px dots via core/list block CSS
   This targets the smaller 8px dots for text-muted formation lists
   .pen: formation dots = ellipse primary 8x8
   ------------------------------------------------------------------------- */
.wp-block-list.has-text-muted-color li::before {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    margin-top: 7px !important;
}

/* -------------------------------------------------------------------------
   MAX-WIDTH constraints — theme.json can't target specific content
   .pen: hero subtext width 520, quote text width 440
   .pen: presentation content width 800, body width 740
   .pen: CTA title width 700, desc width 600, quote width 500
   Applied via "max-width" inline style in block editor or via classes
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   MOBILE MENU — off-canvas (not possible in theme.json)
   Requires custom header template part with burger markup
   TODO: implement when header is built
   ------------------------------------------------------------------------- */

/* Equal-height cards in columns — cards fill their column height
   Fixes: badge cards taller than non-badge siblings */
.wp-block-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns > .wp-block-column > .wp-block-group {
    flex: 1;
}

/* Responsive line break — visible desktop, hidden mobile
   Usage: Shift+Enter in Gutenberg adds <br>, add class "emma-br-desktop"
   on the heading block to hide <br> on small screens */
@media (max-width: 768px) {
    .emma-br-desktop br {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   INNER PAGE SECTIONS — methode cards, step cards, bienfait cards
   Ported from prototype/style.css (validated via pipeline reviewer)
   ------------------------------------------------------------------------- */

/* Icon badge 56px variant for methode/approche cards
   .pen: 2ava7, QVOXP — 56x56, cornerRadius 28 */
.icon-badge.emma-icon-56 {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 28px;
}

/* Section intro paragraph — centered, max-width 700
   .pen: m0urk, x9mtm, eymmC, gQ8iR, HUwmy, Bj43q */
.emma-section-intro {
    max-width: 700px;
}

/* Step number — Inter 12/600, letter-spacing 1.5, primary-light
   .pen: YUaig, mnHZS */
.emma-step-num {
    font-weight: 600 !important;
    letter-spacing: 1.5px;
}

/* Rounded image overflow hidden
   .pen: 3lHrS, 1xkFx — cornerRadius 4 */
.emma-rounded-4 img {
    border-radius: 4px;
}

/* Hero inner page gap override — 60px instead of default
   .pen: UXV7s, h0vOY */
.emma-hero-inner {
    gap: 60px !important;
}

/* -------------------------------------------------------------------------
   HERO CONTACT — image height variant
   .pen: H3uoo — width 580, height 520 (vs 620 on accueil)
   ------------------------------------------------------------------------- */
.emma-hero-image--contact img {
    height: var(--emma-hero-contact-img-h);
}

/* -------------------------------------------------------------------------
   CONTACT — RDV sub-section image
   .pen: jlN99 — width 480, height 340, cornerRadius 4, image fill
   ------------------------------------------------------------------------- */
.emma-contact-rdv-image {
    width: var(--emma-rdv-img-w);
    min-width: var(--emma-rdv-img-w);
    flex-shrink: 0;
}

.emma-contact-rdv-image img {
    width: 100%;
    height: var(--emma-rdv-img-h);
    object-fit: cover;
    border-radius: 4px;
}

/* RDV button with calendar-check icon
   .pen: 8EMtv — gap 10, icon calendar-check 18x18 white */
.emma-btn-icon-calendar .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.emma-btn-icon-calendar .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
   CONTACT — FORMULAIRE
   .pen: cNElJ — form elements, Gutenberg doesn't have native form blocks
   Prefixed emma- to avoid collision with prototype classes
   ------------------------------------------------------------------------- */

/* .pen: icxRJ — form intro, max-width 600 */
.emma-contact-form-intro {
    max-width: 600px;
}

/* .pen: 3laEY — layout vertical, gap 24, width 700 */
.emma-contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 700px;
    max-width: 100%;
}

/* .pen: UnAs2, 67k9e — horizontal, gap 24 */
.emma-contact-form__row {
    display: flex;
    gap: 24px;
}

/* .pen: yWOIr — layout vertical, gap 8, width fill_container */
.emma-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* .pen: 1rzzw — Inter 13/500, text-dark */
.emma-contact-form__label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    font-weight: 500;
    color: var(--wp--preset--color--text-dark);
}

/* .pen: IF9xS — bg-light, cornerRadius 4, padding [14,16], stroke divider 1px */
.emma-contact-form__input,
.emma-contact-form__textarea {
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--text-dark);
    background-color: var(--wp--preset--color--bg-light);
    border: 1px solid var(--wp--preset--color--divider);
    border-radius: 4px;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s;
}

.emma-contact-form__input::placeholder,
.emma-contact-form__textarea::placeholder {
    color: var(--wp--preset--color--text-muted);
}

.emma-contact-form__input:focus,
.emma-contact-form__textarea:focus {
    border-color: var(--wp--preset--color--primary);
}

/* .pen: biOeV — select with chevron */
.emma-contact-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* .pen: gvV3P — height 160 */
.emma-contact-form__textarea {
    height: 160px;
    resize: vertical;
}

/* .pen: aePwn — fill primary, cornerRadius 4, gap 10, padding [16,40], full width, center */
.emma-contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 40px;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.emma-contact-form__submit:hover {
    opacity: 0.9;
}
.emma-contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   FULL-WIDTH utility — force block to fill parent width in flex layouts
   Used on columns and groups that need to stretch inside flex containers
   ------------------------------------------------------------------------- */
.emma-full-width {
    width: 100%;
    align-self: stretch;
}

/* -------------------------------------------------------------------------
   CONTACT FORM — validation & feedback states
   ------------------------------------------------------------------------- */

/* Field error highlight */
.emma-contact-form .emma-contact-form__input--error,
.emma-contact-form .emma-contact-form__textarea--error {
    border-color: var(--wp--preset--color--accent-coral);
}

/* Inline error message under field */
.emma-contact-form__error {
    font-family: var(--wp--preset--font-family--body);
    font-size: 12px;
    font-weight: 500;
    color: var(--wp--preset--color--accent-coral);
    margin-top: 4px;
}

/* Form feedback message (success / error) */
.emma-form-message {
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    padding: 16px 24px;
    border-radius: 4px;
    text-align: center;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.emma-form-message--success {
    background-color: var(--wp--preset--color--bg-light);
    color: var(--wp--preset--color--primary);
    border: 1px solid var(--wp--preset--color--primary);
}

.emma-form-message--error {
    background-color: var(--wp--preset--color--bg-error);
    color: var(--wp--preset--color--accent-coral);
    border: 1px solid var(--wp--preset--color--accent-coral);
}

/* Turnstile widget container */
#emma-turnstile {
    display: flex;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   COLLAB — icon badge white bg variant
   .pen: WPymS — 56x56, cornerRadius 28, bg white, icon primary
   ------------------------------------------------------------------------- */
.emma-icon-badge-white {
    background-color: var(--wp--preset--color--bg-white);
    color: var(--wp--preset--color--primary);
}

/* Collab CTA button — white-space nowrap to keep on one line */
.emma-collab-cta-btn .wp-block-button__link {
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   CURES — Tabs component
   .pen: yovka/1xPsg — interactive tabs for Cures page
   Ported from prototype/style.css (pipeline reviewer validated)
   ------------------------------------------------------------------------- */

/* .pen: 1xPsg — tabsContainer, horizontal */
.emma-tabs {
    display: flex;
    width: 100%;
}

/* .pen: j0QuM — tabsList, vertical, fill bg-light, cornerRadius [12,0,0,12], width 320 */
.emma-tabs__list {
    display: flex;
    flex-direction: column;
    width: var(--emma-tabs-sidebar-w);
    min-width: var(--emma-tabs-sidebar-w);
    background-color: var(--wp--preset--color--bg-light);
    border-radius: 12px 0 0 12px;
}

/* .pen: nFtGj — tab (inactive), padding [24,28], gap 16, alignItems center, stroke bottom divider 1px */
.emma-tabs__tab {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid var(--wp--preset--color--divider);
    text-align: left;
    font-family: inherit;
}

/* .pen: DlO3x — tab-active, fill primary, cornerRadius [12,0,0,0] */
.emma-tabs__tab--active {
    background-color: var(--wp--preset--color--primary);
    border-bottom-color: transparent;
}

.emma-tabs__tab:first-child {
    border-radius: 12px 0 0 0;
}

.emma-tabs__tab:last-child {
    border-radius: 0 0 0 12px;
    border-bottom: none;
}

/* .pen: fi8ri — icon bg, fill white, 40x40, cornerRadius 20 */
.emma-tabs__tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 20px;
    background-color: var(--wp--preset--color--bg-white);
    color: var(--wp--preset--color--primary);
}

/* .pen: CKfVA — icon bg active, fill #FFFFFF22 */
.emma-tabs__tab--active .emma-tabs__tab-icon {
    background-color: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

/* .pen: oRAyP — Inter 15/500, text-dark */
.emma-tabs__tab-label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    color: var(--wp--preset--color--text-dark);
}

/* .pen: 6Ffej — Inter 15/600, white */
.emma-tabs__tab--active .emma-tabs__tab-label {
    font-weight: 600;
    color: #ffffff;
}

/* Panels container */
.emma-tabs__panels {
    flex: 1;
}

/* .pen: 0Yfoc — contentPanel, fill bg-white, vertical, gap 32, padding [48,56], cornerRadius [0,12,12,0], stroke divider 1px */
.emma-tabs__panel {
    display: none;
    flex-direction: column;
    gap: 32px;
    padding: 48px 56px;
    background-color: var(--wp--preset--color--bg-white);
    border: 1px solid var(--wp--preset--color--divider);
    border-left: none;
    border-radius: 0 12px 12px 0;
    height: 100%;
}

.emma-tabs__panel--active {
    display: flex;
}

/* .pen: yEws9 — titleRow, horizontal, gap 16, center */
.emma-tabs__panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* .pen: pfdu9 — Newsreader 28/600, text-dark */
.emma-tabs__panel-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--wp--preset--color--text-dark);
    margin: 0;
}

/* .pen: YQ3oA — Inter 15, line-height 1.6, text-body */
.emma-tabs__panel-desc {
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-body);
    margin: 0;
}

/* .pen: 7y8zW — objBox, fill #EFF7EF, cornerRadius 12, padding [24,28], gap 12, vertical */
.emma-tabs__obj-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 28px;
    background-color: #eff7ef;
    border-radius: 12px;
}

/* .pen: 8FBUc — Inter 12/700, letter-spacing 1.5, primary */
.emma-tabs__obj-label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--wp--preset--color--primary);
}

/* .pen: fIzwa — Inter 14, line-height 1.6, text-body */
.emma-tabs__obj-text {
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-body);
    margin: 0;
}

/* .pen: TUMZ2 — techSection, vertical, gap 14 */
.emma-tabs__tech {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* .pen: 7Q68X — Newsreader 18/600, text-dark */
.emma-tabs__tech-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--wp--preset--color--text-dark);
    margin: 0;
}

/* .pen: V7KNZ — pillsRow, horizontal, gap 10 */
.emma-tabs__pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* .pen: ahGRP — pill, fill primary-light, cornerRadius 20, padding [8,16] */
/* .pen: cjsmy — Inter 13/500, white */
.emma-tabs__pill {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--wp--preset--color--primary-light);
    border-radius: 20px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

/* .pen: su5rt — Inter 14, text-muted */
.emma-tabs__session-info {
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--text-muted);
    margin: 0;
}

/* .pen: e7XsF — ctaBtn, fill primary, cornerRadius 10, padding [16,32] */
/* .pen: yjor8 — Inter 15/600, white */
.emma-tabs__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    border-radius: 10px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.2s;
}

.emma-tabs__cta-btn:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* -------------------------------------------------------------------------
   RESPONSIVE — CSS custom properties system
   Breakpoints: 1024px (tablet), 768px (mobile), 576px (small)
   Variables change per breakpoint, rules reference them once.
   ------------------------------------------------------------------------- */

/* --- Responsive tokens (images & components) --- */
:root {
    --emma-hero-img-h: 620px;
    --emma-hero-contact-img-h: 520px;
    --emma-card-img-h: 220px;
    --emma-rdv-img-w: 480px;
    --emma-rdv-img-h: 340px;
    --emma-tabs-sidebar-w: 320px;
}

@media (max-width: 1024px) {
    :root {
        --emma-hero-img-h: 480px;
        --emma-hero-contact-img-h: 400px;
        --emma-rdv-img-w: 360px;
        --emma-rdv-img-h: 280px;
        --emma-tabs-sidebar-w: 260px;
    }
}

@media (max-width: 768px) {
    :root {
        --emma-hero-img-h: 300px;
        --emma-hero-contact-img-h: 300px;
        --emma-card-img-h: 180px;
        --emma-rdv-img-w: 100%;
        --emma-rdv-img-h: 240px;
    }
}

/* --- Padding responsive ---
   Spacing presets (gutter, gutter-narrow, section-py, footer-py) are defined
   in theme.json with clamp() values. Patterns reference them via
   var:preset|spacing|gutter etc. — Gutenberg generates the inline styles.
   NO !important overrides here — the user controls padding per-section
   directly in the Gutenberg spacing panel.
   --------------------------------------------------------------------- */

/* Images & tabs now use variables defined above — heights/widths
   react automatically to breakpoint changes via :root overrides */

/* --- Tablet (1024px) — component adjustments --- */
@media (max-width: 1024px) {
    .emma-tabs__panel {
        padding: 36px 40px;
    }
}

/* --- Mobile (768px) — layout shifts --- */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column !important;
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Contact RDV — stack */
    .emma-contact-rdv {
        flex-direction: column !important;
    }

    /* Contact form — stack rows */
    .emma-contact-form {
        width: 100%;
    }
    .emma-contact-form__row {
        flex-direction: column;
    }

    /* Collab CTA — stack */
    .emma-collab-cta {
        flex-direction: column !important;
        text-align: center;
    }
    .emma-collab-cta-btn .wp-block-button__link {
        width: 100%;
    }

    /* Tabs — stack vertically, tabs list in column */
    .emma-tabs {
        flex-direction: column;
    }
    .emma-tabs__list {
        flex-direction: column;
        width: 100%;
        min-width: 100%;
        border-radius: 12px 12px 0 0;
    }
    .emma-tabs__tab {
        flex-direction: row;
        gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--wp--preset--color--divider);
        border-right: none;
        text-align: left;
    }
    .emma-tabs__tab:first-child {
        border-radius: 12px 12px 0 0;
    }
    .emma-tabs__tab:last-child {
        border-radius: 0;
        border-bottom: none;
    }
    .emma-tabs__tab-label {
        font-size: 14px;
    }
    .emma-tabs__tab-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .emma-tabs__panel {
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--wp--preset--color--divider);
        border-top: none;
        padding: 32px var(--wp--preset--spacing--gutter-narrow);
    }

    /* CTA button full-width */
    .emma-cta-phone .wp-block-button__link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Footer — stack all rows */
    .emma-footer .is-layout-flex:not(.is-vertical) {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .emma-footer .is-content-justification-space-between {
        align-items: flex-start !important;
        gap: 8px !important;
    }
}