/*
 * Humanesia Core — Frontend CSS
 * Version: 1.0.0
 *
 * Ce fichier pose la base CSS : variables, reset minimal, typographie et classes
 * structurelles. Le design final sera appliqué par Claude Design dans une phase ultérieure.
 */

/* ============================================================
   VARIABLES CHARTE GRAPHIQUE HUMANESIA
   ============================================================ */
:root {
	/* Couleurs principales */
	--hum-vert:   #4A9B7F;
	--hum-violet: #7B5EA7;
	--hum-dore:   #C5A97B;
	--hum-creme:  #FAFAF7;
	--hum-texte:  #1E2A2A;
	--hum-blanc:  #FFFFFF;

	/* Couleurs secondaires */
	--hum-vert-clair:   #E8F5F0;
	--hum-vert-moyen:   #7DBFA8;
	--hum-violet-clair: #EDE8F5;
	--hum-violet-moyen: #A48DC4;
	--hum-gris-bord:    #D8D8D0;
	--hum-gris-fond:    #F0F0EC;

	/* Typographie */
	--font-titres: "Yeseva One", Georgia, serif;
	--font-corps:  "Inter", system-ui, sans-serif;
	--font-ui:     "Urbanist", system-ui, sans-serif;

	/* Formes */
	--hum-radius:    6px;
	--hum-radius-lg: 12px;
	--hum-shadow:    0 2px 12px rgba(30, 42, 42, 0.08);

	/* Espacements */
	--hum-space-xs: 0.5rem;
	--hum-space-sm: 1rem;
	--hum-space-md: 1.5rem;
	--hum-space-lg: 2.5rem;
	--hum-space-xl: 4rem;

	/* Conteneur */
	--hum-container-width: 1200px;
	--hum-container-padding: 1.5rem;
}

/* ============================================================
   RESET MINIMAL
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-corps);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hum-texte);
	background-color: var(--hum-creme);
}

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

a {
	color: var(--hum-vert);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-family: var(--font-titres);
	line-height: 1.2;
	color: var(--hum-texte);
	margin: 0 0 var(--hum-space-sm);
}

p {
	margin: 0 0 var(--hum-space-sm);
}

ul, ol {
	padding-left: 1.5rem;
}

/* ============================================================
   LAYOUT — CONTENEUR
   ============================================================ */
.hum-container {
	max-width: var(--hum-container-width);
	margin: 0 auto;
	padding: 0 var(--hum-container-padding);
}

.hum-main {
	min-height: 60vh;
}

.hum-section {
	padding: var(--hum-space-xl) 0;
}

/* ============================================================
   GRILLES
   ============================================================ */
.hum-grid {
	display: grid;
	gap: var(--hum-space-md);
}

.hum-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.hum-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.hum-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.hum-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.hum-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.hum-grid--4,
	.hum-grid--3,
	.hum-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   BOUTONS
   ============================================================ */
.hum-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--hum-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	text-decoration: none;
	line-height: 1.2;
}

.hum-btn--primary {
	background-color: var(--hum-vert);
	color: var(--hum-blanc);
	border-color: var(--hum-vert);
}

.hum-btn--primary:hover {
	background-color: #3d8a6e;
	border-color: #3d8a6e;
	color: var(--hum-blanc);
	text-decoration: none;
}

.hum-btn--secondary {
	background-color: transparent;
	color: var(--hum-vert);
	border-color: var(--hum-vert);
}

.hum-btn--secondary:hover {
	background-color: var(--hum-vert-clair);
	text-decoration: none;
}

.hum-btn--violet {
	background-color: var(--hum-violet);
	color: var(--hum-blanc);
	border-color: var(--hum-violet);
}

.hum-btn--violet:hover {
	background-color: #6a4e96;
	text-decoration: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.hum-header {
	background-color: var(--hum-blanc);
	border-bottom: 1px solid var(--hum-gris-bord);
	position: sticky;
	top: 0;
	z-index: 100;
}

.hum-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem var(--hum-container-padding);
	max-width: var(--hum-container-width);
	margin: 0 auto;
}

.hum-header__logo {
	font-family: var(--font-titres);
	font-size: 1.5rem;
	color: var(--hum-vert);
	text-decoration: none;
}

