@charset "utf-8";

/* =========================================================
   Arnaud de Vesgre — thème patrimonial contemporain
   Une seule feuille pour remplacer style.css et page5.css
   ========================================================= */

:root {
	--page-bg: #EDE3D1;
	--surface: #FFFDF8;
	--surface-soft: #F7F1E7;
	--ink: #27231F;
	--muted: #70675D;
	--navy: #1D2B3A;
	--navy-soft: #31465D;
	--burgundy: #742E3A;
	--gold: #B3945C;
	--gold-soft: #D8C7A2;
	--line: #D8CDBB;
	--shadow: rgba(50, 38, 24, 0.10);

	--font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--font-sans: Arial, Helvetica, sans-serif;

	--site-width: 760px;
	--text-size: 18px;
	--small-size: 12px;
}

/* ---------- Base ---------- */

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

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

body {
	width: 100%;
	max-width: var(--site-width);
	margin: 0 auto;
	background: var(--page-bg);
	color: var(--ink);
	font-family: var(--font-serif);
	font-size: var(--text-size);
	line-height: 1.55;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

p {
	margin: 0 0 1em;
	color: var(--ink);
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: normal;
	line-height: 1.6;
}

ul,
ol {
	margin-top: 0.5em;
	margin-bottom: 1.1em;
}

li {
	padding: 4px 8px;
}

hr {
	width: 72%;
	margin: 30px auto;
	border: 0;
	border-top: 1px solid var(--gold-soft);
}

/* ---------- Liens ---------- */

a:link,
a:visited,
a:active {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--burgundy);
}

/* ---------- Conteneurs principaux ---------- */

#container,
#body-haut,
#body-milieu,
#body-bas,
#products-page,
#categories-page,
.proddetail-page,
.garantie-page {
	width: 100%;
	max-width: var(--site-width);
	margin: 0 auto;
}

#container {
	background: var(--page-bg);
}

#body-haut {
	padding: 10px 18px;
	background: var(--page-bg);
	border-bottom: 1px solid var(--gold-soft);
}

#body-milieu,
#products-page,
#categories-page,
.proddetail-page,
.garantie-page {
	padding: 30px 50px 40px;
	background: var(--surface);
	box-shadow: 0 8px 20px var(--shadow);
}

#body-bas {
	padding: 24px 24px 34px;
	background: var(--page-bg);
	text-align: center;
	border-top: 1px solid var(--gold-soft);
}

/* Les anciens tableaux d'en-tête et de pied de page restent compatibles. */
#body-haut table,
#body-bas table {
	background: transparent !important;
}

/* ---------- Titres ---------- */

h0.titre {
	display: block;
	margin: 0 0 0.5em;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.05;
	text-align: center;
	color: var(--navy);
	letter-spacing: 0.01em;
}

h1,
h2,
h3,
.prodname,
.detailname {
	font-family: var(--font-serif);
	color: var(--navy);
}

h1 {
	margin: 0 0 0.8em;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0.01em;
}

h1.docum {
	font-size: 46px;
	font-weight: 600;
	color: var(--burgundy);
}

h2.docum {
	font-size: 28px;
	font-family: var(--font-serif);
	font-weight: 600;
	text-align: center;
	color: var(--ink);
}

h3.docum {
	font-size: 24px;
	font-weight: 600;
	font-style: italic;
	text-align: center;
	color: var(--navy);
}

h2.garantie {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	color: var(--ink);
}

h3.garantie {
	font-size: 19px;
	font-weight: 600;
	text-align: center;
	color: var(--ink);
}

h1.pdv {
	font-size: 28px;
	color: var(--navy);
}

/* ---------- Typographie utilitaire ---------- */

.centrer {
	text-align: center;
}

p.garantie {
	font-size: 18px;
	text-align: left;
}

P.proddetail-chapeau {
	font-size: 15px;
	font-family: var(--font-sans);
	font-weight: bold;
	color: var(--navy);
	text-align: center;
	letter-spacing: 0.02em;
}

