/* ═══════════════════════════════════════════════════════════
   JOURNAL.RE — DESIGN SYSTEM
   Site commercial : Publicité & Marketing Digital à La Réunion
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --bg:           #0A0A0A;
  --bg-elev:      #111111;
  --bg-elev-2:    #161616;
  --border:       #1F1F1F;
  --border-strong:#2A2A2A;
  --blue:         #1E90FF;
  --blue-hover:   #1478E0;
  --blue-soft:    rgba(30,144,255,0.10);
  --blue-soft-2:  rgba(30,144,255,0.06);
  --text:         #FFFFFF;
  --text-2:       #9CA3AF;
  --text-3:       #6B7280;
  --success:      #10B981;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --container:    1200px;
  --gutter:       24px;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --radius-card:  16px;
  --radius-btn:   999px;
  /* Ombres de bloc — finition premium (filet de lumière + profondeur douce) */
  --block-shadow:          inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.45), 0 20px 44px -24px rgba(0,0,0,0.70);
  --block-shadow-featured: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(30,144,255,0.35), 0 26px 64px -28px rgba(30,144,255,0.40);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 20px;
}

/* Logo : icône + "Journal.re" */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.logo:hover { opacity: 0.85; }
.logo img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

/* Navigation centrale */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.header-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
  white-space: nowrap;
}
.header-nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.header-nav a.active {
  color: var(--text);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Boutons droite */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Toggle hamburger mobile */
.header-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text);
  transition: background 0.2s;
  cursor: pointer;
  border: none;
  background: none;
}
.header-mobile-toggle:hover { background: rgba(255,255,255,0.06); }

/* ── MOBILE MENU — panneau slide depuis la droite ──────────── */

/* Fond semi-opaque */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 149;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mobile-overlay.open { display: block; }

/* Panneau */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: #111111;
  border-left: 1px solid var(--border);
  z-index: 150;
  display: flex !important;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-out);
  overflow: hidden;
  box-shadow: -24px 0 60px rgba(0,0,0,0.55);
}
.mobile-menu.open { transform: translateX(0); }

/* Header panneau : logo + fermer */
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-menu-top .logo { font-size: 17px; gap: 9px; pointer-events: none; }
.mobile-menu-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mobile-menu-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Liens navigation */
.mobile-menu-nav {
  flex: 1;
  padding: 8px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s var(--ease-out);
  text-decoration: none;
}
.mobile-menu-nav a:last-child { border-bottom: none; }
.mobile-menu-nav a:hover { color: var(--text); }
.mobile-menu-nav a.active { color: var(--text); }
.mobile-menu-nav .nav-arrow {
  color: var(--border-strong);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.mobile-menu-nav a:hover .nav-arrow { color: var(--blue); transform: translateX(3px); }
.mobile-menu-nav a.active .nav-arrow { color: var(--blue); }

/* Boutons bas du panneau */
.mobile-menu-footer {
  padding: 16px 20px 36px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.mobile-menu-footer .btn {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
}

/* Responsive header */
@media (max-width: 960px) {
  .header-nav { display: none; }
  .header-actions .btn-outline { display: none; }
  .header-mobile-toggle { display: flex; }
}
@media (max-width: 768px) {
  /* Patron "presse" : burger à gauche · logo centré · "Nos offres" à droite */
  .header-inner { position: relative; }
  /* Logo centré + réduit pour ne pas coller au bouton "Nos offres" */
  .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; gap: 7px; }
  .logo img { width: 24px; height: 24px; }
  .header-actions { width: 100%; justify-content: space-between; gap: 0; }
  .header-actions .btn { display: none; }                 /* cache "Devis gratuit" */
  .header-actions .btn-primary { display: inline-flex; order: 1; } /* "Nos offres" à droite */
  .header-mobile-toggle { display: flex; order: -1; }     /* burger à gauche */
}
@media (max-width: 360px) {
  /* Très petits écrans : on compacte pour éviter tout chevauchement */
  .header-actions .btn-primary { padding: 8px 14px; font-size: 13px; }
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: 1;
}
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(30,144,255,0.5); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid #3A3A3A; }
.btn-outline:hover { border-color: var(--text-2); background: rgba(255,255,255,0.05); }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-xl { padding: 16px 36px; font-size: 16px; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--blue-soft) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.hero-center {
  max-width: 860px;
  text-align: center;
  margin: 0 auto;
}
.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }

