Commit 479f393a authored by piks3l's avatar piks3l

[fix] Fixing layout on index

parent 4139a177
......@@ -7,8 +7,7 @@ bleu-vert: #003948
/*Général*/
body, div, h1, h2, h3, a, bouton, p {
font-family:Verdana, Arial, "Arial Black", "Times New Roman", serif;
font-size:1em;
font-family: "Helvetica Neue", Verdana, Arial, "Arial Black", "Times New Roman", serif;
line-height:1.24em;
color:#003948;
margin:0;
......@@ -29,6 +28,24 @@ bleu-vert: #003948
body {font-size:120%; width:100%;}
}
.btn-default{
display:block
padding: 6px, 12px;
background-image: -webkit-linear-gradient(top);
background-image: -moz-linear-gradient(top);
background-image: -ms-linear-gradient(top);
background-image: -o-linear-gradient(top);
background-image: linear-gradient(to bottom);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
}
.panel-title{
text-align: center;
}
/* ----------------------------------------------------- */
/* Bande haut --------------------*/
......@@ -162,7 +179,10 @@ bleu-vert: #003948
#main p, #main2 p {
text-align:justify;
font-size: .9em;
/*font-size: .9em;*/
line-height: 1.5;
margin-bottom: 10px;
}
#main ul {
......@@ -277,12 +297,14 @@ bleu-vert: #003948
}
.pageSection h2 {
font-size: 1.1em;
/*font-size: 1.1em;*/
text-align:justify;
}
.pageSection p {
padding:0 1em;
line-height: 1.5;
margin-bottom: 10px;
}
.pageSection ul {
......
......@@ -124,7 +124,7 @@
<p>La directive a instauré une autorité de contrôle dans chaque État, chargée d'en faire respecter les règles auprès des administrations et des entreprises. En France, c'est la Commission nationale de l'informatique et des libertés (ou la <a href="http://www.cnil.fr/">CNIL</a>), qui existait déjà depuis 1978, qui se charge de ces missions. </p>
<p>Cependant, toutes les autorités nationales de protection des données personnelles ne bénéficient pas des mêmes ressources et du même mandat en fonction de l’État membre dans lequel elles se situent. La majorité de ces autorités nationales sont dénuées d’un pouvoir de sanction dissuasif et de moyens leur permettant de faire respecter les lois. C'est le cas par exemple de l'autorité irlandaise qui a <a href="http://www.wedemain.fr/Ce-petit-village-irlandais-devenu-le-garant-de-nos-vies-privees-sur-Internet_a1336.html">de très faibles moyens juridiques et financiers</a> pour contraindre les entreprises à respecter les lois en vigueur, tandis que de très nombreuses entreprises multinationales comme Facebook, LinkedIn ou Twitter choisissent l’Irlande pour domicilier leur filiale européenne (notamment à des fins d’optimisation fiscale).</p>
<p>Ainsi, l’autorité en charge de soumettre ces entreprises multinationales au cadre légal, national et européen, en matière de protection des données se situe dans ce bâtiment, partagé par un supermarché discount. </p>
<img src="img/cnil_irl.jpeg">
<div align="center" ><img src="img/cnil_irl.jpeg"></div>
<p>D'autre part, l'évolution d'Internet accroît la nécessité de revoir les règles de la directive de 1995. Rappellons qu'en 1995 Google n'existait même pas ! C'est pourquoi la Commission européenne (le « gouvernement » de l'Union européenne) a proposé en janvier 2012 un nouveau règlement européen qui est en négociation depuis lors. Ces négociations devraient se terminer en décembre 2015.</p>
<h2> Qu'est-ce qu'un règlement européen et qu'est-ce que celui-ci peut changer&nbsp;?</h2>
......@@ -211,10 +211,10 @@
<div class="panel-group" id="tableLoi" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse1" aria-expanded="true" aria-controls="tableCollapse1"> Consentement explicite</a>
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse1" aria-expanded="true" aria-controls="tableCollapse1"> Consentement explicite <small>[Cliquez pour dérouler]</small></a>
<p> Aucune de vos données ne pourra être collectée, traitée ou revendue sans que vous n'ayez clairement dit «&nbsp;j'accepte&nbsp;», en connaissance de cause.</p>
</h4>
</h3>
</div>
<div id="tableCollapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead1">
<div class="panel-body">
......@@ -233,10 +233,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead2">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse2" aria-expanded="false" aria-controls="tableCollapse2"> Intérêt légitime</a>
<p>Nos données pourraient être collectées et exploitées sans notre consentement, pour le simple «&nbsp;intérêt légitime&nbsp;» d'une entreprise.</p>
</h4>
</h3>
</div>
<div id="tableCollapse2" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead2">
<div class="panel-body">
......@@ -258,10 +258,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead3">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse3" aria-expanded="false" aria-controls="tableCollapse3">Données pseudonymes</a>
<p>Nos données pourraient être exploitées sans notre consentement si elles n'indiquent pas notre nom.</p>
</h4>
</h3>
</div>
<div id="tableCollapse3" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead3">
<div class="panel-body">
......@@ -278,9 +278,9 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead4">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse4" aria-expanded="false" aria-controls="tableCollapse4">Profilage</a><p> <p>Le profilage permet de classer avec une certaine probabilité un individu dans une catégorie particulière afin de prendre des décisions adaptées à lui et de prédire ses futurs choix. Le profilage est donc principalement un outil de prédiction du comportement des personnes recensées.</p>
</h4>
</h3>
</div>
<div id="tableCollapse4" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead4">
<div class="panel-body">
......@@ -303,10 +303,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead5">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse5" aria-expanded="false" aria-controls="tableCollapse5">Le droit à l'effacement (appelé aussi droit à l'oubli)</a>
<p>Le droit à l'oubli n'est pas un droit consacré <b>en droit français</b>, mais on peut l'associer à l'article 6 de la <a href="http://www.cnil.fr/documentation/textes-fondateurs/loi78-17/">Loi Informatique et Libertés</a> qui impose à toutes structures publiques ou privées de définir une durée de conservation des données collectées. La loi n'impose pas de durée précise, car elle dépend de la finalité et de la proportionnalité du traitement. Cependant la loi est précise sur un point : les données ne peuvent être gardées que tant que cela est nécessaire.</p>
</h4>
</h3>
</div>
<div id="tableCollapse5" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead5">
<div class="panel-body">
......@@ -321,10 +321,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead6">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse6" aria-expanded="false" aria-controls="tableCollapse6">Le droit à la portabilité des données</a>
<p>La <b>portabilité</b> des données correspond à la possibilité pour l'internaute de demander le transfert de ses données vers de nouveaux prestataires (pour le mail par exemple, il s'agit des correspondances, mais aussi des contacts). Elle se fonde sur le même principe que la portabilité des numéros de téléphone, que l'on pourrait par exemple appliquer au mail ou a des services aux fonctionnalités équivalentes.</p>
</h4>
</h3>
</div>
<div id="tableCollapse6" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead6">
<div class="panel-body">
......@@ -338,10 +338,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead7">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse7" aria-expanded="false" aria-controls="tableCollapse7">Transfert encadré</a>
<p>Ne pas confondre transfert de données en vue de leur traitement et disponibilité des données. En effet, le simple fait de mettre des données personnelles sur un site visible dans le monde entier n'implique pas qu'un traitement de données soit fait dans chacun des pays du monde. Dans ce cas précis, elles ne sont que disponibles.</p>
</h4>
</h3>
</div>
<div id="tableCollapse7" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead7">
<div class="panel-body">
......@@ -356,9 +356,9 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead8">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tableLoi" href="#tableCollapse8" aria-expanded="false" aria-controls="tableCollapse8">Amendes renforcées</a>
</h4>
</h3>
</div>
<div id="tableCollapse8" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead8">
<div class="panel-body">
......@@ -371,10 +371,10 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead9">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parents="#tableLoi" href="#tableCollapse9" aria-expanded="false" aria-controls="tableCollapse9">Fuite de données</a>
<p>Qu'entend-on par « fuite de données personnelles » ? Dans le projet de règlement, cette expression regroupe les violations des systèmes de sécurité qui aboutissent de manière accidentelle ou illégale à la destruction, la perte ou l'altération des données. Cette expression recouvre aussi la divulgation ou la mise en place d'accès à des données personnelles transmises, stockées ou traitées de toute autre manière.</p>
</h4>
</h3>
</div>
<div id="tableCollapse9" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead9">
<div class="panel-body">
......@@ -386,9 +386,9 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead10">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parents="#tableLoi" href="#tableCollapse10" aria-expanded="false" aria-controls="tableCollapse10">Vos droits de contrôle (sur le traitement des données)</a>
</h4>
</h3>
</div>
<div id="tableCollapse10" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead10">
<div class="panel-body">
......@@ -418,9 +418,9 @@
</div>
<div class="panel panel-default">
<div class="panel-head" role="tab" id="tableHead11">
<h4 class="panel-title">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parents="#tableLoi" href="#tableCollapse11" aria-expanded="false" aria-controls="tableCollapse11">Obligations pour celui qui traite les données </a>
</h4>
</h3>
</div>
<div id="tableCollapse11" class="panel-collapse collapse in" role="tabpanel" aria-labelled-by="tableHead11">
<div class="panel-body">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment