/*
Theme Name: WebOptimize
Theme URI: https://www.weboptimize.fr/
Author: WebOptimize
Author URI: https://www.weboptimize.fr/
Description: Thème WordPress sur mesure pour WebOptimize — création de sites et SEO local. Design moderne, animations légères, entièrement responsive et pensé pour évoluer (villes gérées en contenu, pas en code).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: weboptimize
*/

/* ==========================================================================
   Variables & base
   ========================================================================== */
:root{
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --bg-alt-2: #eef2f9;
  --navy: #0b2545;
  --navy-light: #13315c;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --cyan: #06b6d4;
  --green: #16a34a;
  --text: #1c2333;
  --text-dim: #566079;
  --text-soft: #7c869c;
  --border: #e3e8f1;
  --card: #ffffff;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 8px rgba(11,37,69,0.06);
  --shadow-md: 0 8px 30px rgba(11,37,69,0.08);
  --shadow-lg: 0 20px 60px rgba(11,37,69,0.12);
  --container: 1180px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0a1122;
    --bg-alt: #0e1830;
    --bg-alt-2: #122038;
    --text: #e7ecf6;
    --text-dim: #aab4c9;
    --text-soft: #7e8aa6;
    --border: #22304c;
    --card: #101b32;
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 34px rgba(0,0,0,0.4);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);
  }
  header.site-header{ background: rgba(10,17,34,0.86); }
  .mobile-menu{ background: var(--bg); }
  .mobile-menu a{ color:#e7ecf6; }
  .field input, .field select, .field textarea{ background: rgba(255,255,255,0.03); color: var(--text); }
  .btn-secondary{ background: var(--card); }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition: color .15s ease; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.22; margin:0 0 16px; color: var(--navy); font-weight:800; letter-spacing:-0.01em; }
