/* ---------- RESET & VARIABLES ---------- */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    --primary-color: #7c3aed;          /* Violet néon */
    --primary-light: #7c3aed;          /* Variante plus claire */
    --text-color: #fff;                /* Texte blanc */
    --bg-dark: #0e0e0e;                /* Fond sombre */
    /* Réduction de l'intensité du glow néon */
    --neon-glow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color);
    --transition-speed: 0.3s;
    --max-width: 1200px;
  }
  
  /* ---------- BASE ---------- */
  body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-dark);
    overflow-x: hidden;
  }
  
    /* Désactive la sélection de texte partout */
    body, p, h1, h2, h3, h4, h5, h6, a, li {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }
  
    /* Empêche le glisser‑déposer des images */
    img {
      -webkit-user-drag: none;
      user-drag: none;
      pointer-events: none;
    }
  /* ---------- CONTAINER ---------- */
  .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  /* ---------- NAVBAR ---------- */
/* ------------ NAVBAR ------------ */
.header{
  position:fixed;
  inset:0 0 auto 0;          /* top:0; left:0; right:0 */
  height:70px;
  padding:0 1rem;            /* padding interne pour le contenu réel */
  z-index:1000;

  /* le conteneur est transparent : le fond sera porté par ::before */
  background:transparent;
}

/* fond sombre centré, largeur limitée */
.header::before{
  content:"";
  position:absolute;
  top:0;                     /* couvre toute la hauteur */
  left:50%;
  transform:translateX(-50%);
  width:min(100%, var(--max-width));  /* 100 % sur mobile, max‑width sur grand écran */
  height:100%;

  background:#0e0d0dee;           /* couleur du header */
  box-shadow:0 2px 4px rgba(0,0,0,.6);
  border-radius:0 0 10px 10px;

  z-index:-1;                /* derrière le contenu (logo, liens) */
}

  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
  }
  /* Amélioration du titre dans la navbar : police, espacement et alignement */
  .logo {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: 0.05rem;

  }
  .logo-white { color: var(--text-color);text-shadow: 0 0 4px #ffffff7e, 0 0 8px #8a8a8a, 0 0 16px #b4b4b4;
  }
  .logo-violet { color: var(--primary-color); text-shadow: 0 0 4px #7c3aedc5, 0 0 8px #7c3aedc0, 0 0 16px #7c3aedc0;
  }
  
  .main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
  }
  .nav-link {
    text-decoration: none;
    font-weight: 700;
    color: var(--text-color);
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--transition-speed);
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 0;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
  }
  .nav-link:hover::after {
    width: 100%;
  }
  
  /* ---------- HERO SECTION ---------- */
  .hero-section {
    position: relative;
    min-height: 90vh;
    padding-top: 70px; /* pour compenser la navbar */
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .bg-radial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #13111c, #090909 80%);
    z-index: -4;
  }
  
/* ---------- BUBBLES CLOUD ---------- */
.bubbles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -3;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  /* pleine couleur plus douce */
  background: var(--primary-light);
  /* effet flou pour un rendu « cloud » */
  filter: blur(1.5px);
  opacity: 0.4;
  /* animation plus lente et fluide */
  animation: cloudAnim 15s infinite ease-in-out;
}

/* tailles très petites */
.bubble:nth-child(1) { width: 12px; height: 12px; top: 15%; left: 25%; animation-duration: 14s; }
.bubble:nth-child(2) { width: 10px; height: 10px; top: 35%; left: 70%; animation-duration: 16s; }
.bubble:nth-child(3) { width: 15px; height: 15px; top: 55%; left: 10%; animation-duration: 18s; }
.bubble:nth-child(4) { width: 10px; height: 10px; top: 75%; left: 80%; animation-duration: 15s; }
.bubble:nth-child(5) { width: 8px;  height: 8px;  top: 20%; left: 80%; animation-duration: 17s; }
.bubble:nth-child(6) { width: 14px; height: 14px; top: 60%; left: 50%; animation-duration: 16s; }
.bubble:nth-child(7) { width: 11px; height: 11px; top: 85%; left: 30%; animation-duration: 15s; }

