/* ═══════════════════════════════════════════════════════
   PUBLIC SHELL — Styles communs pages publiques 2026
   Design : Linear/Vercel/Stripe — dense, sobre, teal
   Aligné sur la homepage index.html refondue 17 avril 2026
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #09090b;
  --bg-card: #18181b;
  --bg-subtle: #1c1c1f;
  --border: #27272a;
  --border-accent: rgba(45,212,191,0.15);
  --teal: #2dd4bf;
  --teal-dim: rgba(45,212,191,0.08);
  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --radius: 8px;
  --max-w: 1440px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Anti-débordement global (texte long, urls, mots composés) ─────── */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, button, label, input, textarea, .card-title, .card-desc {
  overflow-wrap: anywhere;
  word-break: normal;
}
img, video, iframe, canvas, svg { max-width:100%; height:auto; display:block; }
/* Fix grids qui écrasent leurs enfants */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.services-grid > *, .cg-grid > *, .campaigns-grid > *,
.ft-grid > * { min-width:0; }

/* ── Nav ────────────────────────────── */
.nav {
  position: sticky; top:0; z-index:100;
  background: rgba(9,9,11,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin:0 auto;
  padding: 0 24px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-size:0.95rem; font-weight:700; color:var(--text);
  text-decoration:none; letter-spacing:-0.03em;
  display:flex; align-items:center; gap:8px;
}
.nav-logo img { height:28px; }
.nav-logo:hover { color:var(--teal); }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a {
  color:var(--text-2); text-decoration:none;
  font-size:0.84rem; font-weight:500;
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-cta {
  padding:6px 16px; border-radius:6px;
  background:var(--teal); color:#09090b;
  font-weight:600; font-size:0.82rem;
  text-decoration:none; transition:opacity 0.15s;
}
.nav-cta:hover { opacity:0.85; }
.nav-hamburger { display:none; background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer; }

/* ── Footer ─────────────────────────── */
.ft {
  border-top: 1px solid var(--border);
  padding: 48px 24px 24px; margin-top:80px;
}
.ft-grid {
  max-width: var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;
}
.ft-brand { font-weight:700; font-size:0.95rem; margin-bottom:8px; letter-spacing:-0.03em; }
.ft-desc { color:var(--text-3); font-size:0.82rem; line-height:1.5; }
.ft h4 { font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-2); margin-bottom:12px; }
.ft ul { list-style:none; }
.ft ul li { margin-bottom:8px; }
.ft ul a { color:var(--text-3); text-decoration:none; font-size:0.82rem; transition:color 0.15s; }
.ft ul a:hover { color:var(--text); }
.ft-bottom {
  max-width: var(--max-w); margin:24px auto 0;
  padding-top:20px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  color:var(--text-3); font-size:0.75rem;
}

/* ── Badge pills ────────────────────── */
.badge-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:20px;
  background:var(--teal-dim); border:1px solid var(--border-accent);
  color:var(--teal); font-size:0.72rem; font-weight:600;
  text-decoration:none; transition:all 0.15s;
}
.badge-pill:hover { background:rgba(45,212,191,0.12); }

/* ── Tab bar mobile ─────────────────── */
.bottom-tab-bar {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:rgba(9,9,11,0.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:6px 0 env(safe-area-inset-bottom,6px);
  z-index:200; justify-content:space-around;
}
.bottom-tab-bar a {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:0.65rem; color:var(--text-3); text-decoration:none;
  transition:color 0.15s;
}
.bottom-tab-bar a i { font-size:1rem; }
.bottom-tab-bar a.active, .bottom-tab-bar a:hover { color:var(--teal); }

/* ── Sections ───────────────────────── */
.section {
  max-width: var(--max-w); margin:0 auto;
  padding: 60px 24px;
}
.section-label {
  font-size:0.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--teal); margin-bottom:12px;
}
.section-title {
  font-size:clamp(1.4rem, 3vw, 1.8rem);
  font-weight:700; letter-spacing:-0.03em;
  margin-bottom:12px;
}
.section-desc {
  color:var(--text-2); font-size:0.92rem;
  max-width:580px; line-height:1.6;
  margin-bottom:32px;
}

