/******************************************************************************* 
*       Réinitialisation des bordures et du padding pour tous les éléments     *
*******************************************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  list-style: none;
  border: none;
}

html {
  overflow-x: hidden;
  user-select: none;
  width: 100%;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: white;
}

body {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  background: var(--body-bg-color);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

:root {
  --color-white: #fff;

  --color-primary: #121c42;

  --color-primary-text-conf: #121c42;

  --color-secondary: #ff725e;

  --color-btn-active-hover: #e56655;

  --header-bg-color: rgb(255 255 255);

  --body-bg-color: #f1f1f1;

  --bar-top-bg-color: #ff725e;

  --link-active-bg-color: #ff725e;

  --color-alinea: #7f7e7e;

  --main-color: #ff725e;

  --secondary-color: #f9eae1;

  --header-active: #fff;

  --footer-container-bg: #f5f5f5;

  --fixed-header-background: rgb(255 255 255 / 0.2);

  --color-banner-left-h2: #121c42;

  --color-banner-left-btn-hover: #f8f6f5;

  --color-title-about-h2: #121c42;

  --color-content-about-a-hover: whitesmoke;

  --color-banner-left-btn-active: #fff;

  --color-content-about-p: #121c42;

  --primary-color: #3a435d;

  /* HEADER */

  --bg-blur: rgb(255 255 255 / 0.2); /* plus visible */

  /** TYPING ANIMATION */

  --cursor-color: #fff;

  /* SECTION ABOUt */

  --section-about-background: #fcfcfc;

  /** BTN UP **/

  --bg-color-bg-up: #fff;

  /** ABOUT SECTION **/

  --img-about-border: #fff;

  /** EDUCATION SECTION **/

  --section-education-container: #fff;

  --color-education-container: #121c42;

  --section-education-card: #fff;

  --section-container-card: #fff;

  --box-shabow-card-education: rgb(0 0 0 / 0.1) 0 4px 12px;

  --timeline-border-soft: rgb(18 28 66 / 0.12);

  --timeline-border-soft-hover: rgb(18 28 66 / 0.2);

  --timeline-chip-bg: rgb(240 95 64 / 0.1);

  /** SKILL SECTION **/

  --section-skill-container: #fcfcfc;

  --color-skill-text: #121c42;

  --skill-border-soft: rgb(18 28 66 / 0.12);

  --skill-border-soft-hover: rgb(18 28 66 / 0.2);

  /** EXPERIENCE SECTION **/

  --experience-section-background: #fff;

  --color-experience-section-text: #121c42;

  --experience-background-card: #fff;

  /** PORTFOLIO SECTION **/

  --background-section-portfolio: #fcfcfc;

  --color-portfolio-text: #121c42;

  /** CONTACT SECTION **/

  --background-section-contact: #fff;

  --color-contacter-text: #121c42;

  --card-form-background: #fff; /** card **/

  --color-border-card-form-input-textarea: #eaeaea; /** card **/

  --color-input-textarea: #989898;

  --bg-color-input-textarea: rgb(244 244 244);

  --color-text-input-textarea: #707070;

  /** FOOTER SECTION #121c42 **/

  --color-footer-text: #999;

  --background-section-footer: #fcfcfc;

  /** SOCIAL MEDIA **/

  --social-media: #fff;

  --color-social-media: #6b7688;

  /* Layout */

  --layout-gutter: clamp(20px, 6vw, 120px);

  --layout-content-max: 1280px;
}

/* Dark mode */
.darkmode {
  --color-white: #171717;

  --color-primary: #ddd;

  --color-secondary: #ff725e; /* #f05f40 */

  --header-bg-color: #171717;

  --body-bg-color: #333;

  --bar-top-bg-color: #ff725e;

  --link-active-bg-color: #ff725e;

  --color-alinea: #ddd;

  --main-color: #ff725e;

  --secondary-color: #333;

  --header-active: #171717;

  --fixed-header-background: rgb(255 255 255 / 0.1);

  --color-banner-left-h2: #ddd;

  --color-banner-left-btn-hover: #fff;

  --color-title-about-h2: #ddd;

  --color-content-about-a-hover: whitesmoke;

  --color-banner-left-btn-active: #fff;

  --color-content-about-p: #ddd;

  --primary-color: #ddd;

  /* HEADER */

  --bg-blur: rgb(0 0 0 / 0.3); 

  /** TYPING ANIMATION */

  --cursor-color: rgb(255 114 94 / 0.35);

  /* SECTION ABOUt */

  --section-about-background: #1a1a1a;

  /** BTN UP **/

  --bg-color-bg-up: #333;

  /** ABOUT SECTION **/

  --img-about-border: #aeacac;

  /** EDUCATION SECTION **/

  --section-education-container: #171717;

  --color-education-container: #fff;

  --section-container-card: #292727;

  --timeline-border-soft: rgb(255 255 255 / 0.16);

  --timeline-border-soft-hover: rgb(255 255 255 / 0.3);

  --timeline-chip-bg: rgb(240 95 64 / 0.18);

  /* --box-shabow-card-education:rgba(58, 57, 57, 0.3) 0px 4px 12px; */

  /** SKILL SECTION **/

  --section-skill-container: #1a1a1a;

  --color-skill-text: #fff;

  --skill-border-soft: rgb(255 255 255 / 0.18);

  --skill-border-soft-hover: rgb(255 255 255 / 0.3);

  /** EXPERIENCE SECTION **/

  --experience-section-background: #171717;

  --color-experience-section-text: #fff;

  --experience-background-card: #292727;

  /** PORTFOLIO SECTION **/

  --background-section-portfolio: #1a1a1a;

  --color-portfolio-text: #fff;

  /** CONTACT SECTION **/

  --background-section-contact: #171717;

  --color-contacter-text: #fff;

  --card-form-background: #292727; /** card **/

  --color-border-card-form-input-textarea: #9a9999; /** card **/

  --color-primary-text-conf: #d0d1d3;

  --bg-color-input-textarea: #333;

  --color-text-input-textarea: #fff;

  /** FOOTER SECTION **/

  --background-section-footer: #1a1a1a;

  --color-footer-text: #fff;

  /** SOCIAL MEDIA **/

  --social-media: transparent;

  --color-social-media: #fff;
}

@media only screen and (max-width: 768px) {
  :root {
    --layout-gutter: clamp(20px, 5.5vw, 24px);
  }
}