/* Badge eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--blue-soft);
  border: 1px solid rgba(30,144,255,0.22);
  border-radius: 999px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 28px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Titres */
h1 {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 24px;
}
h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 18px;
}
h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 10px;
}
/* Accent serif italique en bleu — signature éditoriale Journal.re */
h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}

.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 640px;
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Ligne de preuve sous les boutons du héro (chiffres clés, dès l'arrivée) */
.hero-proof { margin-top: 22px; font-size: 14px; color: var(--text-3); line-height: 1.6; }
.hero-proof strong { color: var(--text); font-weight: 700; }
.hero-center .hero-proof { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Hero : entrée en douceur au chargement (motion discret) ─────
   Les éléments du hero apparaissent en cascade (fondu + léger glissé).
   Encadré par "prefers-reduced-motion: no-preference" → si le visiteur
   a demandé moins d'animations, tout reste affiché normalement. */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > *, .hero-center > * { opacity: 0; animation: heroIn 0.9s var(--ease-out) both; }
  .hero .eyebrow      { animation-delay: 0.05s; }
  .hero h1            { animation-delay: 0.15s; }
  .hero .hero-sub     { animation-delay: 0.28s; }
  .hero .hero-actions { animation-delay: 0.40s; }
  .hero .hero-proof   { animation-delay: 0.52s; }

  /* Petit point "live" qui pulse doucement (signal d'un média en direct) */
  .eyebrow-dot { position: relative; }
  .eyebrow-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--blue);
    animation: dotPing 2.6s var(--ease-out) infinite;
  }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dotPing {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ── STATS BAR ───────────────────────────────────────────────── */
.stats {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 0 28px;
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.stat-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.stat-context { font-size: 13px; color: var(--text-3); line-height: 1.4; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { padding: 100px 0; }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.section-sub { font-size: 17px; color: var(--text-2); line-height: 1.65; }

/* ── GRILLES GÉNÉRIQUES ───────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ── CARD GÉNÉRIQUE ──────────────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-soft);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--blue);
  flex-shrink: 0;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ── PACKS ───────────────────────────────────────────────────── */
.packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pack {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.pack:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.pack-featured {
  background: var(--bg-elev-2);
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 30px 80px -20px var(--blue-soft);
}
.pack-featured:hover { transform: translateY(-6px); }
.pack-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: white;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.pack-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.pack-featured .pack-name { color: var(--blue); }
.pack-tagline { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: 18px; }
.pack-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.pack-price-num {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pack-price-unit { font-size: 15px; color: var(--text-2); }
/* Le bouton est désormais placé juste sous le prix (au-dessus des features) */
.pack .btn { width: 100%; justify-content: center; }
.pack-features-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
  margin: 24px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.pack-features { list-style: none; }
.pack-features li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.pack-features li:last-child { border-bottom: none; }
.pack-features svg { flex-shrink: 0; margin-top: 2px; color: var(--blue); }
/* Dans une carte, on n'affiche que les 4 meilleures features ; "et X autres" déroule le reste */
.pack .pack-features li:nth-child(n+5) { display: none; }
.pack.is-open .pack-features li:nth-child(n+5) { display: flex; }
.pack-more {
  margin-top: 14px;
  background: none; border: none; padding: 0;
  color: var(--blue); font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; align-self: flex-start;
  transition: color 0.2s var(--ease-out);
}
.pack-more:hover { color: var(--blue-hover); text-decoration: underline; }

/* ── ÉTUDES DE CAS ───────────────────────────────────────────── */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.case {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.case:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.case-image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-image-label { color: var(--text-3); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.case-body { padding: 32px; }
.case-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.case-meta span:nth-child(2) { color: var(--blue); }
.case-body h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--text);
}
.case-desc { color: var(--text-2); margin-bottom: 24px; line-height: 1.6; font-size: 15px; }
.case-result {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.case-result-num {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.case-result-label { color: var(--text-2); font-size: 14px; line-height: 1.4; }

/* ── GUIDES ──────────────────────────────────────────────────── */
.guides-grid { display: flex; flex-direction: column; gap: 16px; }
.guide-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  cursor: pointer;
}
.guide-card:hover { border-color: var(--border-strong); transform: translateX(4px); }
.guide-num {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  opacity: 0.7;
}
.guide-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 7px;
}
.guide-card h3 { font-size: 18px; margin-bottom: 8px; }
.guide-card p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.guide-meta {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-3);
}

/* ── FORMULAIRE DE CONTACT ───────────────────────────────────── */
.contact-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.contact-info {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  margin-bottom: 14px;
  font-size: 15px;
}
.contact-info-item svg { color: var(--blue); flex-shrink: 0; }
.form {
  /* Même traitement « élevé » que les autres cartes du site
     (.card/.pack/.contact-card) : dégradé bleu subtil + bordure forte + ombre */
  background:
    linear-gradient(180deg, rgba(30,144,255,0.055), rgba(255,255,255,0) 42%),
    var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: var(--block-shadow);
  border-radius: var(--radius-card);
  padding: 40px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 7px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.form-field textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-field select option { background: var(--bg-elev); }
.form-field-required label::after { content: " *"; color: var(--blue); }
.form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-note { margin-top: 14px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ── SECTION CTA ─────────────────────────────────────────────── */
.cta-section {
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, var(--blue-soft) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section > .container { position: relative; z-index: 1; }
.cta-section .section-eyebrow { margin-bottom: 14px; }
.cta-section h2 { margin-bottom: 18px; }
.cta-section .section-sub { max-width: 540px; margin: 0 auto 40px; }
.cta-section .hero-actions { justify-content: center; }

/* ── PROCESSUS / ÉTAPES ──────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step {
  padding: 0 28px;
  border-left: 1px solid var(--border);
  position: relative;
}
.step:first-child { border-left: none; padding-left: 0; }
.step-num {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.7;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ── SERVICES (marketing digital) ───────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.service-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.service-card p { color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ── LISTE FEATURES ──────────────────────────────────────────── */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.feature-list span { color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* ── TESTIMONIAL / QUOTE ─────────────────────────────────────── */
.testimonial {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 40px;
  position: relative;
}
.testimonial::before {
  content: "\201C";
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 0.8;
  color: var(--blue);
  opacity: 0.3;
  position: absolute;
  top: 24px;
  left: 32px;
}
.testimonial-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  margin-bottom: 24px;
  padding-top: 24px;
}
.testimonial-author { display: flex; gap: 14px; align-items: center; }
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 16px;
  font-weight: 600;
}
.testimonial-name { font-size: 15px; font-weight: 600; }
.testimonial-role { font-size: 13px; color: var(--text-3); }

/* ── BADGE INLINE ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-green { background: rgba(16,185,129,0.10); color: var(--success); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
}
.footer-inner { display: flex; flex-direction: column; gap: 40px; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer-brand .logo { margin-bottom: 14px; pointer-events: none; }
.footer-brand p { color: var(--text-3); font-size: 14px; max-width: 260px; line-height: 1.6; }
.footer-nav-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.footer-nav-col a {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-nav-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-3); }
.footer-legal a { transition: color 0.2s; }
.footer-legal a:hover { color: var(--text); }
.footer-legal .sep { opacity: 0.4; }
.footer-copy { font-size: 13px; color: var(--text-3); }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); }

/* ── HOME : BLOCS SERVICES ───────────────────────────────────── */
.home-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.home-service-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.home-service-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.home-service-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.home-service-card h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.home-service-card p {
  color: var(--text-2);
  line-height: 1.6;
  font-size: 16px;
  flex: 1;
  margin-bottom: 28px;
}
.home-service-list {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-service-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
}
.home-service-list svg { color: var(--blue); flex-shrink: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .step:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .packs-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .cases-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; gap: 48px; }
  .home-services { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { padding: 72px 0 60px; }
  .section { padding: 72px 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat { border-left: none !important; padding-left: 0 !important; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .step { border-left: none !important; padding-left: 0 !important; }
  .form-row { grid-template-columns: 1fr; }
  .guide-card { flex-direction: column; gap: 12px; }
  .guide-num { width: auto; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .form { padding: 28px 20px; }
  .packs-grid { max-width: 100%; }
}

/* FAQ accordéon */
details summary { cursor: pointer; user-select: none; gap: 16px; }
details summary svg { transition: transform 0.2s ease; flex-shrink: 0; }
details[open] summary svg { transform: rotate(180deg); }
details + details { margin-top: 0; }

/* Grille comparaison */
.comparison-grid { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 640px) {
  .comparison-grid { grid-template-columns: 1fr !important; }
}

/* ── CORRECTIONS MOBILE ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* Boutons hero pleine largeur sur mobile */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Réduire le padding latéral sur petits écrans */
  .container { padding: 0 16px; }

  /* Formulaires : champs pleine largeur */
  .form-field { width: 100%; }

  /* Sections : réduire les marges internes */
  .section-head { margin-bottom: 40px; }

  /* Packs : un seul par ligne bien centré */
  .packs-grid { max-width: 100%; padding: 0; }

  /* Cards : padding réduit sur mobile */
  .card { padding: 24px 20px; }
  .pack { padding: 28px 24px; }
  .case-body { padding: 24px 20px; }
}
@media (max-width: 480px) {
  /* Header mobile : logo seul + hamburger */
  .header-inner { gap: 0; }

  /* Boutons dans le footer mobile-menu */
  .mobile-menu-footer { gap: 10px; }
}
/* Tableau responsive : texte plus petit sur mobile */
@media (max-width: 640px) {
  table { font-size: 12px !important; }
  table th, table td { padding: 10px 10px !important; }
}

/* ════════════════════════════════════════════════════════════════
   OFFRES & TARIFS — section à onglets (page publicité)
   Desktop : barre d'onglets. Mobile (≤640px) : menu déroulant.
   ════════════════════════════════════════════════════════════════ */

/* La barre d'onglets (visible sur PC) */
.offers-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 48px;
}
/* Un onglet = un bouton "pilule" */
.offers-tab {
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.offers-tab:hover { color: var(--text); border-color: var(--text-2); }
/* L'onglet actif = pilule bleue pleine */
.offers-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Le menu déroulant (visible seulement sur mobile) */
.offers-switch { display: none; margin-bottom: 40px; }
.offers-switch-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.offers-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
}
.offers-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* Les panneaux : un seul visible à la fois */
.offers-panel { display: none; }
.offers-panel.active { display: block; animation: offersFade 0.3s var(--ease-out); }
@keyframes offersFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Petit titre en haut de chaque panneau */
.offers-panel-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.offers-panel-head h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.offers-panel-head h3 em { font-family: var(--font-serif); font-style: italic; color: var(--blue); }
.offers-panel-head p { font-size: 16px; color: var(--text-2); line-height: 1.6; margin-top: 10px; }

/* Bascule onglets → menu déroulant sur mobile */
@media (max-width: 640px) {
  .offers-tabs { display: none; }
  .offers-switch { display: block; }
}

/* Bande CTA fine (remplace le formulaire en double en bas de la page pub) */
.cta-band {
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(30,144,255,0.055), rgba(255,255,255,0) 42%),
    var(--bg-elev);
  box-shadow: var(--block-shadow);
  border-radius: var(--radius-card);
  padding: 40px;
  text-align: center;
}
.cta-band h2 { font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 12px; }
.cta-band p { color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto 24px; }

/* Lien "Sur devis" / petit lien-action dans les tableaux */
.devis-link {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out);
}
.devis-link:hover { color: var(--blue-hover); text-decoration: underline; }

/* Champ "Offre" pré-rempli sur contact.html : surlignage sobre à l'arrivée */
.offer-prefill { transition: box-shadow 0.3s var(--ease-out); }
.offer-prefill.is-highlight { animation: offerPulse 2s var(--ease-out); }
@keyframes offerPulse {
  0%   { box-shadow: 0 0 0 0 var(--blue-soft); }
  30%  { box-shadow: 0 0 0 4px var(--blue-soft); }
  100% { box-shadow: 0 0 0 0 rgba(30,144,255,0); }
}

/* Variante 3 colonnes pour la barre de stats (page d'accueil).
   Limité au desktop : en dessous de 901px, les règles responsive
   .stats-grid (2 puis 1 colonne) reprennent normalement.
   Texte centré dans chaque colonne + fins séparateurs entre les 3,
   pour un rendu équilibré (et non calé à gauche comme avec 4 stats). */
@media (min-width: 901px) {
  .stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid.cols-3 .stat {
    text-align: center;
    border-left: none;
    padding: 0 28px;
  }
  .stats-grid.cols-3 .stat + .stat { border-left: 1px solid var(--border); }
}

/* Apparition au défilement — sobre & premium.
   La classe .will-reveal n'est posée QUE par animations.js, et
   uniquement sur des blocs sous l'écran : sans JS, rien n'est masqué. */
.will-reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.will-reveal.revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
/* Filet de sécurité : si "animations réduites", tout reste visible */
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Encadré « À appliquer dès demain » (page marketing-digital) ──
   Petit bloc conseil sous un paragraphe : valeur concrète, sobre,
   filet bleu à gauche pour le repérer d'un coup d'œil. */
.tip {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 2px solid var(--blue);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}
.tip strong { color: var(--text); font-weight: 600; }

/* ── Frise « 6 temps » qui se remplit au scroll ───────────────────
   Principe : un rail vertical gris ; un remplissage bleu dont la
   hauteur est pilotée en JS. Chaque étape s'allume quand on la
   dépasse (classe .is-active posée par le JS).

   PROGRESSIF : par défaut (sans JS / animations réduites / vieux
   navigateur) la frise est PLEINE et toutes les étapes allumées,
   donc 100 % lisible. Le JS ajoute .js-on : seulement alors elle
   démarre vide et se remplit au défilement. */
.frise {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.frise-step {
  display: flex;
  gap: 22px;
  position: relative;
  padding-bottom: 38px;
}
.frise-step:last-child { padding-bottom: 0; }

/* Le rail (ligne verticale de fond) */
.frise-rail {
  position: absolute;
  left: 17px;          /* centre du node 36px = 18px → rail 2px = 17px */
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--border-strong);
  border-radius: 2px;
}
/* Le remplissage bleu (hauteur posée par le JS) */
.frise-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;        /* défaut SANS JS : plein */
  background: var(--blue);
  border-radius: 2px;
  transition: height 0.15s linear;
}
.frise.js-on .frise-rail-fill { height: 0; }   /* avec JS : démarre vide */

/* Les pastilles numérotées */
.frise-node {
  position: relative;
  z-index: 1;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  transition: border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out),
              background 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
/* Avec JS : étapes éteintes au départ, allumées via .is-active */
.frise.js-on .frise-node {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text-3);
}
.frise.js-on .frise-step.is-active .frise-node {
  background: var(--bg-elev);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 0 5px var(--blue-soft);
}

.frise-content { padding-top: 4px; }
.frise-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease-out);
}
.frise-content p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}
.frise.js-on .frise-content h3 { color: var(--text-2); }
.frise.js-on .frise-step.is-active .frise-content h3 { color: var(--text); }

