:root { --black: #0a0b0d; --black-soft: #15181c; --orange: #f58220; --orange-dark: #cc5d00; --cyan: #00b8c8; --cyan-dark: #007f8b; --white: #ffffff; --paper: #f5f7f8; --line: #dfe4e7; --text: #20262b; --muted: #5a6670; --shadow: 0 16px 45px rgba(8, 13, 18, .12); --radius: 18px; --container: 1160px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0px; color: var(--text); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; text-rendering: optimizelegibility; }

img { max-width: 100%; height: auto; }

a { color: inherit; }

button, input, textarea { font: inherit; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 9999; padding: 0.7rem 1rem; color: var(--black); background: var(--white); border-radius: 8px; transform: translateY(-150%); }

.skip-link:focus { transform: none; }

.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }

.narrow { width: min(100% - 2rem, 820px); margin-inline: auto; }

.eyebrow { margin: 0px 0px 0.55rem; color: var(--cyan-dark); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.78rem; }

.section-title { margin: 0px 0px 0.7rem; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -0.035em; }

.section-lead { max-width: 760px; margin: 0px; color: var(--muted); font-size: 1.08rem; }

.section { padding: 5.5rem 0px; }

.section--soft { background: var(--paper); }

.section--dark { color: var(--white); background: var(--black); }

.section--dark .section-lead, .section--dark .muted { color: rgb(194, 204, 210); }

.accent { color: var(--orange); }

.cyan { color: var(--cyan); }

.muted { color: var(--muted); }

.topbar { color: var(--white); background: var(--black); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.topbar__inner { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; font-size: 0.9rem; }

.topbar a { text-decoration: none; }

.topbar a:hover { color: var(--cyan); }

.site-header { position: sticky; top: 0px; z-index: 1000; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }

.header__inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }

.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 900; }

.brand img { width: 58px; height: 58px; object-fit: contain; }

.brand__name { line-height: 1; letter-spacing: -0.025em; }

.brand__name span { display: block; font-size: 0.8rem; margin-top: 0.25rem; color: var(--muted); font-weight: 700; letter-spacing: 0.025em; }

.nav { display: flex; align-items: center; gap: 0.2rem; }

.nav a { padding: 0.7rem 0.85rem; border-radius: 10px; text-decoration: none; font-weight: 750; }

.nav a:hover, .nav a[aria-current="page"] { color: var(--black); background: rgba(0, 184, 200, 0.13); }

.language-switcher { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0px 0.25rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }

.language-switcher a { min-width: 36px; padding: 0.42rem 0.5rem; text-align: center; border-radius: 7px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; }

.language-switcher a:hover { background: rgba(0, 184, 200, 0.13); }

.language-switcher a[aria-current="true"] { color: var(--white); background: var(--black); }

.nav__call { margin-left: 0.35rem; color: var(--black) !important; background: var(--orange) !important; }

.nav__call:hover { background: var(--orange-dark) !important; }

.menu-toggle { display: none; border: 0px; width: 46px; height: 46px; border-radius: 12px; color: var(--white); background: var(--black); cursor: pointer; }

.menu-toggle svg { width: 24px; height: 24px; }

.hero { position: relative; min-height: 620px; display: grid; align-items: center; overflow: hidden; color: var(--white); background: var(--black); }

.hero__media, .hero__overlay { position: absolute; inset: 0px; }

.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.hero__overlay { background: linear-gradient(90deg, rgba(5, 7, 9, 0.96) 0%, rgba(5, 7, 9, 0.86) 42%, rgba(5, 7, 9, 0.25) 73%, rgba(5, 7, 9, 0.15) 100%); }

.hero__content { position: relative; z-index: 1; max-width: 760px; padding: 6rem 0px; }

.hero .eyebrow { color: var(--cyan); }

.hero h1 { margin: 0px 0px 1.25rem; max-width: 760px; font-size: clamp(2.7rem, 7vw, 5.8rem); line-height: 0.98; letter-spacing: -0.055em; }

