/* ============================================================
   MENU DU SITE (js/site-menu.js) — commun à toutes les pages.
   Autonome : ne dépend pas de Tailwind.
   ============================================================ */

/* ---------- Bouton « Menu » ---------- */
.sm-trigger {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #a8e8ff; background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.25);
    border-radius: 999px; padding: 0.5rem 0.95rem; cursor: pointer; line-height: 1;
    transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.sm-trigger:hover, .sm-trigger:focus-visible { background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.55); color: #e4e1ed; box-shadow: 0 0 24px rgba(0,212,255,0.15); }
.sm-trigger:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; }
.sm-trigger .sm-burger { display: inline-flex; flex-direction: column; gap: 3px; }
.sm-trigger .sm-burger i { display: block; width: 14px; height: 1.5px; background: currentColor; border-radius: 2px; }
.sm-trigger .sm-burger i:nth-child(2) { width: 10px; }
/* Bouton rond seul (hamburger mobile de l'accueil) */
.sm-trigger.sm-round { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; background: rgba(19,19,27,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sm-trigger.sm-round .sm-burger i { width: 18px; }
.sm-trigger.sm-round .sm-burger i:nth-child(2) { width: 12px; }

/* ---------- Overlay ---------- */
.site-menu {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(13,13,20,0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    font-family: 'Inter', sans-serif; color: #e4e1ed;
}
.site-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease, visibility 0s; }
html.site-menu-open, html.site-menu-open body { overflow: hidden; }

.sm-inner { max-width: 68rem; min-height: 100%; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; display: flex; flex-direction: column; }
.sm-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sm-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; color: #e4e1ed; text-decoration: none; }
.sm-close {
    display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
    color: #bbc9cf; padding: 0.4rem 0.6rem 0.4rem 0.95rem; cursor: pointer;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    transition: color .2s, border-color .2s;
}
.sm-close:hover, .sm-close:focus-visible { color: #a8e8ff; border-color: rgba(0,212,255,0.5); }

.sm-grid { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-content: center; padding: 2.5rem 0 1rem; }
.sm-kicker { font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; letter-spacing: 0.35em; text-transform: uppercase; color: #a8e8ff; margin: 0 0 1rem; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }

/* Services */
.sm-service {
    display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; margin: 0 -1rem;
    border-radius: 0.9rem; text-decoration: none; border: 1px solid transparent;
    transition: background .25s, border-color .25s;
}
.sm-service .material-symbols-outlined { font-size: 1.5rem; color: #00d4ff; flex-shrink: 0; }
.sm-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.sm-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: #e4e1ed; letter-spacing: -0.01em; }
.sm-desc { font-size: 0.78rem; color: rgba(204,215,220,0.75); }
.sm-arrow { color: #00d4ff; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.sm-service:hover, .sm-service:focus-visible { background: rgba(0,212,255,0.06); border-color: rgba(0,212,255,0.2); }
.sm-service:hover .sm-arrow, .sm-service:focus-visible .sm-arrow { opacity: 1; transform: none; }
.sm-service[aria-current="page"] { background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); }
.sm-service[aria-current="page"] .sm-label { color: #a8e8ff; }

/* Pages */
.sm-page {
    display: block; padding: 0.7rem 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1rem, 2vw, 1.25rem); color: #e4e1ed;
    transition: color .2s, letter-spacing .3s, padding-left .3s;
}
.sm-page:hover, .sm-page:focus-visible { color: #a8e8ff; padding-left: 0.4rem; }
.sm-page[aria-current="page"] { color: #00d4ff; }
.sm-page[aria-current="page"]::after { content: ' ●'; font-size: 0.5em; vertical-align: middle; }

.sm-cta {
    display: inline-block; margin-top: 1.75rem; padding: 0.95rem 1.4rem; border-radius: 999px; text-decoration: none;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
    color: #00363f; background: #00d4ff; box-shadow: 0 0 30px rgba(0,212,255,0.25); transition: box-shadow .25s, transform .25s;
}
.sm-cta:hover, .sm-cta:focus-visible { box-shadow: 0 0 45px rgba(0,212,255,0.45); transform: translateY(-2px); }

.site-menu a:focus-visible, .site-menu button:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; }

/* Apparition en cascade */
.site-menu li, .site-menu .sm-cta, .site-menu .sm-kicker { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(0.23,1,0.32,1); }
.site-menu.open li, .site-menu.open .sm-cta, .site-menu.open .sm-kicker { opacity: 1; transform: none; transition-delay: calc(0.08s + var(--i, 0) * 0.04s); }
.site-menu.open .sm-kicker { transition-delay: 0.05s; }

@media (max-width: 760px) {
    .sm-grid { grid-template-columns: 1fr; gap: 2rem; align-content: start; padding-top: 1.75rem; }
    .sm-service { padding: 0.7rem 0.75rem; margin: 0 -0.75rem; }
    .sm-cta { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .site-menu, .site-menu li, .site-menu .sm-cta, .site-menu .sm-kicker { transition: none !important; }
}

/* Mobile : zone tactile du bouton « Menu » / « Fermer » agrandie à ~44 px sans changer la mise en page */
@media (max-width: 767px) {
    .sm-trigger, .sm-close { position: relative; }
    .sm-trigger::after, .sm-close::after { content: ''; position: absolute; inset: -6px -4px; }
}