/* ================================================================
   CODESTART — LANDING PAGE HTML & CSS
   Fichier : style.css
   Structure :
     1. Variables & Reset
     2. Typographie globale
     3. Boutons
     4. Navigation
     5. Section Hero
     6. Bloc de code décoratif
     7. Section Features
     8. Section Cours / Modules
     9. Section Outils
    10. Footer
    11. Responsive (mobile)
================================================================ */


/* ================================================================
   1. VARIABLES CSS & RESET
   — Toutes les couleurs et tailles sont définies ici en un seul
     endroit. Modifier une variable change tout le site d'un coup.
================================================================ */
:root {
  /* Palette principale */
  --color-bg:        #F7F7FB;       /* fond de page, très légèrement violet */
  --color-white:     #FFFFFF;
  --color-dark:      #12112A;       /* quasi-noir pour le texte principal */
  --color-gray:      #6B6B8A;       /* texte secondaire */
  --color-purple:    #6C63FF;       /* violet principal (accent) */
  --color-purple-2:  #8B5CF6;       /* violet secondaire (dégradé) */
  --color-blue:      #4F9EFF;       /* bleu accentuation */
  --color-hero-bg:   #6C63FF;       /* fond de la section hero */

  /* Espacements */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   96px;

  /* Typographie */
  --font-main:  'Inter', sans-serif;
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.75rem;    /* 44px */
  --text-4xl:   3.5rem;     /* 56px */

  /* Bordures & ombres */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --shadow-sm:  0 2px 8px rgba(108, 99, 255, 0.10);
  --shadow-md:  0 8px 32px rgba(108, 99, 255, 0.18);
}

/* Reset : supprime les marges/paddings par défaut du navigateur */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;   /* défilement doux pour les liens d'ancrage */
}

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--color-dark);
  background-color: var(--color-bg);
  line-height: 1.65;
}

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

img {
  max-width: 100%;
  display: block;
}


/* ================================================================
   2. TYPOGRAPHIE GLOBALE
   — Styles de base pour les titres et les paragraphes
================================================================ */
h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

p {
  line-height: 1.7;
  color: var(--color-gray);
}


/* ================================================================
   3. BOUTONS
   — Composant réutilisable sur toute la page
================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 12px 24px;
  border-radius: 50px;         /* forme en pilule */
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

/* Bouton principal — violet avec fond plein */
.btn--primary {
  background: var(--color-white);
  color: var(--color-purple);
}

/* Survol : légère élévation */
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Version grande du bouton (dans le hero) */
.btn--large {
  padding: 16px 32px;
  font-size: var(--text-lg);
}


/* ================================================================
   4. NAVIGATION
================================================================ */
.nav {
  position: sticky;           /* reste visible lors du défilement */
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid rgba(108, 99, 255, 0.08);
  padding: var(--space-sm) 0;
}

.nav__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-purple);
}

.nav__logo-icon {
  font-size: 1.6rem;
}

.nav__links {
  display: flex;
  gap: var(--space-md);
}

.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray);
  transition: color 0.2s;
}

.nav__links a:hover {
  color: var(--color-purple);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav__contact {
  font-size: var(--text-sm);
  color: var(--color-gray);
}

/* Le bouton dans la nav est violet (inverse du hero) */
.nav .btn--primary {
  background: var(--color-purple);
  color: var(--color-white);
}


/* ================================================================
   5. SECTION HERO
   — Grande bannière d'introduction en haut de page
================================================================ */
.hero {
  background: linear-gradient(
    135deg,
    var(--color-purple) 0%,
    var(--color-purple-2) 60%,
    var(--color-blue) 100%
  );
  padding: var(--space-xl) 0;
  overflow: hidden;
}

.hero__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.hero__content {
  flex: 1;
  color: var(--color-white);
  max-width: 520px;
}

.hero__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

/* Le mot-accentué du titre : blanc semi-transparent */
.hero__title--accent {
  color: rgba(255, 255, 255, 0.85);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: var(--space-md);
  max-width: 440px;
}

.hero__cta {
  margin-bottom: var(--space-md);
}

/* Liens sociaux sous le CTA */
.hero__social {
  display: flex;
  gap: var(--space-sm);
}

.hero__social-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s;
}

.hero__social-link:hover {
  color: var(--color-white);
}


/* ================================================================
   6. BLOC DE CODE DÉCORATIF (dans le hero)
   — Simule une fenêtre d'éditeur de code
================================================================ */
.hero__code-block {
  flex: 1;
  max-width: 460px;
}

