/* =====================================================================
   FOOTER — composant autonome (préfixe ft-), indépendant du reste de la page
   Contenu : « Fait par Wael Dhifaoui » · Politique de confidentialité · 8 réseaux sociaux
   Tout est confiné à .ft-footer : aucune règle globale, aucune dépendance.
   Propriétés logiques (margin-inline…) : il se retourne tout seul en arabe (droite à gauche).
   ===================================================================== */
.ft-footer{
  --ft-ink:#f4f4f6;
  --ft-ink-dim:rgba(244,244,246,.6);
  --ft-line:rgba(190,192,204,.5);
  --ft-spark:#7fe9ff;           /* point lumineux au centre du filet */
  --ft-spark-rgb:60,190,255;
  --ft-font:15px;
  --ft-tile:32px;               /* taille d'une icône */
  --ft-gap:9px;
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  min-height:62px;padding:12px 4px 10px;color:var(--ft-ink);
  font:400 var(--ft-font)/1.3 Outfit,-apple-system,BlinkMacSystemFont,"Geeza Pro","Noto Sans Arabic","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ft-footer *,.ft-footer *::before,.ft-footer *::after{box-sizing:border-box}

/* ---------- Filet supérieur + point lumineux central ---------- */
.ft-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(190,192,204,.2),var(--ft-line) 12%,rgba(150,215,255,.9) 50%,var(--ft-line) 88%,rgba(190,192,204,.2))}
.ft-spark{position:absolute;left:50%;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  background:#fff;box-shadow:0 0 6px 2px var(--ft-spark),0 0 18px 6px rgba(var(--ft-spark-rgb),.55),0 0 46px 14px rgba(var(--ft-spark-rgb),.18)}
.ft-spark::before,.ft-spark::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
/* éclat horizontal qui prolonge le point le long du filet */
.ft-spark::before{width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(170,235,255,.95),transparent)}

/* ---------- Gauche : crédit + lien ---------- */
.ft-meta{display:flex;align-items:center;gap:14px;margin:0;min-width:0;flex-wrap:wrap}
.ft-made{white-space:nowrap}
.ft-dash{width:20px;height:1px;flex:none;background:var(--ft-ink-dim)}
.ft-link{color:var(--ft-ink);text-decoration:none;border-radius:6px;padding:2px 2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .2s ease}
.ft-link:hover{background-size:100% 1px}                          /* soulignement qui se dessine */
.ft-link:focus-visible{outline:2px solid #0a84ff;outline-offset:3px}

/* ---------- Droite : réseaux sociaux ---------- */
.ft-social{display:flex;align-items:center;gap:var(--ft-gap);margin:0;padding:0;list-style:none;flex-wrap:wrap}
.ft-social li{display:block}
.ft-ico{--b:rgba(255,255,255,.28);--g:255,255,255;position:relative;display:grid;place-items:center;width:var(--ft-tile);height:var(--ft-tile);
  border-radius:8px;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),#07070b;
  box-shadow:inset 0 0 0 1px var(--b),0 0 8px rgba(var(--g),.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
/* zone tactile de 44 px même si l'icône est plus petite */
.ft-ico::before{content:"";position:absolute;inset:calc((44px - var(--ft-tile)) / -2)}
.ft-ico svg{width:24px;height:24px;display:block;overflow:visible}
.ft-ico:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--b),0 6px 16px rgba(var(--g),.35),0 0 14px rgba(var(--g),.35)}
.ft-ico:active{transform:translateY(0) scale(.94);transition-duration:.1s}
.ft-ico:focus-visible{outline:2px solid #0a84ff;outline-offset:3px}

/* info-bulle en verre : apparaît après un court délai (comme sur macOS), disparaît aussitôt */
.ft-ico::after{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);left:50%;padding:6px 10px;border-radius:9px;white-space:nowrap;pointer-events:none;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;color:#fff;
  background:rgba(28,28,36,.78);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.45);
  opacity:0;transform:translate(-50%,4px) scale(.96);transform-origin:50% 100%;
  transition:opacity .15s ease,transform .15s ease}
.ft-ico:hover::after,.ft-ico:focus-visible::after{opacity:1;transform:translate(-50%,0);transition:opacity .18s ease .35s,transform .3s cubic-bezier(.2,.9,.25,1) .35s}

