/*
 * rtech-site.css — feuille de style partagée du site vitrine R-TECH AFRICA.
 * Identité visuelle construite autour du tracé du logo (trait continu,
 * bouts arrondis, un seul bleu de marque) plutôt qu'un gabarit générique.
 * Dr Rogas Roger — R-TECH
 */

:root {
    /* Bleu exact du logo (#185FA5) - jamais le bleu SaaS générique. */
    --ink: #0b1930;
    --ink-2: #122544;
    --ink-line: rgba(255,255,255,0.09);
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --border: #e2e6eb;
    --border-hi: #cdd4dc;
    --accent: #185fa5;
    --accent-deep: #0f427a;
    --accent-bright: #2f8fe0;
    --accent-bg: #eaf2fb;
    --signal: #1f9d6b;
    --signal-bg: #e8f7f0;
    --copper: #c8722f;
    --text: #101826;
    --text-muted: #5b6472;
    --text-dim: #8892a0;
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px rgba(11,25,48,0.08);
    --shadow-lg: 0 24px 60px rgba(11,25,48,0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.container { max-width: 1152px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
p { color: var(--text-muted); }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
.mono { font-family: var(--font-mono); }

/* ===== motif de fond technique (grille + points), reutilise plutot que
   des gradients decoratifs generiques ===== */
.grid-field {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 85%);
}

/* ===== NAV ===== */
/* R-TECH 2026-08-27: backdrop-filter directement sur .nav transformait cet
   element en bloc conteneur pour son descendant position:fixed (.nav-links,
   le panneau mobile) - au lieu de se positionner par rapport au viewport
   (top:65px/bottom:0 attendus), il se positionnait par rapport a la boite de
   .nav elle-meme (~65px de haut), l'ecrasant a une hauteur minuscule. Le flou
   est deplace sur un ::before dedie : seul l'element qui porte reellement
   backdrop-filter devient un bloc conteneur, jamais ses pseudo-elements pour
   le parent. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid var(--border); }
.nav::before { content: ''; position: absolute; inset: 0; background: rgba(246,247,249,0.86); backdrop-filter: blur(10px); z-index: -1; }
/* R-TECH 2026-09-25 (bug Ravie, rtech-parler.html) : .nav::before porte son
   propre fond opaque clair, un style inline sur .nav lui-meme (comme tente
   sur cette page) ne l'atteint jamais - d'ou le "fond blanc sale" qui
   noyait un texte de nav pense pour un fond sombre. Variante dediee pour
   toute page a nav sombre, plutot que de re-tenter un override inline. */
.nav.nav-on-dark { border-bottom-color: rgba(255,255,255,0.1); }
.nav.nav-on-dark::before { background: rgba(11,25,48,0.82); }
.nav-inner { max-width: 1152px; margin: 0 auto; padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.nav-cta) { color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color 0.15s; white-space: nowrap; }
.nav-links a:not(.nav-cta):hover { color: var(--accent); }
.nav-links a.is-active { color: var(--accent); }
.nav-cta { background: var(--ink); color: #fff !important; padding: 10px 18px; border-radius: 999px; font-weight: 700 !important; font-size: 13px !important; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, transform 0.15s; }
.nav-cta:hover { background: var(--accent-deep); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; width: 38px; height: 38px; color: var(--text); font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }

/* ===== BOUTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: none; cursor: pointer; font-family: var(--font-body); transition: background 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; border: 1px solid var(--border-hi); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--accent-bright); color: #fff; transform: translateY(-1px); }
.btn-ghost-on-dark { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: #fff; }
.btn-ghost-on-dark:hover { border-color: #fff; }

/* ===== TOPBAR HERO SOMBRE ===== */
.page-hero { position: relative; background: var(--ink); color: #fff; padding: 156px 0 84px; overflow: hidden; }
.page-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.14; max-width: 760px; }
.page-hero p.lead { color: rgba(255,255,255,0.72); font-size: 16.5px; max-width: 600px; margin-top: 16px; }
.page-hero .eyebrow-dark { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #cfe0f5; padding: 7px 15px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 22px; }
.page-hero .eyebrow-dark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* ===== SECTIONS ===== */
.section { padding: 92px 0; position: relative; }
.section-alt { background: var(--surface-2); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.68); }
.section-head { max-width: 660px; margin: 0 0 52px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 14px; }
.section-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); display: inline-block; }
.section-dark .section-eyebrow { color: #7fb4e8; }
.section-dark .section-eyebrow::before { background: #7fb4e8; }
.section-head h2 { font-size: clamp(25px, 3.6vw, 34px); margin-bottom: 14px; }
.section-head p { font-size: 15.5px; }

/* ===== ICONES (lignes, meme famille que le logo) ===== */
.ic { flex-shrink: 0; }
.ic-tile { width: 50px; height: 50px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); flex-shrink: 0; }
.ic-tile.on-dark { background: rgba(255,255,255,0.08); color: #cfe0f5; }
.ic-tile svg { width: 26px; height: 26px; }

/* ===== SERVICES ===== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.service-card { background: var(--surface); padding: 32px 28px; transition: background 0.15s; display: flex; flex-direction: column; }
.service-card:hover { background: var(--accent-bg); }
.service-card h3 { font-size: 16.5px; margin: 18px 0 9px; }
.service-card p { font-size: 13.5px; flex: 1; }
.service-card .service-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.service-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }

/* ===== fiches longues (page services) ===== */
.service-detail { display: grid; grid-template-columns: 84px 1fr; gap: 26px; padding: 40px 0; border-bottom: 1px solid var(--border); }
.service-detail:last-child { border-bottom: none; }
.service-detail h3 { font-size: 19px; margin-bottom: 10px; }
.service-detail p { font-size: 14.5px; max-width: 620px; }
.service-detail ul { margin-top: 12px; padding-left: 0; list-style: none; }
.service-detail ul li { font-size: 13.5px; color: var(--text-muted); padding-left: 20px; position: relative; margin-bottom: 7px; }
.service-detail ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 2px; background: var(--accent); }
.service-photo-wrap { margin-top: 18px; max-width: 300px; }
.service-photo-wrap img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); width: 100%; height: auto; display: block; }
.service-photo-wrap .cap { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; font-family: var(--font-mono); }