/* keyframes doux et aléatoire pour un effet nuageux */
@keyframes cloudAnim {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.4; }
  25%  { transform: translate(5px, -8px) scale(1.05); opacity: 0.3; }
  50%  { transform: translate(-5px, -16px) scale(1.1); opacity: 0.2; }
  75%  { transform: translate(5px, -24px) scale(1.05); opacity: 0.3; }
  100% { transform: translate(0, 0) scale(1);   opacity: 0.4; }
}

/* MATRIX overlay ---------------------------------------------------------- */
.matrix-overlay{
  position:absolute;inset:0;
  z-index:-3;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(var(--cols,1),1fr);
}

.matrix-overlay > div{          /* chaque colonne */
  position:relative;
  overflow:hidden;
}

.matrix-overlay > div::before{
  content:attr(data-stream);
  position:absolute; top:-100%; left:0;
  font:18px/18px monospace;
  color:#7c3aed;
  opacity:0.25;                  /* ← plus discret */
  white-space:nowrap;

  writing-mode:vertical-rl;
  text-orientation:upright;

  animation:matrix-fall var(--speed) linear infinite;
}

@keyframes matrix-fall{
  100%{ transform:translateY(200%); }
}
/* Curseur (barre verticale) */
.hero-subtitle::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  background:#fff;
  margin-left:4px;
  animation:blink 1s step-end infinite;
}

@keyframes blink{
  50%{opacity:0;}
}

/* ===== COMPÉTENCES ===== */
.skills-section{
  padding:4rem 0;
}

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.5rem;
}

.skill-card{
  background:rgba(124,58,237,.08);        /* violet léger */
  border:1px solid rgba(124,58,237,.25);
  border-radius:10px;
  padding:1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  backdrop-filter:blur(6px);
}

.skill-info{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:1.05rem;
}

.skill-icon{
  width:28px;
  height:28px;
}

.skill-percent{
  align-self:flex-end;
  font-weight:600;
  color:#cfc;
  font-size:.95rem;
}

/* mini barre de progression */
.skill-bar{
  height:6px;
  background:rgba(255,255,255,.07);
  border-radius:3px;
  overflow:hidden;
}
.skill-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#7c3aed 0%,#a855f7 100%);
  width:0%;
  transition:width .8s ease-out;
}

.skill-icon{
  font-size:28px;
  color:#7c3aed;      /* même violet que le thème */
}


  .hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 2rem 0;
  }
  .hero-left {
    flex: 1 1 500px;
  }
  .hero-right {
    flex: 1 1 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .profile-img img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    box-shadow: var(--neon-glow);
  }
  /* Sparkles autour de la photo de profil */
