/* =====================================================
   hero-a11y.css — Accessibilité uniquement
   À placer dans assets/css/
   Chargé après main.css et responsive.css
   ===================================================== */

/* ── Skip link ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: #111;
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #e07a3a;
  outline-offset: 2px;
}

/* ── Fond hero assombri — ratio WCAG AA ─────────────
   #e07a3a → blanc : ratio 3.0 ❌
   #b85c28 → blanc : ratio 4.6 ✅                      */
.hero { background: #b85c28; }

/* ── hero-tagline : contraste + taille ─────────────
   opacity 0.7 sur #e07a3a = ratio ~2.1 ❌            */
.hero-tagline {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 500;
}

/* ── hero-intro : contraste plein ───────────────────
   opacity 0.85 = ratio ~2.5 ❌                       */
.hero-intro {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ── hero-name ──────────────────────────────────────*/
.hero-name,
.hero-name .letter { color: #ffffff !important; }

/* ── Bouton outline ─────────────────────────────────*/
.btn-hero-outline {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.btn-hero-outline:hover,
.btn-hero-outline:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: #ffffff !important;
}

/* ── Focus visible WCAG 2.4.7 ──────────────────────*/
a:focus-visible,
button:focus-visible {
  outline: 3px solid #e07a3a;
  outline-offset: 3px;
}
.hero a:focus-visible,
.hero button:focus-visible { outline-color: #ffffff; }

/* ── Zones tactiles min 44px WCAG 2.5.5 ────────────*/
.btn-hero-primary,
.btn-hero-outline { min-height: 48px; }

.hero-scroll-invite {
  width: 48px !important;
  height: 48px !important;
  opacity: 0.85;
  border-color: rgba(255,255,255,0.6) !important;
}

.topbar__burger {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

.reviews-prev,
.reviews-next { width: 48px !important; height: 48px !important; }

.faq-right summary { min-height: 44px; }

/* ── Section avis : restaurer fond noir ─────────────*/
.home-reviews {
  background: #111 !important;
  color: #fff !important;
}
.home-reviews .section-eyebrow,
.reviews-top-left h2,
.reviews-top-left h2 em { color: #fff !important; }

/* ── Doublons carousel masqués aux SR ───────────────*/
[aria-hidden="true"] { pointer-events: none; }

/* ── Restaurer taille originale slides graphisme ────
   flex: 0 0 420px défini dans main.css               */
.home-projects:not(.photo-section) .project-slide {
  flex: 0 0 420px !important;
  min-width: 420px;
}

.home-projects:not(.photo-section) .project-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Hauteur uniforme des images carousel graphisme ─*/
.home-projects:not(.photo-section) .project-slide img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block;
}