/* - Feuille de styles © La Félixe - */
/* - Certains passages inspirés par Normalize.css - */


/* = POLICE STANDARD SANS-SERIF = */
@font-face { font-family:'robotolight'; font-style: normal; font-weight: normal; src: url('fonts/roboto-light-webfont.woff2') format('woff2');}
@font-face { font-family:'robotolight_italic'; font-style: italic; font-weight: normal; src: url('fonts/roboto-lightitalic-webfont.woff2') format('woff2');}
@font-face { font-family:'robotobold'; font-style: normal; font-weight: bold; src: url('fonts/roboto-bold-webfont.woff2') format('woff2');}
@font-face { font-family:'robotobold_italic'; font-style: italic; font-weight: bold; src: url('fonts/roboto-bolditalic-webfont.woff2') format('woff2');}
@font-face { font-family: 'comfortaaregular'; src: url('comfortaa-regular-webfont.woff2') format('woff2'), url('comfortaa-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

/* =============================== RESETS ET FORMATAGES GERENIQUES ============================== */
html, body, header, footer, form, fieldset, legend, div, article, aside, nav, section, figure, p, ul, ol, h1, h2, h3, h4, h5, h6
{margin:0; padding:0;}
button, input, optgroup, select, textarea { margin: 0; padding:0;}
input[type="submit"] {cursor:pointer;}
body { font-family:"robotolight", Arial, Helvetica, sans-serif; }
ul, li, ol { list-style-position:inside;}
li {margin-top:0.5rem;}
a img, img{ border:none;}
a { text-decoration:none;}
table, td, tr { border-collapse: collapse; border-spacing: 0; margin: 0px; padding: 0; vertical-align:top;}
div, img { min-width:0; min-height:0; box-sizing:border-box;}
picture { display:inline-block;}
img { max-width:100%; height:auto;} /* Indispensable pour image responsive fluide */
hr { color:#ff965a; width:90%;}
iframe {border: 0; height: 200px; width: 85%;}


/* ============== CLASSES GENERIQUES MAISON : NE PAS MODIFIER ============================== */

/* -------------- Conteneurs : display, marges, padding et dimensions ----------------- */
.c_FXRW { display:flex; flex-direction:row; justify-content: space-around; flex-wrap:wrap;}


/* -------------- Éléments de la grille ----------------- */
.grid_colx2 {grid-column:span 2;}
.grid_colx4 {grid-column:span 4;}
.grid_JSC {justify-self:center;}


/* -------------- Textes : alignement, taille, couleurs ----------------- */
.t_R { text-align:right;}
.t_C { text-align:center;}
.t_S08 { font-size:0.8rem;}

/* -------------- Autres éléments : display, largeur, hauteur, marges, padding ----------------- */
.H20 { height:20px;}
.MAUB3 { margin:3rem 0;} /* MArges Up et Bottom 3rem*/
.MAL1 { margin-left:1rem;} /* MArges Left 1rem */
.PA { padding:1rem;} /* PAddings égaux */
.Dnone {display:none !important;}
.lazy {background:url("img_fixes/loader.svg");}
.loaded {background-image:none;}
.hand {cursor: pointer;}

/* ================================= FIN RESETS ET FORMATAGES GERENIQUES ================================ */



/* *-*-*-*-*-*-*-  DESIGN DE BASE : SANS MEDIA QUERIES = mode Smartphone >736px *-*-*-*-*-*-*-  */

body, .form_contact {display:grid; grid-gap:1rem; grid-template-columns:repeat(4, 1fr); grid-auto-rows:auto;}
header {position:sticky; top:0; grid-column:span 4; border-top:2px solid #8f3f66; border-bottom:2px solid #8f3f66; background:rgba(250,250,250,1); display:grid; grid-gap:1rem; grid-template-columns:repeat(4, 1fr); padding:1rem;}
header img, footer img {height:50px; vertical-align:middle;}
header input {width:inherit; margin:0;}
nav {} 
article {background-color:yellow; } 
div { }
footer {grid-column:span 4; border-top:2px solid #8f3f66; border-bottom:2px solid #8f3f66; background:rgba(250,250,250,1);  height: 50px; display:grid; grid-gap:1rem; grid-template-columns:repeat(5, 1fr); align-items:center; padding:0.5rem;}
h1 { font-size:1.2rem; font-weight:bold; margin:0.8rem 0 } /* un seul h1 par page ! Réservé aux préambules, accroches ... */ 
h2 { font-size:1.1rem; margin:0.8rem 0; /*color: #fff;*/}
label {text-align:right;}
input {margin:0.8rem 0; height:1.5rem; width:100%;}
input[type=checkbox], input[type=radio] {margin:0.8rem 0; height:1.5rem; width:1.5rem;}
a {color:#387500; font-weight:bold;}
a:visited, a:hover, a:active, a:focus { color:#488500; border-bottom:thin #488500 dotted;}
textarea {margin:0.8rem 0; height:6rem; width:100%;}
form {grid-column:span 4;}

.hand {cursor: pointer;}
.matomo {display:inline-block;}
.search {display:none; text-align:center;}
.nomlf {display:none; color:#8f3f66; font-weight:bold;}
.menus_accueil {grid-column:span 4; border-left:15px solid #488500; border-top:1px solid #488500; border-right:1px solid #488500; border-bottom:1px solid #488500; margin:1rem; padding:1rem;}
.chap_accueil, .chap, .intro {grid-column:span 4;}
.intro, .coord {color:#8f3f66; font-size:1.1rem; font-style:italic;}
.news {grid-column:span 4; border:1px dotted #8f3f66; margin:1rem;}
.news, .news h2 {font-size:0.9rem; font-style:italic;}
.news img { float:left; width:150px; margin:0 5px 0 0;}
.date {font-size:0.7rem; font-style:italic; font-weight:bold;}
.navfooter { text-align:center;}
.navfooter a {color:#387500; font-weight:bold;}
.navfooter a:hover, .navfooter a:active, .navfooter a:focus { color:#aaa; border-bottom:thin #aaa dotted;}
.cave, .matomo {grid-column:span 4; font-size:0.8rem; text-align:center; margin-bottom:2rem;}
.carte img {height:120px;}
.c_form_fixe, .c_form_devis, .c_form_message, .c_validation {display:grid; grid-column:span 4; grid-gap:0.5rem; grid-template-columns:6rem auto; grid-auto-rows:auto; align-items:center; margin:0 1rem; padding:1rem;;}
.rgpd {font-size:0.8rem; font-style: italic; background:rgba(240,240,240,1); grid-column:span 2; padding:1rem;}
.checkboxradio {justify-self:end;}
.chapqui {display:grid; grid-gap:0.5rem; grid-column:span 4;}
.chapqui picture {width:40%; justify-self:start;}


/*-------- menu hamburger ------- */
a.encours {color:#000 !important;}
.c_menuhamb { text-align:right; padding:1rem 1rem 1rem 1rem; margin:19px 0 0 0; z-index:50; font-size:1.2rem; background:rgba(250,250,250,1);}
.c_menuhamb ul {list-style-type:none; line-height: 150%;}
.etata {  visibility:hidden; height:0px; margin:0; padding:0;}
.etatb { position:absolute; right:0; visibility:visible; background:rgba(250,250,250,1); border-bottom:2px solid #8f3f66; border-left:2px solid #8f3f66; transition:all 0.5s; padding:1rem;}
.ico_menuhamb {grid-column-start:4; text-align:right;}




/* *-*-*-*-*-*-*-  ECRANS LARGE - Mode Desktop 737px>  *-*-*-*-*-*-*-*-*-*-*-*-*- */
@media screen and (min-width:737px)
{
	.accueil {background: url(img_fixes/flaques_gelees_30pc.jpg) no-repeat center; background-size: cover;}
	header {padding:1rem 3rem; }
	footer {padding:0.5rem 3rem; margin-top:5rem;}
	header img, footer img {height:25px;}
	.menus_accueil, .chap_accueil, .news, .intro, .chap {margin:1rem 3rem;}
	.search {display:block;}
	.nomlf {display:inline;}
	.menus_accueil {grid-column: span 1;}
	.chap { grid-column:3 / span 2;}
	.intro {grid-column:3 / span 2;}
	.img_chap1 {grid-column:1 / span 2; grid-row:3;}
	.img_chap2 {grid-column:1 / span 2; grid-row:4;}
	.img_chap3 {grid-column:1 / span 2; grid-row:5;}
	.img_chap4 {grid-column:1 / span 2; grid-row:6;}
	.img_chap5 {grid-column:1 / span 2; grid-row:7;}
	.img_chap6 {grid-column:1 / span 2; grid-row:8;}
	.img_chap7 {grid-column:1 / span 2; grid-row:9;}
	.img_chap8 {grid-column:1 / span 2; grid-row:10;}
	.c_coord {grid-column:3 / span 2; grid-row:1; justify-content: flex-start;}
	.coord {}
	.carte img {height:300px;}
	.c_form_fixe, .c_form_devis, .c_form_message, .c_validation {grid-column:1 / span 2;}
	.c_form_fixe {grid-row:1;}
	.c_form_devis {grid-row:2;}
	.c_form_message {grid-row:3;}
	.c_validation {grid-row:4;}
	.b_mauve_left { border-left: 2px solid #8f3f66;}
	.chapqui {grid-template-columns:1fr 1fr; grid-auto-rows:auto;}
	.chapqui picture {width:35%; justify-self:end;}
	.chapqui div {margin:0 3rem; padding:0 1rem;}
}