.profile-img {
  position: relative;
  overflow: visible;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* petit halo blanc */
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
  opacity: 0;
  animation: sparkleFade var(--sparkle-dur) ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes sparkleFade {
  0%   { transform: scale(0);   opacity: 0; }
  30%  { transform: scale(1.2); opacity: 1; }
  60%  { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(0);   opacity: 0; }
}

/* conteneur avec perspective */
.avatar-wrapper{
  width:320px;             /* ajuste selon ton PNG */
  height:320px;
  margin:0 auto;
  perspective:1000px;      /* profondeur */
}

/* l’image elle‑même */
.avatar-img{
  width:100%; height:100%;
  display:block;
  border-radius:12px;      /* si ton PNG n’est pas déjà découpé */
  transition:transform .4s ease, filter .4s ease;
  transform-style:preserve-3d;
margin-bottom: -190px;
  /* halo/lumière violet très léger */
  filter:drop-shadow(0 0 15px rgba(124,58,237,.4));
}

/* au survol on ajoute un léger zoom et une rotation 3D */
.avatar-wrapper:hover .avatar-img{
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.05);
  filter:drop-shadow(0 0 25px rgba(124,58,237,.6));
  cursor:pointer;
}

  /* Titre HERO */
  .hero-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom:1rem;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), #c4b5fd);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
  }
  .hero-title span { color: var(--primary-color); }
  @keyframes gradientShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: #ccc;
  }
  
  /* Boutons */
  .hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .btn-primary,
  .btn-secondary {
    position: relative;
    overflow: hidden;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    border: none;
  }
  .btn-primary {
    background-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: var(--neon-glow);
  }
  .btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 0 10px var(--primary-light), 0 0 15px var(--primary-light);
  }
  .btn-secondary {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
  }
  .btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 0 10px var(--primary-light);
  }
  /* Effet shine sur le bouton primaire */
  .btn-primary .shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg);
    transition: left 0.5s;
  }
  .btn-primary:hover .shine {
    left: 120%;
  }
  
  /* ---------- SECTIONS GÉNÉRALES ---------- */
  .section-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
  }
  .section-text {
    text-align: center;
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 2rem;
  }
  
  /* ---------- SECTION À PROPOS ---------- */
  .about-section {
    padding: 4rem 0;
  }
  
  /* ---------- SECTION PORTFOLIO ---------- */
  .portfolio-section {
    padding: 4rem 0;
  }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
  .project-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 6px;
    overflow: hidden;
    transition: transform var(--transition-speed);
  }
  .project-card:hover {
    transform: translateY(-5px);
  }
  .project-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .project-info {
    padding: 1rem;
  }
  .project-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
  }
  .project-desc {
    font-size: 0.95rem;
    color: #bbb;
    margin-bottom: 1rem;
  }
  
  /* ---------- SECTION CONTACT ---------- */
  .contact-section {
    padding: 4rem 0;
    text-align: center;
  }
  .contact-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  /* ---------- FOOTER ---------- */
  .footer {
    background-color: #111;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.6);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.9rem;
  }
  .footer p { color: #bbb; }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 992px) {
    .hero-content {
      flex-direction: column;
      text-align: center;
    }
    .hero-left, .hero-right { flex: 1 1 auto; }
    .hero-title { font-size: 2.5rem; }
  }
  @media (max-width: 600px) {
    .hero-title { font-size: 2rem; }
    .section-title { font-size: 2rem; }
  }
  
/* ======= PRICING ======= */
.pricing-section{padding:4rem 0}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.price-card{
  position:relative;
  padding:2.2rem 1.6rem 2.8rem;
  border-radius:14px;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.25);
  box-shadow:0 0 12px rgba(124,58,237,.15);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  transition:transform .35s ease, box-shadow .35s ease;
}
.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 18px rgba(168,85,247,.4);
}

.price-badge{
  position:absolute;
  top:-14px; left:50%; transform:translateX(-50%);
  background:#7c3aed;
  color:#fff;
  padding:.25rem 1.1rem;
  border-radius:12px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 0 8px rgba(124,58,237,.6);
}

.price-cost{
  font-size:2.4rem;
  font-weight:900;
  color:#a855f7;
  display:flex;
  align-items:flex-end;
  gap:.25rem;
}
.price-cost sup{font-size:1rem;margin-right:2px;color:#c5b8ff}
.price-cost .dec{font-size:1.2rem}   /* décimales plus petites */
.price-cost .period{
  font-size:1rem;
  font-weight:600;
  color:#ccc;
  letter-spacing:.5px;
}

/* conteneur centré */
.pay-methods{
  display:flex;
  justify-content:center;
  gap:1.4rem;
  flex-wrap:wrap;
  margin-top:2rem;
}

/* base de l’icône : taille + masque */
.pay{
  width:34px;                 /* ajuste la taille ici */
  height:34px;
  display:inline-block;
  mask:center/contain no-repeat;
  -webkit-mask:center/contain no-repeat;
  transition:transform .25s ease;
}
.pay:hover{transform:scale(1.12);}  /* petit zoom */

/* ------------ couleurs & logos ------------ */
.visa{
  background:#1A1F71; /* Visa blue */
  mask-image:       url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/visa.svg");
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/visa.svg");
}

.mc{
  background:#FF5F00; /* orange Mastercard */
  mask-image:       url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/mastercard.svg");
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/mastercard.svg");
}

.paypal{
  background:#003087;
  mask-image:       url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/paypal.svg");
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/paypal.svg");
}

.applepay{
  background:#000;  /* Apple Pay logo noir */
  mask-image:       url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applepay.svg");
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applepay.svg");
}

.bitcoin{
  background:#F7931A;
  mask-image:       url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/bitcoin.svg");
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/bitcoin.svg");
}



/* LISTE alignée pro */
.price-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  font-size:.95rem;
}

