/* ══════════════════════════════════════════════════════════════
   WECONALL — style.css (Animations + Composants custom)
   Tailwind gère le layout, le spacing, la typography.
   Ce fichier contient uniquement ce qui est difficile en Tailwind.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --primary: #0066FF;
  --secondary: #1E88E5;
  --cyan: #0EA5C9;
  --dark: #071220;
  --dark-mid: #112A55;
  --gray-50: #F5F7FA;
  --gray-100: #EEF2F8;
  --gray-200: #DDE4F0;
  --gray-400: #8FA0BE;
  --gray-600: #4A5C7A;
  --gray-800: #1F2937;
  --gold: #F59E0B;
  --green: #10B981;
  --wa-green: #25D366;
  --red: #EF4444;

  --font-display: 'Outfit', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, .55, .45, 1);
  --transition: .3s var(--ease);
}

/* ── 2. SCROLLBAR ────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
/* iOS Safari : quand overflow-x:hidden n'est posé QUE sur <body>, le body
   devient lui-même un conteneur de scroll séparé du viewport. WebKit gère
   alors mal les éléments position:fixed (comme le header/burger) pendant
   le défilement : ils peuvent devenir visuellement figés mais ne plus
   recevoir les taps tant que le scroll n'est pas totalement immobile.
   Le poser aussi sur <html> évite ce double contexte de scroll. */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-600); }

/* ── 3. REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .05s; }
.reveal-delay-2 { transition-delay: .1s; }
.reveal-delay-3 { transition-delay: .15s; }
.reveal-delay-4 { transition-delay: .2s; }
.reveal-delay-5 { transition-delay: .25s; }
.reveal-delay-6 { transition-delay: .3s; }
.reveal-delay-7 { transition-delay: .35s; }
.reveal-delay-8 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 4. KEYFRAMES ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes barReveal {
  from { width: 0; }
}
@keyframes lineGrow {
  0%, 100% { opacity: .3; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.12); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes cookieSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes popupSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-fade-up { animation: fadeUp 1s var(--ease-out) both; }
.animate-fade-in { animation: fadeIn .6s var(--ease) both; }
.animate-cookie-slide { animation: cookieSlide .45s var(--ease-out); }
.animate-popup-slide { animation: popupSlideIn .4s cubic-bezier(.175, .885, .32, 1.275) both; }
.animate-blink { animation: blink 2s ease-in-out infinite; }
.animate-line-grow { animation: lineGrow 2s ease-in-out infinite; }
.animate-float { animation: floatUpDown 4s ease-in-out infinite; }

/* ── 5. HERO CANVAS ─────────────────────────────────────────── */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── 6. FOND DU HERO ─────────────────────────────────────────────
   Une photo pleine largeur, propre à chaque page : c'est elle qui
   identifie la page, à la place de l'ancien quadrillage de lignes.
   Un voile dégradé garantit la lisibilité du texte par-dessus. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}
.hero-bg--projet-skolio::after,
.hero-bg--projet-css::after,
.hero-bg--blog::after {
  background:
    linear-gradient(100deg,
      rgba(7, 18, 32, .97) 0%,
      rgba(7, 18, 32, .95) 34%,
      rgba(7, 18, 32, .88) 58%,
      rgba(9, 26, 52, .80) 100%),
    linear-gradient(to top, rgba(7, 18, 32, .90) 0%, rgba(7, 18, 32, .18) 48%) !important;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(7, 18, 32, .97) 0%,
      rgba(7, 18, 32, .94) 32%,
      rgba(7, 18, 32, .82) 56%,
      rgba(9, 26, 52, .72) 100%),
    linear-gradient(to top, rgba(7, 18, 32, .88) 0%, rgba(7, 18, 32, .12) 46%);
}
/* Sous 1024 px le texte occupe toute la largeur : le voile est renforcé. */
@media (max-width: 1023px) {
  .hero-bg { background-position: 62% center; }
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(7, 18, 32, .93) 0%, rgba(7, 18, 32, .90) 60%, rgba(7, 18, 32, .96) 100%);
  }
}

