/* ==========================================================================
   IT-CoreOPS — couche de finition UI/UX
   Chargée APRÈS les styles inline de chaque page (elle peut donc les affiner).
   Additive et sûre : n'introduit aucun contenu, seulement de la finition.
   ========================================================================== */

/* Défilement fluide pour les ancres (#contact, #devis…) */
html { scroll-behavior: smooth; }

/* Sélection de texte aux couleurs de la marque */
::selection { background: rgba(13, 148, 136, .16); }

/* --- Icônes de carte : pastille en dégradé + icône SVG (pas d'emoji) --- */
.scard-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; margin-bottom: 1.35rem;
  background: linear-gradient(135deg, rgba(13, 148, 136, .12), rgba(6, 182, 212, .12));
  border: 1px solid rgba(13, 148, 136, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.scard-icon svg {
  width: 26px; height: 26px; fill: none; stroke: #0D9488;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.scard:hover .scard-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 20px rgba(13, 148, 136, .14);
}

/* --- Cartes : transitions plus douces et homogènes --- */
.scard, .pcard { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }

/* --- Boutons : interaction plus vivante --- */
.btn-g, .cta-email { transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.btn-g:hover, .cta-email:hover { box-shadow: 0 10px 30px rgba(13, 148, 136, .32); }
.btn-out { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.btn-out:hover { transform: translateY(-1px); }

/* --- Liens de navigation : soulignement animé au survol --- */
.nav-links a:not(.nav-btn) { position: relative; }
.nav-links a:not(.nav-btn)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 2px; background: var(--grad); border-radius: 2px;
  transition: right .25s ease;
}
.nav-links a:not(.nav-btn):hover::after { right: 0; }

/* --- Accessibilité : focus clavier visible et cohérent --- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px;
}

/* --- Tags : légère montée au survol de la carte --- */
.stag { transition: transform .2s ease; }
.scard:hover .stag { transform: translateY(-1px); }

/* --- Menu mobile (hamburger) : la nav ne doit jamais disparaître --- */
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--white); color: var(--black);
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }
  nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, .98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1.5rem 1.25rem; box-shadow: 0 14px 30px rgba(0, 0, 0, .06);
  }
  nav .nav-links.open { display: flex; }
  nav .nav-links li { width: 100%; }
  nav .nav-links a { display: block; padding: .95rem .25rem; font-size: 1rem; }
  nav .nav-links a::after { display: none; }
  nav .nav-links a.nav-btn { text-align: center; margin-top: .6rem; padding: .85rem; }
}

/* --- Respect de prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scard:hover .scard-icon,
  .btn-out:hover,
  .scard:hover .stag { transform: none; }
}

/* ─── FOOTER RICHE (partagé) ─── */
.footer-rich { background:#0A0A0F; color:#A1A1AA; padding:4.5rem 2.5rem 2rem; }
.footer-cols { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer-brand .logo { color:#fff; }
.footer-brand p { font-size:.85rem; color:#8A8A98; line-height:1.7; margin-top:1rem; max-width:36ch; }
.footer-social { display:flex; gap:.6rem; margin-top:1.4rem; }
.footer-social a { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#5EEAD4; transition:background .2s, border-color .2s, transform .2s; }
.footer-social a:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); transform:translateY(-2px); }
.footer-social svg { width:18px; height:18px; }
.footer-col h4 { font-family:var(--syne); font-size:.78rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem; }
.footer-col a, .footer-col span { display:block; font-size:.85rem; color:#8A8A98; text-decoration:none; margin-bottom:.7rem; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { max-width:1120px; margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:#71717A; }
.footer-bottom a { color:#71717A; text-decoration:none; margin-left:1.5rem; transition:color .2s; }
.footer-bottom a:hover { color:#fff; }
@media (max-width:820px) { .footer-cols { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px) { .footer-cols { grid-template-columns:1fr; } }