/* ------------------------------------------------------------------------- */
/* --  CSS3                                                               -- */
/* --  Site : Cooprérative apicole des Charentes et du Poitou (17)        -- */
/* --  Author : F.Limouzin (apiBee.fr)                                    -- */
/* ------------------------------------------------------------------------- */
/* --  History :                                                          -- */
/* --    * 15/01/2024  -  Ver 0.4 : Added footer-note                     -- */
/* --    * 15/12/2021  -  Ver 0.3 : Added main content & responsive CSS   -- */
/* --    * 14/12/2021  -  Ver 0.2 : Uses 'grid'&'flex' (no more float)    -- */
/* --    * 12/12/2021  -  Ver 0.1 : Initial version                       -- */
/* ------------------------------------------------------------------------- */

/* Variables --------------------------------------------------------------- */

:root {
	--clr-bg-body: #f8f8f8;
	--clr-bg-sec:  #f0f0f0;
	--clr-bg-foot: #404040;
	--clr-bg-cgu:  #f0ffe0;

	--clr-fg-menu: #084008;	
	--clr-fg-toplnk: #F08000;
	--clr-fg-titles: #000000;
	--clr-fg-sec:  #000008;
	--clr-fg-foot: #e0e0f0;
	--clr-fg-cgu:  #0d6510;
	--clr-fg-stongtxt:  #0d6510;
	--clr-fg-lnk: #c0c0ff;

	--clr-bd-foot: #b7b7b7;
	--clr-bd-sec:  #aaaaaa;

	--clr-sha-foot: #c0c0c0;
	--clr-sha-sec:  #202020;
	--clr-sha-chf:  #aaaaaa;

	--clr-blue:   #1d2361;
	--clr-red:    #e11b24;
	--clr-yellow: #f7c20c;
	--clr-green:  #0d6510;

	--font-wgt-bold: 800;
	--font-wgt-regu: 400;
	--font-wgt-lght: 200;

	--font-sz-tiny: 0.5rem;
	--font-sz-small: 0.8rem;
	--font-sz-norm: 1.0rem;
	--font-sz-tall: 1.25rem;
	--font-sz-tallish: 1.40rem;
	--font-sz-taller: 1.5rem;
	--font-sz-tallest: 1.75rem;
	--font-sz-huge: 2.75rem;
}

/* HTML TAGS --------------------------------------------------------------- */

/* ... HTML main blocks ............ */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--clr-bg-body);
	margin: 5px 0 5px 0; /*top right bottom left*/
	padding: 0 0 0 0;    /*top right bottom left*/
	font-family: 'Nunito Sans', sans-serif;
}

header {
	color: var(--clr-fg-titles);
	display: grid;
	/* 2 columns : logo title&menu */
	grid-template-columns: 220px 1fr;
	/* 6 rows : green-bar yellow-bar logo&titla logo&menu banner green-bar */
	grid-template-rows: 10px 40px 120px 80px 120px 10px;
	margin: 0 0 0 0; /*top right bottom left*/
}

main {
	margin: 0 0 0 0; /*top right bottom left*/
}

section {
	background-color: var(--clr-bg-sec);
	color: var(--clr-fg-sec);
}

footer {
	background-color: var(--clr-bg-foot);
	color: var(--clr-fg-foot);
	display: grid;
	/* 3 columns : contact info more-info */
	grid-template-columns: repeat(3, 1fr);
	/* 8 rows : green-bar yellow-bar logo txt-contact copyrights cgu yellow-bar green-bar */
	grid-template-rows: 10px 30px 100px 180px 60px 30px 30px 10px;
	margin: 0 0 0 0; /*top right bottom left*/
}

/* ... HTML tags ................... */

h1 {
	margin: 0 0 0 0;
	font-weight: var(--font-wgt-bold);
}

nav {
	text-decoration: none;
	font-weight: var(--font-wgt-bold);
}

li {
	list-style-type: none;
}

/* CLASSES ----------------------------------------------------------------- */

.main-content-link {
	position: absolute;
	padding: 1rem;
	left: 0.5rem;
	border-radius: 0 0 0.5rem 0.5rem;
	transform: translateY(-200%);
	transition: transform 400ms ease-in;
	text-decoration: none;
	background: var(--clr-blue);
	color: var(--clr-fg-lnk);
	font-size: var(--font-sz-norm);
	font-weight: var(--font-wgt-bold);
}

.main-content-link:focus {
	transform: translateY(0);
}

/* ... Header ...................... */

.header-top {
	grid-column: 1 / span 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
}

.header-top-brand {
	font-size: var(--font-sz-small);
	font-weight: var(--font-wgt-bold);
	padding-left: 2rem;
}

.header-top-right {
	padding-right: 5rem;
}

