/* ===========================================================================
   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}
}


/* ===========================================================================
   v212 LOCATION-CARD BUTTONS (session 10). User approved variant A from the
   button mockup: Itineraire full width in the orange primary, then WhatsApp
   and Appeler side by side beneath it.

   THE BUG THIS FIXES, measured on the live product page rather than guessed:
   .btn-primary above paints linear-gradient(180deg,var(--amber),var(--orange)),
   but --amber/--orange are NOT defined on product pages - that template scopes
   its palette as --x-amber/--x-orange. An undefined var() invalidates the whole
   declaration at computed-value time, so background fell back to transparent
   and Itineraire rendered as a full-width black bar. .l2wa and .l2call were
   unaffected because they use literal rgba(). Hence: literal colours only
   below, no custom properties, so this card cannot break on any page again.
   Scoped to .loc2-cta so only the location card's three buttons change.
   ======================================================================== */
.loc2-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.loc2-cta .btn-primary,.loc2-cta .l2wa,.loc2-cta .l2call{
  display:inline-flex!important;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 18px!important;border-radius:100px;
  font-family:'General Sans',sans-serif;font-size:15px;font-weight:600;
  line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),background .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1),border-color .22s cubic-bezier(.22,.61,.36,1)}
/* Itineraire: the primary, full width across both columns */
.loc2-cta .btn-primary{
  grid-column:1/-1;border:0;
  background:linear-gradient(180deg,#F0A038,#E07E0C)!important;
  color:#1A1207!important;
  box-shadow:0 12px 28px -16px rgba(224,126,12,.42),inset 0 1px 0 rgba(255,255,255,.14)}
.loc2-cta .btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 18px 34px -16px rgba(224,126,12,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.loc2-cta .btn-primary .arw{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.loc2-cta .btn-primary:hover .arw{transform:translateX(4px)}
/* WhatsApp: the green action */
.loc2-cta .l2wa{
  background:rgba(50,209,123,.09)!important;border:1px solid rgba(50,209,123,.34)!important;
  color:#32D17B!important;
  box-shadow:0 0 26px -14px rgba(50,209,123,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.loc2-cta .l2wa:hover{background:rgba(50,209,123,.15)!important;
  border-color:rgba(50,209,123,.5)!important;transform:translateY(-2px)}
/* Appeler: neutral glass */
.loc2-cta .l2call{
  background:linear-gradient(157deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%),rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.loc2-cta .l2call:hover{background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.24)!important;transform:translateY(-2px)}

/* ===========================================================================
   v213 PALETTE SAFETY NET — the fix for the whole undefined-var() bug class
   on this card, not just the one button session 10 patched.

   The block above hard-codes #F0A038/#E07E0C into .loc2-cta .btn-primary
   because --amber/--orange are undefined on product pages (that template
   scopes its palette as --x-amber/--x-orange) and an undefined var()
   invalidates the WHOLE declaration, so the button painted as a black bar.

   But .btn-primary was never the only casualty. Three more rules in this
   file reach for the same two properties, and all three were silently
   broken on product pages and on /accessoires (which defines no --amber
   at all):

     .fgrad     background:linear-gradient(...var(--amber)...)  -> invalid,
                so "Yamoussoukro" in the heading kept color:transparent and
                rendered INVISIBLE.
     .lc-logo   background:linear-gradient(135deg,var(--amber),var(--orange))
                -> invalid, so the orange M tile in the map card vanished
                and only the bare letter showed.
     .lic2      color:var(--amber) -> invalid, so the address/phone/mail/
                clock icons fell back to white instead of orange.

   Patching each rule with literals again would leave the next one to be
   added just as fragile. Defining the two properties ON THE SECTION fixes
   every current and future consumer in one place, and inherits down to all
   of them. The values are the brand's own, verified identical (#F7A12B /
   #F2890E) on accueil.html, impression, reparation, transfert, facture, the
   imp-* pages and mascot-category.php — so on every page that already
   defines them this rule is a no-op, and on the ones that do not it is the
   repair. ⚠️ If the brand palette is ever re-toned, change it HERE too or
   this card will keep the old orange. */
.loc2{--amber:#F7A12B;--orange:#F2890E}