/* ============================================================
   LA-GEC — Thème graphique du site vitrine
   Variables, navbar, hero, sections, cartes, formulaires, footer.
   Pré-requis : Bootstrap 5, Bootstrap Icons, polices Inter + Plus Jakarta Sans.
   ============================================================ */

:root {
  --lg-blue: #0e74bc;
  --lg-blue-dark: #0a5a96;
  --lg-blue-light: #29aaff;
  --lg-cyan: #12c4b4;
  --lg-navy: #0c1f33;
  --lg-navy-2: #14304d;
  --lg-ink: #1a2e44;
  --lg-bg-soft: #f2f7fd;
  --lg-amber: #ffb547;
  --lg-green: #1fc77e;
  --lg-violet: #8b5cf6;
  /* Gris anthracite du logo */
  --lg-gray: #58595b;
  /* Rappel du logo : les octets épellent HERMES, comme dans le pictogramme */
  --lg-bin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='300'%3E%3Cg font-family='Consolas,Menlo,monospace' font-size='14' fill='%23ffffff'%3E%3Ctext x='12' y='34' opacity='0.055'%3E01001000%2001000101%2001010010%3C/text%3E%3Ctext x='310' y='88' opacity='0.04'%3E01001101%2001000101%2001010011%3C/text%3E%3Ctext x='64' y='152' opacity='0.05'%3E01001000%2001000101%3C/text%3E%3Ctext x='370' y='214' opacity='0.055'%3E01010010%2001001101%3C/text%3E%3Ctext x='150' y='270' opacity='0.04'%3E01000101%2001010011%3C/text%3E%3C/g%3E%3C/svg%3E");
  --lg-bin-size: 560px 300px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #3c4b5e;
  overflow-x: hidden;
  background: #fff;
}
h1, h2, h3, h4, .font-display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
::selection { background: var(--lg-blue); color: #fff; }

/* ───────────────────── Navbar ───────────────────── */
.lg-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  transition: background .3s, box-shadow .3s, padding .3s;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .65rem 0;
  border-bottom: 1px solid rgba(14,116,188,.08);
}
.lg-nav.scrolled { background: rgba(255,255,255,.95); box-shadow: 0 6px 30px rgba(12,31,51,.1); padding: .35rem 0; }
.lg-nav .nav-link { color: var(--lg-ink); font-weight: 600; font-size: .92rem; position: relative; padding: .5rem .9rem !important; }
.lg-nav .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2.5px;
  background: linear-gradient(90deg, var(--lg-blue), var(--lg-cyan));
  border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.lg-nav .nav-link:hover::after, .lg-nav .nav-link.active::after { transform: scaleX(1); }
.lg-nav .nav-link:hover { color: var(--lg-blue); }
.lg-nav-cta {
  background: linear-gradient(135deg, var(--lg-blue), var(--lg-blue-light));
  color: #fff !important; font-weight: 700; font-size: .88rem;
  padding: .55rem 1.4rem; border-radius: 2rem; text-decoration: none;
  box-shadow: 0 4px 16px rgba(14,116,188,.35);
  transition: transform .2s, box-shadow .2s; white-space: nowrap;
}
.lg-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,116,188,.45); }

/* ───────────────────── Hero ───────────────────── */
.lg-hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: 150px 0 120px;
  background-image:
    linear-gradient(160deg, rgba(10,37,64,.93) 0%, rgba(12,58,99,.84) 45%, rgba(8,64,108,.78) 100%),
    url(../img/photo_bureau_low.webp);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* grille fine décorative + octets HERMES (rappel du logo) */