.header-top-alink {
	color: var(--clr-fg-toplnk);
	font-size: var(--font-sz-norm);
	text-decoration: none;
	font-weight: var(--font-wgt-bold);
}

.header-center-logo {
	grid-column: 1;
	grid-row: 3 / span 2;
}

.header-logo {
	transform: translate(-50px, -110px) scale(60%, 60%);
}

.header-flag {
	transform: translate(140px, -320px) scale(60%, 60%);
}

.header-center-title {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--font-sz-huge);
	font-weight: var(--font-wgt-bold);
	font-family: "Arial";
	text-align: center;
}

.header-center-menu {
	grid-column: 2;
	grid-row: 4;
	display: flex;
	justify-content: right;
	align-items: center;
	text-transform: uppercase;
	padding-right: 2.5rem;
}

.main-menu-li {
	display: inline-block;
	text-align: right;
	font-size: var(--font-sz-tall);
	padding-left: 0.75rem;
	margin: 1rem 1rem 1rem 1rem;
}

.menu-alink {
	background-color: var(--clr-bg-sec);
	color: var(--clr-fg-menu);
	padding: 5px 5px 5px 5px;
	font-weight: var(--font-wgt-bold);
	text-decoration: none;
}

.menu-alink:hover {
	background-color: var(--clr-fg-menu);
	color: var(--clr-bg-sec);
}

.header-banner {
	grid-column: 1 / span 2;
	grid-row: 5;
	background-image: url(../images/banner0.png);
	background-size: contain;
}

/* ... Main : Coop ................. */

.lacoop {
	display: grid;
	grid-template-columns: 0.6fr 0.4fr;
	grid-template-rows: 10px 40px 1fr 10px;
}

.lacoop-empty-top {
	grid-column: 1 / span 2;
	grid-row: 1;
}

.lacoop-title {
	grid-column: 1;
	grid-row: 2;
}

.lacoop-text {
	grid-column: 1;
	grid-row: 3;
}

/* ... Main : Map .................. */

.lacoop-maptitle {
	grid-column: 2;
	grid-row: 2;
}

