Add pricing section in homepage and update CSS with theme-specific variables.

static/css/app.css

@@ -82,6 +82,30 @@
   --container-w: 1100px;
   --gutter: 20px;
   --focus-ring: 0 0 0 3px rgba(78,158,214,0.45);
+
+  /* Utility base colors */
+  --white: #ffffff;
+  --black: #000000;
+
+  /* Code window & syntax tokens (dark default) */
+  --code-bg: #1e1e2e;
+  --code-header-bg: #28293d;
+  --code-filename: #a9a9b3;
+  --code-text: #cdd6f4;
+  --code-line-number: #5c5f77;
+  --code-dot-red: #ff5f56;
+  --code-dot-yellow: #ffbd2e;
+  --code-dot-green: #27c93f;
+  --syn-qn: #cba6f7;   /* keywords like def/if/return */
+  --syn-fn: #89b4fa;   /* function names */
+  --syn-st: #a6e3a1;   /* strings */
+  --syn-kw: #f9e2af;   /* booleans/values */
+  --syn-cm: #6c7086;   /* comments */
+  --syn-ow: #cba6f7;   /* operators */
+
+  /* Misc */
+  --border-glass-dark: rgba(0,0,0,0.2);
+  --border-glass-light: rgba(255,255,255,0.05);
 }
 
 /* Light theme values — applied via colors_light.css inclusion */
@@ -104,7 +128,10 @@
   --text: var(--fg);
   --text-muted: var(--muted);
   --link: var(--primary);
-  --link-hover: var(--accent);
+  /* Hover liens (light): garder une teinte bleue pour éviter l'orange sur bleu */
+  --link-hover: color-mix(in oklab, var(--primary) 78%, var(--black) 22%);
+  /* Visited liens (light): un ton plus profond, toujours dans la gamme bleue */
+  --link-visited: color-mix(in oklab, var(--primary) 70%, var(--black) 30%);
 
   /* Functional colors */
   --success: #1f9d63;
@@ -133,6 +160,28 @@
   --surface-raised: var(--elev);
   --border-subtle: rgba(12,32,55,0.10);
   --border-strong: #8fb0c4;