/* couleurs de marque : bord teinté + lueur */
.ft-ico--linkedin{--b:rgba(10,102,194,.85);--g:10,102,194}
.ft-ico--github{--b:rgba(255,255,255,.3);--g:255,255,255}
.ft-ico--instagram{--b:rgba(214,41,118,.7);--g:214,41,118}
.ft-ico--youtube{--b:rgba(255,0,0,.75);--g:255,40,40}
.ft-ico--facebook{--b:rgba(24,119,242,.8);--g:24,119,242}
.ft-ico--whatsapp{--b:rgba(37,211,102,.7);--g:37,211,102}
.ft-ico--x{--b:rgba(255,255,255,.3);--g:255,255,255}
.ft-ico--email{--b:rgba(255,140,0,.8);--g:255,170,0}

/* ---------- Petits écrans : crédit au-dessus, icônes centrées dessous ---------- */
@media (max-width:720px){
  .ft-footer{justify-content:center;text-align:center;padding-top:18px}
  .ft-meta{justify-content:center}
  .ft-social{justify-content:center;--ft-gap:10px}
}
/* téléphone : crédit et lien sur deux lignes (plus de tiret), 8 icônes sur une seule rangée */
@media (max-width:540px){
  .ft-dash{display:none}
  .ft-meta{flex-direction:column;gap:6px}
  .ft-link{font-size:.9em;color:var(--ft-ink-dim)}
  .ft-social{--ft-gap:8px}
}
@media (max-width:340px){ .ft-footer{--ft-tile:30px} .ft-social{--ft-gap:6px} }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .ft-ico,.ft-link,.ft-ico::after{transition:opacity .15s ease}
  .ft-ico:hover{transform:none}
  .ft-ico:hover::after,.ft-ico:focus-visible::after{transform:translate(-50%,0)}
}
@media (prefers-reduced-transparency:reduce){ .ft-ico::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(28,28,36)} }
@media (prefers-contrast:more){ .ft-footer{--ft-ink-dim:#fff;--ft-line:#fff} .ft-ico{box-shadow:inset 0 0 0 2px #fff} }

/* =====================================================================
   MODE CLAIR (html[data-theme="light"], activé par la lampe du hero) — même mise en page
   ===================================================================== */
:root[data-theme="light"] .ft-footer{--ft-ink:#1b1f2e;--ft-ink-dim:rgba(27,31,46,.55);--ft-line:rgba(27,31,46,.16);--ft-spark:#2b8cff;--ft-spark-rgb:43,140,255}
:root[data-theme="light"] .ft-footer::before{background:linear-gradient(90deg,rgba(27,31,46,.04),var(--ft-line) 12%,rgba(43,140,255,.55) 50%,var(--ft-line) 88%,rgba(27,31,46,.04))}
:root[data-theme="light"] .ft-spark::before{background:linear-gradient(90deg,transparent,rgba(43,140,255,.8),transparent)}
/* tuiles blanches, bord teinté de la marque */
:root[data-theme="light"] .ft-ico{background:linear-gradient(180deg,#fff,#f3f5fa);box-shadow:inset 0 0 0 1px var(--b),0 2px 6px rgba(27,31,46,.08)}
:root[data-theme="light"] .ft-ico:hover{box-shadow:inset 0 0 0 1px var(--b),0 8px 18px rgba(var(--g),.25)}
:root[data-theme="light"] .ft-ico--github,:root[data-theme="light"] .ft-ico--x{--b:rgba(27,31,46,.25);--g:27,31,46}
:root[data-theme="light"] .ft-ico--github path,:root[data-theme="light"] .ft-ico--x path{fill:#1b1f2e}
:root[data-theme="light"] .ft-ico--email rect,:root[data-theme="light"] .ft-ico--email path{stroke:#e0a100}

/* téléphone compact : icônes sur une rangée, crédit et lien sur une seule petite ligne */
@media (max-width:540px){
  .ft-footer{--ft-tile:28px;gap:6px;min-height:0;padding:10px 0 4px;flex-direction:column-reverse}
  .ft-ico svg{width:20px;height:20px}
  .ft-ico::before{inset:-4px}
  .ft-meta{flex-direction:row;flex-wrap:nowrap;gap:7px;font-size:11px;white-space:nowrap}
  .ft-dash{display:block;width:8px}
  .ft-link{font-size:1em}
}
@media (max-width:400px){ .ft-meta{font-size:9.6px;gap:5px} .ft-dash{width:6px} }