/* =========================== Gestion des textes =========================== */
/* Titre principal */
.h1 {
    text-align: center;
    font-size: 1.8em;
    font-weight: 900; 
    display: block; 
    color: var(--md-primary-fg-color) !important;
    margin-bottom: 0;
}

/* Titre secondaire */
.h2 {
    font-weight: 600 !important;
    color: var(--md-primary-fg-color) !important;
}

/* Titre tertiaire (niveau h3 habillé) */
.h3 {
    font-weight: 600 !important;
    color: var(--md-primary-fg-color) !important;
}

/* Séparateur dans un titre : « Problème | Solution » */
.h2-sep {
    color: var(--md-default-fg-color--light);
    font-weight: 400;
    margin: 0 0.5em;
    opacity: 0.6;
}

/* Texte d'intro */
.intro {
    text-align: center !important;
    font-style: italic !important;
    color: #90a4ae!important;
    font-size: 1.2em !important;
    margin-top: 0.1em;
}

/* Texte de presentation (adapté aux modes clair et sombre) */
.presentation {
    background-color: var(--md-code-bg-color);
    border: 1px solid var(--md-default-fg-color--lightest);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


/* =========================== Gestion des images =========================== */
.player-solong {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    animation: jump 0.5s infinite alternate;
}

.project-architecture {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-7px);
  }
}

/* =========================== Gestion des videos =========================== */
.video {
    border-radius: 10px;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.2);
}


/* ================================== BLOG ================================== */
.poem {
  font-style: italic;
  text-align: center !important;
  margin-left: 1rem;
  color: var(--md-default-fg-color--light);
}

.poem strong {
  color: var(--md-primary-fg-color);
  font-weight: 500;
}


/* =========================== CARDS PROJETS =========================== */
.project-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(100, 181, 246, 0.25);
  border-color: var(--md-primary-fg-color);
}

.project-card h3 {
  color: var(--md-primary-fg-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-desc {
  color: var(--md-default-fg-color--light);
  margin-bottom: 15px;
}

.project-tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.project-tech-badges img {
  height: 22px;
  transition: transform 0.2s ease;
}

.project-tech-badges img:hover {
  transform: scale(1.2);
}

/* =========================== SOFT SKILLS CARDS =========================== */
.soft-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.soft-skill-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.soft-skill-card:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(100, 181, 246, 0.3);
}

.soft-skill-icon {
  font-size: 2.2em;
  margin-bottom: 10px;
  display: block;
}

.soft-skill-title {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-bottom: 5px;
}

.soft-skill-desc {
  font-size: 0.9em;
  color: var(--md-default-fg-color--light);
}

/* =========================== SKILL CARDS (Compétences Acquises) =========================== */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.skill-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 25px rgba(100, 181, 246, 0.3);
}

.skill-card-title {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-bottom: 5px;
}

.skill-card-desc {
  font-size: 0.9em;
  color: var(--md-default-fg-color--light);
}

/* =========================== LOISIRS GRID =========================== */
.loisirs-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.loisir-item {
  text-align: center;
  padding: 15px 25px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 50px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.loisir-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(100, 181, 246, 0.3);
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(-15px); }
}

.loisir-emoji {
  font-size: 1.8em;
  display: block;
  margin-bottom: 5px;
}

.loisir-label {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* =========================== OBJECTIFS BADGES =========================== */
.objectifs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.objectif-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--md-default-bg-color);
  border: 2px solid var(--md-primary-fg-color);
  border-radius: 50px;
  font-weight: 500;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.objectif-badge:hover {
  transform: scale(1.05);
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  box-shadow: 0 6px 15px rgba(100, 181, 246, 0.4);
}

.objectif-badge .check {
  color: #4caf50;
  font-weight: 800;
  font-size: 1.2em;
}

.objectif-badge:hover .check {
  color: #fff;
}

/* =========================== ABOUT HERO =========================== */
.about-hero {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 16px;
  margin-bottom: 20px;
}

.about-avatar {
  flex-shrink: 0;
}

.about-avatar-img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--md-primary-fg-color);
}

.about-intro {
  flex: 1;
}