/* Repli pour les navigateurs sans image-set() */
.hero-bg--accueil { background-image: url('../assets/images/heroes/accueil.jpg'); }
.hero-bg--about { background-image: url('../assets/images/heroes/collaborer.jpg'); }
.hero-bg--services { background-image: url('../assets/images/heroes/services.jpg'); }
.hero-bg--formations { background-image: url('../assets/images/heroes/formations.jpg'); }
.hero-bg--portfolio { background-image: url('../assets/images/heroes/portfolio.jpg'); }
.hero-bg--blog { background-image: url('../assets/images/heroes/blog.jpg'); }
.hero-bg--carrieres { background-image: url('../assets/images/heroes/carrieres.jpg'); }
.hero-bg--team { background-image: url('../assets/images/heroes/carrieres.jpg'); }
.hero-bg--contact { background-image: url('../assets/images/heroes/accueil.jpg'); }
.hero-bg--collaborer { background-image: url('../assets/images/heroes/collaborer.jpg'); }
.hero-bg--projet { background-image: url('../assets/images/heroes/portfolio.jpg'); }
.hero-bg--projet-atn { background-image: url('../assets/images/heroes/projet-atn.jpg'); }
.hero-bg--projet-css { background-image: url('../assets/images/heroes/projet-css.jpg'); }
.hero-bg--projet-ipamep { background-image: url('../assets/images/heroes/projet-ipamep.jpg'); }
.hero-bg--projet-skolio { background-image: url('../assets/images/heroes/projet-skolio.jpg'); }

@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .hero-bg--accueil { background-image: image-set(url('../assets/images/heroes/accueil.webp') type('image/webp'),
                                     url('../assets/images/heroes/accueil.jpg') type('image/jpeg')); }
  .hero-bg--about { background-image: image-set(url('../assets/images/heroes/collaborer.webp') type('image/webp'),
                                     url('../assets/images/heroes/collaborer.jpg') type('image/jpeg')); }
  .hero-bg--services { background-image: image-set(url('../assets/images/heroes/services.webp') type('image/webp'),
                                     url('../assets/images/heroes/services.jpg') type('image/jpeg')); }
  .hero-bg--formations { background-image: image-set(url('../assets/images/heroes/formations.webp') type('image/webp'),
                                     url('../assets/images/heroes/formations.jpg') type('image/jpeg')); }
  .hero-bg--portfolio { background-image: image-set(url('../assets/images/heroes/portfolio.webp') type('image/webp'),
                                     url('../assets/images/heroes/portfolio.jpg') type('image/jpeg')); }
  .hero-bg--blog { background-image: image-set(url('../assets/images/heroes/blog.webp') type('image/webp'),
                                     url('../assets/images/heroes/blog.jpg') type('image/jpeg')); }
  .hero-bg--carrieres { background-image: image-set(url('../assets/images/heroes/carrieres.webp') type('image/webp'),
                                     url('../assets/images/heroes/carrieres.jpg') type('image/jpeg')); }
  .hero-bg--team { background-image: image-set(url('../assets/images/heroes/carrieres.webp') type('image/webp'),
                                     url('../assets/images/heroes/carrieres.jpg') type('image/jpeg')); }
  .hero-bg--contact { background-image: image-set(url('../assets/images/heroes/accueil.webp') type('image/webp'),
                                     url('../assets/images/heroes/accueil.jpg') type('image/jpeg')); }
  .hero-bg--collaborer { background-image: image-set(url('../assets/images/heroes/collaborer.webp') type('image/webp'),
                                     url('../assets/images/heroes/collaborer.jpg') type('image/jpeg')); }
  .hero-bg--projet { background-image: image-set(url('../assets/images/heroes/portfolio.webp') type('image/webp'),
                                     url('../assets/images/heroes/portfolio.jpg') type('image/jpeg')); }
  .hero-bg--projet-atn { background-image: image-set(url('../assets/images/heroes/projet-atn.webp') type('image/webp'),
                                     url('../assets/images/heroes/projet-atn.jpg') type('image/jpeg')); }
  .hero-bg--projet-css { background-image: image-set(url('../assets/images/heroes/projet-css.webp') type('image/webp'),
                                     url('../assets/images/heroes/projet-css.jpg') type('image/jpeg')); }
  .hero-bg--projet-ipamep { background-image: image-set(url('../assets/images/heroes/projet-ipamep.webp') type('image/webp'),
                                     url('../assets/images/heroes/projet-ipamep.jpg') type('image/jpeg')); }
  .hero-bg--projet-skolio { background-image: image-set(url('../assets/images/heroes/projet-skolio.webp') type('image/webp'),
                                     url('../assets/images/heroes/projet-skolio.jpg') type('image/jpeg')); }
}

