/* $Id: styleISN.css 152 2018-03-03 12:36:10Z camier $ */
html,h1,h2,.copy-btn,.copy-btn:hover{
	/* background: url(degrade); */
	/* background: url(gray_glow.png); */
	/* background: url(metalabeille.jpg); */
	/* background: url(texture_beige.png); */
	/* background: url(texture_gris.jpg); */
	/* background: url(metal1.jpg); */
	background: url(texture_metal.jpg);
	
	background-position: center top;
	background-repeat: repeat;
    /* background-size: cover; */



}

html {
	/* background-color:#F7F7F7; */
	min-height: 100vh;
	filter:alpha(opacity=90);
	opacity:.90;	
}

body {
    margin: auto;
    width:75%;
    padding : 20px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    /* color:#111111; */
    background-color: #EEEEEE;
	/* border-left : 2px solid #EEEEEE; */
    /* border-right : 2px solid #EEEEEE; */
	min-height: 100vh;
	border-radius: 4px 4px;
}

/* pied de page, minimal pour le moment  */
body:after {
	clear: both;
	float: right;
	/* vertical-align : top; */
	/* background-color: #DDDDDD; */
	vertical-align: bottom; /* text-top; */
	color : #314843;
	font-style :italic;
	font-size:small;
	content:   " conception : t.camier " url(LOGO-COULEUR_150);
/* <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/fr/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/fr/88x31.png" /></a>;*/
	height: 35px; /*pour ajuster l'hauteur du pied de page*/
	margin-top: -35px;/*ces chiffres doivent être opposés*/
}

 /* Style the buttons that are used to open and close the accordion panel */
 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}
 /* Style the buttons that are used to open and close the accordion panel */

/*
Rouge brique clair : #CA3F3F
Rouge brique FONCE : #7F2727
Vert clair : #86B6A9
Vert FONCE : #314843
*/

h1,h2 {
	font-size: 22px;
	font-weight : bold;
	margin-top : 1em;
	color:white;
	text-shadow: black 0.1em 0.1em 0.2em;
	text-align:center;	
	padding:0.5em;
	border-radius: 15px 20px;
}

h1	{
	filter:alpha(opacity=85);
	opacity:.85;
}

h2 {
	filter:alpha(opacity=40);
	opacity:.40;
}

h3 {
	font-size: 20px;
	margin-top : 1em;
	margin-left: 2em;
	margin-right: 2em;
	/*text-align:left;*/
	color:white;
	background-color:#314843; 	/*Vert FONCE*/
    font-size:1em;
    margin-bottom:0px;
	padding:0.4em;
	border-radius: 10px 12px;
	box-shadow: 3px 2px 2px #86B6A9;
}

h4 {
	font-size: 20px;
	margin-top : 1em;
	margin-left: 2em;
	margin-right: 2em;
	/*text-align:left;*/
    color:white;	
	background-color:#86B6A9; 	/*Vert clair*/
    font-size:1em;
    margin-bottom:0px;
	padding:0.4em;
	border-radius: 10px 12px;
	box-shadow: 3px 2px 2px #314843;
}

h5 {
	font-size: 16px;
	margin-left: 28px;
	/* margin-left: 3em;    */
	margin-right: 28px;
	/* margin-right: 3em; */
	font-weight : normal;
    font-style : italic;
	margin-top : 6px;
	color : #314843;   			/*Vert FONCE*/
	background-color:#E9E9E9; 	/*gris TRES clair Nouveauté 2024 #EEEEEE*/
    /* border: 1px solid #314843; /*Nouveau 2024*/
	font-size:0.9em;
	padding:0.3em;
	border-radius: 5px 5px;
	box-shadow: 1px 1px 1px #CCCCCC; /*Nouveau 2024 , avant #314843*/
	/* Peut-être à retirer ? */
}

h6 {
	font-size: 16px;
	margin-left: 28px;
	/* margin-left: 3em;    */
	margin-right: 28px;
	/* margin-right: 3em; */
    font-weight : normal;
    font-style : italic;
    margin-top : 6px;
    color : #002F2F;
    background-color:#96B6A9;	/*HORS CHARTE vert intermédiaire*/
    /* border: 1px solid gray; /*Nouveau 2024*/
    font-size:0.9em;
	padding:0.3em;
	border-radius: 5px 5px;
	box-shadow: 3px 2px 2px #314843; /*Nouveau 2024*/
}

.but_h1, .but_h2 {
	font-size: 22px;
	font-weight : bold;
	color:#659F93;
	text-shadow: black 0.1em 0.1em 0.2em;
	text-decoration : none;
	text-align:center;
	background:none;
	border:none;
	cursor:pointer;
}

.but_h1:hover {
    text-decoration: underline;
}

.but_h5 {
	font-size: 16px;
	background:none;
	border:none;
	color:#314843;
	cursor:pointer;
}
	

.but_h6 {
	/*all: unset; /* Supprime tous les styles par défaut du bouton */
	font-size: 16px;
	background:none;
	border:none;
    color : #002F2F;
	cursor:pointer;
}

.centre{
	text-align:center;
}

p {
    margin:1%;
    text-align:justify;
}


#preliminaire {
   clear :both;
   background-color:#EEEEEE;
   font-size: 12px;
   margin: 0 15px;
   padding : 20px;
   color : black;
   border : thin solid #BBBBBB;
   margin : 1px;
}

.remarque {
    font-style:italic;
}

p.format1 {
    background-color:#CCCCCC;
}


li p { 				/* paragraphes inclus dans des li */
    margin: inherit;		/* pas de marge supp. */
}


.italique {
    font-size:16px;
    font-style:italic;
}

a {
    /* color: #658F83; */
	color: #659F93;
	/* text-shadow: #86B6A9 0.01em 0.01em; */
    text-decoration : none;
}

a:visited {
    text-decoration : none;
}


a:hover {
    /* background-color : white; */
    /* text-decoration : underline; */
}


div.manip, .encadre {
    border-left: 3px ;
    border-right:1px;
    border-left-style : solid;
    border-right-style : solid;
    border-color : red;
}

div.important {
    background-color : #FF9999;
    border : 2px solid red;
    color : black;
    border-radius : 8px;
}
span.important {
    color:white;
    background-color:red;
    font-weight:bold;
    padding: 0 4px;
    border-radius : 4px;
    margin:0px 2px;
}

tt {
    font-family : courier;
}

/* code, pre {
    /* background-color : #FFFF88;
	background-color : #EEFFFF;
    padding: 0 3px;
    font-family : courier;
    color : #0000FF;
} */

/* Styles pour le conteneur de code AJOUT 2024*/
.code-container {
	width: 100%;
	position: relative;
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #f9f9f9;
	margin: 10px 0;
	padding: 2px;
}

/* Styles du bouton copier */
.copy-btn {
	position: absolute;
	top: 7px;
	right: 10px;
	filter:alpha(opacity=85);
	opacity:.85;
	background: #86B6A9;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
}

.copy-btn:hover {
	filter:alpha(opacity=95);
	opacity:.95;
	background: #314843;
}
/* Fin AJOUT 2024*/

code, pre {
	background-color : #606060;
    padding: 3px 3px;
    font-family : courier;
    color : #fff8db; /* #ffffd4; */
	border-radius : 5px;
}

pre {
    /* width:%; */
    margin:5px 10px;
    /* margin:auto; */
	padding:7px 7px;
    border : solid thin #CCCCCC;
    width:98%;
	border-radius : 10px;
	overflow-x: auto;	/* 2024 */
	font-family: Consolas, "Courier New", monospace; /* 2024 */
}


.manip, div.important {
    width:70%;
    padding : 10px;
    margin: 5px;
}

div.manip {
    background-color : #EEEEEE;
    counter-increment: nummanip;
    margin-top: 5px;
}
div.manip:before {
    content: "Manip' " counter(nummanip, decimal)". ";
    color: #222222;
    font-weight:bold;
    
}

#auteurs  {
font-style:italic;
font-size:12px;
color:#314843;			/*Vert FONCE*/
}

.clear {
    clear:both;
}
/* IMAGES */
img {
    /* margin: 1% 2%; */
	margin: 0;
}

.cdc {
    display: block;
    margin-left: auto;
    margin-right: auto;
	width:200px;
}

.caption {
    font-size: xx-small;
    font-style: italic;
    text-align: center;
}
.bornee, .w600 {
    width:600px;
}
.w100 {
    width:100px;
}
.w200, .petite {
    width:200px;
}
.w400 {
    width:400px;
}
.w300 {
    width:300px;
}
.w800 {
    width:800px;
}
.wmax{
    width:95%;
}
.vignette64 {
    width:64px;
}
.droite {
    float: right;
    margin-left : 5px;
}

.gauche {
    float: left;
    margin-right:5px;
}

.robot, .images {
    text-align:center;
}
.cadrerobot, .cadreimages {
   background-color:#D0F5A9;
   padding:6px;
   border : solid thin #BBBBBB;
} 
/* FIN IMAGES */

/* table vérité */
table.verite {
    border : solid thin #888888;
    text-align : center;
    background-color : #999999;
    color:#333333;
    margin:auto;
}
table.verite th, table.verite td  {
    padding : 0px 10px;
}
table.verite th  {
    background-color : #CCCCCC;
}
table.verite td  {
    background-color : #EEEEEE;
}
table.verite td.highlight  {
    background-color : #FFFF88;
}
/* fin table vérité */

.commande {
    color : #0B610B;
    font-weight:bold;
}

.commjs {
    font-style:italic;
}

pre.poeme {
    clear :both;
    border-style: dotted;
    border-width: 1px;
    float: right;
    width:20%;
    font-size:small;
    background-color: #FFEEEE;
    color: #333333;
}

div.correction:before {
    content: "/!\\ Correction /!\\ ";
    color: #222222;
    font-weight:bold;

}

.correction {
    margin:5px 20px;
    padding:3px 10px;
    border : solid thin #8888FF;
    background-color: #CCCCFF;
    border-radius : 8px;

}


.specif {
    margin : 10px;
    padding : 10px;
    width:50%;
    border:thin solid #999999;
    background-color: white;
}

.equation {
    border-collapse:separate;
    border-spacing:12px;
    width:auto; 
    border:none;
    white-space:nowrap;
    padding:0px 20px;
    margin:0ex auto;    
}

.underline {
    text-decoration:underline;
}

/* Commentaires des rédacteurs, destinés aux rédacteurs.
   Devraient disparaître ou être masqués dans la version finale. */
.comment {
    background-color: #F4FF3A;
}
.todo {
    background-color: #F4FFFA;
}
.todo:before {
    content: "/!\\ TODO /!\\ ";
    color: red;
    font-weight:bold;
}
.comment, .todo {
    //    display: none;  // décommenter pour masquer les comment et les todo
    clear :both;
    border-style: solid;
    border-width: 2px;
    border-color: #FF456A;
    float: right;
    margin: 5px;
    margin-right:0px;

    padding: 5px;
    width: 30%;
    font-style:oblique;
    border-radius : 8px;
}
.comment i {
    font-style : normal;
}

.aparte {
    clear: both;
    display: block;
    background-color: #86B6A9;		/*Vert clair*/
    border-style: solid;
    border-width: 1px;
    border-color: #314843;			/*Vert FONCE*/
    float: right;
    font-size: smaller;
    margin: 5px;
    margin-right:0px;
    padding: 5px;
    width: 30%;
    font-style:italic;
    border-radius : 8px;
}

.aparte i, .aparte em {
    font-style : normal;
}

.aparte a {
    color: blue;		/* background is #77FF77 ~ green*/
}

#buttonAparte {
    float: right;
    color:white;
    background-color:green;
    padding: 0 4px;
    border-radius : 4px;
    border : 2px solid white;    
}

#buttonAparte:hover {
    border : 2px solid darkgreen;    
    color : green;
    background-color:white;
}

.tableau {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 80%;
	margin-left:auto;
	margin-right:auto;
    text-align: left;
    border-collapse: collapse;
}

.tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
.tableau td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('gradback.png') repeat-x;
}
.tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
.tableau tbody tr:hover td {
    background: #d0dafd url('gradhover.png') repeat-x;
    color: #339;
}
.tableau a:hover {
    text-decoration:underline;
}

/* Projets */

/* Input élargissante */
		#myInput {
		  background-image: url('../css/searchicon.png');
		  background-position: 10px 12px;
		  background-repeat: no-repeat;
		  // width: 50%;
		  font-size: 16px;
		  padding: 12px 20px 12px 40px;
		  border: 1px solid #ddd;
		  margin-bottom: 12px;
			-webkit-transition: width 0.4s ease-in-out;
			transition: width 0.4s ease-in-out;
			width: 215px;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
		}

		#myInput:focus {
			width: 50%;
		}
		
		#myUL {
		  list-style-type: none;
		  padding: 0;
		  margin: 0;
		}

		#myUL li a {
		  border: 1px solid #ddd;
		  margin-top: -1px; /* Prevent double borders */
		  background-color: #f6f6f6;
		  padding: 12px;
		  text-decoration: none;
		  font-size: 18px;
		  color: black;
		  display: block
		}

		#myUL li a:hover:not(.header) {
		  background-color: #eee;
		}
		
		#myTable {
		  border-collapse: collapse;
		  /* width: 100%; */
		  border: 1px solid #ddd;
		  /* font-size: 18px; */
		}

		#myTable th, #myTable td {
		  text-align: center;
		  padding: 12px;
		}

		#myTable tr {
		  border-bottom: 1px solid #ddd;
		}

		#myTable tr.header, #myTable tr:hover {
		  background-color: #f1f1f1;
		}
		
/* BOUTONS RADIO */
/* Masquer le bouton radio d'origine */
input[type=radio]{
    display: none;
}
/* Affichage par défaut du bouton radio personnalisé */
input[type=radio] + label:before {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-top: -3px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 17px;
    height: 17px;
}

/* Affichage du bouton radio personnalisé quand il est sélectionné */
input[type=radio]:checked + label:before {
    background: #314843;
    border-color: #314843; /*#D63D38;*/
    box-shadow: inset 0px 0px 0px 2px #fff;
}

input.largecase {
	width: 24px;
	height: 24px;
}

.element{
    margin-bottom:-6px; /*-28px;*/
}
label{
	cursor:pointer;
}

/*Tableau stylé*/
table.elegant a:link {
	color: #333;
	font-weight: bold;
	text-decoration:none;
}
table.elegant a:visited {
	color: #333;
	font-weight:bold;
	text-decoration:none;
}
table.elegant a:active,
table.elegant a:hover {
	color: #314843; /*#bd5a35;*/
	text-decoration:underline;
}
table.elegant {
	/*font-family:Arial, Helvetica, sans-serif;*/
	color:#333; /*333*/
	font-size:14px;
	text-shadow: 1px 1px 1px #fff;
	background:#eaebec;
	margin:20px;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}

table.elegant th {
	padding:21px 25px 22px 25px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
/*
table th:first-child {
	text-align: left;
	padding-left:20px;
}
*/
table.elegant tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table.elegant tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table.elegant tr {
	text-align: center;
	/* TEST 2023 padding-left:20px; */
}
/*
table td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
	http://johnsardine.com/example/simple-little-table/
}
*/
table.elegant td {
	padding:18px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}

table.elegant td.absent {
	background: #7F2727;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#8A2828), to(#7F2727));
	background: -moz-linear-gradient(top,  #8A2828,  #7F2727);
}

table.elegant td.apointer {
	background: #BBB;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#AAA));
	background: -moz-linear-gradient(top,  #555,  #AAA);
}

table.elegant td.absentclair {
	background: #CA3F3F;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#CB4040), to(#CA3F3F));
	background: -moz-linear-gradient(top,  #CB4040,  #CA3F3F);
}

table.elegant td.present {
	background: #bdd3d0;
	background: -webkit-gradient(linear, left top, left bottom, from(#aadbd3), to(#bdd3d0)); /*88B8B1 et 86B6A9*/
	background: -moz-linear-gradient(top,  #aadbd3,  #bdd3d0);
}

table.elegant td.pasdeprof {
	background: #bdd3d0; /*86B6A9*/
	background: -webkit-gradient(linear, left top, left bottom, from(#AAA), to(#BBB));
	background: -moz-linear-gradient(top,  #AAA,  #BBB);
}

table.elegant tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table.elegant tr:last-child td {
	border-bottom:0;
}
table.elegant tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
table.elegant tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}

/* 2024 ajout de .elegant */
table.elegant tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}

table.elegant tr.pair td {
	background: #86B6A9;
}

table.elegant tr.impair td {
	background: #fafafa;
}

table.elegant tr.pair_abs td {
	background: #CA3F3F;
}

table.elegant tr.impair_abs td {
	background: #fafafa;
}

/* marche de façon étrange, pas partout (iphone) */
table.elegant th.pseudoh3 {
	font-size: 20px;
	/* margin-top : 1em; */
	color:white;
	background:#314843; 	/*Vert FONCE*/
    margin-bottom:0px;
	padding:0.4em;
}

table.elegant th.pseudoh4 {
	font-size: 20px;
    color:white;	
	background:#86B6A9; 	/*Vert clair*/
    margin-bottom:0px;
	padding:0.4em;
}

table.elegant th.pseudoh5 {
	font-size: 18px;
    color:white;	
	background:#314843; 	/*Vert FONCE*/
    margin-bottom:0px;
	padding:0.4em;
}

table.elegant th.pseudoh5red {
	font-size: 18px;
    color:white;	
	background:#7F2727; 	/*Rouge brique FONCE*/
    margin-bottom:0px;
	padding:0.4em;
}

/* 2024 sept : test */
table.elegant tr.impair td.pseudoh5red {
	/* font-size: 18px; */
    color:white;	
	background:#7F2727; 	/*Rouge brique FONCE*/
    /* margin-bottom:0px; */
	/* padding:0.4em; */
}

table tr.pair:hover td {
	background: #86B6A9;
	background: -webkit-gradient(linear, left top, left bottom, from(#86B6A9), to(#314843));
	background: -moz-linear-gradient(top,  #86B6A9,  #314843);	
	color:#111;
}

table tr.impair:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#a0a0a0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #a0a0a0);	
	color:#111;
}

table tr.pair_abs:hover td {
	background: #CA3F3F;
	background: -webkit-gradient(linear, left top, left bottom, from(#CA3F3F), to(#7F2727));
	background: -moz-linear-gradient(top,  #CA3F3F,  #7F2727);	
	color:#111;
}

table {
	width:75%;
}
/*
Rouge brique clair : #CA3F3F
Rouge brique FONCE : #7F2727
Vert clair : #86B6A9
Vert FONCE : #314843
*/

/* ***************** */
/* Radio type iphone */
body {
	--cercle:16px;
	--largeur:38px;
	--bord:3px;
	--hauteur:22px;
}

.switch {
  position: relative;
  display: inline-block;
  width: var(--largeur);
  height: var(--hauteur);
}

.switch input {display:none;}

.slider, .sliderR {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before, .sliderR:before {
  position: absolute;
  content: "";
  height: var(--cercle);
  width: var(--cercle);
  left: var(--bord);
  bottom: var(--bord);
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #314843;
}

input:focus + .slider {
  box-shadow: 0 0 1px #314843;
}

input:checked + .sliderR {
  background-color: #7F2727;
}

input:focus + .sliderR {
  box-shadow: 0 0 1px #7F2727;
}

input:checked + .slider:before,input:checked + .sliderR:before {
  -webkit-transform: translateX(var(--cercle));
  -ms-transform: translateX(var(--cercle));
  transform: translateX(var(--cercle));
}

/* Rounded sliders */
.slider.round, .sliderR.round{
  border-radius: var(--hauteur);
}

.slider.round:before, .sliderR.round:before{
  border-radius: 50%;
}

/* box Zoom */
* {
	box-sizing: border-box;
}

.zoom {
	padding: 25px;
	transition: transform .2s;
	width: 150px;
	height: 150px;
	margin: 0 auto;
}

.zoom:hover {
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(1.5);
}

.zoom2 {
	padding: 3px;
	transition: transform .2s;
	width: 48px;
	height: 36px;
	margin: 0 auto;
}

.zoom2:hover {
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(1.5);
}

/* Pour avatars	 */
.chip {
	display: inline-block;
	padding: 0 25px;
	height: 90px;
	font-size: 16px;
	line-height: 90px;
	border-radius: 45px;
	background-color: #CCC;
}

.chip img {
	float: left;
	margin: 0 0px 0 -25px;
	height: 100px;
	width: 100px;
	border-radius: 50%;
}

/* iPhones 6,6s et 8*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (-webkit-min-device-pixel-ratio: 2) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	h1,h2 {
	   font-size: 36px;
	}
	
	h3,h4 {
	   font-size: 32px;
	}
	
	h5,h6 {
	   font-size: 32px;
	}

	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
	.element{
		font-size:24px;
	}
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}