/* ==========================================================================
   DISTRICT CARTELS VINTAGE — feuille de style
   Design : ciel bleu doux avec nuages, minimaliste, premium, mobile-first.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #5a6572;
  --border: #e2ecf6;
  --surface: #eef5fc;

  /* Ciel */
  --sky-top: #bfe0fb;
  --sky-mid: #e3f2ff;

  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --black: #1d1d1f;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.05);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-fun: "Fredoka", "Comic Sans MS", var(--font);

  /* Encre cartoon (contours et ombres franches) */
  --ink: #223047;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Garde-fou : jamais de défilement horizontal, quel que soit le décor */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

/* --------------------------------------------------------------------------
   Ciel et nuages (calque fixe injecté par main.js, derrière tout le contenu)
   -------------------------------------------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, #ffffff 100%);
}

.cloud {
  position: absolute;
  left: -340px;
  width: 240px;
  height: 74px;
  background: #fff;
  border-radius: 999px;
  filter: blur(1px);
  animation: cloud-drift linear infinite;
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 100px; height: 100px; top: -44px; left: 42px; }
.cloud::after  { width: 72px;  height: 72px;  top: -30px; right: 46px; }

/* Tailles, hauteurs et vitesses variées pour un ciel naturel */
.cloud:nth-child(1) { top: 12%; transform: scale(1);    opacity: 0.95; animation-duration: 95s;  animation-delay: -12s; }
.cloud:nth-child(2) { top: 27%; transform: scale(0.6);  opacity: 0.8;  animation-duration: 120s; animation-delay: -58s; }
.cloud:nth-child(3) { top: 10%; transform: scale(0.45); opacity: 0.65; animation-duration: 140s; animation-delay: -95s; }
.cloud:nth-child(4) { top: 40%; transform: scale(0.8);  opacity: 0.8;  animation-duration: 110s; animation-delay: -32s; }
.cloud:nth-child(5) { top: 56%; transform: scale(0.5);  opacity: 0.55; animation-duration: 150s; animation-delay: -120s; }
.cloud:nth-child(6) { top: 72%; transform: scale(0.68); opacity: 0.45; animation-duration: 130s; animation-delay: -74s; }

/* Le déplacement passe par `translate` pour ne pas écraser le scale */
@keyframes cloud-drift {
  to { translate: calc(100vw + 700px) 0; }
}

/* ---- Pluie de vêtements (emojis générés par main.js) ---- */

.rain { position: absolute; inset: 0; }

.rain span {
  position: absolute;
  top: -80px;
  animation: clothes-fall linear infinite;
  filter: drop-shadow(0 3px 4px rgba(34, 48, 71, 0.18));
}

@keyframes clothes-fall {
  to { transform: translateY(calc(100vh + 160px)) rotate(320deg); }
}
@keyframes clothes-fall-gauche {
  to { transform: translateY(calc(100vh + 160px)) rotate(-300deg); }
}

/* Sur mobile, moitié moins de vêtements pour garder le texte lisible */
@media (max-width: 700px) {
  .rain span:nth-child(2n) { display: none; }
}

/* ---- Montagne géante et nid de l'aigle royal (SVG injecté par main.js) ---- */

.mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Plafonnée en hauteur pour ne pas envahir les très grands écrans */
  height: min(30vw, 52vh);
  display: block;
}
@media (max-width: 700px) { .mountain { height: 52vw; } }

/* Collines étirées sur toute la largeur — visibles seulement en ultra-large,
   où la montagne (complète, avec son sommet) est décalée à gauche des cartes */
.hills-back, .hills-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
}
.hills-back { height: min(26vh, 380px); }
.hills-front { height: min(10vh, 150px); }

body.ultra .hills-back, body.ultra .hills-front { display: block; }
body.ultra .mountain .colline-interne { display: none; }

/* ---- Aigle royal en vol (mascotte, toujours visible dans le ciel) ---- */

.eagle-fly {
  position: absolute;
  top: 15%;
  left: 0;
  width: 120px;
  filter: drop-shadow(0 4px 6px rgba(34, 48, 71, 0.2));
  animation: eagle-fly 48s linear infinite;
}
@media (max-width: 700px) { .eagle-fly { width: 84px; } }