.code-window {
  background: #1E1E2E;            /* fond sombre type VS Code */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Barre de titre de la fenêtre */
.code-window__bar {
  background: #2A2A3E;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Les 3 petits ronds (fermer / réduire / agrandir) */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot--red    { background: #FF5F56; }
.dot--yellow { background: #FFBD2E; }
.dot--green  { background: #27C93F; }

.code-window__title {
  margin-left: 8px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  font-family: 'Courier New', monospace;
}

.code-window__body {
  padding: var(--space-md);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.8;
  overflow-x: auto;
}

/* Coloration syntaxique CSS manuelle */
.c-tag  { color: #E06C75; }   /* balises HTML — rouge rosé */
.c-attr { color: #98C379; }   /* attributs — vert */
.c-val  { color: #E5C07B; }   /* valeurs — jaune doré */
.c-text { color: #ABB2BF; }   /* texte — gris clair */


/* ================================================================
   7. SECTION FEATURES (fonctionnalités)
   — Deux blocs alternés texte / visuel
================================================================ */
.features {
  padding: var(--space-xl) 0;
  background: var(--color-white);
}

.features__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Un bloc feature = visuel + texte côte à côte */
.feature {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Alternance : feature--right inverse l'ordre */
.feature--right {
  flex-direction: row-reverse;
}

.feature__content {
  flex: 1;
}

.feature__title {
  font-size: var(--text-3xl);
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}

.feature__title--accent {
  color: var(--color-purple);
}

.feature__text {
  font-size: var(--text-base);
  color: var(--color-gray);
  margin-bottom: var(--space-sm);
  max-width: 420px;
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-purple);
  font-weight: 600;
  font-size: var(--text-base);
  transition: gap 0.2s;
}

.feature__link:hover {
  gap: 10px;
}

/* Zone visuelle à droite/gauche du texte */
.feature__visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Carte simulant un panneau d'interface */
.feature__card {
  background: var(--color-white);
  border: 1px solid rgba(108,99,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 380px;
}

.feature__card-header {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.feature__card-tag {
  background: rgba(108,99,255,0.10);
  color: var(--color-purple);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.feature__card-tag--css {
  background: rgba(79,158,255,0.10);
  color: var(--color-blue);
}

/* Lignes simulant du contenu (skeleton) */
.feature__card-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

.line {
  height: 10px;
  border-radius: 50px;
  background: linear-gradient(90deg, #E8E8F5 0%, #D5D5EE 100%);
}
.line--long   { width: 90%; }
.line--medium { width: 70%; }
.line--short  { width: 50%; }

.feature__card-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue));
  color: var(--color-white);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Prévisualisation CSS dans la feature 2 */
.feature__css-preview {
  width: 100%;
  max-width: 380px;
}

.css-card {
  background: #1E1E2E;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  line-height: 2;
  box-shadow: var(--shadow-md);
}

.css-card__selector {
  color: #E06C75;
}

.css-card__prop {
  padding-left: 20px;
}

.css-prop { color: #98C379; }
.css-val  { color: #E5C07B; }

.css-val--color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.css-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}


/* ================================================================
   8. SECTION COURS / MODULES
================================================================ */
.cours {
  padding: var(--space-xl) 0;
  background: var(--color-bg);
}

.cours__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
}

.cours__heading {
  font-size: var(--text-3xl);
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.cours__sub {
  font-size: var(--text-lg);
  color: var(--color-gray);
  margin-bottom: var(--space-lg);
}

/* Grille de 3 colonnes (2 rangées = 6 modules) */
.cours__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Carte de module individuel */
.module {
  background: var(--color-white);
  border: 1px solid rgba(108,99,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.module:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.module__number {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: rgba(108,99,255,0.15);   /* grand numéro décoratif, semi-transparent */
  margin-bottom: var(--space-xs);
}

.module__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.module__text {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}


/* ================================================================
   9. SECTION OUTILS / PARTENAIRES
================================================================ */
.outils {
  padding: var(--space-xl) 0;
  background: var(--color-white);
}

.outils__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
}

.outils__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

.outils__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.outil-badge {
  background: var(--color-bg);
  border: 1px solid rgba(108,99,255,0.12);
  color: var(--color-dark);
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--text-base);
  transition: background 0.2s, color 0.2s;
}

.outil-badge:hover {
  background: var(--color-purple);
  color: var(--color-white);
  border-color: var(--color-purple);
}

.outils__cta {
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-white);
}

.outils__cta-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}

.outils__cta-text {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.80);
}


/* ================================================================
   10. FOOTER
================================================================ */
.footer {
  background: var(--color-dark);
  padding: var(--space-md) 0;
}

.footer__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-white);
  font-weight: 800;
  font-size: var(--text-lg);
}

.footer__copy {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.40);
}


/* ================================================================
   11. RESPONSIVE — MOBILE (max-width: 768px)
   — Tout ce qui suit s'applique UNIQUEMENT aux petits écrans
================================================================ */
@media (max-width: 768px) {

  /* Réduction des tailles de titres */
  :root {
    --text-4xl: 2.2rem;
    --text-3xl: 1.8rem;
  }

  /* Nav : masquer liens et contact */
  .nav__links,
  .nav__contact {
    display: none;
  }

  /* Hero : empiler verticalement */
  .hero__container {
    flex-direction: column;
  }

  .hero__content {
    text-align: center;
  }

  .hero__subtitle {
    margin: 0 auto var(--space-md);
  }

  .hero__social {
    justify-content: center;
  }

  .hero__code-block {
    max-width: 100%;
  }

  /* Features : empiler verticalement */
  .feature,
  .feature--right {
    flex-direction: column;
  }

  /* Grille cours : 1 colonne sur mobile */
  .cours__grid {
    grid-template-columns: 1fr;
  }

  /* Footer : centrer sur mobile */
  .footer__container {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}