@charset "utf-8";

/*
 * Arnaud de Vesgre — thème unique
 * Vintage moderne, lisible et accessible
 *
 * Cette feuille remplace style.css et page5.css.
 */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600&family=Roboto:wght@400;500;700&display=swap");

:root {
	/* Couleurs fortes : deux seulement */
	--rouge: #D0021B;
	--rouge-fonce: #AD0016;
	--bleu: #153B73;

	/* Neutres */
	--fond-page: #EDE3D1;
	--fond-contenu: #FFF9ED;
	--fond-secondaire: #F6EEDC;
	--charbon: #24211D;
	--gris: #6C655D;
	--filet: #D8C7A2;
	--ombre: rgba(54, 39, 24, 0.10);

	/* Typographie */
	--police-titres: "EB Garamond", Georgia, "Times New Roman", serif;
	--police-texte: "Roboto", Arial, Helvetica, sans-serif;

	/* Dimensions */
	--largeur-site: 760px;
	--rayon: 3px;
}

/* =========================================================
   Base
   ========================================================= */

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

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

body {
	width: 100%;
	max-width: var(--largeur-site);
	margin: 0 auto;
	background-color: var(--fond-page);
	color: var(--charbon);
	font-family: var(--police-texte);
	font-size: 17px;
	line-height: 1.6;
}

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

table {
	max-width: 100%;
}

p {
	margin: 0 0 1.15em;
	color: var(--charbon);
	font-family: var(--police-texte);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	text-align: left;
}

ul,
ol {
	margin: 0.6em 0 1.2em;
	padding-left: 1.6em;
}

li {
	padding: 3px 0;
	font-family: var(--police-texte);
	font-size: 17px;
	line-height: 1.55;
}

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

/* =========================================================
   Liens et zones cliquables
   ========================================================= */

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(208, 2, 27, 0.28);
	outline-offset: 3px;
}

/* =========================================================
   Conteneurs
   ========================================================= */

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

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

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

/* =========================================================
   En-tête moderne
   ========================================================= */

#body-haut,
.site-header {
	background-color: var(--fond-page);
	border-bottom: 1px solid var(--filet);
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 120px;
	padding: 20px;
}

.site-header__logo {
	flex: 0 0 auto;
}

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

.site-header__announcement {
	flex: 1 1 auto;
	text-align: center;
}

.site-header__nav {
	flex: 0 0 auto;
	text-align: right;
}

.site-header__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 10px;
	font-family: var(--police-texte);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}

/* Compatibilité avec l'ancien en-tête en tableau */
#body-haut table {
	width: 100% !important;
	max-width: var(--largeur-site) !important;
	background-color: var(--fond-page) !important;
}

#body-haut td {
	background-color: var(--fond-page) !important;
}

/* =========================================================
   Pied de page
   ========================================================= */

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

#body-bas table,
#body-bas tbody,
#body-bas tr,
#body-bas td {
	background-color: transparent !important;
}

P.smaller,
TD.smaller {
	font-family: var(--police-texte);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gris);
	text-align: center;
}

P.smaller-top {
	font-family: var(--police-texte);
	font-size: 12px;
	line-height: 1.4;
	color: var(--bleu);
	text-align: right;
}

/* =========================================================
   Titres
   ========================================================= */

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

h1,
h2,
h3,
.prodname,
.detailname,
td.catname,
p.catname {
	font-family: var(--police-titres);
	font-weight: 600;
	color: var(--rouge);
}

h1 {
	margin: 0 0 0.85em;
	font-size: 30px;
	line-height: 1.18;
	text-align: center;
	letter-spacing: 0.005em;
}

h2 {
	margin: 1.35em 0 0.7em;
	font-size: 26px;
	line-height: 1.22;
}

h3 {
	margin: 1.2em 0 0.6em;
	font-size: 22px;
	line-height: 1.25;
}

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

h2.docum {
	font-size: 28px;
	text-align: center;
}