@keyframes eagle-fly {
  0%   { translate: -200px 0; }
  25%  { translate: 26vw 22px; }
  50%  { translate: 52vw -14px; }
  75%  { translate: 78vw 18px; }
  100% { translate: 108vw 0; }
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

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

h1, h2, h3 {
  font-family: var(--font-fun);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.display {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
}

.subtitle {
  color: var(--muted);
  font-size: clamp(1.02rem, 2.5vw, 1.25rem);
  font-weight: 400;
  max-width: 560px;
  margin: 18px auto 0;
}

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: -0.03em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-fun);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease);
}

.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { transform: scale(1.03); box-shadow: var(--shadow-soft); opacity: 0.92; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }

.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--border); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  /* La barre de navigation respire plus large que le contenu des pages */
  max-width: 1400px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo span { color: var(--muted); font-weight: 500; }

/* Logo image placé à gauche du titre (header et footer) */
.logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-brand .logo-mark { width: 56px; height: 56px; }

@media (max-width: 480px) {
  .logo { font-size: 0.94rem; gap: 9px; }
  .logo-mark { width: 34px; height: 34px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.89rem;
}

/* Sur PC, le lien Accueil est retiré (le logo ramène à l'accueil) ;
   il reste visible dans le menu mobile. */
.nav-links > li:first-child { display: none; }

.nav-links a {
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

/* Groupe réseaux sociaux (Discord + Instagram) */
.nav-social {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nav-discord {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--text);
  color: #fff !important;
  font-weight: 600;
}
.nav-discord:hover { opacity: 0.85; }

/* Boutons ronds Instagram / TikTok */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text) !important;
  flex-shrink: 0;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-icon:hover { background: var(--surface); border-color: var(--text); }
.nav-icon svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.8px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.9px) rotate(-45deg); }

/* Bascule en menu burger avant que le logo ne touche les liens
   (~1290 px depuis l'ajout de l'icône panier) */
@media (max-width: 1320px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 28px;
    /* Fond opaque : le flou n'est pas rendu partout, la page ne doit pas transparaître */
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
      visibility 0.3s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav-links > li:first-child { display: block; }

  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
  }

  .nav-links li.nav-social {
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
  }
  .nav-links li.nav-social a { border-bottom: none; }
  .nav-links li.nav-social .nav-discord { padding: 12px 26px; }
  /* display:inline-flex requis : .nav-links a impose display:block et décentre l'icône */
  .nav-links li.nav-social .nav-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    padding: 0;
  }
  .nav-links li.nav-social .nav-icon svg { width: 20px; height: 20px; }

  /* Le menu peut être plus haut que l'écran (paysage) : on le rend défilable */
  .nav-links { max-height: calc(100svh - 64px); overflow-y: auto; }

  /* Le panier devient une ligne normale du menu, avec son libellé */
  .nav-links .nav-panier-item a.nav-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
    color: var(--text) !important;
  }
  .nav-links .nav-panier-item svg { width: 21px; height: 21px; flex-shrink: 0; }
  .nav-links .nav-panier-item .nav-panier-texte { display: inline; }
  .nav-links .nav-panier-item .panier-badge {
    position: static;
    border: none;
    margin-left: 2px;
  }
}

/* --------------------------------------------------------------------------
   Accueil — héro plein écran + cartes niveaux
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 120px 0 70px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 56px;
}

@media (max-width: 1000px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .level-grid { grid-template-columns: 1fr; } }

/* Cartes niveaux façon cartoon : contour épais, ombre franche, rotation légère */
.level-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 11px;
  padding: 28px 24px 26px;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: #fff;
  box-shadow: 7px 9px 0 var(--card-shadow, rgba(34, 48, 71, 0.2));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s var(--ease);
}

.level-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 12px 16px 0 var(--card-shadow, rgba(34, 48, 71, 0.2));
}

/* Gros emoji cartoon en tête de carte */
.level-card::before { font-size: 2.5rem; line-height: 1.1; }

