/* TechnoCold - sticky contact buttons (see js/tc-contact.js).
 * Every class and id starts with "tc-" so nothing clashes with style.css.
 * Oswald is already loaded by style.css. */

:root {
    --tc-gap: 12px;                                  /* distance from the screen edges */
    --tc-safe: env(safe-area-inset-bottom, 0px);     /* iPhone home bar */
    --tc-dock-h: 92px;                               /* real value set by the script */
    --tc-fab-h: 52px;
    --tc-surface: #ffffff;
    --tc-text: #263845;
    --tc-shadow: 0 8px 28px rgba(6, 40, 60, .22), 0 2px 6px rgba(6, 40, 60, .12);
    --tc-focus: #0d2b3e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tc-surface: #16232c;
        --tc-text: #e3ecf1;
        --tc-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
        --tc-focus: #ffd166;
    }
}

.tc-ui,
.tc-ui * {
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.tc-ui .tc-icon {
    display: block;
    flex: none;
    width: 1em;
    height: 1em;
}

.tc-ui a:focus-visible,
.tc-ui button:focus-visible {
    outline: 3px solid var(--tc-focus);
    outline-offset: 2px;
}

/* Page padding so the buttons never cover the footer. */
html.tc-on .footer {
    padding-bottom: calc(var(--tc-dock-h) + var(--tc-fab-h) + 14px + 2 * var(--tc-gap) + var(--tc-safe));
}

/* ---------- Scrim (menu open) ---------- */
.tc-scrim {
    position: fixed;
    inset: 0;
    z-index: 1010;
    background: rgba(6, 40, 60, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

html.tc-open .tc-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}

/* ---------- A: bottom dock ---------- */
.tc-dock {
    position: fixed;
    left: var(--tc-gap);
    right: var(--tc-gap);
    bottom: calc(var(--tc-gap) + var(--tc-safe));
    z-index: 1011;
    max-width: 440px;
    margin: 0 auto;
    padding: 8px 10px 10px;
    background: var(--tc-surface);
    border-radius: 26px;
    box-shadow: var(--tc-shadow);
    transition: transform .3s ease, opacity .3s ease;
}

html.tc-dock-hidden .tc-dock,
html.tc-typing .tc-dock {
    transform: translateY(calc(100% + var(--tc-gap) + var(--tc-safe) + 12px));
    opacity: 0;
}

.tc-dock-note {
    margin: 0 0 7px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    color: var(--tc-text);
    letter-spacing: .02em;
}

.tc-dock-row {
    display: flex;
    gap: 8px;
}

.tc-ui .tc-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;
    transition: background-color .2s ease;
}

.tc-ui .tc-btn:hover,
.tc-ui .tc-btn:focus,
.tc-ui .tc-btn:active {
    color: #ffffff;
    text-decoration: none;
}

.tc-ui .tc-btn .tc-icon {
    font-size: 18px;
}

.tc-ui .tc-btn-quote { background: #c2410c; }
.tc-ui .tc-btn-quote:hover { background: #9a3412; }
.tc-ui .tc-btn-rdv { background: #0a7dba; }
.tc-ui .tc-btn-rdv:hover { background: #06496d; }

/* ---------- B: "Urgence 24h/24" button and menu ---------- */
.tc-help {
    position: fixed;
    right: var(--tc-gap);
    bottom: calc(var(--tc-gap) + var(--tc-safe) + var(--tc-dock-h) + 14px);
    z-index: 1012;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: bottom .3s ease;
}

html.tc-dock-hidden .tc-help,
html.tc-typing .tc-help,
html.tc-no-dock .tc-help {
    bottom: calc(var(--tc-gap) + var(--tc-safe));
}

.tc-ui .tc-fab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: var(--tc-fab-h);
    padding: 0 20px 0 18px;
    border: 0;
    border-radius: 999px;
    background: #06496d;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--tc-shadow);
    transition: background-color .2s ease;
}

.tc-ui .tc-fab:hover { background: #04364f; }
html.tc-open .tc-ui .tc-fab { background: #0d2b3e; }

.tc-ui .tc-fab .tc-icon { font-size: 20px; }
.tc-ui .tc-ico-close { display: none; }
html.tc-open .tc-ui .tc-ico-open { display: none; }
html.tc-open .tc-ui .tc-ico-close { display: block; }

.tc-menu {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

html.tc-open .tc-menu { pointer-events: auto; }

.tc-menu li {
    --tc-delay: 0s;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Opens bottom-up: "Appeler" first. */
.tc-menu li:nth-child(3) { --tc-delay: 0s; }
.tc-menu li:nth-child(2) { --tc-delay: .05s; }
.tc-menu li:nth-child(1) { --tc-delay: .1s; }

html.tc-open .tc-menu li {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease var(--tc-delay), transform .2s ease var(--tc-delay), visibility 0s linear var(--tc-delay);
}

.tc-ui .tc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding-right: 2px;
    text-decoration: none;
}

.tc-ui .tc-item:hover,
.tc-ui .tc-item:focus { text-decoration: none; }

.tc-item-label {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--tc-surface);
    color: var(--tc-text);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .02em;
    box-shadow: var(--tc-shadow);
}

.tc-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 22px;
    box-shadow: var(--tc-shadow);
}

.tc-c-mail { background: #44586a; }
.tc-c-wa { background: #128c4a; }
.tc-c-tel { background: #0a7dba; }
.tc-c-wa .tc-icon { font-size: 26px; }

/* ---------- C: teaser bubble ---------- */
.tc-teaser {
    position: absolute;
    right: 0;
    bottom: calc(var(--tc-fab-h) + 12px); /* just above the button, not above the hidden menu */
    max-width: calc(100vw - 2 * var(--tc-gap));
    padding: 9px 14px;
    border-radius: 14px;
    background: #0d2b3e;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--tc-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s ease, visibility 0s linear .4s;
}

.tc-teaser::after {
    content: "";
    position: absolute;
    right: 28px;
    top: 100%;
    border: 7px solid transparent;
    border-top-color: #0d2b3e;
}

.tc-teaser.tc-show {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease;
}

/* ---------- E-mail address links (header, footer, contact page) ---------- */
a.tc-mail-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.tc-mail-link:hover,
a.tc-mail-link:focus-visible {
    text-decoration-thickness: 2px;
}

/* ---------- Phones and tablets (below 992px, where the menu bar collapses) ---------- */
@media (max-width: 991.98px) {
    /* While typing (on-screen keyboard open), the Urgence button steps aside too. */
    html.tc-typing .tc-help {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ---------- Desktop (992px and above, same breakpoint as the menu bar) ---------- */
@media (min-width: 992px) {
    :root {
        --tc-gap: 24px;
        --tc-fab-h: 56px;
    }

    /* No bottom dock on desktop: "Demander un Devis" and "RDV gratuit" are in the menu bar.
     * To show the dock on desktop too, delete this rule. */
    .tc-dock { display: none !important; }

    /* "RDV gratuit" added by the script next to "Demander un Devis". */
    .nav-bar .tc-nav-rdv { margin-right: 10px; }

    .tc-help,
    html.tc-dock-hidden .tc-help {
        bottom: calc(var(--tc-gap) + var(--tc-safe));
    }

    html.tc-on .footer {
        padding-bottom: calc(var(--tc-fab-h) + 2 * var(--tc-gap) + var(--tc-safe));
    }

    /* Bigger on large screens. */
    .tc-ui .tc-fab { gap: 10px; padding: 0 24px 0 20px; font-size: 18px; }
    .tc-ui .tc-fab .tc-icon { font-size: 22px; }
    .tc-menu { gap: 14px; margin-bottom: 14px; }
    .tc-item-label { padding: 9px 16px; font-size: 17px; }
    .tc-item-icon { width: 54px; height: 54px; font-size: 24px; }
    .tc-c-wa .tc-icon { font-size: 28px; }
    .tc-teaser { padding: 11px 16px; font-size: 16px; }
}

/* ---------- Reduced motion: no animation at all ---------- */
@media (prefers-reduced-motion: reduce) {
    .tc-ui,
    .tc-ui * {
        transition: none !important;
        animation: none !important;
    }
    .tc-menu li { transform: none; }
}

@media print {
    .tc-ui { display: none !important; }
}