:root {
    --white-smoke: #F2F4F3;
    --dark_white-smoke: #d3d3d3;
    --light_white-smoke: #ffffff;

    --pistachio: #89CF63;
    --light_pistachio: #a0ff6c;

    --night :#0A0908;
    --light-night: #191b1b;
    --dark-night : #0f0f0f;
  
    --dark-light-beige : #e7cfc1;
    --beige:#EAE0D5;
    --beige-doré:#C6AC8E;
    --brun:#5E503F;

    --gunmetal: #22333B;
    --light_gunmetal: #13abe7;
    --extreme_light_gunmetal: #6bb6d1;

    --purple-blue:#1d1f32;
}
/* =========================
   THEME : MODE CLAIR
   ========================= */
body.light-mode {
    --bg-color: var(--white-smoke);
    --Menu-bg-color: var(--dark-light);
    --Light-menu-bg-color:var(--dark-night);
    --text-color: var(--light-night);
    --header-bg: var(--white-smoke);
    --header-text: var(--white-smoke);
    --link-color: var(--light-night);
    --link-hover: var(--light_gunmetal);
    --btn-bg: var(--GUI-background-dark);
}

/* =========================
   THEME : MODE SOMBRE
   ========================= */
body.night-mode {
    --bg-color: var(--light-night);
    --Menu-bg-color: var(--dark-night);
    --Light-menu-bg-color:var(--dark-night);
    --text-color: var(--white-smoke);
    --header-bg: var(--light-night);
    --header-text: var(--light-night);
    --link-color: var(--white-smoke);
    --link-hover: var(--extreme_light_gunmetal);
    --btn-bg: var(--GUI-background-light);
}


h2{
    text-align: center;
    padding: 1%;
    position: relative;
}

h3{
    padding-bottom: 3%;
}
p{
    text-align: center;
    max-width: 50%;
    padding-left: 25%;
}

body::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    background-image: 
        radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 1.2px),
        radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.2px);
    background-size: 32px 32px, 64px 64px;
    background-position: 0 0, 16px 16px;
    opacity: 0.45;
}
body {
    position: relative;
    z-index: 1;
}

/* === A-propos : responsive + hero full-bleed comme les autres pages === */

/* Sécurité anti scroll horizontal */
html, body { overflow-x: hidden; }

/* HERO full-bleed */
.commencer-banner {
  margin-top: -1.65%;
  text-align: center;
  padding: 60px 20px;
  background: radial-gradient(circle at center, var(--beige-doré-plus-foncé) 0%, var(--dark-brun) 100%);
  color: var(--white-smoke);
}

.commencer-banner h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.commencer-banner p {
  font-size: 1.2rem;
  color: var(--dark_white-smoke);
}

/* Ligne de séparation sous le hero (full-bleed aussi) */
.apropos-separator{
  width: 100vw; height: 2px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--beige-doré);
  opacity: .6;
}

/* Typo & contenants du corps de page */
#about{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(12px, 3vw, 24px);
}

/* Titres internes */
#about h2{
  text-align: center;
  padding: clamp(8px, 1vw, 16px) 0;
}

/* Paragraphes lisibles partout (remplace le 50% + padding-left) */
#about p{
  text-align: center;
  max-width: min(70ch, 92vw);
  margin: 0 auto clamp(18px, 2.5vw, 28px);
  padding: 0;                      /* on enlève le padding gauche rigide */
}

/* Petits écrans : un peu plus compact */
@media (max-width: 360px){
  .apropos-banner h2{ font-size: 1.3rem; }
  .apropos-banner p{ font-size: .9rem; }
}

.apprendre-banner {
    text-align: center;
    padding: 60px 20px;
    background: radial-gradient(circle at center, var(--beige-doré-plus-foncé) 0%, var(--dark-brun) 100%);
    color: var(--white-smoke);
  }
  
  .apprendre-banner h2 {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  
  .apprendre-banner p {
    font-size: 1.2rem;
    color: var(--dark_white-smoke);
  }
  
.phrase-intro-separation{
    margin-top: -0.2%;
    padding: 0.3% 100% 0% 0%;
    margin: 0% 0% 0% 0%;
    background-color: var(--beige-doré-plus-foncé);
  }

  .a-propos-banner {
  margin-top: -1.40%;
  text-align: center;
  padding: 60px 20px;
  background: radial-gradient(circle at center, var(--beige-doré-plus-foncé) 0%, var(--dark-brun) 100%);
  color: var(--white-smoke);
}

.a-propos-banner h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.commencer-banner p {
  font-size: 1.2rem;
  color: var(--dark_white-smoke);
}