/* ===========================================================================
BRENNHOLZ-SHOP — DESIGN SYSTEM (v2 : identité e-commerce allemande
premium, header/footer vert citron clair, hero plein cadre)
=========================================================================== */
/* Police chargée via dans base.html plutôt que @import ici : un
@import CSS force le navigateur à télécharger et parser base.css avant
même de découvrir la requête de police, ce qui retarde inutilement le
First Contentful Paint. Un dans le est
découvert immédiatement en parallèle du CSS principal. */
:root {
/* Couleurs — contenu (fond papier chaud, texte, accents) */
--color-bg: #EDE7DC; /* papier chaud */
--color-surface: #F7F4EC; /* cartes, un ton plus clair que le fond */
--color-ink: #2B241C; /* encre écorce, texte principal */
--color-ink-soft: #5B5142; /* texte secondaire */
--color-forest: #3F5D3A; /* vert forêt — accents de contenu (badges, liens) */
--color-forest-dark: #2E4529;
--color-ember: #C1531B; /* braise — CTA, usage rare et délibéré */
--color-ember-dark:#9C4215;
--color-straw: #C9BFA8; /* paille — bordures, séparateurs */
--color-error: #A13327;
--color-white: #FFFFFF;
/* Couleurs — header/footer : vert citron clair exclusivement (jamais
vert foncé sur ces deux zones). Contraste vérifié par calcul WCAG :
texte encre sur citron = 11.57:1, texte braise-foncé sur citron =
4.95:1 — les deux passent largement l'AA (seuil 4.5:1). Le blanc sur
citron échoue (1.32:1) : ne jamais mettre de texte blanc ici. */
--color-citron: #DCE87A;
--color-citron-deep: #C7D65E; /* bordures/séparateurs sur fond citron */
/* Typographie */
--font-display: 'Big Shoulders Display', sans-serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Échelle */
--step-0: 1rem;
--step-1: 1.25rem;
--step-2: 1.6rem;
--step-3: 2.1rem;
--step-4: 2.8rem;
--step-5: 3.8rem;
/* Espacement */
--space-xs: 0.5rem;
--space-sm: 0.9rem;
--space-md: 1.6rem;
--space-lg: 2.6rem;
--space-xl: 4.2rem;
--radius: 8px;
--radius-sm: 5px;
--border: 1px solid var(--color-straw);
--container-width: 1180px;
--shadow-card: 0 1px 3px rgba(43,36,28,0.08), 0 6px 16px rgba(43,36,28,0.06);
--shadow-header: 0 2px 10px rgba(43,36,28,0.10);
}
/* Respecte la préférence de mouvement réduit dès le départ. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Garde-fou anti-scrollbar horizontale : ceinture et bretelles en plus des
correctifs ciblés (ex: .cart-table-wrapper) — aucun élément ne doit
jamais pouvoir élargir la page au-delà du viewport, de 360px à 1920px. */
html, body { max-width: 100%; overflow-x: hidden; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.05;
margin: 0 0 var(--space-sm);
color: var(--color-ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--space-sm); }
a { color: var(--color-forest-dark); text-decoration-thickness: 1.5px; }
a:hover { color: var(--color-ember-dark); }
/* Focus clavier visible partout — non négociable pour l'accessibilité. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--color-ember);
outline-offset: 2px;
}
img { max-width: 100%; display: block; }
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--space-md);
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: var(--color-ink); color: var(--color-white);
padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* --------------------------------------------------------------------- */
/* Boutons */
/* --------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
padding: 0.75rem 1.4rem; border-radius: var(--radius); border: 1.5px solid transparent;
cursor: pointer; text-decoration: none; line-height: 1.2;
transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--color-ember); color: var(--color-white);
box-shadow: 0 2px 8px rgba(193,83,27,0.28);
}
.btn-primary:hover { background: var(--color-ember-dark); color: var(--color-white); box-shadow: 0 3px 12px rgba(193,83,27,0.34); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: var(--color-white); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* --------------------------------------------------------------------- */
/* Header / Navigation — vert citron clair, sticky, logo remplaçable */
/* --------------------------------------------------------------------- */
.site-header {
background: var(--color-citron);
border-bottom: 1px solid var(--color-citron-deep);
box-shadow: var(--shadow-header);
position: sticky; top: 0; z-index: 100;
}
.site-header__bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-md); padding-block: 0.75rem;
}
.site-header__brand {
display: inline-flex; align-items: center; text-decoration: none;
flex-shrink: 0;
}
/* Chip blanc derrière le logo : garantit un rendu propre quel que soit le
fichier JPG déposé (la plupart des logos d'entreprise ont un fond blanc
ou clair — ce chip évite tout effet de rectangle disgracieux sur le
fond citron si le JPG n'a pas de transparence, ce qu'un JPG ne peut de
toute façon jamais avoir). */
.site-header__logo-wrap {
display: inline-flex; align-items: center;
background: var(--color-white);
border-radius: var(--radius-sm);
padding: 0.3rem 0.7rem;
box-shadow: 0 1px 4px rgba(43,36,28,0.12);
}
.site-header__logo {
height: 32px; width: auto; display: block; max-width: 160px; object-fit: contain;
}
.site-header__brand:hover .site-header__logo-wrap { box-shadow: 0 2px 6px rgba(43,36,28,0.18); }
.site-nav__toggle {
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-white); border: 1.5px solid var(--color-ink);
border-radius: var(--radius); padding: 0.75rem; cursor: pointer;
min-width: 44px; min-height: 44px;
/* 44px = seuil de cible tactile recommandé (WCAG 2.5.5 / Material Design). */
}
.site-nav {
display: none;
flex-direction: column;
gap: var(--space-xs);
padding-block: var(--space-sm);
border-top: 1px solid var(--color-citron-deep);
}
.site-nav.is-open { display: flex; }
.site-nav a {
display: block; padding: 0.7rem 0.5rem; color: var(--color-ink);
text-decoration: none; font-weight: 600; border-radius: var(--radius-sm);
min-height: 44px; display: flex; align-items: center;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-ember-dark); background: rgba(255,255,255,0.4); }
.site-header__cart {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px;
color: var(--color-ink); text-decoration: none;
border-radius: var(--radius-sm);
}
.site-header__cart:hover { color: var(--color-ember-dark); background: rgba(255,255,255,0.4); }
.cart-count {
position: absolute; top: 0; right: 0;
background: var(--color-ember); color: var(--color-white);
border-radius: 999px; min-width: 1.15rem; height: 1.15rem;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
padding-inline: 0.25rem; border: 1.5px solid var(--color-citron);
}
@media (min-width: 860px) {
.site-nav__toggle { display: none; }
.site-header__bar { flex-wrap: nowrap; }
.site-nav {
display: flex !important; flex-direction: row; align-items: center;
border-top: none; padding-block: 0; gap: var(--space-sm);
}
.site-nav a { padding: 0.55rem 0.7rem; }
}
/* --------------------------------------------------------------------- */
/* Hero standard (pages autres que l'accueil, le cas échéant) */
/* --------------------------------------------------------------------- */
.hero {
padding-block: var(--space-xl) var(--space-lg);
border-bottom: var(--border);
}
.hero__grid {
display: grid; gap: var(--space-lg); align-items: center;
}
.hero__eyebrow {
font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em;
font-size: 0.8rem; color: var(--color-forest-dark); font-weight: 600;
margin-bottom: var(--space-xs);
}
.hero__lede { font-size: 1.15rem; color: var(--color-ink-soft); max-width: 46ch; }
.hero__visual {
border-radius: var(--radius); overflow: hidden;
aspect-ratio: 4 / 3; background: var(--color-ink);
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--space-md); }
@media (min-width: 900px) {
.hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* --------------------------------------------------------------------- */
/* Hero homepage — image plein cadre + overlay garanti */
/* --------------------------------------------------------------------- */
/*
IMAGE DE FOND — pour la remplacer, déposez votre fichier au même chemin
et avec le même nom : static/img/hero-bg.jpg (aucune modification CSS
nécessaire). Le dégradé sombre superposé est volontairement fixe et
indépendant du contenu de la photo : il garantit à lui seul le contraste
du texte blanc par-dessus, quelle que soit la luminosité de l'image que
vous déposerez (photo claire, sombre, contrastée...).
*/
.hero-home {
position: relative;
min-height: 460px;
display: flex; align-items: center;
background-image:
linear-gradient(180deg, rgba(20,16,10,0.58) 0%, rgba(20,16,10,0.72) 100%),
url("../img/hero-bg.5bd27e26a625.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--color-white);
}
@media (min-width: 700px) {
.hero-home { min-height: 560px; }
}
@media (min-width: 1200px) {
.hero-home { min-height: 640px; }
}
.hero-home__inner { max-width: 640px; padding-block: var(--space-xl); }
.hero-home .hero__eyebrow { color: #E9F0C6; }
.hero-home h1 { color: var(--color-white); }
.hero-home .hero__lede { color: rgba(255,255,255,0.92); }
/* Variante claire du bouton secondaire, utilisée uniquement dans le hero
plein cadre : le style par défaut (bordure/texte encre) serait quasi
invisible sur un fond photo sombre. */
.hero-home .btn-secondary { border-color: var(--color-white); color: var(--color-white); }
.hero-home .btn-secondary:hover { background: var(--color-white); color: var(--color-ink); }
.hero-home__search {
display: flex; gap: 0.6rem; max-width: 480px; margin-top: var(--space-md);
}
.hero-home__search input[type="search"] {
flex: 1; min-height: 44px; font-family: var(--font-body); font-size: 1rem;
padding: 0.7rem 1rem; border: none; border-radius: var(--radius);
background: rgba(255,255,255,0.96); color: var(--color-ink);
}
.hero-home__search input[type="search"]::placeholder { color: var(--color-ink-soft); }
.hero-home__search .btn { min-width: 44px; padding-inline: 1.1rem; }
.hero-home__gauge-card {
display: inline-block; margin-top: var(--space-md);
background: rgba(247,244,236,0.96); border-radius: var(--radius);
padding: var(--space-sm) var(--space-md); box-shadow: var(--shadow-card);
}
/* --------------------------------------------------------------------- */
/* Jauge de Restfeuchte — élément signature */
/* --------------------------------------------------------------------- */
.moisture-gauge { font-family: var(--font-mono); }
.moisture-gauge__label {
display: flex; justify-content: space-between; font-size: 0.78rem;
color: var(--color-ink-soft); margin-bottom: 0.35rem; text-transform: uppercase;
letter-spacing: 0.06em;
}
.moisture-gauge__track {
position: relative; height: 10px; border-radius: 999px;
background: linear-gradient(
to right,
var(--color-forest) 0%, var(--color-forest) 66%,
var(--color-ember) 66%, var(--color-ember) 100%
);
/* 66% ≈ seuil 20/30 : au-delà, zone d'alerte humidité. */
}
.moisture-gauge__marker {
position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
background: var(--color-ink); border: 2px solid var(--color-white);
transform: translate(-50%, -50%);
box-shadow: 0 0 0 1px var(--color-straw);
}
.moisture-gauge__value {
margin-top: 0.4rem; font-weight: 600; font-size: 0.92rem; color: var(--color-ink);
}
/* --------------------------------------------------------------------- */
/* Cartes produit / grilles catalogue — style premium (ombre + lift) */
/* --------------------------------------------------------------------- */
.product-grid {
display: grid; gap: var(--space-md);
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.product-card {
background: var(--color-surface); border: var(--border); border-radius: var(--radius);
padding: var(--space-sm); display: flex; flex-direction: column; gap: 0.5rem;
text-decoration: none; color: inherit;
box-shadow: var(--shadow-card);
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.product-card:hover {
border-color: var(--color-forest);
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(43,36,28,0.10), 0 12px 24px rgba(43,36,28,0.10);
}
.product-card__image {
aspect-ratio: 3 / 4; background: var(--color-straw); border-radius: var(--radius-sm);
overflow: hidden; display: flex; align-items: center; justify-content: center;
color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.8rem;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.product-card__meta {
font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-ink-soft);
}
.product-card__price {
font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--color-ink);
margin-top: auto;
}
.badge {
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
padding: 0.2rem 0.55rem; border-radius: 999px; width: fit-content;
}
.badge--available { background: rgba(63,93,58,0.12); color: var(--color-forest-dark); }
.badge--unavailable { background: rgba(161,51,39,0.1); color: var(--color-error); }
/* --------------------------------------------------------------------- */
/* Filtres catalogue */
/* --------------------------------------------------------------------- */
.catalog-layout { display: grid; gap: var(--space-lg); }
.filters {
border: var(--border); border-radius: var(--radius); padding: var(--space-sm);
background: var(--color-surface); height: fit-content;
box-shadow: var(--shadow-card);
}
.filters h2 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.filters fieldset { border: none; padding: 0; margin: 0 0 var(--space-sm); }
.filters legend { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-soft); margin-bottom: 0.4rem; }
.filters label { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; cursor: pointer; min-height: 44px; }
@media (min-width: 900px) {
.catalog-layout { grid-template-columns: 240px 1fr; }
}
/* --------------------------------------------------------------------- */
/* Fiche produit */
/* --------------------------------------------------------------------- */
.product-detail { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); }
.product-detail__gallery {
aspect-ratio: 3/4; background: var(--color-straw); border-radius: var(--radius);
overflow: hidden; display: flex; align-items: center; justify-content: center;
color: var(--color-ink-soft); font-family: var(--font-mono);
box-shadow: var(--shadow-card);
}
.product-detail__gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__thumbnails {
display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem;
}
.product-detail__thumbnail {
padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
background: none; cursor: pointer; overflow: hidden; line-height: 0;
min-width: 44px; min-height: 44px;
transition: border-color 120ms ease;
}
.product-detail__thumbnail img {
display: block; width: 54px; height: 72px; object-fit: cover;
}
.product-detail__thumbnail:hover { border-color: var(--color-straw); }
.product-detail__thumbnail.is-active { border-color: var(--color-forest); }
.spec-list { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: 0.4rem; }
.spec-list li { display: flex; justify-content: space-between; font-size: 0.95rem; border-bottom: 1px dashed var(--color-straw); padding-bottom: 0.4rem; }
.spec-list b { font-family: var(--font-mono); font-weight: 600; }
.variant-picker { display: grid; gap: 0.6rem; margin-block: var(--space-sm); }
.variant-option {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem;
border: 1.5px solid var(--color-straw); border-radius: var(--radius); padding: 0.7rem 0.9rem;
cursor: pointer; font-family: var(--font-mono); font-size: 0.9rem;
transition: border-color 120ms ease, background-color 120ms ease;
}
.variant-option:has(input:checked) { border-color: var(--color-forest); background: rgba(63,93,58,0.06); }
.variant-option input { accent-color: var(--color-forest); }
@media (min-width: 900px) {
.product-detail { grid-template-columns: 1fr 1fr; }
}
/* --------------------------------------------------------------------- */
/* Panier */
/* --------------------------------------------------------------------- */
/* Le tableau panier (5 colonnes + formulaires inline) dépasse structurel-
lement les petits écrans (~530px de contenu minimal contre ~309px
disponibles à 360px). Plutôt que de faire défiler la PAGE entière
horizontalement (proscrit), seul ce conteneur peut défiler — la page
elle-même ne dépasse jamais le viewport. */
.cart-table-wrapper {
width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
border-radius: var(--radius);
}
.cart-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.95rem; }
.cart-table th { text-align: left; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); padding-bottom: 0.6rem; border-bottom: var(--border); }
.cart-table td { padding-block: 0.9rem; border-bottom: 1px dashed var(--color-straw); vertical-align: middle; }
.cart-table .qty-input { width: 4rem; min-height: 44px; font-family: var(--font-mono); padding: 0.35rem; border: 1.5px solid var(--color-straw); border-radius: var(--radius); }
.qty-input-lg { width: 5.5rem; min-height: 44px; font-family: var(--font-mono); padding: 0.5rem; border: 1.5px solid var(--color-straw); border-radius: var(--radius); }
.cart-summary { border: var(--border); border-radius: var(--radius); padding: var(--space-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.cart-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; font-family: var(--font-mono); margin: 0; }
.cart-summary dt { color: var(--color-ink-soft); }
.cart-summary .total-row dt, .cart-summary .total-row dd { font-weight: 700; font-size: 1.2rem; color: var(--color-ink); }
/* Conservé (non utilisé sur la page panier actuelle, retiré du parcours
d'achat sur demande) — supprimer ce bloc si vous ne réutilisez jamais
cette fonctionnalité ailleurs. */
.shipping-estimator { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-straw); }
.shipping-estimator__row { display: flex; gap: 0.5rem; }
.shipping-estimator input { flex: 1; min-height: 44px; font-family: var(--font-mono); padding: 0.55rem 0.7rem; border: 1.5px solid var(--color-straw); border-radius: var(--radius); }
.shipping-estimator__result { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.9rem; min-height: 1.4em; }
.shipping-estimator__result[data-state="ok"] { color: var(--color-forest-dark); }
.shipping-estimator__result[data-state="error"] { color: var(--color-error); }
.empty-state {
text-align: center; padding: var(--space-xl) var(--space-md); color: var(--color-ink-soft);
}
.form-input {
display: block; width: 100%; font-family: var(--font-body); font-size: 1rem;
padding: 0.75rem 0.8rem; border: 1.5px solid var(--color-straw); border-radius: var(--radius);
margin-bottom: var(--space-sm); background: var(--color-white); color: var(--color-ink);
min-height: 44px;
}
.form-input:focus { border-color: var(--color-forest); }
.legal-content h2 {
font-size: 1.3rem; margin-top: var(--space-lg); border-bottom: 1px solid var(--color-straw);
padding-bottom: 0.4rem;
}
.legal-content h3 { font-size: 1.05rem; margin-top: var(--space-md); }
.legal-content p, .legal-content ul, .legal-content ol { line-height: 1.7; }
.legal-content ul, .legal-content ol { padding-left: 1.4rem; }
.legal-content a { text-decoration-thickness: 1.5px; }
/* --------------------------------------------------------------------- */
/* Footer — vert citron clair, texte foncé, cohérent avec le header */
/* --------------------------------------------------------------------- */
.site-footer {
background: var(--color-citron); color: var(--color-ink);
border-top: 1px solid var(--color-citron-deep);
padding-block: var(--space-lg); margin-top: var(--space-xl); font-size: 0.9rem;
}
.site-footer a { color: var(--color-forest-dark); font-weight: 600; }
.site-footer a:hover { color: var(--color-ember-dark); }
.site-footer__logo { margin-bottom: var(--space-sm); }
.site-footer__grid { display: grid; gap: var(--space-md); }
@media (min-width: 700px) {
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__newsletter {
grid-column: 1 / -1;
border-top: 1px solid var(--color-citron-deep);
padding-top: var(--space-md); margin-top: 0.2rem;
}
.site-footer__newsletter strong {
display: block; margin-bottom: 0.3rem;
font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em; color: var(--color-ink);
}
.site-footer__newsletter-form {
display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 420px; margin-top: 0.6rem;
}
.site-footer__newsletter-form input[type="email"] {
flex: 1; min-width: 180px; min-height: 44px; font-family: var(--font-body); font-size: 0.95rem;
padding: 0.6rem 0.9rem; border: 1.5px solid var(--color-citron-deep); border-radius: var(--radius);
background: var(--color-white); color: var(--color-ink);
}
.site-footer__contact strong {
display: block; color: var(--color-ink); margin-bottom: 0.4rem;
font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em;
}
.site-footer__contact p { margin-bottom: 0.4rem; line-height: 1.5; color: var(--color-ink); }
.site-footer__payment-icons {
display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem;
}
.site-footer__payment-icons svg {
border-radius: 4px; box-shadow: 0 1px 3px rgba(43,36,28,0.18);
}
.site-footer__bottom {
margin-top: var(--space-lg); padding-top: var(--space-md);
border-top: 1px solid var(--color-citron-deep);
text-align: center; font-size: 0.82rem; color: var(--color-ink-soft);
}
.site-footer__bottom p { margin: 0; }
/* --------------------------------------------------------------------- */
/* Bouton WhatsApp flottant */
/* --------------------------------------------------------------------- */
.whatsapp-float {
position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200;
width: 56px; height: 56px; border-radius: 50%;
background: var(--color-white);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
transition: transform 120ms ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
@media (min-width: 640px) {
.whatsapp-float { right: 1.8rem; bottom: 1.8rem; }
}
/* --------------------------------------------------------------------- */
/* Messages Django */
/* --------------------------------------------------------------------- */
.messages { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.messages li {
padding: 0.8rem 1rem; border-radius: var(--radius); margin-bottom: 0.6rem;
border: var(--border); font-size: 0.92rem;
}
.messages .success { background: rgba(63,93,58,0.1); border-color: var(--color-forest); }
.messages .error { background: rgba(161,51,39,0.08); border-color: var(--color-error); }