:root {
  --couleurFond: #2f2e33;
  --couleurEcriture: #ffffff;
  --couleurCoteGauche: #3a5199;
  --couleurCapacite: #d5d6d2;
  --couleurBordure: #000000;
  --accent: #6fa8ff;
  --muted: #bfc4d6;
  --muted-2: #9ea6c0;
  --muted-dark: rgba(0,0,0,0.35);
  --max-width: 1100px;
  --gap: 1.5rem;
  --radius: 8px;
  --sidebar-width: 270px;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --transition-fast: 160ms;
  --transition-medium: 260ms;
  --card-elevation: 0 8px 20px rgba(0,0,0,0.28);
  --btn-bg: linear-gradient(180deg, #5f8cf8 0%, #4b6fe0 100%);
  --btn-outline-border: rgba(255,255,255,0.12);
  --btn-radius: 10px;
  --alignementcorp: 25%;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition-medium: 0ms; }
}

@media screen {
  #print-only-content {
    display: none !important;
  }
}

/* Global body & layout */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--couleurFond);
  color: var(--couleurEcriture);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Constrain page width and center content (preserve original document flow) */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;

  /* container for absolutely-positioned sidebar */
  position: relative;
}

/* Wrapper behaviour */
#corps, #coteGauche, #experiences {
  box-sizing: border-box;
}

/* Hide print-only images on screen (these are used only for print) */
.print { display: none !important; }

/* Defensive: hide any images accidentally placed inside competence boxes (use background color instead) */
.competence img { display: none !important; }

/* Sidebar float layout to preserve original flow without changing HTML */
#coteGauche {
  float: left;
  width: var(--alignementcorp);
  background-color: var(--couleurCoteGauche);
  margin-right: 2em;
  padding: 1rem;
  position: static;
  border-radius: var(--radius);
}


/* Place the sidebar and main content using their IDs.
   Use absolute positioning so the sidebar sits at the left of the page
   independent of DOM order (original layout relied on absolute sidebar). */
#coteGauche {
  /* keep visual styling */
  background-color: linear-gradient(180deg, var(--couleurCoteGauche) 0%, #2f3a9f 100%);
  background-color: var(--couleurCoteGauche);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);

  /* position as absolute sidebar to allow experiences to align horizontally */
  position: absolute;
  top: auto;
  left: 0;
  width: var(--alignementcorp);
  height: auto;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Header positioning - spans full width at top */
#corps {
  width: 100%;
  margin: 0 0 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(58,81,153,0.1) 0%, rgba(0,0,0,0.05) 100%);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  float: none;
  clear: both;
}

/* Main content positioning - flows to the right of the sidebar */
#experiences {
  margin-left: calc(var(--alignementcorp) + 2em); 
  width: calc(100% - var(--alignementcorp) - 2em);
  padding-top: 0;
  box-sizing: border-box;
  display: block;
  position: relative;
  min-height: 600px; /* ensure enough height for sidebar */
}

/* Headings and typographic hierarchy */
h1 {
  font-size: 2rem;
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.5px;
  line-height: 1.05;
}

/* Ensure anchors land below sticky elements */
h1, h2, h3 {
  scroll-margin-top: 5.5rem;
}

#identite_nom {
  font-weight: 700;
  color: #ffffff;
}

h2 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem 0;
  color: var(--muted);
  font-weight: 500;
}

/* Section headings in the sidebar */
#competences h3,
#formations h3,
.titre_section {
  font-size: 1.05rem;
  margin: 0 0 0.5rem 0;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-style: italic;
  color: #fff;
  background: rgba(255,255,255,0.03);
}


/* Competences list improvements */
.libComptence {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 20px;
  max-width: calc(100% - 6.5em);
  margin-right: 0.3rem;
  font-size: var(--text-sm);
  color: #ffffff;
}

/* Arrange label on the left and competence boxes on the right */
.eval {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 0.45em;
}

/* competence boxes keep fixed size and sit to the right of the label */
.competence {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.15rem;
  border: solid 1px var(--couleurBordure);
  border-radius: 3px;
  background: transparent;
  transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  box-shadow: none;
  float:right;
}

/* hovered competence emphasises slightly for micro-interaction */
.competence:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* highlighted filled capacity */
.capacite {
  background-color: var(--couleurCapacite);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
}