/* ── Page hero (sous-pages) ─────────── */
.page-hero {
  max-width: var(--max-w); margin:0 auto;
  padding: 64px 24px 40px;
}
.page-hero h1 {
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  font-weight:800; letter-spacing:-0.04em;
  line-height:1.15; margin-bottom:14px;
}
.page-hero h1 span { color:var(--teal); }
.page-hero p {
  color:var(--text-2); font-size:1rem;
  max-width:560px; line-height:1.6;
}

/* ── Page hero avec image (2 colonnes) ───── */
.page-hero.with-image {
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:48px; align-items:center;
  padding: 64px 24px 56px;
}
.page-hero.with-image .hero-text { min-width:0; }
.page-hero.with-image .hero-art {
  border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}
.page-hero.with-image .hero-art img {
  width:100%; height:100%; object-fit:cover; display:block;
}
@media(max-width:900px) {
  .page-hero.with-image { grid-template-columns:1fr; gap:32px; }
  .page-hero.with-image .hero-art { aspect-ratio:16/9; max-height:360px; }
}

/* ── Cards ──────────────────────────── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  transition: border-color 0.2s;
}
.card:hover { border-color:var(--border-accent); }
.card-icon {
  width:40px; height:40px; border-radius:8px;
  background:var(--teal-dim); border:1px solid var(--border-accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-size:1rem; margin-bottom:14px;
}
.card-title {
  font-size:0.92rem; font-weight:600; letter-spacing:-0.02em;
  margin-bottom:6px;
}
.card-desc {
  color:var(--text-3); font-size:0.82rem; line-height:1.5;
}

/* ── Buttons ────────────────────────── */
.btn-p {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border-radius:6px;
  background:var(--teal); color:#09090b;
  font-weight:600; font-size:0.88rem;
  text-decoration:none; transition:opacity 0.15s;
  border:none; cursor:pointer;
}
.btn-p:hover { opacity:0.85; }
.btn-s {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border-radius:6px;
  background:transparent; border:1px solid var(--border);
  color:var(--text); font-weight:500; font-size:0.88rem;
  text-decoration:none; transition:all 0.15s;
  cursor:pointer;
}
.btn-s:hover { border-color:var(--teal); color:var(--teal); }

/* ── CTA final section ──────────────── */
.cta-final {
  max-width: var(--max-w); margin:0 auto;
  padding:60px 24px; text-align:center;
}
.cta-final h2 {
  font-size:clamp(1.3rem, 3vw, 1.8rem);
  font-weight:700; letter-spacing:-0.03em;
  margin-bottom:12px;
}
.cta-final p {
  color:var(--text-2); font-size:0.92rem;
  max-width:480px; margin:0 auto 24px;
}

/* ── Grid helpers ───────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ── Divider ────────────────────────── */
.divider {
  border:none; border-top:1px solid var(--border);
  margin:0;
}

/* ── Forms ──────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:0.82rem; font-weight:500;
  color:var(--text-2); margin-bottom:6px;
}
.form-input, .form-textarea, .form-select {
  width:100%; padding:10px 14px; border-radius:6px;
  background:var(--bg-subtle); border:1px solid var(--border);
  color:var(--text); font-size:0.88rem; font-family:inherit;
  transition:border-color 0.15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline:none; border-color:var(--teal);
}
.form-textarea { resize:vertical; min-height:120px; }

/* ── Accordion (FAQ) ────────────────── */
.accordion-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:8px;
  overflow:hidden;
}
.accordion-btn {
  width:100%; padding:16px 20px; border:none; background:none;
  color:var(--text); font-size:0.9rem; font-weight:500;
  text-align:left; cursor:pointer; display:flex;
  justify-content:space-between; align-items:center;
  font-family:inherit; transition:color 0.15s;
}
.accordion-btn:hover { color:var(--teal); }
.accordion-btn i { font-size:0.75rem; color:var(--text-3); transition:transform 0.2s; }
.accordion-item.open .accordion-btn i { transform:rotate(180deg); }
.accordion-body {
  max-height:0; overflow:hidden; transition:max-height 0.25s ease;
}
.accordion-body-inner {
  padding:0 20px 16px;
  color:var(--text-2); font-size:0.85rem; line-height:1.6;
}
.accordion-item.open .accordion-body { max-height:500px; }