.lacoop-map {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.map-france {
	max-width: 90%;
	max-height: 90%;
}

.lacoop-empty-mid {
	grid-column: 1 / span 2;
	grid-row: 4;
}

/* ... Main : Prod ................. */

.lesprod {
	display: flex;
	flex-direction: column;
}

.lesprod-title {
}

.lesprod-text {
}

.lacoop-empty-lowmid {
	min-height: 10px;
}

/* ... Main : Nums ................. */

.leschiffres {
	display: flex;
	flex-direction: column;
}

.lacoop-enchtitle {
}

.cl-photos,
.lacoop-chiffres {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: center;
}

.cl-chiffres {
	margin: 5px 0 10px 0;  /*top right bottom left*/
	padding: 2rem 10px 2rem 10px; /*top right bottom left*/
	border-width: 1px;
	border-style: none solid solid solid;
	border-color: var(--clr-sha-chf);
	box-shadow: 0 0 20px 0.1px var(--clr-sha-chf); /*offset-x | offset-y | blur-radius | spread-radius | color */
	font-size: var(--font-sz-tall);
	font-family: 'Jura', sans-serif;
}

.lacoop-empty-bottom {
	min-height: 10px;
}

/* ... Photos ..................... */
.cl-photos > img {
	max-height: 250px;
}

.cl-maxwidth {
	width: 100%;
	max-width: 100%;
	max-height: none;
	object-fit: cover;
}

/* ... Main : Misc ................. */

.lacoop-maptitle > h2,
.lacoop-enchtitle > h2,
.lesprod-title > h2,
.lacoop-title > h2 {
	margin : 10px 20px 0 20px; /*top right bottom left*/
	padding : 0 10px 0 10px;
	font-size: var(--font-sz-tallest);
	font-weight: var(--font-wgt-bold);
	text-transform: uppercase;
	box-shadow: 0 0 20px 0.5px var(--clr-sha-sec); /*offset-x | offset-y | blur-radius | spread-radius | color */
}

.lacoop-text,
.lacoop-map,
.lesprod-text,
.lacoop-chiffres {
	margin : 10px 20px 0 20px; /*top right bottom left*/
	padding : 0 10px 0 10px;
	font-size: var(--font-sz-tall);
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: var(--clr-bd-sec);
}

.lesprod-text li,
.lacoop-text li {
	margin-bottom: 0.5rem;
	list-style: url('../images/logo16.ico');
}

/* ... Footer ...................... */

.footer-topgreen {
	grid-column: 1 / span 3;
	grid-row: 1;
}

.footer-topyellow {
	grid-column: 1 / span 3;
	grid-row: 2;
}

.footer-logo {
	grid-column: 1;
	grid-row: 3;
	display: flex;
}

.footer-logo > img {
	margin-right: 10px;
	margin-top: 10px;
	box-shadow: 0 0 20px 0.1px var(--clr-sha-foot); /*offset-x | offset-y | blur-radius | spread-radius | color */
}
.footer-logo > p {
	margin: 0 0 0 0;
	padding: 10px 10px 0px 15px; /*top right bottom left*/
	font-size: var(--font-sz-tall);
}

.footer-info {
	grid-column: 2;
	grid-row: 3;
	border-left: 1px solid var(--clr-bd-foot);
	padding-left: 15px;
}

.footer-moreinfo {
	grid-column: 3;
	grid-row: 3;
}

.footer-contact {
	grid-column: 1;
	grid-row: 4;
	padding-left: 15px;
}

.footer-contact a {
	color: var(--clr-fg-foot);
	font-size: var(--font-sz-norm);
	text-decoration: none;
	font-weight: var(--font-wgt-bold);
}

.footer-note {
	grid-column: 2 / span 2;
	grid-row: 4;
	border-left: 1px solid var(--clr-bd-foot);
	padding: 25px 35px 10px 15px; /*top right bottom left*/
}

.footer-copyrights {
	grid-column: 1 / span 3;
	grid-row: 5;
	border-top: 1px solid var(--clr-bd-foot);
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
}

.footer-cgu {
	grid-column: 1 / span 3;
	grid-row: 6;
	display: flex;
	align-items: center;
	text-align: center;
}

.footer-crea > a {
	color: var(--clr-fg-lnk);
	font-size: var(--font-sz-norm);
	text-decoration: none;
	font-weight: var(--font-wgt-bold);
}

.footer-bottomyellow {
	grid-column: 1 / span 3;
	grid-row: 7;
}

.footer-bottomgreen {
	grid-column: 1 / span 3;
	grid-row: 8;
}

.cgu-hover {
	flex: 1 1 0;
	position: relative;
}

/*aria-expanded: false;*/
.cgu-hover .cgu-hover-box {
	position: absolute;
	overflow: hidden;
	max-height: 0;
	transition: 0.0s;
	padding: 0 0 0 0; /*top right bottom left*/
	margin: 0 80px 0 80px; /*top right bottom left*/
	width: 80%;
	border: 0;
}

/*aria-expanded: true;*/
.cgu-hover:hover .cgu-hover-box {
	transform: translateY(-100%);
	background-color: var(--clr-bg-cgu);
	color: var(--clr-fg-cgu);
	max-height: 80rem;
	transition: 0.1s;
	border: 3px solid var(--clr-fg-cgu);
	font-size: var(--font-sz-small);
}

/* ... Misc ........................ */

.coopitem {
	color: var(--clr-fg-stongtxt);
	text-transform: uppercase;
	font-weight: var(--font-wgt-bold);
}

.infoitem {
	color: var(--clr-yellow);
	text-transform: uppercase;
	font-weight: var(--font-wgt-bold);
}

.cl-yellow {
	background-color: var(--clr-yellow);
}

.cl-green {
	background-color: var(--clr-green);
}

.cl-white {
	background-color: var(--clr-bg-sec);
}

.cl-darkgray {
	background-color: var(--clr-bg-foot);
}

/* IDs --------------------------------------------------------------------- */
#id-header-top {
	grid-column: 1 / span 2;
	grid-row: 1;
}

#id-header-bottom {
	grid-column: 1 / span 2;
	grid-row: 6;
}

/* Responsive -------------------------------------------------------------- */

/* ... Medium ...................... */

@media screen and (max-width: 900px) {

.lacoop {
	display: flex;
	flex-flow: column wrap;
}

.header-logo {
	transform: translate(-50px, -110px) scale(50%, 50%);
}

.header-flag {
	transform: translate(160px, -350px) scale(60%, 60%);
}

.map-france {
	max-width: 100%;
}

} /*@media < 900px */

/* ... Small ....................... */

@media screen and (max-width: 840px) {
	
.header-center-title {
	font-size: var(--font-sz-tallest);
}

.cgu-hover .cgu-hover-box {
	margin: 0 2px 0 2px; /*top right bottom left*/
}

} /*@media < 860px */

/* ... Smallest .................... */

@media screen and (max-width: 650px) {

header, footer {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
}

.header-top-brand {
	font-size: var(--font-sz-norm);
}

.header-center-title {
	font-size: var(--font-sz-tallish);
	justify-content: left;
	align-items: left;
}

.header-flag {
	transform: translate(160px, -350px) scale(60%, 60%);
}

.header-center-logo {
	max-height: 200px;
}

.cgu-hover:hover .cgu-hover-box {
	font-size: var(--font-sz-norm);
}

} /*@media < 650px */

/* End of CSS -------------------------------------------------------------- */