@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --bg:    #f4f6fb;
  --bg2:   #eef1f8;
  --bg3:   #ffffff;
  --text:  #0f172a;
  --gray:  #64748b;
  --gray2: #94a3b8;
  --border:#dde3ef;

  --orange:        #ea580c;
  --orange-hover:  #c2410c;
  --orange-light:  rgba(234,88,12,.09);
  --orange-border: rgba(234,88,12,.25);

  --cyan:        #0891b2;
  --cyan-hover:  #0e7490;
  --cyan-light:  rgba(8,145,178,.09);
  --cyan-border: rgba(8,145,178,.25);

  --white: #ffffff;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { background:var(--bg); color:var(--text); font-family:Inter,sans-serif; overflow-x:hidden }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px;
  transition:all .3s;
}
.logo {
  display:flex; align-items:center; gap:6px;
  font-size:20px; font-weight:700; letter-spacing:-.02em; text-decoration:none;
}
.logo-ady  { color:var(--text) }
.logo-tek  { color:var(--orange) }
.logo-dot  {
  width:8px; height:8px; border-radius:50%;
  background:var(--orange); animation:pulse 2s infinite; margin-right:2px;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1) }
  50%     { opacity:.6; transform:scale(.8) }
}
.nav-links {
  display:flex; align-items:center; gap:8px; list-style:none;
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  border-radius:999px; padding:6px 8px; backdrop-filter:blur(10px);
}
.nav-links a {
  color:var(--gray); text-decoration:none; font-size:13.5px;
  padding:6px 16px; border-radius:999px; transition:all .25s;
}
.nav-links a:hover { color:var(--text); background:rgba(15,23,42,.06) }
.nav-cta {
  background:var(--orange); color:#fff;
  padding:9px 22px; border-radius:999px; font-size:13.5px; font-weight:600;
  text-decoration:none; transition:all .25s;
}
.nav-cta:hover { background:var(--orange-hover); transform:translateY(-1px); box-shadow:0 8px 24px rgba(234,88,12,.3) }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 60px; z-index:1;
  background:linear-gradient(160deg, #f4f6fb 0%, #edf2fb 55%, #e8f4f8 100%);
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(8,145,178,.10), transparent 70%);
  top:-120px; right:-80px; pointer-events:none;
}
.hero::after {
  content:''; position:absolute;
  width:450px; height:450px; border-radius:50%;
  background:radial-gradient(circle, rgba(234,88,12,.09), transparent 70%);
  bottom:-80px; left:-60px; pointer-events:none;
}
/* on garde l'orbe pour le parallax JS */
.hero-orb {
  position:absolute; width:750px; height:750px; border-radius:50%;
  pointer-events:none; filter:blur(90px); opacity:.25;
  animation:orb-float 9s ease-in-out infinite;
  background:radial-gradient(circle at 40% 40%, #ea580c, #9a3412 35%, #0e7490 65%, transparent 80%);
  left:50%; top:50%; transform:translateX(-50%) translateY(-50%);
}
@keyframes orb-float {
  0%,100% { transform:translateX(-50%) translateY(-50%) scale(1) }
  33%     { transform:translateX(-50%) translateY(-54%) scale(1.05) }
  66%     { transform:translateX(-48%) translateY(-47%) scale(.97) }
}
.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange-light); border:1px solid var(--orange-border);
  color:var(--orange); border-radius:999px; padding:6px 16px;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:32px; opacity:0; animation:fade-up .8s .2s forwards;
}
.hero-title {
  font-size:clamp(50px,8vw,96px); font-weight:300; line-height:1;
  letter-spacing:-.03em; margin-bottom:24px; color:var(--text);
  opacity:0; animation:fade-up .9s .35s forwards;
}
.hero-title span { color:var(--orange) }
.hero-sub {
  font-size:clamp(14px,1.8vw,17px); color:var(--gray);
  max-width:580px; line-height:1.65; margin-bottom:44px;
  opacity:0; animation:fade-up .9s .55s forwards;
}
.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fade-up .9s .7s forwards;
}
.btn-primary {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); padding:13px 30px; border-radius:999px;
  font-size:14px; transition:all .25s; text-decoration:none;
}
.btn-primary:hover { background:var(--bg2); transform:translateY(-1px) }
.btn-secondary {
  background:var(--orange); color:#fff;
  padding:13px 30px; border-radius:999px; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:6px; transition:all .25s; text-decoration:none;
}
.btn-secondary:hover { background:var(--orange-hover); transform:translateY(-1px); box-shadow:0 12px 32px rgba(234,88,12,.35) }
@keyframes fade-up { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section {
  position:relative; z-index:1; overflow:hidden; padding:36px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.marquee-track {
  display:flex; gap:60px; width:max-content;
  animation:marquee-scroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state:paused }
.marquee-item {
  display:flex; align-items:center; gap:10px;
  color:var(--gray2); font-size:12.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.marquee-item::before {
  content:''; display:inline-block; width:4px; height:4px;
  border-radius:50%; background:var(--orange); opacity:.6;
}
@keyframes marquee-scroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ============================================================
   SECTIONS COMMUNES
   ============================================================ */
section { position:relative; z-index:1; padding:120px 48px; max-width:1200px; margin:0 auto }
.section-label {
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:16px;
}
.section-title {
  font-size:clamp(34px,5vw,58px); font-weight:300;
  letter-spacing:-.025em; line-height:1.1; margin-bottom:20px; color:var(--text);
}
.section-sub { color:var(--gray); font-size:16px; line-height:1.7; max-width:520px }

/* ============================================================
   PROCESS GRID
   ============================================================ */
.process-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:64px;
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.process-card {
  background:var(--bg3); padding:40px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .3s, opacity .6s, transform .6s;
  opacity:0; transform:translateY(32px);
}
.process-card:hover { background:var(--bg2) }
.process-card.visible { opacity:1; transform:translateY(0) }
.process-num { font-size:11px; color:var(--orange); font-weight:600; letter-spacing:.1em }
.process-card h3 { font-size:20px; font-weight:500; color:var(--text) }
.process-card p  { font-size:14px; color:var(--gray); line-height:1.65 }
.process-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:16px }
.tag {
  background:rgba(15,23,42,.05); border:1px solid var(--border);
  border-radius:999px; padding:4px 12px; font-size:11px; color:var(--gray);
}
.tag-orange {
  background:var(--orange-light); border:1px solid var(--orange-border); color:var(--orange);
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px;
}
.service-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:16px;
  padding:36px; display:flex; flex-direction:column; gap:16px;
  transition:background .3s, border-color .3s, opacity .6s, transform .6s;
  opacity:0; transform:translateY(32px);
}
.service-card.visible { opacity:1; transform:translateY(0) }
.service-card:hover { background:var(--orange-light); border-color:var(--orange-border); transform:translateY(-4px) !important }
.service-card:nth-child(even):hover { background:var(--cyan-light); border-color:var(--cyan-border) }
.service-icon {
  width:46px; height:46px; border-radius:12px;
  background:var(--orange-light); border:1px solid var(--orange-border);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.service-card:nth-child(even) .service-icon {
  background:var(--cyan-light); border-color:var(--cyan-border);
}
.service-card h3 { font-size:18px; font-weight:500; color:var(--text) }
.service-card p  { font-size:14px; color:var(--gray); line-height:1.65; flex:1 }
.service-link {
  font-size:13px; color:var(--orange);
  display:flex; align-items:center; gap:4px; margin-top:8px;
  transition:gap .2s; text-decoration:none;
}
.service-card:nth-child(even) .service-link { color:var(--cyan) }
.service-link:hover { gap:8px }

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; margin-top:64px;
}
.stat-item {
  background:var(--bg3); padding:40px 32px;
  display:flex; flex-direction:column; gap:8px;
}
.stat-num {
  font-size:48px; font-weight:300; letter-spacing:-.04em;
  color:var(--orange); line-height:1;
}
.stat-num.cyan { color:var(--cyan) }
.stat-num span { color:inherit }
.stat-label { font-size:13px; color:var(--gray) }

/* ============================================================
   WHY / AVANTAGES
   ============================================================ */
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:48px }
.why-item {
  display:flex; align-items:flex-start; gap:14px; padding:24px;
  background:var(--bg3); border:1px solid var(--border); border-radius:12px;
  transition:border-color .3s, background .3s, opacity .6s, transform .6s;
  opacity:0; transform:translateY(20px);
}
.why-item.visible { opacity:1; transform:translateY(0) }
.why-item:hover { border-color:var(--orange-border); background:var(--orange-light) }
.why-item:nth-child(even):hover { border-color:var(--cyan-border); background:var(--cyan-light) }
.why-icon {
  width:36px; height:36px; border-radius:8px;
  background:var(--orange-light); border:1px solid var(--orange-border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; margin-top:2px;
}
.why-item:nth-child(even) .why-icon {
  background:var(--cyan-light); border-color:var(--cyan-border);
}
.why-item h4 { font-size:14px; font-weight:500; margin-bottom:6px; color:var(--text) }
.why-item p  { font-size:13px; color:var(--gray); line-height:1.55 }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { max-width:1200px; margin:0 auto; padding:0 48px 120px }
.cta-inner {
  position:relative;
  background:linear-gradient(135deg, #fff8f5 0%, #f0f9fc 100%);
  border:1px solid var(--border); border-radius:24px; padding:80px;
  text-align:center; overflow:hidden;
  opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s;
}
.cta-inner.visible { opacity:1; transform:translateY(0) }
.cta-orb {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(234,88,12,.08), transparent 70%);
  filter:blur(60px); left:50%; top:50%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.cta-inner h2 {
  font-size:clamp(34px,5vw,60px); font-weight:300;
  letter-spacing:-.03em; margin-bottom:20px; position:relative; color:var(--text);
}
.cta-inner p { font-size:16px; color:var(--gray); margin-bottom:24px; position:relative }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative }
.cta-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:#fff; padding:14px 32px;
  border-radius:999px; font-size:14px; font-weight:600;
  text-decoration:none; transition:all .25s;
}
.cta-btn-primary:hover { background:var(--orange-hover); transform:translateY(-2px); box-shadow:0 16px 40px rgba(234,88,12,.3) }
.cta-btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cyan); color:#fff; padding:14px 32px;
  border-radius:999px; font-size:14px; font-weight:600;
  text-decoration:none; transition:all .25s;
}
.cta-btn-secondary:hover { background:var(--cyan-hover); transform:translateY(-2px); box-shadow:0 16px 40px rgba(8,145,178,.25) }

