/* === Base === */
:root {
  --brand: #e60012;
  --header-h: 88px; /* hauteur header desktop */
  --subnav-h: 48px; /* hauteur mini-menu sticky */
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0; background:#f9f9f9; color:#111; line-height:1.6
}

/* Links */
a{ color:var(--brand); text-decoration:none; font-weight:500 }
a:hover{ text-decoration:underline }

/* Header / nav-cards */
.site-header{
  background:#fff; border-bottom:1px solid #e0e0e0;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 4px rgba(0,0,0,.06)
}

/* Bloque le scroll de fond quand le menu est ouvert */
body.nav-open{ overflow:hidden }

.header-left{ display:flex; align-items:center; gap:.75rem }
.logo{ font-weight:800; font-size:2rem; color:var(--brand) }

.hero-photo_bis{
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  margin-bottom:.5rem; box-shadow:0 4px 8px rgba(0,0,0,.1)
}

.nav-cards{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap }
.nav-card{
  display:inline-block; background:#fff; color:var(--brand);
  padding:.7rem 1.2rem; border-radius:12px; text-decoration:none; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .2s ease, background .2s ease, color .2s ease;
  border:2px solid var(--brand)
}
.nav-card:hover{ background:var(--brand); color:#fff; transform:scale(1.05) }
.nav-card.active{ background:var(--brand); color:#fff }

/* Bouton burger (visible en mobile) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid #e6e6e6; border-radius:10px;
  background:#fff; cursor:pointer
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background:#111; margin:5px 0;
  transition:transform .2s ease, opacity .2s ease
}
/* Animation en X quand ouvert */
body.nav-open .nav-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0 }
body.nav-open .nav-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Buttons */
.cta-button{
  display:inline-block; background:var(--brand); color:#fff; padding:.75rem 1.5rem;
  border-radius:999px; font-weight:700; border:none; cursor:pointer;
  transition:background .25s ease, transform .15s ease; box-shadow:0 2px 4px rgba(0,0,0,.2)
}
.cta-button:hover{ background:#cc0010 }

/* Sections */
.section{ padding:4rem 1.25rem; max-width:1100px; margin:auto }
.section h2{ font-size:1.9rem; color:var(--brand); margin-bottom:1.2rem }

/* Cards & grids */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem }
.card{
  background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:1.25rem; border:1px solid #eee; transition:transform .3s ease
}
.card:hover{ transform:translateY(-4px) }
.card h3{ margin:0 0 .5rem; color:var(--brand) }

/* Hero */
.hero-section{
  min-height:65vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem; background:linear-gradient(to bottom right,#fff,#f2f2f2);
  animation:fadeInUp 1s ease-in-out
}
.hero-photo{
  width:150px; height:150px; border-radius:50%; object-fit:cover; margin-bottom:1rem;
  box-shadow:0 4px 8px rgba(0,0,0,.1)
}
.hero-text h1{ font-size:2rem; margin:.2rem 0 .6rem }
.hero-text p{ font-size:1.1rem; color:#555; max-width:560px; margin:.2rem auto 1.2rem }

/* Offsets ancres (header + sous-menu) */
#hero, #parcours, #passions{
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 8px);
}

/* Quick sub-nav on home */
.quick-nav{
  position:sticky; top:var(--header-h); z-index:90;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-bottom:.5px solid #eee
}
.quick-nav-list{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center;
  max-width:1100px; margin:0 auto; padding:.6rem 1rem; list-style:none
}
.quick-link{
  display:inline-block; padding:.45rem .9rem; border-radius:999px; font-weight:700;
  border:1px solid #e6e6e6; background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease
}
.quick-link:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.06) }
.quick-link.active{ background:var(--brand); color:#fff; border-color:var(--brand) }

/* Timeline */
.timeline-section{ padding:4rem 1rem; background:#fff; position:relative; overflow:hidden }
.timeline-title{ text-align:center; font-size:2rem; color:var(--brand); margin-bottom:3rem }
.timeline-alt{ position:relative; max-width:1000px; margin:auto; padding:0 2rem }
.timeline-alt::after{
  content:''; position:absolute; width:4px; background-color:var(--brand);
  top:0; bottom:0; left:50%; margin-left:-2px
}
.timeline-box{ padding:1rem 2rem; position:relative; width:50% }
.timeline-box.left{ right:7% }
.timeline-box.right{ left:50% }
.timeline-box .content{
  background:#f9f9f9; position:relative; padding:1rem 1.5rem; border-radius:12px;
  border-left:4px solid var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.05);
  opacity:0; transform:translateY(30px); transition:all .6s ease
}
.timeline-box.reveal .content{ opacity:1; transform:translateY(0) }
.timeline-box h3{ margin:0 0 .5rem; color:var(--brand) }

@media (max-width:768px){
  .timeline-box,.timeline-box.left,.timeline-box.right{ width:100%; left:0; padding-left:1rem; padding-right:1rem }
  .timeline-alt::after{ left:8px }
}

/* Passions */
.passions-section{ text-align:center; padding:3rem 1rem; background:#fff; animation:fadeInUp .8s ease-in-out }
.passions-title{ text-align:center; font-size:2rem; color:var(--brand); margin-bottom:2rem }
.passions-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:1100px; margin:0 auto }
.passion-card{
  border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid #eee; background:#fff; transform:translateY(0); opacity:1
}
.passion-media{ height:220px; padding:0; border-radius:inherit; overflow:hidden; background:#f8f8f8; display:block }
.passion-img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:0; background:transparent }
@media (max-width:768px){ .passion-media{ height:180px } }

/* Projects */
.projects-section{ padding:4rem 2rem; max-width:1200px; margin:auto; animation:fadeInUp 1s ease-in-out }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-top:2rem }
.project-card{
  background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease
}
.project-card:hover{ transform:translateY(-4px) }
.project-image{ width:100%; height:160px; object-fit:contain; background:#f9f9f9; padding:1rem }
.project-content{ padding:1.5rem; flex:1; display:flex; flex-direction:column; justify-content:space-between }
.project-title{ font-size:1.2rem; font-weight:700; margin-bottom:.5rem; color:var(--brand) }
.project-description{ flex-grow:1; font-size:.95rem; color:#333; margin-bottom:1rem }
.project-link{
  text-decoration:none; color:#fff; background:var(--brand); padding:.5rem 1rem; border-radius:8px;
  font-weight:700; text-align:center; transition:background .3s ease
}
.project-link:hover{ background:#cc0010 }
.badges{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0 }
.badge{ display:inline-block; padding:.25rem .5rem; border-radius:999px; background:#f4f4f4; font-size:.8rem; border:1px solid #eee }
.lang-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle }

/* Contact */
.form-card{
  max-width:600px; width:100%; background:#fff; padding:2.5rem; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:1.5rem
}
.contact-form{ display:flex; flex-direction:column; gap:1.5rem }
.form-group{ display:flex; flex-direction:column; gap:.5rem }
input,textarea{
  padding:.75rem 1rem; border:1px solid #ccc; border-radius:8px; font-size:1rem;
  transition:border .3s ease, box-shadow .3s ease
}
input:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(230,0,18,.15) }
.form-success,.form-error{ text-align:center; font-weight:700; opacity:0; transition:opacity .6s ease-in-out }
.form-success.show{ opacity:1; color:#2d6a4f; background:#e6ffed; padding:1rem; border-left:4px solid #2ecc71; margin-top:1rem }
.form-error.show{ opacity:1; color:#a30000; background:#ffe6e6; padding:1rem; border-left:4px solid var(--brand); margin-top:1rem }

/* Section contact : centrage du formulaire */
.contact-section{ display:flex; justify-content:center; align-items:center; flex-direction:column; min-height:70vh }

/* Footer */
.site-footer{ background:#fff; border-top:1px solid #e6e6e6; margin-top:3rem; padding:2rem 1.25rem; color:#333 }
.footer-content{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:1.5rem; align-items:start
}
.footer-brand .logo{ display:inline-block; font-weight:800; font-size:1.25rem; color:var(--brand) }
.footer-brand p{ margin:.5rem 0 0; font-size:.95rem; color:#555 }

/* Footer social — wrap + tailles + alignement (fusion corrigée) */
.footer-social .social-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
  gap:.75rem 1rem;
}
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px }
.footer-social img{ width:28px; height:28px; transition:transform .2s ease }
.footer-social img:hover{ transform:translateY(-2px) }

.footer-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.footer-links a{ color:#333; border-bottom:1px dashed transparent; transition:color .2s ease, border-color .2s ease }
.footer-links a:hover{ color:var(--brand); border-color:var(--brand) }

.footer-bottom{
  border-top:1px solid #eee; margin-top:1.25rem; padding-top:.75rem;
  display:flex; gap:.75rem; align-items:center; justify-content:space-between;
  font-size:.9rem; color:#666
}
.back-to-top{
  display:inline-block; padding:.4rem .8rem; border-radius:999px; border:1px solid #e6e6e6;
  background:#fff; font-weight:700
}
.back-to-top:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.06) }

/* Animations */
@keyframes fadeInUp{ 0%{ opacity:0; transform:translateY(30px) } 100%{ opacity:1; transform:translateY(0) } }

/* ==== Tableau compétences ==== */
.table-wrapper{
  margin-top:1rem; overflow-x:auto; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.04)
}
.competence-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:820px }
.competence-table thead th{
  position:sticky; top:0; background:#fff; padding:14px 16px; font-weight:800; text-align:left; border-bottom:2px solid var(--brand)
}
.competence-table tbody td{ padding:12px 16px; vertical-align:top; border-bottom:1px solid #eee }
.competence-table tbody tr:nth-child(even){ background:#fafafa }
.competence-table tbody tr:hover{ background:#f5f5f5 }
.competence-table td:first-child{ text-align:center; font-weight:700; color:var(--brand) }
.competence-table th:nth-child(1), .competence-table td:nth-child(1){ width:8% }
.competence-table th:nth-child(2), .competence-table td:nth-child(2){ width:14%; white-space:nowrap }
.competence-table th:nth-child(3), .competence-table td:nth-child(3){ width:34% }
.competence-table th:nth-child(4), .competence-table td:nth-child(4){ width:44% }

/* ========= ≥1024px → tablette paysage / petit laptop ========= */
@media (max-width:1024px){
  :root{ --header-h:76px; --subnav-h:44px }
  .section{ padding:3rem 1rem }
  .logo{ font-size:1.6rem }
  .nav-cards{ gap:.6rem }
  .nav-card{ padding:.6rem 1rem }
  .hero-photo{ width:130px; height:130px }
}

/* ========= ≤768px → tablette portrait / grand mobile ========= */
@media (max-width:768px){
  :root{ --header-h:64px; --subnav-h:42px }

  .site-header{ padding:.6rem 1rem }
  .logo{ font-size:1.4rem }

  /* Bouton burger visible en mobile */
  .nav-toggle{ display:inline-flex }

  /* Menu déroulant sous le header — compact en "pills" */
  .nav-cards{
    position:fixed; left:0; right:0; top:var(--header-h); z-index:999;
    display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .5rem;
    background:#fff; border-bottom:1px solid #eee; padding:.75rem 1rem .9rem;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease
  }
  body.nav-open .nav-cards{ max-height:50vh; opacity:1; pointer-events:auto }

  .nav-card{
    width:auto; display:inline-flex; align-items:center; justify-content:center; text-align:center;
    padding:.5rem .9rem; font-size:.95rem; border-radius:10px; border-width:1.5px
  }

  .hero-text h1{ font-size:1.6rem }
  .hero-text p{ font-size:1rem }

  /* Timeline en colonne (affinage) */
  .timeline-alt{ padding:0 1rem }
  .timeline-box{ padding:.75rem }
  .timeline-title{ font-size:1.7rem }
  .timeline-alt::after{ left:12px }

  /* Passions */
  .passion-media{ height:180px }

  /* Footer en 1 colonne + icônes centrées */
  .footer-content{ grid-template-columns:1fr; gap:1rem; text-align:center }
  .footer-links, .footer-social{ justify-self:center }
  .footer-social .social-row{
    justify-content:center; max-width:min(82vw, 320px); margin:0 auto
  }
}

/* ========= ≤480px → mobile ========= */
@media (max-width:480px){
  :root{ --header-h:56px; --subnav-h:40px }

  .section{ padding:2.25rem 1rem }
  .logo{ font-size:1.25rem }
  .hero-photo{ width:110px; height:110px }

  .nav-card{ padding:.4rem .7rem; font-size:.7rem; border-radius:9px }

  .projects-grid{ grid-template-columns:1fr }
  .project-image{ height:140px }
  .form-card{ padding:1.25rem }
  .timeline-title, .passions-title{ font-size:1.5rem }

  .footer-social a{ width:34px; height:34px }
  .footer-social img{ width:22px; height:22px }
  .footer-social .social-row{ gap:.6rem .8rem; max-width:min(90vw, 260px) }

  /* évite l’écrasement de la barre du bas */
  .footer-bottom{ flex-direction:column; gap:.5rem; text-align:center }
}

/* Anneau de focus propre pour clavier */
.nav-card:focus-visible,
.nav-toggle:focus-visible{
  outline:3px solid rgba(230,0,18,.35);
  outline-offset:2px;
}