/* ═══════════════════════════════════════════════════════════
   PREMIUM REDESIGN - Dark luxury · Glassmorphism · Orange
   Chrisnaël Berdier Portfolio
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TOKEN OVERRIDES — Redéfinit les tokens en mode sombre
   ──────────────────────────────────────────────────────
   RÔLE : Surcharge les variables CSS de base (style.css) pour
   le design "dark luxury" de la page d'accueil.

   Cibler [data-theme="dark"] ET [data-theme="auto"] = ces règles
   s'appliquent aussi quand le thème est en mode automatique
   (valeur par défaut de l'attribut HTML avant que JS n'applique
   le thème sauvegardé). Évite un flash de couleur au chargement.

   EFFET DOMINO :
   → Changer --bg-primary: #07070f en #1a1a2e = le fond du site
     en mode sombre sera moins noir, plus bleu nuit.
   → Changer --accent: #FF7043 en #7C3AED = toutes les couleurs
     d'accentuation passent du orange au violet.
   ═══════════════════════════════════════════════════════════════ */
/* ── Token overrides ──────────────────────────────────────── */
[data-theme="dark"],
[data-theme="auto"] {
  --bg-primary: #07070f;
  --bg-secondary: #0c0c18;
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.14);
  --accent: #FF7043;
  --accent-2: #FF9A3C;
}

/* ── Body ─────────────────────────────────────────────────── */
body {
  background: var(--bg-primary);
}

/* ── Nav glass ────────────────────────────────────────────── */
.nav {
  background: rgba(7,7,15,0.72) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   GLOWING ORBS — Halos lumineux de fond du hero
   ───────────────────────────────────────────────
   RÔLE : Trois cercles flous positionnés en absolute dans le hero,
   qui créent des halos de lumière colorée en arrière-plan.

   Chaque orbe est un gradient radial (cercle → transparent) sur
   un div 100% circulaire (border-radius: 50%). Le flou CSS de
   l'animation + la transparence créent l'effet lumineux.

   will-change: transform = indique au navigateur que ces éléments
   vont être transformés. Il peut les placer sur le GPU à l'avance,
   améliorant les performances de l'animation.

   L'animation orbFloat fait varier translate et scale légèrement
   (28px / 18px / 0.96-1.06) sur de longues durées (14s-22s)
   pour un mouvement organique imperceptiblement lent.

   EFFET DOMINO :
   → Changer rgba(255,112,67,0.16) en rgba(255,112,67,0.4) =
     les halos seront beaucoup plus intenses/visibles.
   → Changer width: 720px en 1200px = le halo orange sera plus
     grand, occupe plus d'espace dans le hero.
   → Supprimer will-change: transform = pas de GPU, légère
     dégradation des performances d'animation sur appareils lents.
   ═══════════════════════════════════════════════════════════════ */
/* Glowing orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.hero__orb--1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(255,112,67,0.16) 0%, transparent 65%);
  top: -220px; right: -180px;
  animation: orbFloat 14s ease-in-out infinite;
}
.hero__orb--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(92,160,255,0.1) 0%, transparent 65%);
  bottom: -120px; left: -100px;
  animation: orbFloat 18s ease-in-out infinite reverse;
}
.hero__orb--3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,160,67,0.07) 0%, transparent 65%);
  top: 45%; left: 38%;
  animation: orbFloat 22s ease-in-out infinite;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(28px,-18px) scale(1.06); }
  66%       { transform: translate(-14px,14px) scale(0.96); }
}

.hero__content { position: relative; z-index: 1; }

/* Greeting → pill tag */
.hero__greeting {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,112,67,0.85) !important;
  background: rgba(255,112,67,0.1) !important;
  border: 1px solid rgba(255,112,67,0.22) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  margin-bottom: 28px !important;
}