P.proddetail-soustitre {
	font-size: 20px;
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--navy-soft);
	text-align: left;
}

P.smaller,
TD.smaller {
	font-size: 11px;
	font-family: var(--font-sans);
	color: var(--muted);
	text-align: center;
	line-height: 1.45;
}

P.smaller-top {
	font-size: 11px;
	font-family: var(--font-sans);
	color: var(--navy);
	text-align: right;
	line-height: 1.3;
}

p.pdv {
	font-size: 13px;
	font-family: var(--font-serif);
}

.legende {
	font-size: 11px;
	font-family: var(--font-sans);
	color: var(--muted);
	text-align: center;
}

.lettrine {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
	background: transparent;
	color: var(--burgundy);
	font-size: 3.5em;
	font-weight: 600;
	line-height: 0.82;
}

.surligne {
	background-color: #F4E4A6;
}

/* ---------- Catégories ---------- */

td.catname,
td.catimage,
td.catnavigation,
td.catdesc,
td.navdesc {
	font-size: 15px;
	color: var(--ink);
}

P.catname,
P.catimage,
P.catnavigation,
P.catdesc,
P.navdesc,
P.menu-gauche {
	font-size: 17px;
	color: var(--ink);
}

td.catname,
P.catname {
	color: var(--navy);
	font-weight: 600;
}

td.catimage img,
img.catimage {
	display: block;
	margin: 0 auto;
}

#categories-page table,
#categories-page tbody,
#categories-page tr,
#categories-page td {
	background: var(--surface);
}

/* ---------- Produits ---------- */

prodname,
.prodname {
	font-family: var(--font-serif);
	color: var(--navy);
}

