/* ========================================
   VARIABLES PORTFOLIO (landing / profil)
   ======================================== */
:root[data-page="portfolio"] {
  /* Base / Layout */
  --portfolio-hero-gradient: linear-gradient(135deg, rgba(79,209,199,0.25), rgba(52,152,219,0.15));
  --portfolio-card-bg: rgba(20,24,32,0.55);
  --portfolio-card-border: rgba(255,255,255,0.08);
  --portfolio-accent: var(--accent, #4fd1c7);
  --portfolio-section-radius: 28px;
  --portfolio-section-padding: 2.5rem;

  /* === Éducation / Timeline (DARK) === */
  --edu-tabs-bg: rgba(55,65,81,0.5);
  --edu-tabs-border: rgba(79,209,199,0.2);
  --edu-tab-text: var(--text-neutral, #a0a0a0);
  --edu-tab-active-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.8), rgba(var(--accent-rgb,79,209,199),0.6));
  --edu-tab-active-shadow: 0 4px 15px rgba(var(--accent-rgb,79,209,199),0.3);
  --edu-tab-hover-bg: rgba(var(--accent-rgb,79,209,199),0.1);
  --edu-timeline-line-gradient: linear-gradient(180deg, rgba(var(--accent-rgb,79,209,199),0.8) 0%, rgba(var(--accent-rgb,79,209,199),0.4) 50%, rgba(var(--accent-rgb,79,209,199),0.8) 100%);
  --edu-timeline-line-glow: 0 0 20px rgba(var(--accent-rgb,79,209,199),0.3);
  --edu-marker-border: 4px solid rgba(26,26,26,0.8);
  --edu-marker-glow: 0 0 20px rgba(var(--accent-rgb,79,209,199),0.4), inset 0 0 20px rgba(255,255,255,0.1);
  --edu-card-bg: rgba(55,65,81,0.7);
  --edu-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --edu-card-border-hover: rgba(var(--accent-rgb,79,209,199),0.5);
  --edu-card-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  --edu-card-shadow-hover: 0 12px 40px rgba(var(--accent-rgb,79,209,199),0.15), 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  --edu-arrow-bg: rgba(55,65,81,0.9);
  --edu-period-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.2), rgba(var(--accent-rgb,79,209,199),0.1));
  --edu-period-text: var(--accent, #4fd1c7);
  --edu-period-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --edu-status-success-bg: rgba(var(--status-success-rgb,34,197,94),0.2);
  --edu-status-success-text: var(--status-success, #22c55e);
  --edu-status-success-border: 1px solid rgba(var(--status-success-rgb,34,197,94),0.3);
  --edu-status-warning-bg: rgba(var(--status-warning-rgb,251,191,36),0.2);
  --edu-status-warning-text: var(--status-warning, #fbbf24);
  --edu-status-warning-border: 1px solid rgba(var(--status-warning-rgb,251,191,36),0.3);
  --edu-title-text: #fff;
  --edu-muted-text: var(--text-neutral, #a0a0a0);
  --edu-desc-text: #d1d5db;
  --edu-grade-text: #d1d5db;
  --edu-institution-text: var(--accent, #4fd1c7);
  --edu-skill-tag-bg: rgba(var(--accent-rgb,79,209,199),0.2);
  --edu-skill-tag-text: var(--accent, #4fd1c7);
  --edu-skill-tag-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --edu-divider-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);

  /* === Expérience (DARK) === */
  --exp-tabs-bg: rgba(var(--slate-rgb,55,65,81),0.5);
  --exp-tabs-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --exp-tab-active-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.8), rgba(var(--accent-rgb,79,209,199),0.6));
  --exp-tab-active-shadow: 0 4px 15px rgba(var(--accent-rgb,79,209,199),0.3);
  --exp-tab-hover-bg: rgba(var(--accent-rgb,79,209,199),0.1);
  --exp-card-bg: rgba(var(--slate-rgb,55,65,81),0.7);
  --exp-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --exp-card-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  --exp-card-border-hover: rgba(var(--accent-rgb,79,209,199),0.5);
  --exp-card-shadow-hover: 0 12px 40px rgba(var(--accent-rgb,79,209,199),0.15), 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  --exp-card-current-border: rgba(var(--accent-rgb,79,209,199),0.6);
  --exp-card-current-shadow: 0 8px 32px rgba(var(--accent-rgb,79,209,199),0.2), 0 0 20px rgba(var(--accent-rgb,79,209,199),0.1), inset 0 1px 0 rgba(255,255,255,0.1);
  --exp-card-seeking-border: rgba(var(--status-warning-rgb,251,191,36),0.5);
  --exp-card-seeking-shadow: 0 8px 32px rgba(var(--status-warning-rgb,251,191,36),0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  --exp-header-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --exp-company-logo-bg: rgba(var(--accent-rgb,79,209,199),0.1);
  --exp-company-logo-border: 2px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --exp-job-period-bg: rgba(var(--accent-rgb,79,209,199),0.2);
  --exp-job-period-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --exp-description-text: #d1d5db;
  --exp-project-item-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --exp-project-item-border-hover: rgba(var(--accent-rgb,79,209,199),0.5);
  --exp-project-item-shadow-hover: 0 12px 40px rgba(var(--accent-rgb,79,209,199),0.15), 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);

  /* === Info Sections (DARK) === */
  --info-section-bg: rgba(var(--slate-rgb,55,65,81),0.6);
  --info-section-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --info-section-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --info-section-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.1);
  --info-item-text: rgba(255,255,255,0.9);
  --info-label-text: rgba(255,255,255,0.7);
  --info-value-text: rgba(255,255,255,0.85);
  --info-aero-bg-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.12) 0%, rgba(var(--slate-rgb,55,65,81),0.5) 50%, rgba(var(--accent-rgb,79,209,199),0.08) 100%);
  --info-aero-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --info-aero-shadow: 0 8px 32px rgba(var(--accent-rgb,79,209,199),0.1);
  --info-aero-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.2);
  --info-aero-reflection-gradient: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  --info-aero-title-color: #fff;

  /* === Profil / Hero (DARK) === */
  --profile-text-primary: rgba(255,255,255,0.9);
  --profile-heading-color: rgba(255,255,255,0.95);
  --profile-cta-color: rgba(255,255,255,0.8);
  --profile-bio-color: rgba(255,255,255,0.75);
  --profile-name-gradient: linear-gradient(135deg, var(--accent), #7be3db);
  --profile-title-gradient: linear-gradient(90deg, #4A90E2, #7BB3F0, #4A90E2, #7BB3F0);
  --profile-specialty-gradient: linear-gradient(90deg, #4A90E2, #7BB3F0, #4A90E2, #7BB3F0);
  --profile-stats-bg-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.08) 0%, rgba(var(--accent-rgb,79,209,199),0.03) 100%);
  --profile-stats-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --profile-stats-shadow: 0 10px 40px rgba(var(--accent-rgb,79,209,199),0.15), 0 0 60px rgba(var(--accent-rgb,79,209,199),0.05);
  --profile-stat-item-bg: rgba(var(--accent-rgb,79,209,199),0.05);
  --profile-stat-item-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.15);
  --profile-stat-item-bg-hover: rgba(var(--accent-rgb,79,209,199),0.12);
  --profile-stat-item-border-hover: rgba(var(--accent-rgb,79,209,199),0.3);
  --profile-stat-item-shadow-hover: 0 8px 25px rgba(var(--accent-rgb,79,209,199),0.2);
  --profile-stat-number-gradient: linear-gradient(135deg, var(--accent), #7be3db);
  --profile-stat-label-color: rgba(255,255,255,0.75);

  /* === Témoignages / Testimonials === */
  --testimonials-slider-bg: rgba(var(--slate-rgb,55,65,81),0.4);
  --testimonials-slider-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --testimonials-slider-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --testimonials-slider-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.1);

  --testimonial-card-bg: rgba(var(--slate-rgb,55,65,81),0.3);
  --testimonial-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.1);
  --testimonial-card-shadow: none;

  --testimonial-quote-color: var(--accent);
  --testimonial-quote-opacity: 0.2;

  --testimonial-text-color: #d1d5db;
  --testimonial-name-color: #ffffff;
  --testimonial-company-color: #a0a0a0;
  --testimonial-avatar-border: 2px solid var(--accent);
  --testimonial-avatar-glow: 0 0 15px rgba(var(--accent-rgb,79,209,199),0.4);

  --testimonial-slider-btn-bg: rgba(var(--accent-rgb,79,209,199),0.2);
  --testimonial-slider-btn-border: 2px solid rgba(var(--accent-rgb,79,209,199),0.6);
  --testimonial-slider-btn-shadow: 0 4px 16px rgba(0,0,0,0.1);
  --testimonial-slider-btn-bg-hover: rgba(var(--accent-rgb,79,209,199),0.4);
  --testimonial-slider-btn-border-hover: rgba(var(--accent-rgb,79,209,199),0.8);
  --testimonial-slider-btn-shadow-hover: 0 0 20px rgba(var(--accent-rgb,79,209,199),0.5), 0 8px 25px rgba(0,0,0,0.2);

  --testimonial-indicator-bg: rgba(var(--accent-rgb,79,209,199),0.3);
  --testimonial-indicator-border: 1px solid var(--accent);
  --testimonial-indicator-bg-active: var(--accent);
  --testimonial-indicator-glow-active: 0 0 10px rgba(var(--accent-rgb,79,209,199),0.6);
  /* === Projets (DARK) === */
  --projects-section-title-color: #fff;
  --projects-section-subtitle-color: #a0a0a0;
  --projects-section-description-color: #d1d5db;
  --projects-tabs-bg: rgba(var(--slate-rgb,55,65,81),0.5);
  --projects-tabs-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-tab-color: #a0a0a0;
  --projects-tab-hover-color: var(--accent,#4fd1c7);
  --projects-tab-hover-bg: rgba(var(--accent-rgb,79,209,199),0.1);
  --projects-tab-active-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.8), rgba(var(--accent-rgb,79,209,199),0.6));
  --projects-tab-active-color: #fff;
  --projects-tab-active-shadow: 0 4px 15px rgba(var(--accent-rgb,79,209,199),0.3);
  --projects-tech-badge-bg: rgba(var(--slate-rgb,55,65,81),0.7);
  --projects-tech-badge-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --projects-tech-badge-color: #a0a0a0;
  --projects-tech-badge-hover-bg: rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-tech-badge-hover-color: var(--accent,#4fd1c7);
  --projects-tech-badge-hover-border: rgba(var(--accent-rgb,79,209,199),0.6);
  --projects-tech-badge-hover-shadow: 0 2px 10px rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-card-bg: rgba(var(--slate-rgb,55,65,81),0.6);
  --projects-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-card-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --projects-card-hover-shadow: 0 12px 40px rgba(var(--accent-rgb,79,209,199),0.15), 0 8px 32px rgba(0,0,0,0.3);
  --projects-card-hover-border: rgba(var(--accent-rgb,79,209,199),0.4);
  --projects-image-fallback-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.1), rgba(var(--slate-rgb,55,65,81),0.3));
  --projects-image-overlay-gradient: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  --projects-tag-bg: rgba(var(--accent-rgb,79,209,199),0.8);
  --projects-tag-color: #fff;
  --projects-project-title-color: #fff;
  --projects-project-subtitle-color: var(--accent,#4fd1c7);
  --projects-project-description-color: #d1d5db;
  --projects-tech-chip-bg: rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-tech-chip-color: var(--accent,#4fd1c7);
  --projects-tech-chip-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.3);
  --projects-btn-bg: rgba(var(--slate-rgb,55,65,81),0.6);
  --projects-btn-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --projects-btn-text: rgba(255,255,255,0.8);
  --projects-btn-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --projects-btn-hover-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.8), rgba(64,224,208,0.8));
  --projects-btn-hover-border: rgba(var(--accent-rgb,79,209,199),0.6);
  --projects-btn-hover-shadow: 0 4px 12px rgba(var(--accent-rgb,79,209,199),0.35);
}

