/* CSS Atelier Paysan
	Webdesign Chris Gaillard
Rouge #9F0000 
 */
 
 
 /* ==========================================================================
   VARIABLES CSS ET COULEURS
   ========================================================================== */
:root {
    --color-primary: #9f0000; /*Rouge*/
    --color-accent: #face00; /*Jaune*/
    --color-dark: #000;
    --color-white: #fff;
    --color-light-gray: #dbdbdb;
    --color-medium-gray: #ececec;
    --color-border: #ccc;
    --max-width: 1200px;
    --border-radius: 5px;
    --transition: all 0.3s ease;
}

/* ==========================================================================
   RESET ET BASE
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    background: var(--color-light-gray) url('../img/bg-at2.jpg') fixed top center no-repeat;
    margin: 0;
    font-family: inherit;
}

#container {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1 {
    color: var(--color-dark);
    font-size: 2.1em;
    padding: 0;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

h1::after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    margin-top: 22px;
    margin-left: 8px;
    height: 5px;
    width: 100%;
    position: absolute;
    background-color: var(--color-primary);
}

h3 {
    line-height: 1.2em;
    margin: 1.5em 0 0.2em 0;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.5em;
}

small {
    color: var(--color-dark);
    font-size: 0.9em;
    font-weight: 900;
    margin-bottom: 0;
    display: block;
}

/* ==========================================================================
   LIENS ET BOUTONS
   ========================================================================== */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.more {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    display: inline-block;
    padding: 5px;
    font-size: 1em;
}

.more:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.grosbouton .blocs_titre
{  background: url("") ;
  padding: 0 !important;
			 border-radius: 5px;
		
			 transition: all 0.3s ease;
			 transform: scale(1);
}


.grosbouton .blocs_titre a
{  display: inline-block;
			 color: white !important;
			 padding: 10px 15px 9px 15px;
			 font-size: 18px;
			 font-weight: bold;
 			background-color: #9e0101 !important;
 			 transition: all 0.3s ease;
			 transform: scale(1);
		 	 border: 2px solid transparent;
}

.grosbouton .blocs_titre a:hover
{  display: inline-block;
			 color: #9e0101 !important;
			 padding: 10px 15px 9px 15px;
			 font-size: 18px;
			 font-weight: bold;
 			background-color:  white !important;
					 border: 2px solid #9e0101;

 	transform: scale(1.05);
}

a.grosbouton {
		display: inline-block;
			background-color: #9e0101;
			 color: white;
			 padding: 8px 15px 7px;
			 font-size: 18px;
			 border-radius: 5px;
			 font-weight: bold;
			 border: 2px solid transparent;
			 transition: all 0.3s ease;
			 transform: scale(1);

}

a.grosbouton:hover {
	background-color: white;
	color: #9e0101;	
	border: 2px solid #9e0101;
	transform: scale(1.05);
	text-decoration: none;}

a.grosbouton::before {content: "\f105";
					 font-family: 'Font Awesome 5 Free';	font-weight: 900; /* solid icon */
					 margin-right: 8px;
					 display: inline-block;}
					 






/* ==========================================================================
   HEADER ET NAVIGATION
   ========================================================================== */
header {
    width: 100%;
    clear: both;
    overflow: hidden;
    height: 341px;
}

#home header {
    height: 341px;
}

#mininavtop {
    position: absolute;
    right: 0;
    top: 0;
    width: 510px;
    background-color: var(--color-primary);
    height: 37px;
    padding: 5px 10px;
    font-size: 20px;
    z-index: 4;
}

#mininavtop::before {
    content: '';
    position: absolute;
    display: block;
    border: 0.95em solid var(--color-primary);
    z-index: 1;
    left: -1.9em;
    top: 0;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

#mininavtop a.spip_out,
#mininavtop a.spip_url,
#mininavtop a.external,
#mininavtop a[href^="https://"],
#mininavtop a.lock {
    padding-right: 0;
    background-image: none;
}

.logo-atelier-paysan {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.logo-atelier-paysan img {
    width: 326px;
}

#navigation {
    position: absolute;
    top: 270px;
    background-color: var(--color-white);
    width: 100%;
    z-index: 3;
}

#imagetop {
    width: 100%;
    height: 341px;
}

#header::before {
    content: "- ";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    width: 320px;
    height: 341px;
    background-color: rgba(0, 0, 0, 0.4);
}



#navigation .sf-menu li li a:hover.on{background-color:var(--color-primary);}


/* ==========================================================================
   RECHERCHE ET FORMULAIRES
   ========================================================================== */
form {
    font-size: 1.8em;
}

form #recherche {
    width: 100px;
    font-size: 10px;
    height: 18px;
    color: #999;
    margin: 0 15px 20px 15px;
    background: var(--color-white) url("../img/loupe.png") right no-repeat;
    padding: 0 5px;
    border-width: 0 5px 0 0;
}

form #recherche_topic {
    width: 200px;
    font-size: 10px;
    height: 18px;
    color: #999;
    margin: 0 15px 20px 15px;
    background: var(--color-white) url("../img/loupe.png") right no-repeat;
    padding: 0 5px;
    border-width: 0 5px 0 0;
}

.formulaire_recherche label,
.formulaire_recherche .submit,
.formulaire_recherche_topic label,
.formulaire_recherche_topic .submit {
    display: none;
}

.formulaire_recherche,
.formulaire_recherche_topics {
    display: inline-block;
    vertical-align: top;
}

.formulaire_formidable form {
    font-size: 1em;
}

.formulaire_formidable li {
    list-style-type: none;
}

.formulaire_formidable ul,
.formulaire_formidable ol {
    padding-left: 0;
}

span.obligatoire {
    display: none;
}

.obligatoire {
    font-weight: bold;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 0.9em;
    margin: 0 4px 20px 0;
    min-width: 167px;
    height: 30px;
    overflow: hidden;
    background: url(/squelettes/img/down_arrow_select.png) no-repeat right var(--color-border);
    color: var(--color-dark);
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 0 38px 0 2px;
    font-weight: normal;
}

option {
    background-color: var(--color-white);
    font-weight: normal;
    font-size: 0.9em;
    color: var(--color-dark);
}

#input_half,
#input_third {
    padding: 6px 6px 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-top: -2px;
    text-align: right;
}

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */
#fullcontent {
    position: relative;
    background-color: var(--color-white);
    padding: 0;
    clear: both;
    border-top: 5px solid var(--color-primary);
}

#fullcontent::before {
    content: '';
    position: absolute;
    display: block;
    border: 2em solid var(--color-primary);
    z-index: 1;
    left: 0;
    top: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

#main {
    padding: 35px 30px 30px 30px;
}

aside {
    padding: 55px 30px 0 30px;
    background-color: var(--color-medium-gray);
}

.fulcontenu {
    border-top: 5px solid var(--color-primary);
}

/* ==========================================================================
   BLOCS ET ÉLÉMENTS SPÉCIAUX
   ========================================================================== */
.blocgauche,
.bloctopic {
    border: 3px solid var(--color-primary);
    padding-bottom: 8px;
    margin-bottom: 60px;
}

.blocgauche h3,
.bloctopic h3 {
    color: var(--color-dark);
    font-size: 1.7em;
    padding: 0 5px 5px 0;
    background-color: var(--color-medium-gray);
    display: inline-block;
    position: relative;
    top: -20px;
    left: -5px;
    overflow: hidden;
    text-transform: uppercase;
    margin-bottom: -10px;
}

#main .blocgauche,
#main .bloctopic {
    margin: 50px 0 -20px 0;
}

#main .blocgauche h3,
#main .blocgauche .basbloc,
#main .bloctopic h3,
#main .bloctopic .basbloc {
    background-color: var(--color-white);
}

.blocgauche .libre,
.bloctopic .libre {
    margin: -10px 20px 10px 20px;
}

.blocgauche p {
    margin-top: 0;
}

.blocgauche p img {
    padding-bottom: 10px;
}

.blocgauche .unevenement{margin-left:20px}

.basbloc {
    position: relative;
    display: inline-block;
    text-align: right;
    background-color: var(--color-medium-gray);
    padding: 0 0 0 6px;
    top: 0;
    right: -5px;
    float: right;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1em;
}

/* ==========================================================================
   ÉLÉMENTS SPÉCIALISÉS
   ========================================================================== */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

hr {
    color: var(--color-white);
    background-color: var(--color-white);
}

.hrred {
    background-color: var(--color-primary);
}

.spip_documents_left {
    clear: both;
    margin: 0 20px 20px 0;
}

.ct-top {
    position: relative;
    min-height: 200px;
    min-width: 200px;
}

.ct-top img {
    max-width: 300px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

address {
    font-style: normal;
    text-align: right;
    margin: 40px;
    font-size: 1em;
}

/* ==========================================================================
   NAVIGATION ET LIENS SPÉCIAUX
   ========================================================================== */
#flag {
    display: inline-block;
}