.hum-nav {
	display: flex;
	gap: var(--hum-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hum-nav a {
	font-family: var(--font-ui);
	font-weight: 500;
	color: var(--hum-texte);
	font-size: 0.95rem;
}

.hum-nav a:hover {
	color: var(--hum-vert);
	text-decoration: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.hum-footer {
	background-color: var(--hum-texte);
	color: rgba(255, 255, 255, 0.8);
	padding: var(--hum-space-xl) 0 var(--hum-space-lg);
}

.hum-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hum-space-lg);
	margin-bottom: var(--hum-space-lg);
}

.hum-footer__brand {
	font-family: var(--font-titres);
	font-size: 1.25rem;
	color: var(--hum-blanc);
}

.hum-footer__nav h4 {
	color: var(--hum-blanc);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.hum-footer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hum-footer__nav li {
	margin-bottom: 0.5rem;
}

.hum-footer__nav a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

.hum-footer__nav a:hover {
	color: var(--hum-blanc);
}

.hum-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--hum-space-md);
	font-size: 0.85rem;
	opacity: 0.6;
}

@media (max-width: 900px) {
	.hum-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.hum-footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO ACCUEIL
   ============================================================ */
.hum-hero {
	background-color: var(--hum-creme);
	padding: var(--hum-space-xl) 0;
}

.hum-hero .hum-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hum-space-xl);
	align-items: center;
}

.hum-hero__titre {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--hum-texte);
	margin-bottom: var(--hum-space-md);
}

.hum-hero__sous-titre {
	font-size: 1.1rem;
	color: #4a5a5a;
	margin-bottom: var(--hum-space-lg);
}

.hum-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.hum-hero__visual {
	border-radius: var(--hum-radius-lg);
	overflow: hidden;
}

.hum-placeholder {
	background-color: var(--hum-gris-fond);
	border: 2px dashed var(--hum-gris-bord);
	border-radius: var(--hum-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 0.9rem;
	font-family: var(--font-ui);
}

.hum-placeholder--hero {
	min-height: 350px;
}

@media (max-width: 768px) {
	.hum-hero .hum-container { grid-template-columns: 1fr; }
	.hum-placeholder--hero { min-height: 220px; }
}

/* ============================================================
   RÉASSURANCE
   ============================================================ */
.hum-reassurance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hum-space-md);
	padding: var(--hum-space-lg) 0;
}

.hum-reassurance__item {
	text-align: center;
	padding: var(--hum-space-md);
}

.hum-reassurance__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--hum-space-sm);
	color: var(--hum-vert);
}

.hum-reassurance__titre {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
	color: var(--hum-texte);
}

.hum-reassurance__texte {
	font-size: 0.85rem;
	color: #5a6a6a;
	margin: 0;
}

@media (max-width: 768px) {
	.hum-reassurance { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.hum-reassurance { grid-template-columns: 1fr; }
}

/* ============================================================
   CATÉGORIES GRID
   ============================================================ */
.hum-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hum-space-md);
}

.hum-category-card {
	background-color: var(--hum-blanc);
	border-radius: var(--hum-radius-lg);
	overflow: hidden;
	box-shadow: var(--hum-shadow);
	text-decoration: none;
	color: var(--hum-texte);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}

.hum-category-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(30, 42, 42, 0.12);
	text-decoration: none;
	color: var(--hum-texte);
}

.hum-category-card__accent {
	height: 6px;
}

.hum-category-card__nom {
	font-family: var(--font-titres);
	font-size: 1.1rem;
	padding: var(--hum-space-md) var(--hum-space-md) var(--hum-space-xs);
	margin: 0;
}

.hum-category-card__desc {
	padding: 0 var(--hum-space-md);
	font-size: 0.875rem;
	color: #5a6a6a;
	flex: 1;
}

.hum-category-card__lien {
	display: block;
	padding: var(--hum-space-sm) var(--hum-space-md) var(--hum-space-md);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--hum-vert);
}

@media (max-width: 900px) {
	.hum-categories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.hum-categories-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARTE PRODUIT (EBOOK)
   ============================================================ */
.hum-ebooks-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hum-space-md);
}

.hum-product-card {
	background-color: var(--hum-blanc);
	border-radius: var(--hum-radius-lg);
	box-shadow: var(--hum-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}

.hum-product-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(30, 42, 42, 0.12);
}

.hum-product-card__image {
	aspect-ratio: 3/4;
	object-fit: cover;
	width: 100%;
}

.hum-product-card__image-placeholder {
	aspect-ratio: 3/4;
	background-color: var(--hum-gris-fond);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.8rem;
}

.hum-product-card__body {
	padding: var(--hum-space-md);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.hum-product-card__auteure {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--hum-vert);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.4rem;
}

.hum-product-card__titre {
	font-family: var(--font-titres);
	font-size: 1rem;
	margin-bottom: var(--hum-space-sm);
	flex: 1;
}

.hum-product-card__prix {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--hum-texte);
	margin-bottom: var(--hum-space-sm);
}

.hum-product-card__btn {
	display: block;
	text-align: center;
	padding: 0.6rem 1rem;
	background-color: var(--hum-vert);
	color: var(--hum-blanc);
	border-radius: var(--hum-radius);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.2s;
}

.hum-product-card__btn:hover {
	background-color: #3d8a6e;
	color: var(--hum-blanc);
	text-decoration: none;
}

@media (max-width: 900px) {
	.hum-ebooks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.hum-ebooks-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.hum-testimonial {
	background-color: var(--hum-blanc);
	border-radius: var(--hum-radius-lg);
	padding: var(--hum-space-lg);
	box-shadow: var(--hum-shadow);
	border-left: 4px solid var(--hum-violet);
}

.hum-testimonial__citation p {
	font-size: 1.05rem;
	font-style: italic;
	color: var(--hum-texte);
	margin: 0 0 var(--hum-space-md);
}

.hum-testimonial__auteur {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.hum-testimonial__nom {
	font-family: var(--font-ui);
	font-weight: 700;
}

.hum-testimonial__statut,
.hum-testimonial__anciennete {
	font-size: 0.85rem;
	color: #6a7a7a;
}

.hum-testimonial__statut::before {
	content: "·";
	margin-right: 0.4rem;
}

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.hum-leadmagnet {
	background-color: var(--hum-violet-clair);
	padding: var(--hum-space-xl) 0;
}

.hum-leadmagnet__content {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.hum-leadmagnet__titre {
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--hum-violet);
	margin-bottom: var(--hum-space-sm);
}

.hum-leadmagnet__texte {
	color: #4a4a6a;
	margin-bottom: var(--hum-space-lg);
}

.hum-leadmagnet__form {
	display: flex;
	flex-direction: column;
	gap: var(--hum-space-sm);
}

.hum-form-group {
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 0.3rem;
}

.hum-form-group label {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--hum-texte);
}

.hum-form-group input {
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--hum-gris-bord);
	border-radius: var(--hum-radius);
	font-family: var(--font-corps);
	font-size: 1rem;
	background-color: var(--hum-blanc);
	color: var(--hum-texte);
	transition: border-color 0.2s;
}

.hum-form-group input:focus {
	outline: none;
	border-color: var(--hum-violet);
}

.hum-leadmagnet__message {
	min-height: 1.5rem;
	font-size: 0.9rem;
	color: var(--hum-vert);
}

.hum-leadmagnet__message.hum-error {
	color: #c0392b;
}

.hum-leadmagnet__mention {
	font-size: 0.8rem;
	color: #7a7a9a;
	margin-top: var(--hum-space-sm);
}

/* ============================================================
   FICHE PRODUIT EBOOK
   ============================================================ */
.hum-product-single {
	padding: var(--hum-space-xl) 0;
}

.hum-product-single__layout {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--hum-space-xl);
	align-items: start;
}

.hum-product-single__image {
	border-radius: var(--hum-radius-lg);
	overflow: hidden;
	box-shadow: var(--hum-shadow);
}

.hum-product-single__titre {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.hum-product-single__prix {
	font-family: var(--font-ui);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hum-vert);
	margin: var(--hum-space-sm) 0 var(--hum-space-md);
}

.hum-product-meta {
	background-color: var(--hum-vert-clair);
	border-radius: var(--hum-radius-lg);
	padding: var(--hum-space-md);
	margin: var(--hum-space-md) 0;
}