.prodname {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

td.proddescription,
div.proddescription {
	font-size: 18px;
	font-family: var(--font-serif);
	color: var(--ink);
	line-height: 1.5;
}

table.products {
	width: 100% !important;
}

table.products td.prodimage img.prodimage {
	display: block;
	margin: 0 auto;
}

.prodprice,
.detailprice,
.listprice,
.detaillistprice,
.discountsapply,
.proddiscounts,
.detaildiscounts {
	font-family: var(--font-sans);
}

.prodprice,
.detailprice {
	color: var(--burgundy);
	font-size: 19px;
	font-weight: bold;
}

.listprice,
.detaillistprice {
	color: var(--muted);
	font-size: 14px;
}

.buybutton {
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.buybutton:hover {
	transform: translateY(-1px);
	opacity: 0.9;
}

/* ---------- Détail produit ---------- */

p.detaildescription,
div.detaildescription,
td.detaildescription {
	font-size: 18px;
	color: var(--ink);
	font-weight: normal;
	text-align: left;
	line-height: 1.6;
}

p.detaildescription-centre {
	text-align: center;
}

p.detaildescription-centre-gras {
	font-weight: 600;
	text-align: center;
}

.detailname {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0.01em;
}

span.detailoption,
.prodoption,
.ectlink,
.pagenums {
	font-size: 12px;
	font-family: var(--font-sans);
	color: var(--navy);
}

div.detailprice {
	font-size: 20px;
	text-align: center;
}

.pagenums {
	display: none;
}

/* ---------- Menus et blocs divers ---------- */

UL.descriptif-rapide {
	font-size: 11px;
	font-family: var(--font-sans);
}

div.menu {
	font-family: var(--font-sans);
	text-align: left;
}

div.menu-gauche {
	font-size: 14px;
	text-align: left;
}

div.quizz,
div.quizz-verif,
div.quizz-resultats,
div.quizz-commentaire,
div.quizz-points,
div.quizz-felicitations {
	font-size: 16px;
	text-align: left;
}

div.quizz-titre,
div.quizz-question {
	font-size: 16px;
	font-family: var(--font-sans);
	font-weight: bold;
}

.cobll,
.cobhl {
	font-size: 13px;
	font-family: var(--font-sans);
}

.cobtbl {
	font-size: 18px;
	font-family: var(--font-serif);
}

.discountsapply,
.proddiscounts,
.detaildiscounts {
	font-size: 18px;
	font-weight: bold;
	color: var(--burgundy);
}

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

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

	body {
		max-width: none;
		font-size: 17px;
	}

	#body-haut {
		padding: 12px 16px;
	}

	#body-milieu,
	#products-page,
	#categories-page,
	.proddetail-page,
	.garantie-page {
		padding: 22px 18px 32px;
		box-shadow: none;
	}

	#body-bas {
		padding: 22px 18px 30px;
	}

	p,
	p.detaildescription,
	div.detaildescription,
	td.detaildescription,
	td.proddescription,
	div.proddescription {
		font-size: 17px;
		line-height: 1.55;
	}

	h0.titre {
		font-size: 38px;
	}

	h1 {
		font-size: 25px;
	}

	h1.docum {
		font-size: 36px;
	}

	.prodname {
		font-size: 21px;
		text-align: center;
	}

	.detailname {
		font-size: 25px;
	}

	/* Liste de produits : image, texte, prix, bouton en pile. */
	table.products,
	table.products > tbody,
	table.products > tbody > tr {
		display: block;
		width: 100% !important;
	}

	table.products > tbody > tr > td {
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		padding: 7px 0;
		text-align: left;
	}

	table.products > tbody > tr > td.prodimage {
		padding-top: 20px;
		padding-bottom: 15px;
		text-align: center;
	}

	table.products td.prodimage img.prodimage {
		width: auto;
		max-width: min(100%, 320px);
		margin: 0 auto;
	}

	table.products .listprice,
	table.products .prodprice {
		text-align: center;
	}

	table.products img.buybutton {
		display: block;
		width: auto;
		margin: 10px auto 4px;
	}

	table.products td.prodseparator {
		padding: 18px 0 6px;
	}

	/* Catégories */
	#categories-page td.catimage,
	#categories-page td.catname,
	#categories-page td.catdesc,
	#categories-page td.catnavigation,
	#categories-page td.navdesc {
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		padding: 7px 0;
		text-align: center;
	}

	#categories-page td.catimage img,
	#categories-page img.catimage {
		width: auto;
		max-width: min(100%, 320px);
		margin: 0 auto;
	}

	/* Fiche produit : ne pas casser les tableaux internes. */
	.proddetail-page table,
	.proddetail-page tbody,
	.proddetail-page tr,
	.proddetail-page td {
		max-width: 100%;
	}

	.proddetail-page td.detaildescription,
	.proddetail-page div.detaildescription {
		width: 100% !important;
		max-width: 100% !important;
	}

	.proddetail-page td.detailimage {
		text-align: center;
	}

	.proddetail-page td.detailimage img.prodimage {
		display: inline-block;
		width: auto;
		max-width: 100%;
	}

	P.smaller-top {
		text-align: center;
	}
}

/* =========================================================
   En-tête harmonisé avec le pied de page
   ========================================================= */

.site-header {
	width: 100%;
	max-width: var(--site-width);
	margin: 0 auto;
	padding: 0;
	background: var(--page-bg);
	border-bottom: 1px solid var(--gold-soft);
	box-shadow: none;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 120px;
	padding: 20px;
	background: var(--page-bg);
}

.site-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.site-logo img {
	display: block;
	width: 247px;
	max-width: 100%;
	height: auto;
}

.site-header-annonce {
	flex: 1 1 auto;
	min-width: 0;
}

.site-header-nav {
	display: flex;
	flex: 0 0 190px;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	font-family: var(--font-sans);
	font-size: 11px;
	line-height: 1.25;
	text-align: right;
}

.site-header-nav a {
	color: var(--navy);
}

@media screen and (max-width: 700px) {
	.site-header-inner {
		flex-direction: column;
		justify-content: center;
		gap: 14px;
		min-height: auto;
		padding: 18px;
	}

	.site-header-annonce {
		display: none;
	}

	.site-header-nav {
		flex: 0 0 auto;
		align-items: center;
		font-size: 12px;
		text-align: center;
	}
}