#flag img {
    margin-right: 5px;
}

#flag img.off {
    filter: brightness(80%);
}

#flag img.off:hover {
    filter: brightness(100%);
}

#social {
    display: inline;
    text-align: right;
}

#social img {
    margin-right: 2px;
}

#social a:hover img {
    opacity: 0.5;
}

.forumlink {
    margin: 0 0 0 10px;
    top: 2px;
    position: relative;
    color: var(--color-accent);
    line-height: 0.9em;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 900;
    display: inline-block;
}

.forumlink:hover {
    color: var(--color-white);
}

/* ==========================================================================
   ACTUALITÉS ET CONTENU
   ========================================================================== */
#actuforumhome {
    width: 100%;
    margin-top: 40px;
}

#article #actuforumhome h3,
#article #actuforumhome h2 {
    color: var(--color-dark);
    font-size: 1.6em;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#article #actuforumhome h3::after,
#article #actuforumhome h2::after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    margin-top: 15px;
    margin-left: 8px;
    height: 5px;
    width: 100%;
    position: absolute;
    background-color: var(--color-primary);
}

#actuscol {
    padding-right: 20px;
}

.actuabstract {
    margin-bottom: 20px;
    padding-bottom: 10px;
    clear: both;
    overflow: hidden;
    border-bottom: 1px dotted var(--color-border);
}

#evenements .actuabstract img {
    float: right;
    margin: 0 0 10px 20px;
}

#evenements .actuabstract a img {
    border: 4px solid;
}

.actuhomelink {
    display: block;
    overflow: hidden;
    padding: 3px 0 8px 3px;
}

.actuhomelink:hover {
    background-color: #ffdede;
    text-decoration: none;
}

#actuscol img {
    margin: 8px 0 0 0;
}

#rubrique #actuscol img {
    margin: 5px 20px 20px 0;
}

#actuscol form,
#actuscol embed,
#actuscol iframe {
    margin: 0 20px;
}

#home #actuscol h3 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color-primary);
    margin: -1px 0 2px 0;
}

#actuscol small {
    margin: 0;
}

#actuscol p {
    margin: 10px 0 4px 20px;
    line-height: 1.3em;
    font-size: 1em;
}

#actuscol .more {
    padding: 2px 5px 1px;
    font-size: 0.9em;
}

.dateactu {
    font-weight: 700;
    display: block;
    font-size: 0.9em;
}

.allactus {
    margin: -10px 0 10px;
}

/* ==========================================================================
   FORUM
   ========================================================================== */
#forumcol {
    padding-left: 20px;
    margin-bottom: 50px;
}

#forumcol ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#forumcol h4 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color-primary);
    margin: -5px 0 2px 0;
}

#forumcol ul li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--color-border);
    line-height: 1.3em;
}

/* ==========================================================================
   ISOTOPE ET GRILLES
   ========================================================================== */
.element-item {
    width: 180px;
    height: 170px;
    font-size: 0.95em;
    line-height: 1em;
    margin: 0 5px 15px 0;
    color: var(--color-white);
    display: block;
}



.element-item p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 -5px;
    padding: 0 0px 0 10px;
    z-index: 2;
    text-align: center;
}

.element-item .symbol {
    font-weight: 900;
    line-height: 1.1em;
    font-size: 1.15em;
    margin-top: 10px;
    z-index: 10;
    position: relative;
    width: 180px;
}

.element-item .weight {
    position: relative;
}

.element-item .thedate {
    position: absolute;
    width: 180px;
    bottom: 5px;
}

.element-item.passed .symbol,
.element-item.passed .weight,
.element-item.passed .thedate {
    opacity: 0.6;
}

/* ==========================================================================
   FORMATIONS
   ========================================================================== */
.formation .element-item {
    width: 100%;
    height: auto;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    padding: 10px;
    border-radius: 10px;
}

.formation .element-item:hover {
    background-color: #eee;
    text-decoration: none;
}

.formation .element-item .symbol {
    width: 100%;
}

.formation .element-item .thedate {
    width: 100%;
    position: relative;
}

.formation .element-item .titre {
    font-weight: bold;
    font-size: 20px;
}

.formation .element-item img {
    position: relative;
    margin-top: -5px;
    margin-right: 5px;
}

.formation .element-item p {
    text-align: left;
    text-shadow: none;
    margin: 0 0 0 -5px;
}

.formation .element-item .theme {
    margin: 0 0 5px 0;
}

.formation .element-formation .theme {
    margin: 10px 0 -20px 0;
}