/* ===== PROCESSUS (notre approche) ===== */
.process-line { position: relative; }
.process-step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding-bottom: 48px; position: relative; }
.process-step:last-child { padding-bottom: 0; }
.process-num-col { position: relative; display: flex; flex-direction: column; align-items: center; }
.process-num { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 15px; z-index: 1; }
.process-step:not(:last-child) .process-num-col::after { content: ''; position: absolute; top: 46px; bottom: -48px; width: 2px; background: var(--border-hi); left: 50%; transform: translateX(-1px); }
.process-step h3 { font-size: 18px; margin-bottom: 8px; padding-top: 8px; }
.process-step p { font-size: 14px; max-width: 560px; }

/* ===== A PROPOS / EQUIPE ===== */
.about-lead { font-size: 15.5px; margin-bottom: 16px; }
.founder-card { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin: 36px 0; }
.founder-mark { width: 120px; height: 120px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 3px solid var(--accent-bg); }
.founder-mark svg { width: 56px; height: 56px; }
.founder-mark img { width: 100%; height: 100%; object-fit: cover; }
.founder-card h3 { font-size: 18px; margin-bottom: 4px; }
.founder-card .role { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 10px; }
.founder-card p { font-size: 13.5px; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 640px; }
.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.team-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.team-avatar svg { width: 20px; height: 20px; }
.team-name { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.team-title { font-size: 12px; color: var(--accent); font-weight: 600; font-family: var(--font-mono); }

/* ===== TECHNOLOGIES ===== */
.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tech-row { background: var(--surface); padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start; }
.tech-row h3 { font-size: 15.5px; margin-bottom: 6px; }
.tech-row p { font-size: 13px; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tech-tag { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }

/* ===== CAS CLIENT ===== */
.case-meta { display: flex; gap: 28px; flex-wrap: wrap; margin: 28px 0 40px; padding: 22px 26px; background: var(--surface-2); border-radius: var(--radius); }
.case-meta div span { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 5px; }
.case-meta div strong { font-size: 14px; font-weight: 700; }
.case-block { margin-bottom: 40px; }
.case-block .tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.case-block.problem .tag { background: #fdeeea; color: #b8471f; }
.case-block.solution .tag { background: var(--accent-bg); color: var(--accent-deep); }
.case-block.result .tag { background: var(--signal-bg); color: var(--signal); }
.case-block h3 { font-size: 18px; margin-bottom: 10px; }
.case-block p { font-size: 14.5px; max-width: 680px; }
.case-block ul { margin-top: 10px; padding-left: 0; list-style: none; }
.case-block ul li { font-size: 14px; color: var(--text-muted); padding-left: 22px; position: relative; margin-bottom: 8px; }
.case-block ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 2px; background: currentColor; opacity: 0.5; }
.case-photo { margin: 20px 0; max-width: 340px; }
.case-photo img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); width: 100%; height: auto; display: block; }
.case-photo .cap { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; font-family: var(--font-mono); }
.case-divider { border: none; border-top: 1px solid var(--border); margin: 56px 0; }

