/* ================================================================
   HFR DESIGNER — portfolio.css
   Auteur    : Fabrice René Houeto
   Version   : 3.0
   Description : Styles de la page portfolio.
                 Thèmes, layout, mockups, carrousel, animations
                 bidirectionnelles au scroll, lightbox.
   ================================================================ */


/* ================================================================
   1. THÈMES (cohérence avec style.css de index.html)
   ================================================================ */


/* ================================================================
   PRELOADER — thème-aware (copié depuis style.css)
   ================================================================ */
[data-theme="blue"]    { --pl-bg:#0a0f1e; --pl-c1:#3B82F6; --pl-c2:#06b6d4; }
[data-theme="dark"]    { --pl-bg:#04060d; --pl-c1:#a78bfa; --pl-c2:#f472b6; }
[data-theme="forest"]  { --pl-bg:#021a0a; --pl-c1:#16a34a; --pl-c2:#84cc16; }
[data-theme="sunset"]  { --pl-bg:#180800; --pl-c1:#f97316; --pl-c2:#f59e0b; }
[data-theme="minimal"] { --pl-bg:#0a0a0a; --pl-c1:#ffffff; --pl-c2:#888888; }

#hfr-preloader {
  position:fixed; inset:0; z-index:99999;
  background:var(--pl-bg,#0a0f1e);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; overflow:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
#hfr-preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.preloader-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px); }
.preloader-orb-1 { width:clamp(280px,50vw,500px); height:clamp(280px,50vw,500px); background:var(--pl-c1,#3B82F6); opacity:.14; top:-20%; right:-10%; animation:orbFloat 9s ease-in-out infinite; }
.preloader-orb-2 { width:clamp(200px,35vw,380px); height:clamp(200px,35vw,380px); background:var(--pl-c2,#06b6d4); opacity:.11; bottom:-15%; left:-8%; animation:orbFloat 11s ease-in-out infinite reverse; }
.preloader-orb-3 { width:clamp(100px,18vw,200px); height:clamp(100px,18vw,200px); background:var(--pl-c1,#3B82F6); opacity:.07; top:55%; left:60%; animation:orbFloat 7s ease-in-out infinite; animation-delay:-3s; }

.preloader-logo { position:relative; display:flex; align-items:center; justify-content:center; animation:preloaderLogoIn .9s cubic-bezier(.22,1,.36,1) both; }
.preloader-logo::before { content:''; position:absolute; inset:-30px; border-radius:50%; background:var(--pl-c1,#3B82F6); opacity:.1; filter:blur(28px); animation:preloaderPulse 2.4s ease-in-out infinite; }
.preloader-logo img { height:clamp(52px,10vw,76px); width:auto; display:block; position:relative; filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.25)); animation:preloaderLogoBreathe 2.8s ease-in-out infinite; }

.preloader-ring { position:absolute; border-radius:50%; border:1.5px solid transparent; border-top-color:var(--pl-c1,#3B82F6); border-right-color:var(--pl-c2,#06b6d4); opacity:.55; animation:preloaderSpin 2s linear infinite; width:clamp(88px,15vw,126px); height:clamp(88px,15vw,126px); }
.preloader-ring-2 { width:clamp(106px,18vw,150px); height:clamp(106px,18vw,150px); border-top-color:var(--pl-c2,#06b6d4); border-right-color:transparent; border-left-color:var(--pl-c1,#3B82F6); opacity:.28; animation:preloaderSpin 3.5s linear infinite reverse; }

.preloader-brand { font-family:'Syne',sans-serif; font-size:clamp(.85rem,2vw,1rem); font-weight:700; color:rgba(255,255,255,.45); letter-spacing:.28em; text-transform:uppercase; animation:preloaderFadeUp .9s ease .3s both; }
.preloader-brand span { color:var(--pl-c1,#3B82F6); }

.preloader-progress-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; width:clamp(200px,42vw,340px); animation:preloaderFadeUp .9s ease .5s both; }
.preloader-bar-bg { width:100%; height:2px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; position:relative; }
.preloader-bar-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:barShimmer 2s ease infinite; }
.preloader-bar-fill { height:2px; width:0%; background:linear-gradient(90deg,var(--pl-c1,#3B82F6),var(--pl-c2,#06b6d4)); border-radius:99px; transition:width .08s linear; box-shadow:0 0 8px var(--pl-c1,#3B82F6); position:relative; }
.preloader-bar-fill::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--pl-c2,#06b6d4); box-shadow:0 0 8px var(--pl-c2,#06b6d4),0 0 14px var(--pl-c2,#06b6d4); }
.preloader-percent { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.14em; }
.preloader-tagline { font-family:'DM Sans',sans-serif; font-size:clamp(.68rem,1.5vw,.78rem); color:rgba(255,255,255,.2); letter-spacing:.2em; text-transform:uppercase; animation:preloaderFadeUp 1s ease .7s both; }

@keyframes preloaderLogoIn  { from{opacity:0;transform:scale(.75) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes preloaderLogoBreathe { 0%,100%{transform:scale(1);filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.2))} 50%{transform:scale(1.04);filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,.5))} }
@keyframes preloaderPulse   { 0%,100%{transform:scale(1);opacity:.1} 50%{transform:scale(1.5);opacity:.2} }
@keyframes preloaderSpin    { to{transform:rotate(360deg)} }
@keyframes preloaderFadeUp  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes barShimmer       { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ── Bouton Télécharger CV ─────────────────────────────────────── */
.btn-cv-download {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px clamp(12px,2vw,18px);
  background:var(--cta-grad); color:white !important;
  border-radius:50px; font-family:var(--font-body);
  font-size:clamp(.75rem,1.1vw,.85rem); font-weight:600;
  white-space:nowrap; border:none; text-decoration:none; cursor:pointer;
  transition:opacity .2s,transform .2s,box-shadow .2s;
  box-shadow:0 4px 14px var(--primary-glow); flex-shrink:0;
}
.btn-cv-download:hover { opacity:.92; transform:translateY(-2px); box-shadow:0 8px 22px var(--primary-glow); }
.btn-cv-download i { font-size:.9em; }
@media (max-width:600px) {
  .btn-cv-download span { display:none; }
  .btn-cv-download { padding:0; width:38px; height:38px; border-radius:50%; justify-content:center; }
}

/* ── Bouton retour en haut ────────────────────────────────────── */
.back-top-btn {
  position:fixed; bottom:96px; right:28px; width:42px; height:42px;
  background:var(--surface); border:1px solid var(--border); border-radius:50%;
  display:none; align-items:center; justify-content:center;
  color:var(--text-3); font-size:.88rem; z-index:900; cursor:pointer;
  transition:all .2s; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.back-top-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }


[data-theme="blue"] {
  --primary      : #3B82F6;
  --primary-dark : #1d4ed8;
  --primary-glow : rgba(59,130,246,0.18);
  --accent       : #06b6d4;
  --bg           : #ffffff;
  --bg-2         : #f0f7ff;
  --bg-3         : #e0f0ff;
  --surface      : #f8fafc;
  --text         : #0f172a;
  --text-2       : #334155;
  --text-3       : #64748b;
  --border       : #dbeafe;
  --hero-grad    : linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
  --cta-grad     : linear-gradient(135deg, #3B82F6, #06b6d4);
  --card-shadow  : 0 4px 24px rgba(59,130,246,0.08);
  --header-bg    : rgba(255,255,255,0.92);
  --font-display : 'Syne', sans-serif;
  --font-body    : 'DM Sans', sans-serif;
}
[data-theme="dark"] {
  --primary      : #a78bfa;
  --primary-dark : #7c3aed;
  --primary-glow : rgba(167,139,250,0.18);
  --accent       : #f472b6;
  --bg           : #080b14;
  --bg-2         : #0d1117;
  --bg-3         : #111827;
  --surface      : #161b27;
  --text         : #f1f5f9;
  --text-2       : #cbd5e1;
  --text-3       : #94a3b8;
  --border       : #1e2d45;
  --hero-grad    : linear-gradient(135deg, #020408 0%, #0d0f1a 50%, #150d2e 100%);
  --cta-grad     : linear-gradient(135deg, #7c3aed, #a78bfa);
  --card-shadow  : 0 4px 24px rgba(0,0,0,0.4);
  --header-bg    : rgba(8,11,20,0.95);
  --font-display : 'Syne', sans-serif;
  --font-body    : 'DM Sans', sans-serif;
}
[data-theme="forest"] {
  --primary      : #16a34a;
  --primary-dark : #15803d;
  --primary-glow : rgba(22,163,74,0.14);
  --accent       : #84cc16;
  --bg           : #f8fdf9;
  --bg-2         : #f0fdf4;
  --bg-3         : #dcfce7;
  --surface      : #f0fdf4;
  --text         : #052e16;
  --text-2       : #14532d;
  --text-3       : #4b7c5e;
  --border       : #bbf7d0;
  --hero-grad    : linear-gradient(135deg, #052e16 0%, #064e3b 50%, #065f46 100%);
  --cta-grad     : linear-gradient(135deg, #16a34a, #84cc16);
  --card-shadow  : 0 4px 24px rgba(22,163,74,0.08);
  --header-bg    : rgba(248,253,249,0.95);
  --font-display : 'Syne', sans-serif;
  --font-body    : 'DM Sans', sans-serif;
}
[data-theme="sunset"] {
  --primary      : #f97316;
  --primary-dark : #ea580c;
  --primary-glow : rgba(249,115,22,0.14);
  --accent       : #f59e0b;
  --bg           : #fffbf5;
  --bg-2         : #fff7ed;
  --bg-3         : #ffedd5;
  --surface      : #fff7ed;
  --text         : #1c0a00;
  --text-2       : #431407;
  --text-3       : #78350f;
  --border       : #fed7aa;
  --hero-grad    : linear-gradient(135deg, #1c0a00 0%, #431407 40%, #7c2d12 100%);
  --cta-grad     : linear-gradient(135deg, #f97316, #f59e0b);
  --card-shadow  : 0 4px 24px rgba(249,115,22,0.08);
  --header-bg    : rgba(255,251,245,0.95);
  --font-display : 'Syne', sans-serif;
  --font-body    : 'DM Sans', sans-serif;
}
[data-theme="minimal"] {
  --primary      : #111111;
  --primary-dark : #000000;
  --primary-glow : rgba(0,0,0,0.08);
  --accent       : #555555;
  --bg           : #ffffff;
  --bg-2         : #f9f9f9;
  --bg-3         : #f0f0f0;
  --surface      : #f5f5f5;
  --text         : #111111;
  --text-2       : #333333;
  --text-3       : #666666;
  --border       : #e0e0e0;
  --hero-grad    : linear-gradient(135deg, #000 0%, #1a1a1a 100%);
  --cta-grad     : linear-gradient(135deg, #111, #444);
  --card-shadow  : 0 4px 24px rgba(0,0,0,0.07);
  --header-bg    : rgba(255,255,255,0.96);
  --font-display : 'Syne', sans-serif;
  --font-body    : 'DM Sans', sans-serif;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family      : var(--font-body);
  background       : var(--bg);
  color            : var(--text);
  line-height      : 1.6;
  overflow-x       : hidden;
  transition       : background 0.4s ease, color 0.4s ease;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; }
ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font-body); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }


/* ================================================================
   3. HEADER
   ================================================================ */

header {
  position        : fixed;
  top             : 0;
  width           : 100%;
  z-index         : 1000;
  background      : var(--header-bg);
  backdrop-filter : blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom   : 1px solid var(--border);
  transition      : box-shadow 0.3s;
}

.header-inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0 clamp(16px, 5%, 60px);
  height          : 70px;
  gap             : 10px;
}

/* --- Logo --- */
.logo {
  display     : flex;
  align-items : center;
    text-decoration: none;
  flex-shrink: 0;
}

.logo-dot {
  width         : 10px;
  height        : 10px;
  background    : var(--primary);
  border-radius : 50%;
  flex-shrink   : 0;
}

.logo-img {
  height: 3.8rem;
  width: auto;
  display: block;
  object-fit: contain;
  }

.nav-right {
  display     : flex;
  align-items : center;
  gap         : clamp(8px, 1.5vw, 12px);
  flex-shrink : 0;
}

.back-btn {
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  padding       : 9px clamp(12px, 2vw, 18px);
  background    : var(--surface);
  border        : 1px solid var(--border);
  border-radius : 50px;
  font-size     : clamp(0.75rem, 1.1vw, 0.85rem);
  font-weight   : 600;
  color         : var(--text-2);
  white-space   : nowrap;
  transition    : all 0.2s;
}
.back-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Sélecteur de thème */
.theme-picker { position: relative; }

.theme-trigger {
  display       : flex;
  align-items   : center;
  gap           : 6px;
  padding       : 8px clamp(10px, 1.5vw, 14px);
  background    : var(--surface);
  border        : 1px solid var(--border);
  border-radius : 50px;
  color         : var(--text-3);
  font-size     : clamp(0.72rem, 1vw, 0.8rem);
  font-weight   : 500;
  white-space   : nowrap;
  transition    : all 0.2s;
}
.theme-trigger:hover { border-color: var(--primary); color: var(--primary); }
.theme-label { display: inline; }

.theme-dropdown {
  position      : absolute;
  top           : calc(100% + 10px);
  right         : 0;
  background    : var(--bg);
  border        : 1px solid var(--border);
  border-radius : 14px;
  box-shadow    : 0 20px 50px rgba(0,0,0,0.15);
  min-width     : 200px;
  display       : none;
  flex-direction: column;
  overflow      : hidden;
  z-index       : 2000;
  animation     : dropIn 0.2s ease;
}
.theme-dropdown.open { display: flex; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theme-option {
  display     : flex;
  align-items : center;
  gap         : 12px;
  padding     : 12px 16px;
  font-size   : 0.85rem;
  color       : var(--text-2);
  cursor      : pointer;
  transition  : background 0.15s;
}
.theme-option:hover  { background: var(--surface); }
.theme-option.active { color: var(--primary); font-weight: 600; background: var(--surface); }

.theme-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
}
.swatch-blue    { background: linear-gradient(135deg,#3B82F6,#06b6d4); }
.swatch-dark    { background: linear-gradient(135deg,#0f0f14,#a78bfa); }
.swatch-forest  { background: linear-gradient(135deg,#16a34a,#84cc16); }
.swatch-sunset  { background: linear-gradient(135deg,#f97316,#f59e0b); }
.swatch-minimal { background: linear-gradient(135deg,#111,#555); }


/* ================================================================
   4. HERO DE PAGE
   ================================================================ */

.page-hero {
  background : var(--hero-grad);
  padding    : 130px 5% 70px;
  position   : relative;
  overflow   : hidden;
}

/* Texture grain */
.page-hero::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Orbes hero */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.2; pointer-events: none; }
.orb-1 { width: 400px; height: 400px; background: var(--primary); top: -150px; right: -100px; }
.orb-2 { width: 280px; height: 280px; background: var(--accent);  bottom: -80px; left: 5%; }

.page-hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

.hero-eyebrow {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  color          : rgba(255,255,255,0.7);
  font-size      : 0.8rem;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 2px;
  margin-bottom  : 20px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 20px; height: 2px; background: rgba(255,255,255,0.4);
}

.page-hero h1 {
  font-size      : clamp(2rem, 5vw, 3.5rem);
  font-weight    : 800;
  color          : white;
  letter-spacing : -1.5px;
  margin-bottom  : 16px;
  line-height    : 1.1;
}

.page-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.7); max-width: 580px; line-height: 1.8; margin-bottom: 30px; }

.hero-stats-row { display: flex; gap: 32px; flex-wrap: wrap; }
.hero-stat       { color: white; }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; }
.hero-stat span   { font-size: 0.8rem; color: rgba(255,255,255,0.6); }


/* ================================================================
   5. BARRE DE FILTRES (sticky sous le header)
   ================================================================ */

.filters-bar {
  background    : var(--bg);
  border-bottom : 1px solid var(--border);
  position      : sticky;
  top           : 70px;
  z-index       : 900;
  transition    : background 0.4s;
}

.filters-inner {
  max-width      : 1100px;
  margin         : 0 auto;
  padding        : 0 24px;
  display        : flex;
  align-items    : center;
  gap            : 4px;
  overflow-x     : auto;
  scrollbar-width: none;
}
.filters-inner::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink   : 0;
  padding       : 16px 20px;
  font-size     : 0.85rem;
  font-weight   : 500;
  color         : var(--text-3);
  background    : none;
  border        : none;
  border-bottom : 2px solid transparent;
  cursor        : pointer;
  white-space   : nowrap;
  font-family   : var(--font-body);
  transition    : all 0.2s;
}
.filter-chip:hover { color: var(--primary); }
.filter-chip.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }


/* ================================================================
   6. SECTION PROJETS
   ================================================================ */

.projects-section { padding: 70px 0 100px; background: var(--bg-2); }

.project-count-bar {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  margin-bottom   : 40px;
  flex-wrap       : wrap;
  gap             : 12px;
}
.project-count-text        { font-size: 0.88rem; color: var(--text-3); }
.project-count-text strong { color: var(--primary); font-weight: 700; }


/* ================================================================
   7. CARTE PROJET
   ================================================================ */

.project-card {
  background    : var(--bg);
  border        : 1px solid var(--border);
  border-radius : 24px;
  margin-bottom : 48px;
  overflow      : hidden;
  transition    : border-color 0.3s, box-shadow 0.3s;
  /* Caché par défaut — JS et animations gèrent la visibilité */
  display       : none;
}

.project-card.visible { display: block; }

.project-card:hover {
  box-shadow   : 0 24px 70px var(--primary-glow);
  border-color : var(--primary);
}

/* En-tête de carte */
.card-header {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 26px 34px;
  border-bottom   : 1px solid var(--border);
  gap             : 12px;
  flex-wrap       : wrap;
}

.card-title-row { display: flex; align-items: center; gap: 14px; }

.card-type-icon {
  width         : 46px;
  height        : 46px;
  border-radius : 13px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 1.15rem;
  flex-shrink   : 0;
}
.icon-mobile { background: rgba(167,139,250,0.12); color: #7c3aed; }
.icon-web    { background: rgba(16,185,129,0.12);  color: #059669; }
.icon-webapp { background: rgba(59,130,246,0.12);  color: #2563eb; }

.card-header h2     { font-size: 1.45rem; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }
.card-header .card-subtitle { font-size: 0.8rem; color: var(--text-3); margin-top: 2px; }

.badges { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  padding       : 6px 14px;
  border-radius : 50px;
  font-size     : 0.72rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space   : nowrap;
}
.badge-live   { background: rgba(34,197,94,0.1);   color: #16a34a; border: 1px solid rgba(34,197,94,0.25); }
.badge-design { background: rgba(245,158,11,0.1);  color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
.badge-mobile { background: rgba(139,92,246,0.1);  color: #7c3aed; border: 1px solid rgba(139,92,246,0.25); }
.badge-web    { background: rgba(16,185,129,0.1);  color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.badge-webapp { background: rgba(59,130,246,0.1);  color: #2563eb; border: 1px solid rgba(59,130,246,0.25); }

/* Corps de carte */
.card-body { padding: 34px; }


/* ================================================================
   8. GRILLE DE MOCKUPS TÉLÉPHONE
      → auto-fill : s'adapte à n'importe quel nombre d'images/vidéos
      → images ET vidéos côte à côte, même hauteur, même frame
   ================================================================ */

.phones-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(150px, 1fr));
  gap                   : 18px;
  margin-bottom         : 34px;
  /* Alignement vertical centré pour des hauteurs homogènes */
  align-items           : start;
}

/* Cadre téléphone partagé par images ET vidéos */
.phone-frame {
  background    : #0a0a0a;
  border        : 5px solid #1c1c1c;
  border-radius : 26px;
  aspect-ratio  : 9 / 19;   /* ratio portrait fixe → toujours en forme de téléphone */
  overflow      : hidden;
  box-shadow    : 0 10px 28px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
  cursor        : pointer;
  transition    : transform 0.3s ease, box-shadow 0.3s ease;
  position      : relative;
}

/* Encoche (notch) simulée */
.phone-frame::before {
  content       : '';
  position      : absolute;
  top           : 7px;
  left          : 50%;
  transform     : translateX(-50%);
  width         : 44px;
  height        : 5px;
  background    : #1c1c1c;
  border-radius : 3px;
  z-index       : 10;
}

.phone-frame:hover {
  transform  : translateY(-10px) scale(1.02);
  box-shadow : 0 22px 50px rgba(0,0,0,0.35);
}

/* Image dans le cadre téléphone */
.phone-frame img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  /* Légère pause pour ne pas montrer le notch dans l'image */
  object-position: center top;
}

/* Vidéo dans le cadre téléphone — même comportement qu'une image */
.phone-frame video {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}

/* Overlay play sur les vidéos (optionnel, s'affiche au hover) */
.phone-frame.phone-video::after {
  content         : '\f144'; /* fa-play */
  font-family     : 'Font Awesome 6 Free';
  font-weight     : 900;
  position        : absolute;
  inset           : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 2rem;
  color           : rgba(255,255,255,0.85);
  background      : rgba(0,0,0,0.35);
  opacity         : 1;
  transition      : opacity 0.3s;
  pointer-events  : none;
}

/* Cache l'overlay quand la vidéo joue */
.phone-frame.phone-video.playing::after { opacity: 0; }


/* ================================================================
   9. CARROUSEL NAVIGATEUR (sites web — plusieurs captures)
   ================================================================ */

.browser-frame {
  border-radius : 14px;
  border        : 1px solid var(--border);
  overflow      : hidden;
  box-shadow    : 0 20px 60px rgba(0,0,0,0.08);
  margin-bottom : 34px;
}

/* Barre de contrôles du navigateur */
.browser-bar {
  background    : var(--surface);
  padding       : 11px 16px;
  display       : flex;
  align-items   : center;
  gap           : 10px;
  border-bottom : 1px solid var(--border);
}

.browser-dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red    { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green  { background: #27c93f; }

.browser-url {
  flex          : 1;
  height        : 25px;
  background    : var(--bg);
  border        : 1px solid var(--border);
  border-radius : 6px;
  display       : flex;
  align-items   : center;
  padding       : 0 10px;
  font-size     : 0.7rem;
  color         : var(--text-3);
  gap           : 6px;
}
.browser-url i { color: #22c55e; font-size: 0.62rem; }

/* Zone de carrousel (remplace browser-content statique) */
.browser-carousel {
  position   : relative;
  background : var(--bg);
  overflow   : hidden;
  max-height : 520px;
}

/* Piste des slides */
.carousel-track {
  display    : flex;
  transition : transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  height     : 100%;
}

/* Un slide = une capture de site */
.carousel-slide {
  flex-shrink : 0;
  width       : 100%;
  cursor      : zoom-in;
  overflow-y  : auto;
  max-height  : 520px;
}
.carousel-slide::-webkit-scrollbar       { width: 4px; }
.carousel-slide::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.carousel-slide img {
  width       : 100%;
  display     : block;
  height      : auto;
  transition  : opacity 0.2s;
}
.carousel-slide img:hover { opacity: 0.92; }

/* Boutons prev / next du carrousel */
.carousel-btn {
  position        : absolute;
  top             : 50%;
  transform       : translateY(-50%);
  background      : rgba(0,0,0,0.55);
  border          : none;
  color           : white;
  width           : 38px;
  height          : 38px;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 0.95rem;
  z-index         : 20;
  cursor          : pointer;
  transition      : background 0.2s, transform 0.2s;
  backdrop-filter : blur(8px);
}
.carousel-btn:hover         { background: var(--primary); transform: translateY(-50%) scale(1.1); }
.carousel-btn.prev          { left: 10px; }
.carousel-btn.next          { right: 10px; }
/* Cache si un seul slide */
.carousel-btn[hidden]       { display: none; }

/* Indicateurs de slide (petits points en bas) */
.carousel-dots {
  position        : absolute;
  bottom          : 10px;
  left            : 50%;
  transform       : translateX(-50%);
  display         : flex;
  gap             : 6px;
  z-index         : 20;
}
.carousel-dot {
  width         : 7px;
  height        : 7px;
  border-radius : 50%;
  background    : rgba(255,255,255,0.5);
  cursor        : pointer;
  transition    : background 0.2s, transform 0.2s;
}
.carousel-dot.active { background: white; transform: scale(1.3); }


/* ================================================================
   10. DESCRIPTION, STACK TECHNIQUE, LIENS
   ================================================================ */

.project-about { margin-bottom: 26px; }

.project-about h3 {
  font-size   : 0.98rem;
  font-weight : 700;
  color       : var(--primary);
  margin-bottom: 9px;
  display     : flex;
  align-items : center;
  gap         : 7px;
}

.project-about p { font-size: 0.9rem; color: var(--text-3); line-height: 1.9; }

.tech-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.tech-tag {
  padding       : 5px 13px;
  background    : var(--surface);
  border        : 1px solid var(--border);
  border-radius : 8px;
  font-size     : 0.76rem;
  font-family   : monospace;
  color         : var(--text-2);
  font-weight   : 600;
  transition    : all 0.2s;
}
.tech-tag:hover { border-color: var(--primary); color: var(--primary); }

.project-links { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-project {
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  padding       : 11px 20px;
  border-radius : 10px;
  font-weight   : 700;
  font-size     : 0.86rem;
  text-decoration: none;
  transition    : all 0.25s;
  white-space   : nowrap;
}
.btn-primary {
  background : var(--cta-grad);
  color      : white;
  box-shadow : 0 4px 15px var(--primary-glow);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }

.btn-secondary {
  background : var(--surface);
  border     : 1px solid var(--border);
  color      : var(--text-2);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }


/* ================================================================
   11. CTA FINAL
   ================================================================ */

.cta-section {
  background : var(--hero-grad);
  padding    : 80px 5%;
  text-align : center;
  position   : relative;
  overflow   : hidden;
}
.cta-section::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-inner { position: relative; z-index: 1; }
.cta-inner h2 { font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 800; color: white; margin-bottom: 12px; letter-spacing: -0.8px; }
.cta-inner p  { color: rgba(255,255,255,0.75); font-size: 1rem; margin-bottom: 34px; max-width: 480px; margin-left: auto; margin-right: auto; }

.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; background: #25D366; color: white;
  border-radius: 50px; font-weight: 700; font-size: 0.93rem;
  transition: all 0.3s; box-shadow: 0 8px 25px rgba(37,211,102,0.3);
}
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(37,211,102,0.4); }

.btn-home {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; background: rgba(255,255,255,0.12); color: white;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 50px;
  font-weight: 700; font-size: 0.93rem; transition: all 0.3s;
  backdrop-filter: blur(8px);
}
.btn-home:hover { background: rgba(255,255,255,0.22); transform: translateY(-3px); }


/* ================================================================
   12. FOOTER
   ================================================================ */

footer {
  background   : #060a0f;
  padding      : 28px 5%;
  color        : #475569;
  font-size    : 0.82rem;
  border-top   : 1px solid #1e2d45;
}
footer a { color: #64748b; transition: color 0.2s; }
footer a:hover { color: white; }
.footer-inner {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  flex-wrap       : wrap;
  gap             : 12px;
  max-width       : 1100px;
  margin          : 0 auto;
}


/* ================================================================
   13. LIGHTBOX — affichage plein écran d'une image
   ================================================================ */

.lightbox {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,0.96);
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 5000;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 0.3s ease;
  padding        : 20px;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox img {
  max-width    : min(90vw, 500px); /* pas trop large pour les captures mobile */
  max-height   : 90vh;
  border-radius: 16px;
  object-fit   : contain;
  box-shadow   : 0 40px 100px rgba(0,0,0,0.6);
  transform    : scale(0.94);
  transition   : transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.lightbox.open img { transform: scale(1); }

/* Flèches de navigation dans la lightbox */
.lightbox-nav {
  position   : absolute;
  top        : 50%;
  transform  : translateY(-50%);
  background : rgba(255,255,255,0.1);
  border     : 1px solid rgba(255,255,255,0.2);
  color      : white;
  width      : 48px;
  height     : 48px;
  border-radius: 50%;
  display    : flex;
  align-items: center;
  justify-content: center;
  font-size  : 1rem;
  cursor     : pointer;
  transition : all 0.2s;
  backdrop-filter: blur(8px);
}
.lightbox-nav:hover   { background: var(--primary); border-color: var(--primary); transform: translateY(-50%) scale(1.1); }
.lightbox-nav.lb-prev { left: 20px; }
.lightbox-nav.lb-next { right: 20px; }

.lightbox-close {
  position      : absolute;
  top           : 20px;
  right         : 20px;
  background    : rgba(255,255,255,0.1);
  border        : 1px solid rgba(255,255,255,0.2);
  color         : white;
  width         : 44px;
  height        : 44px;
  border-radius : 50%;
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 1rem;
  cursor        : pointer;
  transition    : all 0.2s;
  backdrop-filter: blur(8px);
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); transform: scale(1.1); }

/* Compteur d'images dans la lightbox */
.lightbox-counter {
  position   : absolute;
  bottom     : 24px;
  left       : 50%;
  transform  : translateX(-50%);
  color      : rgba(255,255,255,0.65);
  font-size  : 0.82rem;
  font-family: var(--font-body);
  white-space: nowrap;
}


/* ================================================================
   14. BOUTON WHATSAPP FLOTTANT
   ================================================================ */

.wa-float {
  position      : fixed;
  bottom        : 28px;
  right         : 28px;
  width         : 56px;
  height        : 56px;
  background    : #25D366;
  border-radius : 50%;
  display       : flex;
  align-items   : center;
  justify-content: center;
  color         : white;
  font-size     : 1.4rem;
  z-index       : 999;
  text-decoration: none;
  transition    : transform 0.3s;
  animation     : waPulse 3s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); }

@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 6px 40px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.08); }
}


/* ================================================================
   15. ANIMATIONS AU SCROLL — BIDIRECTIONNELLES
       Les éléments s'animent aussi bien en scrollant vers le bas
       qu'en remontant vers le haut.
       → On N'utilise PAS "once: true" dans l'IntersectionObserver
       → La classe .anim-visible est ajoutée ET retirée dynamiquement
   ================================================================ */

/* État de base (invisible, avant animation) */
[data-anim] {
  opacity    : 0;
  transition : opacity 0.7s ease, transform 0.7s ease;
}

/* Depuis le bas */
[data-anim="up"]    { transform: translateY(40px); }
/* Depuis la gauche */
[data-anim="left"]  { transform: translateX(-50px); }
/* Depuis la droite */
[data-anim="right"] { transform: translateX(50px); }
/* Zoom */
[data-anim="zoom"]  { transform: scale(0.9); }
/* Fade simple */
[data-anim="fade"]  { transform: none; }

/* État visible (déclenché dans les deux sens) */
[data-anim].anim-visible {
  opacity   : 1;
  transform : translateY(0) translateX(0) scale(1);
}

/* Délais pour les grilles */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

/* Effet "portes qui s'ouvrent" sur les cartes projet complètes */
.project-card[data-anim] {
  overflow : visible; /* les enfants ne sont pas clippés */
}


/* ================================================================
   16. RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  .card-header   { padding: 18px 20px; }
  .card-body     { padding: 20px; }
  .phones-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page-hero h1  { font-size: 2rem; }
  .hero-stats-row{ gap: 18px; }
  .theme-label   { display: none; }
}

@media (max-width: 480px) {
  .phones-grid   { grid-template-columns: repeat(2, 1fr); }
  .back-btn span { display: none; }
}

@media (max-width: 360px) {
  .phones-grid   { grid-template-columns: 1fr 1fr; }
}