/*
 * Layout — en-tête, navigation, pied de page, structures de page communes
 * (hero, breadcrumb, bouton flottant WhatsApp).
 */

/* ---------- Topbar ---------- */
.topbar {
    background: var(--color-navy-900);
    color: var(--color-text-on-dark-muted);
    font-size: var(--fs-xs);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}
.topbar__contacts { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.topbar__contacts a { color: var(--color-text-on-dark); }
.topbar__contacts a:hover { color: var(--color-white); }
.topbar__social { display: flex; gap: var(--space-3); }
.topbar__social a {
    color: var(--color-text-on-dark);
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
}
.topbar__social a:hover { background: rgba(255,255,255,0.18); color: var(--color-white); }
@media (max-width: 768px) {
    .topbar__social { display: none; }
}

/* ---------- Site header / nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: var(--header-height);
}
.main-nav__brand { flex: none; }
.main-nav__brand img { height: 40px; width: auto; }
.main-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    justify-content: center;
}
.main-nav__links > li { position: relative; }
.main-nav__links a.nav-link {
    color: var(--color-navy-900);
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: var(--space-2) 0;
    white-space: nowrap;
}
.main-nav__links a.nav-link:hover,
.main-nav__links a.nav-link.is-active { color: var(--color-gold-700); }

.nav-dropdown { position: relative; }
.nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-navy-900);
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}
.nav-dropdown[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    min-width: 240px;
    z-index: 950;
}
.nav-dropdown__menu li a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-navy-800);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.nav-dropdown__menu li a:hover { background: var(--color-surface-alt); color: var(--color-gold-700); }

.main-nav__actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.main-nav__phone {
    display: flex; align-items: center; gap: var(--space-2);
    font-weight: 700; color: var(--color-navy-900); font-size: var(--fs-sm);
    white-space: nowrap;
}
.main-nav__toggle {
    display: none;
    border: none; background: none; cursor: pointer;
    width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
}
.main-nav__toggle span, .main-nav__toggle::before, .main-nav__toggle::after {
    content: ""; display: block; width: 22px; height: 2px; background: var(--color-navy-900);
    position: relative; transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.main-nav__toggle::before { position: absolute; transform: translateY(-7px); }
.main-nav__toggle::after { position: absolute; transform: translateY(7px); }
.main-nav.is-open .main-nav__toggle span { opacity: 0; }
.main-nav.is-open .main-nav__toggle::before { transform: rotate(45deg); }
.main-nav.is-open .main-nav__toggle::after { transform: rotate(-45deg); }

@media (max-width: 992px) {
    .main-nav__toggle { display: inline-flex; }
    .main-nav__links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--color-surface);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: var(--shadow-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-normal);
    }
    .main-nav.is-open .main-nav__links { max-height: 80vh; overflow-y: auto; }
    .main-nav__links > li { border-top: 1px solid var(--color-border); }
    .main-nav__links a.nav-link { display: block; padding: var(--space-4) var(--space-5); }
    .nav-dropdown > summary { padding: var(--space-4) var(--space-5); }
    .nav-dropdown__menu {
        position: static; transform: none; box-shadow: none; padding: 0 0 var(--space-3) var(--space-5);
        background: var(--color-surface-alt);
    }
    .main-nav__phone { display: none; }
}

/* ---------- Hero ---------- */
/* Image fixe unique (pas de diaporama), hauteur contenue, formulaire de
   devis rapide à droite — plus proche des sites B2B industriels sérieux
   que d'une bannière plein écran façon landing page. */
.hero {
    position: relative;
    color: var(--color-white);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(24,18,8,0.90) 0%, rgba(24,18,8,0.68) 48%, rgba(24,18,8,0.35) 100%);
}
.hero__grid {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
    align-items: center;
    min-height: 420px;
    padding: var(--space-7) 0;
}
.hero__content { max-width: 560px; }
.hero__eyebrow {
    text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs);
    font-weight: 700; color: var(--color-text-on-dark-muted); margin-bottom: var(--space-3); display: block;
}
.hero__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--color-white); margin-bottom: var(--space-4); }
.hero__lead { color: var(--color-text-on-dark-muted); font-size: var(--fs-md); margin-bottom: var(--space-6); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Formulaire de devis rapide, carte claire posée sur l'image */
.hero__quickform {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    color: var(--color-text);
}
.hero__quickform h2 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-1);
}
.hero__quickform .hero__quickform-sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.hero__quickform .form-field { margin-bottom: var(--space-3); }
.hero__quickform .form-field label { font-size: var(--fs-xs); margin-bottom: 4px; }
.hero__quickform .form-field input,
.hero__quickform .form-field select,
.hero__quickform .form-field textarea { padding: 10px 12px; font-size: var(--fs-xs); }

@media (max-width: 992px) {
    .hero__grid { grid-template-columns: 1fr; min-height: 0; padding: var(--space-6) 0; }
    .hero__content { max-width: none; }
}

/* Hero simple (page institutionnelle) */
.page-hero {
    position: relative; color: var(--color-white);
    min-height: 280px; display: flex; align-items: flex-end;
    background-size: cover; background-position: center;
}
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,18,8,0.50), rgba(24,18,8,0.82)); }
.page-hero__inner { position: relative; z-index: 2; padding-bottom: var(--space-6); width: 100%; }
.page-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-on-dark-muted); }
.page-hero__title { color: var(--color-white); margin: var(--space-2) 0 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }

.breadcrumb {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    font-size: var(--fs-xs);
}
.breadcrumb ol { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--color-gray-400); }
.breadcrumb li:last-child { color: var(--color-text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-900); color: var(--color-text-on-dark-muted); }
.site-footer__top { padding: var(--space-8) 0; }
.site-footer h6 {
    color: var(--color-white); text-transform: uppercase; letter-spacing: 0.06em;
    font-size: var(--fs-xs); margin-bottom: var(--space-4);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.site-footer a { color: var(--color-text-on-dark-muted); }
.site-footer a:hover { color: var(--color-white); }
.footer-contact-list li { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); align-items: flex-start; }
.footer-contact-list .icon { color: var(--color-text-on-dark-muted); flex: none; width: 18px; text-align: center; }
.footer-links li { margin-bottom: var(--space-2); }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-4) 0;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    font-size: var(--fs-xs);
}
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: inline-flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: rgba(255,255,255,0.18); color: var(--color-white); }
@media (max-width: 992px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------- Bouton flottant WhatsApp ---------- */
.whatsapp-float {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: #25d366;
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    font-weight: 700;
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.whatsapp-float.is-visible { opacity: 1; transform: translateY(0); }
.whatsapp-float:hover { color: var(--color-white); filter: brightness(1.06); }
.whatsapp-float__icon { font-size: 1.3em; line-height: 1; }
@media (max-width: 640px) {
    .whatsapp-float span:not(.whatsapp-float__icon) { display: none; }
    .whatsapp-float { padding: var(--space-3); }
}