/* ── 7. HERO ORBS ───────────────────────────────────────────── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* ── 8. NAVBAR LINKS ────────────────────────────────────────── */
.nav-link {
  color: rgba(255,255,255,.75);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  color: #fff;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ── 9. MOBILE NAV LINKS ────────────────────────────────────── */
.mobile-link {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  font-weight: 500;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color var(--transition);
  text-decoration: none;
}
.mobile-link:hover,
.mobile-link[aria-current="page"] {
  color: var(--cyan);
}

/* ── 10. SERVICE CARDS HOVER ────────────────────────────────── */
.service-card {
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.service-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 16px 56px rgba(0, 102, 255, .15);
}
.service-card:hover::after {
  transform: scaleX(1);
}
.service-card .service-icon-wrap {
  transition: background var(--transition);
}
.service-card:hover .service-icon-wrap {
  background: var(--primary);
}
.service-card:hover .service-icon-wrap svg {
  color: #fff !important;
}

/* ── 11. PORTFOLIO CARDS ────────────────────────────────────── */
.portfolio-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  text-decoration: none;
}
.portfolio-card .portfolio-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s var(--ease);
}
.portfolio-card:hover .portfolio-bg {
  transform: scale(1.08);
}
.portfolio-card .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,18,32,.92) 0%, rgba(7,18,32,.3) 55%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  transition: background var(--transition);
}
.portfolio-card .portfolio-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.portfolio-card:hover .portfolio-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── 12. TESTIMONIAL CARDS ──────────────────────────────────── */
.testimonial-card {
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--primary);
  opacity: .08;
  position: absolute;
  top: .5rem;
  left: 1rem;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 13. LIGHTBOX ───────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}
.lightbox-btn {
  position: absolute;
  color: rgba(255,255,255,.7);
  padding: .5rem;
  cursor: pointer;
  transition: color .2s;
  background: none;
  border: none;
}
.lightbox-btn:hover { color: #fff; }

/* ── 14. TRUSTED CAROUSEL ───────────────────────────────────── */
.trusted-carousel-section { overflow: hidden; }
.trusted-carousel-track {
  display: flex;
  gap: 1.5rem;
  will-change: transform;
}
.trusted-carousel-item {
  flex: 0 0 180px;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(7,18,32,.06);
  border: 1px solid var(--gray-200);
  transition: all .3s var(--ease);
}
.trusted-carousel-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 56px rgba(0,102,255,.15);
  border-color: var(--primary);
}
.trusted-carousel-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.trusted-carousel-item:hover img {
  transform: scale(1.05);
}
@media (max-width: 850px) {
  .trusted-carousel-item { flex: 0 0 150px; padding: 1rem; }
  .trusted-carousel-item img { width: 80px; height: 80px; }
}
@media (max-width: 600px) {
  .trusted-carousel-item { flex: 0 0 130px; padding: .8rem; }
  .trusted-carousel-item img { width: 65px; height: 65px; }
}

/* ── 15. PROCESS STEPS ──────────────────────────────────────── */
.process-step {
  position: relative;
}
.process-step::after {
  content: '\2192';
  position: absolute;
  right: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-size: 1.25rem;
}
.process-step:last-child::after { display: none; }
@media (max-width: 1024px) {
  .process-step::after { display: none; }
}