@media (prefers-color-scheme: dark){ h1,h2,h3,h4{ color:#f3f6fc; } }
p{ margin:0 0 16px; color: var(--text-dim); }
button{ font-family:inherit; }

/* ==========================================================================
   Animation d'apparition au scroll (avec effet cascade)
   ========================================================================== */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.reveal-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* Bouton d'appel flottant (mobile) */
.mobile-call-fab{
  display:none;
  position:fixed; bottom:22px; right:22px; z-index:250;
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color:#fff; align-items:center; justify-content:center;
  font-size:24px; box-shadow: 0 12px 28px rgba(37,99,235,0.4);
  animation: fab-pulse 2.4s ease-in-out infinite;
}
@keyframes fab-pulse{
  0%,100%{ box-shadow:0 12px 28px rgba(37,99,235,0.4); }
  50%{ box-shadow:0 12px 32px rgba(37,99,235,0.65); }
}
@media (max-width:768px){ .mobile-call-fab{ display:flex; } }

/* Ancres de navigation rapide (ex. page Tarifs) */
.quick-nav{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:22px 0; margin-bottom:8px; }
.quick-nav a{
  background: var(--card); border:1.5px solid var(--border); color: var(--navy);
  font-weight:700; font-size:14px; padding:10px 20px; border-radius:999px;
  box-shadow: var(--shadow-sm); transition: all .2s ease;
}
@media (prefers-color-scheme: dark){ .quick-nav a{ color:#f3f6fc; } }
.quick-nav a:hover{ border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-nav-wrap{ background: var(--bg-alt); border-bottom:1px solid var(--border); }

.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 88px 0; }
.section-alt{ background: var(--bg-alt); }
.section-navy{ background: linear-gradient(135deg, var(--navy) 0%, #0e2f5c 100%); color:#fff; }
.section-navy h2, .section-navy h3, .section-navy p{ color:#fff; }
.section-navy .text-dim{ color: rgba(255,255,255,0.75); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--blue); background: rgba(37,99,235,0.08);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.eyebrow.on-navy{ background: rgba(255,255,255,0.12); color:#8fd7ff; }

.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 38px); }
.section-head p{ font-size:17px; }

.text-center{ text-align:center; }

/* ==========================================================================
   Boutons (avec micro-interactions)
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius: 10px; font-weight:700; font-size:15px;
  border:2px solid transparent; cursor:pointer; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn:hover::after{ transform: translateX(120%); }
.btn-primary{ background: var(--blue); color:#fff; box-shadow: 0 6px 18px rgba(37,99,235,0.3); }
.btn-primary:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,0.38); }
.btn-secondary{ background: var(--card); color: var(--navy); border-color: var(--border); }
@media (prefers-color-scheme: dark){ .btn-secondary{ color:#f3f6fc; } }
.btn-secondary:hover{ border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover{ background: rgba(255,255,255,0.12); border-color:#fff; transform: translateY(-2px); }
.btn-cyan{ background: var(--cyan); color:#04303a; box-shadow:0 6px 18px rgba(6,182,212,0.3); }
.btn-cyan:hover{ transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:14px; }

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   Header
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:200;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  transition: box-shadow .25s ease, background-color .25s ease;
}
header.site-header.is-scrolled{ box-shadow: var(--shadow-md); }
.topbar{ background: var(--navy); color:#dce6f7; font-size:13px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#dce6f7; }
.topbar a:hover{ color:#8fd7ff; }
.topbar-links{ display:flex; gap:18px; }
.topbar-zones{ max-width:70%; text-align:right; }

nav.navbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; transition: padding .25s ease; }
.is-scrolled nav.navbar{ padding:10px 0; }
.logo{ display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; color: var(--navy); }
@media (prefers-color-scheme: dark){ .logo{ color:#f3f6fc; } }
.logo-icon-img{ height:38px; width:auto; display:block; transition: height .25s ease; }
.is-scrolled .logo-icon-img{ height:32px; }
.custom-logo{ height:38px; width:auto; }
.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{ font-weight:600; font-size:15px; color: var(--text); position:relative; padding-bottom:4px; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .2s ease;
}
.nav-links a:hover, .nav-links li.current-menu-item a{ color: var(--blue); }
.nav-links a:hover::after, .nav-links li.current-menu-item a::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-phone{ font-weight:700; color: var(--navy); font-size:15px; display:flex; align-items:center; gap:6px; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; width:38px; height:38px;
}
.burger span{ width:26px; height:3px; background: var(--navy); border-radius:2px; transition: transform .3s ease, opacity .2s ease; transform-origin:center; }
.burger.is-active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-menu{
  display:none; position:fixed; inset:0; top:0; background:var(--bg); z-index:300;
  padding:24px; overflow-y:auto;
}
.mobile-menu.open{ display:block; animation: menu-fade-in .25s ease; }
@keyframes menu-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
.mobile-menu a{ display:block; font-size:20px; font-weight:700; padding:14px 0; border-bottom:1px solid var(--border); color: var(--navy); }
@media (prefers-color-scheme: dark){ .mobile-menu a{ color:#f3f6fc; } }
.mobile-menu-top .logo{ display:flex; align-items:center; padding:0; border-bottom:none; }
.mobile-menu .cta-row{ margin-top:24px; flex-direction:column; }
.close-btn{ background:none; border:none; font-size:28px; cursor:pointer; color: var(--navy); }
@media (prefers-color-scheme: dark){ .close-btn{ color:#f3f6fc; } }

/* ==========================================================================
   Hero (avec aurore animée en arrière-plan)
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding: 76px 0 90px;
  background: var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.hero-aurora{
  position:absolute; inset:-25% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px circle at 18% 28%, rgba(37,99,235,0.20), transparent 60%),
    radial-gradient(520px circle at 82% 68%, rgba(6,182,212,0.18), transparent 60%),
    radial-gradient(420px circle at 55% 0%, rgba(37,99,235,0.10), transparent 60%);
  filter: blur(30px);
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(2%, -3%, 0) scale(1.06); }
}
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{ font-size: clamp(32px, 4.2vw, 50px); margin-bottom:20px; }
.hero .lead{ font-size:18px; color: var(--text-dim); margin-bottom:30px; max-width:560px; }
.hero-badges{ display:flex; gap:22px; margin-top:34px; flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--navy); }
@media (prefers-color-scheme: dark){ .hero-badge{ color:#f3f6fc; } }
.hero-visual{
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border:1px solid var(--border); padding:28px;
  transition: transform .4s var(--ease);
}
.hero-visual .mini-stat{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px dashed var(--border); }
.hero-visual .mini-stat:last-child{ border-bottom:none; }
.hero-visual .mini-stat strong{ color: var(--navy); font-size:15px; }
@media (prefers-color-scheme: dark){ .hero-visual .mini-stat strong{ color:#f3f6fc; } }
.hero-visual .mini-stat span{ color: var(--text-soft); font-size:13px; }
.hero-visual .tag-ok{ background: rgba(22,163,74,0.12); color: var(--green); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }

/* Bandeau villes défilant */
.zone-marquee{
  overflow:hidden; background: var(--navy); padding:14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.zone-marquee-track{ display:flex; gap:44px; width:max-content; animation: marquee 26s linear infinite; }
.zone-marquee:hover .zone-marquee-track{ animation-play-state: paused; }
.zone-marquee-track span{ color:#dce6f7; font-weight:700; font-size:14px; white-space:nowrap; letter-spacing:.02em; }
.zone-marquee-track span::after{ content:"•"; margin-left:44px; color: rgba(255,255,255,0.35); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Page header (pages internes) */
.page-hero{
  padding:60px 0 70px;
  background: linear-gradient(135deg, var(--navy) 0%, #0e2f5c 100%);
  color:#fff; text-align:center;
}
.page-hero h1{ color:#fff; font-size: clamp(30px, 4vw, 44px); }
.page-hero p{ color: rgba(255,255,255,0.8); max-width:640px; margin:0 auto 12px; font-size:17px; }
.breadcrumb{ font-size:13px; color: rgba(255,255,255,0.6); margin-bottom:18px; }
.breadcrumb a{ color: rgba(255,255,255,0.85); }

/* Grids */
.grid{ display:grid; gap:28px; min-width:0; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ==========================================================================
   Cartes
   ========================================================================== */
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:32px 28px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(37,99,235,0.25); }
.card-icon{
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(6,182,212,0.12));
  color: var(--blue); font-size:22px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition: transform .3s var(--ease);
}
.card:hover .card-icon{ transform: rotate(-6deg) scale(1.08); }
.card h3{ font-size:20px; margin-bottom:10px; }
.card .benefit{ font-size:13px; font-weight:700; color: var(--green); background: rgba(22,163,74,0.1); padding:6px 12px; border-radius:8px; display:inline-block; margin-bottom:14px; }
.card ul{ margin:14px 0; }
.card ul li{ position:relative; padding-left:24px; margin-bottom:8px; color: var(--text-dim); font-size:15px; }
.card ul li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:800; }

/* Pour qui */
.target-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px; }
.target-item{
  text-align:center; padding:26px 14px;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md);
  font-weight:700; color: var(--navy); font-size:14.5px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (prefers-color-scheme: dark){ .target-item{ color:#f3f6fc; } }
a.target-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--blue); }
.target-item .emoji{ font-size:30px; display:block; margin-bottom:10px; transition: transform .3s var(--ease); }
.target-item:hover .emoji{ transform: scale(1.15) rotate(-4deg); }

/* Advantages */
.adv-list{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; }
.adv-item{ display:flex; gap:16px; align-items:flex-start; }
.adv-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:10px;
  background: rgba(6,182,212,0.12); color:#0891b2;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.adv-item h4{ color: var(--navy); font-size:16.5px; margin-bottom:6px; }
@media (prefers-color-scheme: dark){ .adv-item h4{ color:#f3f6fc; } }
.adv-item p{ font-size:14.5px; margin-bottom:0; }

/* Steps / Méthode */
.steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:24px; position:relative; }
.step{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:30px 24px; position:relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num{
  width:40px; height:40px; border-radius:50%;
  background: var(--navy); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; font-size:16px;
}
.step h4{ color: var(--navy); font-size:17px; margin-bottom:8px; }
@media (prefers-color-scheme: dark){ .step h4{ color:#f3f6fc; } }
.step p{ font-size:14.5px; margin-bottom:0; }

/* Pricing */
.pricing-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:34px 28px; position:relative; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pricing-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card.featured{ border-color: var(--blue); box-shadow: var(--shadow-md); transform: scale(1.02); }
.pricing-card.featured:hover{ transform: scale(1.02) translateY(-4px); }
.pricing-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--blue); color:#fff; font-size:12px; font-weight:800;
  padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.price{ font-size:36px; font-weight:800; color: var(--navy); margin:14px 0 4px; }
@media (prefers-color-scheme: dark){ .price{ color:#f3f6fc; } }
.price span{ font-size:15px; font-weight:600; color: var(--text-soft); }
.price-note{ font-size:13px; color: var(--text-soft); margin-bottom:20px; }
.pricing-card ul{ margin-bottom:26px; flex-grow:1; }
.pricing-card ul li{ position:relative; padding-left:24px; margin-bottom:10px; font-size:14.5px; color: var(--text-dim); }
.pricing-card ul li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:800; }

.price-note-box{ background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-md); padding:24px 28px; text-align:center; margin-top:40px; }
.price-note-box p{ margin-bottom:0; font-size:15px; }

.price-lines{ background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-sm); padding:16px 18px; margin:6px 0 18px; overflow:hidden; }
.price-line{ display:flex; flex-direction:column; gap:3px; font-size:13px; color: var(--text-dim); padding:9px 0; border-bottom:1px dashed var(--border); }
.price-line:last-child{ border-bottom:none; }
.price-line span:first-child{ font-weight:700; color: var(--text-dim); }
.price-line strong{ color: var(--navy); font-weight:700; font-size:14.5px; }
@media (prefers-color-scheme: dark){ .price-line strong{ color:#f3f6fc; } }
.price-line-sub{ display:block; font-size:12px; font-weight:600; color: var(--text-soft); }
.price-line.total{ border-top:1.5px solid var(--border); border-bottom:none; margin-top:4px; padding-top:12px; }
.price-line.total span:first-child{ font-weight:800; color: var(--navy); }
@media (prefers-color-scheme: dark){ .price-line.total span:first-child{ color:#f3f6fc; } }
.price-line.total strong{ font-size:19px; color: var(--blue); }

/* ==========================================================================
   FAQ (accordéon fluide, ouverture/fermeture animée en JS)
   ========================================================================== */
.faq-item{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md); margin-bottom:14px; overflow:hidden; }
.faq-item summary{
  padding:20px 24px; font-weight:700; color: var(--navy); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; list-style:none; font-size:16px;
}
@media (prefers-color-scheme: dark){ .faq-item summary{ color:#f3f6fc; } }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; color: var(--blue); font-weight:400; transition: transform .3s ease; }
.faq-item[open] summary::after{ content:"+"; transform: rotate(135deg); }
.faq-item .faq-body{ max-height:0; overflow:hidden; opacity:0; padding:0 24px; transition: max-height .35s var(--ease), opacity .3s ease, padding .35s ease; }
.faq-item[open] .faq-body{ opacity:1; padding:0 24px 22px; }
.faq-item .faq-body-inner{ color: var(--text-dim); font-size:15px; }

/* CTA banner */
.cta-banner{
  background: linear-gradient(135deg, var(--navy) 0%, #0e2f5c 60%, #0a4a63 100%);
  border-radius: var(--radius-lg); padding:56px 48px; text-align:center; color:#fff;
}
.cta-banner h2{ color:#fff; font-size: clamp(24px,3vw,34px); }
.cta-banner p{ color: rgba(255,255,255,0.8); max-width:560px; margin:0 auto 28px; }
.cta-banner .cta-row{ justify-content:center; }

/* Trust section */
.trust-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:24px; }
.trust-item{ text-align:center; padding:20px; }
.trust-item .num{ font-size:32px; font-weight:800; color: var(--blue); display:block; margin-bottom:6px; }
.trust-item span{ font-size:14px; color: var(--text-dim); }
@media (prefers-color-scheme: dark){ .trust-item span{ color: rgba(255,255,255,0.75); } }

/* Case study card */
.case-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); padding:36px; box-shadow: var(--shadow-sm); }
.case-tag{ display:inline-block; background: rgba(37,99,235,0.08); color: var(--blue); font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.case-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.case-col h4{ color: var(--navy); font-size:15px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em; }
@media (prefers-color-scheme: dark){ .case-col h4{ color:#f3f6fc; } }
.upcoming-card{ border:2px dashed var(--border); border-radius: var(--radius-lg); padding:36px; text-align:center; color: var(--text-soft); transition: border-color .25s ease, transform .25s ease; }
.upcoming-card:hover{ border-color: var(--blue); transform: translateY(-4px); }

/* Forms */
.form-wrap{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); padding:38px; box-shadow: var(--shadow-md); }
.form-row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:14px; color: var(--navy); margin-bottom:6px; }
@media (prefers-color-scheme: dark){ .field label{ color:#f3f6fc; } }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size:15px; font-family:inherit; color: var(--text); background:#fbfcfe;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:13px; color: var(--text-soft); margin-top:10px; }
.form-note.is-success{ color: var(--green); font-weight:700; }
.form-note.is-error{ color:#dc2626; font-weight:700; }
.btn[disabled]{ opacity:.7; cursor:progress; }

.contact-info-list{ display:flex; flex-direction:column; gap:22px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-item .ic{ width:46px; height:46px; border-radius:10px; background: rgba(37,99,235,0.08); color: var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item h4{ color: var(--navy); font-size:16px; margin-bottom:4px; }
@media (prefers-color-scheme: dark){ .contact-info-item h4{ color:#f3f6fc; } }
.contact-info-item p{ margin-bottom:0; font-size:14.5px; }
.zone-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.zone-tag{ background: var(--bg-alt); border:1px solid var(--border); padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600; color: var(--navy); transition: all .2s ease; }
@media (prefers-color-scheme: dark){ .zone-tag{ color:#f3f6fc; } }
a.zone-tag:hover{ border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* Contenu légal */
.legal-content h2{ font-size:22px; margin-top:36px; }
.legal-content p, .legal-content li{ color: var(--text-dim); font-size:15px; }
.legal-content ul{ margin-bottom:16px; padding-left:20px; list-style: disc; }
.legal-content .placeholder{ background:#fff8e1; border:1px dashed #e0b400; padding:2px 6px; border-radius:4px; color:#7a5b00; font-weight:600; }

/* Footer */
footer{ background: #0a1c38; color: #b9c6dd; padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr minmax(0,1fr) minmax(0,1fr) 1.2fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-logo{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; color:#fff; margin-bottom:16px; }
.footer-logo .logo-icon-img{ height:30px; background:#fff; border-radius:50%; padding:4px; }
.footer-col h5{ color:#fff; font-size:15px; margin-bottom:18px; font-weight:700; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a:hover{ color:#8fd7ff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:13px; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:#8fd7ff; }
.footer-note{ text-align:center; font-size:12.5px; color: rgba(255,255,255,0.45); padding:0 0 26px; margin:0; }
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition: background .2s ease, transform .2s ease; }
.social-row a:hover{ background: var(--blue); transform: translateY(-3px); }

/* Utilities */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-dim{ color: var(--text-dim); }
.hide-mobile{ display:block; }
.show-mobile{ display:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:520px; }
  .target-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .adv-list{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .trust-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-grid{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width: 768px){
  .nav-links, .nav-phone, .topbar-links{ display:none; }
  .burger{ display:flex; flex-shrink:0; }
  .nav-cta{ gap:10px; }
  .logo{ font-size:17px; gap:8px; }
  .logo-icon-img{ height:30px; }
  .nav-cta .btn-sm{ padding:10px 14px; font-size:13px; }
  .section{ padding:60px 0; }
  .hero{ padding:48px 0 60px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .target-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cta-banner{ padding:40px 24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .trust-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-card.featured{ transform:none; }
  .hide-mobile{ display:none; }
  .show-mobile{ display:block; }
  .topbar .container{ justify-content:center; text-align:center; }
  .topbar-zones{ max-width:100%; text-align:center; }
}

@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr; }
  .target-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .case-card, .form-wrap{ padding:24px 20px; }
}