/* ===== SECTEURS ===== */
.sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sector-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.sector-card .ic-tile { margin-bottom: 18px; }
.sector-card h3 { font-size: 17px; margin-bottom: 10px; }
.sector-card p { font-size: 13.5px; margin-bottom: 14px; }
.sector-card ul { list-style: none; padding: 0; }
.sector-card ul li { font-size: 13px; color: var(--text-muted); padding-left: 18px; position: relative; margin-bottom: 6px; }
.sector-card ul li::before { content: '-'; position: absolute; left: 0; color: var(--accent); }

/* ===== POURQUOI ===== */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.why-item { display: flex; gap: 18px; }
.why-item h3 { font-size: 15.5px; margin-bottom: 8px; }
.why-item p { font-size: 13.5px; }

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 4px; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .plus { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.2s; }
.faq-q .plus::before, .faq-q .plus::after { content: ''; position: absolute; background: var(--text); }
.faq-q .plus::before { width: 9px; height: 1.5px; }
.faq-q .plus::after { width: 1.5px; height: 9px; transition: opacity 0.2s; }
details[open] .faq-q .plus::after { opacity: 0; }
details[open] .faq-q .plus { transform: rotate(180deg); }
.faq-a { padding: 0 4px 24px; font-size: 14px; color: var(--text-muted); max-width: 680px; }
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q { list-style: none; }

/* ===== CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.contact-info-item h3 { font-size: 14px; margin-bottom: 4px; }
.contact-info-item p, .contact-info-item a { font-size: 13.5px; color: var(--text-muted); text-decoration: none; display: block; }
.contact-info-item a:hover { color: var(--accent); }

.devis-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.devis-form label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.devis-form input, .devis-form select, .devis-form textarea { width: 100%; padding: 12px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 14.5px; margin-bottom: 18px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.devis-form input:focus, .devis-form select:focus, .devis-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(24,95,165,0.14); }
.devis-form textarea { resize: vertical; min-height: 100px; }
.devis-form .btn { width: 100%; }
.devis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 18px; font-weight: 600; }
.form-alert.success { background: var(--signal-bg); color: #0d7a4d; border: 1px solid #b7e6cf; }
.form-alert.error { background: #fdeeea; color: #b8471f; border: 1px solid #f5c9b8; }

/* ===== FOOTER ===== */
.footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 60px 0 28px; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 44px; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 13.5px; max-width: 300px; margin-top: 14px; }
.footer-cols { display: flex; gap: 52px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.38); margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.68); text-decoration: none; font-size: 13.5px; margin-bottom: 11px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 12px; }