.level-card[data-level="debutant"] {
  --card-shadow: rgba(52, 199, 89, 0.4);
  background: #e9fbe9;
  transform: rotate(-1.6deg);
}
.level-card[data-level="debutant"]::before { content: "🌱"; }

.level-card[data-level="intermediaire"] {
  --card-shadow: rgba(255, 149, 0, 0.38);
  background: #fff4e2;
  transform: rotate(1.2deg);
}
.level-card[data-level="intermediaire"]::before { content: "🚀"; }

.level-card[data-level="professionnel"] {
  --card-shadow: rgba(255, 59, 48, 0.32);
  background: #ffeae7;
  transform: rotate(-1.1deg);
}
.level-card[data-level="professionnel"]::before { content: "📦"; }

.level-card[data-level="unite"] {
  --card-shadow: rgba(34, 48, 71, 0.3);
  background: #f0f2f5;
  transform: rotate(1.5deg);
}
.level-card[data-level="unite"]::before { content: "🛍️"; }

/* L'emoji remplace la pastille dans les cartes (elle sert encore aux pages niveau) */
.level-card .level-dot { display: none; }

.level-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.level-card h2 { font-size: 1.4rem; color: var(--ink); }

.level-card p {
  color: #5a6472;
  font-size: 0.94rem;
  flex: 1;
}