.about-name {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-bottom: 5px;
}

.about-tagline {
  font-size: 1.1em;
  color: var(--md-default-fg-color);
  margin-bottom: 5px;
}

.about-meta {
  font-size: 0.9em;
  color: var(--md-default-fg-color--light);
  font-style: italic;
}

/* =========================== ABOUT PROJECTS GRID =========================== */
.about-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.about-projects-grid .project-card {
  margin-bottom: 0;
}

/* =========================== ABOUT CTA =========================== */
.about-cta {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* =========================== OBJECTIF BADGE NEXT =========================== */
.objectif-badge--next {
  border-color: var(--md-accent-fg-color);
  border-style: dashed;
}

.objectif-badge--next .check {
  color: var(--md-accent-fg-color);
}

.objectif-badge--next:hover .check {
  color: #fff;
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 768px) {
  .about-hero {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .about-avatar-img {
    width: 90px;
    height: 90px;
  }
  
  .about-name {
    font-size: 1.4em;
  }
  
  .about-projects-grid {
    grid-template-columns: 1fr;
  }
  
  .soft-skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .loisirs-grid {
    gap: 15px;
  }
  
  .loisir-item {
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  .soft-skills-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================== VITRINE PROJETS =========================== */

/* Étiquettes technologiques (badges) */
.tech-tag {
  display: inline-block;
  padding: 4px 14px;
  margin: 3px 4px 3px 0;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-primary-bg-color);
  background: var(--md-primary-fg-color);
}

/* Cartes de la grille Material : coins arrondis + effet de survol */
.grid.cards > .card {
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid.cards > .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(96, 125, 139, 0.25);
}

/* Section badges de stack (badge-section + catégories + rangées) */
.badge-section {
  text-align: center;
  margin: 0.5em 0 1.5em;
}

.badge-category {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.4em;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.badge-row img {
  height: 28px;
  border-radius: 6px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.badge-row img:hover {
  transform: scale(1.15) translateY(-3px);
  filter: drop-shadow(0 4px 8px rgba(100, 181, 246, 0.5));
}

/* =========================== WEB 3.0 — CARTE VEDETTE =========================== */
.project-card h2 {
  color: var(--md-primary-fg-color);
  font-size: 1.3em;
  margin-bottom: 0.4em;
}

.project-card p {
  color: var(--md-default-fg-color--light);
  margin-bottom: 1em;
}

.project-card .md-button--primary {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.project-card .md-button--primary:hover {
  background: var(--md-accent-fg-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(100, 181, 246, 0.35);
}

/* =========================== WEB 3.0 — GRID CARDS LIENS =========================== */
.grid.cards .md-typeset a.md-link {
  display: inline-block;
  margin-top: 0.6em;
  padding: 6px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--md-primary-fg-color);
  border: 1px solid var(--md-primary-fg-color);
  transition: all 0.2s ease;
}

.grid.cards .md-typeset a.md-link:hover {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(100, 181, 246, 0.3);
}

/* =========================== ACCESSIBILITÉ =========================== */
/* Contraste WCAG AA en mode sombre (schéma slate) :
   le teal primaire (#009485) ne donne que 3,77:1 avec le texte blanc
   (minimum 4,5:1). On assombrit UNIQUEMENT les surfaces qui portent du
   texte blanc (en-tête, barre d'onglets, boutons primaires) afin d'atteindre
   5,32:1. On ne touche pas à --md-primary-fg-color lui-même : il sert aussi
   de couleur de TEXTE (.h1/.h2/.h3, liens de cartes) et l'assombrir
   dégraderait le contraste sur fond sombre (4,27 -> 3,03). */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs,
[data-md-color-scheme="slate"] .md-button--primary {
  background-color: #00796b;
}

/* Les liens dans le corps de texte doivent rester identifiables sans la
   seule couleur (WCAG 1.4.1 "Utilisation de la couleur"). On les souligne,
   en excluant les éléments déjà stylés comme des boutons ou des pastilles
   pour ne pas casser leur rendu. */
.md-typeset a:not(.md-button):not(.md-link) {
  text-decoration: underline;
}