.hero p { max-width: 680px; margin: 0px 0px 1.7rem; color: rgb(228, 234, 237); font-size: clamp(1.05rem, 2.2vw, 1.3rem); }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 50px; padding: 0.8rem 1.1rem; border: 2px solid transparent; border-radius: 12px; text-decoration: none; font-weight: 850; line-height: 1.15; transition: 0.18s; }

.btn:hover { transform: translateY(-2px); }

.btn--primary { color: var(--black); background: var(--orange); }

.btn--primary:hover { background: var(--orange-dark); }

.btn--secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.65); background: rgba(0, 0, 0, 0.2); }

.btn--secondary:hover { border-color: var(--cyan); background: rgba(0, 184, 200, 0.15); }

.btn--dark { color: var(--white); background: var(--black); }

.btn--outline { border-color: var(--black); background: transparent; }

.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

.hero__facts { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 2rem; color: rgb(220, 229, 233); font-size: 0.95rem; }

.hero__facts span { display: inline-flex; align-items: center; gap: 0.45rem; }

.hero__facts span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: rgba(0, 184, 200, 0.18) 0px 0px 0px 4px; }

.page-hero { padding: 5.5rem 0px 4.5rem; color: var(--white); background: radial-gradient(circle at 90% 10%, rgba(0,184,200,.25), transparent 32%), var(--black); }

.page-hero h1 { margin: 0px 0px 1rem; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.05em; }

.page-hero p { max-width: 740px; margin: 0px; color: rgb(207, 218, 224); font-size: 1.16rem; }

.breadcrumbs { margin-bottom: 1.2rem; color: rgb(185, 197, 202); font-size: 0.88rem; }

.breadcrumbs a { color: var(--cyan); text-decoration: none; }

.grid { display: grid; gap: 1.25rem; }

.grid--2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

.grid--3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }

.grid--4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }

.card { padding: 1.55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: rgba(9, 15, 20, 0.055) 0px 8px 28px; }

.card h2, .card h3 { margin: 0px 0px 0.55rem; line-height: 1.2; }

.card p { margin: 0px; color: var(--muted); }

.card__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 14px; color: var(--black); background: rgba(0, 184, 200, 0.15); }

.card__icon svg { width: 27px; height: 27px; }

.card--orange .card__icon { background: rgba(245, 130, 32, 0.17); }

.value-card { border-top: 4px solid var(--cyan); }

.value-card:nth-child(2n) { border-top-color: var(--orange); }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }

.photo-frame { position: relative; }

.photo-frame img { display: block; width: 100%; border-radius: 24px; box-shadow: var(--shadow); }

.photo-frame::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 38%; height: 38%; z-index: -1; border-radius: 24px; background: var(--orange); }

.check-list { display: grid; gap: 0.8rem; padding: 0px; margin: 1.4rem 0px 0px; list-style: none; }

.check-list li { position: relative; padding-left: 1.8rem; }

.check-list li::before { content: "✓"; position: absolute; left: 0px; top: 0px; color: var(--cyan-dark); font-weight: 900; }

.stat-strip { margin-top: -2rem; position: relative; z-index: 2; }

.stat-strip__inner { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }

.stat { padding: 1.35rem; text-align: center; border-right: 1px solid var(--line); }

.stat:last-child { border-right: 0px; }

.stat strong { display: block; color: var(--black); font-size: 1.45rem; }

.stat span { color: var(--muted); font-size: 0.88rem; }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1.3rem; margin-top: 2rem; }

.price-card { position: relative; padding: 2rem; overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: var(--shadow); border: 1px solid var(--line); }

.price-card::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 6px; background: var(--cyan); }

.price-card--featured::before { background: var(--orange); }

.price-card h3 { margin: 0px 0px 0.35rem; font-size: 1.45rem; }

.price { margin: 0.7rem 0px 0.2rem; color: var(--black); font-weight: 950; font-size: 2.8rem; line-height: 1; }

.price small { color: var(--muted); font-size: 0.9rem; font-weight: 700; }

.price-card ul { padding-left: 1.15rem; margin-bottom: 0px; color: var(--muted); }