/* Title - massive */
.hero__title {
  font-size: clamp(72px, 12vw, 168px) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 22px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__name-first {
  display: block;
  color: #f0ece8;
}
.hero__name-last {
  display: block;
  background: linear-gradient(135deg, #FF7043 0%, #FF9A3C 55%, #FFD166 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Hide the old .highlight - replaced by .hero__role */
.hero__title .highlight {
  display: none !important;
}

/* Role strip */
.hero__role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  color: rgba(255,255,255,0.42);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}
.hero__role-dot {
  color: rgba(255,112,67,0.55);
  font-size: 20px;
  line-height: 1;
}

/* Glass stats card */
.hero__stats-card {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: 40px;
  padding: 0;
  overflow: hidden;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  gap: 3px;
}
.hero__stat-num {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: #FF7043;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  font-weight: 600;
}
.hero__stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
  align-self: stretch;
}

/* ═══════════════════════════════════════════════════════════════
   GLASS SYSTEM — Système de cartes glassmorphisme
   ─────────────────────────────────────────────────
   RÔLE : Classe réutilisable pour l'effet "verre givré" utilisé
   sur les stats, les cartes contact, les modales, etc.

   MÉCANISME DU GLASSMORPHISME (3 ingrédients) :
   1. background: rgba(255,255,255,0.04) = fond blanc ultra-transparent.
   2. backdrop-filter: blur(20px) = floute le contenu visible derrière.
   3. border: rgba(255,255,255,0.08) = fin reflet lumineux façon verre.
   -webkit-backdrop-filter = préfixe Safari OBLIGATOIRE.

   EFFET DOMINO :
   → blur(20px) → blur(2px) = verre quasi-invisible (pas de flou).
   → rgba(0.04) → rgba(0.2) = cartes plus opaques, moins "glass".
   → Supprimer -webkit-backdrop-filter = l'effet disparaît sur
     tous les appareils Apple (iOS Safari, macOS Safari).
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   GLASS SYSTEM
═══════════════════════════════════════════════════════════ */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.13);
}

/* Glass CTA button */
.btn--glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
  padding: 13px 28px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.btn--glass:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════ */
.about__image-wrap {
  position: relative !important;
}

/* ── Flip card (front=photo, back=carte éditoriale) ── */
.about__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 22px;
}
.about__image-wrap:hover .about__flip-inner { transform: rotateY(180deg); }

.about__flip-front,
.about__flip-back {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* FACE : photo (styles existants conservés) */
.about__flip-front::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.2));
  pointer-events: none;
  z-index: 2;
}
.about__img-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(255,112,67,0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(10px);
}
.about__flip-front img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.93) saturate(1.08);
}
.about__img-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px !important;
}