/* Make competence bars responsive: group them for small screens */
ul.items {
  margin: 0;
  margin-left: -5rem;
}

/* Formations styling */
.formation {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  font-size: var(--text-sm);
}

.formation .libelle { color: #fff; }
.formation .date { color: var(--muted); font-weight: 600; }

/* Experiences / client / contrat */
.client-section {
  margin-bottom: 1.25rem;
  padding: 0.75rem 0;
}

/* Introduce a card-like header for clients for modern look */
.client-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.02));
}

/* Logo styling with hover highlight */
.client-header .logo {
  float: none;  
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.client-header .logo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
}

/* Contract header and mission list spacing */
.contrat {
  padding: 0.6rem 0;
  border-left: 3px solid rgba(255,255,255,0.03);
  margin-left: 0.25rem;
}

.contrat-header .titre {
  font-size: 1.05rem;
  margin: 0;
  color: var(--accent);
  font-style: italic;
}

/* Emphasize periode with subtle pill style */
.periode {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0.25rem 0;
  background: rgba(255,255,255,0.02);
  padding: 0.18rem 0.4rem;
  border-radius: 6px;
  display: inline-block;
}

/* Contract detail readability */
.detail {
  color: #fff;
  font-size: var(--text-sm);
  margin: 0.2rem 0 0.4rem 0;
}

/* Missions and technos */
/* Give missions a subtle card look with hover */
.missions-section h4 {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: var(--muted);
}

.mission {
  margin-bottom: 0.6rem;
  padding: 0.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 10px;
  transition: transform var(--transition-medium) ease, box-shadow var(--transition-medium) ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.mission:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-elevation);
}

.details_mission, .technos {
  padding: 0.5rem;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  margin-top: 0.5rem;
}

/* stylise techno badges slightly */
.techno {
  font-size: var(--text-sm);
  color: var(--muted);
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.22rem 0.38rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.02);
}

/* Logos responsiveness */
.experience > .logo,
.experience .logo,
.client-section .logo,
.client-header .logo,
.contrat .logo {
  max-width: 160px;
  max-height: 90px;
}

/* Print helpers: show print images and simplify colors */
@media print {
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.3;
  }
  .print { display: inline-block !important; }
  #coteGauche {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  .client-header .logo { box-shadow: none !important; }
  /* Reduce heavy visual effects for print */
  .mission, .client-header, #coteGauche {
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Ensure content flows as single column */
  body > *:not(.no-layout) {
    grid-template-columns: 1fr !important;
  }
}

/* Small screens: single column, sidebar collapses above main */
@media (max-width: 900px) {
  /* Switch to single-column flow on small screens */
  body > *:not(.no-layout) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main";
  }

  #coteGauche {
    position: relative;
    top: auto;
    float: none;
    width: 100%;
    max-width: 100%;
    order: -1;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
  }

  .client-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-header .logo {
    margin-left: 0;
    margin-top: 0.5rem;
    max-width: 120px;
    max-height: 60px;
  }

  .competence, .capacite {
    width: 0.95em;
    height: 0.95em;
  }

  /* On small screens reduce heading size */
  h1 { font-size: 1.6rem; }

  /* Reset main area margin so content uses full width on mobile */
  #corps {
    margin-left: 0;
    width: 100%;
    float: none;
    margin-bottom: 1.5rem;
  }
  
  #experiences {
    margin-left: 0;
    width: 100%;
    float: none;
  }
}

/* Very small screens: tighten spacing */
@media (max-width: 420px) {
  body {
    padding: 1rem 0.6rem;
  }
  #coteGauche { padding: 0.6rem; }
  .formation { font-size: 0.95rem; }
}

/* Focus & accessibility */
a:focus, button:focus, .mission:focus {
  outline: 3px solid rgba(111,168,255,0.28);
  outline-offset: 2px;
  box-shadow: 0 6px 18px rgba(111,168,255,0.06);
}

/* Use focus-visible for keyboard users and provide a clear visible outline */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid rgba(111,168,255,0.32);
  outline-offset: 3px;
  box-shadow: 0 8px 20px rgba(111,168,255,0.06);
}

/* fallback for browsers without :focus-visible */
@supports not(selector(:focus-visible)) {
  a:focus, button:focus, .mission:focus {
    outline: 3px solid rgba(111,168,255,0.32);
    outline-offset: 3px;
  }
}