h3.docum {
	font-size: 24px;
	font-style: italic;
	text-align: center;
}

h2.garantie {
	font-size: 25px;
	text-align: center;
}

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

h1.pdv {
	font-size: 28px;
}

/* =========================================================
   Lettrines
   ========================================================= */

.lettrine,
.lettrine-3,
.lettrine-2 {
	float: left;
	margin-right: 0.09em;
	margin-top: 0.02em;
	padding: 0;
	background: transparent;
	color: var(--rouge);
	font-family: var(--police-titres);
	font-weight: 600;
	text-align: left;
}

/* Ancienne classe et grande lettrine : environ trois lignes */
.lettrine,
.lettrine-3 {
	font-size: 4.2em;
	line-height: 0.78;
	padding-top: 0.03em;
}

/* Petite lettrine : environ deux lignes */
.lettrine-2 {
	font-size: 2.8em;
	line-height: 0.82;
	padding-top: 0.04em;
}

/* =========================================================
   Texte éditorial
   ========================================================= */

.centrer {
	text-align: center;
}

p.garantie,
p.detaildescription,
div.detaildescription,
td.detaildescription,
td.proddescription,
div.proddescription,
p.catdesc,
td.catdesc,
p.navdesc,
td.navdesc {
	font-family: var(--police-texte);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--charbon);
	text-align: left;
}

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

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

P.proddetail-chapeau {
	font-family: var(--police-texte);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--bleu);
	text-align: center;
	letter-spacing: 0.02em;
}

P.proddetail-soustitre {
	font-family: var(--police-titres);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rouge);
	text-align: left;
}

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

.legende {
	font-family: var(--police-texte);
	font-size: 12px;
	line-height: 1.4;
	color: var(--gris);
	text-align: center;
}

.surligne {
	background-color: #F4E4A6;
}

/* =========================================================
   Catégories
   ========================================================= */

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

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

td.catname,
P.catname {
	font-size: 21px;
	line-height: 1.25;
	color: var(--rouge);
}

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

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

/* =========================================================
   Liste des produits
   ========================================================= */

prodname,
.prodname {
	font-family: var(--police-titres);
	color: var(--rouge);
}

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

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(--police-texte);
}

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

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

/* =========================================================
   Fiche produit
   ========================================================= */

.detailname {
	font-size: 32px;
	line-height: 1.15;
	text-align: center;
	letter-spacing: 0.005em;
}

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

span.detailoption,
.prodoption,
.ectlink,
.pagenums {
	font-family: var(--police-texte);
	font-size: 13px;
	color: var(--bleu);
}

.pagenums {
	display: none;
}

.proddetail-page table {
	max-width: 100%;
}

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

/* =========================================================
   Boutons
   ========================================================= */

button,
input[type="submit"],
input[type="button"],
.bouton-achat,
button.buybutton,
input[type="submit"].buybutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 24px;
	border: 1px solid var(--rouge-fonce);
	border-radius: var(--rayon);
	background-color: var(--rouge);
	color: var(--fond-contenu);
	font-family: var(--police-texte);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.035em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		transform 0.12s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.bouton-achat:hover,
button.buybutton:hover,
input[type="submit"].buybutton:hover {
	background-color: var(--rouge-fonce);
	border-color: var(--rouge-fonce);
	color: var(--fond-contenu);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.bouton-achat:active,
button.buybutton:active,
input[type="submit"].buybutton:active {
	transform: translateY(1px);
}

/* Ancien bouton image : conservé comme solution de repli */
img.buybutton,
input[type="image"].buybutton {
	display: inline-block;
	min-width: 48px;
	min-height: 48px;
	padding: 4px;
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.15s ease;
}

img.buybutton:hover,
input[type="image"].buybutton:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}

/* =========================================================
   Menus et blocs divers
   ========================================================= */

UL.descriptif-rapide {
	font-family: var(--police-texte);
	font-size: 12px;
}