/* DOS : carte éditoriale — orange → sable → lagon */
.about__flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #FF7E54 0%, #E4B363 48%, #2BB3A3 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 32px);
}
.about-back__year {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255,255,255,0.14);
  align-self: flex-end;
}
.about-back__body { display: flex; flex-direction: column; gap: 8px; }
.about-back__name {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.about-back__dot { color: rgba(255,255,255,0.5); }
.about-back__role {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}
.about-back__place {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.about-back__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  align-self: flex-start;
}
.about-back__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: badgePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Glass stats */
.about__stats {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 12px !important;
  margin-top: var(--space-2xl) !important;
}
.stat.glass-card {
  padding: 22px 16px !important;
  text-align: center !important;
  border-radius: 16px !important;
}
.stat.glass-card .stat__number {
  font-size: clamp(34px,4vw,52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, #FF7043, #FF9A3C) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.stat.glass-card .stat__label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.35) !important;
  font-weight: 600 !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION LABELS - orange pill
═══════════════════════════════════════════════════════════ */
.section__label {
  color: rgba(255,112,67,0.85) !important;
  background: rgba(255,112,67,0.1) !important;
  border: 1px solid rgba(255,112,67,0.18) !important;
  display: inline-block !important;
  padding: 5px 16px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.14em !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   PROJECT CARDS - glass
═══════════════════════════════════════════════════════════ */
.project-card {
  background: rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              background 0.3s, border-color 0.3s, box-shadow 0.4s !important;
}
.project-card:hover {
  transform: translateY(-8px) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,112,67,0.28) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,112,67,0.1) !important;
}
.project-card__link {
  color: #FF7043 !important;
}
.project-card__link:hover {
  color: #FF9A3C !important;
}
.tag--web { background: rgba(255,112,67,0.12) !important; color: #FF9A3C !important; border-color: rgba(255,112,67,0.22) !important; }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEALS - enhanced
═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.85s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.12s !important; }
.stagger-3 { transition-delay: 0.2s !important; }
.stagger-4 { transition-delay: 0.28s !important; }
.stagger-5 { transition-delay: 0.38s !important; }

/* ═══════════════════════════════════════════════════════════
   MARQUEE - orange dots
═══════════════════════════════════════════════════════════ */
.marquee-strip {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: rgba(255,255,255,0.015) !important;
}
.marquee-strip__item {
  color: rgba(255,255,255,0.25) !important;
}
.marquee-strip__item::before {
  color: rgba(255,112,67,0.55) !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg-primary) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX 3 - Burger menu z-index au-dessus du widget a11y (300)
═══════════════════════════════════════════════════════════ */
.nav__mobile {
  z-index: 350 !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX 6a - About glow : sortir du overflow:hidden
   Le glow a besoin que le parent soit visible.
   L'image garde ses coins arrondis via son propre border-radius.
═══════════════════════════════════════════════════════════ */
.about__image-wrap {
  overflow: visible !important;
}
.about__image-wrap::after {
  border-radius: 22px !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE - corrections mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* Fix 1 - Titre hero : clamp min de 72px débordait sur 375px */
  .hero__title {
    font-size: clamp(44px, 12vw, 64px) !important;
    margin-bottom: 14px !important;
  }

  /* Fix 2 - Hero trop haut : réduire les marges pour tenir dans 100vh */
  .hero__greeting {
    margin-bottom: 16px !important;
  }
  .hero__stats-card {
    margin-top: 24px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero__content {
    padding-bottom: 80px !important;
  }

  /* Fix 5 - Role strip : cohérence avec hero centré */
  .hero__role { justify-content: center !important; }

  .hero__stat-divider { display: none; }
  .about__img-badge { display: none; }
}

/* Fix 5 - Nav trop chargée sous 380px : masquer le sélecteur de langue */
@media (max-width: 380px) {
  .lang-selector { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU - Logo + bouton fermer
═══════════════════════════════════════════════════════════ */
.nav__mobile-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__mobile-logo {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary, #f0ece8);
  text-decoration: none;
  line-height: 1;
}
.nav__mobile-logo span { color: #FF7043; }
.nav__mobile-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.nav__mobile-close:hover {
  border-color: #FF7043;
  background: rgba(255,112,67,0.1);
  color: #FF7043;
}
.nav__mobile-close svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════
   PAGE CONTACT - PREMIUM
═══════════════════════════════════════════════════════════ */

/* Hero header */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(70px + 5rem);
  padding-bottom: 4rem;
  text-align: center;
  background: var(--bg-secondary);
}
.contact-hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.contact-hero__orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,112,67,0.14) 0%, transparent 65%);
  top: -280px; right: -120px;
  animation: orbFloat 16s ease-in-out infinite;
}
.contact-hero__orb--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(92,160,255,0.08) 0%, transparent 65%);
  bottom: -120px; left: -80px;
  animation: orbFloat 20s ease-in-out infinite reverse;
}
.contact-hero__content { position: relative; z-index: 1; }
.contact-hero__title {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 20px;
  color: var(--text-primary);
}
.contact-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
}