/* ── 16. POPUP TRAINING ─────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,18,32,.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  padding: 16px;
}
.popup-overlay.active {
  opacity: 1;
  visibility: visible;
}
.popup-card {
  position: relative;
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
  border-radius: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 98vh;
  overflow-y: auto;
  padding: 32px 28px 24px;
  box-shadow: 0 25px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(0,102,255,.12);
  text-align: center;
  animation: popupSlideIn .4s cubic-bezier(.175, .885, .32, 1.275) both;
}
.popup-card::-webkit-scrollbar { width: 4px; }
.popup-card::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,.05);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all .2s ease;
}
.popup-close:hover {
  background: rgba(220,38,38,.12);
  color: #dc2626;
  transform: rotate(90deg);
}

/* ── 17. HERO VISUAL CARD ───────────────────────────────────── */
.card-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-ghost {
  position: absolute;
  width: 90%;
  height: 90%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.card-ghost:nth-child(1) { transform: rotate(-4deg) scale(.95); }
.card-ghost:nth-child(2) { transform: rotate(2.5deg) scale(.92); }
.card-main {
  position: relative;
  z-index: 3;
  width: 88%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  padding: 2rem;
  overflow: hidden;
}
.bar-track {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  animation: barReveal 1.6s var(--ease) both;
}
.bar-fill[data-delay="0"] { animation-delay: 0s; }
.bar-fill[data-delay="1"] { animation-delay: 0.2s; }
.bar-fill[data-delay="2"] { animation-delay: 0.4s; }

.float-badge {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: .55rem .9rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  gap: .45rem;
  animation: floatUpDown 4s ease-in-out infinite;
}
.float-badge[data-pos="1"] { bottom: -1rem; left: -2rem; animation-delay: 0s; }
.float-badge[data-pos="2"] { top: -1rem; right: -1rem; animation-delay: 0.3s; }

/* ── Animation Delays for Fade-up elements ── */
[data-animation-delay="1"] { animation-delay: 0.12s; }
[data-animation-delay="2"] { animation-delay: 0.24s; }
[data-animation-delay="3"] { animation-delay: 0.36s; }
[data-animation-delay="4"] { animation-delay: 0.5s; }


/* ── Radial gradient backdrop ── */
.radial-gradient {
  background-image: radial-gradient(circle at 30% 50%, white 0%, transparent 60%);
}

/* ── 18. VALUE ITEMS ────────────────────────────────────────── */
.value-item {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.value-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(0,102,255,.08);
}
.value-item:hover .value-icon-wrap {
  background: var(--primary);
}
.value-item:hover .value-icon-wrap svg {
  color: #fff !important;
}

/* ── 19. VISION GOALS ───────────────────────────────────────── */
.vision-goal {
  transition: background var(--transition);
}
.vision-goal:hover {
  background: rgba(255,255,255,.1);
}

/* ── 20. WHY CARDS ──────────────────────────────────────────── */
.why-card {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.why-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 28px rgba(7,18,32,.08);
}

/* ── 21. FAQ CARDS ──────────────────────────────────────────── */
.faq-card {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 28px rgba(7,18,32,.06);
}

/* ── 22. CASE HIGHLIGHT ─────────────────────────────────────── */
.case-highlight {
  transition: transform var(--transition), box-shadow var(--transition);
}
.case-highlight:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,102,255,.15);
}

/* ── 23. TEAM CARDS ─────────────────────────────────────────── */
.team-card {
  transition: all var(--transition);
}
.team-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,102,255,.15);
}

/* ── 24. TIMELINE ───────────────────────────────────────────── */
.timeline-line {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), rgba(0,102,255,.15));
}
.timeline-dot {
  position: absolute;
  left: -2.2rem;
  top: .25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(0,102,255,.2);
}

/* ── 25. CERT CARDS ─────────────────────────────────────────── */
.cert-card {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cert-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 28px rgba(7,18,32,.06);
}

/* ── 26. BLOG CARDS ─────────────────────────────────────────── */
.blog-card {
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,102,255,.1);
}

