/* .............................................................................
RESETS
Pris certains styles de :
- reboot.css
- https://www.joshwcomeau.com/css/custom-css-reset/
- ... et ajout personnels.
............................................................................. */
*, ::before, ::after {box-sizing:border-box;}
* {margin: 0; overflow-wrap: break-word;}
html {padding: 0; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section, picture {display: block; }
h1, h2, h3, h4, h5, h6, p, fieldset, ul, ol, li, figure, picture, blockquote, cite {padding: 0; border: 0;}
cite {font-style: normal; }
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio, canvas, iframe, img, svg, video, picture {display: block; max-width: 100%;}
textarea {resize: vertical;}
table {width: auto;height: auto;padding: 0;border: none;border-collapse: inherit;border-spacing: 0;border-color: inherit;text-align: left;font-weight: inherit;}

/* Opinionated : https://www.joshwcomeau.com/css/custom-css-reset/#digit-font-smoothing */
body {-webkit-font-smoothing: antialiased; line-height: 1;padding: 0;}


/* Pour debug */
/* * { outline: 1px solid red; outline-offset: -1px; } */

/* Pour debug #2 */
/* * { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); } */



/* .............................................................................
BASE TAGS
Enlever le base font-size pour s'adapter au user-set font-size.
Voir Chrome / Preferences / Taille de police.
Donc, change les media queries pour des rem.
............................................................................. */
html {scroll-padding-top:calc(var(--topbar-height-scrolled) - 1px); scroll-behavior: smooth;}
body {color: var(--color-base);background: var(--color-bg-base);}
body.locked {margin: 0;height: 100%;overflow: hidden;}
.onGreen {color: var(--color-base-on-green);}
.onRed {color: var(--color-base-on-red);}

/*
Font size global du site.
On le met sur tous les enfants direct et pas directement sur le body car
on veut conserver le user-set font-size. */
body > * {font-size: 1.1em;}

	/* Size */
	@media (max-width:102rem) {
		body > * {font-size: calc(0.56em + 0.53vw);}
	}

	/* Mobile */
	@media (max-width:62rem) {
		body > * {font-size: 1em;}
	}


/* Liens de base */
a {text-decoration: none;cursor: pointer;color: inherit; }
a:hover {text-decoration:none;}

/* 
Focus de base : laisser celui du browser par defaut.
Only suppress the focus ring once what-input has successfully started.
Suppress focus ring on form controls for mouse users. */
[data-whatintent='touch'] *:focus,
[data-whatintent='mouse'] *:focus { outline: none; }

/* Sup and sub. */
sup {vertical-align: super;font-size: 50%;}

/* All images responsive */
img, svg {height:auto;width: 100%;display:block;}
img.forceBigger {width: 100%;}

/* Removes animation when the page renders. */
.preload *,
.removeTransition {transition:none !important;}

/* Pretty les paragraphes */
p {text-wrap: pretty; }

/* prefers-reduced-motion detects if the user has the reduced motion 
preference activated to minimize the amount of movements and animations. */
@media screen and (prefers-reduced-motion: reduce) {  
	*,
	*::before,
	*::after {
		/* Very short durations means JavaScript that relies on events still works */
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}



/* .............................................................................
PAGE BASE
............................................................................. */

/*
WIDTHS
Les largeurs sont assez standard pour avoir des classes uniquement pour ca.
Les exceptions sont gerer dans les styles custom de sections.
Les valeurs sont dans configs.css.

Options de largeur :
1. FULL width : Pas de classe, car par defaut c'est 100% de large
2. STD width : .wStd
3. NARROW width : .wStd__narrow
*/
.wStd, .wStdLeft {padding-left: var(--width-std-left);}
.wStd, .wStdRight {padding-right: var(--width-std-right);}



/*
AUTO STYLED CONTENT:
Useful for CMS pages because the end-user doesn't have to write
specific classes to get the right formatting.

Classes :
- typo
- typoLinks
. typoLinksImg
*/
.typo {line-height: 1.5;}

	/* Owl selector */
	.typo > * + p,
	.typo > * + ul,
	.typo > * + ol,
	.typo > * + figure {margin-top: 1.2em;}

		/* Specific combinations */
		.typo > * + .typo__cta {margin-top: 2em;}

	/* Default ul */
	.typo ul:not([class]), ul.list {--paddingLeft: 2em;--bulletSize: 0.4em;list-style: none;}
	.typo ul:not([class]) li, ul.list li {list-style:none;margin-bottom: 0;padding-left: var(--paddingLeft);position: relative;}
	.typo ul:not([class]) li + li, ul.list li + li {margin-top: 0.5em;}
	.typo ul:not([class]) li::before, ul.list li::before {backface-visibility: hidden;position: absolute;display: block;content: '';background-color: currentColor;width: var(--bulletSize);height: 2px;top: 0.55em;left: 0; }

	/* Default ol */
	.typo ol:not([class]) {--paddingLeft:2em;list-style: none;counter-reset:li; }
	.typo ol:not([class]) li {list-style: none;counter-increment: li;padding-left: var(--paddingLeft);position: relative;}
	.typo ol:not([class]) li + li {margin-top: 0.5em; }
	.typo ol:not([class]) li::before {position: absolute;left: 0;top: 0em;display: block;content: counter(li);color: currentColor;font-weight:700;width: var(--paddingLeft);}

	/* 
	ALT: 
	Less flow.
	Smaller spacing between paragraphs. */
	.typo--lessFlow > * + p,
	.typo--lessFlow > * + ul,
	.typo--lessFlow > * + ol,
	.typo--lessFlow > * + figure {margin-top: 0.6em;}

	/* 
	ALT: 
	Smaller text. */
	.typo--smaller {font-size: 0.85em;}

	/*
	ALT :
	Titres.
	Les classes sont ici en référence, car les styles sont dans titles.css */
	.typo--h2InCtn { }
	.typo--h3InCtn { }



/* Links */
.typoLink,
.typoLinks { }

	.typoLink,
	.typoLinks a:not(.btn) {color:currentColor; text-decoration:underline; text-underline-offset: 0.14em; text-decoration-thickness: 0.05em; transition: color 0.2s; }

	/* Hover */
	.typoLink:hover,
	.typoLinks a:not(.btn):hover {color:var(--color-red);}

	/* On green */
	.onGreen .typoLink,
	.onGreen .typoLinks a:not(.btn) { }

	.onGreen .typoLink:hover,
	.onGreen .typoLinks a:not(.btn):hover { }

	/* On red */
	.onRed .typoLink,
	.onRed .typoLinks a:not(.btn) { }

	.onRed .typoLink:hover,
	.onRed .typoLinks a:not(.btn):hover {color:var(--color-green);}


/* Links on image = opacity change on hover */
.typoLinkImg,
.typoLinksImg { }

	.typoLinkImg,
	.typoLinksImg a {display: block; text-decoration: none; transition: opacity 0.2s; }

	/* Hover */
	.typoLinkImg:hover,
	.typoLinksImg a:hover {opacity: 0.7; }


/* Links plus subtils */
.typoLinkSubtle { }
.typoLinksSubtle { }

	.typoLinkSubtle,
	.typoLinksSubtle a {color: var(--color-green);display: inline-block;text-decoration:none;transition: color 0.2s;}

	/* Hover */
	.typoLinkSubtle:hover,
	.typoLinksSubtle a:hover {color: var(--color-red); }



/*
LISTS
Listes ul li utiles dans le site. */

/* Liste sans style */
.listNS {list-style: none;}

/* Liste inline horizontale. */
.listInline {list-style: none;display: inline-flex;flex-wrap: wrap;gap: 0.1em 2em;}

/* Liste inline horizontale plus grosse. */
.listInlineBig {list-style: none;padding-left: 0;line-height: 1.5;}
.listInlineBig li {position: relative;display: inline-block;font-size: 1.65002em;margin-bottom: 0;padding-left: 0;}
.listInlineBig li:not(:last-child) {margin-right: 2.002em;}
.listInlineBig li:not(:last-child)::before {content: "|";display: block;position: absolute;right: -1.2002em;}

/* List d'infos sur une recette : temps de preparation, cuisson, portions. */
.listRecetteInfos {list-style: none;display: flex;flex-wrap: wrap;align-items: center;gap: 0.25em 0.7em;}
.listRecetteInfos li {font-size: 0.85em; flex:0 1 auto; min-width: 25%; display: flex; gap: 0.3em; align-items: center; }
.listRecetteInfos li .svgIcon {font-size: 2.3em; }

	/* Min width wider */
	@media (max-width:46rem) {
		.listRecetteInfos li {font-size: clamp(0.5em, 3.5vw, 0.85em);min-width: 28%;}
	}

/* List inline of meta infos for the offre d'emploi : temps plein, departement, emplacement. */
.listOfferMeta {list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 0.7em; }
.listOfferMeta li {font-size: 1.15em; flex:0 1 auto; font-weight: bold; min-width: 25%;}

	/* Stacked */
	@media (max-width:46rem) {
		.listOfferMeta {flex-direction: column; }
		.listOfferMeta li {min-width: auto;}
	}

/* List dans les filtres, semblable a tCategory */
.listFilter {list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em 0.25em;}
.listFilter li { }
.listFilter li a {display: block;font-size: 0.75em;font-weight: 700;padding: 0.4em 1em;color: var(--color-red);background-color: var(--color-beige);border-radius: 2em; transition: color 0.2s, background-color 0.2s; }
.listFilter li a:hover,
.listFilter li a.active {color: var(--color-beige); background-color: var(--color-red); }



/* .............................................................................
SVGs
Styles des SVGs du site. Les SVGs sont majoritairement utile pour les
icones, mais pas uniquement pour ca.
............................................................................. */

/*
SVG ICON
Chaque icone / SVG est wrapped dans un .svgIcon.
On utilise <span>, mais si pertinent on prend autre chose (ex : <figure>) */
.svgIcon {display:block;font-size: 1em;line-height: 1;width: 1em;height: 1em;}
.svgIcon > svg {max-width: none; display: block; fill: currentColor; width: 1em; height: 1em;}


/*
SVG IMAGE
Les images SVG (ex : logo) sont wrapped dans un .svgImg.
On utilise <span>, mais si pertinent on prend autre chose (ex : <figure>) */
.svgImg {display:block;line-height: 1;width: 100%;height: auto;}
.svgImg > svg {fill: currentColor;}