:root {
  --bg: #080a0c;
  --panel: #0c0f12;

  --text: #e5e7eb;
  --muted: #9ca3af;

  --green: #78d64b;
  --blue: #5577ff;
  --red: #ef4444;
  --yellow: #facc15;

  --border: #d1d5db;

  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;

  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

/* =====================================================
        GLOBAL
         ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: inherit;
}

/* =====================================================
        PAGE
        ===================================================== */

.cv {
  width: min(1180px, calc(100% - 40px));

  margin: 40px auto;

  display: grid;

  grid-template-columns: 310px minmax(0, 1fr);

  gap: 32px;
}

/* =====================================================
        COLONNE GAUCHE
        ===================================================== */

.sidebar {
  border: 1px solid var(--border);

  padding: 24px;

  min-width: 0;
}

/* fenêtre terminal */

.terminal-lights {
  display: flex;
  gap: 9px;

  margin: -24px -24px 22px;
  padding: 15px 18px;

  border-bottom: 1px solid var(--border);
}

.terminal-light {
  width: 16px;
  height: 16px;

  border-radius: 50%;
}

.light-red {
  background: #ff4545;
}

.light-yellow {
  background: #ffd84a;
}

.light-green {
  background: #65db59;
}

/* identité */

.identity-role {
  margin: 0 0 14px;

  color: var(--green);

  font-weight: 700;
}

.identity-role::before {
  content: "< ";
}

.identity-role::after {
  content: " />";
}

.identity-name {
  margin: 0 0 22px;

  font-size: 2rem;
  line-height: 1.1;

  font-weight: 500;
}

.identity-name::before {
  content: "> ";

  color: var(--text);
}

.identity-name span {
  display: block;
  padding-left: 27px;
}

.identity-lastname::after {
  content: "_";
}

/* contact */

.contact-box {
  margin-bottom: 28px;
  padding: 13px;

  border: 1px solid var(--border);
}

.contact-line {
  display: grid;

  grid-template-columns: 20px 1fr;

  gap: 7px;

  color: #d1d5db;

  font-size: 0.78rem;
}

.contact-line + .contact-line {
  margin-top: 8px;
}

.contact-line a {
  overflow-wrap: anywhere;
  text-decoration: none;
}

.contact-line a:hover {
  color: var(--green);
}

/* sections sidebar */

.sidebar-section + .sidebar-section {
  margin-top: 28px;
}

.section-heading {
  margin: 0 0 12px;

  color: var(--green);

  font-size: 0.95rem;
  font-weight: 700;
}

.section-heading::before {
  content: "//";
}

/* catégories compétences */

.skill-category + .skill-category {
  margin-top: 17px;
}

.skill-category h3 {
  margin: 0 0 5px;

  color: var(--blue);

  font-size: 0.85rem;
}

.skill-category h3::before {
  content: "<";
}

.skill-category h3::after {
  content: ">";
}

.skill-list {
  margin: 0;
  padding: 0;

  list-style: none;

  color: #d1d5db;

  font-size: 0.78rem;
}

.skill-list li::before {
  content: "> ";

  color: var(--muted);
}

/* formations */

.education + .education {
  margin-top: 20px;
}

.education-date {
  display: block;

  color: var(--blue);

  font-weight: 700;
}

.education-title {
  display: block;

  margin-top: 4px;

  color: var(--text);
}

.education-school {
  display: block;

  margin-top: 3px;

  color: var(--red);
  font-weight: 700;
}

/* =====================================================
        CONTENU PRINCIPAL
        ===================================================== */

.content {
  min-width: 0;
}

/* =====================================================
        HEADER / PROFIL
        ===================================================== */

.profile-header {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 108px;

  gap: 25px;

  align-items: start;

  margin-bottom: 32px;
}

.profile-photo {
  width: 108px;
  height: 108px;

  padding: 4px;

  border: 1px solid var(--border);

  justify-self: end;
}

.profile-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* statut */

.cv-status {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

  color: var(--muted);

  font-size: 0.75rem;
}

.cv-status::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;
}

.cv-status.is-available::before {
  background: var(--success);

  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}

.cv-status.is-unavailable::before {
  background: var(--danger);

  box-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
}

.cv-status.is-unknown::before {
  background: var(--warning);
}

/* présentation */

.about-title {
  margin: 0 0 9px;

  color: var(--green);

  font-size: 1rem;
}

.about-title::before {
  content: "//";
}

