/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* THEME (gris + cyan/rouge) */
:root{
  --bg-1:#1a1a1a; --bg-2:#2a2a2a; --txt:#e0e0e0;
  --cyan:#00b7eb; --red:#ff2e2e; --shadow-cyan:rgba(0,183,235,.7);
}

body{
  font-family:'Fira Code', monospace;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  color:var(--txt); line-height:1.6; overflow-x:hidden; min-height:100dvh;
}

/* Scan glitch */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,183,235,.05), rgba(0,183,235,.05) 1px, transparent 1px, transparent 20px);
  animation:glitch 5s infinite linear;
}
@keyframes glitch{
  0%{transform:translateY(-100%);opacity:.4;}50%{opacity:.6;}100%{transform:translateY(100%);opacity:.4;}
}

/* NAV */
.menu{
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:rgba(26,26,26,.9); padding:16px 12px; position:sticky; top:0; z-index:1000;
  border-bottom:2px solid var(--cyan); backdrop-filter:blur(8px);
}
.menu_bouton{
  display:none; align-items:center; justify-content:center; cursor:pointer; height:40px; width:40px;
  border:1px solid var(--cyan); border-radius:8px; background:#222;
}
.menu_bouton img{height:22px;width:22px;}
.menu_links{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;}
.menu a{
  color:var(--txt); text-decoration:none; padding:10px 18px; font-weight:500; border-radius:8px; transition:.25s;
}
.menu a:hover{color:var(--cyan); text-shadow:0 0 10px var(--shadow-cyan); transform:translateY(-1px); background:rgba(0,0,0,.2);}

/* HEADER */
.header{ padding:56px 20px; text-align:center; min-height:460px; }
.header-content{ display:flex; flex-direction:column; align-items:center; gap:14px; }

.presentation-frame{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(135deg, var(--bg-2), #3a3a3a);
  padding:18px; border-radius:22px; border:3px solid var(--cyan);
  max-width:920px; width:100%; box-shadow:0 0 20px rgba(0,183,235,.25);
}

.intro-text{ flex:1; display:flex; flex-direction:column; gap:10px; max-width:60%; }
.main-title{ margin:0; font-size:clamp(1.8rem,4.5vw,2.6rem); text-shadow:0 0 15px var(--cyan); }
.sub-title{ margin:0; color:var(--red); font-weight:700; font-size:clamp(1.1rem,2.5vw,1.4rem); }

.dynamic-text{ display:flex; flex-direction:column; gap:8px; }
.text-part{
  background:rgba(20,20,20,.9); padding:8px 12px; border-radius:12px; opacity:0; transform:translateY(8px);
}

.image-container{ flex:0 0 240px; position:relative; }
.photo{ width:240px; height:240px; border-radius:50%; object-fit:cover; border:4px solid var(--red); transition:.25s; }
.image-container:hover .photo{ transform:scale(1.03); filter:brightness(1.08) contrast(1.08); }
.glow-circle{
  position:absolute; inset:auto; left:50%; top:50%; width:300px; height:300px; transform:translate(-50%,-50%);
  pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(0,183,235,.28), transparent 70%);
  z-index:-1;
}

.cv-btn{
  display:inline-block; margin-top:14px; text-decoration:none; font-weight:700; color:#111;
  background:linear-gradient(45deg,var(--cyan),var(--red)); padding:10px 18px; border-radius:999px; transition:.2s; text-transform:uppercase;
}
.cv-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,183,235,.35); }

/* SECTIONS GÉNÉRALES */
.theme-section{ opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s; }
.theme-section.visible{ opacity:1; transform:translateY(0); }

.section-title{
  font-size:clamp(1.8rem,4.5vw,2.6rem); color:var(--cyan); text-align:center; margin:36px 0 24px;
  text-shadow:0 0 10px rgba(0,183,235,.5);
  border-bottom:2px solid var(--red); display:inline-block; padding-bottom:8px;
}