/* ============================================================
   DOWNLOADS
   ============================================================ */
.dl-section { margin-top:64px }
.dl-header { display:flex; align-items:center; gap:12px; margin-bottom:20px }
.dl-header h3 { font-size:16px; font-weight:500; color:var(--text) }
.dl-badge {
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:var(--orange-light); border:1px solid var(--orange-border);
  color:var(--orange); border-radius:999px; padding:3px 10px;
}
.dl-support-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--cyan-light); border:1px solid var(--cyan-border);
  border-radius:12px; padding:16px 24px; text-decoration:none;
  color:var(--cyan); font-size:14px; font-weight:500;
  transition:all .25s; margin-bottom:32px;
}
.dl-support-btn:hover { background:rgba(8,145,178,.15); border-color:var(--cyan); transform:translateY(-2px) }
.dl-support-btn svg { flex-shrink:0 }
.dl-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.dl-table {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.dl-table-head {
  display:grid; grid-template-columns:1fr auto; padding:12px 20px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray);
}
.dl-row {
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:11px 20px; border-bottom:1px solid var(--border); transition:background .2s;
}
.dl-row:last-child { border-bottom:none }
.dl-row:hover { background:var(--bg2) }
.dl-row a {
  color:var(--gray); text-decoration:none; font-size:13px;
  transition:color .2s; display:flex; align-items:center; gap:8px;
}
.dl-row a:hover { color:var(--orange) }
.dl-row a svg { opacity:.4; flex-shrink:0 }
.dl-size { font-size:11px; color:var(--gray2); white-space:nowrap }