div.menu,
div.menu-gauche {
	font-family: var(--police-texte);
	text-align: left;
}

div.menu-gauche {
	font-size: 15px;
}

div.quizz,
div.quizz-verif,
div.quizz-resultats,
div.quizz-commentaire,
div.quizz-points,
div.quizz-felicitations {
	font-family: var(--police-texte);
	font-size: 17px;
	text-align: left;
}

div.quizz-titre,
div.quizz-question {
	font-family: var(--police-texte);
	font-size: 17px;
	font-weight: 700;
}

.cobll,
.cobhl {
	font-family: var(--police-texte);
	font-size: 14px;
}

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

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

/* =========================================================
   Formulaires
   ========================================================= */

input,
select,
textarea {
	max-width: 100%;
	font-family: var(--police-texte);
	font-size: 16px;
}

select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid var(--filet);
	border-radius: var(--rayon);
	background-color: var(--fond-contenu);
	color: var(--charbon);
}

/* =========================================================
   Mobile
   ========================================================= */

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

	body {
		max-width: none;
		font-size: 19px;
		line-height: 1.6;
	}

	#body-milieu,
	#products-page,
	#categories-page,
	.proddetail-page,
	.garantie-page {
		padding: 24px 18px 34px;
		background-color: var(--fond-contenu);
		box-shadow: none;
	}

	#body-bas {
		padding: 24px 18px 32px;
	}

	.site-header {
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		min-height: 0;
		padding: 20px 18px;
		text-align: center;
	}

	.site-header__logo,
	.site-header__announcement,
	.site-header__nav {
		width: 100%;
		text-align: center;
	}

	.site-header__logo img {
		margin: 0 auto;
	}

	.site-header__nav a {
		min-height: 48px;
		padding: 11px 14px;
		font-size: 17px;
	}

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

	p,
	li,
	p.garantie,
	p.detaildescription,
	div.detaildescription,
	td.detaildescription,
	td.proddescription,
	div.proddescription,
	p.catdesc,
	td.catdesc,
	p.navdesc,
	td.navdesc {
		font-size: 19px;
		line-height: 1.65;
	}

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

	h1 {
		font-size: 30px;
		line-height: 1.16;
	}

	h2 {
		font-size: 27px;
		line-height: 1.2;
	}

	h3 {
		font-size: 24px;
		line-height: 1.22;
	}

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

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

	.detailname {
		font-size: 30px;
	}

	/* Liste de produits : image, texte, prix et 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: 8px 0;
		text-align: left;
	}

	table.products > tbody > tr > td.prodimage {
		padding-top: 22px;
		padding-bottom: 16px;
		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,
	table.products input[type="image"].buybutton {
		display: block;
		width: auto;
		min-width: 54px;
		min-height: 54px;
		margin: 12px auto 4px;
	}

	table.products td.prodseparator {
		padding: 20px 0 7px;
	}

	/* 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: 8px 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 : préserver 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%;
	}

	/* Boutons faciles à toucher */
	button,
	input[type="submit"],
	input[type="button"],
	.bouton-achat,
	button.buybutton,
	input[type="submit"].buybutton {
		width: 100%;
		min-height: 54px;
		padding: 14px 20px;
		font-size: 18px;
	}

	/* Lettrines légèrement réduites pour ne pas écraser le texte */
	.lettrine,
	.lettrine-3 {
		font-size: 3.9em;
	}

	.lettrine-2 {
		font-size: 2.65em;
	}
}

/* =========================================================
   Très petits écrans
   ========================================================= */

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

	#body-milieu,
	#products-page,
	#categories-page,
	.proddetail-page,
	.garantie-page {
		padding-left: 15px;
		padding-right: 15px;
	}

	h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 25px;
	}

	p,
	li,
	p.detaildescription,
	div.detaildescription,
	td.detaildescription,
	td.proddescription,
	div.proddescription {
		font-size: 18px;
	}
}