/* peut-il-manger.fr — charte propre au site (volontairement distincte des sites frères :
   sans-serif clinique + teal profond, là où quantite-par-personne est serif crème/olive). */

:root {
	--teal:       #0f5b52;
	--teal-fonce: #0a3f39;
	--teal-clair: #e4efec;
	--encre:      #16211f;
	--gris:       #5d6b68;
	--trait:      #d9e0de;
	--fond:       #f5f7f6;
	--blanc:      #ffffff;

	--rouge:      #b3261e;
	--rouge-bg:   #fdeceb;
	--ambre:      #a75c00;
	--ambre-bg:   #fdf3e2;
	--vert:       #2c6e34;
	--vert-bg:    #eaf4ea;
	--bleu:       #1b5e8f;
	--bleu-bg:    #e9f2f9;

	--r: 10px;
	--ombre: 0 1px 2px rgba(16,33,31,.06), 0 4px 16px rgba(16,33,31,.05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.62;
}

.wrap { width: min(100% - 2.4rem, 1080px); margin-inline: auto; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-fonce); }

.sr, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; background: var(--blanc); padding: .6rem 1rem; border-radius: var(--r); z-index: 50; }

/* ---------------------------------------------------------------- en-tête */

header.site {
	background: var(--teal);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 20;
}
header.site .wrap {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: .7rem 0;
	flex-wrap: wrap;
}
.logo { margin: 0; font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; }
.logo a { color: #fff; text-decoration: none; display: inline-flex; gap: .3rem; }
.logo .l2 { color: #9ed9c9; }

header.site nav { margin-left: auto; }
header.site nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
header.site nav a {
	color: #dff0ea;
	text-decoration: none;
	padding: .38rem .7rem;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 600;
	display: block;
}
header.site nav a:hover, header.site nav a[aria-current] { background: rgba(255,255,255,.16); color: #fff; }

.burger { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; padding: .1rem .4rem; }

.recherche { position: relative; flex: 0 1 240px; }
.recherche input {
	width: 100%;
	padding: .48rem .8rem;
	border: 1px solid rgba(255,255,255,.28);
	background: rgba(255,255,255,.12);
	color: #fff;
	border-radius: 999px;
	font: inherit;
	font-size: .93rem;
}
.recherche input::placeholder { color: #b9d8d0; }
.recherche input:focus { outline: 2px solid #9ed9c9; background: #fff; color: var(--encre); }
.recherche input:focus::placeholder { color: var(--gris); }

#suggestions {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0; right: 0;
	background: #fff;
	border-radius: var(--r);
	box-shadow: var(--ombre);
	overflow: hidden;
	max-height: 340px;
	overflow-y: auto;
	z-index: 30;
}
#suggestions a { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .5rem .8rem; text-decoration: none; color: var(--encre); font-size: .93rem; border-bottom: 1px solid var(--trait); }
#suggestions a:last-child { border-bottom: 0; }
#suggestions a:hover, #suggestions a.on { background: var(--teal-clair); }
#suggestions .esp { color: var(--gris); font-size: .82rem; text-transform: capitalize; }

/* ---------------------------------------------------------------- structure */

main { padding: 2rem 0 3.2rem; }
main > * { margin-inline: auto; }

.fil { font-size: .86rem; color: var(--gris); margin: 0 0 1rem; }
.fil a { color: var(--gris); }
.fil span { padding: 0 .35rem; }

h1 { font-size: clamp(1.65rem, 4.2vw, 2.35rem); line-height: 1.18; letter-spacing: -.022em; margin: 0 0 .8rem; }
h2 { font-size: clamp(1.25rem, 2.8vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; margin: 2.2rem 0 .7rem; }
h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; }

p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .35rem; }

.chapo { font-size: 1.1rem; color: var(--gris); margin-bottom: 1.6rem; }

/* ---------------------------------------------------------------- verdict */

.verdict {
	border-radius: var(--r);
	padding: 1.15rem 1.3rem;
	margin: 0 0 1.6rem;
	border-left: 6px solid;
	box-shadow: var(--ombre);
	background: var(--blanc);
}
.verdict .etiquette { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.16rem; margin-bottom: .5rem; }
.verdict .etiquette .p { font-size: 1.3rem; line-height: 1; }
.verdict p:last-child { margin-bottom: 0; }

.v-toxique     { border-color: var(--rouge); background: var(--rouge-bg); }
.v-toxique .etiquette { color: var(--rouge); }
.v-deconseille { border-color: var(--ambre); background: var(--ambre-bg); }
.v-deconseille .etiquette { color: var(--ambre); }
.v-precautions { border-color: var(--bleu); background: var(--bleu-bg); }
.v-precautions .etiquette { color: var(--bleu); }
.v-ok          { border-color: var(--vert); background: var(--vert-bg); }
.v-ok .etiquette { color: var(--vert); }

/* pastilles dans les listes */
.pastille { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.pastille.v-toxique     { background: var(--rouge-bg); color: var(--rouge); border: 1px solid #f3c9c6; }
.pastille.v-deconseille { background: var(--ambre-bg); color: var(--ambre); border: 1px solid #f0dcb8; }
.pastille.v-precautions { background: var(--bleu-bg);  color: var(--bleu);  border: 1px solid #cbe0ee; }
.pastille.v-ok          { background: var(--vert-bg);  color: var(--vert);  border: 1px solid #cbe3cd; }

/* ---------------------------------------------------------------- blocs */

.bloc, .sources, .urgence, .avertissement, .calc, .encadre {
	background: var(--blanc);
	border-radius: var(--r);
	box-shadow: var(--ombre);
	padding: 1.15rem 1.3rem;
	margin: 1.6rem 0;
}

.urgence { border-left: 6px solid var(--rouge); background: #fff; }
.urgence h2 { margin-top: 0; color: var(--rouge); font-size: 1.16rem; }
.urgence ul.tels { list-style: none; padding: 0; margin: .6rem 0; }
.urgence ul.tels li { padding: .3rem 0; border-bottom: 1px dashed var(--trait); }
.urgence ul.tels li:last-child { border-bottom: 0; }
.urgence a[href^="tel:"] { font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.urgence .horaires { color: var(--gris); font-size: .88rem; }
.urgence .mini { font-size: .9rem; color: var(--gris); margin: .5rem 0 0; }

.avertissement { font-size: .92rem; color: var(--gris); border-left: 4px solid var(--trait); }
.sources { font-size: .88rem; color: var(--gris); }
.sources p { margin: 0; }

.encadre { border-left: 4px solid var(--teal); }
.encadre h2, .encadre h3 { margin-top: 0; }

.symptomes { background: var(--rouge-bg); border-left: 4px solid var(--rouge); }
.symptomes h2 { margin-top: 0; color: var(--rouge); }
.symptomes ul { margin-bottom: 0; }

/* ---------------------------------------------------------------- tableaux */

.tableau { overflow-x: auto; margin: 1.2rem 0; border-radius: var(--r); box-shadow: var(--ombre); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
th, td { text-align: left; padding: .62rem .85rem; border-bottom: 1px solid var(--trait); }
thead th { background: var(--teal-clair); color: var(--teal-fonce); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- calculateur */

.calc { border-left: 6px solid var(--teal); }
.calc h2 { margin-top: 0; }
.calc .champs { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1rem; }
.calc label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: .25rem; color: var(--teal-fonce); }
.calc select, .calc input[type=number] {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--trait);
	border-radius: 8px;
	font: inherit;
	font-size: .95rem;
	background: #fff;
	color: var(--encre);
}
.calc .resultat { border-radius: 8px; padding: 1rem 1.1rem; font-size: 1rem; }
.calc .resultat .dose { font-size: 1.28rem; font-weight: 800; display: block; margin-bottom: .3rem; }
.calc .resultat p:last-child { margin-bottom: 0; }
.calc .note { font-size: .87rem; color: var(--gris); margin: .8rem 0 0; }

/* ---------------------------------------------------------------- cartes */

.cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 0; list-style: none; margin: 1.2rem 0; }
.cartes li { margin: 0; }
.carte {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	height: 100%;
	background: var(--blanc);
	border-radius: var(--r);
	box-shadow: var(--ombre);
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: var(--encre);
	border-top: 3px solid transparent;
}
.carte:hover { box-shadow: 0 2px 4px rgba(16,33,31,.08), 0 10px 26px rgba(16,33,31,.10); transform: translateY(-1px); }
.carte .t { font-weight: 700; line-height: 1.3; }
.carte .d { font-size: .9rem; color: var(--gris); }
.carte.v-toxique     { border-top-color: var(--rouge); }
.carte.v-deconseille { border-top-color: var(--ambre); }
.carte.v-precautions { border-top-color: var(--bleu); }
.carte.v-ok          { border-top-color: var(--vert); }

/* liste compacte d'aliments */
.liste-aliments { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.liste-aliments li { margin: 0; }
.liste-aliments a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: #fff; padding: .55rem .8rem; border-radius: 8px; text-decoration: none; color: var(--encre); box-shadow: var(--ombre); }
.liste-aliments a:hover { background: var(--teal-clair); }

/* espèces sur la home */
.especes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.especes a { display: block; background: var(--teal); color: #fff; border-radius: var(--r); padding: 1.3rem 1.4rem; text-decoration: none; box-shadow: var(--ombre); }
.especes a:hover { background: var(--teal-fonce); }
.especes .n { font-size: 1.3rem; font-weight: 800; display: block; }
.especes .c { font-size: .92rem; color: #b9d8d0; }

/* maillage transversal */
nav.croise { background: var(--teal-clair); border-radius: var(--r); padding: .9rem 1.15rem; margin: 1.6rem 0; font-size: .95rem; }
nav.croise p { margin: 0; }
nav.suite { margin: 2rem 0 0; font-size: .95rem; }
nav.suite ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
nav.suite a { display: inline-block; background: #fff; padding: .4rem .8rem; border-radius: 999px; box-shadow: var(--ombre); text-decoration: none; }

/* FAQ */
.faq { margin: 1.6rem 0; }
.faq details { background: #fff; border-radius: var(--r); box-shadow: var(--ombre); margin-bottom: .6rem; padding: .85rem 1.1rem; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq summary::marker { color: var(--teal); }
.faq details[open] summary { margin-bottom: .5rem; }
.faq p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- pied */

footer.site { background: var(--teal-fonce); color: #cfe3de; padding: 2.4rem 0 2rem; font-size: .93rem; }
footer.site .cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
footer.site h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: #9ed9c9; margin: 0 0 .6rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .35rem; }
footer.site a { color: #e6f2ef; }
footer.site .legal { margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; color: #a8c6c0; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 780px) {
	body { font-size: 16px; }
	.burger { display: block; order: 2; margin-left: auto; }
	header.site nav { order: 4; flex-basis: 100%; margin-left: 0; display: none; }
	header.site nav.ouvert { display: block; }
	header.site nav ul { flex-direction: column; gap: 0; padding-bottom: .5rem; }
	header.site nav a { padding: .55rem .2rem; border-radius: 6px; }
	.recherche { order: 3; flex-basis: 100%; }
	main { padding-top: 1.4rem; }
	.verdict { padding: 1rem 1.05rem; }
	.bloc, .sources, .urgence, .avertissement, .calc, .encadre { padding: 1rem 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.carte:hover { transform: none; }
}