/* Portfolio image classes */
.portfolio-ipamep {
  background-image: url('../assets/images/projects/ipamep.jpg');
  background-image: image-set(url('../assets/images/projects/ipamep.webp') type('image/webp'),
                              url('../assets/images/projects/ipamep.jpg') type('image/jpeg'));
}
.portfolio-skolio {
  background-image: url('../assets/images/projects/skolio.jpg');
  background-image: image-set(url('../assets/images/projects/skolio.webp') type('image/webp'),
                              url('../assets/images/projects/skolio.jpg') type('image/jpeg'));
}
.portfolio-css {
  background-image: url('../assets/images/projects/css.jpg');
  background-image: image-set(url('../assets/images/projects/css.webp') type('image/webp'),
                              url('../assets/images/projects/css.jpg') type('image/jpeg'));
}
.portfolio-atn {
  background-image: url('../assets/images/projects/atn.jpg');
  background-image: image-set(url('../assets/images/projects/atn.webp') type('image/webp'),
                              url('../assets/images/projects/atn.jpg') type('image/jpeg'));
}
.blog-card .blog-img {
  transition: transform .5s var(--ease);
}
.blog-card:hover .blog-img {
  transform: scale(1.05);
}

/* ── 27. CAREER CARDS ───────────────────────────────────────── */
.career-card {
  transition: transform var(--transition), box-shadow var(--transition);
}
.career-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,102,255,.1);
}

/* ── 28. PROJECT PAGE ───────────────────────────────────────── */
.project-nav-btn {
  transition: all var(--transition);
}
.project-nav-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── 29. RESPONSIVE ADJUSTMENTS ─────────────────────────────── */
@media (max-width: 1024px) {
  .card-stack { display: none; }
}

@media (max-width: 768px) {
  .hero-orb { display: none; }
}

/* ── 30. HAMBURGER ANIMATION ────────────────────────────────── */
.hamburger-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger-open span:nth-child(2) { opacity: 0; }
.hamburger-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── 31. ACCESSIBILITÉ : LIEN D'ÉVITEMENT ────────────────────────── */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  z-index: 10000;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  transition: transform .2s var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ── 32. ACCESSIBILITÉ : FOCUS CLAVIER VISIBLE ───────────────────── */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sur fond sombre, le cyan reste lisible ; sur fond clair on renforce */
.bg-white :focus-visible,
.bg-gray-50 :focus-visible,
main :focus-visible {
  outline-color: var(--primary);
}
header :focus-visible,
footer :focus-visible,
.popup-card :focus-visible,
.lightbox-overlay :focus-visible {
  outline-color: var(--cyan);
}
/* Pas de contour au clic souris (le navigateur gère déjà :focus-visible) */
:focus:not(:focus-visible) { outline: none; }

/* ── 33. NOTIFICATIONS (toasts) ──────────────────────────────────── */
.wc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 10001;
  max-width: min(30rem, calc(100% - 2rem));
  padding: .875rem 1.25rem;
  border-radius: 14px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  box-shadow: 0 16px 48px rgba(7, 18, 32, .28);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wc-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.wc-toast--success { background: var(--green); }
.wc-toast--error   { background: var(--red); }

/* ── 34. BOUTONS FLOTTANTS & BANNIÈRE COOKIES ────────────────────── */
/* Empêche le chevauchement WhatsApp / retour-en-haut / cookies sur mobile */
@media (max-width: 639px) {
  body.cookie-open .wc-fab { bottom: 10.5rem; }
  body.cookie-open #backToTop { bottom: 15rem; }
}
@media (min-width: 640px) {
  body.cookie-open #cookie-banner { max-width: 34rem; }
}
#cookie-banner:not(.hidden) { display: flex; }

/* ── 35. ANCRES DE COMPATIBILITÉ ─────────────────────────────────── */
/* Les anciennes ancres (#reseaux, #web, #mobile) restent valides. */
.sr-only-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 6rem;
}

/* ── 36. TEXTE RÉSERVÉ AUX LECTEURS D'ÉCRAN ─────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}