.about-wrapper::before {
  content: "<p>";

  display: block;

  margin-bottom: 5px;

  color: var(--blue);
}

.about-wrapper::after {
  content: "</p>";

  display: block;

  margin-top: 5px;

  color: var(--blue);
}

.about-wrapper p {
  margin: 0;

  max-width: 700px;

  color: #d1d5db;
}

/* =====================================================
        SECTIONS PRINCIPALES
        ===================================================== */

.content-section {
  margin-top: 31px;
}

.content-title {
  margin: 0 0 19px;

  color: var(--green);

  font-size: 1rem;
}

.content-title::before {
  content: "//";
}

/* =====================================================
        EXPERIENCE
        ===================================================== */

.experience-list {
  position: relative;

  padding-left: 25px;
}

.experience-list::before {
  content: "";

  position: absolute;

  left: 4px;
  top: 8px;
  bottom: 10px;

  border-left: 1px dashed var(--muted);
}

.experience {
  position: relative;
}

.experience + .experience {
  margin-top: 27px;
}

.experience::before {
  content: "◇";

  position: absolute;

  left: -27px;
  top: 1px;

  color: var(--text);
}

.experience-header {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 4px;
}

.experience-title {
  margin: 0;

  color: var(--green);

  font-size: 0.95rem;
}

.experience-title::before {
  content: "< ";
}

.experience-title::after {
  content: " />";
}

.experience-date {
  flex-shrink: 0;

  color: #d1d5db;

  font-size: 0.75rem;
}

.experience-company {
  margin-bottom: 10px;

  color: var(--blue);

  font-weight: 700;
}

.experience-company::before {
  content: "@ ";
}

/* missions */

.missions-title {
  margin-bottom: 5px;

  color: var(--blue);

  font-weight: 700;
}

.missions-title::before {
  content: ">_";
}

.missions {
  margin: 0;

  padding-left: 23px;

  color: #d1d5db;

  font-size: 0.8rem;
}

.missions li + li {
  margin-top: 3px;
}

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

.projects-list {
  border: 1px solid var(--border);
}

.project-item {
  padding: 16px 18px;
}

.project-item + .project-item {
  border-top: 1px dashed rgba(209, 213, 219, 0.35);
}

.project-header {
  display: flex;

  align-items: baseline;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 7px;
}

.project-title {
  margin: 0;

  color: var(--green);

  font-size: 0.9rem;
}

.project-title::before {
  content: "< ";
}

.project-title::after {
  content: " />";
}

.project-type {
  flex-shrink: 0;

  color: var(--blue);

  font-size: 0.7rem;
}

.project-type::before {
  content: "[";
}

.project-type::after {
  content: "]";
}

.project-description {
  margin: 0;

  max-width: 700px;

  color: #d1d5db;

  font-size: 0.78rem;
  line-height: 1.45;
}

/* STACK */

.project-stack {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;
}

.project-stack span {
  padding: 2px 6px;

  border: 1px solid rgba(85, 119, 255, 0.35);

  color: #aab9ff;

  font-size: 0.66rem;
}

.project-stack span::before {
  content: "#";
}

/* ET PLUS */

.projects-more {
  display: inline-block;

  margin: 0 18px 14px;

  color: var(--muted);

  font-size: 0.75rem;

  text-decoration: none;
}

.projects-more::before {
  content: "> ";
  color: var(--green);
}

.projects-more:hover {
  color: var(--green);
}

/* =====================================================
        PORTFOLIO
        ===================================================== */

.portfolio-box {
  border: 1px solid var(--border);

  padding: 17px;

  color: #d1d5db;
}

.portfolio-box p {
  margin: 0 0 6px;
}

.portfolio-box a {
  color: var(--red);

  font-weight: 700;

  text-decoration: none;
}

.portfolio-box a::before {
  content: "> ";
}

/* =====================================================
        DOWNLOAD
        ===================================================== */

.cv-actions {
  width: min(1180px, calc(100% - 40px));

  margin: 20px auto 0;

  display: flex;

  justify-content: flex-end;
}

.cv-download {
  padding: 10px 15px;

  border: 1px solid var(--green);

  background: transparent;

  color: var(--green);

  font-family: var(--mono);

  cursor: pointer;
}

.cv-download:hover {
  background: rgba(120, 214, 75, 0.08);
}

/* =====================================================
        RESPONSIVE
        ===================================================== */