/* ============================================================
   SHORTCUTS / FORMULAIRES
   ============================================================ */
.shortcuts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:48px }
.shortcut-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:28px 22px;
  background:var(--bg3); border:1px solid var(--border); border-radius:12px;
  text-decoration:none; color:var(--text); transition:all .25s; text-align:center;
}
.shortcut-card:hover { background:var(--cyan-light); border-color:var(--cyan-border); transform:translateY(-2px) }
.shortcut-icon {
  width:44px; height:44px; border-radius:10px;
  background:var(--cyan-light); border:1px solid var(--cyan-border);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.shortcut-card h4 { font-size:13.5px; font-weight:500; margin-bottom:3px; color:var(--text) }
.shortcut-card p  { font-size:12px; color:var(--gray) }

/* ============================================================
   OFFICES / CONTACT
   ============================================================ */
.offices-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px }
.office-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; transition:border-color .3s;
}
.office-card:hover { border-color:var(--orange-border) }
.office-map { width:100%; height:220px; border:none; display:block; filter:none }
.office-info { padding:24px 28px }
.office-city {
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px;
}
.office-addr { font-size:15px; font-weight:400; line-height:1.5; margin-bottom:16px; color:var(--text) }
.office-links { display:flex; gap:10px; flex-wrap:wrap }
.office-tel {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--orange); color:#fff; padding:9px 18px;
  border-radius:999px; font-size:13px; font-weight:600;
  text-decoration:none; transition:all .25s;
}
.office-tel:hover { background:var(--orange-hover); transform:translateY(-1px) }
.office-map-link {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text); padding:9px 18px; border-radius:999px;
  font-size:13px; text-decoration:none; transition:all .25s;
}
.office-map-link:hover { background:var(--border) }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top:1px solid var(--border); padding:40px 48px;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
}
.footer-logo { display:flex; align-items:center; gap:6px; font-size:18px; font-weight:700; letter-spacing:-.02em }
.footer-logo .l-ady { color:var(--gray) }
.footer-logo .l-tek { color:var(--orange) }
.footer-links { display:flex; gap:28px; list-style:none }
.footer-links a { font-size:13px; color:var(--gray2); text-decoration:none; transition:color .2s }
.footer-links a:hover { color:var(--text) }
.footer-copy { font-size:12px; color:var(--gray2) }