@media (max-width: 480px) {
  .frise-step { gap: 16px; }
  .frise-content h3 { font-size: 16px; }
}

/* Filet de sécurité : « animations réduites » → frise pleine même
   si .js-on a été posée (le JS s'arrête avant, ceci est une ceinture
   de sécurité supplémentaire). */
@media (prefers-reduced-motion: reduce) {
  .frise.js-on .frise-rail-fill { height: 100% !important; }
  .frise.js-on .frise-node {
    background: var(--bg-elev) !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
  }
  .frise.js-on .frise-content h3 { color: var(--text) !important; }
}

/* ── Section « méthode décryptée » : accordéon sobre ──────────────
   6 questions repliées par défaut (anti « pâté »). Même esprit que
   les FAQ du site : carte sobre, chevron qui pivote à l'ouverture
   (rotation gérée par la règle globale `details[open] summary svg`).
   Le contenu reste dans le code → toujours lu par Google / IA. */
.methode-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.methode-q {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.2s var(--ease-out);
}
.methode-q[open] { border-color: var(--border-strong); }
.methode-q summary {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  list-style: none;                 /* masque la flèche native */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.methode-q summary::-webkit-details-marker { display: none; } /* Safari */
.methode-q summary svg { color: var(--text-3); flex-shrink: 0; }
.methode-q > p { margin-top: 14px; }
@media (max-width: 480px) {
  .methode-q { padding: 18px; }
  .methode-q summary { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════
   POLISH & MOTION — passe de finition visible (DA sobre, #1E90FF)
   Tout est encadré par "reduced-motion" quand c'est animé.
   ════════════════════════════════════════════════════════════════ */

/* 1. Hero : le halo bleu "respire" lentement → ambiance vivante */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroGlow 9s ease-in-out infinite; }
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.14); }
}