.lg-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--lg-bin),
                    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: var(--lg-bin-size), 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.lg-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none;
  animation: blobFloat 14s ease-in-out infinite alternate;
}
.lg-blob-1 { width: 420px; height: 420px; background: #29aaff; top: -120px; right: 8%; opacity: .32; }
.lg-blob-2 { width: 360px; height: 360px; background: #12c4b4; bottom: -140px; left: -6%; opacity: .28; animation-delay: -5s; }
.lg-blob-3 { width: 220px; height: 220px; background: #8b5cf6; top: 35%; left: 42%; opacity: .18; animation-delay: -9s; }
@keyframes blobFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px, -36px) scale(1.12); }
}
.lg-hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem 1.15rem; border-radius: 2rem; margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}
.lg-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ed47a; position: relative; flex-shrink: 0; }
.lg-pulse-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid #2ed47a; animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.lg-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.12; color: #fff;
  letter-spacing: -.02em;
}
.lg-hero h1 .grad {
  background: linear-gradient(90deg, #7dd4ff, #12c4b4 60%, #9be8ff);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradSlide 5s linear infinite;
}
@keyframes gradSlide { to { background-position: 200% center; } }
.lg-hero-check { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; color: #eaf4fd; font-size: 1.04rem; }
.lg-hero-check .ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: linear-gradient(135deg, #12c4b4, #2ed47a); color: #04313c;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(18,196,180,.18);
}
.lg-btn-light {
  background: #fff; color: var(--lg-blue-dark); font-weight: 700; padding: .9rem 2.2rem;
  border-radius: 2.5rem; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s;
}
.lg-btn-light:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.32); color: var(--lg-blue-dark); }
.lg-btn-ghost {
  background: rgba(255,255,255,.08); color: #fff; font-weight: 600; padding: .9rem 2.2rem;
  border-radius: 2.5rem; border: 1.5px solid rgba(255,255,255,.45); text-decoration: none;
  display: inline-flex; align-items: center; gap: .6rem; transition: background .2s, transform .2s;
  backdrop-filter: blur(4px);
}
.lg-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-3px); }
.lg-hero-visual { position: relative; }
/* Portail de numérisation : l'arc orbital du logo entoure le visuel,
   le courrier entre d'un côté, les octets sortent de l'autre */
.lg-hero-visual::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 86%; height: 116%;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-left-color: rgba(125,212,255,.55);
  border-bottom-color: rgba(125,212,255,.18);
  transform: translate(-50%,-50%) rotate(18deg);
  animation: lgOrbit 32s linear infinite;
  pointer-events: none;
}
@keyframes lgOrbit {
  from { transform: translate(-50%,-50%) rotate(18deg); }
  to   { transform: translate(-50%,-50%) rotate(378deg); }
}
.lg-hero-visual img.main { max-width: 100%; filter: drop-shadow(0 22px 50px rgba(0,0,0,.45)); }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.lg-float-card {
  position: absolute; background: rgba(255,255,255,.95); border-radius: 12px;
  padding: .7rem 1rem; box-shadow: 0 14px 40px rgba(4,22,40,.35);
  display: flex; align-items: center; gap: .65rem; font-size: .82rem; font-weight: 600; color: var(--lg-ink);
  animation: heroFloat 6s ease-in-out infinite;
  backdrop-filter: blur(6px);
}
.lg-float-card .fc-ic {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; flex-shrink: 0;
}
.lg-float-card-1 { top: 4%; left: -6%; animation-delay: -1.5s; }
.lg-float-card-2 { bottom: 12%; right: -4%; animation-delay: -3.5s; }
.lg-float-card-3 { bottom: -7%; left: 8%; animation-delay: -2.2s; }
.lg-hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; line-height: 0; z-index: 2; }