.footer-nocookie {
  border-top:1px solid var(--border); padding:14px 48px;
  text-align:center; font-size:11px; color:var(--gray2); letter-spacing:.04em;
}
.footer-nocookie span { display:inline-flex; align-items:center; gap:7px }
.footer-nocookie-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; opacity:.8; flex-shrink:0 }

/* ============================================================
   CURSEUR
   ============================================================ */
.cursor {
  width:8px; height:8px; border-radius:50%; background:var(--orange);
  position:fixed; pointer-events:none; z-index:9999;
}
.cursor-ring {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(234,88,12,.5);
  position:fixed; pointer-events:none; z-index:9999;
  transition:width .25s, height .25s, opacity .25s;
}
.cursor-ring.hover { width:56px; height:56px; opacity:.7 }

/* ============================================================
   REVEAL / ANIMATIONS SCROLL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ============================================================
   HAMBURGER / MENU MOBILE
   ============================================================ */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; z-index:101; flex-shrink:0;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .3s }
.mobile-menu {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(244,246,251,.98); z-index:99;
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
  backdrop-filter:blur(12px);
}
.mobile-menu.open { display:flex }
.mobile-menu a { color:var(--text); text-decoration:none; font-size:24px; font-weight:300; letter-spacing:-.02em; transition:color .2s }
.mobile-menu a:hover { color:var(--orange) }
.mobile-menu-close {
  position:absolute; top:20px; right:20px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text); width:36px; height:36px; border-radius:50%;
  cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   WIDGET ASTUCE DU JOUR
   ============================================================ */
.tip-widget-mobile {
  display:none; background:var(--cyan-light); border:1px solid var(--cyan-border);
  border-radius:14px; padding:14px 16px; margin:0 0 28px; text-align:left; width:100%;
}
.tip-widget-mobile .tip-widget-head { display:flex; align-items:center; gap:8px; margin-bottom:8px }
.tip-widget-mobile .tip-widget-text { font-size:12.5px; color:var(--gray); line-height:1.6; margin-bottom:10px }
.tip-widget-mobile .tip-history-btn { font-size:11px }