@media (max-width: 850px) {
  .cv {
    grid-template-columns: 1fr;
  }

  .profile-header {
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .profile-photo {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 520px) {
  .cv {
    width: calc(100% - 20px);

    margin-top: 10px;
  }

  .sidebar {
    padding: 18px;
  }

  .terminal-lights {
    margin: -18px -18px 20px;
  }

  .profile-header {
    grid-template-columns: 1fr;
  }

  .profile-photo {
    grid-row: 1;

    justify-self: start;
  }

  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .experience-header {
    flex-direction: column;

    gap: 3px;
  }
}

/* =====================================================
   IMPRESSION / CV PDF - A4
   ===================================================== */

@page {
  size: A4 portrait;
  margin: 6mm;
}

@media print {
  /* =====================================================
       BASE
       ===================================================== */

  * {
    box-shadow: none !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html,
  body {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111418 !important;
    color: var(--text) !important;
  }

  body {
    font-size: 11px !important;
    line-height: 1.48 !important;
  }

  .cv-actions,
  .cv-download {
    display: none !important;
  }

  /* =====================================================
       STRUCTURE GÉNÉRALE
       ===================================================== */

  .cv {
    display: grid !important;

    grid-template-columns:
      61mm
      minmax(0, 1fr) !important;

    gap: 7mm !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .content {
    min-width: 0 !important;
  }

  /* =====================================================
       SIDEBAR
       ===================================================== */

  .sidebar {
    width: auto !important;
    min-width: 0 !important;

    padding: 5.5mm !important;

    background: #0c0f12 !important;

    border: 1px solid #bfc5cc !important;
  }

  /* =====================================================
       TERMINAL
       ===================================================== */

  .terminal-lights {
    display: flex !important;

    gap: 1.7mm !important;

    margin: -5.5mm -5.5mm 6mm !important;

    padding: 3.2mm 4mm !important;

    border-bottom: 1px solid #bfc5cc !important;
  }

  .terminal-light {
    width: 3.5mm !important;
    height: 3.5mm !important;
  }

  /* =====================================================
       IDENTITÉ
       ===================================================== */

  .identity-role {
    margin: 0 0 4.2mm !important;

    font-size: 9.7px !important;
    line-height: 1.42 !important;
  }

  .identity-name {
    margin: 0 0 5.8mm !important;

    font-size: 21.5px !important;
    line-height: 1.08 !important;
  }

  .identity-name span {
    padding-left: 4mm !important;
  }

  /* =====================================================
       CONTACT
       ===================================================== */

  .contact-box {
    margin-bottom: 6mm !important;

    padding: 3.2mm !important;

    border-color: #bfc5cc !important;
  }

  .contact-line {
    display: grid !important;

    grid-template-columns:
      3.5mm
      minmax(0, 1fr) !important;

    gap: 1.3mm !important;

    font-size: 8.5px !important;
    line-height: 1.42 !important;
  }

  .contact-line + .contact-line {
    margin-top: 2mm !important;
  }

  .contact-line a {
    overflow-wrap: anywhere !important;
  }

  /* =====================================================
       SECTIONS SIDEBAR
       ===================================================== */

  .sidebar-section + .sidebar-section {
    margin-top: 6mm !important;
  }

  .section-heading {
    margin: 0 0 3.2mm !important;

    font-size: 10px !important;
  }

  /* =====================================================
       COMPÉTENCES
       ===================================================== */

  .skill-category + .skill-category {
    margin-top: 3.8mm !important;
  }

  .skill-category h3 {
    margin: 0 0 1.2mm !important;

    font-size: 8.9px !important;
  }

  .skill-list {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 8.5px !important;
    line-height: 1.5 !important;
  }

  /* =====================================================
       FORMATION
       ===================================================== */

  .education + .education {
    margin-top: 5mm !important;
  }

  .education-date {
    font-size: 8.9px !important;
  }

  .education-title {
    margin-top: 1.2mm !important;

    font-size: 8.8px !important;
    line-height: 1.42 !important;
  }

  .education-school {
    margin-top: 1mm !important;

    font-size: 8.4px !important;
  }

  /* =====================================================
       HEADER PROFIL
       ===================================================== */

  .profile-header {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      30mm !important;

    grid-template-rows: auto !important;

    gap: 5mm !important;

    align-items: start !important;

    margin-bottom: 8mm !important;
  }

  .profile-header > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;

    min-width: 0 !important;
  }

  /* =====================================================
       PHOTO
       ===================================================== */

  .profile-photo {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 30mm !important;
    height: 30mm !important;

    justify-self: end !important;
    align-self: start !important;

    padding: 0.7mm !important;

    border: 1px solid #bfc5cc !important;
  }

  .profile-photo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
  }

  /* =====================================================
       STATUT
       ===================================================== */

  .cv-status {
    display: inline-flex !important;

    align-items: center !important;

    gap: 1.3mm !important;

    margin-bottom: 2.4mm !important;

    font-size: 8.3px !important;
  }

  .cv-status::before {
    width: 1.8mm !important;
    height: 1.8mm !important;
  }

  /* =====================================================
       À PROPOS
       ===================================================== */

  .about-title {
    margin: 0 0 2.5mm !important;

    font-size: 10.8px !important;
  }

  .about-wrapper::before,
  .about-wrapper::after {
    margin: 1mm 0 !important;

    font-size: 8.5px !important;
  }

  .about-wrapper p {
    max-width: none !important;

    margin: 0 !important;

    font-size: 9.3px !important;
    line-height: 1.52 !important;
  }

  /* =====================================================
       SECTIONS PRINCIPALES
       ===================================================== */

  .content-section {
    margin-top: 7mm !important;
  }

  .content-title {
    margin: 0 0 4mm !important;

    font-size: 10.8px !important;
  }

  /* =====================================================
       EXPÉRIENCES
       ===================================================== */

  .experience-list {
    position: relative !important;

    padding-left: 5mm !important;
  }

  .experience-list::before {
    left: 0.8mm !important;

    top: 1.5mm !important;
    bottom: 1.5mm !important;
  }

  .experience {
    position: relative !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .experience + .experience {
    margin-top: 5.8mm !important;
  }

  .experience::before {
    left: -5.4mm !important;
    top: 0.2mm !important;
  }

  .experience-header {
    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;
    align-items: baseline !important;

    gap: 3mm !important;

    margin-bottom: 1mm !important;
  }

  .experience-title {
    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1.32 !important;
  }

  .experience-date {
    flex-shrink: 0 !important;

    font-size: 8px !important;
  }

  .experience-company {
    margin-bottom: 2mm !important;

    font-size: 8.8px !important;
  }

  .missions-title {
    margin-bottom: 1.2mm !important;

    font-size: 8.7px !important;
  }

  .missions {
    margin: 0 !important;

    padding-left: 3.5mm !important;

    font-size: 8.8px !important;
    line-height: 1.48 !important;
  }

  .missions li + li {
    margin-top: 0.75mm !important;
  }

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

  .projects-list {
    border: 1px solid #bfc5cc !important;
  }

  .project-item {
    padding: 3.8mm 4mm !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .project-item + .project-item {
    border-top: 1px dashed rgba(209, 213, 219, 0.45) !important;
  }

  .project-header {
    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;
    align-items: baseline !important;

    gap: 2.5mm !important;

    margin-bottom: 1.7mm !important;
  }

  .project-title {
    margin: 0 !important;

    font-size: 9.3px !important;
  }

  .project-type {
    flex-shrink: 0 !important;

    font-size: 7.8px !important;
  }

  .project-description {
    margin: 0 !important;

    max-width: none !important;

    font-size: 8.6px !important;
    line-height: 1.48 !important;
  }

  .project-stack {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 1.5mm !important;

    margin-top: 2.4mm !important;
  }

  .project-stack span {
    padding: 0.7mm 1.4mm !important;

    font-size: 7.5px !important;
  }

  .projects-more {
    display: inline-block !important;

    margin: 0.8mm 4mm 3.5mm !important;

    font-size: 8px !important;
  }

  /* =====================================================
       PORTFOLIO
       ===================================================== */

  .portfolio-box {
    padding: 4.3mm 4.5mm !important;

    border: 1px solid #bfc5cc !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .portfolio-box p {
    margin: 0 0 1.8mm !important;

    font-size: 8.8px !important;
    line-height: 1.48 !important;
  }

  .portfolio-box a {
    font-size: 8.5px !important;
  }

  /* =====================================================
       LIENS
       ===================================================== */

  a {
    text-decoration: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  /* =====================================================
   NETTOYAGE ATS
   Les décorations terminal restent visibles à l'écran,
   mais ne sont pas imprimées dans le PDF.
   ===================================================== */

  .identity-lastname::after {
    content: none !important;
  }
}