.note { padding: 1rem 1.1rem; border-left: 4px solid var(--orange); border-radius: 0px 10px 10px 0px; color: rgb(63, 74, 82); background: rgb(255, 246, 238); }

.notice { padding: 1.25rem; border: 1px solid rgba(0, 184, 200, 0.3); border-radius: 14px; background: rgba(0, 184, 200, 0.08); }

.contact-panel { display: grid; grid-template-columns: 1.05fr 0.95fr; overflow: hidden; border-radius: 24px; background: var(--black); box-shadow: var(--shadow); }

.contact-panel__main { padding: clamp(2rem, 5vw, 4rem); color: var(--white); }

.contact-panel__main h2 { margin-top: 0px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; }

.contact-panel__main p { color: rgb(200, 209, 214); }

.contact-panel__aside { padding: clamp(2rem, 5vw, 4rem); color: var(--black); background: var(--cyan); }

.contact-list { display: grid; gap: 1rem; padding: 0px; margin: 1.5rem 0px 0px; list-style: none; }

.contact-list a { font-weight: 900; text-decoration: none; }

.contact-list a:hover { text-decoration: underline; }

.contact-row { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 0.85rem; }

.contact-row__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--white); background: var(--black); }

.contact-row__icon svg { width: 22px; height: 22px; }

.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary { padding: 1.2rem 2.2rem 1.2rem 0px; cursor: pointer; list-style: none; font-weight: 850; position: relative; }

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1rem; color: var(--orange); font-size: 1.5rem; }

.faq details[open] summary::after { content: "–"; }

.faq details p { margin: 0px 0px 1.25rem; color: var(--muted); }

.cta-band { padding: 3.5rem 0px; color: var(--white); background: linear-gradient(115deg, var(--orange-dark), var(--orange)); }

.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.cta-band h2 { margin: 0px 0px 0.35rem; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.1; }

.cta-band p { margin: 0px; color: rgb(255, 245, 236); }

.site-footer { padding: 4rem 0px 1.4rem; color: rgb(200, 208, 213); background: var(--black); }

.footer-grid { display: grid; grid-template-columns: 1.35fr 0.8fr 1fr; gap: 2.5rem; }

.footer-brand { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; color: var(--white); font-weight: 900; }

.footer-brand img { width: 70px; height: 70px; }

.site-footer h2 { margin: 0px 0px 0.8rem; color: var(--white); font-size: 1rem; }

.site-footer ul { padding: 0px; margin: 0px; list-style: none; }

.site-footer li + li { margin-top: 0.45rem; }

.site-footer a { text-decoration: none; }

.site-footer a:hover { color: var(--cyan); }

.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; }

.legal h2 { margin-top: 2.2rem; }

.legal p, .legal li { color: var(--muted); }

.error-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; color: var(--white); text-align: center; background: radial-gradient(circle at 50% 20%, rgba(0,184,200,.22), transparent 30%), var(--black); }

.error-page__code { margin: 0px; color: var(--orange); font-weight: 950; font-size: clamp(5rem, 20vw, 12rem); line-height: 0.8; }

.error-page h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