.hum-product-meta__item {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.hum-product-meta__label {
	font-weight: 600;
	font-family: var(--font-ui);
	color: var(--hum-vert);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.hum-product-single__layout { grid-template-columns: 1fr; }
}

/* ============================================================
   PANIER
   ============================================================ */
.hum-cart {
	padding: var(--hum-space-xl) 0;
}

.hum-cart-item {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: var(--hum-space-md);
	align-items: center;
	padding: var(--hum-space-sm) 0;
	border-bottom: 1px solid var(--hum-gris-bord);
}

.hum-cart-totals {
	background-color: var(--hum-gris-fond);
	border-radius: var(--hum-radius-lg);
	padding: var(--hum-space-lg);
	margin-top: var(--hum-space-lg);
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.hum-checkout {
	padding: var(--hum-space-xl) 0;
}

.hum-checkout-wrapper {
	max-width: 820px;
	margin: 0 auto;
}

/* ============================================================
   PAGE THANK YOU / CONFIRMATION
   ============================================================ */
.hum-thankyou {
	padding: var(--hum-space-xl) 0;
	text-align: center;
}

.hum-thankyou__confirm {
	margin-bottom: var(--hum-space-xl);
}

.hum-download-list {
	list-style: none;
	padding: 0;
	margin: var(--hum-space-md) 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.hum-thankyou__note {
	font-size: 0.9rem;
	color: #6a7a7a;
}

.hum-thankyou__account {
	margin-top: var(--hum-space-md);
}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.hum-legal-placeholder {
	max-width: 800px;
	margin: 0 auto;
}

.hum-legal-notice {
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--hum-radius);
	padding: var(--hum-space-sm) var(--hum-space-md);
	margin-bottom: var(--hum-space-lg);
	font-size: 0.9rem;
}

.hum-legal-notice p {
	margin: 0;
}

/* ============================================================
   ACCORDÉON FAQ
   ============================================================ */
.hum-faq {
	padding: var(--hum-space-xl) 0;
}

.hum-faq__item {
	border-bottom: 1px solid var(--hum-gris-bord);
}

.hum-faq__item summary {
	padding: var(--hum-space-md) 0;
	font-family: var(--font-ui);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hum-faq__item summary::-webkit-details-marker {
	display: none;
}

.hum-faq__item summary::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--hum-vert);
	flex-shrink: 0;
}

.hum-faq__item[open] summary::after {
	content: "–";
}

.hum-faq__answer {
	padding-bottom: var(--hum-space-md);
	color: #4a5a5a;
}

/* ============================================================
   CHECKOUT — CHECKBOX RÉTRACTATION
   ============================================================ */
.hum-retractation-field {
	background-color: var(--hum-vert-clair);
	border: 1px solid var(--hum-gris-bord);
	border-radius: var(--hum-radius);
	padding: var(--hum-space-md);
	margin-bottom: var(--hum-space-md);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ============================================================
   RECOMMENDATIONS PRODUITS
   ============================================================ */
.hum-recommendations {
	padding: var(--hum-space-xl) 0;
	background-color: var(--hum-gris-fond);
}

.hum-recommendations__titre {
	font-size: 1.5rem;
	margin-bottom: var(--hum-space-lg);
}

/* ============================================================
   PAGE PACKS
   ============================================================ */
.hum-packs {
	padding: var(--hum-space-xl) 0;
}

.hum-pack-placeholder {
	background-color: var(--hum-gris-fond);
	border: 2px dashed var(--hum-gris-bord);
	border-radius: var(--hum-radius-lg);
	padding: var(--hum-space-xl);
	text-align: center;
	color: #888;
}

/* ============================================================
   PAGE À PROPOS
   ============================================================ */
.hum-apropos {
	padding: var(--hum-space-xl) 0;
}

.hum-apropos__fondatrice {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--hum-space-lg);
	align-items: start;
	margin-bottom: var(--hum-space-xl);
}

.hum-apropos__photo-placeholder {
	width: 200px;
	height: 200px;
	background-color: var(--hum-gris-fond);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 0.8rem;
	text-align: center;
}

@media (max-width: 600px) {
	.hum-apropos__fondatrice { grid-template-columns: 1fr; }
	.hum-apropos__photo-placeholder { width: 120px; height: 120px; }
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.hum-contact {
	padding: var(--hum-space-xl) 0;
}

.hum-contact__layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--hum-space-xl);
}

.hum-contact__form-placeholder,
.hum-contact__infos-placeholder {
	background-color: var(--hum-gris-fond);
	border: 2px dashed var(--hum-gris-bord);
	border-radius: var(--hum-radius-lg);
	padding: var(--hum-space-xl);
	color: #888;
	text-align: center;
}

@media (max-width: 768px) {
	.hum-contact__layout { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */
:focus-visible {
	outline: 2px solid var(--hum-violet);
	outline-offset: 2px;
	border-radius: 2px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}