/* ========================================
   MODE CLAIR (overrides uniquement)
   ======================================== */
[data-theme="light"][data-page="portfolio"] {
  /* Switch accent dérivé -> bleu hero */
  --edu-tabs-border: rgba(var(--accent-rgb),0.30);
  --edu-period-gradient: linear-gradient(135deg, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.18));
  --edu-marker-glow: 0 0 20px rgba(var(--accent-rgb),0.45), inset 0 0 12px rgba(255,255,255,0.35);

  --portfolio-card-bg: rgba(255,255,255,0.7);
  --portfolio-card-border: rgba(0,0,0,0.06);

  /* Éducation */
  --edu-tabs-bg: rgba(255,255,255,0.65);
  --edu-tabs-border: rgba(var(--accent-rgb,79,209,199),0.25);
  --edu-tab-text: rgba(26,31,41,0.65);
  --edu-tab-hover-bg: rgba(var(--accent-rgb,79,209,199),0.12);
  --edu-marker-border: 4px solid rgba(255,255,255,0.85);
  --edu-card-bg: rgba(255,255,255,0.75);
  --edu-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.25);
  --edu-arrow-bg: rgba(255,255,255,0.9);
  --edu-period-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.25), rgba(var(--accent-rgb,79,209,199),0.15));
  --edu-desc-text: #44515f;
  --edu-grade-text: #44515f;
  --edu-muted-text: rgba(26,31,41,0.55);
  --edu-title-text: #1a1f29;
  --edu-marker-glow: 0 0 18px rgba(var(--accent-rgb,79,209,199),0.35), inset 0 0 10px rgba(255,255,255,0.25);

  /* Expérience */
  --exp-card-bg: rgba(255,255,255,0.75);
  --exp-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.25);
  --exp-card-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
  --exp-card-shadow-hover: 0 12px 42px rgba(var(--accent-rgb,79,209,199),0.25), 0 8px 34px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.38);
  --exp-company-logo-bg: rgba(var(--accent-rgb,79,209,199),0.12);
  --exp-description-text: #44515f;
  --exp-project-item-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.25);
  --exp-project-item-border-hover: rgba(var(--accent-rgb),0.60);
  --exp-project-item-shadow-hover: 0 12px 40px rgba(var(--accent-rgb,79,209,199),0.25), 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4);

  /* Info Sections */
  --info-section-bg: rgba(255,255,255,0.65);
  --info-section-border: 1px solid rgba(var(--accent-rgb),0.30);
  --info-section-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --info-section-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.4);
  --info-item-text: rgba(26,31,41,0.85);
  --info-label-text: rgba(26,31,41,0.55);
  --info-value-text: rgba(26,31,41,0.75);
  --info-aero-bg-gradient: linear-gradient(135deg, rgba(var(--accent-rgb),0.22) 0%, rgba(255,255,255,0.78) 50%, rgba(var(--accent-rgb),0.15) 100%);
  --info-aero-border: 1px solid rgba(var(--accent-rgb),0.40);
  --info-aero-shadow: 0 8px 34px rgba(var(--accent-rgb),0.14);
  --info-aero-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.45);
  --info-aero-reflection-gradient: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%);
  --info-aero-title-color: #1a1f29;

  /* Profil */
  --profile-text-primary: rgba(26,31,41,0.85);
  --profile-heading-color: #1a1f29;
  --profile-cta-color: rgba(26,31,41,0.75);
  --profile-bio-color: rgba(26,31,41,0.7);
  --profile-name-gradient: linear-gradient(135deg, var(--accent), #56aefe);
  --profile-title-gradient: linear-gradient(90deg, #4A90E2, #6FAAE8, #4A90E2, #6FAAE8);
  --profile-specialty-gradient: linear-gradient(90deg, #4A90E2, #6FAAE8, #4A90E2, #6FAAE8);
  --profile-stats-bg-gradient: linear-gradient(135deg, rgba(var(--accent-rgb,79,209,199),0.12) 0%, rgba(var(--accent-rgb,79,209,199),0.06) 100%);
  --profile-stats-border: 1px solid rgba(var(--accent-rgb),0.30);
  --profile-stats-shadow: 0 10px 42px rgba(var(--accent-rgb),0.15), 0 0 46px rgba(var(--accent-rgb),0.10);
  --profile-stat-item-bg: rgba(var(--accent-rgb,79,209,199),0.08);
  --profile-stat-item-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.2);
  --profile-stat-item-bg-hover: rgba(var(--accent-rgb,79,209,199),0.15);
  --profile-stat-item-border-hover: rgba(var(--accent-rgb),0.38);
  --profile-stat-item-shadow-hover: 0 8px 25px rgba(var(--accent-rgb,79,209,199),0.25);
  --profile-stat-label-color: rgba(26,31,41,0.6);

  /* Overrides light Témoignages */
  --testimonials-slider-bg: rgba(255,255,255,0.55);
  --testimonials-slider-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.25);
  --testimonials-slider-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --testimonials-slider-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.45);

  --testimonial-card-bg: rgba(255,255,255,0.45);
  --testimonial-card-border: 1px solid rgba(var(--accent-rgb,79,209,199),0.18);
  --testimonial-text-color: #44515f;
  --testimonial-name-color: #1a1f29;
  --testimonial-company-color: rgba(26,31,41,0.55);
  --testimonial-avatar-glow: 0 0 18px rgba(var(--accent-rgb,79,209,199),0.40);
  --testimonial-slider-btn-bg: rgba(var(--accent-rgb,79,209,199),0.18);
  --testimonial-slider-btn-border: 2px solid rgba(var(--accent-rgb,79,209,199),0.55);
  --testimonial-slider-btn-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --testimonial-slider-btn-bg-hover: rgba(var(--accent-rgb,79,209,199),0.38);
  --testimonial-slider-btn-border-hover: rgba(var(--accent-rgb,79,209,199),0.78);
  --testimonial-slider-btn-shadow-hover: 0 0 20px rgba(var(--accent-rgb,79,209,199),0.45), 0 8px 25px rgba(0,0,0,0.15);
  --testimonial-indicator-bg: rgba(var(--accent-rgb,79,209,199),0.40);
  --testimonial-indicator-glow-active: 0 0 12px rgba(var(--accent-rgb,79,209,199),0.60);
}