@media (max-width: 900px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav { position: absolute; top: calc(100% + 1px); left: 0px; right: 0px; display: none; flex-direction: column; align-items: stretch; padding: 0.8rem 1rem 1rem; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: rgba(0, 0, 0, 0.08) 0px 20px 30px; }
  .nav.is-open { display: flex; }
  .nav a { text-align: center; }
  .language-switcher { justify-content: center; margin: 0.35rem 0px; }
  .nav__call { margin-left: 0px; }
  .brand__name { font-size: 0.96rem; }
  .split, .contact-panel { grid-template-columns: 1fr; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .hero { min-height: 590px; }
  .hero__overlay { background: rgba(5, 7, 9, 0.78); }
}

@media (max-width: 650px) {
  .topbar__inner { justify-content: center; font-size: 0.82rem; }
  .topbar__inner span { display: none; }
  .header__inner { min-height: 72px; }
  .brand img { width: 49px; height: 49px; }
  .brand__name span { display: none; }
  .section { padding: 4.3rem 0px; }
  .hero { min-height: 630px; }
  .hero__content { padding: 4.5rem 0px; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .hero__facts { display: grid; gap: 0.65rem; }
  .stat-strip { margin-top: 0px; padding-top: 1rem; background: var(--paper); }
  .stat-strip__inner { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .stat:nth-child(2) { border-right: 0px; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid--2, .grid--3, .grid--4, .price-grid { grid-template-columns: 1fr; }
  .cta-band__inner { display: block; }
  .cta-band .btn { margin-top: 1.2rem; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :first-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .page-hero { padding: 4rem 0px 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================
   MicroMontréal — lisibilité renforcée des petits textes
   ========================================================== */

:root {
  --muted: #4b5862;
}

.topbar__inner {
  color: #f1f5f6;
  font-size: 0.96rem;
}

.brand__name span {
  color: #46535d;
  font-size: 0.85rem;
}

.nav a {
  font-size: 1.03rem;
}

.language-switcher a {
  font-size: 0.84rem;
}

.hero .eyebrow {
  font-size: 1rem;
}

.eyebrow {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.075em;
}

.hero p {
  color: #f2f6f7;
  font-size: clamp(1.12rem, 2.1vw, 1.34rem);
  line-height: 1.7;
}

.hero__facts {
  color: #eef4f6;
  font-size: 1rem;
  line-height: 1.55;
}

.stat span {
  color: #46535d;
  font-size: 0.96rem;
  line-height: 1.45;
}

.section-lead {
  color: #4b5862;
  font-size: 1.12rem;
  line-height: 1.7;
}

.card p,
.price-card ul,
.faq details p,
.legal p,
.legal li {
  color: #4b5862;
  font-size: 1.02rem;
  line-height: 1.7;
}

.page-hero p {
  color: #eef4f6;
  font-size: 1.2rem;
  line-height: 1.7;
}

.breadcrumbs {
  color: #dce5e8;
  font-size: 0.94rem;
}

.contact-panel__main p {
  color: #e8eef1;
  font-size: 1.05rem;
}

.site-footer {
  color: #dce4e8;
}

.footer-bottom {
  font-size: 0.92rem;
}

@media (max-width: 650px) {
  .topbar__inner {
    font-size: 0.9rem;
  }

  .nav a {
    font-size: 1.05rem;
  }

  .hero p {
    font-size: 1.12rem;
  }

  .hero__facts {
    font-size: 1rem;
  }

  .eyebrow,
  .hero .eyebrow {
    font-size: 0.94rem;
  }
}

/* ===== MicroMontréal v10.2 — divisions, développement, réalisations, partenaires ===== */
.nav { gap: 0.08rem; }
.nav a { padding-inline: 0.68rem; font-size: 0.93rem; }
.division-intro { position: relative; overflow: hidden; }
.division-intro::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 15%, rgba(0,184,200,.14), transparent 30%); }
.division-intro > .container { position: relative; }
.division-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
.division-card { position:relative; overflow:hidden; padding:2rem; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(255,255,255,.055); }
.division-card::after { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--cyan); }
.division-card--crm::after { background:var(--orange); }
.division-card h3 { margin:.2rem 0 .6rem; font-size:1.55rem; }
.division-card p { color:rgb(203,213,219); }
.division-card .card__icon { color:var(--white); background:rgba(0,184,200,.18); }
.division-card--crm .card__icon { background:rgba(245,130,32,.2); }
.audience { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.audience span, .tag { display:inline-flex; align-items:center; min-height:30px; padding:.3rem .65rem; border-radius:999px; font-size:.78rem; font-weight:850; line-height:1; }
.audience span { color:rgb(230,238,242); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); }
.status-badge { display:inline-flex; align-items:center; gap:.45rem; min-height:30px; padding:.35rem .7rem; border-radius:999px; color:#754008; background:#fff0df; border:1px solid #ffd4aa; font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.status-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.dev-service { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.dev-service + .dev-service { margin-top:5rem; }
.dev-service--reverse > :first-child { order:2; }
.dev-visual { min-height:360px; display:grid; place-items:center; padding:2rem; border-radius:26px; background:linear-gradient(145deg,#0e1115,#171d22); box-shadow:var(--shadow); }
.code-window { width:min(100%,520px); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 26px 70px rgba(0,0,0,.28); }
.code-window__bar { height:42px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#edf1f3; border-bottom:1px solid #dce2e6; }
.code-window__bar i { width:9px; height:9px; border-radius:50%; background:#9aa5ad; }
.site-mock { padding:1.4rem; }
.site-mock__hero { min-height:120px; border-radius:12px; background:linear-gradient(135deg,var(--black),#243039); position:relative; overflow:hidden; }
.site-mock__hero::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-40px; top:-45px; background:rgba(0,184,200,.45); }
.site-mock__line { height:10px; border-radius:999px; background:#dfe5e8; margin-top:12px; }
.site-mock__line:nth-child(2) { width:72%; }
.site-mock__line:nth-child(3) { width:55%; }
.site-mock__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.site-mock__cards span { height:62px; border-radius:10px; background:#f0f3f5; border:1px solid #e1e6e8; }
.crm-mock { width:min(100%,540px); display:grid; grid-template-columns:118px 1fr; overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 26px 70px rgba(0,0,0,.28); }
.crm-mock__side { min-height:310px; padding:18px 12px; background:#0b0d10; }
.crm-mock__logo { height:28px; margin-bottom:24px; border-radius:8px; background:linear-gradient(90deg,var(--cyan),#78dce4); }
.crm-mock__side span { display:block; height:9px; margin:11px 4px; border-radius:999px; background:rgba(255,255,255,.18); }
.crm-mock__main { padding:22px; }
.crm-mock__title { width:56%; height:18px; border-radius:999px; background:#182027; }
.crm-mock__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:20px 0; }
.crm-mock__stats span { height:68px; border-radius:10px; background:#eef3f5; border:1px solid #e0e6e9; }
.crm-mock__table { height:124px; border-radius:12px; background:repeating-linear-gradient(to bottom,#f5f7f8 0,#f5f7f8 25px,#dfe5e8 26px,#dfe5e8 27px); border:1px solid #e0e6e9; }
.roadmap-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem; padding:1.5rem; border:1px dashed #b9c3c9; border-radius:18px; background:#fbfcfc; }
.roadmap-card .card__icon { margin:0; }
.roadmap-card h3 { margin:0 0 .2rem; }
.roadmap-card p { margin:0; color:var(--muted); }
.project-featured { display:grid; grid-template-columns:1.1fr .9fr; gap:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--white); box-shadow:var(--shadow); }
.project-featured__visual { min-height:420px; display:grid; place-items:center; padding:2.2rem; background:linear-gradient(145deg,#0d1013,#202a31); }
.project-featured__body { padding:clamp(2rem,5vw,3.5rem); display:flex; flex-direction:column; justify-content:center; }
.project-featured h2 { margin:.35rem 0 .7rem; font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; margin-top:2rem; }
.project-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(9,15,20,.08); }
.project-card__media { aspect-ratio:16/9; overflow:hidden; background:#12171b; }
.project-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.project-card:hover .project-card__media img { transform:scale(1.025); }
.project-card__body { padding:1.5rem; }
.project-card__body h3 { margin:.25rem 0 .45rem; font-size:1.45rem; line-height:1.15; }
.project-card__body p { color:var(--muted); }
.project-card__tags { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 1.2rem; }
.tag { color:#38454d; background:#edf2f4; }
.tag--cyan { color:#00646e; background:#ddf7f9; }
.tag--orange { color:#8a4300; background:#ffead7; }
.project-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--black); font-weight:900; text-decoration:none; }
.project-link::after { content:"→"; color:var(--orange); transition:transform .15s; }
.project-link:hover::after { transform:translateX(3px); }
.partner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; margin-top:2rem; }
.partner-card { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:1.5rem; padding:1.5rem; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(9,15,20,.07); }
.partner-card__logo { height:130px; display:grid; place-items:center; padding:1rem; border-radius:16px; background:#f4f7f8; overflow:hidden; }
.partner-card__logo img { max-width:100%; max-height:100%; object-fit:contain; }
.partner-card h3 { margin:.15rem 0 .4rem; font-size:1.4rem; line-height:1.15; }
.partner-card p { margin:.2rem 0 1rem; color:var(--muted); }
.partner-kicker { color:var(--cyan-dark); font-size:.76rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.home-projects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.home-project { min-height:250px; position:relative; overflow:hidden; display:flex; align-items:flex-end; border-radius:20px; color:#fff; text-decoration:none; background:#111; box-shadow:var(--shadow); }
.home-project img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.58; transition:.35s; }
.home-project::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.06) 68%); }
.home-project:hover img { transform:scale(1.03); opacity:.68; }
.home-project__content { position:relative; z-index:1; padding:1.35rem; }
.home-project__content strong { display:block; font-size:1.15rem; }
.home-project__content span { color:#dce5e9; font-size:.85rem; }
.partner-strip { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; margin-top:2rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:18px; background:#fff; }
.partner-strip__item { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:12px; background:#f5f7f8; font-weight:850; }
.partner-strip__item img { width:46px; height:46px; object-fit:contain; border-radius:8px; background:#fff; }

@media (max-width:1080px) {
  .menu-toggle { display:grid; place-items:center; }
  .nav { position:absolute; top:calc(100% + 1px); left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:.8rem 1rem 1rem; background:var(--white); border-bottom:1px solid var(--line); box-shadow:rgba(0,0,0,.08) 0 20px 30px; }
  .nav.is-open { display:flex; }
  .nav a { text-align:center; }
  .language-switcher { justify-content:center; margin:.35rem 0; }
  .nav__call { margin-left:0; }
  .division-grid, .project-featured, .dev-service { grid-template-columns:1fr; }
  .dev-service--reverse > :first-child { order:initial; }
  .project-featured__visual { min-height:360px; }
  .home-projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .partner-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .division-grid, .project-grid, .home-projects { grid-template-columns:1fr; }
  .roadmap-card { grid-template-columns:auto 1fr; }
  .roadmap-card .status-badge { grid-column:1/-1; justify-self:start; }
  .partner-card { grid-template-columns:1fr; }
  .partner-card__logo { height:120px; }
  .partner-strip { grid-template-columns:1fr; }
  .dev-visual, .project-featured__visual { min-height:300px; padding:1.2rem; }
  .crm-mock { grid-template-columns:88px 1fr; }
  .crm-mock__main { padding:14px; }
}


/* V10.2 — captures réelles des réalisations */
.real-shot { position:relative; width:min(100%,640px); margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:#0b0f12; box-shadow:0 28px 72px rgba(0,0,0,.34); }
.real-shot img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center top; }
.real-shot--crm img { object-fit:contain; object-position:center; background:#071014; }
.real-shot figcaption { position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px); padding:7px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(5,8,10,.86); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.02em; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.project-featured__visual { padding:0; overflow:hidden; }
.project-featured__shot { width:100%; height:100%; min-height:420px; object-fit:cover; object-position:center; display:block; }
.project-card__media--logo { display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,#202020 0%,#080808 62%,#020202 100%); }
.project-card__media--logo img { width:82%; height:82%; padding:1rem; object-fit:contain; }
.home-project--logo { background:radial-gradient(circle at 50% 35%,#292929 0%,#080808 62%,#020202 100%); }
.home-project--logo img { object-fit:contain; padding:2rem; opacity:.9; }
.home-project--logo:hover img { opacity:1; }
@media(max-width:760px){
  .project-featured__shot { min-height:300px; }
  .real-shot figcaption { font-size:.66rem; }
}

.partner-grid--single{grid-template-columns:minmax(0,760px);justify-content:center}

/* ===== MicroMontréal v10.8 — Facebook — logo officiel + cache fix ===== */
.nav__facebook{
  width:40px;height:40px;flex:0 0 40px;display:inline-flex!important;
  align-items:center;justify-content:center;padding:0!important;margin-left:.15rem;
  border-radius:50%!important;color:#fff!important;background:transparent!important;
  box-shadow:none
}
.nav__facebook:hover{
  color:#fff!important;background:transparent!important;
  transform:translateY(-1px);filter:brightness(.96)
}
.nav__facebook-icon{
  display:block;width:40px;height:40px;flex:0 0 40px;
  font-size:0!important;line-height:0!important;
  background:transparent url("../images/facebook-logo-official.png?v=20260907fb2") center/contain no-repeat
}
.nav__facebook-label{display:none}
.footer-social-link{display:inline-flex;align-items:center;gap:.55rem}
.footer-social-icon{
  display:inline-block;width:25px;height:25px;flex:0 0 25px;border-radius:50%;
  font-size:0!important;line-height:0!important;
  background:transparent url("../images/facebook-logo-official.png?v=20260907fb2") center/contain no-repeat
}
.social-follow-section{padding-top:0}
.social-follow-card{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;
  gap:1.5rem;padding:clamp(1.5rem,3vw,2.2rem);border:1px solid #dbe3e8;
  border-radius:22px;background:#fff;box-shadow:0 14px 38px rgba(9,15,20,.08)
}
.social-follow-card__icon{
  display:block;width:72px;height:72px;border-radius:50%;
  font-size:0!important;line-height:0!important;
  background:transparent url("../images/facebook-logo-official.png?v=20260907fb2") center/contain no-repeat
}
.social-follow-card__content .eyebrow{margin-bottom:.3rem;color:#0866ff}
.social-follow-card__content h2{margin:0 0 .35rem;font-size:clamp(1.45rem,3vw,2rem)}
.social-follow-card__content p:last-child{margin:0;color:var(--muted)}
.btn--facebook{color:#fff;background:#0866ff}
.btn--facebook:hover{color:#fff;background:#075fe9}

@media(max-width:1080px){
  .nav__facebook{
    width:100%;height:48px;flex:auto;gap:.55rem;margin:.2rem 0 0;
    border-radius:10px!important;background:#0866ff!important
  }
  .nav__facebook:hover{background:#075fe9!important}
  .nav__facebook-icon{width:28px;height:28px;flex:0 0 28px}
  .nav__facebook-label{display:inline;font-weight:850}
}
@media(max-width:760px){
  .social-follow-card{grid-template-columns:58px 1fr;gap:1rem}
  .social-follow-card__icon{width:58px;height:58px}
  .social-follow-card .btn--facebook{grid-column:1/-1;width:100%}
}

/* ===== Fonds d’écran gratuits / Free wallpapers ===== */
.wallpaper-section{
  color:#fff;
  background:
    radial-gradient(circle at 82% 16%,rgba(0,184,200,.16),transparent 30%),
    linear-gradient(145deg,#080a0c,#12181d 62%,#080a0c)
}
.wallpaper-section .eyebrow{color:var(--cyan)}
.wallpaper-section .section-title{color:#fff}
.wallpaper-section .section-lead{color:#c8d1d6}
.wallpaper-card{
  overflow:hidden;margin-top:2rem;border:1px solid rgba(255,255,255,.16);
  border-radius:24px;background:#090c0f;box-shadow:0 24px 70px rgba(0,0,0,.34)
}
.wallpaper-card__preview{position:relative;overflow:hidden;background:#050709}
.wallpaper-card__preview::after{
  content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,7,9,.68),transparent)
}
.wallpaper-card__preview img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.wallpaper-card__body{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.5rem,4vw,2.6rem)
}
.wallpaper-card__body h3{margin:.65rem 0 .35rem;color:#fff;font-size:clamp(1.45rem,3vw,2rem)}
.wallpaper-card__body p{margin:0;color:#aebac1}
.wallpaper-badge{
  display:inline-flex;padding:.4rem .75rem;border:1px solid rgba(0,184,200,.45);
  border-radius:999px;color:#a9f5fb;background:rgba(0,184,200,.11);
  font-size:.75rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
.wallpaper-controls label{display:block;margin-bottom:.55rem;color:#fff;font-weight:850}
.wallpaper-controls__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem}
.wallpaper-controls select{
  width:100%;min-height:48px;padding:.7rem 2.5rem .7rem .9rem;border:1px solid #46545c;
  border-radius:10px;color:#fff;background:#151b20;font:inherit;cursor:pointer
}
.wallpaper-controls select:focus{outline:3px solid rgba(0,184,200,.28);border-color:var(--cyan)}
.wallpaper-download{min-width:150px}
.wallpaper-archive{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem;
  padding:.85rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:10px;
  color:#fff;background:rgba(255,255,255,.06);font-weight:850;text-decoration:none
}
.wallpaper-archive:hover{border-color:var(--cyan);background:rgba(0,184,200,.1)}
.wallpaper-archive span{color:#aebac1;font-size:.82rem;white-space:nowrap}
@media(max-width:850px){
  .wallpaper-card__body{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wallpaper-card{border-radius:18px}
  .wallpaper-controls__row{grid-template-columns:1fr}
  .wallpaper-download{width:100%}
  .wallpaper-archive{align-items:flex-start;flex-direction:column;gap:.2rem}
}

/* ===== Aperçu agrandi du CRM ===== */
.project-featured__zoom{
  position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;
  display:block;padding:0;border:0;color:#fff;background:#071014;cursor:zoom-in
}
.project-featured__zoom .project-featured__shot{object-fit:contain;background:#071014}
.project-featured__zoom::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(0,184,200,0);transition:box-shadow .2s ease
}
.project-featured__zoom:hover::after,.project-featured__zoom:focus-visible::after{
  box-shadow:inset 0 0 0 4px rgba(0,184,200,.75)
}
.project-featured__zoom:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.project-featured__zoom-label{
  position:absolute;right:1rem;bottom:1rem;padding:.55rem .85rem;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;color:#fff;background:rgba(5,9,12,.86);font-size:.78rem;font-weight:900;
  letter-spacing:.04em;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.project-featured__zoom-label::before{content:"↗";margin-right:.4rem;color:var(--cyan)}
.image-lightbox{
  width:min(96vw,1800px);max-width:none;max-height:94vh;margin:auto;padding:0;
  overflow:visible;border:1px solid #31434d;border-radius:16px;background:#05090b;
  box-shadow:0 28px 90px rgba(0,0,0,.72)
}
.image-lightbox[open]{display:grid;place-items:center}
.image-lightbox::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(5px)}
.image-lightbox img{display:block;max-width:100%;max-height:90vh;width:auto;height:auto;border-radius:15px}
.image-lightbox__close{
  position:absolute;z-index:2;top:-14px;right:-14px;width:44px;height:44px;display:grid;
  place-items:center;padding:0;border:2px solid #fff;border-radius:50%;color:#fff;background:#111820;
  font:700 1.8rem/1 Arial,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5)
}
.image-lightbox__close:hover,.image-lightbox__close:focus-visible{background:var(--orange);outline:none}
@media(max-width:760px){
  .project-featured__zoom{min-height:300px}
  .project-featured__zoom-label{right:.7rem;bottom:.7rem}
  .image-lightbox{width:96vw;border-radius:10px}
  .image-lightbox img{border-radius:9px}
  .image-lightbox__close{top:-11px;right:-5px;width:40px;height:40px}
}

/* Accessibility improvements: visible keyboard focus and less motion. */
:where(a, button, select):focus-visible { outline: 3px solid var(--cyan-dark); outline-offset: 3px; }
section[id], main[id] { scroll-margin-top: 96px; }
/* Keep all navigation links reachable on short landscape screens. */
@media (max-width: 1080px) {
  .nav { max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .project-card:hover .project-card__media img, .home-project:hover img { transform: none; }
}