diff --git a/Controleur/ControleurRoles.php b/Controleur/ControleurRoles.php
new file mode 100644
index 00000000..8d878a84
--- /dev/null
+++ b/Controleur/ControleurRoles.php
@@ -0,0 +1,22 @@
+<?php
+require_once 'Framework/Controleur.php';
+require_once 'Modele/Utilisateur.php';
+require_once 'Modele/Menuvueutilisateur.php';
+
+class ControleurRoles extends Controleur 
+{
+	private $utilisateur;
+	
+    public function __construct() {
+		$this->menuvue = new Menuvueutilisateur();
+		$this->menuvue->getMenuVue('Roles');
+		
+		$this->utilisateur = new Utilisateur();
+    }
+    public function index() 
+	{
+		$profil = $this->utilisateur->getListeProfilCode();		
+		
+		$this->genererVue(array('profil' => $profil));
+    }
+}
\ No newline at end of file
diff --git a/Vue/Roles/index.php b/Vue/Roles/index.php
new file mode 100644
index 00000000..5166672b
--- /dev/null
+++ b/Vue/Roles/index.php
@@ -0,0 +1,95 @@
+<?php $this->titre = "INTER SANTE - Configuration des Accès"; ?>
+
+<div id="div_liste" class="container-fluid" style="padding-top: 20px; padding-bottom: 20px;">
+    
+    <div class="page-header" style="margin-top: 0; border-bottom: 2px solid #337ab7; padding-bottom: 15px;">
+        <div class="row">
+            <div class="col-xs-2 col-sm-1">
+                <div style="background-color: #337ab7; color: #fff; padding: 15px; border-radius: 6px; text-align: center;">
+                    <span class="glyphicon glyphicon-lock" style="font-size: 24px;"></span>
+                </div>
+            </div>
+            <div class="col-xs-10 col-sm-11">
+                <h1 style="margin-top: 0; color: #337ab7; font-weight: bold; font-size: 24px;">
+                    <?= _("Gestion des Menus & Droits") ?>
+                </h1>
+                <p class="text-muted"><?= _("Configurez les accès au menu principal selon le profil utilisateur RH") ?></p>
+            </div>
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-body" style="background-color: #f9f9f9;">
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="form-group">
+                        <label for="codeProfil" class="control-label" style="text-transform: uppercase; font-size: 11px; color: #666;">
+                            <span class="glyphicon glyphicon-user" style="margin-right: 5px;"></span>
+                            <?= _("Profil Utilisateur cible") ?>
+                        </label>
+                        <div class="input-group input-group-lg">
+                            <select class="form-control" 
+                                    id="codeProfil" 
+                                    name="codeProfil" 
+                                    required 
+                                    onChange="javascript:afficher_menu_principal_profil_rh();"
+                                    style="font-weight: bold;">
+                                <?php liste_options($profil, ""); ?>
+                            </select>
+                            <span class="input-group-addon">
+                                <span class="glyphicon glyphicon-search"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-7" style="margin-top: 25px;">
+                    <div class="alert alert-info" style="margin-bottom: 0;">
+                        <table style="width: 100%;">
+                            <tr>
+                                <td style="width: 40px; vertical-align: middle;">
+                                    <span class="glyphicon glyphicon-info-sign" style="font-size: 20px;"></span>
+                                </td>
+                                <td>
+                                    <small><?= _("La sélection d'un profil chargera automatiquement la liste des menus disponibles pour modification.") ?></small>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="div_menu_profil" class="well" style="min-height: 400px; background-color: #ffffff; border: 2px dashed #ccc; text-align: center; margin-top: 20px;">
+        <div style="margin-top: 100px; color: #999;">
+            <span class="glyphicon glyphicon-list-alt" style="font-size: 60px; margin-bottom: 20px;"></span>
+            <h3><?= _("En attente de sélection") ?></h3>
+            <p><?= _("Veuillez choisir un profil ci-dessus pour gérer ses accès.") ?></p>
+        </div>
+    </div>
+
+</div>
+
+<style>
+    /* Ajustements manuels car Bootstrap 3 n'a pas les utilitaires de bordure modernes */
+    .well {
+        box-shadow: none;
+        -webkit-box-shadow: none;
+    }
+
+    #div_menu_profil:not(:empty) {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background-color: transparent;
+    }
+
+    /* Simulation du comportement "animate" en CSS simple */
+    .animate-fade {
+        animation: fadeIn 0.5s;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+</style>
\ No newline at end of file