* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ── HEADER ── */
    header {
      background-color: #2c3e50;
      color: #fff;
      padding: 20px 0;
    }

    header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.8rem;
    }

    header p {
      font-size: 1rem;
      color: #bdc3c7;
      margin-top: 4px;
    }

    /* ── NAVIGATION ── */
    nav {
      background-color: #34495e;
      padding: 12px 0;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;
    }

    nav ul li a {
      color: #ecf0f1;
      text-decoration: none;
      font-size: 0.95rem;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background-color 0.2s;
    }

    nav ul li a:hover {
      background-color: #2c3e50;
    }

    /* ── MAIN ── */
    main {
      padding: 30px 0;
    }

    section {
      background-color: #fff;
      border-radius: 6px;
      padding: 30px;
      margin-bottom: 30px;
    }

    section h2 {
      font-size: 1.5rem;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      padding-bottom: 8px;
      margin-bottom: 20px;
    }

    section h3 {
      font-size: 1.1rem;
      color: #34495e;
      margin-bottom: 10px;
    }

    /* ── SECTION À PROPOS ── */
    .apropos-contenu {
      display: flex;
      gap: 25px;
      align-items: flex-start;
    }

    .apropos-contenu img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #3498db;
      flex-shrink: 0;
    }

    .apropos-contenu p {
      margin-bottom: 10px;
    }

    /* ── SECTION COMPÉTENCES ── */
    .competences-grille {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
    }

    .groupe-competences {
      flex: 1;
      min-width: 200px;
    }

    .groupe-competences ul {
      list-style: disc;
      padding-left: 20px;
    }

    .groupe-competences ul li {
      margin-bottom: 5px;
    }

    .outils ol {
      padding-left: 20px;
    }

    .outils ol li {
      margin-bottom: 5px;
    }

    /* ── TABLEAU ── */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
    }

    caption {
      font-size: 0.85rem;
      color: #777;
      text-align: left;
      padding-bottom: 8px;
      font-style: italic;
    }

    thead {
      background-color: #2c3e50;
      color: #fff;
    }

    thead th {
      padding: 10px 12px;
      text-align: left;
      font-weight: bold;
    }

    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tbody tr:hover {
      background-color: #eaf4fb;
    }

    tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #ddd;
      vertical-align: top;
    }

    tfoot td {
      padding: 8px 12px;
      font-size: 0.82rem;
      color: #777;
      font-style: italic;
      border-top: 2px solid #ddd;
    }

    .badge {
      display: inline-block;
      font-size: 0.72rem;
      padding: 2px 8px;
      border-radius: 20px;
      color: #fff;
      font-weight: bold;
    }
    .badge-formation  { background-color: #27ae60; }
    .badge-experience { background-color: #e67e22; }

    /* ── RÉSEAUX SOCIAUX ── */
    .reseaux-liste {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .reseaux-liste li a {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 4px;
      color: #fff;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: bold;
      transition: opacity 0.2s;
    }

    .reseaux-liste li a:hover {
      opacity: 0.85;
    }

    .lien-linkedin  { background-color: #0077b5; }
    .lien-github    { background-color: #24292e; }
    .lien-twitter   { background-color: #1da1f2; }
    .lien-portfolio { background-color: #8e44ad; }

    /* ── FOOTER ── */
    footer {
      background-color: #2c3e50;
      color: #bdc3c7;
      text-align: center;
      padding: 20px;
      font-size: 0.85rem;
    }

    footer a {
      color: #3498db;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }