adHoc.71site.fr

#boite_deploiementA, #boite_deploiementB, #boite_deploiementC { /*bouton à déployer*/
	width:22vw; /*largeur : ici en valeur fixe mais proportionnelle*/
	height:60px; /*hauteur*/
	margin:0 auto;
}
#boite_deploiementA h5, #boite_deploiementB h5, #boite_deploiementC h5 { /*attributs des titres des boutons*/
	position:relative;
	height:60px; /*hauteur*/
	z-index:2; /* z-index supérieur superposant leur bandeau déroulant */
	font-weight:bold; /* ou normal */
	font-size:1.5vw; /*taille du texte : unité proportionnelle*/
	border:1px dotted #555555; /*bordure du bouton : épaisseur, nature, couleur*/
	background: #888888; /*couleur de fond*/
	border-radius:0px; /*arrondis*/
}
#boite_deploiementA h5 a, #boite_deploiementB h5 a, #boite_deploiementC h5 a { /*attributs des liens sur les boutons*/
	display:block;
	padding:12px; /*marges intérieures des boutons*/
	text-align:left; /*alignement du texte : left center right*/
	color:#444444; /*couleur du texte*/
	text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiementA h5 a:hover, #boite_deploiementB h5 a:hover, #boite_deploiementC h5 a:hover { /*attributs des liens survolés sur les boutons*/
	color:#000000; /*couleur du texte au survol*/
}
.deploiement { /*Bouton et Bandeau déroulant*/
	width:100%;
	height:1px; /*IMPORTANT*/
	float:left;
	margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}

.deploiement div { /*Attributs du Bandeau déroulant*/
	position:relative;
	z-index:1; /* z-index inférieur à celui de leur bouton */
	background:#000000; /*couleur du fond*/
	padding:10px; /*marges intérieures du bandeau déroulant*/
	margin-top:-5px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
	font-size:.9em; /*taille du texte*/
	color:#eeeeee; /*couleur du texte*/
	border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
	transform:scaleY(0); /*échelle 0 : donc non visible*/
	transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
	transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement:hover div { /*Attributs du bandeau déroulant au survol du bouton ou du bandeau*/
	transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement div p, .deploiement div p a, .deploiement div p a:hover { /*IMPORTANT : ne pas modifier*/
	background:transparent;
	padding:0;
}
@media screen and (max-width: 760px), screen and (max-device-width: 760px) { /* inférieur à 760px de largeur (MOBILE) */
#boite_deploiementA, #boite_deploiementB, #boite_deploiementC { /*bouton à déployer*/
	width:90vw; /*largeur : ici en valeur fixe mais proportionnelle pour occuper presque toute la colonne*/
	height:60px; /*hauteur*/
	margin:0 auto;
}
#boite_deploiementA h5, #boite_deploiementB h5, #boite_deploiementC h5 { /*attributs des titres des boutons*/
	font-size:6vw; /*taille du texte : unité proportionnelle*/
}
#boite_deploiementA h5 { /*attributs des titres des boutons*/
	z-index:6; /* z-index ordonné de haut en bas */
}
#boite_deploiementA .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:5; /* z-index ordonné de haut en bas */
}
#boite_deploiementB h5 { /*attributs des titres des boutons*/
	z-index:4; /* z-index ordonné de haut en bas */
}
#boite_deploiementB .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:3; /* z-index ordonné de haut en bas */
}
#boite_deploiementC h5 { /*attributs des titres des boutons*/
	z-index:2; /* z-index ordonné de haut en bas */
}
#boite_deploiementC .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:1; /* z-index ordonné de haut en bas */
}
} /* fin dispositions max-width: 760px */