/* Bouton cartoon « pressable » */
.level-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.level-btn::after { content: "→"; transition: transform 0.3s var(--ease); }
.level-card:hover .level-btn { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.level-card:hover .level-btn::after { transform: translateX(4px); }

.level-card[data-level="debutant"]      .level-btn { background: #2fbf58; }
.level-card[data-level="intermediaire"] .level-btn { background: #ff9500; }
.level-card[data-level="professionnel"] .level-btn { background: #ff453a; }
.level-card[data-level="unite"]         .level-btn { background: var(--ink); }

/* Bandeau de réassurance */

.trust {
  padding: 60px 0 90px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  text-align: center;
}
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-item {
  padding: 30px 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 2.5px solid var(--ink);
  box-shadow: 5px 7px 0 rgba(34, 48, 71, 0.15);
}
.trust-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.trust-item p { color: var(--muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Pages niveau — héro + grille produits
   -------------------------------------------------------------------------- */

.page-hero {
  padding: 150px 0 50px;
  text-align: center;
}

.page-hero .level-dot {
  display: inline-block;
  margin: 0 auto 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.dot-green  { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-red    { background: var(--red); }
.dot-black  { background: var(--black); }

.products {
  padding: 30px 0 100px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.product-media {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.04); }

.product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
  flex: 1;
}

.product-body h3 { font-size: 1.12rem; }

.product-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.product-tag {
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
}

.product-price { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.product-price small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }

.product-link {
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.product-link::after { content: "→"; transition: transform 0.3s var(--ease); }
.product-card:hover .product-link::after { transform: translateX(4px); }

/* Encadré devis (page professionnel) */

.quote-box {
  margin-top: 60px;
  padding: 48px 32px;
  border-radius: var(--radius);
  background: var(--text);
  color: #fff;
  text-align: center;
}
.quote-box h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.quote-box p { color: rgba(255, 255, 255, 0.65); max-width: 520px; margin: 12px auto 26px; }
.quote-box .btn { background: #fff; color: var(--text); }

/* --------------------------------------------------------------------------
   Page à l'unité — filtres
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 6px 0 36px;
}

.filters select {
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 40px 11px 18px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231d1d1f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 16px center;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.filters select:hover, .filters select:focus { border-color: var(--text); outline: none; }

.filters-reset {
  padding: 11px 18px;
  font-size: 0.92rem;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.25s var(--ease);
}
.filters-reset:hover { color: var(--text); text-decoration: underline; }

.results-count {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding-bottom: 26px;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
}

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */

.product-page {
  padding: 140px 0 100px;
}

.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .product-layout { grid-template-columns: 1fr; gap: 32px; } }

.gallery-main {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gallery-thumbs button {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s var(--ease);
}
.gallery-thumbs button.active { border-color: var(--text); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Panneau papier opaque : lisible sur la montagne */
.product-info {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 rgba(34, 48, 71, 0.18);
  padding: 32px 30px;
}
@media (max-width: 600px) { .product-info { padding: 24px 20px; } }

.product-info .product-tag { margin-bottom: 14px; }
.product-info h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

.product-info .price {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 14px 0 4px;
}
.product-info .price small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }

.product-info .desc { color: var(--muted); margin: 14px 0 26px; }

.spec-list {
  border-top: 1px solid var(--border);
  margin-bottom: 28px;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.94rem;
}
.spec-list li span:first-child { color: var(--muted); white-space: nowrap; }
.spec-list li span:last-child { text-align: right; font-weight: 500; }

.shipping-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   FAQ (accordéons)
   -------------------------------------------------------------------------- */

/* Panneau papier opaque : le texte reste lisible sur la montagne */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 rgba(34, 48, 71, 0.18);
  padding: 10px 34px;
}
@media (max-width: 600px) { .faq-list { padding: 4px 20px; } }

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  letter-spacing: -0.01em;
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-answer p {
  color: var(--muted);
  padding-bottom: 22px;
  font-size: 0.96rem;
}

.section { padding: 60px 0 100px; }
.section-head { text-align: center; margin-bottom: 46px; }

/* --------------------------------------------------------------------------
   À propos — le livre de notre histoire
   -------------------------------------------------------------------------- */

.prose {
  max-width: 660px;
  margin: 0 auto;
}
.prose p {
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 22px;
}
.prose strong { color: var(--text); font-weight: 600; }

.book-wrap {
  max-width: 920px;
  margin: 0 auto;
  perspective: 2200px;
}

.book { position: relative; }

.book-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  background: #fdf8ee;
  border: 3px solid var(--ink);
  border-radius: 16px 22px 22px 16px;
  box-shadow: 10px 14px 0 rgba(34, 48, 71, 0.25);
  position: relative;
  overflow: hidden;
}

/* Ombre de la reliure au centre */
.book-spread::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 30px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(34, 48, 71, 0.16), transparent);
  pointer-events: none;
  z-index: 1;
}

.book-page {
  position: relative;
  padding: 38px 36px 58px;
  background: #fdf8ee;
}
/* hidden doit gagner même sur les pages avec display forcé (.book-page-fin) */
.book-page[hidden] { display: none !important; }
.book-page-left {
  border-right: 2px dashed rgba(34, 48, 71, 0.22);
  background: linear-gradient(90deg, #f2e9d5 0, #fdf8ee 9%);
}
.book-page-right {
  background: linear-gradient(270deg, #f2e9d5 0, #fdf8ee 9%);
}

.book-page h3 {
  font-size: 1.12rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.book-page p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #4a5261;
  margin-bottom: 13px;
}
.book-page strong { color: var(--ink); }

.page-num {
  position: absolute;
  bottom: 16px;
  font-family: var(--font-fun);
  font-size: 0.85rem;
  color: #a89e86;
}
.book-page-left .page-num { left: 28px; }
.book-page-right .page-num { right: 28px; }

/* Dernière page : grand mot de bienvenue */
.book-page-fin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.book-bienvenue {
  font-family: var(--font-fun);
  font-size: 1.5rem !important;
  font-weight: 600;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}
.book-signature { color: #a89e86 !important; font-style: italic; }

/* ---- Couverture (fermée au chargement, s'ouvre au clic) ---- */

.book-cover {
  position: absolute;
  inset: -3px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(150deg, #33518f, #1e3462);
  border: 3px solid var(--ink);
  border-radius: 16px 22px 22px 16px;
  box-shadow: 10px 14px 0 rgba(34, 48, 71, 0.25);
  color: #fff;
  text-align: center;
  cursor: pointer;
  padding: 30px;
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 1s cubic-bezier(0.6, 0.05, 0.28, 1), opacity 0.35s 0.7s;
}

/* Cadre doré décoratif */
.book-cover::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2.5px solid rgba(246, 168, 33, 0.55);
  border-radius: 10px 16px 16px 10px;
  pointer-events: none;
}

.book.open .book-cover {
  transform: rotateY(-130deg);
  opacity: 0;
  pointer-events: none;
}

.book-cover-eagle { font-size: 3.4rem; line-height: 1; }
.book-cover-title {
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.book-cover-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.book-cover-open {
  margin-top: 14px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #f6a821;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 0.98rem;
  animation: cover-bounce 2.2s ease-in-out infinite;
}
.book-cover:hover .book-cover-open { animation-play-state: paused; }

@keyframes cover-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- Navigation des pages ---- */

.book-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease) 0.6s, visibility 0.4s 0.6s;
}
.book-wrap.open .book-nav { opacity: 1; visibility: visible; }

.book-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.2s;
}
.book-arrow:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.book-arrow:disabled { opacity: 0.3; cursor: default; }

.book-pageinfo {
  font-family: var(--font-fun);
  font-size: 0.92rem;
  color: var(--muted);
  min-width: 130px;
  text-align: center;
}

@media (max-width: 820px) {
  .book-spread { grid-template-columns: 1fr; min-height: 0; }
  .book-spread::before { display: none; }
  .book-page { padding: 30px 24px 50px; }
  .book-page-left {
    border-right: none;
    border-bottom: 2px dashed rgba(34, 48, 71, 0.22);
    background: #fdf8ee;
  }
  .book-page-right { background: #fdf8ee; }
  .book-page-fin { min-height: 220px; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
  /* Panneau papier opaque : lisible sur la montagne */
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 rgba(34, 48, 71, 0.18);
  padding: 38px 36px;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; gap: 34px; padding: 24px 20px; }
}

.contact-aside h2 { font-size: 1.3rem; margin-bottom: 10px; }
.contact-aside p { color: var(--muted); font-size: 0.96rem; margin-bottom: 22px; }

.contact-channel {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.contact-channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.contact-channel strong { display: block; font-size: 0.95rem; }
.contact-channel span { color: var(--muted); font-size: 0.86rem; }

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.96rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.25s var(--ease);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--text); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand p {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 280px;
  margin-top: 8px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.9rem;
}
.footer-nav a { color: var(--muted); transition: color 0.25s var(--ease); }
.footer-nav a:hover { color: var(--text); }

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Boutique : compte, commande, admin
   -------------------------------------------------------------------------- */

.paper-panel {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 10px 0 rgba(34, 48, 71, 0.18);
  padding: 32px 30px;
}
@media (max-width: 600px) { .paper-panel { padding: 24px 20px; } }

.compte-root { max-width: 1000px; margin: 0 auto; }

.compte-grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) { .compte-grille { grid-template-columns: 1fr; } }

.auth-panel { max-width: 480px; margin: 0 auto; }

.auth-tabs {
  display: flex;
  gap: 8px;
  background: var(--surface);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 11px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.auth-tab.active { background: var(--ink); color: #fff; }

.form-erreur {
  color: #e0281c;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 1.2em;
  margin: 4px 0 10px;
}

.compte-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.compte-entete .btn { padding: 10px 18px; font-size: 0.88rem; }

.twofa-bloc {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.twofa-bloc h3 { font-size: 1.05rem; margin-bottom: 8px; }
.twofa-etapes { padding-left: 20px; color: var(--muted); font-size: 0.92rem; }
.twofa-etapes li { margin-bottom: 6px; list-style: decimal; }
.twofa-secret {
  font-family: Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
  margin: 12px 0 16px;
  word-break: break-all;
  user-select: all;
}

/* Cartes commandes (client et admin) */
.commande-carte {
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.commande-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-fun);
  font-size: 1.02rem;
}
.commande-entete .badge { margin-left: auto; }
.commande-ligne { margin-top: 8px; font-size: 0.96rem; }
.commande-meta { color: var(--muted); font-size: 0.86rem; margin-top: 4px; }
.commande-etapes { color: var(--muted); font-size: 0.8rem; margin-top: 10px; }
.commande-etapes span:last-child { color: var(--ink); font-weight: 600; }
.commande-total { font-family: var(--font-fun); font-size: 1.15rem; margin-top: 16px; }
.commande-numero {
  font-family: var(--font-fun);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  margin: 10px 0 4px;
}

.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 2px solid transparent;
  white-space: nowrap;
}
.badge-attente     { background: #f0f2f5; color: #4a5261; border-color: #c9d1dc; }
.badge-confirmee   { background: #e3f0ff; color: #1256a0; border-color: #9cc5f0; }
.badge-preparation { background: #fff4e2; color: #a05e00; border-color: #f4c77c; }
.badge-expediee    { background: #efe7ff; color: #5b34a5; border-color: #c5aef0; }
.badge-livree      { background: #e9fbe9; color: #1a7a3a; border-color: #97e0ab; }
.badge-annulee     { background: #ffeae7; color: #b3271b; border-color: #f4a89f; }

.recap-produit {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}
.recap-produit img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.form-group select {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.96rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

/* Panier */
.nav-panier { position: relative; }
.nav-panier-texte { display: none; } /* visible uniquement dans le menu mobile */
.panier-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff453a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
/* hidden doit gagner malgré le display:flex (panier vide = pas de badge) */
.panier-badge[hidden] { display: none !important; }

.panier-ligne {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.panier-ligne img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--border);
}
.panier-ligne-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panier-ligne-infos strong { font-size: 0.95rem; }
.panier-qte {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  background: var(--bg);
}
.panier-sous-total { font-family: var(--font-fun); white-space: nowrap; }
.panier-retirer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.panier-retirer:hover { color: #e0281c; border-color: #e0281c; }
@media (max-width: 560px) {
  /* Deux rangées : [photo | nom | ✕] puis [photo | quantité | sous-total] */
  .panier-ligne { grid-template-columns: 52px 1fr auto; row-gap: 8px; }
  .panier-ligne img { width: 52px; height: 52px; grid-row: 1 / 3; }
  .panier-ligne-infos { grid-column: 2; grid-row: 1; }
  .panier-retirer { grid-column: 3; grid-row: 1; justify-self: end; }
  .panier-qte { grid-column: 2; grid-row: 2; justify-self: start; }
  .panier-sous-total { grid-column: 3; grid-row: 2; justify-self: end; }
}

.panier-items-liste { margin: 10px 0 4px; padding: 0; }
.panier-items-liste li {
  font-size: 0.92rem;
  padding: 3px 0;
  color: var(--text);
}

.btn-annuler {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid #e0281c;
  background: none;
  color: #e0281c;
  font-family: var(--font-fun);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-annuler:hover { background: #e0281c; color: #fff; }

/* Stock */
.stock-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  z-index: 1;
}
.product-media { position: relative; }
.product-epuise .product-media img { filter: grayscale(1); opacity: 0.55; }
.stock-alerte {
  color: #e0281c;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

/* Admin */
.admin-root { max-width: 1000px; margin: 0 auto; }

.admin-recherche {
  flex: 1;
  min-width: 200px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  background: #fff;
}
.admin-recherche:focus { outline: none; border-color: var(--ink); }

.admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-family: var(--font-fun);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Lignes catalogue (admin) */
.cat-ligne {
  display: grid;
  grid-template-columns: 1.6fr auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 820px) {
  .cat-ligne { grid-template-columns: 1fr 1fr; }
  .cat-nom { grid-column: 1 / -1; }
  .cat-champ input { width: 100%; }
  .cat-visible { align-self: end; padding-bottom: 10px; }
  .cat-boutons { grid-column: 1 / -1; justify-content: flex-end; }
}
.cat-masque { opacity: 0.45; }
.cat-nom { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-name {
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}
.cat-name:hover, .cat-name:focus { border-color: var(--border); background: #fff; outline: none; }
.cat-champ {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.cat-champ input {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
}
.cat-visible {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cat-boutons { display: flex; gap: 8px; }
.cat-boutons .btn { padding: 9px 14px; font-size: 0.8rem; }

.cat-ajout-titre {
  font-family: var(--font-fun);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.cat-formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin-top: 18px;
}
@media (max-width: 640px) { .cat-formulaire { grid-template-columns: 1fr; } }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: center;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .admin-stats { grid-template-columns: 1fr; } }
.admin-stats h3 { font-size: 1.5rem; }
.admin-stats p { color: var(--muted); font-size: 0.86rem; }

.admin-barre {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-barre .btn { padding: 10px 18px; font-size: 0.88rem; }

.admin-actions {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 720px) { .admin-actions { grid-template-columns: 1fr; } }
.admin-actions select,
.admin-actions input {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.admin-actions .btn { padding: 10px 18px; font-size: 0.88rem; }

/* Coordonnées de paiement (après commande uniquement) */
.rib-bloc {
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 6px 0 4px;
}
.rib-bloc h3 { font-size: 1.02rem; color: var(--ink); }
.rib-iban {
  font-family: Consolas, monospace;
  font-size: 0.86rem;
  user-select: all;
  word-break: break-all;
}
.rib-mini {
  margin-top: 12px;
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
}
.rib-mini strong { color: var(--ink); }

/* Pages légales */
.legal-panel { max-width: 780px; margin: 0 auto; }
.legal-panel h2 {
  font-size: 1.15rem;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal-panel h2:first-child { margin-top: 0; }
.legal-panel p { color: #4a5261; font-size: 0.95rem; margin-bottom: 12px; }
.legal-panel a { text-decoration: underline; }

.footer-bottom a { color: var(--muted); text-decoration: underline; }
.footer-bottom a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   Badges de disponibilité (🟢 stock District Cartels / 🟡 commande fournisseur)
   -------------------------------------------------------------------------- */

.dispo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.dispo-stock    { color: #1a7a3a; border: 2px solid #97e0ab; background: #e9fbe9; }
.dispo-commande { color: #a05e00; border: 2px solid #f4c77c; background: #fff4e2; }

/* Sur les cartes produit : posé sur la photo */
.product-media .dispo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

/* Fiche produit : badge à côté de l'étiquette de niveau */
.product-tag-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.product-tag-ligne .product-tag { margin-bottom: 0; }

/* Encadré « sur commande fournisseur » (fiche produit et panier) */
.commande-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff4e2;
  border: 2px solid #f4c77c;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9rem;
  color: #6b4a10;
  margin-bottom: 16px;
}

/* Légende des badges (page catalogue) */
.legende-dispo {
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Bandeau vers l'outlet (page catalogue) */
.bandeau-outlet {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding: 26px 28px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 7px 9px 0 rgba(34, 48, 71, 0.18);
  transition: transform 0.3s var(--ease);
}
.bandeau-outlet:hover { transform: translateY(-4px); }
.bandeau-outlet-emoji { font-size: 2.4rem; line-height: 1; }
.bandeau-outlet > span:nth-child(2) { flex: 1; min-width: 220px; color: var(--muted); }
.bandeau-outlet strong { color: var(--text); font-family: var(--font-fun); font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   Accueil — guide + communauté Discord
   -------------------------------------------------------------------------- */

.commu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 820px) { .commu-grid { grid-template-columns: 1fr; } }

.commu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 30px 28px;
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 7px 9px 0 rgba(34, 48, 71, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s var(--ease);
}
.commu-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 12px 16px 0 rgba(34, 48, 71, 0.2); }
.commu-guide   { background: #fff4e2; transform: rotate(-0.8deg); }
.commu-discord { background: #e9efff; transform: rotate(0.8deg); }
.commu-emoji { font-size: 2.5rem; line-height: 1.1; }
.commu-card h3 { font-size: 1.35rem; color: var(--ink); }
.commu-card p { color: #5a6472; font-size: 0.95rem; flex: 1; }
.commu-liste {
  color: #5a6472;
  font-size: 0.95rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.commu-guide   .level-btn { background: #ff9500; }
.commu-discord .level-btn { background: #5865f2; }

/* --------------------------------------------------------------------------
   Avis clients
   -------------------------------------------------------------------------- */

.avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .avis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .avis-grid { grid-template-columns: 1fr; } }

.avis-carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 7px 0 rgba(34, 48, 71, 0.15);
}
.avis-etoiles { color: #f6a821; letter-spacing: 2px; font-size: 1.05rem; white-space: nowrap; }
.avis-texte { color: var(--text); font-size: 0.95rem; flex: 1; }
.avis-auteur { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* Choix de la note (page Mon compte) */
.avis-note { display: flex; gap: 4px; margin: 10px 0 12px; }
.avis-note button {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: #d5dde6;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s var(--ease), color 0.15s var(--ease);
}
.avis-note button:hover { transform: scale(1.15); }
.avis-note button.active { color: #f6a821; }

/* --------------------------------------------------------------------------
   Guide du revendeur
   -------------------------------------------------------------------------- */

.guide-sommaire {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .guide-sommaire { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .guide-sommaire { grid-template-columns: repeat(2, 1fr); } }

.guide-somm-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 6px 0 rgba(34, 48, 71, 0.15);
  font-family: var(--font-fun);
  font-size: 0.88rem;
  color: var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.guide-somm-carte:hover { transform: translateY(-4px); box-shadow: 7px 10px 0 rgba(34, 48, 71, 0.15); }
.guide-somm-carte span { font-size: 1.7rem; line-height: 1; }

.guide-chapitres { padding-bottom: 100px; max-width: 900px; }
.guide-chapitre { margin-top: 26px; scroll-margin-top: 90px; }
.guide-chapitre h2 { font-size: 1.45rem; color: var(--ink); margin-bottom: 12px; }
.guide-chapitre > p { color: #4a5261; margin-bottom: 14px; }

.guide-liste { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.guide-liste li { color: #4a5261; font-size: 0.96rem; padding-left: 4px; }
.guide-liste strong { color: var(--ink); }

.guide-astuce {
  background: #e9fbe9;
  border: 2px solid #97e0ab;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.93rem;
  color: #1c5a30;
}

.guide-formule {
  font-family: var(--font-fun);
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0;
}

.guide-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quote-box .guide-cta .btn { background: #fff; color: var(--text); }
.guide-chapitres .quote-box { margin-top: 40px; }

/* Calculateur de marges */
.calc { margin: 18px 0; }
.calc-champs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .calc-champs { grid-template-columns: 1fr; } }
.calc-champs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}
.calc-champs input {
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.calc-champs input:focus { outline: none; border-color: var(--text); }

.calc-resultats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .calc-resultats { grid-template-columns: repeat(2, 1fr); } }
.calc-tuile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
}
.calc-tuile span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.calc-tuile strong { font-family: var(--font-fun); font-size: 1.15rem; }
.calc-bon { background: #e9fbe9; }
.calc-bon strong { color: #1a7a3a; }
.calc-mauvais { background: #ffeae7; }
.calc-mauvais strong { color: #b3271b; }

/* Options avancées d'une ligne produit (admin) */
.cat-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 4px 0 6px;
}
.cat-options .cat-champ input,
.cat-options .cat-champ select {
  width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  background: #fff;
}

/* --------------------------------------------------------------------------
   Animations d'apparition
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }

  /* Nuages immobiles mais visibles (sans animation, left:-340px les cacherait) */
  .cloud:nth-child(1) { left: 8%; }
  .cloud:nth-child(2) { left: 46%; }
  .cloud:nth-child(3) { left: 72%; }
  .cloud:nth-child(4) { left: 24%; }
  .cloud:nth-child(5) { left: 62%; }
  .cloud:nth-child(6) { left: 86%; }

  /* La pluie de vêtements est purement décorative : on la coupe */
  .rain { display: none; }

  /* L'aigle reste posé dans le ciel (sans animation, translate -200px le cacherait) */
  .eagle-fly { left: auto; right: 10%; translate: none; }
}


/* ==========================================================================
   TRADUCTEUR (GTranslate) — bulle drapeau flottante en bas à gauche
   ========================================================================== */
.gtranslate_wrapper {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 950;
}

/* Habillage cartoon du bouton (le widget injecte .gt_float_switcher) */
.gt_float_switcher {
  font-family: "Fredoka", sans-serif !important;
  border: 2px solid var(--ink);
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 rgba(34, 48, 71, 0.18);
}

@media (max-width: 640px) {
  .gtranslate_wrapper { bottom: 12px; left: 12px; }
}