/* ===== WHATSAPP FLOTTANT ===== */
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; background: #1f9d6b; color: #fff; text-decoration: none; height: 52px; padding: 0 18px 0 0; border-radius: 999px; box-shadow: 0 10px 26px rgba(31,157,107,0.4); font-weight: 700; font-size: 13.5px; font-family: var(--font-body); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab .wa-ic { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-fab .wa-ic svg { width: 24px; height: 24px; }
.wa-fab-label { white-space: nowrap; }
@media (max-width: 520px) {
    .wa-fab { right: 16px; bottom: 16px; padding: 0; width: 52px; }
    .wa-fab-label { display: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .nav-links { position: fixed; top: 65px; left: 0; right: 0; bottom:0; background: var(--bg); flex-direction: column; padding: 28px; gap: 6px; align-items: stretch; display: none; overflow-y:auto; }
    .nav-links a:not(.nav-cta) { padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 15px; }
    .nav-links.open { display: flex; }
    .nav-toggle { display: flex; }
    .nav-cta { margin-top: 14px; justify-content: center; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .tech-grid { grid-template-columns: 1fr; }
    .sector-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .devis-row { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; }
    .founder-card { grid-template-columns: 1fr; text-align: center; }
    .founder-mark { margin: 0 auto; }
    .split-2col { grid-template-columns: 1fr !important; gap: 32px !important; }
    .split-2col [aria-hidden="true"] { order: 2; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .service-detail { grid-template-columns: 1fr; }
    .case-meta { flex-direction: column; gap: 16px; }
    .page-hero { padding: 140px 0 64px; }
    .section { padding: 64px 0; }
}

/* ============================================================
 * R-TECH 2026-09-09 (refonte accueil, demande Ravie) : composants
 * ajoutes au design system partage plutot qu'en inline sur une seule
 * page - reutilisables quand les 9 autres pages seront refaites a leur
 * tour, meme logique que le reste de ce fichier (un seul systeme, pas
 * un style par page).
 * ============================================================ */

/* ===== PILIERS (Network / Software / Infrastructure) - trois
   traitements visuels distincts, pas trois cartes identiques ===== */
/* ===== grille 2 colonnes generique (hero, approche, realisations...) -
   remplace les grilles en style inline, qui ne s'empilaient jamais sur
   mobile (aucune media query ne peut cibler un style inline) ===== */
.split-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

.pillars { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; }
.pillar { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 4px; border-bottom: 1px solid var(--border); }
.pillar:last-child { border-bottom: none; }
.pillar-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; padding-top: 3px; }
.pillar-body h3 { font-size: 18px; margin-bottom: 8px; }
.pillar-body p { font-size: 14.5px; max-width: 560px; }

/* ===== PRODUITS - trois compositions differentes ===== */
.product-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--border); }
.product-block:last-child { border-bottom: none; }
.product-block.reverse .product-visual { order: 2; }
.product-eyebrow { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 10px; }
.product-block h3 { font-size: 24px; margin-bottom: 12px; }
.product-block p.desc { font-size: 14.5px; margin-bottom: 20px; max-width: 480px; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.product-tag { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }

/* -- composition R-VPN : mini schema reseau -- */
.pv-net { background: var(--ink); border-radius: var(--radius); padding: 26px 22px; color: #fff; }
.pv-net-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; }
.pv-net-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; }
.pv-net-row.online .dot { background: var(--signal); }
.pv-net-line { width: 1.5px; height: 16px; background: rgba(255,255,255,0.18); margin-left: 3px; }
.pv-net-status { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pv-net-status span { font-family: var(--font-mono); font-size: 10.5px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); padding: 4px 10px; border-radius: 999px; color: rgba(255,255,255,0.7); }