/* ── Pricing cards ──────────────────── */
.price-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px 24px;
  display:flex; flex-direction:column; position:relative;
}
.price-card.featured { border-color:rgba(45,212,191,0.3); }
.price-badge {
  position:absolute; top:-10px; right:16px;
  padding:3px 12px; border-radius:20px;
  background:var(--teal); color:#09090b;
  font-size:0.7rem; font-weight:700;
}
.price-name {
  font-size:0.88rem; font-weight:600; letter-spacing:-0.02em;
  margin-bottom:4px;
}
.price-amount {
  font-size:1.8rem; font-weight:800; letter-spacing:-0.04em;
  margin-bottom:4px;
}
.price-amount span { font-size:0.82rem; font-weight:400; color:var(--text-3); }
.price-desc {
  color:var(--text-3); font-size:0.8rem; margin-bottom:20px;
  line-height:1.4;
}
.price-features { list-style:none; flex:1; margin-bottom:20px; }
.price-features li {
  font-size:0.82rem; color:var(--text-2);
  padding:6px 0; display:flex; align-items:flex-start; gap:8px;
}
.price-features li i { color:var(--teal); font-size:0.7rem; margin-top:3px; }

/* ── Responsive ─────────────────────── */
@media(max-width:768px) {
  .nav-links {
    display:none; position:absolute; top:56px; left:0; right:0;
    flex-direction:column; background:var(--bg-card);
    border-bottom:1px solid var(--border);
    padding:16px 24px; gap:16px;
  }
  .nav-links.open { display:flex; }
  .nav-hamburger { display:block; }
  .bottom-tab-bar { display:flex; }
  body.has-tab-bar { padding-bottom:72px; }
  .ft-grid { grid-template-columns:1fr 1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {
  .ft-grid { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
}

/* ── Hero logo orbital (Coraline 2026-05-10) ───────────────────────────────
   Remplace les hero photos par un logo animé cohérent thème teal/violet.
   Usage : <div class="hero-art hero-art-logo">
            <div class="hero-logo-orb">
              <div class="hero-logo-ring hero-logo-ring-1"></div>
              <div class="hero-logo-ring hero-logo-ring-2"></div>
              <div class="hero-logo-ring hero-logo-ring-3"></div>
              <div class="hero-logo-core"><i class="fas fa-{icon}"></i></div>
            </div>
          </div>
*/
.hero-art-logo,
.page-hero.with-image .hero-art-logo,
.hero .hero-img.hero-art-logo {
  aspect-ratio:1/1;
  max-width:340px; max-height:340px;
  margin:0 auto;
  box-shadow:none;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.hero-logo-orb {
  position:relative;
  width:240px; height:240px;
  display:flex; align-items:center; justify-content:center;
}
.hero-logo-ring {
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid rgba(74,222,128,0.25);
  animation:hero-logo-spin 18s linear infinite;
}
.hero-logo-ring-1 { inset:0;  border-color:rgba(74,222,128,0.30); }
.hero-logo-ring-2 { inset:24px; border-color:rgba(99,102,241,0.30); border-style:dashed; animation-duration:24s; animation-direction:reverse; }
.hero-logo-ring-3 { inset:50px; border-color:rgba(167,139,250,0.35); animation-duration:30s; }
.hero-logo-core {
  position:relative; z-index:2;
  width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), rgba(99,102,241,0.85));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
  box-shadow:0 18px 50px rgba(74,222,128,0.35), 0 0 0 6px rgba(255,255,255,0.04);
}
@keyframes hero-logo-spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }
@media(max-width:900px) {
  .page-hero.with-image .hero-art-logo { max-height:240px; max-width:240px; }
  .hero-logo-orb { width:180px; height:180px; }
  .hero-logo-core { width:90px; height:90px; font-size:2.2rem; }
  .hero-logo-ring-2 { inset:18px; }
  .hero-logo-ring-3 { inset:38px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-logo-ring { animation:none; }
}