@font-face {
    font-display: swap;
    font-family: "Martel Sans ExtraLight";
    src: url('/fonts/MartelSans-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: "Martel Sans Regular";
    src: url('/fonts/MartelSans-Regular.woff2') format('woff2');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --text: hsl(180, 56%, 7%);
    --background: hsl(180, 100%, 94%);
    --primary: hsl(210, 80%, 80%);
    --secondary: hsl(180, 63%, 82%);
    --accent: hsl(240, 56%, 45%);
}

body {
    background-color: var(--background);

    font-size: 1.125rem;
    font-family: "Martel Sans Regular", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    min-height: 100dvh;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Martel Sans ExtraLight", sans-serif;
    font-weight: 200;
}

p {
    margin-left: 2rem;
    margin-right: 2rem;
}

main {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

main a {
    color: var(--text);
    font-weight: bold;
}

main a:hover {
    background-color: var(--accent);
    color: var(--secondary);
    text-decoration: none;
}

.imgcategory {
    display: flex;
    justify-content:space-evenly;
}

.liste {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
    height: auto;
}

.liste a {
    color: var(--text);
    padding: 1rem;
}

.wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

footer {
    background-color: var(--text);
    color: var(--background);
    position: relative;
    left: 0;
    bottom: 0;
    padding: 1rem;
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

footer a {
    text-decoration: none;
    color: var(--primary);
}

footer li {
    list-style: none;
    margin-bottom: 1rem;
}

/* version mobile */
@media (max-width: 44.99em) {

    main {
        padding-left: 1em;
        padding-right: 1em;
    }

    p {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    footer {
        display: flex;
        flex-direction: column;
    }
}


/*
    Accordeon
*/

.wrapper {
    max-width: 50rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.accordion {
    --_button-size: 3rem;
    --_panel-padding: 0.75rem;
    --_panel-gap: 1rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    contain: content;
}

@media (min-width: 44.99em) {
    .accordion {
        flex-direction: row;
        height: 30rem;
    }
}

.accordion * {
    margin: 0;
    color: var(--background);
}

.accordion-panel {
    position: relative;
    isolation: isolate;
    flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));
    overflow: hidden;
    padding: var(--_panel-padding);
    padding-right: calc(var(--_panel-padding) * 4);
    border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);
    --_panel-color: var(--background);
}

@media (prefers-reduced-motion: no-preference) {
    .accordion-panel {
        transition: flex-basis 500ms, flex-grow 500ms;
    }
}


/* .accordion-panel:has([aria-expanded="true"]) {
    flex-basis: clamp(15rem, 40vh, 20rem);
    flex-grow: 1;
} */

/* .accordion-trigger {
    outline: 0;
}

.accordion-panel:focus-within {
    outline: 3px solid var(--_panel-color);
    outline-offset: 4px;
} */

.accordion-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: calc(100% - var(--_button-size));
}

.accordion-content p {
    font-size: 1.25rem;
    font-weight: 700;
    transform: translateY(2rem);
    opacity: 0;
    margin-left: calc(var(--_button-size) + var(--_panel-gap));
}

/* @media (prefers-reduced-motion: no-preference) {
    .accordion-panel:has([aria-expanded="true"]) p {
        transition: transform 500ms 500ms, opacity 500ms 500ms;
    }
} */

/* .accordion-panel:has([aria-expanded="true"]) p {
    transform: translateY(0);
    opacity: 1;
} */

.accordion-title {
    font-size: 1.5rem;
    font-weight: 700;
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
}

@media (max-width: 44.99em) {
    .accordion-title::after {
        content: "";
        position: absolute;
        left: calc((var(--_panel-gap) + var(--_button-size)) * -1);
        width: calc(100% + (var(--_button-size) * 2));
        height: var(--_button-size);
        z-index: -1;
        border-radius: 100vw;
        background: var(--accent);
    }

    /* safari mobile */
    .accordion-content {
        height: 15rem;
    }
}

.accordion-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: filter 500ms;
}

/* .accordion-panel:has([aria-expanded="true"]) .accordion-image {
    filter: brightness(0.33);
} */

.accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--_panel-gap);
    flex-direction: row-reverse;
    background: transparent;
    border: 0;
    padding: 0;
}

.accordion-icon {
    fill: var(--_panel-color);
    background: var(--accent);
    width: var(--_button-size);
    aspect-ratio: 1 / 1;
    padding: 0.5rem;
    border-radius: 50%;
    z-index: 10;
}


/*
    Menu navigation
*/

.toggle,
[id^=drop] {
	display: none;
}

/* background-color la nav. */
nav { 
	margin:0;
	padding: 0;
	background-color: var(--primary);
}

nav img {
    border-radius: 16px;
}

#logo {
	display: block;
	padding: 0 8rem;
	float: left;
	/* line-height: 60px; */
}

#logo a {
    padding: 0;
    margin: 0;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	/* margin:0; */
	list-style: none;
	position: relative;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	/* display:inline-block; */
	float: left;
	background-color: var(--primary);
}

/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color: var(--text);
	font-size: 1.125rem;
	text-decoration:none;
}


/* nav ul li ul li:hover { background: var(--accent); } */

/* Background color change on Hover */
nav a:hover { 
	background-color: var(--accent);
    color: var(--secondary);
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* ---------------------------------------------
        Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
        margin: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

    #logo a {
        padding: 0;
    }

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: var(--primary);
		padding:14px 20px;	
		color: var(--text);
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: var(--accent);
        color: var(--secondary);
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
	}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: var(--accent);
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
    nav ul ul ul a {
		padding:14px 20px;	
		color: var(--text);
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: var(--secondary); 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: var(--text);
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}