/* Start custom CSS */<!--
PAGE MERCI — /merci/
Réglages hors widget (Yoast + WordPress) :
- Title : Merci pour votre message | LLA Avocats
- Meta robots : noindex, nofollow (Yoast > Avancé > "Ne pas indexer cette page" + "Ne pas suivre les liens")
- Canonical : aucun, ou vers https://www.lla-avocats.fr/ si le thème force une valeur
- Modèle de page : sans header/menu (page "vierge"/"blank" si le thème le permet)
-->
<section class="lrcv" aria-label="Confirmation d'envoi de votre message">

  <span class="lrcv__overlay" aria-hidden="true"></span>
  <span class="lrcv__vignette" aria-hidden="true"></span>
  <span class="lrcv__halo lrcv__halo--tr" aria-hidden="true"></span>
  <span class="lrcv__halo lrcv__halo--bl" aria-hidden="true"></span>
  <canvas id="lrcvCanvas" aria-hidden="true"></canvas>
  <span class="lrcv__topbar" aria-hidden="true"></span>

  <div class="lrcv__inner">

    <div class="lrcv__card lrcv-in" style="animation-delay:.15s">

      <div class="lrcv__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 12.5L9.5 18L20 6" stroke="#0a1530" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <span class="lrcv__badge">Message envoyé avec succès</span>

      <h1 class="lrcv__title">
        Votre message a bien été <span class="lrcv__title-accent">reçu</span>
      </h1>

      <p class="lrcv__sub">
        Merci pour votre prise de contact. Un membre de l'équipe LLA&nbsp;Avocats vous recontactera sous 24h ouvrées.
      </p>

      <span class="lrcv__divider" aria-hidden="true"></span>

      <div class="lrcv__info-grid">
        <div class="lrcv__info-item">
          <span class="lrcv__info-icon" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.07 15.07 0 0 1-6.59-6.58l2.2-2.21c.27-.27.35-.65.24-.99A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>
          </span>
          <span class="lrcv__info-text">
            <a href="tel:0186958398">01&nbsp;86&nbsp;95&nbsp;83&nbsp;98</a>
            <small>Lundi–vendredi, 9h–19h</small>
          </span>
        </div>
        <div class="lrcv__info-item">
          <span class="lrcv__info-icon" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 15H7v-2h10v2zm0-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
          </span>
          <span class="lrcv__info-text">
            <a href="https://www.lla-avocats.fr/publications/">Nos publications</a>
            <small>Droit des affaires</small>
          </span>
        </div>
      </div>

    </div>

    <div class="lrcv__cta lrcv-in" style="animation-delay:.3s">
      <a href="https://www.lla-avocats.fr/" class="lrcv__btn-primary">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
        <span>Retour à l'accueil</span>
      </a>
      <a href="tel:0186958398" class="lrcv__btn-ghost">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.07 15.07 0 0 1-6.59-6.58l2.2-2.21c.27-.27.35-.65.24-.99A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>
        Nous appeler
      </a>
    </div>

    <div class="lrcv__trust lrcv-in" style="animation-delay:.4s">
      <span>Barreau de Paris</span>
      <span class="lrcv__trust-dot" aria-hidden="true"></span>
      <span>Contentieux des affaires</span>
      <span class="lrcv__trust-dot" aria-hidden="true"></span>
      <span>Paris 8<sup>e</sup></span>
    </div>

  </div>

  <style>
  /* ================================================================
     PAGE MERCI — LLA Avocats · v2 : carte flottante sur fond navy animé
     Préfixe : .lrcv
  ================================================================ */

  .lrcv, .lrcv * { box-sizing: border-box; }

  .lrcv {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 30%, #12274d 0%, #07111f 55%, #040d18 100%);
    background-size: 180% 180%;
    animation: lrcvBgShift 14s ease-in-out infinite;
    padding: 320px 32px 90px;
    margin-top: -300px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    font-family: 'Plus Jakarta Sans','Inter',sans-serif;
    color: #fff;
    text-align: center;
  }
  @keyframes lrcvBgShift {
    0%,100% { background-position: 0% 0%; }
    50% { background-position: 60% 40%; }
  }

  .lrcv__topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 10;
    background: linear-gradient(90deg, transparent 0%, rgba(196,160,47,.5) 20%, #c4a02f 50%, rgba(196,160,47,.5) 80%, transparent 100%);
    animation: lrcvTopbar 5s ease-in-out infinite;
  }
  @keyframes lrcvTopbar { 0%,100%{opacity:.65;} 50%{opacity:1;} }

  .lrcv__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(10,21,48,.65) 0%, rgba(26,40,73,.55) 100%);
  }
  .lrcv__vignette {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 220px; z-index: 2;
    background: linear-gradient(to bottom, transparent, rgba(4,13,24,.85));
  }

  .lrcv__halo {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(48px); z-index: 2;
  }
  .lrcv__halo--tr {
    top: -160px; right: -130px; width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(196,160,47,.4) 0%, transparent 70%);
    animation: lrcvHalo 8s ease-in-out infinite;
  }
  .lrcv__halo--bl {
    bottom: -190px; left: -140px; width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(196,160,47,.26) 0%, transparent 70%);
    animation: lrcvHalo 11s ease-in-out infinite 4s;
  }
  @keyframes lrcvHalo { 0%,100%{transform:scale(1) translate(0,0);opacity:1;} 50%{transform:scale(1.18) translate(20px,-15px);opacity:.75;} }

  #lrcvCanvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3; pointer-events: none;
  }

  .lrcv__inner {
    position: relative; z-index: 4;
    max-width: 720px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
  }

  .lrcv-in {
    animation: lrcvFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes lrcvFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lrcv-in { animation: none; }
  }

  /* ── Carte flottante (glassmorphism + bordure dégradée animée) ── */
  .lrcv__card {
    position: relative;
    width: 100%;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(196,160,47,.28);
    border-radius: 28px;
    padding: 64px 56px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    margin: 0 0 40px;
    animation: lrcvFadeUp .8s cubic-bezier(.16,1,.3,1) both, lrcvCardFloat 7s ease-in-out infinite .6s;
  }
  @keyframes lrcvCardFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .lrcv__card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: conic-gradient(from 0deg, transparent 0%, rgba(196,160,47,.9) 12%, transparent 26%, transparent 74%, rgba(212,183,63,.7) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: lrcvBorderSpin 6s linear infinite;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes lrcvBorderSpin { to { background: conic-gradient(from 360deg, transparent 0%, rgba(196,160,47,.9) 12%, transparent 26%, transparent 74%, rgba(212,183,63,.7) 88%, transparent 100%); } }
  .lrcv__card > * { position: relative; z-index: 2; }

  .lrcv__icon {
    position: relative;
    width: 82px; height: 82px; border-radius: 50%;
    background: linear-gradient(135deg, #c4a02f 0%, #a8881f 100%);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 26px;
    box-shadow: 0 0 0 7px rgba(196,160,47,.14), 0 10px 30px rgba(196,160,47,.35);
    animation: lrcvIconPop .6s cubic-bezier(.16,1,.4,1.3) .2s both;
  }
  @keyframes lrcvIconPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .lrcv__icon::before, .lrcv__icon::after {
    content: '';
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(196,160,47,.55);
    animation: lrcvPing 2.6s ease-out infinite;
  }
  .lrcv__icon::after { animation-delay: 1.3s; }
  @keyframes lrcvPing {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.7); opacity: 0; }
  }
  .lrcv__icon svg { width: 36px; height: 36px; display: block; position: relative; z-index: 1; }

  .lrcv__badge {
    position: relative;
    display: inline-block;
    font-size: 1rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    color: #d4b73f;
    background: rgba(196,160,47,.14);
    border: 1px solid rgba(196,160,47,.35);
    padding: 8px 20px; border-radius: 50px;
    margin: 0 0 22px;
    overflow: hidden;
  }
  .lrcv__badge::after {
    content: '';
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: lrcvShimmer 3.2s ease-in-out infinite 1s;
  }
  @keyframes lrcvShimmer { 0%,15%{ left:-60%; } 55%,100%{ left:130%; } }

  .lrcv__title {
    font-size: clamp(2.6rem, 5.6vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em;
    color: #fff !important;
    margin: 0 0 22px !important;
  }
  .lrcv__title-accent {
    display: inline-block; color: #c4a02f !important; position: relative;
  }
  .lrcv__title-accent::after {
    content: '';
    position: absolute; bottom: 2px; left: 0;
    height: 3px; width: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #a8881f, #d4b73f);
  }

  .lrcv__sub {
    font-size: clamp(1.4rem, 2.2vw, 1.65rem) !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.9) !important;
    margin: 0 auto !important;
    font-weight: 500;
    max-width: 520px;
  }

  .lrcv__divider {
    position: relative;
    display: block;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,160,47,.4), transparent);
    margin: 40px 0 36px;
    overflow: hidden;
  }
  .lrcv__divider::after {
    content: '';
    position: absolute; top: -1px; left: -20%; width: 20%; height: 3px;
    background: linear-gradient(90deg, transparent, #d4b73f, transparent);
    filter: blur(1px);
    animation: lrcvDividerSweep 4s ease-in-out infinite;
  }
  @keyframes lrcvDividerSweep { 0%{ left:-20%; } 100%{ left:100%; } }

  .lrcv__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .lrcv__info-item {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.04);
    border-left: 3px solid #c4a02f;
    border-radius: 12px;
    padding: 16px 18px;
    text-align: left;
    transition: background .25s, transform .25s;
  }
  .lrcv__info-item:hover {
    background: rgba(196,160,47,.1);
    transform: translateY(-2px);
  }
  .lrcv__info-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(196,160,47,.16);
    display: flex; align-items: center; justify-content: center;
    color: #d4b73f; flex-shrink: 0;
  }
  .lrcv__info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lrcv__info-text a {
    color: #fff !important; font-weight: 700; font-size: 1.15rem;
    text-decoration: none; white-space: nowrap;
  }
  .lrcv__info-text a:hover { color: #d4b73f !important; }
  .lrcv__info-text small { color: rgba(255,255,255,.55); font-size: .92rem; }

  /* ── CTA ── */
  .lrcv__cta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    justify-content: center; margin: 0 0 40px;
  }
  .lrcv__btn-primary {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    background: #c4a02f; color: #1a2849 !important;
    padding: 20px 42px; border-radius: 50px;
    font-weight: 800; font-size: 1.3rem;
    text-decoration: none !important; white-space: nowrap;
    transition: all .28s;
    box-shadow: 0 8px 26px rgba(196,160,47,.4);
    overflow: hidden;
    animation: lrcvBtnPulse 3.5s ease-in-out infinite 1.5s;
  }
  @keyframes lrcvBtnPulse {
    0%,100% { box-shadow: 0 8px 26px rgba(196,160,47,.4); }
    50% { box-shadow: 0 8px 40px rgba(196,160,47,.65); }
  }
  .lrcv__btn-primary::after {
    content: '';
    position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    animation: lrcvSheen 4.5s ease-in-out infinite 2.5s;
  }
  @keyframes lrcvSheen { 0%,100%{ left:-80%; } 45%{ left:130%; } }
  .lrcv__btn-primary:hover {
    background: #fff; color: #1a2849 !important;
    transform: translateY(-3px);
    animation: none;
  }
  .lrcv__btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.32);
    padding: 18px 36px; border-radius: 50px;
    font-weight: 700; font-size: 1.2rem;
    text-decoration: none !important; white-space: nowrap;
    transition: all .28s;
  }
  .lrcv__btn-ghost:hover {
    background: rgba(196,160,47,.12);
    border-color: #c4a02f; color: #c4a02f !important;
    transform: translateY(-3px);
  }

  .lrcv__trust {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    justify-content: center;
    color: rgba(255,255,255,.55) !important;
    font-size: 1.05rem; font-weight: 600; letter-spacing: .02em;
  }
  .lrcv__trust span { color: rgba(255,255,255,.55); }
  .lrcv__trust-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: #c4a02f;
  }

  @media (max-width: 768px) {
    .lrcv { padding: 220px 18px 60px; margin-top: -200px; }
    .lrcv__card { padding: 44px 26px; border-radius: 22px; }
    .lrcv__icon { width: 68px; height: 68px; }
    .lrcv__icon svg { width: 28px; height: 28px; }
    .lrcv__title { font-size: 2.1rem !important; }
    .lrcv__sub { font-size: 1.2rem !important; }
    .lrcv__info-grid { grid-template-columns: 1fr; }
    .lrcv__cta { flex-direction: column; width: 100%; }
    .lrcv__btn-primary, .lrcv__btn-ghost { width: 100%; justify-content: center; font-size: 1.1rem; }
    .lrcv__trust { font-size: .95rem; gap: 10px; }
  }
  </style>

  <script>
  (function () {
    var canvas = document.getElementById('lrcvCanvas');
    if (!canvas || !canvas.getContext) return;
    var ctx = canvas.getContext('2d');
    var W = 0, H = 0, animId = null;

    function resize() {
      W = canvas.width = canvas.offsetWidth;
      H = canvas.height = canvas.offsetHeight;
    }
    window.addEventListener('resize', resize);
    resize();
    if (!W || !H) return;

    var N = 95, pts = [];
    for (var i = 0; i < N; i++) {
      pts.push({
        x: Math.random() * W, y: Math.random() * H,
        r: Math.random() * 1.8 + 0.3,
        a: Math.random() * 0.5 + 0.1,
        vx: (Math.random() - .5) * 0.22,
        vy: (Math.random() - .5) * 0.15,
        ph: Math.random() * Math.PI * 2,
        spd: Math.random() * 0.013 + 0.007
      });
    }

    var orbs = [
      { x: W * .1, y: H * .2, r: 80, a: .07, vx: .10, vy: .07, ph: 0 },
      { x: W * .82, y: H * .65, r: 110, a: .05, vx: -.09, vy: .05, ph: 2.5 },
      { x: W * .5, y: H * .1, r: 60, a: .08, vx: .07, vy: .10, ph: 4 }
    ];

    function newStreak() {
      var ft = Math.random() > .5;
      return {
        x: ft ? Math.random() * W : (Math.random() > .5 ? -60 : W + 60),
        y: ft ? -60 : Math.random() * H,
        len: Math.random() * 110 + 50,
        ang: ft ? (Math.PI / 6 + Math.random() * Math.PI / 4) : (Math.random() * Math.PI / 4 - Math.PI / 8),
        spd: Math.random() * 1.3 + 0.5,
        a: Math.random() * .16 + .04,
        life: 0,
        maxLife: Math.random() * 110 + 70
      };
    }
    var streaks = [newStreak(), newStreak(), newStreak(), newStreak()];

    function drawGrid() {
      ctx.save();
      ctx.strokeStyle = 'rgba(196,160,47,0.03)';
      ctx.lineWidth = .5;
      for (var c = 0; c <= 10; c++) {
        var x = c / 10 * W;
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
      }
      for (var r = 0; r <= 6; r++) {
        var y = r / 6 * H;
        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
      }
      ctx.restore();
    }

    function draw() {
      ctx.clearRect(0, 0, W, H);
      drawGrid();

      orbs.forEach(function (o) {
        o.ph += .008; o.x += o.vx; o.y += o.vy;
        if (o.x < -o.r || o.x > W + o.r) o.vx *= -1;
        if (o.y < -o.r || o.y > H + o.r) o.vy *= -1;
        var al = o.a * (.7 + .3 * Math.sin(o.ph));
        var g = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, o.r);
        g.addColorStop(0, 'rgba(196,160,47,' + al + ')');
        g.addColorStop(1, 'rgba(196,160,47,0)');
        ctx.beginPath(); ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
        ctx.fillStyle = g; ctx.fill();
      });

      for (var i = 0; i < N; i++) {
        for (var j = i + 1; j < N; j++) {
          var dx = pts[i].x - pts[j].x, dy = pts[i].y - pts[j].y;
          var d = Math.sqrt(dx * dx + dy * dy);
          if (d < 105) {
            ctx.beginPath();
            ctx.moveTo(pts[i].x, pts[i].y);
            ctx.lineTo(pts[j].x, pts[j].y);
            ctx.strokeStyle = 'rgba(196,160,47,' + ((1 - d / 105) * .15) + ')';
            ctx.lineWidth = .5; ctx.stroke();
          }
        }
      }

      pts.forEach(function (p) {
        p.ph += p.spd; p.x += p.vx; p.y += p.vy;
        if (p.x < -4) p.x = W + 4; if (p.x > W + 4) p.x = -4;
        if (p.y < -4) p.y = H + 4; if (p.y > H + 4) p.y = -4;
        var al = p.a * (.55 + .45 * Math.sin(p.ph));
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(196,160,47,' + al + ')'; ctx.fill();
      });

      streaks.forEach(function (s, idx) {
        s.life++; s.x += Math.cos(s.ang) * s.spd; s.y += Math.sin(s.ang) * s.spd;
        var prog = s.life / s.maxLife;
        var fade = prog < .2 ? prog / .2 : prog > .8 ? (1 - prog) / .2 : 1;
        var al = s.a * fade;
        var x2 = s.x - Math.cos(s.ang) * s.len, y2 = s.y - Math.sin(s.ang) * s.len;
        var g = ctx.createLinearGradient(x2, y2, s.x, s.y);
        g.addColorStop(0, 'rgba(196,160,47,0)');
        g.addColorStop(.5, 'rgba(196,160,47,' + al + ')');
        g.addColorStop(1, 'rgba(255,240,180,' + (al * 1.4) + ')');
        ctx.beginPath(); ctx.moveTo(x2, y2); ctx.lineTo(s.x, s.y);
        ctx.strokeStyle = g; ctx.lineWidth = 1; ctx.stroke();
        if (s.life >= s.maxLife) streaks[idx] = newStreak();
      });

      animId = requestAnimationFrame(draw);
    }

    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting) draw();
        else if (animId) cancelAnimationFrame(animId);
      }, { threshold: 0.04 }).observe(canvas);
    } else {
      draw();
    }
  }());
  </script>

</section>/* End custom CSS */