/* Info cards grid */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 16px !important;
  transition: border-color 0.25s, background 0.25s;
}
.contact-info-card:hover {
  border-color: rgba(255,112,67,0.25) !important;
}
.contact-info-card__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255,112,67,0.1);
  border: 1px solid rgba(255,112,67,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #FF7043;
}
.contact-info-card__icon svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.contact-info-card__icon--green {
  background: rgba(74,222,128,0.1) !important;
  border-color: rgba(74,222,128,0.2) !important;
  color: #4ade80 !important;
}
.contact-info-card__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.32);
  font-weight: 600;
  margin-bottom: 5px;
}
.contact-info-card__value {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  word-break: break-all;
}
.contact-info-card__value a {
  color: inherit; text-decoration: none;
  transition: color 0.2s;
}
.contact-info-card__value a:hover { color: #FF7043; }
.contact-info-card__value--green {
  color: #4ade80 !important;
  display: flex; align-items: center; gap: 7px;
}
.contact-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: badgePulse 2s ease-in-out infinite;
}

/* LinkedIn card */
.contact-social {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px !important;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  transition: border-color 0.25s, background 0.25s !important;
  margin-bottom: 0;
}
.contact-social:hover {
  border-color: rgba(255,112,67,0.3) !important;
  background: rgba(255,255,255,0.07) !important;
}
.contact-social__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(10,102,194,0.15);
  border: 1px solid rgba(10,102,194,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #5CA0FF;
}
.contact-social__text { flex: 1; }
.contact-social__name {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.contact-social__handle {
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  margin-top: 2px;
}
.contact-social__arrow { color: rgba(255,255,255,0.22); flex-shrink: 0; }

/* Form card */
.contact__form-card {
  padding: 40px 36px;
  border-radius: 22px !important;
  display: flex;
  flex-direction: column;
}
.contact__form-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.contact__form-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 32px;
  line-height: 1.6;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact__form-card .form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact__form-card .form-group input,
.contact__form-card .form-group textarea {
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s !important;
}
.contact__form-card .form-group input:focus,
.contact__form-card .form-group textarea:focus {
  border-color: rgba(255,112,67,0.55) !important;
  background: rgba(255,112,67,0.04) !important;
  box-shadow: 0 0 0 3px rgba(255,112,67,0.08) !important;
  outline: none !important;
}
.contact__form-card .form-group input::placeholder,
.contact__form-card .form-group textarea::placeholder {
  color: rgba(255,255,255,0.18) !important;
}
.contact__form-card .form-group textarea { min-height: 130px; }
.contact__form-btn { align-self: flex-start; margin-top: 8px; }

/* Responsive contact */
@media (max-width: 767px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact__form-card { padding: 28px 22px; }
  .contact-hero { padding-top: calc(70px + 3rem); padding-bottom: 3rem; }
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — Corrections pour le thème clair
   ────────────────────────────────────────────────────────
   RÔLE : premium.css est conçu pour le mode sombre. Ces règles
   corrigent les problèmes de contraste et de lisibilité quand
   l'utilisateur bascule en mode clair.

   POURQUOI LES !important ?
   Les règles de premium.css utilisent des valeurs hardcodées
   (rgba(255,255,255,0.04), rgba(255,255,255,0.32)...) qui ne
   répondent pas aux variables CSS --text-primary etc. en mode clair.
   Le !important est donc nécessaire pour les surcharger avec
   les bonnes couleurs claires.

   Ce bloc est un exemple concret du problème du "dark-first" :
   quand on design en sombre d'abord, le clair nécessite des
   corrections explicites. L'approche inverse (light-first)
   aurait nécessité des overrides pour le sombre.

   EFFET DOMINO :
   → Supprimer ce bloc entier = en mode clair, beaucoup de textes
     seront blancs sur fond blanc (illisibles).
   → Ajouter une correction manquante = un composant restera avec
     ses couleurs sombres en mode clair.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   LIGHT MODE - overrides pour corriger les contrastes
═══════════════════════════════════════════════════════════ */
[data-theme="light"] .nav {
  background: rgba(245, 242, 236, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(26, 26, 46, 0.08) !important;
}
[data-theme="light"] .nav__link,
[data-theme="light"] .nav__logo {
  color: var(--text-primary) !important;
}
[data-theme="light"] .btn--glass {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .btn--glass:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .glass-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .stat.glass-card .stat__label {
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .about__img-badge {
  color: var(--text-primary) !important;
}
[data-theme="light"] .hero__name-first {
  color: var(--text-primary) !important;
}
[data-theme="light"] .hero__role {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .hero__stat-label {
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .project-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .marquee-strip__item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .contact-hero__title {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact-hero__subtitle {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .contact-info-card__label {
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .contact-info-card__value {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact-info-card__value a {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact-info-card__value--green {
  color: #16a34a !important;
}
[data-theme="light"] .contact-social {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact-social__name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact-social__handle {
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .contact__form-heading {
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact__form-sub {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .contact__form-card .form-group label {
  color: var(--text-secondary) !important;
  text-transform: none !important;
}
[data-theme="light"] .contact__form-card .form-group input,
[data-theme="light"] .contact__form-card .form-group textarea {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .contact__form-card .form-group input::placeholder,
[data-theme="light"] .contact__form-card .form-group textarea::placeholder {
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .contact__form-card .form-group input:focus,
[data-theme="light"] .contact__form-card .form-group textarea:focus {
  border-color: var(--accent) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
/* ═══════════════════════════════════════════════════════════
   BENTO GRID — projets.html
═══════════════════════════════════════════════════════════ */

/* Grille 3 colonnes, dense packing */
.projects__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row dense !important;
  gap: 14px !important;
}

/* Toutes les cartes : full-bleed, ratio carré par défaut */
.projects__grid .project-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  aspect-ratio: 1/1 !important;
  transform: none !important;
  transition: box-shadow 0.4s ease !important;
  background: var(--bg-tertiary) !important;
  border: none !important;
}
.projects__grid .project-card:hover {
  transform: none !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
  border-color: transparent !important;
}

/* Carte wide : 2 colonnes, ratio 16:9 */
.projects__grid .project-card[data-bento="wide"] {
  grid-column: span 2 !important;
  aspect-ratio: 16/9 !important;
}

/* Image full-bleed */
.projects__grid .project-card__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
}
.projects__grid .project-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
}
.projects__grid .project-card:hover .project-card__image img {
  transform: scale(1.06) !important;
}

/* Body : overlay caché, slide-up au hover */
.projects__grid .project-card__body {
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  padding: 22px !important;
  background: linear-gradient(to top, rgba(8,5,3,0.93) 0%, rgba(8,5,3,0.55) 55%, transparent 100%) !important;
  transform: translateY(100%) !important;
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}
.projects__grid .project-card:hover .project-card__body,
.projects__grid .project-card:focus .project-card__body,
.projects__grid .project-card:focus-within .project-card__body {
  transform: translateY(0) !important;
}

/* Textes dans l'overlay */
.projects__grid .project-card__tags .tag {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  font-size: 0.65rem !important;
  padding: 2px 9px !important;
}
.projects__grid .project-card__title {
  color: #fff !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}
.projects__grid .project-card__desc {
  color: rgba(255,255,255,0.72) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.projects__grid .project-card__link {
  color: var(--accent) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  align-self: flex-start !important;
  background: none !important;
  border: none !important;
}
.projects__grid .project-card__link:hover { gap: var(--space-sm) !important; }

/* Touch devices : overlay toujours visible */
@media (hover: none) {
  .projects__grid .project-card__body {
    transform: translateY(0) !important;
    background: linear-gradient(to top, rgba(8,5,3,0.88) 0%, transparent 70%) !important;
  }
}

/* Mobile : 2 colonnes, ratio 4:3 */
@media (max-width: 767px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .projects__grid .project-card,
  .projects__grid .project-card[data-bento="wide"] {
    grid-column: span 1 !important;
    aspect-ratio: 4/3 !important;
  }
}
@media (max-width: 420px) {
  .projects__grid { grid-template-columns: 1fr !important; }
  .projects__grid .project-card { aspect-ratio: 4/3 !important; }
}