Ajout des pages de confidentialités

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.linkedEditing": true
+}

assets/css/a-propos.css

@@ -0,0 +1,44 @@
+/* Styles pour la page À Propos */
+
+.a-propos-intro {
+    text-align: center;
+    margin-bottom: 40px;
+    font-size: 1.1rem;
+}
+
+.nos-valeurs {
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+.valeur-item {
+    width: 30%;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+.valeur-item img {
+    width: 80px; /* Assurez-vous d'avoir des images dans /assets/images */
+    margin-bottom: 10px;
+}
+
+.notre-equipe {
+    text-align: center;
+}
+
+.equipe-membre {
+    display: inline-block;
+    width: 200px;
+    margin: 20px;
+}
+
+.equipe-membre img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%; /* Image circulaire */
+    margin-bottom: 10px;
+}

assets/css/contact.css

@@ -0,0 +1,58 @@
+/* Styles pour la page Contact */
+
+.contact-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.contact-info {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 600px;
+    padding: 30px;
+    background: #ffffff;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+}
+
+.contact-form label {
+    display: block;
+    margin-top: 15px;
+    font-weight: bold;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.contact-form textarea {
+    resize: vertical;
+}
+
+.btn-submit {
+    background-color: var(--couleur-primaire);
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 20px;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+.btn-submit:hover {
+    background-color: #0056b3; /* Une nuance plus foncée au survol */
+}

assets/css/faq.css

@@ -0,0 +1,38 @@
+/* Styles pour la page FAQ */
+
+.faq-page h1 {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.faq-categorie {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    background-color: #ffffff;
+}
+
+.faq-categorie h2 {
+    color: var(--couleur-primaire);
+    margin-bottom: 15px;
+    border-bottom: 1px dashed #ccc;
+    padding-bottom: 5px;
+}
+
+.qa-item {
+    margin-bottom: 20px;
+}
+
+.qa-item h3 {
+    font-size: 1.1rem;
+    color: var(--couleur-texte);
+    cursor: pointer; /* Indiquer que c'est cliquable (même si c'est statique) */
+}
+
+.qa-item p {
+    padding-left: 20px;
+    border-left: 3px solid #ccc;
+    margin-top: 5px;
+    color: var(--couleur-secondaire);
+}

assets/css/global.css

@@ -0,0 +1,86 @@
+/* Définition des variables de couleur pour la charte graphique */
+:root {
+    --couleur-primaire: #776f73; /* Bleu (boutons, liens) */
+    --couleur-secondaire: #cccccc; /* Gris */
+    --couleur-fond: #8f253c; /* Fond clair */
+    --couleur-texte: #212529; /* Noir/Gris foncé */
+}
+
+/* Base Reset/Typographie */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: var(--couleur-texte);
+    background-color: var(--couleur-fond);
+}
+
+.page-content {
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 20px;
+}
+
+/* HEADER Styles */
+.main-header {
+    background-color: #ffffff;
+    border-bottom: 1px solid #e9ecef;
+    padding: 15px 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo a {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--couleur-primaire);
+    text-decoration: none;
+}
+
+.main-nav ul {
+    list-style: none;
+    display: flex;
+}
+
+.main-nav li a {
+    text-decoration: none;
+    color: var(--couleur-texte);
+    padding: 0 15px;
+    transition: color 0.3s;
+}
+
+.main-nav li a:hover {
+    color: var(--couleur-primaire);
+}
+
+/* FOOTER Styles */
+.main-footer {
+    background-color: var(--couleur-texte);
+    color: #ffffff;
+    padding: 40px 50px;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 50px;
+}
+
+.footer-links, .footer-contact, .footer-copyright {
+    margin: 10px;
+}
+
+.main-footer h4 {
+    border-bottom: 2px solid var(--couleur-primaire);
+    padding-bottom: 5px;
+    margin-bottom: 15px;
+}
+
+.main-footer a {
+    color: #cccccc;
+    text-decoration: none;
+}

assets/css/images/pages/a-propos.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nom du Site - À Propos</title> <link rel="stylesheet" href="../assets/css/global.css">
+    <link rel="stylesheet" href="../assets/css/a-propos.css"> </head>
+<body>
+
+    <header class="main-header">
+        <div class="logo">
+            <a href="../index.html">Votre Logo</a>
+        </div>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="../produits.html">Produits</a></li>
+                <li><a href="a-propos.html">À Propos</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="faq.html">FAQ</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main class="page-content">
+         <main class="page-content">
+        <h1>Notre Histoire & Nos Valeurs</h1>
+        <section class="a-propos-intro">
+            <p>Bienvenue chez POLYTECHNIC WX ! Notre aventure a commencé en 2O2O avec l'idée simple de...</p>
+        </section>
+
+        <section class="nos-valeurs">
+            <h2>Nos Valeurs Fondamentales</h2>
+            <div class="valeur-item">
+                <img src="../assets/images/eco.png" alt="Icone Écologie">
+                <h3>Durabilité</h3>
+                <p>Nous privilégions les matériaux éco-responsables et les circuits courts.</p>
+            </div>
+            <div class="valeur-item">
+                <img src="../assets/images/qualite.png" alt="Icone Qualité">
+                <h3>Qualité</h3>
+                <p>Chaque produit est sélectionné et testé pour une longévité maximale.</p>
+            </div>
+        </section>
+
+        <section class="notre-equipe">
+            <h2>Rencontrez l'Équipe</h2>
+            <div class="equipe-membre">
+                <img src="../assets/images/personne1.jpg" alt="Photo de Personne 1">
+                <h4>Bakotcha loic</h4>
+                <p>Fondatrice & CEO</p>
+            </div>
+            </section>
+    </main>
+        </main>
+
+    <footer class="main-footer">
+        <div class="footer-links">
+            <h4>Information</h4>
+            <ul>
+                <li><a href="a-propos.html">Notre Histoire</a></li>
+                <li><a href="faq.html">Aide & FAQ</a></li>
+            </ul>
+        </div>
+        <div class="footer-contact">
+            <h4>Nous Contacter</h4>
+            <p>Email: loicbakotcha@gmailcom</p>
+            <p>Tél: +237 677461149</p>
+        </div>
+        <div class="footer-copyright">
+            <p>&copy; 202O Nom POLYTECHNIC WX. Tous droits réservés.</p>
+        </div>
+    </footer>
+
+</body>
+</html>