/* ───────────────────── Stats ───────────────────── */
.lg-stats { position: relative; z-index: 3; margin-top: -64px; }
.lg-stats-card {
  background: #fff; border-radius: 20px; padding: 2rem 1.5rem;
  box-shadow: 0 24px 60px rgba(12,31,51,.14);
  border: 1px solid #e4edf8;
}
.lg-stat { text-align: center; padding: .5rem 0; position: relative; }
.lg-stat + .lg-stat::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, #d6e5f3, transparent);
}
@media (max-width: 767px) { .lg-stat + .lg-stat::before { display: none; } }
.lg-stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.3rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--lg-blue), var(--lg-blue-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lg-stat-label { font-size: .82rem; color: #6a7c90; margin-top: .45rem; font-weight: 500; }

/* ───────────────────── Marquee partenaires/publics ───────────────────── */
.lg-marquee-wrap { overflow: hidden; padding: 2.6rem 0 1rem; position: relative; }
.lg-marquee-wrap::before, .lg-marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.lg-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.lg-marquee-wrap::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.lg-marquee { display: flex; gap: 1rem; width: max-content; animation: marquee 30s linear infinite; }
.lg-marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.lg-marquee-item {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  background: var(--lg-bg-soft); border: 1px solid #dcebf9; color: var(--lg-ink);
  font-weight: 600; font-size: .9rem; padding: .65rem 1.4rem; border-radius: 2rem;
}
.lg-marquee-item i { color: var(--lg-blue); }

/* ───────────────────── Sections génériques ───────────────────── */
.lg-section { padding: 6rem 0; position: relative; }
.lg-label {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: uppercase; font-size: .74rem; letter-spacing: .16em; font-weight: 700;
  color: var(--lg-blue); margin-bottom: .8rem;
}
.lg-label::before { content: ""; width: 28px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--lg-blue), var(--lg-cyan)); }
.lg-label-white { color: #9fd4ff; }
.lg-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--lg-ink); line-height: 1.18; letter-spacing: -.015em; }
.lg-title-white { color: #fff; }

/* Reveal au scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; } .d5 { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none; }
  .lg-blob, .lg-float-card, .lg-marquee, .lg-hero-visual::before { animation: none !important; }
}

/* ───────────────────── Bloc "Pourquoi" ───────────────────── */
.lg-why { background:
  radial-gradient(800px 400px at 110% 0%, rgba(41,170,255,.08), transparent 60%),
  var(--lg-bg-soft);
}
.lg-mini-card {
  background: #fff; border-radius: 16px; padding: 1.8rem 1.4rem; text-align: center; height: 100%;
  border: 1px solid #e4edf8; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.lg-mini-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c1, #0e74bc), var(--c2, #29aaff));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.lg-mini-card:hover { transform: translateY(-7px); box-shadow: 0 18px 44px rgba(14,116,188,.16); }
.lg-mini-card:hover::before { transform: scaleX(1); }
.lg-icon-sq {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--c1, #0e74bc), var(--c2, #29aaff)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(14,116,188,.3);
  transition: transform .3s;
  position: relative;
}
/* Arc orbital du logo autour du badge */
.lg-icon-sq::after {
  content: ""; position: absolute; inset: -11px -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: rgba(88,89,91,.4);
  border-bottom-color: rgba(88,89,91,.14);
  transform: rotate(22deg);
  transition: transform .4s;
}
.lg-mini-card:hover .lg-icon-sq { transform: scale(1.1) rotate(-6deg); }
.lg-mini-card:hover .lg-icon-sq::after { transform: rotate(80deg); }
.lg-screen-frame {
  border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px rgba(12,31,51,.18); border: 1px solid #e4edf8;
  position: relative;
}
.lg-screen-bar { background: #eef4fb; padding: .55rem .9rem; display: flex; gap: .4rem; align-items: center; }
.lg-screen-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lg-screen-glow { position: absolute; inset: -40px; background: radial-gradient(closest-side, rgba(41,170,255,.25), transparent); z-index: -1; filter: blur(20px); }

/* ───────────────────── Fonctionnalités ───────────────────── */
.lg-features {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(41,170,255,.12), transparent 55%),
    radial-gradient(700px 500px at 100% 100%, rgba(18,196,180,.1), transparent 55%),
    linear-gradient(165deg, #0c1f33 0%, #14304d 100%);
  overflow: hidden;
}
.lg-feat-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 2rem 1.7rem; height: 100%;
  backdrop-filter: blur(8px);
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.lg-feat-card::after {
  content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%;
  background: var(--glow, rgba(41,170,255,.35)); filter: blur(60px);
  top: -70px; right: -60px; opacity: 0; transition: opacity .3s;
}
.lg-feat-card:hover { transform: translateY(-8px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); box-shadow: 0 22px 50px rgba(0,0,0,.35); }
.lg-feat-card:hover::after { opacity: 1; }
.lg-feat-card h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.lg-feat-card p { color: rgba(232,242,250,.72); font-size: .89rem; margin: 0; }
.lg-feat-ic {
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; background: linear-gradient(135deg, var(--c1, #0e74bc), var(--c2, #29aaff));
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  position: relative;
}
/* Arc orbital du logo autour du badge (version fond sombre) */
.lg-feat-ic::after {
  content: ""; position: absolute; inset: -10px -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: rgba(125,212,255,.45);
  border-bottom-color: rgba(125,212,255,.15);
  transform: rotate(22deg);
  transition: transform .4s;
}
.lg-feat-card:hover .lg-feat-ic::after { transform: rotate(80deg); }
.lg-feat-link { color: #7dd4ff; font-size: .85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; }
.lg-feat-link i { transition: transform .2s; }
.lg-feat-card:hover .lg-feat-link i { transform: translateX(4px); }

/* ───────────────────── Découverte / carousel ───────────────────── */
.lg-discover { background: linear-gradient(150deg, #0a5a96 0%, #0e74bc 55%, #1a90d8 100%); overflow: hidden; position: relative; }
.lg-discover::before {
  content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.18); top: -260px; right: -200px;
  animation: spinSlow 50s linear infinite;
}
.lg-discover::after {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.14); bottom: -180px; left: -140px;
  animation: spinSlow 40s linear infinite reverse;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.lg-public-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px; padding: .6rem 1.1rem; color: #fff; font-size: .88rem; font-weight: 500;
  transition: background .2s, transform .2s;
}
.lg-public-chip:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.lg-carousel-frame {
  border-radius: 18px; overflow: hidden; background: #0a2840;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); position: relative; z-index: 2;
  border: 1px solid rgba(255,255,255,.18);
}
#idxDiscoverCarousel .carousel-control-prev-icon,
#idxDiscoverCarousel .carousel-control-next-icon { filter: invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
#idxDiscoverCarousel .carousel-indicators [data-bs-target] {
  width: 22px; height: 5px; border-radius: 3px; background-color: rgba(255,255,255,.35); border: 0; transition: width .25s, background-color .25s;
}
#idxDiscoverCarousel .carousel-indicators .active { background-color: #fff; width: 34px; }

/* ───────────────────── Avis clients ───────────────────── */
.lg-reviews { background:
  radial-gradient(700px 400px at 100% 0%, rgba(139,92,246,.06), transparent 60%),
  #fff;
}
.lg-review-card {
  background: #fff; border-radius: 18px; padding: 2rem 1.8rem; height: 100%;
  border: 1px solid #e7eef7; position: relative;
  box-shadow: 0 4px 22px rgba(12,31,51,.06);
  transition: transform .25s, box-shadow .25s;
}
.lg-review-card:hover { transform: translateY(-7px) rotate(-.4deg); box-shadow: 0 22px 50px rgba(12,31,51,.13); }
.lg-review-card .quote-mark {
  position: absolute; top: 1.1rem; right: 1.4rem; font-family: Georgia, serif;
  font-size: 4rem; line-height: 1; color: var(--ac, #0e74bc); opacity: .12; pointer-events: none;
}
.lg-review-card .stars { color: var(--lg-amber); font-size: .92rem; letter-spacing: 2px; margin-bottom: .9rem; }
.lg-review-card p.txt { font-size: .92rem; color: #44556a; margin-bottom: 1.2rem; }
.lg-review-avatar {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ac, #0e74bc), var(--ac2, #29aaff));
  box-shadow: 0 4px 12px rgba(12,31,51,.18);
}
.lg-review-tag {
  font-size: .74rem; font-weight: 700; padding: .3rem .85rem; border-radius: 2rem;
  background: color-mix(in srgb, var(--ac, #0e74bc) 12%, #fff); color: var(--ac, #0e74bc);
}

/* ───────────────────── Articles ───────────────────── */
.lg-articles { background: var(--lg-bg-soft); }
.lg-article-card {
  border-radius: 18px; overflow: hidden; background: #fff; height: 100%;
  border: 1px solid #e4edf8; box-shadow: 0 4px 20px rgba(12,31,51,.06);
  transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column;
}
.lg-article-card:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(12,31,51,.14); }
.lg-article-imgwrap { overflow: hidden; height: 200px; position: relative; }
.lg-article-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.lg-article-card:hover .lg-article-imgwrap img { transform: scale(1.07); }
.lg-article-cat {
  position: absolute; bottom: .8rem; left: .8rem; z-index: 2;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  color: var(--lg-blue); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .8rem; border-radius: 2rem;
}
.lg-article-body { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.lg-article-body h3 { font-size: 1.02rem; font-weight: 700; color: var(--lg-ink); margin-bottom: .7rem; }
.lg-article-body p { font-size: .88rem; color: #66788c; }
.lg-article-more { margin-top: auto; color: var(--lg-blue); font-weight: 600; font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.lg-article-more i { transition: transform .2s; }
.lg-article-card:hover .lg-article-more i { transform: translateX(4px); }

/* ───────────────────── Tarifs ───────────────────── */
.lg-pricing { background:
  radial-gradient(700px 400px at 0% 100%, rgba(18,196,180,.07), transparent 60%),
  #fff;
}
.lg-price-card {
  position: relative; background: #fff; border-radius: 22px; padding: 2.6rem 2.4rem;
  border: 1px solid #e4edf8;
  box-shadow: 0 24px 64px rgba(12,31,51,.12);
  overflow: hidden;
}
.lg-price-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--lg-blue), var(--lg-cyan), var(--lg-blue-light));
}
@media (max-width: 575px) { .lg-price-card { padding: 1.8rem 1.4rem; } }
.lg-price-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(14,116,188,.09); color: var(--lg-blue);
  font-size: .78rem; font-weight: 700; padding: .35rem 1rem; border-radius: 2rem;
}
.lg-price-amount {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--lg-ink);
}
.lg-price-amount small { font-size: 1.05rem; font-weight: 600; color: #7a8a9c; }
.lg-price-sub { font-size: .95rem; color: #5b6c80; }
.lg-price-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: #44556a; margin-bottom: .65rem; }
.lg-price-check i { color: var(--lg-green); flex-shrink: 0; margin-top: 1px; }
.lg-price-note {
  background: var(--lg-bg-soft); border: 1px dashed #c6dcf0; border-radius: 12px;
  padding: .9rem 1.1rem; font-size: .85rem; color: #5b6c80;
}
.lg-price-step {
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem;
}
.lg-price-step .ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--lg-blue), var(--lg-blue-light)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.lg-price-step strong { color: var(--lg-ink); font-size: .94rem; display: block; }
.lg-price-step span { color: #7a8a9c; font-size: .84rem; }

/* ───────────────────── CTA + formulaire ───────────────────── */
.lg-cta-section {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 500px at 90% 10%, rgba(41,170,255,.25), transparent 55%),
    radial-gradient(700px 500px at 5% 90%, rgba(18,196,180,.2), transparent 55%),
    linear-gradient(150deg, #0a2540, #0e74bc 90%);
}
.lg-cta-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--lg-bin),
                    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: var(--lg-bin-size), 52px 52px, 52px 52px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.lg-form-wrap {
  background: rgba(255,255,255,.97); border-radius: 22px; padding: 2.8rem;
  box-shadow: 0 34px 90px rgba(4,22,40,.45); position: relative; z-index: 2;
}
@media (max-width: 575px) { .lg-form-wrap { padding: 1.6rem; } }
.lg-form-wrap .form-control {
  border-radius: 10px; border: 1.5px solid #d6e3ef; padding: .8rem 1rem; font-size: .94rem;
  transition: border-color .2s, box-shadow .2s;
}
.lg-form-wrap .form-control:focus { border-color: var(--lg-blue); box-shadow: 0 0 0 4px rgba(14,116,188,.13); }
.lg-form-wrap .form-label { font-weight: 600; color: var(--lg-ink); font-size: .88rem; }
.lg-btn-grad {
  background: linear-gradient(135deg, var(--lg-blue), var(--lg-blue-light)); background-size: 150% auto;
  color: #fff; font-weight: 700; padding: .85rem 2.4rem; border-radius: 2.5rem; border: 0;
  display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 10px 26px rgba(14,116,188,.4); transition: background-position .3s, transform .2s, box-shadow .2s;
}
.lg-btn-grad:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(14,116,188,.5); color: #fff; }

/* ───────────────────── Footer ───────────────────── */
.lg-footer { background: var(--lg-navy); color: #9fb3c8; padding: 4rem 0 0; position: relative; overflow: hidden; }
/* Rappel du logo : octets HERMES qui "sortent du portail" en haut à droite */
.lg-footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--lg-bin);
  background-size: var(--lg-bin-size);
  mask-image: radial-gradient(620px 380px at 88% 12%, #000 25%, transparent 72%);
  pointer-events: none;
}
/* Arc orbital du logo, comme le swoosh autour de l'enveloppe */
.lg-footer::after {
  content: ""; position: absolute; width: 340px; height: 560px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: rgba(125,212,255,.22);
  border-top-color: rgba(125,212,255,.1);
  top: -150px; right: 6%;
  transform: rotate(24deg);
  pointer-events: none;
}
.lg-footer > .container { position: relative; z-index: 1; }
.lg-footer a { color: #c4d6e8; text-decoration: none; transition: color .2s; font-size: .92rem; }
.lg-footer a:hover { color: #fff; }
.lg-footer h5 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1.1rem; }
.lg-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.3rem 0; font-size: .8rem; }
.lg-footer-social {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem;
  transition: background .2s, transform .2s;
}
.lg-footer-social:hover { background: var(--lg-blue); transform: translateY(-3px); color: #fff; }

/* ───────────────────── Bouton retour haut ───────────────────── */
.lg-top-btn {
  position: fixed; bottom: 26px; right: 26px; z-index: 1600;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--lg-blue), var(--lg-blue-light)); color: #fff; font-size: 1.1rem;
  box-shadow: 0 10px 26px rgba(14,116,188,.45);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
}
.lg-top-btn.show { opacity: 1; pointer-events: auto; transform: none; }

/* ───────────────────── Accessibilité : focus clavier ───────────────────── */
a:focus-visible, button:focus-visible,
.form-control:focus-visible, .navbar-toggler:focus-visible {
  outline: 3px solid var(--lg-blue-light);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Sur fonds sombres / bleus, un liseré clair reste visible */
.lg-hero a:focus-visible, .lg-features a:focus-visible,
.lg-discover a:focus-visible, .lg-discover button:focus-visible,
.lg-cta-section a:focus-visible, .lg-footer a:focus-visible {
  outline-color: #fff;
}

/* ───────────────────── Harmonisation des anciennes pages ─────────────────────
   Les pages historiques enveloppent leur contenu dans #page (police Raleway
   dans main.css) et utilisent .familySerif pour certains titres : on aligne
   tout sur la typographie du thème. */
#page { font-family: 'Inter', system-ui, sans-serif; }
.familySerif { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important; }

/* ───────────────────── Rappels du logo sur les bandeaux internes ─────────────
   Texture d'octets HERMES + arc orbital sur les heros bleus de chaque page,
   en écho au pictogramme (le courrier entre, les octets sortent du portail). */
.fn-hero, .ns-hero, .ct-hero, .sp-hero, .ml-hero, .pc-hero, .cgu-hero, .faq-hero, .lg-page-hero {
  position: relative;
  overflow: hidden;
}
.fn-hero::before, .ns-hero::before, .ct-hero::before, .sp-hero::before,
.ml-hero::before, .pc-hero::before, .cgu-hero::before, .faq-hero::before, .lg-page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--lg-bin);
  background-size: var(--lg-bin-size);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 38%, #000 78%);
  pointer-events: none;
}
.fn-hero::after, .ns-hero::after, .ct-hero::after, .sp-hero::after,
.ml-hero::after, .pc-hero::after, .cgu-hero::after, .faq-hero::after, .lg-page-hero::after {
  content: ""; position: absolute; width: 260px; height: 430px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.1);
  top: -120px; right: 5%;
  transform: rotate(24deg);
  pointer-events: none;
}