/* ==========================================================
   BASE.CSS — Reset, Typography & Global Utilities
   ========================================================== */

/* 1. RESET & BOX SIZING */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; 
}

:root {

  /* BASE */
  --black:#000;
  --black-01:#222;
  --black-02:#141414;
  --black-03:#2b2b2b;
  --white:#FFFFFF;
  --white-01:#D4D4D4;
  --grey:#8F8F8F;
  --grey-01:#e7e7e7;
  --grey-02:#D1D1D1;
  --grey-03:#3D3D3D;

  /* ACCENT */
  --accent-color: #019efb;

  /* TEXTE */
  --text-color: var(--black-01);
  --text-color-dark: var(--white-01);

  /* SIDEBAR */
  --logo: var(--black-01);
  --logo-dark: var(--white);

  --intro-title: var(--black-01);
  --intro-title-dark: var(--white);

  --intro-sub: var(--grey);
  --intro-sub-dark: var(--grey);

  --menu-cross: var(--black-01);
  --menu-cross-dark: var(--white);

  --button-text: var(--black-01);
  --button-text-dark: var(--white);

  --button-text-active: var(--white);
  --button-text-active-dark: var(--black);

  --button-bg: var(--grey-01);
  --button-bg-dark: var(--black-03);

  --button-bg-hover: var(--grey-02);
  --button-bg-hover-dark: var(--grey-03);

  --button-bg-active: var(--black);
  --button-bg-active-dark: var(--white);


  /* FOOTER*/
  --footer: var(--grey);
  --footer-dark: var(--grey);

  /* PROJET */
  --project-cat: var(--black-01);
  --project-cat-dark: var(--grey);

  --project-title: var(--black-01);
  --project-title-dark: var(--white);

  --project-label: var(--grey);
  --project-label-dark: var(--grey);

  --project-brand-name: var(--black-01);
  --project-brand-name-dark: var(--white);

  --project-section-title: var(--black-01);
  --project-section-title-dark: var(--white);

  --project-nav: var(--grey);
  --project-nav-dark: var(--white);

  --project-nav-hover: var(--black-01);
  --project-nav-hover-dark: var(--white);

  /* ABOUT */
  --exp-header:#222;
  --exp-header-dark:#D4D4D4;

  --exp-header-active:#19a3ff;
  --exp-header-active-dark:#19a3ff;

  --header-dxo: var(--dxo-official);
  --header-ldlc: var(--ldlc-official);
  --header-remindphd: var(--remindphd-official);
  --header-spinetix: var(--spinetix-official);

  --dxo: var(--dxo-official);
  --ldlc:var(--ldlc-official);
  --remindphd:var(--remindphd-official);
  --remindphd-dark:#9fea47;
  --spinetix:var(--spinetix-official);
  --spinetix-dark: var(--accent-color);

  --dxo-official:#019efb;
  --ldlc-official:#0096c8;
  --remindphd-official:#3A008C;
  --remindphd-official-dark:#9fea47;
  --spinetix-official:#2857a4;
  
  --exp-header-hover: #f5f5f5;
  --exp-header-hover-dark: #1f1f1f;

  --exp-line: #dadada;
  --exp-line-dark: #303030;

  --exp-open-bg: #f5f5f5;
  --exp-open-bg-dark: #1d1d1d;

  --exp-plus:#cecece;
  --exp-plus-dark:#666;
  --exp-plus-active:#19a3ff;
  --exp-plus-active-dark:#0096c8;

  --exp-date:var(--accent-color);

  --exp-skill-detail-title:#19a3ff;


  --exp-skill-puce:#222;
  --exp-skill-puce-dark:#D4D4D4;

    /* CONTACT */
  --contact-bg: #f8f8f8;
  --contact-bg-dark: #242424;

  --contact-border: #d8d8d8;
  --contact-border-dark: #353535;

  --contact-button-focus: var(--accent-color);

  --contact-button-text: var(--black-01);
  --contact-button-text-dark: var(--white);
  
  --contact-button-bg: var(--grey-01);
  --contact-button-bg-dark: var(--black-03);

  --contact-button-bg-hover: var(--grey-02);
  --contact-button-bg-hover-dark: var(--grey-03);

  --contact-text: var(--black-01);
  --contact-text-dark: var(--white-01);

  --contact-placeholder: var(--grey);

  --text-dark: #222;
  --text-light: #747474;
  --marker-color: #f8ff00;





}

input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

html {
  font-size: 100%; /* 16px base */
  scroll-behavior: smooth;
  scrollbar-gutter: stable; 
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  opacity: 1;
  transition: opacity 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

/* 2. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: inherit;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin-bottom: 1rem; }

strong {
    font-weight: 500; 
}

/* 3. LINKS & LISTS */
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

ul, ol {
  list-style: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 4. UTILITIES */
.fade-out {
  opacity: 0 !important;
}

.fade-in {
  animation: fadeInPage 0.6s ease forwards;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Accessibilité */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer {
    color: var(--footer); 
}

/* ==========================================================
   DARK THEME
   ========================================================== */

html.dark-theme body {
    background-color: var(--black-02);
    color: #e0e0e0;
}

html.dark-theme h1, 
html.dark-theme h2, 
html.dark-theme h3,
html.dark-theme h4, 
html.dark-theme h5, 
html.dark-theme h6 {
    color: var(--white);
}

html.dark-theme p {
    color: var(--text-color-dark)
}

html.dark-theme a {
    color: inherit;
    transition: color 0.2s ease;
}

html.dark-theme a:hover {
    color: #fff;
}

html.dark-theme .footer {
    color: var(--footer-dark); 
}