/* -- composition R-SPOTMON : mini dashboard -- */
.pv-dash { background: #060a0e; border-radius: var(--radius); padding: 20px; color: #e2e8f0; position: relative; }
.pv-dash-badge { position: absolute; top: -11px; left: 20px; background: var(--surface); border: 1px solid var(--border-hi); color: var(--text-muted); font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.pv-dash-top { display: flex; justify-content: space-between; font-size: 12px; color: #5b6975; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #16202b; }
.pv-dash-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pv-dash-card { background: #0e151d; border: 1px solid #16202b; border-radius: 8px; padding: 11px 12px; }
.pv-dash-card .lbl { font-size: 9.5px; color: #5b6975; text-transform: uppercase; margin-bottom: 5px; }
.pv-dash-card .val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: #f1f5f9; }
.pv-dash-card .val.signal { color: #34d399; }

/* -- composition RPay : parcours paiement -- */
.pv-flow { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.pv-flow-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pv-flow-step .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); width: 18px; flex-shrink: 0; }
.pv-flow-step span.lbl { font-size: 13.5px; font-weight: 600; }
.pv-flow-divider { height: 1px; background: var(--border); margin: 0 14px; }
.pv-flow-methods { display: flex; gap: 8px; padding: 10px 14px 4px; }
.pv-flow-methods span { font-family: var(--font-mono); font-size: 11px; background: var(--accent-bg); color: var(--accent-deep); padding: 4px 10px; border-radius: 999px; }

/* ===== TERRAIN - galerie de vraies photos ===== */
.terrain-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.terrain-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; aspect-ratio: 4/3; }
.terrain-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terrain-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65)); }

/* ===== PARTENARIAT WIFI ZONE ===== */
.partnership-band { background: var(--ink); border-radius: var(--radius); padding: 44px 40px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; color: #fff; }
.partnership-band h2 { color: #fff; }
.partnership-band p { color: rgba(255,255,255,0.68); }
.partnership-points { list-style: none; }
.partnership-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 7px 0; color: rgba(255,255,255,0.85); }
.partnership-points li .dot { width: 6px; height: 6px; border-radius: 50%; background: #7fb4e8; flex-shrink: 0; }

/* ===== SPINNER (2026-09-25, demande Roger) ===== */
.spinner { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: rtech-spin 0.7s linear infinite; flex-shrink: 0; }
.spinner-accent { border: 2px solid var(--accent-bg); border-top-color: var(--accent); }
@keyframes rtech-spin { to { transform: rotate(360deg); } }

/* ===== ACTIVITES (2026-09-25) : section "Ce que fait R-TECH AFRICA", juste
   apres le hero - remplace l'ancien bloc "piliers" trop abstrait. ===== */
.activity-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.activity-chip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--accent-bg); border-radius: 12px; }
.activity-chip-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.activity-chip-icon .ic { width: 18px; height: 18px; }
.activity-chip-tag { font-size: 9.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.activity-chip-name { font-size: 14px; font-weight: 700; color: var(--text); }
.activities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.activity-card { border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.activity-card .ic-tile-sm { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2); color: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.activity-card .ic-tile-sm .ic { width: 17px; height: 17px; }
.activity-card h3 { font-size: 14px; }
.activity-card p { font-size: 12.5px; margin-top: 5px; }

/* ===== CAPACITES R-SPOTMON (2026-09-25) : RAI, collaborateurs, PCQ, RMON ===== */
.capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.capability-card { border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: var(--bg); }
.capability-card .ic-tile { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.capability-card.included .ic-tile { background: var(--signal-bg); color: var(--signal); }
.capability-card .ic-tile .ic { width: 22px; height: 22px; }
.capability-card h3 { font-size: 15.5px; }
.capability-card p { font-size: 13px; margin-top: 6px; }
.capability-included-badge { font-size: 10.5px; font-weight: 700; color: var(--signal); }

/* ===== HERO TERMINAL RAI (2026-09-25), remplace le schema reseau abstrait ===== */
.hero-terminal { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
.hero-terminal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.hero-terminal-dot { width: 9px; height: 9px; border-radius: 50%; }
.hero-terminal-body { font-family: var(--font-mono); font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 2.1; }
.hero-terminal-prompt { color: #7fb4e8; }
.hero-terminal-muted { color: rgba(255,255,255,0.32); }
.hero-terminal-ok { display: flex; align-items: center; gap: 8px; color: #5fd39a; margin-top: 6px; }

/* ===== PAGE "PARLER A R-TECH" (2026-09-25) ===== */
.choice-hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); min-height: calc(100vh - 65px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 28px; text-align: center; }
/* R-TECH 2026-09-25 : ".eyebrow" seul (sans page-hero autour) n'a aucun
   style dans cette feuille - seul ".page-hero .eyebrow-dark" existe. Sur
   choice-hero, ce texte heritait donc de la couleur par defaut (sombre),
   quasi invisible sur le fond navy - meme famille de bug que le nav, plus
   discrete. Style dedie plutot que de reutiliser un selecteur scope a
   .page-hero qui ne s'applique pas ici. */
.choice-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #cfe0f5; }
.choice-hero .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; width: 100%; margin-top: 44px; }
.choice-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.choice-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.choice-card-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.choice-card h2 { font-size: 19px; color: #fff; }
.choice-card p { color: rgba(255,255,255,0.62); font-size: 13.5px; }
.choice-card .choice-url { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.35); }
.choice-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; padding: 13px 22px; border-radius: 999px; margin-top: 4px; min-width: 148px; justify-content: center; }
.choice-btn.is-loading .choice-btn-label { display: none; }
.choice-btn .spinner { display: none; }
.choice-btn.is-loading .spinner { display: inline-block; }

@media (max-width: 900px) {
    .product-block { grid-template-columns: 1fr; gap: 26px; }
    .product-block.reverse .product-visual { order: 0; }
    .terrain-gallery { grid-template-columns: repeat(2, 1fr); }
    .partnership-band { grid-template-columns: 1fr; padding: 32px 26px; }
    .pillar { grid-template-columns: 1fr; gap: 8px; }
    .activity-products, .activities-grid { grid-template-columns: 1fr 1fr; }
    .capabilities-grid { grid-template-columns: 1fr 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .terrain-gallery { grid-template-columns: 1fr; }
    .pv-dash-cards { grid-template-columns: 1fr 1fr; }
    .activity-products, .activities-grid, .capabilities-grid { grid-template-columns: 1fr; }

    /* R-TECH 2026-09-25 (bug Ravie, mobile) : les icones de "Ce que fait
       R-TECH AFRICA" (et de "Ce qui vient avec R-SPOTMON", meme defaut)
       gardaient leur taille desktop alors que le texte autour (h3/p a deja
       une taille reduite pour mobile) ne grossit pas en retour - l'icone
       devient l'element le plus lourd de la carte, en colonne unique,
       repete 9-10 fois de suite. Reduction ciblee ici plutot que de
       toucher la taille desktop, qui elle est deja proportionnee. */
    .activity-chip-icon { width: 30px; height: 30px; border-radius: 8px; }
    .activity-chip-icon .ic { width: 14px; height: 14px; }
    .activity-chip { gap: 11px; padding: 13px 15px; }
    .activity-card .ic-tile-sm { width: 28px; height: 28px; margin-bottom: 8px; }
    .activity-card .ic-tile-sm .ic { width: 13px; height: 13px; }
    .capability-card .ic-tile { width: 34px; height: 34px; margin-bottom: 10px; }
    .capability-card .ic-tile .ic { width: 16px; height: 16px; }
}