diff --git a/TP_valarcher/Wireframe/Lofi dashboard .pdf b/TP_valarcher/Wireframe/Lofi dashboard .pdf
new file mode 100644
index 0000000..050c4b4
Binary files /dev/null and b/TP_valarcher/Wireframe/Lofi dashboard .pdf differ
diff --git a/TP_valarcher/Wireframe/Mi-fi.png b/TP_valarcher/Wireframe/Mi-fi.png
new file mode 100644
index 0000000..acd3365
Binary files /dev/null and b/TP_valarcher/Wireframe/Mi-fi.png differ
diff --git a/TP_valarcher/__MACOSX/._board b/TP_valarcher/__MACOSX/._board
new file mode 100755
index 0000000..e32b7ca
Binary files /dev/null and b/TP_valarcher/__MACOSX/._board differ
diff --git a/TP_valarcher/__MACOSX/board/._index.html b/TP_valarcher/__MACOSX/board/._index.html
new file mode 100644
index 0000000..65690f9
Binary files /dev/null and b/TP_valarcher/__MACOSX/board/._index.html differ
diff --git a/TP_valarcher/__MACOSX/board/._style.css b/TP_valarcher/__MACOSX/board/._style.css
new file mode 100644
index 0000000..80cb735
Binary files /dev/null and b/TP_valarcher/__MACOSX/board/._style.css differ
diff --git a/TP_valarcher/board.zip b/TP_valarcher/board.zip
new file mode 100644
index 0000000..0b1680e
Binary files /dev/null and b/TP_valarcher/board.zip differ
diff --git a/TP_valarcher/board/index.html b/TP_valarcher/board/index.html
new file mode 100644
index 0000000..3e42963
--- /dev/null
+++ b/TP_valarcher/board/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Mon Dashboard</title>
+<link rel="stylesheet" href="style.css" />
+<!-- Chart.js pour créer les graphiques -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+<!--  En-tête  -->
+<header class="tete">
+    <h1>Mon Dashboard</h1>
+
+    <!-- Barre de recherche -->
+    <form class="search" action="#" role="search">
+        <input type="search" placeholder="Rechercher…" />
+    </form>
+
+</header>
+
+<!--  Mise en page principale  -->
+<main class="layout">
+    <!-- Menu latéral gauche -->
+    <aside class="sidebar">
+        <nav class="menu">
+            <a href="#" class="btn active">Accueil</a>
+            <a href="#" class="btn">Statistiques</a>
+            <a href="#" class="btn">Utilisateurs</a>
+            <a href="#" class="btn">Paramètres</a>
+        </nav>
+    </aside>
+
+    <!-- Zone principale du contenu -->
+    <section class="content">
+        <div class="dashboard">
+
+            <!--  Carte Courbe (graphique en ligne)  -->
+            <div class="card card-line">
+                <canvas id="lineChart"></canvas>
+            </div>
+
+            <!--  Carte Histogramme  -->
+            <div class="card card-histo">
+                <canvas id="histogramme"></canvas>
+            </div>
+
+            <!--  Carte Barres (graphique en barres principal)  -->
+            <div class="card card-bars">
+                <canvas id="barChart"></canvas>
+            </div>
+
+            <!--  Carte Camembert  -->
+            <div class="card card-pie">
+                <canvas id="camembert"></canvas>
+            </div>
+
+        </div>
+    </section>
+</main>
+
+<!--  Scripts pour les graphiques  -->
+<script>
+    //  Graphique en ligne (courbe) 
+    const ctxLine = document.getElementById('lineChart');
+    new Chart(ctxLine, {
+        type: 'line',
+        data: {
+            labels: ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'], // jours de la semaine
+            datasets: [{
+                label: 'Visites',
+                data: [12, 19, 15, 22, 30, 25, 18], // données fictives
+                fill: false,
+                borderColor: '#3b82f6',
+                tension: 0.2
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Histogramme 
+    const ctxBar = document.getElementById('histogramme');
+    new Chart(ctxBar, {
+        type: 'bar',
+        data: {
+            labels: ['Jan','Fév','Mar','Avr'], // mois
+            datasets: [{
+                label: 'Ventes',
+                data: [12,19,8,15], // données fictives
+                backgroundColor: '#3b82f6'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Graphique en barres principal 
+    const ctxBarMain = document.getElementById('barChart');
+    new Chart(ctxBarMain, {
+        type: 'bar',
+        data: {
+            labels: ['Q1','Q2','Q3','Q4'], // trimestres
+            datasets: [{
+                label: 'Revenus',
+                data: [5000, 7000, 4000, 9000], // données fictives
+                backgroundColor: '#f97316'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Camembert 
+    const ctxPie = document.getElementById('camembert');
+    new Chart(ctxPie, {
+        type: 'pie',
+        data: {
+            labels: ['Cat A','Cat B','Cat C'], // catégories
+            datasets: [{
+                data: [40, 35, 25], // données fictives
+                backgroundColor: ['#3b82f6','#f97316','#10b981']
+            }]
+        }
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/TP_valarcher/board/style.css b/TP_valarcher/board/style.css
new file mode 100644
index 0000000..73049e2
--- /dev/null
+++ b/TP_valarcher/board/style.css
@@ -0,0 +1,170 @@
+/*  Base  */
+:root{
+    --bg:#f6f7fb;
+    --panel:#ffffff;
+    --text:#222;
+    --muted:#6b7280;
+    --accent:#3b82f6;
+    --radius:12px;
+    --gap:16px;
+    --shadow:0 4px 12px rgba(0,0,0,.06);
+    }
+    
+    *{ box-sizing:border-box; }
+    html,body{ height:100%; }
+    body{
+    margin:0;
+    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+    color:var(--text);
+    background:var(--bg);
+    }
+    
+    /*  Header  */
+    .tete{
+    display: flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:var(--gap);
+    padding:12px 16px;
+    background:var(--panel);
+    box-shadow:var(--shadow);
+    position:sticky;
+    top:0;
+    z-index:10;
+    }
+    .tete h1{
+    margin:0;
+    font-size:20px;
+    letter-spacing:.3px;
+    }
+    .search input{
+    width: min(520px);
+    padding:10px 12px;
+    border:1px solid #e5e7eb;
+    border-radius:20px;
+    outline:none;
+    }
+    .search input:focus{
+    border-color:var(--accent);
+    }
+    
+    /*  Layout  */
+    .layout{
+    display:flex;
+    min-height: calc(100vh - 60px);
+    }
+    
+    /* Sidebar (gauche) */
+    .sidebar{
+    width:220px;
+    padding:16px;
+    }
+    .menu{
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    }
+    .menu .btn{
+    display:block;
+    padding:12px 14px;
+    text-decoration:none;
+    color:var(--text);
+    background:var(--panel);
+    border:1px solid #e0e2e6;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    font-weight:600;
+    transition:transform .15s, background .15s;
+    }
+    .menu .btn:hover{ transform:translateX(4px); }
+    .menu .btn.active{
+    background:#eef2ff;
+    border-color:#c7d2fe;
+    }
+    
+    /* Zone contenu (droite) */
+    .content{
+    flex:1;
+    padding:16px;
+    }
+    
+ 
+    /* grille 3 colonnes pour grands écrans */
+    .dashboard{
+    display:grid;
+    grid-template-columns: 2fr 1fr 1fr; 
+    grid-auto-rows: 160px;
+    gap:var(--gap);
+    }
+    
+    /* Cartes génériques */
+    .card{
+    background:var(--panel);
+    border:1px solid #e5e7eb;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    padding:12px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    font-weight:600;
+    color:var(--muted);
+    }
+
+    .card-line{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-small{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    } 
+   
+    .card-tiles{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    }
+    .card-bars{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-rings{ 
+    grid-column: 3 / span 1;
+    grid-row: span 2;
+    gap:24px;
+    }
+    
+    /* Les deux ronds  */
+    .ring{
+    width:120px; height:120px;
+    border:10px solid #eceef1;
+    border-radius:50%;
+    }
+
+        /*  Responsive  */
+    /* Moyen écran: 2 colonnes */
+    @media (max-width: 1100px){
+        .dashboard{
+        grid-template-columns: 1fr 1fr;
+        }
+        .card-line{ grid-column: 1 / span 2; }
+        .card-small{ grid-column:auto; }
+        .card-bars{ grid-column: 1 / span 2; }
+        .card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
+        }
+
+            /* Petit écran*/
+    @media (max-width: 750px){
+        .layout{ flex-direction:column; }
+        .sidebar{ width:auto; padding:12px 16px; }
+        .menu{ flex-direction:row; flex-wrap:wrap; }
+        .menu .btn{ flex:1 1 140px; }
+        .content{ padding:12px; }
+        .dashboard{ grid-template-columns: 1fr; }
+        .card-line,
+        .card-bars,
+        .card-rings{ grid-column: 1; }
+        .ring{ width:90px; height:90px; }
+        }
+
+
diff --git a/TP_valarcher/projet/index.html b/TP_valarcher/projet/index.html
new file mode 100644
index 0000000..3e42963
--- /dev/null
+++ b/TP_valarcher/projet/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Mon Dashboard</title>
+<link rel="stylesheet" href="style.css" />
+<!-- Chart.js pour créer les graphiques -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+
+<!--  En-tête  -->
+<header class="tete">
+    <h1>Mon Dashboard</h1>
+
+    <!-- Barre de recherche -->
+    <form class="search" action="#" role="search">
+        <input type="search" placeholder="Rechercher…" />
+    </form>
+
+</header>
+
+<!--  Mise en page principale  -->
+<main class="layout">
+    <!-- Menu latéral gauche -->
+    <aside class="sidebar">
+        <nav class="menu">
+            <a href="#" class="btn active">Accueil</a>
+            <a href="#" class="btn">Statistiques</a>
+            <a href="#" class="btn">Utilisateurs</a>
+            <a href="#" class="btn">Paramètres</a>
+        </nav>
+    </aside>
+
+    <!-- Zone principale du contenu -->
+    <section class="content">
+        <div class="dashboard">
+
+            <!--  Carte Courbe (graphique en ligne)  -->
+            <div class="card card-line">
+                <canvas id="lineChart"></canvas>
+            </div>
+
+            <!--  Carte Histogramme  -->
+            <div class="card card-histo">
+                <canvas id="histogramme"></canvas>
+            </div>
+
+            <!--  Carte Barres (graphique en barres principal)  -->
+            <div class="card card-bars">
+                <canvas id="barChart"></canvas>
+            </div>
+
+            <!--  Carte Camembert  -->
+            <div class="card card-pie">
+                <canvas id="camembert"></canvas>
+            </div>
+
+        </div>
+    </section>
+</main>
+
+<!--  Scripts pour les graphiques  -->
+<script>
+    //  Graphique en ligne (courbe) 
+    const ctxLine = document.getElementById('lineChart');
+    new Chart(ctxLine, {
+        type: 'line',
+        data: {
+            labels: ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'], // jours de la semaine
+            datasets: [{
+                label: 'Visites',
+                data: [12, 19, 15, 22, 30, 25, 18], // données fictives
+                fill: false,
+                borderColor: '#3b82f6',
+                tension: 0.2
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Histogramme 
+    const ctxBar = document.getElementById('histogramme');
+    new Chart(ctxBar, {
+        type: 'bar',
+        data: {
+            labels: ['Jan','Fév','Mar','Avr'], // mois
+            datasets: [{
+                label: 'Ventes',
+                data: [12,19,8,15], // données fictives
+                backgroundColor: '#3b82f6'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Graphique en barres principal 
+    const ctxBarMain = document.getElementById('barChart');
+    new Chart(ctxBarMain, {
+        type: 'bar',
+        data: {
+            labels: ['Q1','Q2','Q3','Q4'], // trimestres
+            datasets: [{
+                label: 'Revenus',
+                data: [5000, 7000, 4000, 9000], // données fictives
+                backgroundColor: '#f97316'
+            }]
+        },
+        options: {
+            scales: { y: { beginAtZero: true } }
+        }
+    });
+
+    //  Camembert 
+    const ctxPie = document.getElementById('camembert');
+    new Chart(ctxPie, {
+        type: 'pie',
+        data: {
+            labels: ['Cat A','Cat B','Cat C'], // catégories
+            datasets: [{
+                data: [40, 35, 25], // données fictives
+                backgroundColor: ['#3b82f6','#f97316','#10b981']
+            }]
+        }
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/TP_valarcher/projet/style.css b/TP_valarcher/projet/style.css
new file mode 100644
index 0000000..73049e2
--- /dev/null
+++ b/TP_valarcher/projet/style.css
@@ -0,0 +1,170 @@
+/*  Base  */
+:root{
+    --bg:#f6f7fb;
+    --panel:#ffffff;
+    --text:#222;
+    --muted:#6b7280;
+    --accent:#3b82f6;
+    --radius:12px;
+    --gap:16px;
+    --shadow:0 4px 12px rgba(0,0,0,.06);
+    }
+    
+    *{ box-sizing:border-box; }
+    html,body{ height:100%; }
+    body{
+    margin:0;
+    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+    color:var(--text);
+    background:var(--bg);
+    }
+    
+    /*  Header  */
+    .tete{
+    display: flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:var(--gap);
+    padding:12px 16px;
+    background:var(--panel);
+    box-shadow:var(--shadow);
+    position:sticky;
+    top:0;
+    z-index:10;
+    }
+    .tete h1{
+    margin:0;
+    font-size:20px;
+    letter-spacing:.3px;
+    }
+    .search input{
+    width: min(520px);
+    padding:10px 12px;
+    border:1px solid #e5e7eb;
+    border-radius:20px;
+    outline:none;
+    }
+    .search input:focus{
+    border-color:var(--accent);
+    }
+    
+    /*  Layout  */
+    .layout{
+    display:flex;
+    min-height: calc(100vh - 60px);
+    }
+    
+    /* Sidebar (gauche) */
+    .sidebar{
+    width:220px;
+    padding:16px;
+    }
+    .menu{
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    }
+    .menu .btn{
+    display:block;
+    padding:12px 14px;
+    text-decoration:none;
+    color:var(--text);
+    background:var(--panel);
+    border:1px solid #e0e2e6;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    font-weight:600;
+    transition:transform .15s, background .15s;
+    }
+    .menu .btn:hover{ transform:translateX(4px); }
+    .menu .btn.active{
+    background:#eef2ff;
+    border-color:#c7d2fe;
+    }
+    
+    /* Zone contenu (droite) */
+    .content{
+    flex:1;
+    padding:16px;
+    }
+    
+ 
+    /* grille 3 colonnes pour grands écrans */
+    .dashboard{
+    display:grid;
+    grid-template-columns: 2fr 1fr 1fr; 
+    grid-auto-rows: 160px;
+    gap:var(--gap);
+    }
+    
+    /* Cartes génériques */
+    .card{
+    background:var(--panel);
+    border:1px solid #e5e7eb;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    padding:12px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    font-weight:600;
+    color:var(--muted);
+    }
+
+    .card-line{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-small{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    } 
+   
+    .card-tiles{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    }
+    .card-bars{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-rings{ 
+    grid-column: 3 / span 1;
+    grid-row: span 2;
+    gap:24px;
+    }
+    
+    /* Les deux ronds  */
+    .ring{
+    width:120px; height:120px;
+    border:10px solid #eceef1;
+    border-radius:50%;
+    }
+
+        /*  Responsive  */
+    /* Moyen écran: 2 colonnes */
+    @media (max-width: 1100px){
+        .dashboard{
+        grid-template-columns: 1fr 1fr;
+        }
+        .card-line{ grid-column: 1 / span 2; }
+        .card-small{ grid-column:auto; }
+        .card-bars{ grid-column: 1 / span 2; }
+        .card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
+        }
+
+            /* Petit écran*/
+    @media (max-width: 750px){
+        .layout{ flex-direction:column; }
+        .sidebar{ width:auto; padding:12px 16px; }
+        .menu{ flex-direction:row; flex-wrap:wrap; }
+        .menu .btn{ flex:1 1 140px; }
+        .content{ padding:12px; }
+        .dashboard{ grid-template-columns: 1fr; }
+        .card-line,
+        .card-bars,
+        .card-rings{ grid-column: 1; }
+        .ring{ width:90px; height:90px; }
+        }
+
+
diff --git a/TP_valarcher/test/index.html b/TP_valarcher/test/index.html
new file mode 100644
index 0000000..4c1472f
--- /dev/null
+++ b/TP_valarcher/test/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Mon Dashboard</title>
+<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+<header class="tete">
+<h1>Mon Dashboard</h1>
+
+
+<form class="search" action="#" role="search">
+<input type="search" placeholder="Rechercher…" aria-label="Rechercher" />
+</form>
+</header>
+
+<main class="layout">
+    <aside class="sidebar">
+        <nav class="menu">
+            <a href="#" class="btn active">Accueil</a>
+            <a href="#" class="btn">Statistiques</a>
+            <a href="#" class="btn">Utilisateurs</a>
+            <a href="#" class="btn">Paramètres</a>
+        </nav>
+    </aside>
+
+<section class="content">
+
+<div class="dashboard">
+
+
+
+<div class="card card-line">Courbe</div>
+
+
+<div class="card card-small">Info A</div>
+<div class="card card-small">Info B</div>
+
+
+
+
+
+<div class="card card-bars">Barres</div>
+
+<div class="card card-rings">
+<div class="ring"></div>
+<div class="ring"></div>
+</div>
+
+
+
+</div>
+</section>
+</main>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/TP_valarcher/test/style.css b/TP_valarcher/test/style.css
new file mode 100644
index 0000000..c445803
--- /dev/null
+++ b/TP_valarcher/test/style.css
@@ -0,0 +1,171 @@
+/*  Base  */
+:root{
+    --bg:#f6f7fb;
+    --panel:#ffffff;
+    --text:#222;
+    --muted:#6b7280;
+    --accent:#3b82f6;
+    --radius:12px;
+    --gap:16px;
+    --shadow:0 4px 12px rgba(0,0,0,.06);
+    }
+    
+    *{ box-sizing:border-box; }
+    html,body{ height:100%; }
+    body{
+    margin:0;
+    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+    color:var(--text);
+    background:var(--bg);
+    }
+    
+    /*  Header  */
+    .tete{
+    display: flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:var(--gap);
+    padding:12px 16px;
+    background:var(--panel);
+    box-shadow:var(--shadow);
+    position:sticky;
+    top:0;
+    z-index:10;
+    }
+    .tete h1{
+    margin:0;
+    font-size:20px;
+    letter-spacing:.3px;
+    }
+    .search input{
+    width: min(520px);
+    padding:10px 12px;
+    border:1px solid #e5e7eb;
+    border-radius:20px;
+    outline:none;
+    }
+    .search input:focus{
+    border-color:var(--accent);
+    }
+    
+    /*  Layout  */
+    .layout{
+    display:flex;
+    min-height: calc(100vh - 60px);
+    }
+    
+    /* Sidebar (gauche) */
+    .sidebar{
+    width:220px;
+    padding:16px;
+    }
+    .menu{
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    }
+    .menu .btn{
+    display:block;
+    padding:12px 14px;
+    text-decoration:none;
+    color:var(--text);
+    background:var(--panel);
+    border:1px solid #e0e2e6;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    font-weight:600;
+    transition:transform .15s, background .15s;
+    }
+    .menu .btn:hover{ transform:translateX(4px); }
+    .menu .btn.active{
+    background:#eef2ff;
+    border-color:#c7d2fe;
+    }
+    
+    /* Zone contenu (droite) */
+    .content{
+    flex:1;
+    padding:16px;
+    }
+    
+ 
+    /* grille 3 colonnes pour grands écrans */
+    .dashboard{
+    display:grid;
+    grid-template-columns: 2fr 1fr 1fr; 
+    grid-auto-rows: 160px;
+    gap:var(--gap);
+    }
+    
+    /* Cartes génériques */
+    .card{
+    background:var(--panel);
+    border:1px solid #e5e7eb;
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    padding:12px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    font-weight:600;
+    color:var(--muted);
+    }
+    
+    /* placement des cartes pour ressembler au croquis */
+    .card-line{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-small{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    } 
+   
+    .card-tiles{ 
+    grid-column: 3 / span 1;
+    grid-row: span 1;
+    }
+    .card-bars{ 
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+    }
+    .card-rings{ 
+    grid-column: 3 / span 1;
+    grid-row: span 2;
+    gap:24px;
+    }
+    
+    /* Les deux ronds  */
+    .ring{
+    width:120px; height:120px;
+    border:10px solid #eceef1;
+    border-radius:50%;
+    }
+    
+
+    
+    /*  Responsive  */
+    /* Moyen écran: 2 colonnes */
+    @media (max-width: 1100px){
+    .dashboard{
+    grid-template-columns: 1fr 1fr;
+    }
+    .card-line{ grid-column: 1 / span 2; }
+    .card-small{ grid-column:auto; }
+    .card-bars{ grid-column: 1 / span 2; }
+    .card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
+    }
+    
+    /* Petit écran*/
+    @media (max-width: 750px){
+    .layout{ flex-direction:column; }
+    .sidebar{ width:auto; padding:12px 16px; }
+    .menu{ flex-direction:row; flex-wrap:wrap; }
+    .menu .btn{ flex:1 1 140px; }
+    .content{ padding:12px; }
+    .dashboard{ grid-template-columns: 1fr; }
+    .card-line,
+    .card-bars,
+    .card-rings{ grid-column: 1; }
+    .ring{ width:90px; height:90px; }
+    }
\ No newline at end of file
