/* ===========================================================================
   mk-loc.css  -  the homepage "Retrouvez-nous" (.loc2) section, made portable
   so /transfert-dargent, /paiement-de-facture and /service-dimpression can all
   carry the IDENTICAL block instead of each keeping its own contact card.

   THE RULES ARE COPIED VERBATIM FROM accueil.html's inline <style>. Do not
   "improve" them here - the user's ask was explicitly "implement it exactly as
   the home page", so any drift between this file and accueil.html is a bug.
   If the homepage section is ever restyled, this file has to move with it.

   TWO DELIBERATE DIFFERENCES FROM THE HOMEPAGE, both forced by the host pages:

   1. SCROLL-REVEAL CLASS IS `.reveal`, NOT `.up`.
      The homepage markup uses class="up" and accueil.html's inline script adds
      `.in` to those elements. The three service pages ship a DIFFERENT reveal
      script that only ever queries `.reveal`. Porting `class="up"` verbatim
      would have shipped a section stuck at opacity:0 forever, because nothing
      on those pages adds `.in` to a `.up`. The markup therefore uses `.reveal`,
      which those pages already animate identically (fade + 24px rise).
      `.up` is ALSO defined below, so the block still works if it is ever
      dropped onto a page that uses the homepage script instead.

   2. THE SECTION INHERITS THE HOST PAGE'S `.wrap` (1180px), not the homepage's
      (1220px). Redefining .wrap here would have reflowed every other section on
      the host page. 40px narrower, and it keeps the page's own rhythm.

   `.fgrad` and `.btn-primary` are included because the homepage markup uses
   them and the service pages define neither (they use .btn-o). Including them
   is what lets the markup drop in unmodified.

   Depends on the host page already defining --amber, --orange and --ease.
   All three service pages do; verified before shipping.
   =========================================================================== */

/* ---- helpers the homepage markup needs and the service pages lack ---- */
.fgrad{background:linear-gradient(100deg,var(--amber),var(--orange) 55%,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{background:linear-gradient(180deg,var(--amber),var(--orange));color:#1a1207;
  box-shadow:0 10px 34px rgba(242,137,14,.42)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(242,137,14,.55)}
.up{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.up.in{opacity:1;transform:none}

/* ---- the section itself: verbatim from accueil.html ---- */
.loc2{position:relative;overflow:hidden;
  background:radial-gradient(820px 460px at 85% 0%,rgba(242,137,14,.14),transparent 60%),
    radial-gradient(700px 420px at 8% 100%,rgba(31,107,255,.12),transparent 60%),#0A0C10;
  color:#fff;padding:clamp(64px,8vw,110px) 0}
.loc2-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.lg1{width:520px;height:520px;background:rgba(242,137,14,.14);top:-180px;right:-100px;
  animation:locFloat 12s ease-in-out infinite}
.lg2{width:440px;height:440px;background:rgba(31,107,255,.12);bottom:-160px;left:-80px;
  animation:locFloat 14s ease-in-out infinite reverse}
@keyframes locFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,24px)}}
.loc2-head{position:relative;text-align:center;max-width:62ch;margin:0 auto clamp(30px,4vw,52px)}
.loc2-head h3{font-family:'Clash Display',sans-serif;font-weight:600;
  font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.02em;color:#fff;margin-top:14px}
.loc2-head p{color:rgba(255,255,255,.65);margin-top:12px;font-size:16px}
.loc2-grid{position:relative;display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(22px,3vw,40px);align-items:stretch}
.loc2-map{position:relative;border-radius:26px;overflow:hidden;min-height:540px;
  border:1px solid rgba(255,255,255,.15);box-shadow:0 50px 120px -45px rgba(0,0,0,.9)}
.loc2-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(88%) hue-rotate(180deg) saturate(.35) contrast(.92);
  transition:filter .7s var(--ease)}
.loc2-map:hover iframe{filter:none}
@media(hover:none){.loc2-map iframe{filter:saturate(.9)}}
.loc2-card{position:absolute;top:16px;left:16px;max-width:340px;
  background:rgba(10,12,16,.74);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.lc-top{display:flex;gap:12px;align-items:center}
.lc-logo{flex:none;font-family:'Clash Display',sans-serif;font-weight:700;
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,var(--amber),var(--orange));
  display:grid;place-items:center;color:#1a1207;font-size:20px}
.lc-logo i{font-style:normal;color:#fff}
.lc-id b{display:block;font-size:16px}
.lc-sub{color:rgba(255,255,255,.65);font-size:12.5px}
.lc-star{color:#F6CD63;font-weight:700}
.loc2 .loc-badge{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:100px}
.loc2 .loc-badge .dot{width:9px;height:9px;border-radius:50%;background:#13BE6D;
  animation:locDot 2.2s infinite}
@keyframes locDot{0%{box-shadow:0 0 0 0 rgba(19,190,109,.55)}
  70%{box-shadow:0 0 0 9px rgba(19,190,109,0)}
  100%{box-shadow:0 0 0 0 rgba(19,190,109,0)}}
.loc2 .loc-badge.closed .dot{background:#e05555;animation:none}
.loc2-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  max-width:calc(100% - 28px);font-size:11.5px;letter-spacing:.4px;
  color:rgba(255,255,255,.9);background:rgba(10,12,16,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);padding:7px 15px;border-radius:100px;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc2-info{display:flex;flex-direction:column;gap:13px;justify-content:center}
.l2row{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:15px 18px;
  color:#fff;text-decoration:none;
  transition:transform .3s var(--ease),background .3s,border-color .3s}
a.l2row:hover{transform:translateX(6px);background:rgba(255,255,255,.1);
  border-color:rgba(247,161,43,.5)}
.lic2{flex:none;width:42px;height:42px;border-radius:12px;
  background:rgba(242,137,14,.16);color:var(--amber);display:grid;place-items:center}
.l2row b{display:block;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600}
.l2row .v{font-size:15.5px}
.loc2-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.l2wa{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px;
  background:rgba(19,190,109,.16);color:#3ee08f;border:1px solid rgba(19,190,109,.4);
  font-weight:600;font-size:15px;text-decoration:none;transition:all .3s var(--ease)}
.l2wa:hover{background:rgba(19,190,109,.26);transform:translateY(-2px)}
.l2call{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  font-weight:600;font-size:15px;text-decoration:none;transition:all .3s var(--ease)}
.l2call:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}

@media(max-width:900px){
  .loc2-grid{grid-template-columns:1fr}
  .loc2-map{min-height:430px}
  .loc2-card{left:12px;right:12px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .lg1,.lg2,.loc2 .loc-badge .dot{animation:none}
}