.tip-widget { position:fixed; top:80px; right:24px; width:300px; z-index:90; opacity:0; animation:fade-up .9s .9s forwards }
.tip-widget.collapsed .tip-widget-inner { padding:10px 14px }
.tip-widget.collapsed .tip-widget-body { display:none }
.tip-widget.collapsed .tip-widget-head { margin-bottom:0 }
.tip-widget-inner {
  position:relative; background:rgba(255,255,255,.95);
  border:1px solid var(--cyan-border); border-radius:14px; padding:16px 18px;
  backdrop-filter:blur(16px); transition:padding .25s; overflow:hidden;
  box-shadow:0 4px 24px rgba(8,145,178,.12);
}
.tip-matrix-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.35; pointer-events:none; border-radius:14px }
.tip-widget-head { display:flex; align-items:center; gap:8px; margin-bottom:10px }
.tip-collapse-btn {
  background:none; border:none; color:rgba(8,145,178,.5);
  cursor:pointer; padding:0; line-height:1; font-size:14px;
  transition:color .2s, transform .25s; flex-shrink:0;
}
.tip-collapse-btn:hover { color:var(--cyan) }
.tip-widget.collapsed .tip-collapse-btn { transform:rotate(180deg) }
.tip-widget-icon { font-size:15px }
.tip-widget-label { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); flex:1 }
.tip-widget-text { font-size:12.5px; color:var(--gray); line-height:1.6; margin-bottom:12px }
.tip-widget-text.loading { opacity:.4; font-style:italic }
.tip-history-btn {
  display:flex; align-items:center; gap:5px; background:none; border:none;
  color:rgba(8,145,178,.7); font-size:11px; cursor:pointer; padding:0;
  font-family:Inter,sans-serif; transition:color .2s;
}
.tip-history-btn:hover { color:var(--cyan) }

/* ============================================================
   PANNEAU HISTORIQUE
   ============================================================ */
.tip-panel {
  position:fixed; top:0; right:-420px; width:400px; height:100vh;
  background:rgba(244,246,251,.98); border-left:1px solid var(--border);
  z-index:200; transition:right .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; backdrop-filter:blur(20px);
}
.tip-panel-matrix { position:absolute; inset:0; width:100%; height:100%; opacity:.25; pointer-events:none; z-index:0 }
.tip-panel.open { right:0 }
.tip-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 24px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
  position:relative; z-index:1;
}
.tip-panel-title { font-size:15px; font-weight:500; color:var(--text) }
.tip-panel-sub { font-size:12px; color:var(--gray); margin-top:3px }
.tip-panel-close {
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:background .2s; flex-shrink:0;
}
.tip-panel-close:hover { background:var(--border) }
.tip-panel-body { flex:1; overflow-y:auto; padding:16px 24px; position:relative; z-index:1 }
.tip-panel-body::-webkit-scrollbar { width:4px }
.tip-panel-body::-webkit-scrollbar-thumb { background:var(--cyan-border); border-radius:4px }
.tip-entry { padding:16px 0; border-bottom:1px solid var(--border) }
.tip-entry:last-child { border-bottom:none }
.tip-entry-date { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px }
.tip-entry-text { font-size:13px; color:var(--gray); line-height:1.6 }
.tip-panel-empty { font-size:13px; color:var(--gray2); text-align:center; padding:40px 0; font-style:italic }
.tip-overlay { position:fixed; inset:0; background:rgba(15,23,42,.25); z-index:199; opacity:0; pointer-events:none; transition:opacity .3s }
.tip-overlay.open { opacity:1; pointer-events:all }

/* ============================================================
   MODALES
   ============================================================ */
#modal-offre, #modal-legal { display:none }
#modal-offre.open, #modal-legal.open { display:flex }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at center,
    transparent 60%,
    rgba(0,0,0,.18) 85%,
    rgba(0,0,0,.45) 100%
  );
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px) {
  nav { padding:12px 16px; gap:8px }
  .nav-links { display:none }
  .nav-cta { font-size:11px; padding:7px 10px; white-space:nowrap; overflow:hidden; max-width:120px; text-overflow:ellipsis }
  .hamburger { display:flex }
  .logo { font-size:17px }
  section { padding:80px 20px }
  .services-grid, .process-grid, .why-grid { grid-template-columns:1fr }
  .stats-section { grid-template-columns:repeat(2,1fr) }
  footer { flex-direction:column; gap:20px; text-align:center }
  .footer-links { flex-wrap:wrap; justify-content:center }
  .cta-inner { padding:48px 24px }
  .cta-section { padding:0 20px 80px }
  .offices-grid { grid-template-columns:1fr }
  .dl-grid { grid-template-columns:1fr }
  .shortcuts-grid { grid-template-columns:1fr }
  .footer-nocookie { padding:14px 20px }
  .tip-widget { display:none }
  .tip-widget-mobile { display:block }
  .tip-panel { width:100vw; right:-100vw }
}
@media(max-width:480px) {
  .nav-cta .nav-cta-num { display:none }
  .nav-cta::before { content:'\260E'; font-size:16px }
  .nav-cta { padding:8px 12px; min-width:auto }
}
@media(min-width:769px) {
  .tip-widget-mobile { display:none }
}