/* Ensure interactive elements are large enough on touch devices */
.btn, .submit-btn, .menu-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}

/* Increase default line-height for readability on small fonts */
body, p, li {
  line-height: 1.5;
}

/* Improve contrast when user requests higher contrast */
@media (prefers-contrast: more) {
  body { color: #f7f9ff; background-color: #1f1f2a; }
  #coteGauche { background-color: #2a2b5b; }
  .mission { background: rgba(255,255,255,0.03); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
  .techno { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.12); color: #e9eefc; }
  .detail, .periode { color: #e6e9f2; }
}

/* subtle link color for accent elements */
a, .client-name {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}
a:hover, .client-name:hover { color: #95c6ff; }

/* Button / CTA styling (Phase 3 UX) */
/* Scope: general buttons used across the site; tailored visual for CV/CTA prominence */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--btn-outline-border);
  background: transparent;
  color: #fff;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-fast) ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px); }

/* Primary filled button */
.btn-primary {
  background: var(--btn-bg);
  border: none;
  box-shadow: 0 6px 18px rgba(47,64,170,0.18);
}
.btn-primary:hover { transform: translateY(-3px); }

/* Outline button (useful for "Télécharger mon CV") */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}

/* Large size */
.btn-lg { padding: 0.7rem 1.05rem; font-size: 1rem; }

/* Add an icon-like visual for download links that point to cv.html */
a[href$="/cv.html"].btn, a[href$="/cv.html"].btn-outline, a[href$="/cv.html"].btn-primary {
  box-shadow: 0 8px 26px rgba(53,86,160,0.12);
  border-radius: 12px;
}

/* Add a small pseudo-element to suggest download for relevant links */
a[href$="/cv.html"].btn::after,
a[href$="/cv.html"].btn-outline::after,
a[href$="/cv.html"].btn-primary::after {
  content: "⤓";
  font-size: 0.95rem;
  opacity: 0.9;
  margin-left: 0.35rem;
}

/* Table of content / anchor highlighting (visual feedback when an anchor is targeted) */
:target {
  box-shadow: 0 8px 26px rgba(111,168,255,0.06);
  border-radius: 6px;
  padding: 0.15rem;
  transition: box-shadow var(--transition-medium) ease, background var(--transition-medium) ease;
}

/* When the heading is hovered, highlight the small marker */
.titre_section:hover::after,
.client-header > h2:hover::after,
.contrat-header .titre:hover::after {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

/* Provide better visible focus for interactive CTA elements */
.btn:focus {
  outline: 3px solid rgba(111,168,255,0.22);
  outline-offset: 3px;
  box-shadow: 0 8px 24px rgba(111,168,255,0.06);
}

/* Contact quick access (if a .menu-item or .btn points to /contact.html) */
a[href$="/contact.html"].btn,
a[href$="/contact.html"].menu-item {
  border-bottom: 2px solid rgba(255,255,255,0.04);
  padding-bottom: 0.18rem;
}

/* Micro-copy / hint under primary CTAs on small screens */
@media (max-width: 640px) {
  .btn-primary::after,
  .btn-outline::after { display: none; }
  .btn { width: 100%; justify-content: center; }
  a[href$="/cv.html"].btn { box-shadow: none; }
}

/* Utility */
hr {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}


/* Small visual polish */
.titre{ font-size: 1.15em; font-style: oblique; color: var(--accent); }
.societe{ font-size: 1.4em; font-weight: 700; color: #fff; }
.details_mission, .technos { font-size: var(--text-sm); color: var(--muted); }

/* Performance: prefer transform/opacity for animations and avoid heavy repaint causing properties */
/* Reduce default shadow intensity to improve render times on low-end devices */
.mission, .client-header, #coteGauche {
  will-change: transform, opacity;
  /* prefer subtle shadows by default; heavy shadows only on :hover */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mission:hover { box-shadow: var(--card-elevation); }

/* Image responsiveness & layout stability (prevent layout shift) */
img {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
}

/* Provide utility classes for slightly larger text (useful for accessibility) */
.text-lg { font-size: 1.125rem; line-height: 1.5; }
.text-sm { font-size: 0.95rem; }

/* Keep print-specific file handling intact (cv_print.css will override as needed) */