/* ============================================================
   COMPONENTS 2026 — Styles partagés (nav dropdown, footer, slider
   réalisations). Chargé sur toutes les pages après la feuille
   principale. Tout en !important pour surcharger d'anciennes
   feuilles (page-site-vitrine.css notamment).
============================================================ */

/* ───────────────────────────────────────
   1. DROPDOWN MENU NAV
─────────────────────────────────────── */
.nav-left,.nav-right{position:relative}
.dd{position:relative}
.dd>a.dd-t{cursor:pointer}
.dd>a.dd-t::after{content:" \25BE";font-size:10px;margin-left:2px;opacity:.75}
.dd-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);padding-top:18px;min-width:260px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:500}
.dd-m-in{background:#0b0b0b;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:8px 0;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.dd:hover .dd-m,.dd:focus-within .dd-m{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-m a{display:block!important;padding:11px 22px!important;font-size:12.5px!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:none!important;color:rgba(255,255,255,.88)!important;white-space:nowrap}
.dd-m a::after{display:none!important}
.dd-m a:hover{background:rgba(145,239,25,.08);color:#91ef19!important}

/* ───────────────────────────────────────
   2. FOOTER
─────────────────────────────────────── */
#as-footer{display:block!important;background:#0d0d0d!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:60px 44px 30px!important;color:#fff!important;font-family:'Figtree','Helvetica Neue',Arial,sans-serif!important;text-transform:none!important;letter-spacing:normal!important}
#as-footer *{box-sizing:border-box!important}
#as-footer a{text-decoration:none!important}
#as-footer .fo{max-width:1140px!important;margin:0 auto!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:40px!important;flex-wrap:wrap!important;padding:0!important}
#as-footer .fo>div{flex:1 1 200px!important;min-width:180px!important;padding:0!important;margin:0!important}
#as-footer .fl{display:block!important;font-family:inherit!important;font-weight:normal!important;font-size:inherit!important;letter-spacing:normal!important;text-transform:none!important;color:inherit!important;margin:0 0 18px 0!important;padding:0!important}
#as-footer .fl a{display:inline-block!important}
#as-footer .fl img{height:86px!important;width:auto!important;display:block!important;margin:0!important}
#as-footer .fi2{font-size:14px!important;line-height:1.65!important;color:rgba(255,255,255,.82)!important;margin:0!important;font-weight:normal!important;text-transform:none!important;letter-spacing:normal!important}
#as-footer .fi2 strong{display:block!important;margin-bottom:10px!important;color:#fff!important;font-family:'Outfit','Helvetica Neue',Arial,sans-serif!important;font-size:16px!important;font-weight:700!important}
#as-footer .flt{font-family:'Outfit','Helvetica Neue',Arial,sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#fff!important;margin:0 0 14px 0!important;padding:0!important}
#as-footer .fls{display:flex!important;flex-direction:column!important;gap:10px!important;padding:0!important;margin:0!important;list-style:none!important}
#as-footer .fls a{font-size:14px!important;color:rgba(255,255,255,.82)!important;text-decoration:none!important;transition:color .2s!important;padding:0!important;margin:0!important;font-weight:normal!important;text-transform:none!important;letter-spacing:normal!important;line-height:1.4!important}
#as-footer .fls a:hover{color:#91ef19!important}
#as-footer .flegal{max-width:1140px!important;margin:40px auto 10px!important;padding:24px 0 0 0!important;border-top:1px solid rgba(255,255,255,.08)!important;display:flex!important;gap:14px!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;font-size:12px!important;color:rgba(255,255,255,.72)!important}
#as-footer .flegal a{color:rgba(255,255,255,.82)!important;text-decoration:none!important;transition:color .2s!important}
#as-footer .flegal a:hover{color:#91ef19!important}
#as-footer .flegal span{opacity:.4!important}
#as-footer .fbot{max-width:1140px!important;margin:6px auto 0!important;padding:0!important;border:none!important;font-size:12px!important;color:rgba(255,255,255,.72)!important;background:transparent!important;text-align:center!important}
#as-footer .fsocial{display:flex!important;gap:12px!important;margin-top:18px!important}
#as-footer .fsocial a{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;border-radius:50%!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;transition:all .25s!important;padding:0!important;margin:0!important}
#as-footer .fsocial a:hover{background:rgba(145,239,25,.12)!important;border-color:rgba(145,239,25,.4)!important;transform:translateY(-2px)!important}
#as-footer .fsocial svg{width:18px!important;height:18px!important;stroke:#fff!important;fill:none!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#as-footer .fsocial a:hover svg{stroke:#91ef19!important}
@media(max-width:760px){
  #as-footer{padding:48px 22px 24px!important}
  #as-footer .fo{flex-direction:column!important;gap:28px!important;align-items:center!important;text-align:center!important}
  #as-footer .fl img{height:64px!important}
  #as-footer .fls{align-items:center!important}
  #as-footer .flegal{justify-content:center!important;text-align:center!important}
  #as-footer .fsocial{justify-content:center!important}
}

/* ───────────────────────────────────────
   3. SECTION RÉALISATIONS SLIDER (partagé)
   Scopé sous .as-rea-sec pour que l'include
   utilise cette classe au lieu d'un id dynamique.
─────────────────────────────────────── */
.as-rea-sec{padding:90px 44px}
.as-rea-sec .si{max-width:1140px;margin:0 auto}
.as-rea-sec .sl{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:#6DC12A}
.as-rea-sec .sl::before{content:'';width:22px;height:1.5px;background:#6DC12A}
.as-rea-sec h2{font-family:'Outfit','Helvetica Neue',Arial,sans-serif;font-size:42px;font-weight:800;line-height:1.15;margin:0 0 14px}
.as-rea-sec h2 em{font-style:normal;color:#6DC12A}
.as-rea-sec .ssub{font-size:16px;line-height:1.6;margin:0 0 36px;max-width:680px}

.as-rea-sec .slider-wrap{position:relative;overflow:hidden}
.as-rea-sec .slider-track{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;padding:4px 2px 16px;cursor:grab;user-select:none}
.as-rea-sec .slider-track::-webkit-scrollbar{display:none}
.as-rea-sec .slider-track.dragging{cursor:grabbing;scroll-behavior:auto}
.as-rea-sec .slider-track .rc{flex:0 0 320px;scroll-snap-align:start;min-width:0}

.as-rea-sec .rc{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.as-rea-sec .rc:hover{border-color:rgba(109,193,42,.35);transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.08)}

.as-rea-sec .rc-thumb{aspect-ratio:600/338;height:auto;position:relative;display:flex;align-items:flex-end;padding:14px;overflow:hidden}
.as-rea-sec .rc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.as-rea-sec .rc-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.55));z-index:1;pointer-events:none}

.as-rea-sec .rc-cat{position:relative;z-index:2;display:inline-block;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#91ef19;color:#050505;padding:6px 12px;border-radius:50px}
.as-rea-sec .rc-res{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.72);color:#91ef19;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;padding:5px 11px;border-radius:50px;backdrop-filter:blur(4px)}

.as-rea-sec .rc-body{padding:20px 22px 22px;background:#fff;color:#1a1a1a}
.as-rea-sec .rc-name{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:4px}
.as-rea-sec .rc-sec{font-size:11px;color:#777;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.as-rea-sec .rc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.as-rea-sec .rc-tags .rt{font-size:11px;font-weight:600;padding:4px 10px;border-radius:50px;background:#f2f2ef;color:#555}
.as-rea-sec .rc-visit{display:inline-flex;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2f7d10;text-decoration:none;padding:9px 16px;border:1.5px solid #2f7d10;border-radius:50px;transition:all .25s}
.as-rea-sec .rc-visit:hover{background:#2f7d10;color:#fff}
.as-rea-sec .rc-visit svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.as-rea-sec .slider-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}
.as-rea-sec .sc-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);color:#555;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;transition:all .2s}
.as-rea-sec .sc-btn:hover{border-color:#6DC12A;color:#6DC12A;background:rgba(109,193,42,.06)}
.as-rea-sec .sc-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.as-rea-sec .sc-dots{display:flex;gap:7px;align-items:center}
.as-rea-sec .sc-dots .sd{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.2);cursor:pointer;transition:all .2s}
.as-rea-sec .sc-dots .sd.on{width:22px;border-radius:50px;background:#6DC12A}

.as-rea-sec.lk{background:#f5f5f3;color:#1a1a1a}
.as-rea-sec.lk .ssub{color:#555}
.as-rea-sec.dk{background:#0a0a0a;color:#fff}
.as-rea-sec.dk .ssub{color:rgba(255,255,255,.72)}
.as-rea-sec.dk .sc-btn{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.as-rea-sec.dk .sc-dots .sd{background:rgba(255,255,255,.25)}

@media(max-width:760px){
  .as-rea-sec{padding:60px 20px}
  .as-rea-sec h2{font-size:30px}
  .as-rea-sec .slider-track .rc{flex:0 0 82%}
}