.price-list li{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.icon{
  font-size:1.05rem;
  width:1.25rem;            /* réserve l’espace – alignement parfait */
  text-align:center;
  color:#a855f7;            /* violet thème */
}

/* options non incluses */
.na{
  opacity:.45;
}
.na .icon{ color:#555; }
.na span{ text-decoration:line-through; }

.featured{
  background:rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.45);
  box-shadow:0 0 20px rgba(124,58,237,.45);
}
.featured .price-badge{background:#a855f7}

@media(max-width:480px){
  .price-card{padding:1.8rem 1.2rem}
  .price-cost{font-size:2rem}
}

.na{
  text-decoration:line-through;
  opacity:.45;
}

/* ====== CONTACT ====== */
.contact-buttons a i{
  margin-right:.4rem;
}
.phone-btn{
  position:relative;
}
.phone-btn[title]:hover::after{
  content:attr(title);
  position:absolute;
  top:110%; left:50%; transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:.3rem .6rem;
  font-size:.8rem;
  border-radius:4px;
  white-space:nowrap;
}

/* bouton burger caché en desktop */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer;
}

/* — mobile — */
@media(max-width:768px){

  .nav-toggle{ display:block; z-index:1001; }

  .main-nav{
    position:fixed;         /* sous la barre */
    top:70px; left:0; right:0;
    background:#0e0d0dee;
    overflow:hidden;        /* coupe le texte qui déborde */
    max-height:0;           /* entièrement replié */
    transition:max-height .35s ease;
    padding:0 2rem;         /* padding latéral seulement */
  }

  /* menu ouvert */
  .main-nav.open{
    max-height:230px;       /* hauteur suffisante pour 4 liens */
    padding:1.5rem 2rem;    /* remet le padding vertical */
  }

  .main-nav ul{
    flex-direction:column;
    gap:1rem;
  }
}


/* -----------------------------------------------------------------
   RESPONSIVE – complément
   (à placer tout en bas, après tes règles existantes)
------------------------------------------------------------------*/

/* 992 px ↔ 769 px  : tablette / laptop étroit ------------------- */
@media (max-width: 992px){

  /* titres + hero */
  .hero-title  { font-size:2.2rem; }
  .section-title{ font-size:2rem; }

  /* navbar : gap réduit */
  .main-nav ul{ gap:1.25rem; }

  /* skills : 2 colonnes max */
  .skills-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

  /* pricing : 2 colonnes */
  .pricing-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}

/* 768 px ↔ 481 px  : mobile large ------------------------------- */
@media (max-width: 768px){

  /* NAV – simple burger toggle
     (si tu n’as pas de script, on passe juste en colonne)        */
  .nav-container{ flex-direction:column; height:auto; padding:0.5rem 1rem; }
  .main-nav ul  { flex-direction:column; gap:.75rem; margin-top:.5rem; }
  .header{ height:auto; padding-bottom:.5rem; }
  .header::before{ border-radius:0 0 14px 14px; }

  /* hero : colonne + marges */
  .hero-content{ flex-direction:column; text-align:center; gap:1.5rem; }
  .hero-left, .hero-right{ flex:1 1 auto; }

  /* avatar + sous‑titre plus petits */
  .avatar-wrapper{ width:240px; height:auto; }
  .hero-subtitle{ font-size:.98rem; }

  /* skills, pricing : 1 colonne pleine largeur */
  .skills-grid  { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }

  /* boutons stack si manque de place */
  .hero-buttons{ flex-wrap:wrap; justify-content:center; }
}

/* ≤ 480 px : mobile compact ------------------------------------ */
@media (max-width: 480px){

  /* polices */
  .hero-title  { font-size:1.75rem; }
  .section-title{ font-size:1.65rem; }

  /* paddings plus légers */
  .container{ padding:0 .75rem; }
  .price-card{ padding:1.6rem 1rem; }

  /* tarifs : prix plus petit */
  .price-cost{ font-size:1.8rem; }
  .price-cost .period{ font-size:.85rem; }

  /* icônes paiement plus petits */
  .pay{ width:28px; height:28px; }

  /* barre nav : logo réduit */
  .logo{ font-size:1.4rem; }
}