.formation .element-item .theme .themeformation,
.formation .element-formation .theme span {
    margin: 5px;
    color: var(--color-white);
    font-weight: 500;
    font-size: 18px;
    padding: 10px 10px 5px 30px;
    position: relative;
    display: inline-block;
    border-radius: var(--border-radius);
}

.formation .element-item .theme .themeformation::before,
.formation .element-formation .theme .themeformation::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 20px;
    height: 18px;
    background-image: url('https://www.latelierpaysan.org/squelettes/img/ecroutheme.png');
    background-size: cover;
    background-repeat: no-repeat;
    top: 7px;
}

.mecaniqueagricole .themeformation {
    background-color: #1e37b8;
}

.autrestechnologiespaysannes .themeformation {
    background-color: #1db893;
}

.travaildubois .themeformation {
    background-color: #b8841d;
}

.travaildumetal .themeformation {
    background-color: #b81d1f;
}

.dateduree,
.lieuorga {
    display: flex;
}

.dateduree {
    margin-bottom: 5px;
}

/* ==========================================================================
  PLANS
   ========================================================================== */

#tutos .element-item {
    width: 180px;
    height: 270px;
    color: var(--color-dark);
    background-color: #eee;
    padding: 5px;
    border-radius: var(--border-radius);
}

#tutos .element-item:hover {
    text-decoration: none;
    background-color: #d8d8d8;
}

#tutos .element-item p {
    height: 90px;
    text-align: center;
}



/* ==========================================================================
   BOUTONS ET CONTRÔLES
   ========================================================================== */
button.button {
    border: 0;
    padding: 3px 7px;
    margin-bottom: 3px;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
}

button.button:hover,
button.button.is-checked {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.button-group {
    margin: 5px 0 10px 0;
    text-align: left;
}

.ui-group {
    margin-right: 0;
}

/* ==========================================================================
   BLOCS SPÉCIAUX ET TITRES
   ========================================================================== */
.blocs_titre {
    background: url("http://www.latelierpaysan.org/coin.png") no-repeat !important;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 3px 15px 3px 10px !important;
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: normal;
}

.blocs_titre:hover {
    background-color: var(--color-primary) !important;
}

.blocs_titre a {
    color: var(--color-primary);
}

.blocs_titre:hover a {
    text-decoration: none;
    color: var(--color-white);
}

.blocs_titre a::after {
    content: " ⬆ ";
    font-size: 0.9em;
    padding-left: 10px;
    color: var(--color-primary);
}

.blocs_replie a::after {
    content: " ⬇ ";
    font-size: 0.9em;
		color:white;
}

.grosbouton .blocs_titre {
    background: none;
    padding: 0;
    border-radius: var(--border-radius);
    transition: var(--transition);
    transform: scale(1);
}

.grosbouton .blocs_titre a {
    display: inline-block;
    color: var(--color-white);
    padding: 10px 15px 9px 15px;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--color-primary);
    transition: var(--transition);
    transform: scale(1);
    border: 2px solid transparent;
}

.grosbouton .blocs_titre a:hover {
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    transform: scale(1.05);
}

/* ==========================================================================
   NAVIGATION ET PAGINATION
   ========================================================================== */
#suivant,
#precedent {
    border: 3px solid var(--color-primary);
    display: block;
    padding: 5px;
    margin-bottom: 20px;
}

#suivant::before {
    content: "◄";
    display: block;
    float: left;
    font-size: 35px;
    margin: -5px 10px 10px 0;
}

#precedent::before {
    content: "►";
    display: block;
    float: right;
    font-size: 35px;
    margin: -5px 0 10px 10px;
}

#suivant:hover,
#suivant:hover small,
#precedent:hover,
#precedent:hover small {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

#ariane + h1 {
    margin-top: 5px;
}

#suivant-precedent {
    margin-bottom: 50px;
}

.pagination-items li {
    display: inline;
}

.pagination-items li::after {
    content: "  | ";
    margin: 0 3px;
}

/* ==========================================================================
   PLAN DU SITE ET FOOTER
   ========================================================================== */
#plandusite {
    background-color: #e2e2e2;
    padding: 20px 30px;
}

#plandusite ul {
    list-style-type: none;
    padding: 0 20px 0 5px;
    margin: 0 0 0 0;
}

#plandusite ul a {
    color: var(--color-dark);
}

#plandusite h4 {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 1.1em;
}

#plandusite .mod {
    margin-bottom: 20px;
}

.navplans h3 {
    margin-bottom: 5px;
    font-size: 1.15em;
}