/* TIMELINE */
.timeline{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; }
.timeline-item{
  background:rgba(26,26,26,.9); border-left:4px solid var(--cyan); border-radius:10px; padding:16px; width:min(360px,90vw);
  transition:.2s; box-shadow:0 0 14px rgba(0,183,235,.2);
}
.timeline-item:hover{ transform:translateX(8px); box-shadow:0 0 20px rgba(0,183,235,.35); }
.timeline-item h3{ margin:0 0 8px; color:var(--red); font-size:1.1rem; }
.timeline-item p{ margin:0; }

/* OUTILS */
.outils{ padding:56px 20px; max-width:1400px; margin:0 auto; }
.competence-items{
  display:grid; grid-template-columns:repeat(6,1fr); gap:24px; padding:14px;
}
.competence-item{
  position:relative; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(26,26,26,.6); border-radius:12px; transition:.25s;
}
.competence-item:hover{ transform:scale(1.1); background:rgba(0,183,235,.18); box-shadow:0 0 18px rgba(0,183,235,.35); z-index:2; }
.competence-item img{ width:90px; height:90px; object-fit:contain; filter:grayscale(20%) brightness(1.06); transition:.25s; }
.competence-item:hover img{ filter:grayscale(0%) brightness(1.2); transform:rotate(4deg); }
.competence-item::after{
  content:attr(data-tooltip); position:absolute; bottom:-42px; left:50%; transform:translateX(-50%);
  background:rgba(15,15,15,.95); color:var(--cyan); padding:6px 10px; border-radius:8px; font-weight:700;
  opacity:0; transition:.25s; white-space:nowrap; pointer-events:none; font-size:.95rem;
  text-shadow:0 0 6px rgba(0,183,235,.7);
}
.competence-item:hover::after{ opacity:1; bottom:-48px; }

/* ATTESTATIONS & CERTIFS */
.attestations{ padding:56px 20px; max-width:1300px; margin:0 auto; }
.attestation-container ul, .certification-container ul{
  list-style:none; display:flex; gap:22px; flex-wrap:wrap; justify-content:center; padding:0;
}
.attestation-container li, .certification-container li{
  background:rgba(26,26,26,.9); border:2px solid var(--cyan); border-radius:12px; padding:14px;
  transition:.25s; box-shadow:0 0 14px rgba(0,183,235,.2);
}
.attestation-container li:hover, .certification-container li:hover{ transform:scale(1.05); box-shadow:0 0 20px rgba(0,183,235,.35); }
.attestation-container img{ width:120px; height:120px; object-fit:contain; }

.certification-item h3{ margin:0 0 6px; color:var(--red); }
.certification-item p{ margin:0; }

/* FOOTER */
.footer{
  background:rgba(26,26,26,.9); text-align:center; padding:36px 20px; border-top:2px solid var(--cyan);
  backdrop-filter:blur(8px); margin-top:30px;
}
.footer-links img{ width:50px; height:50px; object-fit:contain; margin:0 10px; transition:.25s; }
.footer-links a:hover img{ transform:scale(1.12); filter:brightness(1.25); }
.legal-links{ margin-top:14px; }
.legal-links a{ color:var(--txt); text-decoration:none; margin:0 10px; transition:.25s; }
.legal-links a:hover{ color:var(--cyan); }
.footer p{ margin-top:14px; color:var(--txt); }

/* ANIM apparition textes dynamiques (gérée via JS en ajoutant .reveal) */
.text-part.reveal{ animation: fadeUp .6s ease forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* RESPONSIVE */
@media (max-width:1024px){
  .presentation-frame{ flex-direction:column; }
  .intro-text{ max-width:100%; text-align:center; }
  .image-container{ order:-1; }
  .competence-items{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:860px){
  .menu{ justify-content:space-between; padding:12px 14px; }
  .menu_bouton{ display:flex; }
  .menu_links{ display:none; flex-direction:column; width:100%; gap:0; margin-top:12px; }
  .menu_links a{ display:block; padding:12px; border-top:1px solid rgba(255,255,255,.06); border-radius:0; }
  .menu.menu_open .menu_links{ display:flex; }
}
@media (max-width:560px){
  .competence-items{ grid-template-columns:repeat(3,1fr); }
  .photo{ width:200px; height:200px; }
}
@media (max-width:420px){
  .competence-items{ grid-template-columns:repeat(2,1fr); }
  .photo{ width:170px; height:170px; }
}