+
+  /* Utility base colors */
+  --white: #ffffff;
+  --black: #000000;
+
+  /* Code window & syntax tokens (light theme keeps same accent look) */
+  --code-bg: #1e1e2e;
+  --code-header-bg: #28293d;
+  --code-filename: #a9a9b3;
+  --code-text: #cdd6f4;
+  --code-line-number: #5c5f77;
+  --code-dot-red: #ff5f56;
+  --code-dot-yellow: #ffbd2e;
+  --code-dot-green: #27c93f;
+  --syn-qn: #cba6f7;
+  --syn-fn: #89b4fa;
+  --syn-st: #a6e3a1;
+  --syn-kw: #f9e2af;
+  --syn-cm: #6c7086;
+  --syn-ow: #cba6f7;
+  --border-glass-dark: rgba(0,0,0,0.2);
+  --border-glass-light: rgba(255,255,255,0.05);
 }
 
 html {
@@ -523,10 +572,10 @@ pre {
     /* Make primary CTA more visible */
     font-weight: 700;
     background: linear-gradient(180deg,
-      color-mix(in oklab, var(--primary) 92%, #ffffff 8%),
-      color-mix(in oklab, var(--primary) 82%, #000000 18%)
+      color-mix(in oklab, var(--primary) 92%, var(--white) 8%),
+      color-mix(in oklab, var(--primary) 82%, var(--black) 18%)
     );
-    border-color: color-mix(in oklab, var(--primary) 70%, #000000 30%);
+    border-color: color-mix(in oklab, var(--primary) 70%, var(--black) 30%);
     box-shadow:
       0 8px 22px color-mix(in oklab, var(--primary) 35%, transparent),
       0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent);
@@ -535,8 +584,8 @@ pre {
 .cta-primary:hover {
     transform: translateY(-2px);
     background: linear-gradient(180deg,
-      color-mix(in oklab, var(--primary) 96%, #ffffff 4%),
-      color-mix(in oklab, var(--primary) 88%, #000000 12%)
+      color-mix(in oklab, var(--primary) 96%, var(--white) 4%),
+      color-mix(in oklab, var(--primary) 88%, var(--black) 12%)
     );
     box-shadow:
       0 12px 28px color-mix(in oklab, var(--primary) 45%, transparent),
@@ -953,6 +1002,29 @@ footer.site-footer {
 html { background: var(--bg); color: var(--fg); }
 nav.site-nav { background: var(--nav-bg); }
 
+/* Light-mode link ergonomics — avoid orange on blue, improve affordance */
+[data-theme='light'] a:not(.button) {
+  color: var(--link);
+  text-decoration: none;
+  text-underline-offset: 2px;
+}
+
+[data-theme='light'] a:not(.button):hover,
+[data-theme='light'] a:not(.button):focus-visible {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+[data-theme='light'] a:not(.button):visited {
+  color: var(--link-visited);
+}
+
+/* Navigation links: keep same bg hover but swap orange for blue in light */
+[data-theme='light'] .site-nav a:hover {
+  color: var(--link-hover);
+  background-color: var(--surface-raised);
+}
+
 .navbar ul ul { background: var(--elev); border-color: var(--border); box-shadow: var(--shadow-1); }
 .navbar ul ul a { color: var(--muted); }
 
@@ -1018,12 +1090,12 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
 
 .code-window {
     /* Fond sombre style éditeur moderne (ex: Dracula/Catppuccin) */
-    background: #1e1e2e;
+    background: var(--code-bg);
     border-radius: 12px;
     /* Une ombre portée pour donner de la profondeur */
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     overflow: hidden; /* Pour que les coins arrondis fonctionnent */
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass-light);
     font-family: 'Fira Code', 'Roboto Mono', 'Courier New', monospace; /* Important: police monospace */
     transform: translateY(0);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -1037,12 +1109,12 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
 
 /* HEADER DE LA FENÊTRE (Style macOS) */
 .window-header {
-    background: #28293d; /* Légèrement plus clair que le fond */
+    background: var(--code-header-bg); /* Légèrement plus clair que le fond */
     padding: 12px 16px;
     display: flex;
     align-items: center;
     position: relative;
-    border-bottom: 1px solid rgba(0,0,0,0.2);
+    border-bottom: 1px solid var(--border-glass-dark);
 }
 
 /* Les 3 petits points colorés */
@@ -1052,9 +1124,9 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
     z-index: 2;
 }
 .dot { width: 12px; height: 12px; border-radius: 50%; }
-.dot.red { background: #ff5f56; }
-.dot.yellow { background: #ffbd2e; }
-.dot.green { background: #27c93f; }
+.dot.red { background: var(--code-dot-red); }
+.dot.yellow { background: var(--code-dot-yellow); }
+.dot.green { background: var(--code-dot-green); }
 
 /* Le nom du fichier centré */
 .filename {
@@ -1062,7 +1134,7 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
     left: 0;
     right: 0;
     text-align: center;
-    color: #a9a9b3;
+    color: var(--code-filename);
     font-size: 0.85rem;
     font-weight: 500;
     user-select: none; /* Empêche de sélectionner le texte du titre */
@@ -1076,7 +1148,7 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
 
 .code-block {
     margin: 0;
-    color: #cdd6f4; /* Couleur de base du texte */
+    color: var(--code-text); /* Couleur de base du texte */
     line-height: 1.7;
     font-size: 15px;
     white-space: pre; /* Respecte les espaces et sauts de ligne */
@@ -1096,18 +1168,148 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); }
     display: inline-block;
     width: 30px;
     margin-right: 20px;
-    color: #5c5f77; /* Gris foncé pour les numéros */
+    color: var(--code-line-number); /* Gris foncé pour les numéros */
     text-align: right;
     user-select: none;
 }
 
 /* Couleurs des mots-clés (Basé sur les classes span ajoutées dans le HTML) */
-.qn { color: #cba6f7; font-weight: bold; } /* def, if, return (Mauve) */
-.fn { color: #89b4fa; } /* Noms de fonctions (Bleu) */
-.st { color: #a6e3a1; } /* Strings / Textes (Vert) */
-.kw { color: #f9e2af; } /* Booléens, valeurs clés (Jaune/Orange) */
-.cm { color: #6c7086; font-style: italic; } /* Commentaires (Gris) */
-.ow { color: #cba6f7; } /* Opérateurs and/or (Mauve) */
+.qn { color: var(--syn-qn); font-weight: bold; } /* def, if, return (Mauve) */
+.fn { color: var(--syn-fn); } /* Noms de fonctions (Bleu) */
+.st { color: var(--syn-st); } /* Strings / Textes (Vert) */
+.kw { color: var(--syn-kw); } /* Booléens, valeurs clés (Jaune/Orange) */
+.cm { color: var(--syn-cm); font-style: italic; } /* Commentaires (Gris) */
+.ow { color: var(--syn-ow); } /* Opérateurs and/or (Mauve) */
+
+/* --- SECTION PRICING --- */
+
+.pricing-section {
+    padding: 80px 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.pricing-header {
+    text-align: center;
+    margin-bottom: 50px;
+}
+.pricing-header h2 { font-size: 2rem; margin-bottom: 10px; }
+.pricing-header p { color: var(--text-muted); }
+
+/* La Grille des cartes */
+.pricing-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 30px;
+}
+
+/* Sur écran large, on met côte à côte */
+@media (min-width: 768px) {
+    .pricing-grid {
+        grid-template-columns: 1fr 1fr;
+        align-items: center; /* Pour centrer verticalement si tailles différentes */
+    }
+}
+
+/* --- STYLE DES CARTES --- */
+
+.plan-card {
+    background: var(--code-bg); /* Fond sombre carte */
+    border: 1px solid var(--border-glass-light);
+    border-radius: 16px;
+    padding: 30px;
+    position: relative;
+    transition: transform 0.3s ease;
+}
+
+.plan-card:hover {
+    transform: translateY(-5px);
+}
+
+.plan-header {
+    margin-bottom: 25px;
+    text-align: center;
+    border-bottom: 1px solid color-mix(in oklab, var(--white) 10%, transparent);
+    padding-bottom: 20px;
+}
+
+.plan-header h3 { font-size: 1.4rem; margin-bottom: 5px; color: var(--white); }
+.plan-header .price { font-size: 2rem; font-weight: bold; color: var(--white); margin: 10px 0; }
+.plan-header p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
+
+/* Liste des features */
+.plan-features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 30px 0;
+}
+
+.plan-features li {
+    margin-bottom: 15px;
+    color: var(--text);
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.plan-features i {
+    color: var(--success); /* Check vert */
+    margin-top: 4px; /* Alignement visuel */
+}
+
+/* Bouton pleine largeur dans les cartes */
+.full-width {
+    width: 100%;
+    display: block;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+/* --- SPÉCIFICITÉS CARTE PREMIUM --- */
+
+.plan-card.premium {
+    background: color-mix(in oklab, var(--code-bg) 92%, var(--white) 8%); /* Un poil plus clair pour ressortir */
+    border: 1px solid var(--primary); /* Bordure violette (ou ta couleur primaire) */
+    box-shadow: 0 0 30px color-mix(in oklab, var(--primary) 15%, transparent); /* Glow subtil */
+    transform: scale(1.02); /* Légèrement plus grande par défaut */
+}
+
+/* Le petit badge "Recommandé" */
+.badge-popular {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--primary); /* Ta couleur primaire */
+    color: var(--white);
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Light mode adjustments for plan cards — align with light DA */
+[data-theme='light'] .plan-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+}
+
+[data-theme='light'] .plan-header {
+    border-bottom: 1px solid color-mix(in oklab, var(--black) 8%, transparent);
+}
+
+[data-theme='light'] .plan-header h3,
+[data-theme='light'] .plan-header .price {
+    color: var(--fg);
+}
+
+[data-theme='light'] .plan-card.premium {
+    background: color-mix(in oklab, var(--card) 94%, var(--primary) 6%);
+    border: 1px solid color-mix(in oklab, var(--primary) 60%, var(--border) 40%);
+    box-shadow: 0 0 24px color-mix(in oklab, var(--primary) 18%, transparent);
+}
 
 /* Light theme stylesheet — relies on design tokens */
 
@@ -1296,7 +1498,7 @@ input[type="text"], input[type="email"], input[type="password"], textarea {
 [data-theme='light'] .button-secondary {
     background-color: var(--accent);
     border-color: var(--accent);
-    color: #ffffff;
+    color: var(--white);
 }
 [data-theme='light'] .button.button-secondary:hover,
 [data-theme='light'] .btn-secondary:hover,