.navplans ul {
    margin: 0 0 35px 0;
}

.newsletter h3 {
    margin-bottom: -20px;
}

footer {
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 10px 30px;
    font-weight: normal;
    font-size: 0.95em;
    margin-bottom: 100px;
    line-height: 1.2em;
    height: 80px;
}

footer a {
    color: var(--color-white);
}

/* ==========================================================================
   DOCUMENTS ET LIENS SPÉCIAUX
   ========================================================================== */
#lesdocs {
    overflow: hidden;
    margin-top: 20px;
}

#lesdocs a {
    display: block;
    background-color: var(--color-primary);
    float: left;
    width: 150px;
    margin: 0 10px 10px 0;
    text-decoration: none;
    color: var(--color-white);
    height: 250px;
}

#lesdocs a span {
    display: block;
    padding: 10px;
    font-size: 1em;
    text-align: center;
}

#lesdocs a:hover {
    background-color: var(--color-primary);
    border: 3px solid var(--color-primary);
}

.pageusages a.pdf {
    padding: 3px 0 0 30px;
    height: 40px;
    display: block;
    background: url("http://www.latelierpaysan.org/squelettes/img/download.png") no-repeat;
}

.descriptiondoc {
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 20px;
    color: var(--color-dark);
}

.datedoc {
    margin: 0;
    font-size: 0.8em;
}

.titredoc {
    font-size: 1.1em;
    
}

.allyoutube {
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 5px 10px;
    margin: 20px 0 0 0;
    display: inline-block;
    padding-right: 10px;
    background-image: none;
}

.allyoutube:hover {
    background-color: var(--color-dark);
    text-decoration: none;
}


/* ==========================================================================
   MOTS-CLÉS ET MÉTADONNÉES
   ========================================================================== */
#motclef {
    margin-bottom: 20px;
    font-weight: 900;
}

#lesmotsclf {
    margin: 10px 0 30px;
    font-size: 1.05em;
}

.listmotscle {
    margin: -20px 0 20px 0;
    font-size: 0.9em;
}

.listmotscle a {
    color: #ce7267;
}

.menulisteusage {
    list-style-type: none;
    padding: 0;
}

.menulisteusage li {
    margin-bottom: 10px;
}

.menulisteusage a.on {
    font-weight: bold;
}

/* ==========================================================================
   MULTI-COLONNES ET INDEX
   ========================================================================== */
#multicolumn {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-rule: 1px dotted #cbcefb;
    -moz-column-rule: 1px dotted #cbcefb;
    -o-column-rule: 1px dotted #cbcefb;
    column-rule: 1px dotted #
    
    
    }
    
    
    
    
.smalltexte{font-size:0.75em ;}
.bigtexte{font-size:1.3em}
.texterouge{color:#9f0000;}
.surlignerouge{color:white; background-color:#9f0000;}
.surlignejaune{background-color:#face00;}
.grostitrerouge{color:#9f0000; font-weight:900; font-size:25px}
.blocrouge{color:white; background-color:#9f0000; padding:10px; margin:20px 0;}
.blocjaune{background-color:#face00; padding:10px; margin:20px 0;}

.quatrecol {display:flex; flex-wrap:wrap; margin-bottom:20px;}
.quatrecol div{width:24%; margin-right:1%;}

.deuxcol {display:flex; margin:-15px 0 20px 0; }
.deuxcol div{ margin:0 1% 0 0}
.deuxcol div img{margin-top:-10px}

      
      
      .deuxcolonnes{display:flex; justify-content:space-around; text-align:center; margin:70px 0}

.deuxcolonnes div a{display:block; border:1px solid #9e0101; width:300px; border-radius:20px; 
					box-shadow:2px 2px 5px #aaa; font-weight:bold; font-size:17px;}


.deuxcolonnes div a:hover, .blocflex a:hover{ background-color:#eae0e0; text-decoration:none;}


.blocflex {display:flex; flex-wrap:wrap; margin:50px 0;}


.blocflex a{width:31%;
		   Margin: 1%;
			border:1px solid #9e0101;
			border-radius:10px;
		   box-shadow:2px 2px 5px #aaa; 
			font-weight:bold; 
			font-size:17px;
			text-align:center;
			padding:50px 20px ;
			background:url('https://www.latelierpaysan.org/IMG/png/boulon-jaune.png') no-repeat ;
			background-position: top 15px center;
		   }


    #blocpictofroamtion{line-height:1.7em}

#blocpictofroamtion img{margin-right:4px}