/* =========================================================
   AIROBI — construction.css (chargé par site-en-construction.html)
   Design system vitrine : fond #FFFBF5 · texte #101828 ·
   vert #0E7A5A · jaune #FDB813 · sombre #0F172A. Sora + Inter.
   Autonomous : zéro dépendance à landing.css (ne casse rien).
   ========================================================= */
:root {
    --bg: #FFFBF5;
    --text: #101828;
    --vert: #0E7A5A;
    --vert-fonce: #0A5C45;
    --jaune: #FDB813;
    --sombre: #0F172A;
    --bordure: #E8E2D9;
    --muted: #5B6472;
    --r-lg: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; padding: 0;
    min-height: 100vh; min-height: 100dvh;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px; line-height: 1.65;
    display: flex; flex-direction: column;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(14,122,90,.2); }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: fixed; left: 16px; top: -64px; z-index: 200; background: var(--sombre); color: #fff; border-radius: 10px; padding: .7rem 1.2rem; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 14px; }

/* ---------- Décor : halos du hero vitrine ---------- */
.constr-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.constr-bg .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.constr-bg .b1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(14,122,90,.14), transparent 65%); top: -160px; left: -140px; }
.constr-bg .b2 { width: 440px; height: 440px; background: radial-gradient(circle, rgba(253,184,19,.18), transparent 65%); bottom: -160px; right: -140px; }
@media (max-width: 640px) {
    .constr-bg .b1 { width: 300px; height: 300px; }
    .constr-bg .b2 { width: 280px; height: 280px; }
}

/* ---------- Layout ---------- */
.constr-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 64px) 20px; text-align: center; }
.constr-card { width: 100%; max-width: 620px; }

/* ---------- Logo ---------- */
.constr-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.constr-logo .logo-carre { width: 46px; height: 46px; border-radius: 12px; background: var(--vert); color: #fff; font-family: 'Sora', Arial, sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 8px 18px rgba(14,122,90,.3); }
.constr-logo .logo-carre::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); }
.constr-logo .logo-word { font-family: 'Sora', Arial, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.5px; }

/* ---------- Illustration : écran "en maintenance" (CSS pur, zéro image) ---------- */
.constr-illus { position: relative; max-width: 420px; margin: 0 auto 36px; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.screen { background: var(--sombre); border-radius: 18px; padding: 14px 14px 18px; box-shadow: 0 24px 60px rgba(15,23,42,.25), 0 4px 14px rgba(15,23,42,.12); }
.screen-bar { display: flex; align-items: center; gap: 6px; padding: 0 4px 12px; }
.screen-bar i { width: 10px; height: 10px; border-radius: 50%; }
.screen-bar i:nth-child(1) { background: #f87171; }
.screen-bar i:nth-child(2) { background: #fbbf24; }
.screen-bar i:nth-child(3) { background: #34d399; }
.screen-bar .url { margin-left: auto; color: #7c8db0; font-size: 10px; font-family: monospace; background: rgba(255,255,255,.06); padding: 3px 10px; border-radius: 6px; }
.screen-body { position: relative; background: #16213a; border-radius: 12px; padding: 18px 16px 16px; min-height: 190px; overflow: hidden; }
/* Lignes "skeleton" du dashboard en construction */
.sk { border-radius: 6px; background: rgba(255,255,255,.08); height: 12px; }
.sk.s1 { width: 55%; margin-bottom: 12px; background: rgba(253,184,19,.35); }
.sk.s2 { width: 90%; margin-bottom: 8px; }
.sk.s3 { width: 78%; margin-bottom: 8px; }
.sk.s4 { width: 84%; margin-bottom: 18px; }
.sk-row { display: flex; gap: 8px; }
.sk-row .sk { flex: 1; height: 34px; border-radius: 8px; }
/* Engrenage qui tourne = travaux en cours */
.gear { position: absolute; right: 18px; bottom: 16px; color: var(--jaune); font-size: 30px; animation: spin 9s linear infinite; }
.gear.g2 { right: 52px; bottom: 40px; font-size: 18px; color: #4f9e8b; animation-duration: 6s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Badge maintenance collé sur l'écran */
.maint-badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: -16px; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bordure); border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 800; box-shadow: 0 8px 22px rgba(15,23,42,.12); white-space: nowrap; }
.maint-badge .pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex-shrink: 0; }
.maint-badge .pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--vert); opacity: .6; animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Textes ---------- */
.constr-title { font-family: 'Sora', Arial, sans-serif; font-weight: 800; font-size: clamp(1.9rem, 5.5vw, 2.7rem); line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 16px; }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; bottom: 6%; height: 34%; background: rgba(253,184,19,.45); border-radius: 6px; transform: rotate(-1.2deg); }
.constr-msg { color: var(--muted); font-size: clamp(.98rem, 2vw, 1.1rem); max-width: 480px; margin: 0 auto 30px; }

/* ---------- Étapes de mise en service (JS anime les coches) ---------- */
.constr-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.step-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bordure); border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.step-pill.on { opacity: 1; transform: none; }
.step-pill i { font-size: 12px; }
.step-pill.done i { color: var(--vert); }
.step-pill.active { color: var(--vert); border-color: rgba(14,122,90,.4); }
.step-pill.active i { color: var(--vert); }

/* ---------- Actions ---------- */
.constr-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 12px; font-family: 'Sora', Arial, sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s, color .18s; border: 2px solid transparent; }
.btn i { font-size: .9em; }
.btn-vert { background: var(--vert); color: #fff; box-shadow: 0 8px 20px rgba(14,122,90,.3); }
.btn-vert:hover { background: var(--vert-fonce); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,122,90,.35); }
.btn-outline { background: #fff; color: var(--text); border-color: var(--bordure); }
.btn-outline:hover { border-color: var(--vert); color: var(--vert); transform: translateY(-2px); }

/* ---------- Footer discret ---------- */
.constr-footer { position: relative; z-index: 1; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--bordure); background: rgba(255,255,245,.7); }
.constr-footer b { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
    .constr-logo .logo-word { font-size: 22px; }
    .constr-actions { flex-direction: column; align-items: stretch; }
    .constr-actions .btn { width: 100%; }
    .maint-badge { font-size: 11px; padding: 7px 14px; }
    .screen-body { min-height: 160px; }
    .constr-steps { gap: 8px; }
    .step-pill { font-size: 11.5px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .constr-illus, .gear, .maint-badge .pulse-dot::after { animation: none !important; }
    .step-pill { transition: none; opacity: 1; transform: none; }
}