/* 2. Rythme du scroll : certaines sections deviennent une bande surélevée */
.section-alt { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* 3. Cartes : survol nettement plus marqué (relief + liseré bleu + ombre) */
.card { transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(30,144,255,0.45);
  box-shadow: 0 24px 60px -28px rgba(30,144,255,0.45);
}

/* 4. Packs : survol relief + ombre bleue */
.pack { transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.pack:hover { transform: translateY(-6px); box-shadow: 0 26px 64px -30px rgba(30,144,255,0.42); }
/* Le pack vedette (Notoriété) garde son contour bleu au survol */
.pack-featured:hover { border-color: var(--blue); }

/* 5. Stats : pas d'effet au survol — le compteur qui grimpe suffit. */

/* 6. Tableaux : la ligne se surligne au survol (lisibilité + interactivité) */
#offres table tbody tr, #pourquoi table tbody tr { transition: background 0.2s var(--ease-out); }
#offres table tbody tr:hover, #pourquoi table tbody tr:hover { background: rgba(30,144,255,0.07); }

/* 7. Onglets pilule : petit feedback de survol */
.offers-tab { transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.offers-tab:not(.active):hover { transform: translateY(-2px); }

/* 8. Apparition au scroll un peu plus marquée (posée par animations.js) */
.will-reveal { transform: translateY(30px) scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   PRÉSENTATION DES OFFRES — cartes scannables (à la carte / premium),
   add-ons groupés (options), colonnes égales (performance).
   But : que le prospect sache où regarder et puisse agir tout de suite.
   ════════════════════════════════════════════════════════════════ */

/* Cartes-offres (à la carte & premium) */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.offer-card {
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.offer-card:hover { transform: translateY(-4px); border-color: rgba(30,144,255,0.45); box-shadow: 0 18px 44px -24px rgba(30,144,255,0.45); }
.offer-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.offer-card h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.offer-tag { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-3); background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.offer-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 18px; flex: 1; }
.offer-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; }
.offer-price { font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.offer-price small { font-size: 12px; color: var(--text-3); font-weight: 400; }
.offer-price.devis { font-size: 17px; color: var(--text-2); }
.offer-card .btn { padding: 8px 16px; font-size: 13px; }

/* Options : add-ons groupés et scannables */
.options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
.option-group-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.option-row:last-child { border-bottom: none; }
.option-row > span { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.option-price { flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--text); background: var(--blue-soft); border: 1px solid rgba(30,144,255,0.22); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .options-grid { grid-template-columns: 1fr; } }

/* À la performance : colonnes égales + CTA aligné en bas */
#panel-performance .card { display: flex; flex-direction: column; }
#panel-performance .card p { flex: 1; margin-bottom: 0; }
#panel-performance .card .devis-link { margin-top: 18px; }

/* Section "audience" : cartes non cliquables → on retire le soulèvement,
   mais on garde le liseré + l'ombre bleus au survol (surbrillance légère,
   cohérente avec les autres blocs). */
#audience .grid-3 .card:hover { transform: none; }

/* ════════════════════════════════════════════════════════════════
   BEAUX BLOCS — finition premium statique (inspiration Linear / Vercel
   / Stripe). Ce qui rend un bloc beau sur fond sombre :
   1) un léger dégradé bleuté en haut (identité, profondeur),
   2) un filet de lumière sur le bord supérieur (effet "verre"),
   3) une ombre douce et étalée (profondeur, pas un trait plat).
   Aucune animation au survol : les blocs sont beaux, sobres, immobiles.
   ════════════════════════════════════════════════════════════════ */
.card, .pack, .offer-card, .case,
.home-service-card, .guide-article, .methode-q {
  background:
    linear-gradient(180deg, rgba(30,144,255,0.055), rgba(255,255,255,0) 42%),
    var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: var(--block-shadow);
}
/* Arrondi de carte là où la classe est réutilisée sans son style propre
   (ex. blocs FAQ .guide-article de contact.html) */
.guide-article { border-radius: var(--radius-card); }
/* Le pack vedette (Notoriété) = le seul à porter franchement le bleu */
.pack-featured {
  background:
    linear-gradient(180deg, rgba(30,144,255,0.10), rgba(255,255,255,0) 46%),
    var(--bg-elev-2);
  border: 1px solid var(--blue);
  box-shadow: var(--block-shadow-featured);
}
/* Blocs informatifs (non cliquables) : aucun effet au survol */
.card:hover, .case:hover, .home-service-card:hover, .guide-article:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: var(--block-shadow);
}
/* Blocs campagne/offres : surbrillance bleue au survol (animation validée) */
.pack, .offer-card {
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* Cartes-offres (à la carte / premium) : surbrillance bleue au survol */
.offer-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.07), 0 24px 56px -26px rgba(30,144,255,0.50);
}
/* Packs : halo bleu au survol, MAIS bordure neutre (pas de contour bleu,
   illisible) — le contour bleu reste réservé au pack "plus choisi". */
.pack:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 24px 56px -26px rgba(30,144,255,0.50);
}
.pack-featured:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: var(--block-shadow-featured), 0 24px 56px -26px rgba(30,144,255,0.50);
}