/* =============================================
   LITTÉRATURE DU FASO — app.css
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;600;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --bg-cream: #F5EFE0;
  --bg-cream-light: #FAF6ED;
  --red: #B5451B;
  --red-dark: #8B3214;
  --green: #1B4332;
  --green-dark: #143326;
  --orange: #E07B39;
  --gold: #D4A041;
  --text-dark: #1A1A1A;
  --text-mid: #444;
  --text-light: #777;
  --white: #FFFFFF;
  --border: #E0D8C8;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.15);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all 0.3s ease;

  /* Maquette Figma — header & hero */
  --nav-green: #1D4A36;
  --nav-gold: #F4AB23;
  --accent-red: #B9431A;
  --hero-highlight: #D9582B;
  --font-display: 'Montserrat Alternates', 'Inter', sans-serif;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-cream);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.3s ease;
}

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 32px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  line-height: 1.2;
  flex-shrink: 0;
}

.navbar-logo-container {
  width: 74px;
  height: 74px;
  background: #FFF9EC;
  border: 3px solid var(--accent-red);
  border-top: none;
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  padding: 6px;
}

.navbar-inner .navbar-logo-container {
  width: 164px;
  height: 124px;
  border-radius: 0 0 28px 28px;
  transform: translateY(18px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 10px;
}

.navbar-inner .navbar-logo-container:hover {
  transform: translateY(15px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  border-color: var(--nav-gold);
}

.navbar-logo-container img {
  height: 100% !important;
  width: auto !important;
  object-fit: contain;
  filter: none !important;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--red), var(--green));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon svg {
  width: 34px;
  height: 34px;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.navbar-nav a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--nav-green);
  padding: 6px 14px;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}

.navbar-nav a:hover {
  color: var(--nav-gold);
}

.navbar-nav a.active {
  color: var(--nav-gold);
  font-weight: 600;
}

.navbar-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--nav-green);
  border-radius: 2px;
}

/* Account / Cart — cadran englobant */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  background: rgba(244, 171, 35, 0.08);
  border: 1px solid rgba(27, 74, 54, 0.12);
  border-radius: 0 24px 0 0;
  padding: 10px 20px;
}

.navbar-account,
.navbar-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 14px;
}

.navbar-account {
  border-right: 1px solid rgba(27, 74, 54, 0.12);
}

.navbar-account:hover,
.navbar-cart:hover {
  opacity: 0.75;
}

.navbar-account img,
.navbar-cart img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.navbar-account span,
.navbar-cart span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.navbar-account .label,
.navbar-cart .label {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-dark);
}

.navbar-account .sublabel,
.navbar-cart .sublabel {
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
}

/* Hamburger (mobile menu toggle) */
.navbar-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 200;
}

.navbar-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--nav-green);
  border-radius: 2px;
  transition: var(--transition);
}

.navbar-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.navbar-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar-pattern {
  height: 25px;
  background-image: url('../images/bande.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.95;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 250px;
  background: linear-gradient(105deg, var(--nav-green) 0%, var(--accent-red) 100%);
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../images/woman_reading.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px 40px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: 180px;
  width: 100%;
}

.hero-text {
  grid-column: 1;
}

.hero-tagline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--nav-gold);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hero-tagline::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--nav-gold);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 20px;
}

.hero h1 .highlight {
  color: var(--hero-highlight);
}

.hero-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 32px;
}

.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-btns .btn-primary {
  background: var(--accent-red);
  border-radius: 5px;
  padding: 14px 22px;
}

.hero-btns .btn-primary:hover {
  background: var(--red-dark);
}

.hero-btns .btn-primary,
.hero-btns .btn-secondary {
  font-family: var(--font-display);
}

.hero-btns .btn-primary img,
.hero-btns .btn-secondary img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--white);
  color: var(--nav-green);
  font-weight: 600;
  font-size: 14px;
  border-radius: 5px;
  border: none;
  transition: var(--transition);
  cursor: pointer;
}

.btn-secondary:hover {
  background: #F0EBDD;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  border: 1.5px solid var(--text-dark);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-outline:hover {
  background: var(--text-dark);
  color: var(--white);
}

.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-green:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.btn-voir-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-voir-plus:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

/* Hero Carousel */
.hero-carousel {
  grid-column: 2;
  align-self: center;
  position: relative;
  transform: translateX(40px);
  width: 100%;
  max-width: 300px;
  min-width: 0;
  margin-inline: auto;
}

.hero-carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  min-width: 0;
}

.hero-carousel-track {
  display: flex;
  min-width: 0;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease;
}

.hero-slide:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hero-slide-cover {
  width: 220px;
  height: 274px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.hero-slide-cover img,
.hero-slide-cover .book-cover-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide-cover .book-cover-placeholder {
  display: flex;
  align-items: flex-end;
  padding: 10px;
}

.hero-slide-cover .bcp-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.hero-slide-info {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.hero-slide-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 10px;
}

.hero-slide-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-slide-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-slide-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.hero-slide-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide-author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.hero-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.carousel-arrow {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: var(--transition);
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.35);
}

.carousel-arrow img {
  width: 8px;
  height: auto;
  filter: brightness(0) invert(1);
}

.carousel-arrow img.flip {
  transform: scaleX(-1);
}

.carousel-arrow.left {
  margin-left: -16px;
}

.carousel-arrow.right {
  margin-right: -16px;
}

.stars {
  color: var(--gold);
  font-size: 9px;
}

.hero-woman {
  position: absolute;
  right: 0;
  bottom: -45px;
  z-index: 3;
  pointer-events: none;
}

.hero-woman img {
  height: 430px;
  width: auto;
  object-fit: contain;
  transform: translateX(-20px);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

/* Stats Bar */
.stats-bar {
  background: transparent;
  padding: 0 40px;
  transform: translateY(-36px);
  /* chevauchement léger sur le hero */
  position: relative;
  z-index: 10;
}

.stats-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
  background: var(--green);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(212, 175, 55, 0.75);
  ;
}

.stat-item {
  padding: 32px 24px;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: rgba(212, 175, 55, 0.75);
  font-weight: bold
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
section {
  padding: 80px 40px;
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.section-tag::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--red);
}

.section-tag.green::before {
  background: var(--green);
}

.voir-plus {
  text-align: center;
}

/* ============================================================
   POUR LES AUTEURS
   ============================================================ */
.auteurs-section {
  background: var(--bg-cream);
  position: relative;
  overflow: hidden;
  padding-top: 20px;
}

.auteurs-section .section-inner {
  padding-right: 120px;
}

.auteurs-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
}

.auteurs-title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
}

.auteurs-title .highlight {
  color: var(--red);
}

.auteurs-desc {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.7;
  transform: translateX(-100px);
}

.auteurs-feather {
  position: absolute;
  right: -20px;
  top: 20px;
  width: 200px;
  opacity: 0.9;
  transform-origin: center;
  animation: featherPulse 4s ease-in-out infinite;
}

@keyframes featherPulse {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50%      { transform: rotate(-5deg) scale(1.06); }
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.reveal-left.in-view {
  opacity: 1;
  transform: none;
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.reveal-right.in-view {
  opacity: 1;
  transform: none;
}

/* Fondu seul (opacité uniquement), pour les éléments qui portent déjà leur propre transform de mise en page */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.reveal-fade.in-view {
  opacity: 1;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.in-view > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-fade {
    opacity: 1;
    transition: none;
  }

  .auteurs-feather {
    display: none;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card {
  background: #FDF7EC;
  border: 1px solid rgba(90, 55, 20, 0.18);
  border-radius: 6px;
  padding: 28px 24px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 48px;
  height: 47px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon.icon-red {
  background: rgba(184, 66, 26, 0.1);
}

.service-icon.icon-green {
  background: rgba(28, 74, 53, 0.1);
}

.service-icon.icon-gold {
  background: rgba(201, 146, 42, 0.1);
}

.service-icon.icon-purple {
  background: rgba(92, 61, 143, 0.1);
}

.service-icon img.icon-full {
  width: 100%;
  height: 100%;
}

.service-icon img.icon-glyph {
  width: 50%;
  height: auto;
}

.service-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.service-card p {
  font-size: 13px;
  color: #7A5830;
  line-height: 1.6;
  margin-bottom: 16px;
}

.service-link {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.service-link img {
  width: 14px;
  height: auto;
  transform: scaleX(-1);
}

.service-link:hover {
  gap: 10px;
}

/* ============================================================
   TÉMOIGNAGE + CTA
   ============================================================ */
.temoignage-section {
  background: var(--bg-cream-light);
  padding: 40px 40px;
}

.temoignage-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.temoignage-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 400px;
}

.temoignage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.temoignage-quote {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  padding: 20px;
  border-radius: var(--radius);
}

.temoignage-quote blockquote {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 8px;
  font-style: normal;
}

.temoignage-author {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.temoignage-author span {
  color: var(--orange);
  font-weight: 700;
}

.cta-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  padding: 24px 36px;
}

.cta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cta-card.red {
  background: var(--red);
  border-radius: 12px 120px 12px 12px;
}

.cta-card.green {
  background: var(--green);
  border-radius: 12px 12px 120px 12px;
}

.cta-card-text h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}

.cta-card-text p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.cta-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}

.cta-card-icon svg {
  width: 56px;
  height: 56px;
}

/* ============================================================
   LIBRAIRIE NUMÉRIQUE
   ============================================================ */
.librairie-section {
  background: var(--bg-cream);
}

.librairie-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}

.librairie-title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
}

.librairie-title .highlight {
  color: var(--green);
}

.librairie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  gap: 8px;
  min-width: 220px;
}

.search-bar svg {
  width: 16px;
  height: 16px;
  color: var(--text-light);
  flex-shrink: 0;
}

.search-bar input {
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-mid);
  background: transparent;
  width: 100%;
}

.search-bar input::placeholder {
  color: var(--text-light);
}

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.filter-btn.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.book-card {
  cursor: pointer;
  transition: var(--transition);
}

.book-card:hover {
  transform: translateY(-4px);
}

.book-cover {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 2/3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.book-card:hover .book-cover img {
  transform: scale(1.04);
}

.book-wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
}

.book-wishlist:hover {
  color: var(--red);
}

.book-wishlist.active {
  color: var(--red);
}

.book-genre {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.book-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 3px;
}

.book-author {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.book-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.book-rating .stars {
  font-size: 10px;
  color: var(--gold);
}

.book-rating span {
  font-size: 10px;
  color: var(--text-light);
}

.book-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.book-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

.book-buy {
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: var(--transition);
}

.book-buy:hover {
  gap: 6px;
}

.book-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  position: relative;
}

.bcp-1 {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1f0e 100%);
}

.bcp-2 {
  background: linear-gradient(135deg, #1B4332 0%, #2d6a4f 100%);
}

.bcp-3 {
  background: linear-gradient(135deg, #3d2b1f 0%, #6b4226 100%);
}

.bcp-4 {
  background: linear-gradient(135deg, #2c3e50 0%, #4a6080 100%);
}

.bcp-5 {
  background: linear-gradient(135deg, #7b1a1a 0%, #B5451B 100%);
}

.bcp-6 {
  background: linear-gradient(135deg, #1a1a1a 0%, #3d3d2d 100%);
}

.bcp-title {
  font-size: 11px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}

.bcp-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   PROGRAMME TREMPLIN
   ============================================================ */
.tremplin-section {
  background: var(--bg-cream-light);
  position: relative;
}

.tremplin-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.tremplin-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.tremplin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tremplin-title {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: 20px;
}

.tremplin-desc {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 28px;
}

.tremplin-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.tremplin-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-mid);
}

.feature-check {
  width: 22px;
  height: 22px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 11px;
}

.tremplin-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 230px;
  min-height: 130px;
  background: var(--accent-red);
  border: 1px solid rgba(90, 55, 20, 0.18);
  border-radius: 130px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  color: var(--white);
  box-shadow: var(--shadow-lg);
  padding: 24px 20px 20px 44px;
}

.badge-number {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.badge-text {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  color: #FFFAF3;
  margin-top: 8px;
  max-width: 160px;
}

/* ============================================================
   CONCOURS & PRIX LITTÉRAIRES
   ============================================================ */
.concours-section {
  background: var(--green);
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}

.concours-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.concours-confetti {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  pointer-events: none;
  opacity: 0.95;
  z-index: 1;
}

.concours-confetti img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.concours-tag {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.concours-tag::before {
  background: rgba(255, 255, 255, 0.5);
}

.concours-title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 32px;
}

.concours-title .highlight-gold {
  color: var(--gold);
}

.concours-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.concours-card {
  background: rgb(28 67 50 / 76%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 24px 28px;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.concours-card:hover {
  background: rgb(28 67 50 / 97%);
  transform: translateY(-3px);
}

.concours-card.closed {
  opacity: 0.6;
}

.concours-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.concours-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.concours-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 4px;
}

.concours-badge.ouvert {
  background: rgba(76, 175, 80, 0.25);
  color: #81C784;
}

.concours-badge.cloture {
  background: rgba(244, 67, 54, 0.25);
  color: #EF9A9A;
}

.concours-badge.bientot {
  background: rgba(255, 193, 7, 0.25);
  color: #FFD54F;
}

.concours-genre {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.concours-prize {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
}

.concours-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.concours-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.concours-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.concours-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.concours-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Carte concours avec affiche (image à gauche, infos à droite) */
.concours-card.has-affiche {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 16px;
}

.concours-card-image {
  width: 110px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
}

.concours-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.concours-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Compte à rebours réutilisable */
.countdown-timer {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.countdown-timer.compact {
  gap: 6px;
  margin-bottom: 10px;
}

.countdown-box {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 46px;
  text-align: center;
}

.countdown-timer.compact .countdown-box {
  padding: 5px 7px;
  min-width: 36px;
  border-radius: 6px;
}

.countdown-value {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}

.countdown-timer.compact .countdown-value {
  font-size: 14px;
}

.countdown-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-top: 4px;
}

.countdown-done {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.countdown-timer.on-dark .countdown-box {
  background: rgba(255, 255, 255, 0.12);
}

.countdown-timer.on-dark .countdown-value {
  color: var(--white);
}

.countdown-timer.on-dark .countdown-label {
  color: rgba(255, 255, 255, 0.65);
}

.countdown-timer.on-dark .countdown-done {
  color: var(--gold);
}

/* ============================================================
   PATRIMOINE LANGUES
   ============================================================ */
.langues-section {
  background: var(--bg-cream);
}

.langues-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-tag.centered {
  justify-content: center;
  color: var(--red);
}

.section-tag.centered::before {
  display: none;
}

.section-tag-line {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--red);
  vertical-align: middle;
  margin: 0 10px;
}

.langues-title {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  margin-top: 12px;
}

.langues-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.langue-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  transition: var(--transition);
}

.langue-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.langue-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #8B5E3C;
}

.langue-icon svg {
  width: 22px;
  height: 22px;
}

.langue-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.langue-speakers {
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 4px;
}

.langue-region {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.3;
}

/* Tabs */
.langues-tabs-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.langues-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.langues-tab {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.langues-tab:hover {
  color: var(--text-dark);
  background: var(--bg-cream);
}

.langues-tab.active {
  color: var(--text-dark);
  background: var(--white);
  border-bottom: 2px solid var(--red);
}

.langues-tab-content {
  padding: 36px;
}

.langues-tab-content.hidden {
  display: none;
}

.tab-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.tab-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab-feature-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.tab-feature-icon svg {
  width: 20px;
  height: 20px;
}

.tab-feature h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.tab-feature p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background: var(--red);
  padding: 80px 40px;
  text-align: center;
}

.cta-banner-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cta-banner-title {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 20px;
}

.cta-banner-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 36px;
}

.cta-banner-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}

.cta-banner-btn.primary {
  background: var(--white);
  color: var(--red);
}

.cta-banner-btn.primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.cta-banner-btn.secondary {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.cta-banner-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-cream);
}

/* Newsletter */
.newsletter-wrapper {
  padding: 0 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 0;
}

.newsletter-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0 auto 48px;
  max-width: 900px;
}

.newsletter-text h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.newsletter-text p {
  font-size: 14px;
  color: var(--text-light);
}

.newsletter-form {
  display: flex;
  gap: 12px;
  flex: 1;
  max-width: 480px;
}

.newsletter-form input {
  flex: 1;
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-mid);
  background: var(--bg-cream-light);
  outline: none;
  transition: var(--transition);
}

.newsletter-form input:focus {
  border-color: var(--green);
}

.newsletter-form input::placeholder {
  color: var(--text-light);
}

.newsletter-btn {
  padding: 12px 24px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.newsletter-btn:hover {
  background: var(--green-dark);
}

/* Footer main grid */
.footer-main {
  background: var(--bg-cream);
  padding: 0 40px 48px;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 16px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.footer-about {
  font-size: 13px;
  color: #151515;
  line-height: 1.7;
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 13px;
  color: #151515;
  transition: var(--transition);
}

.footer-col ul li a:hover {
  color: var(--red);
}

/* Footer bottom bar */
.footer-bottom {
  background: var(--green);
  padding: 16px 40px;
  text-align: center;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .books-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
  }

  .hero-woman {
    display: none;
  }

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

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

  .auteurs-header {
    grid-template-columns: 1fr;
  }

  .auteurs-desc {
    transform: none;
  }

  .auteurs-section .section-inner {
    padding-right: 0;
  }

  .auteurs-feather {
    display: none;
  }

  .tremplin-inner {
    grid-template-columns: 1fr;
  }

  .tremplin-content {
    padding-bottom: 150px;
  }

  .tremplin-badge {
    width: 200px;
    min-height: 110px;
    padding: 20px 16px 16px 36px;
  }

  .concours-title {
    font-size: 32px;
  }

  .concours-confetti {
    width: 45%;
    opacity: 0.35;
  }

  .tab-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Hamburger menu */
  .navbar-hamburger {
    display: flex;
  }

  .navbar-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    left: auto;
    width: max-content;
    min-width: 190px;
    max-width: calc(100vw - 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  .navbar-nav.open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
  }

  .navbar-nav a {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
  }

  .navbar-nav a.active::after {
    left: 14px;
    transform: none;
    bottom: 6px;
  }
}

@media (max-width: 768px) {
  .concours-confetti {
    display: none;
  }

  .temoignage-inner {
    grid-template-columns: 1fr;
  }

  .hero-carousel {
    grid-column: 1;
    transform: none;
    max-width: 280px;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

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

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

  .concours-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .newsletter-form {
    width: 100%;
    max-width: 100%;
  }

  .cta-banner-title {
    font-size: 28px;
  }

  .langues-title {
    font-size: 28px;
  }

  section {
    padding: 60px 24px;
  }

  .navbar-inner {
    height: 70px;
    padding: 0 20px;
    gap: 12px;
  }

  .navbar-inner .navbar-logo-container {
    width: 80px;
    height: 80px;
    transform: translateY(12px);
    padding: 6px;
  }

  .navbar-actions {
    padding: 8px 14px;
    border-radius: 0 16px 0 0;
  }

  .navbar-account,
  .navbar-cart {
    padding: 0 10px;
    gap: 6px;
  }

  .navbar-account .label,
  .navbar-cart .label {
    font-size: 12px;
  }

  .navbar-account .sublabel,
  .navbar-cart .sublabel {
    font-size: 11px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero-slide-cover {
    width: 190px;
    height: 236px;
  }
}

@media (max-width: 480px) {
  .hero-carousel {
    max-width: 100%;
  }

  .tremplin-content {
    padding-bottom: 130px;
  }

  .tremplin-badge {
    width: 170px;
    min-height: 96px;
    padding: 16px 14px 14px 30px;
  }

  .badge-number {
    font-size: 24px;
  }

  .badge-text {
    font-size: 11px;
    max-width: 130px;
  }

  .hero-slide {
    padding: 16px;
  }

  .hero-slide-cover {
    width: 160px;
    height: 199px;
  }

  .navbar-inner {
    padding: 0 16px;
    gap: 8px;
  }

  .navbar-inner .navbar-logo-container {
    width: 64px;
    height: 64px;
    transform: translateY(8px);
  }

  .navbar-actions {
    gap: 0;
    padding: 6px 10px;
  }

  .navbar-account .label,
  .navbar-cart .label,
  .navbar-account .sublabel,
  .navbar-cart .sublabel {
    display: none;
  }

  .navbar-account,
  .navbar-cart {
    padding: 0 8px;
  }

  .books-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .services-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ============================================================
   PAGES D'ERREUR (404, 500, 403, 419)
   ============================================================ */
.error-page {
  background: var(--bg-cream-light);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  position: relative;
}

.error-container {
  max-width: 500px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.error-code {
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  color: var(--red);
  margin-bottom: 10px;
  opacity: 0.8;
  letter-spacing: -2px;
}

.error-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 16px;
}

.error-message {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 32px;
}

.error-back-btn {
  text-decoration: none;
}

.error-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(45deg,
      #B5451B,
      #B5451B 10px,
      #E07B39 10px,
      #E07B39 20px,
      #1B4332 20px,
      #1B4332 30px);
}

/* =============================================
   ESPACE AUTEUR — ADMIN DASHBOARD
   ============================================= */

/* --- Layout principal --- */
.auteur-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  min-height: 100vh;
  background: #F0EBE0;
}

/* --- Sidebar --- */
.auteur-sidebar {
  background: linear-gradient(180deg, #0D2318 0%, #143326 40%, #1B4332 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.auteur-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #0f281ce8, rgb(62 66 42 / 96%)), url(../images/bg-admin.jpg);
  background-size: cover;
  background-position: center;
}

.auteur-sidebar-top-band {
  height: 4px;
  background: repeating-linear-gradient(90deg, #B5451B 0px, #B5451B 20px, #E07B39 20px, #E07B39 40px, #D4A041 40px, #D4A041 60px, #1B4332 60px, #1B4332 80px);
}

.auteur-sidebar-inner {
  padding: 28px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}

.auteur-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.auteur-sidebar-logo-img {
  width: 48px;
  height: 48px;
  background: #F0E5D8;
  border: 2px solid #D4A041;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(212, 160, 65, 0.15);
}

.auteur-sidebar-logo-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.auteur-sidebar-logo-text .brand-name {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: block;
  line-height: 1.2;
}

.auteur-sidebar-logo-text .brand-sub {
  color: #D4A041;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* --- Sidebar collapse toggle (icon-only mode) --- */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-toggle-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

body.sidebar-collapsed .sidebar-toggle-btn svg {
  transform: rotate(180deg);
}

body.sidebar-collapsed .sidebar-toggle-btn {
  justify-content: center;
  font-size: 0;
  padding: 9px;
}

/* --- Collapsed (icon-only) state --- */
body.sidebar-collapsed .auteur-layout {
  grid-template-columns: 80px 1fr;
}

body.sidebar-collapsed .auteur-sidebar-inner {
  padding: 24px 12px;
}

body.sidebar-collapsed .auteur-sidebar-logo {
  justify-content: center;
}

body.sidebar-collapsed .auteur-sidebar-logo-text {
  display: none;
}

body.sidebar-collapsed .auteur-nav-label {
  display: none;
}

body.sidebar-collapsed .auteur-nav-link {
  justify-content: center;
  padding: 12px;
  gap: 0;
  font-size: 0;
}

body.sidebar-collapsed .auteur-nav-link .nav-badge {
  display: none;
}

body.sidebar-collapsed .auteur-sidebar-footer {
  padding: 16px 12px;
}

body.sidebar-collapsed .auteur-sidebar-footer-link {
  justify-content: center;
  padding: 10px;
  font-size: 0;
}

/* --- Mobile off-canvas drawer toggle --- */
.auteur-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F5F0E8;
  border: 1px solid #E0D8C8;
  color: var(--text-mid);
  cursor: pointer;
  flex-shrink: 0;
}

.auteur-mobile-menu-btn svg {
  width: 18px;
  height: 18px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.sidebar-overlay.show {
  display: block;
}

.auteur-sidebar-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 24px;
}

.auteur-avatar-circle {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #D4A041, #B5451B);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

.auteur-avatar-info .name {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.auteur-avatar-info .role {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.auteur-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auteur-nav-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 12px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.auteur-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.2s ease;
  position: relative;
  text-decoration: none;
  border: 1px solid transparent;
}

.auteur-nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.auteur-nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.auteur-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #D4A041, #E07B39);
  border-radius: 0 3px 3px 0;
}

.auteur-nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.auteur-nav-link:hover svg,
.auteur-nav-link.active svg {
  opacity: 1;
}

.auteur-nav-link .nav-badge {
  margin-left: auto;
  background: #B5451B;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.auteur-sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.auteur-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: all 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.auteur-sidebar-footer-link:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
}

.auteur-sidebar-footer-link.logout {
  color: rgba(239, 154, 154, 0.7);
}

.auteur-sidebar-footer-link.logout:hover {
  color: #ef9a9a;
  background: rgba(239, 154, 154, 0.08);
}

.auteur-sidebar-footer-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* --- Main workspace --- */
.auteur-workspace {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #F0EBE0;
}

.auteur-topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E5DDD0;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.auteur-topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
}

.auteur-topbar-breadcrumb .current {
  color: var(--text-dark);
  font-weight: 700;
}

.auteur-topbar-breadcrumb svg {
  width: 14px;
  height: 14px;
  color: var(--border);
}

.auteur-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auteur-topbar-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F5F0E8;
  border: 1px solid #E0D8C8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.auteur-topbar-btn:hover {
  background: #EDE7DA;
  color: var(--text-dark);
}

.auteur-topbar-btn svg {
  width: 16px;
  height: 16px;
}

/* Topbar User Profile & Logout */
.auteur-topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 12px;
  background: #F5F0E8;
  border: 1px solid #E0D8C8;
  border-radius: 30px;
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}

.auteur-topbar-user:hover {
  background: #EDE7DA;
}

.auteur-topbar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.auteur-topbar-user-info .name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

.auteur-topbar-user-info .role {
  font-size: 9.5px;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auteur-topbar-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4A041, #B5451B);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Dropdown Menu Profil dans la Topbar */
.topbar-user-wrapper {
  position: relative;
  display: inline-block;
}

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  display: none;
  z-index: 1000;
}

.topbar-user-dropdown.show {
  display: block;
}

.topbar-dropdown-header {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.topbar-dropdown-header .user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.topbar-dropdown-header .user-email {
  font-size: 11.5px;
  color: var(--text-light);
  display: block;
  word-break: break-all;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  transition: background 0.15s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.topbar-dropdown-item:hover {
  background: var(--bg-cream-light);
  color: var(--green);
}

.topbar-dropdown-item.logout {
  color: #c62828;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}

.topbar-dropdown-item.logout:hover {
  background: rgba(244, 67, 54, 0.08);
}

.topbar-dropdown-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}


.auteur-content {
  padding: 40px;
  flex: 1;
}

.auteur-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 28px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid;
}

.auteur-alert.success {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.2);
  color: #2e7d32;
}

.auteur-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Dashboard: Greeting banner --- */
.auteur-greeting {
  background: linear-gradient(135deg, #0D2318 0%, #1B4332 50%, #2d6a4f 100%);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.auteur-greeting::before {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(212, 160, 65, 0.08);
  pointer-events: none;
}

.auteur-greeting::after {
  content: '';
  position: absolute;
  right: 60px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(181, 69, 27, 0.08);
  pointer-events: none;
}

.auteur-greeting-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, #B5451B 0px, #B5451B 16px, #E07B39 16px, #E07B39 32px, #D4A041 32px, #D4A041 48px);
}

.auteur-greeting-text .greeting-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #D4A041;
  display: block;
  margin-bottom: 6px;
}

.auteur-greeting-text h1 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 6px;
}

.auteur-greeting-text p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.auteur-greeting-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #D4A041;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.auteur-greeting-btn:hover {
  background: #c4902f;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 160, 65, 0.4);
}

/* --- Stat cards --- */
.auteur-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.auteur-stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.auteur-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.auteur-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 16px 16px;
  background: var(--card-color, #1B4332);
  opacity: 0;
  transition: opacity 0.25s;
}

.auteur-stat-card:hover::after {
  opacity: 1;
}

.auteur-stat-card.green {
  --card-color: #1B4332;
}

.auteur-stat-card.brown {
  --card-color: #8B5E3C;
}

.auteur-stat-card.red {
  --card-color: #B5451B;
}

.auteur-stat-card.gold {
  --card-color: #D4A041;
}

.auteur-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.auteur-stat-icon svg {
  width: 20px;
  height: 20px;
}

.auteur-stat-card.green .auteur-stat-icon {
  background: rgba(27, 67, 50, 0.1);
  color: #1B4332;
}

.auteur-stat-card.brown .auteur-stat-icon {
  background: rgba(139, 94, 60, 0.1);
  color: #8B5E3C;
}

.auteur-stat-card.red .auteur-stat-icon {
  background: rgba(181, 69, 27, 0.1);
  color: #B5451B;
}

.auteur-stat-card.gold .auteur-stat-icon {
  background: rgba(212, 160, 65, 0.1);
  color: #D4A041;
}

.auteur-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  display: block;
  margin-bottom: 6px;
}

.auteur-stat-value {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  display: block;
  margin-bottom: 2px;
}

.auteur-stat-card.green .auteur-stat-value {
  color: #1B4332;
}

.auteur-stat-card.brown .auteur-stat-value {
  color: #8B5E3C;
}

.auteur-stat-card.red .auteur-stat-value {
  color: #B5451B;
}

.auteur-stat-card.gold .auteur-stat-value {
  color: #D4A041;
}

.auteur-stat-sub {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

.auteur-stat-bg-icon {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 72px;
  height: 72px;
  opacity: 0.05;
}

.auteur-stat-bg-icon svg {
  width: 100%;
  height: 100%;
}

/* --- Cards communes --- */
.auteur-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.auteur-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #F0EBE0;
}

.auteur-card-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.auteur-card-header h2 svg {
  width: 18px;
  height: 18px;
  color: var(--text-light);
}

.auteur-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #1B4332;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.auteur-card-link:hover {
  gap: 7px;
  color: #0D2318;
}

/* --- Badges statut --- */
.auteur-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.auteur-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.auteur-badge.publie {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.auteur-badge.soumis {
  background: rgba(224, 123, 57, 0.1);
  color: #C06B1F;
}

.auteur-badge.brouillon {
  background: rgba(0, 0, 0, 0.05);
  color: #888;
}

/* --- Rows dans les cards --- */
.auteur-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid #F5F0E8;
  transition: background 0.15s;
  gap: 16px;
}

.auteur-row-item:last-child {
  border-bottom: none;
}

.auteur-row-item:hover {
  background: #FDFAF5;
}

.auteur-row-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.auteur-row-book-cover {
  width: 38px;
  aspect-ratio: 2/3;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: #EDE7DA;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
}

.auteur-row-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auteur-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  text-decoration: none;
}

.auteur-row-title:hover {
  color: #1B4332;
}

.auteur-row-meta {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.auteur-row-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.auteur-row-price {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
}

/* --- Versements timeline --- */
.auteur-payment-item {
  display: flex;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid #F5F0E8;
  transition: background 0.15s;
}

.auteur-payment-item:last-child {
  border-bottom: none;
}

.auteur-payment-item:hover {
  background: #FDFAF5;
}

.auteur-payment-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1B4332;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.15);
}

.auteur-payment-info .date {
  font-size: 10.5px;
  color: var(--text-light);
  display: block;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auteur-payment-info .montant {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  display: block;
}

.auteur-payment-info .oeuvre {
  font-size: 11.5px;
  color: var(--text-light);
}

/* --- Empty state --- */
.auteur-empty {
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auteur-empty-icon {
  width: 64px;
  height: 64px;
  background: #F5F0E8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.auteur-empty-icon svg {
  width: 28px;
  height: 28px;
  color: #C5BAA8;
}

.auteur-empty h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.auteur-empty p {
  font-size: 13px;
  color: var(--text-light);
  max-width: 300px;
}

/* --- Table oeuvres --- */
.auteur-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.auteur-table thead tr {
  background: #FDFAF5;
}

.auteur-table th {
  padding: 13px 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  border-bottom: 1px solid #F0EBE0;
  white-space: nowrap;
}

.auteur-table tbody tr {
  border-bottom: 1px solid #F5F0E8;
  transition: background 0.15s;
}

.auteur-table tbody tr:last-child {
  border-bottom: none;
}

.auteur-table tbody tr:hover {
  background: #FDFAF5;
}

.auteur-table td {
  padding: 16px 20px;
  font-size: 13.5px;
  vertical-align: middle;
}

/* --- Boutons action --- */
.auteur-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
  background: transparent;
}

.auteur-action-btn.primary {
  border-color: #1B4332;
  color: #1B4332;
}

.auteur-action-btn.primary:hover {
  background: #1B4332;
  color: #fff;
}

.auteur-action-btn.secondary {
  border-color: var(--border);
  color: var(--text-mid);
}

.auteur-action-btn.secondary:hover {
  border-color: var(--text-mid);
  color: var(--text-dark);
}

/* --- Formulaire create --- */
.auteur-form-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  max-width: 820px;
}

.auteur-form-card-header {
  padding: 32px 40px;
  border-bottom: 1px solid #F0EBE0;
  background: linear-gradient(135deg, #FDFAF5 0%, #F5F0E8 100%);
}

.auteur-form-card-header .form-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #B5451B;
  display: block;
  margin-bottom: 6px;
}

.auteur-form-card-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.auteur-form-card-header p {
  font-size: 13px;
  color: var(--text-light);
}

.auteur-form-body {
  padding: 36px 40px;
}

.auteur-form-section {
  margin-bottom: 32px;
}

.auteur-form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0EBE0;
}

.auteur-form-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--text-light);
}

.auteur-form-group {
  margin-bottom: 20px;
}

.auteur-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.auteur-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 7px;
}

.auteur-label .required {
  color: #B5451B;
  margin-left: 3px;
}

.auteur-input,
.auteur-select,
.auteur-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1.5px solid #E0D8C8;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.auteur-input:focus,
.auteur-select:focus,
.auteur-textarea:focus {
  border-color: #1B4332;
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.1);
}

.auteur-input::placeholder,
.auteur-textarea::placeholder {
  color: #BDB5A8;
}

.auteur-textarea {
  resize: vertical;
  min-height: 120px;
}

.auteur-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 5px;
  display: block;
}

.auteur-dropzone {
  border: 2px dashed #D0C8B8;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  background: #FDFAF5;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.auteur-dropzone:hover {
  border-color: #1B4332;
  background: rgba(27, 67, 50, 0.03);
}

.auteur-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.auteur-dropzone-icon {
  width: 40px;
  height: 40px;
  background: #F0EBE0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.auteur-dropzone-icon svg {
  width: 20px;
  height: 20px;
  color: #8B7B68;
}

.auteur-dropzone p {
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 600;
}

.auteur-dropzone span {
  font-size: 11px;
  color: var(--text-light);
  display: block;
  margin-top: 3px;
}

.auteur-submit-btn {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1B4332 0%, #0D2318 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.auteur-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(13, 35, 24, 0.3);
}

.auteur-errors {
  background: rgba(181, 69, 27, 0.07);
  border: 1.5px solid rgba(181, 69, 27, 0.2);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.auteur-errors p {
  font-size: 13px;
  font-weight: 700;
  color: #B5451B;
  margin-bottom: 8px;
}

.auteur-errors ul {
  list-style: disc;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #8B3214;
}

.auteur-pagination {
  padding: 18px 24px;
  border-top: 1px solid #F0EBE0;
}

.auteur-dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

/* --- Responsive admin --- */
@media (max-width: 1024px) {
  .auteur-layout {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed .auteur-layout {
    grid-template-columns: 1fr;
  }

  .auteur-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 272px;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
  }

  .auteur-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Icon-only collapse doesn't apply in the mobile drawer */
  body.sidebar-collapsed .auteur-sidebar-inner {
    padding: 28px 20px;
  }

  body.sidebar-collapsed .auteur-sidebar-logo {
    justify-content: flex-start;
  }

  body.sidebar-collapsed .auteur-sidebar-logo-text {
    display: block;
  }

  body.sidebar-collapsed .auteur-nav-label {
    display: block;
  }

  body.sidebar-collapsed .auteur-nav-link {
    justify-content: flex-start;
    padding: 11px 14px;
    gap: 11px;
    font-size: 13.5px;
  }

  body.sidebar-collapsed .auteur-nav-link .nav-badge {
    display: inline-block;
  }

  body.sidebar-collapsed .auteur-sidebar-footer {
    padding: 20px;
  }

  body.sidebar-collapsed .auteur-sidebar-footer-link {
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 12.5px;
  }

  .sidebar-toggle-btn {
    display: none;
  }

  .auteur-mobile-menu-btn {
    display: flex;
  }

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

  .auteur-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .auteur-stats-grid {
    grid-template-columns: 1fr;
  }

  .auteur-content {
    padding: 20px 16px;
  }

  .auteur-topbar {
    padding: 0 16px;
  }

  .auteur-greeting {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .auteur-form-row {
    grid-template-columns: 1fr;
  }

  .auteur-form-body {
    padding: 24px 20px;
  }

  .auteur-form-card-header {
    padding: 24px 20px;
  }
}

/* =============================================
   FIN ESPACE AUTEUR
   ============================================= */

/* =============================================
   TOAST NOTIFICATIONS SYSTEM
   ============================================= */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  width: calc(100% - 48px);
  pointer-events: none;
}

.toast-card {
  pointer-events: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
}

.toast-card.toast-show {
  transform: translateX(0);
  opacity: 1;
}

.toast-card.toast-hide {
  transform: translateX(120%);
  opacity: 0;
}

/* Toast Variant Themes */
.toast-card.toast-success {
  border-left: 5px solid #1B4332;
}

.toast-card.toast-success .toast-icon-bg {
  background: rgba(27, 67, 50, 0.12);
  color: #1B4332;
}

.toast-card.toast-info {
  border-left: 5px solid #1565C0;
}

.toast-card.toast-info .toast-icon-bg {
  background: rgba(21, 101, 192, 0.12);
  color: #1565C0;
}

.toast-card.toast-warning {
  border-left: 5px solid #E65100;
}

.toast-card.toast-warning .toast-icon-bg {
  background: rgba(230, 81, 0, 0.12);
  color: #E65100;
}

.toast-card.toast-error {
  border-left: 5px solid #C62828;
}

.toast-card.toast-error .toast-icon-bg {
  background: rgba(198, 40, 40, 0.12);
  color: #C62828;
}

/* Icon Container */
.toast-icon-bg {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-icon-bg svg {
  width: 20px;
  height: 20px;
}

/* Content Area */
.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 3px;
  line-height: 1.3;
}

.toast-message {
  font-size: 13px;
  color: #555555;
  line-height: 1.45;
  word-break: break-word;
}

/* Close Button */
.toast-close-btn {
  background: transparent;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  margin-top: -2px;
  margin-right: -4px;
}

.toast-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

/* Progress bar */
.toast-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: rgba(0, 0, 0, 0.05);
}

.toast-progress-bar {
  height: 100%;
  width: 100%;
  transition: width linear;
}

.toast-success .toast-progress-bar {
  background: #1B4332;
}

.toast-info .toast-progress-bar {
  background: #1565C0;
}

.toast-warning .toast-progress-bar {
  background: #E65100;
}

.toast-error .toast-progress-bar {
  background: #C62828;
}




/********** LOGIN ***********/

.login-bg {
  background: linear-gradient(105deg, var(--nav-green) 0%, var(--accent-red) 100%);

  background: linear-gradient(312deg, #b9431ae6, #1d4a36e6), url('../images/woman_reading.png');
  padding: 80px 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

.login-logo {
  display: flex;
  align-content: center;
  justify-content: center;
}

.login-logo img {
  width: 180px;

}


.register-bg {
  background: linear-gradient(312deg, #b9431ae6, #1d4a36e6), url('../images/woman_reading.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

.footer-logo img {
  width: 200px;
}

/* =============================================
   MENU DÉROULANT DU COMPTE (partials/account-menu)
   ============================================= */
.account-menu { position: relative; }
.account-menu > .navbar-account { background: none; border: none; cursor: pointer; font: inherit; }
.account-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px;
  background: #fff; border: 1px solid var(--border, #e5e0d5); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16); padding: 8px; z-index: 1200; display: none;
}
.account-menu-dropdown.open { display: block; }
.account-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border, #e5e0d5); margin-bottom: 6px; }
.account-menu-head strong { display: block; font-size: 13.5px; color: var(--text-dark, #1c1c1c); }
.account-menu-head span { display: block; font-size: 11.5px; color: var(--text-light, #8a8a8a); margin-top: 2px; }
.account-menu-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.account-menu-roles span {
  background: rgba(27,67,50,0.1); color: var(--green, #1B4332); padding: 3px 8px;
  border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: capitalize;
}
.account-menu-section { padding: 4px 0; }
.account-menu-section + .account-menu-section { border-top: 1px solid var(--border, #e5e0d5); margin-top: 4px; }
.account-menu-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-light, #8a8a8a); padding: 6px 12px 4px;
}
.account-menu-dropdown a,
.account-menu-dropdown button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-dark, #1c1c1c); background: none; border: none;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.account-menu-dropdown a:hover,
.account-menu-dropdown button:hover { background: var(--bg-cream-light, #f7f3ec); }
.account-menu-upgrade { color: var(--orange, #E07B39) !important; font-weight: 700; }
.account-menu-logout { color: #C62828 !important; font-weight: 600; }

/* =============================================
   MODALES GÉNÉRIQUES (ouverture/fermeture pilotée par classe, pas par JS
   inline ni par manipulation directe de element.style — voir public/js/app.js
   et public/js/pages/*.js)
   ============================================= */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal-overlay.column { flex-direction: column; }

/* Variantes de couleur pour le bouton de confirmation de la modale
   activer/désactiver un compte (admin/utilisateurs) — évite de piloter la
   couleur via element.style.background depuis le JS. */
.toggle-btn-deactivate { background: #c62828 !important; }
.toggle-btn-activate { background: #2e7d32 !important; }

/* =============================================
   RAPPORTS ADMIN — export PDF (admin/rapports)
   ============================================= */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
/* Conteneur hors-écran utilisé pour générer un PDF avec html2pdf.js */
.pdf-export-container {
  position: absolute;
  top: -99999px;
  left: -99999px;
  width: 800px;
  background-color: #ffffff;
}
.export-toast {
  display: none;
  position: fixed;
  top: 24px;
  right: 24px;
  background: #1B4332;
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 10000;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.export-toast.is-visible { display: flex; }
.h1-page-lg { font-size: 26px; font-weight: 800; color: var(--text-dark); }
.text-muted-md { font-size: 13.5px; color: var(--text-light); }

/* =============================================
   MODALES DE CONFIRMATION CENTRÉES (suppression, etc.)
   ============================================= */
.confirm-modal-panel {
  background: #fff;
  padding: 28px 32px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
  max-width: 440px;
  width: 90%;
}
.confirm-modal-panel.wide { max-width: 460px; }
.confirm-modal-icon { font-size: 40px; margin-bottom: 12px; }
.confirm-modal-title { font-size: 18px; font-weight: 800; color: #c62828; margin-bottom: 8px; }
.confirm-modal-text { font-size: 13.5px; color: #555; margin-bottom: 16px; line-height: 1.5; }
.confirm-modal-warning {
  background: #FFEBEE;
  color: #b71c1c;
  border: 1px solid #FFCDD2;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 24px;
}
.confirm-modal-actions { display: flex; gap: 12px; justify-content: center; }
.btn-danger-solid-outline { background: #b71c1c; color: #fff; padding: 10px 20px; border: none; }
.btn-pad-10-20 { padding: 10px 20px; }

.card-form-strip { padding: 20px 24px; background: #FDFAF5; border-bottom: 1px solid #F0EBE0; }
.flex-1 { flex: 1; }
.btn-add { padding: 10px 16px; background: #1B4332; color: #fff; }
.text-dark-sm { font-size: 14px; color: var(--text-dark); }
.badge-xs { font-size: 10px; }
.auteur-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.grid-2col-32 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.grid-1-2col-32 { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; margin-bottom: 40px; }
.badge-cancelled { background: rgba(244, 67, 54, 0.1); color: #c62828; }
.select-sm { padding: 6px 10px; font-size: 12px; width: 130px; }
.row-end-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.text-dark-md-bold-block { font-size: 13.5px; color: var(--text-dark); display: block; font-weight: 700; }
.text-dark-md-bold { font-size: 13.5px; color: var(--text-dark); font-weight: 700; }
.text-muted-2xs { font-size: 11.5px; color: var(--text-light); }
.text-muted-2xs-block { font-size: 11.5px; color: var(--text-light); display: block; }
.text-accent-md { font-size: 14px; color: #1B4332; }
.book-thumb-sm { width: 36px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #EDE7DA; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.h-full { height: 100%; }
.text-muted-xxs { font-size: 11px; color: var(--text-light); }
.text-mid-md { color: var(--text-mid); }
.text-dark-bold-md { font-weight: 700; color: var(--text-dark); }
.row-actions-end { display: flex; justify-content: flex-end; gap: 8px; }
.label-danger { color: #c62828; }
.textarea-danger-outline { resize: vertical; font-size: 13px; border-color: #ef9a9a; }
.form-field-left { margin-bottom: 20px; text-align: left; }

/* Champs de saisie du code d'activation OTP (auth/activer) — remplace le
   style focus/blur auparavant posé en JS via element.style. */
.otp-digit:focus {
  border-color: #1B4332;
  box-shadow: 0 0 0 3px rgba(27,67,50,0.15);
  outline: none;
}

/* Liens qui passent en vert au survol (remplace onmouseover/onmouseout). */
.link-hover-green:hover { color: #1B4332 !important; }

/* Dropzone de dépôt de manuscrit une fois un fichier sélectionné. */
.auteur-dropzone.has-file { border-color: #1B4332; background: rgba(27,67,50,0.04); }

/* Léger soulèvement au survol (remplace onmouseover/onmouseout). */
.hover-lift:hover { transform: translateY(-2px); }

/* =============================================
   PHASE 2 — Bibliothèque de composants partagés
   (extraction des style="..." inline en classes sémantiques)
   ============================================= */

/* ---------- Aides génériques d'alignement ---------- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.resize-vertical { resize: vertical; }
.inline-form { display: inline; }

/* ---------- En-tête de page ---------- */
.page-header {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.page-header h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-header p {
  font-size: 13.5px;
  color: var(--text-light);
}

/* ---------- Couleurs de statut (pending / approved / rejected / neutral) ---------- */
.pending-pill {
  background: rgba(224, 123, 57, 0.12);
  border: 1.5px solid #E07B39;
  color: #B5451B;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
}

.status-badge {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
}
.status-badge-pending { background: rgba(224, 123, 57, 0.15); color: #B5451B; }
.status-badge-approved { background: rgba(27, 67, 50, 0.12); color: #1B4332; }
.status-badge-rejected { background: rgba(198, 40, 40, 0.12); color: #C62828; }

.status-note {
  font-size: 11px;
  color: #C62828;
  max-width: 220px;
  font-style: italic;
  line-height: 1.3;
  margin-top: 4px;
}

.alert-soft-danger {
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  color: #C62828;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
}

/* Variantes de couleur d'accent pour .auteur-stat-card, au-delà de green/brown/red/gold. */
.auteur-stat-card.orange { --card-color: #E07B39; }
.auteur-stat-card.dark { --card-color: var(--text-dark); }
.auteur-stat-card.orange .auteur-stat-icon { background: rgba(224, 123, 57, 0.15); color: #E07B39; }
.auteur-stat-card.dark .auteur-stat-icon { background: rgba(0, 0, 0, 0.06); color: var(--text-dark); }
.auteur-stat-card.orange .auteur-stat-value { color: #E07B39; }
.auteur-stat-card.dark .auteur-stat-value { color: var(--text-dark); }
.auteur-stat-card.active-stat { border-width: 2px; border-color: var(--card-color, var(--text-dark)); }
.stat-card-link { text-decoration: none; }
.stats-grid-responsive {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 24px;
}

/* ---------- Barre de filtres / recherche ---------- */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-bar-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-bar-search { display: flex; gap: 8px; }
.filter-btn.active-accent-green { background: #1B4332; color: #fff; border-color: #1B4332; }
.search-input-sm { padding: 8px 14px; font-size: 13px; width: 240px; }
.auteur-empty.tight { padding: 60px 20px; }
.table-footer-pad { padding: 16px 20px; border-top: 1px solid var(--border); }

/* ---------- Tableaux : cellules à deux niveaux (titre + sous-texte) ---------- */
.table-cell-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
}
.table-cell-sub {
  font-size: 12px;
  color: var(--text-light);
}

/* ---------- Modales (panneau blanc générique) ---------- */
.modal-panel {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.modal-panel.modal-panel-sm { max-width: 500px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.modal-header-row.tight { align-items: center; margin-bottom: 16px; border-bottom: none; padding-bottom: 0; }
.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #888;
}
.modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #E07B39;
  display: block;
}
.modal-title { font-size: 20px; font-weight: 800; color: #1B4332; margin: 2px 0 0; }
.modal-footer-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.modal-footer-row.end { justify-content: flex-end; }
.modal-footer-actions { display: flex; gap: 10px; }

/* Grille d'informations (label + valeur) sur fond crème, utilisée dans les
   modales de détail (demandes de rôle, dossiers utilisateurs...). */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
  background: #FAF7F2;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #EAE0D0;
}
.info-grid-item span {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  font-weight: 600;
  display: block;
}
.info-grid-item strong {
  font-size: 13.5px;
  color: var(--text-dark);
}

.dossier-box {
  margin-bottom: 22px;
}
.dossier-box-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1B4332;
  margin-bottom: 8px;
}
.dossier-box-content {
  background: #FFF;
  border: 1.5px solid #E0D8C8;
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: #2C2C2C;
  line-height: 1.6;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-line;
}

.table-x-scroll { overflow-x: auto; }
.avatar-row { display: flex; align-items: center; gap: 12px; }
.table-cell-text { font-size: 14px; color: var(--text-dark); }

.btn-sm { font-size: 13px !important; padding: 9px 20px !important; }
.btn-sm.btn-bold { font-weight: 700 !important; }
.btn-xs { font-weight: 700; font-size: 12px; padding: 6px 12px; }
.btn-soft-info { background: rgba(21, 101, 192, 0.1); color: #1565C0; border: 1px solid rgba(21, 101, 192, 0.25); }
.btn-soft-danger { background: rgba(198, 40, 40, 0.1); color: #C62828; font-weight: 700; font-size: 13px; padding: 9px 16px; }
.btn-soft-gray { background: #eee; color: #333; }
.btn-danger-solid { background: #C62828 !important; color: #fff !important; }

.info-grid-item.accent strong { color: #1B4332; }
.modal-title-danger { font-size: 18px; font-weight: 800; color: #C62828; }
.modal-lead-text { font-size: 13px; color: var(--text-mid); margin-bottom: 16px; }
.field-group { margin-bottom: 20px; }
.field-label { font-size: 12.5px; font-weight: 700; color: var(--text-dark); display: block; margin-bottom: 6px; }
.required-mark { color: red; }

.request-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B4332, #E07B39);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}
.request-role-label { font-weight: 700; font-size: 13px; color: #1B4332; }

/* =============================================
   TRAME DE PAGE PUBLIQUE (layouts.app) — carte blanche, formulaires
   ============================================= */
.page-shell { background: var(--bg-cream-light); min-height: 80vh; padding: 48px 24px; }
.page-shell.dark { background: #1a1a1a; color: #e0e0e0; }

.page-container { margin: 0 auto; }
.container-w680 { max-width: 680px; }
.container-w720 { max-width: 720px; }
.container-w800 { max-width: 800px; }
.container-w820 { max-width: 820px; }
.container-w900 { max-width: 900px; }
.container-w940 { max-width: 940px; }
.container-w1000 { max-width: 1000px; }

.content-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.p-24 { padding: 24px; }
.p-28 { padding: 28px; }
.p-32 { padding: 32px; }
.p-36 { padding: 36px; }
.p-40 { padding: 40px; }
.p-56 { padding: 56px 40px; }

.v-stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }

.h1-page { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.btn-block { width: 100%; justify-content: center; }
.link-underline { font-size: 12.5px; font-weight: 600; color: var(--green); text-decoration: underline; }
.order-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-cream-light); }
.order-card-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.order-line { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.review-item { border-left: 3px solid var(--gold); padding-left: 14px; }
.card-subheading { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.section-heading-underline { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.underline-header-block { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

.h-stack { display: flex; align-items: center; }
.h-stack.wrap { flex-wrap: wrap; }
.h-stack.justify-between { justify-content: space-between; }
.h-stack.justify-end { justify-content: flex-end; }

.avatar-circle-36 {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; text-transform: uppercase; flex-shrink: 0;
}
.badge-role-auteur { background: rgba(224, 123, 57, 0.1); color: #E07B39; }
.badge-role-moderateur { background: rgba(27, 67, 50, 0.15); color: #1B4332; }
.badge-active { background: rgba(46, 125, 50, 0.12); color: #2e7d32; font-weight: 700; }
.badge-inactive { background: rgba(198, 40, 40, 0.12); color: #c62828; font-weight: 700; }
.text-dark-sm-bold-block-tight { font-size: 14px; color: var(--text-dark); display: block; }
.search-input-md-w220 { width: 220px; }
.text-dark-normal-block { font-size: 13px; color: var(--text-dark); display: block; }
.text-muted-xs-top2 { font-size: 11px; color: var(--text-light); display: block; margin-top: 2px; }
.text-dark-md-semibold-block { font-size: 12.5px; font-weight: 600; color: var(--text-dark); display: block; }
.text-mid-md-sm { font-size: 12.5px; color: var(--text-mid); }
.text-muted-md-light { color: var(--text-light); font-size: 12.5px; }
.text-italic-muted { font-size: 11px; color: #888; font-style: italic; }
.btn-xs-danger-outline { color: #c62828; border-color: #ef9a9a; font-size: 12px; padding: 5px 10px; }
.btn-xs-success-solid { background: #2e7d32; color: #fff; font-size: 12px; padding: 5px 10px; border: none; }
.btn-xs-delete { color: #b71c1c; border-color: #b71c1c; font-size: 12px; padding: 5px 10px; background: rgba(183, 28, 28, 0.05); }
.table-footer-pad-top { padding: 16px 20px; border-top: 1px solid var(--border); }
.confirm-modal-title.neutral { color: var(--text-dark); }
.confirm-modal-text.no-mb { margin-bottom: 24px; }

.grid-1-2col-32-noauto { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.grid-2col-12-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.modal-panel-plain {
  background: #fff; padding: 28px 32px; border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); max-width: 480px; width: 90%;
}
.thumb-36-rounded6 {
  width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: var(--bg-cream-light); display: flex; align-items: center; justify-content: center;
}
.badge-contest-live { background: rgba(46, 125, 50, 0.12); color: #2e7d32; font-weight: 700; }
.badge-contest-upcoming { background: rgba(224, 123, 57, 0.12); color: #e07b39; font-weight: 700; }
.badge-contest-closed { background: rgba(120, 120, 120, 0.12); color: #666; font-weight: 700; }
.text-mid-sm { font-size: 12.5px; color: var(--text-mid); }
.text-dark-md { font-size: 13.5px; color: var(--text-dark); }
.nowrap-right { text-align: right; white-space: nowrap; }
.modal-title-plain { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 20px; }
.confirm-modal-actions.end { justify-content: flex-end; }
.icon-emoji-md { font-size: 16px; }

/* =============================================
   RÔLES & PERMISSIONS (admin/roles)
   ============================================= */
.stat-icon-inline { background: rgba(27, 67, 50, 0.12); color: #1B4332; }
.stat-icon-orange { background: rgba(224, 123, 57, 0.12); color: #E07B39; }
.stat-icon-blue { background: rgba(21, 101, 192, 0.12); color: #1565C0; }
.stat-value-green { color: #1B4332; }
.stat-value-orange { color: #E07B39; }
.stat-value-blue { color: #1565C0; }
.h2-section { font-size: 19px; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; }
.roles-matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; }
.role-card { padding: 24px; border-top: 4px solid; }
.role-card.admin { border-top-color: #1B4332; }
.role-card.mod { border-top-color: #E07B39; }
.role-card.other { border-top-color: #1565C0; }
.role-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.role-card-title { font-size: 18px; font-weight: 800; color: var(--text-dark); margin: 0; text-transform: capitalize; }
.role-card-count { font-size: 12px; color: var(--text-light); margin-top: 2px; display: block; }
.role-card-badge { background: rgba(0, 0, 0, 0.06); color: var(--text-dark); font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; }
.perm-scroll-box { max-height: 260px; overflow-y: auto; padding-right: 6px; margin-bottom: 20px; }
.perm-group { margin-bottom: 12px; }
.perm-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #E07B39; display: block; margin-bottom: 6px; }
.perm-group-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.perm-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dark);
  cursor: pointer; padding: 4px 8px; border-radius: 6px; background: transparent; border: 1px solid transparent;
}
.perm-row.checked { background: rgba(27, 67, 50, 0.05); border-color: rgba(27, 67, 50, 0.15); }
.perm-row.checked span { font-weight: 600; }
.perm-checkbox { accent-color: #1B4332; }
.role-save-btn { background: #1B4332; color: #fff; width: 100%; justify-content: center; padding: 8px; font-size: 12.5px; }
.role-locked-note { text-align: center; font-size: 11.5px; color: var(--text-light); font-style: italic; padding: 6px; background: #FAF7F2; border-radius: 8px; }
.role-btn-new { background: #1B4332; color: #fff; font-weight: 700; font-size: 13px; padding: 10px 18px; }
.role-btn-perm { background: rgba(224, 123, 57, 0.12); color: #B5451B; font-weight: 700; font-size: 13px; padding: 10px 18px; border: 1px solid #E07B39; }
.role-input-pad { padding: 10px; font-size: 13.5px; }
.field-hint { font-size: 11.5px; color: var(--text-light); margin-top: 4px; display: block; }
.modal-title-role { font-size: 18px; font-weight: 800; color: #1B4332; }
.modal-title-perm { font-size: 18px; font-weight: 800; color: #B5451B; }
.modal-header-row-tight2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.field-group-20 { margin-bottom: 20px; }
.btn-neutral { background: #eee; color: #333; }
.btn-green-solid { background: #1B4332; color: #fff; }
.btn-brick-solid { background: #B5451B; color: #fff; }
.h1-inline-icon { display: flex; align-items: center; gap: 10px; }

/* =============================================
   STATISTIQUES (admin/statistiques)
   ============================================= */
.stat-bar-row { margin-bottom: 18px; }
.stat-bar-row:last-child { margin-bottom: 0; }
.stat-bar-legend { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.stat-bar-legend.sm { font-size: 12.5px; margin-bottom: 4px; font-weight: 400; }
.stat-bar-legend-value { color: var(--text-dark); }
.stat-bar-track { height: 10px; background: #E0E0E0; border-radius: 5px; overflow: hidden; }
.stat-bar-track.thin { height: 8px; border-radius: 4px; }
.stat-bar-fill { height: 100%; border-radius: 5px; }
.stat-bar-fill.thin { border-radius: 4px; }
.stat-bar-fill.c-green { background: #2e7d32; }
.stat-bar-fill.c-orange { background: #E07B39; }
.stat-bar-fill.c-red { background: #c62828; }
.stat-bar-fill.c-muted { background: var(--text-light); }
.stat-bar-fill.c-gradient { background: linear-gradient(90deg, #1B4332, #D4A041); }
.legend-green { color: #2e7d32; }
.legend-orange { color: #E07B39; }
.legend-red { color: #c62828; }
.legend-muted { color: var(--text-mid); }
.lang-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #F5F0E8; border-radius: 8px;
}
.lang-stat-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.badge-xs-11 { font-size: 11px; }
.empty-note-center { padding: 24px; color: var(--text-light); text-align: center; }
.grid-2col-32-mb32 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 32px; }
.grid-2-1col-32 { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.section-heading-underline-tight { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.section-heading-underline-sm { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.stat-value-gold { color: #D4A041; }
.text-dark-plain { color: var(--text-dark); }
.text-mid-plain { color: var(--text-mid); }
.font-bold { font-weight: 700; }
.rating-gold { font-size: 12.5px; font-weight: 700; color: var(--gold); }

/* =============================================
   FICHE ŒUVRE (librairie/show)
   ============================================= */
.book-cover-placeholder.centered { justify-content: center; padding: 24px; text-align: center; }
.bcp-title-lg { font-size: 16px; font-weight: 800; color: #fff; text-transform: uppercase; margin-bottom: 8px; }
.bcp-label-sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; }
.book-detail-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 48px; display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-bottom: 48px; box-shadow: var(--shadow);
}
.book-cover-frame {
  width: 100%; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: 24px;
}
.btn-full-center { width: 100%; justify-content: center; text-align: center; padding: 14px 20px; }
.btn-full-center.rounded8 { border-radius: 8px; }
.btn-full-center.sz15 { font-size: 15px; }
.btn-ghost-outline {
  width: 100%; justify-content: center; text-align: center; padding: 12px 20px; font-size: 13px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--text-mid); font-weight: 600; cursor: pointer; font-family: inherit;
}
.eyebrow-red { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--red); letter-spacing: 1px; display: block; margin-bottom: 8px; }
.book-title-xl { font-size: 32px; font-weight: 800; color: var(--text-dark); line-height: 1.2; margin-bottom: 12px; }
.book-author-line { font-size: 16px; color: var(--text-mid); margin-bottom: 20px; }
.link-green-underline { font-weight: 600; color: var(--green); text-decoration: underline; }
.ratings-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.ratings-value { font-size: 18px; font-weight: 800; color: var(--text-dark); }
.stars-md { font-size: 14px; }
.stars-sm { font-size: 12px; margin-left: 8px; }
.book-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.spec-label { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.spec-value { font-size: 14px; color: var(--text-dark); }
.resume-block { margin-bottom: 32px; }
.resume-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.resume-text { font-size: 14px; color: var(--text-mid); line-height: 1.7; white-space: pre-line; }
.reviews-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; margin-bottom: 48px; box-shadow: var(--shadow); }
.reviews-panel-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.review-form-box { background: var(--bg-cream-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 32px; }
.review-form-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.review-select { padding: 10px; border-radius: 6px; border: 1px solid var(--border); background: #fff; font-family: inherit; outline: none; font-size: 13px; }
.empty-note-lg { font-size: 14px; color: var(--text-light); text-align: center; padding: 24px; }
.review-item-row { border-bottom: 1px solid var(--border); padding-bottom: 20px; position: relative; }
.review-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.review-author { font-size: 14px; color: var(--text-dark); }
.review-date { font-size: 11px; color: var(--text-light); }
.review-comment { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; white-space: pre-line; }
.review-delete-form { position: absolute; right: 0; bottom: 20px; }
.review-delete-btn { background: none; border: none; color: var(--red); font-size: 11px; font-weight: 600; cursor: pointer; }
.section-title-lg { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 24px; }
.books-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.books-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.link-red-inline { font-size: 14px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.btn-review-pad { padding: 10px 20px; font-size: 13px; }

/* =============================================
   EXAMEN D'ŒUVRE (admin/oeuvres/show)
   ============================================= */
.page-max-900 { max-width: 900px; }
.link-sm { font-size: 13.5px; }
.review-card { margin-bottom: 28px; padding: 32px; }
.review-header-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.book-thumb-lg {
  width: 140px; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: #EDE7DA; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.review-details { flex: 1; min-width: 260px; }
.status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.h1-review { font-size: 26px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.author-line-sm { font-size: 13.5px; color: var(--text-light); margin-bottom: 14px; }
.rejection-note-box { background: #FFEBEE; border: 1.5px solid #FFCDD2; border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.rejection-note-title { color: #b71c1c; font-size: 13px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rejection-note-text { font-size: 13.5px; color: #c62828; margin: 0; line-height: 1.5; }
.resume-box { background: var(--bg-cream-light); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.resume-box-text { font-size: 14px; color: var(--text-dark); line-height: 1.6; }
.specs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; font-size: 13px; }
.spec-label-muted { color: var(--text-light); font-weight: 500; }
.spec-value-dark { color: var(--text-dark); }
.spec-value-price { color: #1B4332; font-size: 15px; }
.mb-24-block { margin-bottom: 24px; }
.decision-card { padding: 28px; }
.decision-title { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.decision-row { display: flex; gap: 20px; flex-wrap: wrap; }
.decision-box { flex: 1; min-width: 260px; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.decision-box.approve { background: rgba(76, 175, 80, 0.06); border: 1.5px solid rgba(76, 175, 80, 0.25); }
.decision-box.reject { background: rgba(244, 67, 54, 0.06); border: 1.5px solid rgba(244, 67, 54, 0.25); }
.decision-box-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.decision-box-title.approve { color: #2e7d32; }
.decision-box-title.reject { color: #c62828; }
.decision-box-text { font-size: 12.5px; margin-bottom: 16px; }
.decision-box-text.approve { color: #388e3c; }
.decision-box-text.reject { color: #d32f2f; margin-bottom: 14px; }
.btn-decision { width: 100%; justify-content: center; }
.btn-decision.approve { background: #2e7d32; }
.btn-decision.reject { background: #c62828; }
.field-error-text { color: #c62828; font-size: 12px; font-weight: 600; display: block; margin-top: 4px; }
.label-danger-inline { color: #c62828; }
.label-muted-500 { color: var(--text-light); font-weight: 500; }
.label-mb4 { margin-bottom: 4px; }
.btn-preview-pad { padding: 8px 16px; font-size: 12.5px; }

/* =============================================
   PROFIL ADMIN / MODÉRATEUR
   ============================================= */
.profile-banner { padding: 24px; margin-bottom: 28px; color: #fff; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
.profile-banner.admin { background: linear-gradient(135deg, #0A1910 0%, #143326 60%, #1B4332 100%); }
.profile-banner.mod { background: linear-gradient(135deg, #2B1508 0%, #4D260E 60%, #E07B39 100%); }
.profile-banner-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.profile-banner-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #E07B39, #B5451B); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
  border: 3px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.profile-banner-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.profile-banner-name { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.role-pill-gold { background: rgba(255, 215, 0, 0.2); border: 1px solid #FFD54F; color: #FFD54F; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.role-pill-white { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: #FFF; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.profile-banner-email { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin: 0; }
.profile-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.profile-form-card { padding: 26px; }
.profile-form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #EAE0D0; }
.profile-form-header h2 { font-size: 17px; font-weight: 800; color: var(--text-dark); margin: 0 0 2px; }
.profile-form-header p { font-size: 12.5px; color: var(--text-light); margin: 0; }
.profile-form-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.profile-form-icon.green { background: rgba(27, 67, 50, 0.1); color: #1B4332; }
.profile-form-icon.orange { background: rgba(224, 123, 57, 0.12); color: #E07B39; }
.field-error { color: #c62828; font-size: 12px; margin-top: 4px; display: block; }
.btn-save-green { background: #1B4332; width: 100%; justify-content: center; padding: 12px; }
.btn-save-orange { background: #E07B39; width: 100%; justify-content: center; padding: 12px; }

/* =============================================
   MISSION PRESTATAIRE (prestataire/missions/show)
   ============================================= */
.page-max-900-vstack { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.link-md-bold { font-size: 13.5px; font-weight: 700; }
.mission-header-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.badge-uppercase { text-transform: uppercase; }
.mission-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin: 8px 0 4px; }
.mission-date { font-size: 13px; color: var(--text-light); margin: 0; }
.badge-pad-lg { font-size: 13px; padding: 8px 16px; }
.mission-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mission-detail-box { background: #F8FAFC; border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.mission-detail-label { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; }
.mission-detail-value { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-top: 4px; }
.mission-detail-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.link-blue-underline { display: inline-block; margin-top: 6px; color: #2563EB; font-size: 12.5px; font-weight: 700; text-decoration: underline; }
.mission-notes-box { margin-top: 20px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 16px; }
.mission-notes-label { font-size: 12px; font-weight: 700; color: #92400E; text-transform: uppercase; }
.mission-notes-text { font-size: 13.5px; color: #78350F; margin-top: 6px; line-height: 1.5; }
.mission-deliver-card { padding: 28px; border: 1.5px solid #1B4332; }
.mission-deliver-title { font-size: 18px; font-weight: 800; color: var(--text-dark); margin: 0 0 8px; }
.mission-deliver-sub { font-size: 13.5px; color: var(--text-light); margin-bottom: 20px; }
.mission-report-card { padding: 28px; background: #ECFDF5; border: 1.5px solid #A7F3D0; }
.mission-report-title { font-size: 18px; font-weight: 800; color: #065F46; margin: 0 0 12px; }
.btn-report-download { background: #059669; text-decoration: none; }
.mission-remarks-box { background: #fff; border: 1px solid #D1FAE5; border-radius: 10px; padding: 16px; margin-top: 12px; }
.mission-remarks-label { font-size: 12px; font-weight: 700; color: #047857; text-transform: uppercase; }
.mission-remarks-text { font-size: 13.5px; color: #065F46; margin-top: 6px; line-height: 1.5; }
.m-0 { margin: 0; }

/* =============================================
   PAGE PUBLIQUE CONCOURS (concours/index)
   ============================================= */
.page-hero-block { margin-bottom: 48px; }
.h1-hero { font-size: 36px; font-weight: 800; color: var(--text-dark); }
.hero-sub { font-size: 15px; color: var(--text-mid); max-width: 600px; margin-top: 8px; }
.section-block { margin-bottom: 56px; }
.section-title-md { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 24px; }
.empty-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 48px; text-align: center; color: var(--text-light); box-shadow: var(--shadow);
}
.empty-panel-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.empty-panel-sub { font-size: 13px; }
.concours-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.concours-grid.cols-2.mb-32 { margin-bottom: 32px; }
.concours-card-styled { background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; }
.concours-card-styled.past { opacity: 0.75; }
.concours-card-header.mb-12 { margin-bottom: 12px; }
.concours-badge-open { background: rgba(76, 175, 80, 0.1); color: #2e7d32; }
.concours-badge-soon { background: rgba(255, 193, 7, 0.15); color: #b8860b; }
.concours-badge-closed-bg { background: rgba(244, 67, 54, 0.1); color: #c62828; }
.concours-participants { font-size: 12px; color: var(--text-light); }
.concours-name-styled { color: var(--text-dark); margin-bottom: 12px; font-size: 18px; }
.concours-desc-clamp {
  font-size: 13px; color: var(--text-mid); margin-bottom: 20px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.concours-date-styled { color: var(--text-light); font-size: 12.5px; }
.concours-btn-styled { color: var(--white); background: var(--green); }
.concours-consult-link { font-size: 12px; font-weight: 600; color: var(--text-light); }

/* =============================================
   FICHE CONCOURS (concours/show)
   ============================================= */
.alert-success-lg { background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.2); color: #2e7d32; padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500; }
.contest-detail-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); margin-bottom: 40px; }
.contest-detail-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 32px; flex-wrap: wrap; }
.contest-poster { width: 180px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contest-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contest-info-col { flex: 1; min-width: 240px; }
.contest-status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.contest-status-badge.open { background: rgba(76, 175, 80, 0.1); color: #2e7d32; }
.contest-status-badge.soon { background: rgba(255, 193, 7, 0.15); color: #b8860b; }
.contest-status-badge.closed { background: rgba(244, 67, 54, 0.1); color: #c62828; }
.contest-title { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-top: 12px; margin-bottom: 20px; line-height: 1.25; }
.contest-dates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; background: var(--bg-cream-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 32px; }
.contest-date-label { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.contest-date-value { font-size: 14px; color: var(--text-dark); }
.contest-rules-block { margin-bottom: 40px; }
.contest-rules-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.contest-rules-text { font-size: 14px; color: var(--text-mid); line-height: 1.7; white-space: pre-line; }
.contest-cta-row { border-top: 1px solid var(--border); padding-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.contest-notice { padding: 16px 20px; border-radius: 8px; width: 100%; font-size: 13px; }
.contest-notice.centered { text-align: center; font-size: 13.5px; font-weight: 600; }
.contest-notice.success { background: rgba(76, 175, 80, 0.05); border: 1px dashed #2e7d32; color: #2e7d32; }
.contest-notice.info { background: rgba(224, 123, 57, 0.05); border: 1px dashed var(--orange); color: var(--orange); }
.contest-notice.upcoming { background: rgba(255, 193, 7, 0.08); border: 1px dashed #b8860b; color: #b8860b; }
.contest-notice.closed { background: rgba(244, 67, 54, 0.05); border: 1px dashed #c62828; color: #c62828; }
.btn-cta-pad { padding: 14px 28px; }
.submissions-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); }
.submissions-title { font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.submissions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.submission-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; gap: 12px; align-items: center; }
.submission-thumb { width: 44px; aspect-ratio: 2/3; background: var(--bg-cream-light); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.submission-title { font-size: 13.5px; color: var(--text-dark); display: block; line-height: 1.3; }
.submission-author { font-size: 12px; color: var(--text-light); }
.submission-result { font-size: 10px; font-weight: 700; color: var(--red); text-transform: uppercase; display: block; margin-top: 4px; }

/* =============================================
   PANIER (panier/index)
   ============================================= */
.h1-page-xxl { font-size: 32px; font-weight: 800; color: var(--text-dark); }
.cart-empty-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; box-shadow: var(--shadow); }
.cart-empty-icon { width: 64px; height: 64px; color: var(--border); margin: 0 auto 20px; display: block; }
.cart-empty-title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.cart-empty-text { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
.btn-cart-pad { padding: 12px 28px; }
.cart-layout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cart-list-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.cart-list-header { padding: 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.cart-count-label { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.btn-text-red { background: none; border: none; color: var(--red); font-size: 13px; font-weight: 600; cursor: pointer; }
.cart-items-list { display: flex; flex-direction: column; }
.cart-item-row { padding: 24px; display: flex; gap: 20px; border-bottom: 1px solid var(--border); align-items: center; }
.cart-item-thumb { width: 60px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; background: var(--bg-cream); flex-shrink: 0; }
.cart-item-thumb-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; }
.cart-item-thumb-title { font-size: 7px; font-weight: 700; color: #fff; word-break: break-all; }
.cart-item-details { flex: 1; }
.cart-item-genre { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-light); letter-spacing: 0.5px; display: block; margin-bottom: 2px; }
.cart-item-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.cart-item-author { font-size: 12px; color: var(--text-light); }
.cart-item-price-col { text-align: right; flex-shrink: 0; margin: 0 20px; }
.cart-item-price { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.btn-icon-remove { background: none; border: none; color: var(--text-light); cursor: pointer; padding: 6px; }
.cart-summary-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px; box-shadow: var(--shadow); position: sticky; top: 100px; }
.cart-summary-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cart-summary-row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 14px; color: var(--text-mid); }
.cart-summary-row.total { margin-bottom: 24px; font-size: 15px; font-weight: 800; color: var(--text-dark); border-top: 1px solid var(--border); padding-top: 16px; }
.cart-total-value { color: var(--red); }
.btn-checkout { width: 100%; justify-content: center; text-align: center; padding: 14px; }
.cart-continue-link-wrap { margin-top: 20px; text-align: center; }
.cart-continue-link { font-size: 12px; font-weight: 600; color: var(--green); text-decoration: underline; }

/* =============================================
   DEMANDE DE RÔLE (compte/roles/*)
   ============================================= */
.link-back-muted { font-size: 13px; color: var(--text-mid); font-weight: 600; }
.role-form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); margin-top: 16px; }
.role-form-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.role-form-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 8px; }
.role-form-note { font-size: 12.5px; color: var(--text-light); margin-bottom: 24px; }
.role-form { display: flex; flex-direction: column; gap: 18px; }
.role-form .form-field label { font-size: 12.5px; font-weight: 700; color: var(--text-dark); }
.role-form .form-field input,
.role-form .form-field textarea { padding: 11px 12px; border: 1.5px solid var(--border); font-size: 13.5px; }
.role-form .form-field textarea { padding: 12px; }
.required-crimson { color: #C62828; }
.btn-role-submit { padding: 13px 24px; font-size: 14px; margin-top: 6px; }
.error-list { margin: 0; padding-left: 18px; }

/* =============================================
   MES RÔLES (compte/roles/index)
   ============================================= */
.role-section-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); margin-bottom: 24px; }
.role-section-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.role-pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.role-pill-green { background: rgba(27, 67, 50, 0.1); color: var(--green); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.espaces-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); margin-bottom: 10px; }
.espaces-link-list { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-espace-link { padding: 8px 16px; font-size: 13px; }
.request-list { display: flex; flex-direction: column; gap: 12px; }
.request-item { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.request-item-title { font-size: 14px; color: var(--text-dark); }
.request-item-date { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.request-item-motif { font-size: 12.5px; color: #C62828; font-style: italic; margin-top: 6px; }
.status-pill { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.retry-link-wrap { margin-top: -4px; }
.retry-link { font-size: 12.5px; color: var(--green); font-weight: 700; }
.upgrades-title { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; }
.upgrades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.upgrade-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.upgrade-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.upgrade-card-desc { font-size: 13px; color: var(--text-mid); line-height: 1.5; flex: 1; margin-bottom: 18px; }
.btn-upgrade-request { padding: 11px 20px; font-size: 13px; text-align: center; }
.upgrades-empty-panel { background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; color: var(--text-light); font-size: 13.5px; }
.intro-text-md { font-size: 14px; color: var(--text-mid); line-height: 1.6; max-width: 620px; }

/* =============================================
   LIBRAIRIE — LISTE (librairie/index)
   ============================================= */
.librairie-header.mb-40 { margin-bottom: 40px; }
.librairie-title-lg { font-size: 36px; }
.search-bar-wide { min-width: 320px; }
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.filters-sidebar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.filters-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; color: var(--text-dark); }
.filter-group { margin-bottom: 24px; }
.filter-group.bordered { border-top: 1px solid var(--border); padding-top: 20px; }
.filter-group-title { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--text-light); margin-bottom: 12px; letter-spacing: 0.5px; }
.filter-link-list { display: flex; flex-direction: column; gap: 8px; }
.filter-link-item { font-size: 13px; font-weight: 500; color: var(--text-mid); }
.filter-link-item.active { font-weight: 700; color: var(--red); }
.catalog-empty-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 60px; text-align: center; color: var(--text-light); }
.catalog-empty-icon { width: 48px; height: 48px; color: var(--border); margin-bottom: 16px; }
.catalog-empty-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.catalog-empty-sub { font-size: 13px; }
.pagination-center { display: flex; justify-content: center; }
.wishlist-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: inherit; }
.btn-book-read { background: #1B4332; color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; display: inline-block; }
.btn-book-buy { background: none; border: none; cursor: pointer; font-family: inherit; }
.librairie-section-pad { padding: 60px 40px; min-height: 80vh; }
.mb-0 { margin-bottom: 0; }

/* =============================================
   TABLEAU DE BORD MODÉRATION (admin/dashboard)
   ============================================= */
.mod-banner-gradient { background: linear-gradient(135deg, #0A1910 0%, #143326 50%, #E07B39 100%); }
.greeting-sub-gold { color: #FFD54F; }
.greeting-btn-orange { background: #E07B39; }
.icon-16 { width: 16px; height: 16px; }
.icon-12 { width: 12px; height: 12px; }
.no-underline { text-decoration: none; }
.stat-icon-red { background: rgba(198, 40, 40, 0.1); color: #c62828; }
.stat-value-red { color: #c62828; }
.btn-approve-solid { background: #2e7d32; color: #fff; border: none; }

/* =============================================
   PAGE TREMPLIN
   ============================================= */
.tremplin-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.tremplin-page-inner { max-width: 900px; }
.tremplin-header { margin-bottom: 48px; text-align: center; }
.tremplin-tag-line { background: var(--green); }
.tremplin-page-title { font-size: 38px; font-weight: 800; color: var(--text-dark); margin-top: 12px; }
.tremplin-lead { font-size: 15px; color: var(--text-mid); max-width: 600px; margin: 16px auto 0; line-height: 1.6; }
.tremplin-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 56px; align-items: start; }
.tremplin-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.tremplin-panel-title { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.tremplin-steps { display: flex; flex-direction: column; gap: 20px; }
.tremplin-step { display: flex; gap: 16px; font-size: 13.5px; color: var(--text-mid); line-height: 1.5; }
.tremplin-step-num { width: 24px; height: 24px; background: var(--green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.tremplin-step-title { color: var(--text-dark); display: block; margin-bottom: 2px; }
.tremplin-figures { display: flex; flex-direction: column; gap: 24px; }
.tremplin-figure-value { font-size: 36px; font-weight: 900; color: var(--green); line-height: 1; }
.tremplin-figure-desc { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.tremplin-cta-wrap { text-align: center; }
.tremplin-cta-btn { padding: 16px 36px; font-size: 15px; border-radius: 8px; }

/* =============================================
   CONFIRMATION DE PAIEMENT
   ============================================= */
.confirmation-page { background: var(--bg-cream-light); padding: 60px 40px; min-height: 80vh; }
.confirmation-inner { max-width: 760px; }
.confirmation-success-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 56px 40px; text-align: center; box-shadow: var(--shadow); margin-bottom: 24px; }
.confirmation-icon-wrap { margin-bottom: 20px; }
.confirmation-icon { width: 72px; height: 72px; color: var(--green); margin: 0 auto; display: block; }
.confirmation-title { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.confirmation-lead { font-size: 15px; color: var(--text-light); line-height: 1.6; max-width: 520px; margin: 0 auto; }
.confirmation-meta-box { margin-top: 32px; padding: 20px; background: var(--bg-cream); border-radius: 12px; display: inline-block; text-align: left; }
.confirmation-meta-row { display: flex; gap: 32px; font-size: 13px; }
.confirmation-meta-label { color: var(--text-light); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.confirmation-meta-value { color: var(--text-dark); font-weight: 700; font-size: 15px; }
.confirmation-meta-value-red { color: var(--red); font-weight: 800; font-size: 15px; }
.confirmation-meta-value-mono { color: var(--text-dark); font-weight: 700; font-size: 12px; font-family: monospace; }
.confirmation-items-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.confirmation-items-header { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.confirmation-items-title { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.confirmation-item-row { padding: 20px 24px; display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--border); }
.confirmation-item-cover { width: 48px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; background: var(--bg-cream); flex-shrink: 0; }
.confirmation-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.confirmation-item-info { flex: 1; }
.confirmation-item-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.confirmation-item-author { font-size: 12px; color: var(--text-light); }
.confirmation-item-btn { padding: 8px 16px; font-size: 12px; text-decoration: none; }
.confirmation-actions { text-align: center; margin-top: 32px; display: flex; gap: 12px; justify-content: center; }
.confirmation-btn-primary { padding: 12px 24px; text-decoration: none; }
.confirmation-btn-link { padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--green); text-decoration: underline; }

/* =============================================
   PAGE PUBLIER (devenir auteur)
   ============================================= */
.publier-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.publier-inner { max-width: 800px; text-align: center; }
.publier-header { margin-bottom: 40px; }
.publier-title { font-size: 38px; font-weight: 800; color: var(--text-dark); margin-top: 12px; line-height: 1.2; }
.publier-lead { font-size: 15px; color: var(--text-mid); line-height: 1.6; max-width: 600px; margin: 16px auto 0; }
.publier-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; text-align: left; }
.publier-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.publier-card-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.publier-card-desc { font-size: 13px; color: var(--text-light); line-height: 1.5; margin-bottom: 20px; }
.publier-card-list { font-size: 12.5px; color: var(--text-mid); display: flex; flex-direction: column; gap: 8px; }
.publier-cta-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); display: inline-block; width: 100%; }
.publier-cta-title { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; }
.publier-cta-title-tight { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.publier-cta-desc { font-size: 13.5px; color: var(--text-mid); margin-bottom: 24px; }
.publier-cta-desc-light { font-size: 13.5px; color: var(--text-light); margin-bottom: 24px; }
.publier-cta-btn { padding: 14px 28px; }
.publier-guest-actions { display: flex; gap: 16px; justify-content: center; }
.publier-guest-btn { padding: 12px 24px; }

/* =============================================
   AUTEUR : DÉTAIL D'UNE ŒUVRE
   ============================================= */
.oeuvre-show-wrap { max-width: 900px; }
.oeuvre-show-back-wrap { margin-bottom: 24px; }
.oeuvre-show-back-link { font-size: 13.5px; }
.oeuvre-show-header-card { margin-bottom: 24px; padding: 32px; }
.oeuvre-show-header-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: start; }
.oeuvre-show-cover { width: 120px; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #EDE7DA; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.oeuvre-show-cover img { width: 100%; height: 100%; object-fit: cover; }
.oeuvre-show-cover-placeholder { height: 100%; }
.oeuvre-show-main { flex: 1; min-width: 260px; }
.oeuvre-show-badges-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.badge-rejete { background: rgba(244, 67, 54, 0.1); color: #c62828; }
.oeuvre-show-format { font-size: 12px; color: var(--text-light); }
.oeuvre-show-title { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.oeuvre-show-rejet-box { background: #FFEBEE; border: 1px solid #FFCDD2; border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.oeuvre-show-rejet-title { color: #b71c1c; font-size: 13px; display: block; margin-bottom: 2px; }
.oeuvre-show-rejet-text { font-size: 13px; color: #c62828; margin: 0; line-height: 1.5; }
.oeuvre-show-resume { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }
.oeuvre-show-meta-row { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--text-light); margin-bottom: 16px; }
.oeuvre-show-meta-strong { color: var(--text-dark); }
.oeuvre-show-price-strong { color: #1B4332; font-size: 16px; }
.oeuvre-show-actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oeuvre-show-btn-preview { padding: 9px 16px; border-color: #1B4332; color: #1B4332; display: inline-flex; align-items: center; gap: 6px; }
.oeuvre-show-btn-edit { padding: 9px 16px; background: #1B4332; color: #fff; }
.oeuvre-show-btn-submit { padding: 9px 16px; background: #D4A041; color: #fff; border: none; }
.oeuvre-show-stats-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
.oeuvre-show-stat-value-lg { font-size: 22px; }

/* =============================================
   AUTEUR : SUIVI DES VENTES GLOBALES
   ============================================= */
.mb-36 { margin-bottom: 36px; }
.text-light-sm { font-size: 13.5px; color: var(--text-light); }
.ventes-stats-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; }
.stat-value-lg-green { font-size: 24px; color: #1B4332; }
.stat-value-lg-gold { font-size: 24px; color: #E07B39; }
.stat-value-lg-red { font-size: 24px; color: #B5451B; }
.text-accent-orange-md { font-size: 14px; color: #E07B39; }
.text-price-md { font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.text-dark-bold-sm { font-size: 13px; font-weight: 700; color: var(--text-dark); }

/* =============================================
   LAYOUT ADMIN (sidebar + topbar modération)
   ============================================= */
.body-bg-cream { background: #F0EBE0; }
.sidebar-gradient-green { background: linear-gradient(180deg, #0A1910 0%, #143326 50%, #1B4332 100%); }
.sidebar-inner-scroll { overflow-y: auto; flex: 1; }
.brand-sub-role { font-weight: 800; }
.brand-sub-role.admin { color: #66BB6A; }
.brand-sub-role.mod { color: #E07B39; }
.nav-label-green { color: #66BB6A; }
.nav-label-green-mt { margin-top: 18px; color: #66BB6A; }
.nav-badge-count { background: #E07B39; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: auto; }
.sidebar-footer-link-green { color: #66BB6A; }
.topbar-user-role-box.admin { background: rgba(27, 67, 50, 0.12); border-color: rgba(27, 67, 50, 0.3); }
.topbar-user-role-box.mod { background: rgba(224, 123, 57, 0.08); border-color: rgba(224, 123, 57, 0.3); }
.avatar-cover { object-fit: cover; }
.avatar-gradient-admin { background: linear-gradient(135deg, #1B4332, #2D6A4F); }
.avatar-gradient-mod { background: linear-gradient(135deg, #E07B39, #B5451B); }
.role-label-admin { color: #1B4332; font-weight: 800; }
.role-label-mod { color: #E07B39; font-weight: 800; }
.role-label-default { color: var(--text-mid); font-weight: 700; }
.dropdown-role-tag { font-size: 11px; font-weight: 700; display: block; margin-top: 3px; }
.dropdown-role-tag.admin { color: #1B4332; }
.dropdown-role-tag.mod { color: #E07B39; }
.admin-footer-bar { padding: 18px 32px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); border-top: 1px solid rgba(226, 217, 200, 0.8); margin-top: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-mid); }
.admin-footer-inner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center; }
.admin-footer-brand { color: var(--text-dark); font-weight: 700; }
.admin-footer-sep { color: #bbb; }

/* =============================================
   AUTEUR : LISTE DE MES ŒUVRES
   ============================================= */
.header-row-between-wrap { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.btn-pad-10-135 { padding: 10px 20px; font-size: 13.5px; }
.icon-15 { width: 15px; height: 15px; }
.mt-4 { margin-top: 4px; }
.avatar-row-14 { display: flex; align-items: center; gap: 14px; }
.book-thumb-md-shadow { width: 40px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #EDE7DA; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12); }
.min-w-0 { min-width: 0; }
.title-link-truncate { font-size: 14px; font-weight: 700; color: var(--text-dark); display: block; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; transition: color 0.2s; }
.text-mid-nowrap { color: var(--text-mid); white-space: nowrap; }
.text-dark-bold-nowrap { font-weight: 700; color: var(--text-dark); white-space: nowrap; }
.text-light-2xs-light { font-size: 11px; font-weight: 500; color: var(--text-light); }
.mini-stat-col { display: flex; flex-direction: column; gap: 2px; }
.mini-stat-mid { font-size: 12px; color: var(--text-mid); }
.mini-stat-light { font-size: 12px; color: var(--text-light); }
.mini-stat-strong { color: var(--text-dark); }

/* =============================================
   PAGE PUBLIQUE : LISTE DES AUTEURS
   ============================================= */
.auteurs-page { background: var(--bg-cream-light); padding: 60px 40px; min-height: 80vh; }
.auteurs-header { margin-bottom: 40px; }
.auteurs-title { font-size: 36px; font-weight: 800; color: var(--text-dark); }
.auteurs-search-bar { min-width: 320px; }
.auteurs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.auteurs-filters-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.auteurs-filters-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; color: var(--text-dark); }
.auteurs-filter-group { margin-bottom: 24px; }
.auteurs-filter-group-title { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--text-light); margin-bottom: 12px; letter-spacing: 0.5px; }
.auteurs-filter-list { display: flex; flex-direction: column; gap: 8px; }
.auteurs-empty-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 60px; text-align: center; color: var(--text-light); }
.auteurs-empty-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.auteurs-empty-sub { font-size: 13px; }
.auteurs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.auteur-card-tile { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow); transition: var(--transition); }
.auteur-card-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden; border: 2px solid var(--border); }
.auteur-card-avatar.no-photo { background: var(--bg-cream-light); display: flex; align-items: center; justify-content: center; }
.auteur-card-initials { font-size: 24px; font-weight: 800; color: var(--red); }
.auteur-card-name { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.auteur-card-count { font-size: 12.5px; color: var(--text-light); margin-bottom: 16px; }
.auteur-card-link-sm { font-size: 12.5px; font-weight: 600; color: var(--green); text-decoration: underline; }
.auteurs-pagination-center { display: flex; justify-content: center; }

/* =============================================
   PAGE CONTACT
   ============================================= */
.contact-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.contact-inner { max-width: 900px; }
.contact-header { margin-bottom: 48px; text-align: center; }
.contact-title { font-size: 38px; font-weight: 800; color: var(--text-dark); margin-top: 12px; }
.contact-lead { font-size: 15px; color: var(--text-mid); max-width: 600px; margin: 16px auto 0; line-height: 1.6; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.contact-field { margin-bottom: 20px; }
.contact-field-last { margin-bottom: 24px; }
.contact-label { font-size: 13px; font-weight: 600; color: var(--text-mid); display: block; margin-bottom: 8px; }
.contact-input, .contact-textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 13.5px; outline: none; }
.contact-textarea { resize: vertical; }
.contact-submit-btn { width: 100%; justify-content: center; padding: 14px; }
.contact-coords-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.contact-coords-list { display: flex; flex-direction: column; gap: 20px; font-size: 13.5px; color: var(--text-mid); line-height: 1.6; }
.contact-coords-label { color: var(--text-dark); display: block; }

/* =============================================
   AUTEUR : MODIFIER UNE ŒUVRE
   ============================================= */
.mb-18 { margin-bottom: 18px; }
.edit-oeuvre-wrap { max-width: 820px; }
.edit-oeuvre-back-wrap { margin-bottom: 24px; }
.edit-oeuvre-back-link { font-size: 13.5px; }
.edit-oeuvre-rejet-box { background: #FFEBEE; border: 1.5px solid #FFCDD2; border-radius: 10px; padding: 18px; margin-bottom: 24px; }
.edit-oeuvre-rejet-title { color: #b71c1c; font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.edit-oeuvre-rejet-text { font-size: 13.5px; color: #c62828; margin: 0 0 10px 0; line-height: 1.5; }
.edit-oeuvre-rejet-hint { font-size: 12.5px; color: #555; display: block; background: #fff; padding: 8px 12px; border-radius: 6px; border: 1px solid #FFCDD2; }
.edit-oeuvre-file-section { background: #FDFAF5; border: 1px solid #EAE0D0; border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.edit-oeuvre-file-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.file-input-pad { padding: 8px; }
.file-note-ok { font-size: 12px; color: #2e7d32; margin-top: 4px; display: block; font-weight: 600; }
.file-note-muted { font-size: 12px; color: var(--text-light); margin-top: 4px; display: block; }
.cover-preview-row { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.cover-preview-thumb { width: 40px; height: 55px; object-fit: cover; border-radius: 4px; border: 1px solid #ccc; }
.cover-preview-note { font-size: 12px; color: #2e7d32; font-weight: 600; }
.edit-oeuvre-submit-row { display: flex; gap: 12px; margin-top: 24px; }
.edit-oeuvre-submit-btn { background: #1B4332; flex: 1; justify-content: center; }

/* =============================================
   ADMIN : DÉTAIL VENTES PAR AUTEUR
   ============================================= */
.max-w-1000 { max-width: 1000px; }
.ventes-auteur-back-wrap { margin-bottom: 24px; }
.ventes-auteur-header-card { padding: 28px; margin-bottom: 28px; }
.flex-between-wrap-20 { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.flex-gap-16 { display: flex; align-items: center; gap: 16px; }
.avatar-circle-56-gradient { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #1B4332, #D4A041); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #fff; }
.h1-22-tight { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 2px; }
.flex-gap-20 { display: flex; gap: 20px; }
.stat-value-lg-teal { font-size: 18px; color: #1B4332; }
.stat-value-lg-gold2 { font-size: 18px; color: #D4A041; }
.empty-panel-padded { padding: 28px; text-align: center; color: var(--text-light); }
.badge-size-11 { font-size: 11px; }
.stat-value-md-teal { font-size: 13.5px; color: #1B4332; }
.stat-value-md-gold2 { font-size: 13.5px; color: #D4A041; }

/* =============================================
   AUTH : ACTIVATION DE COMPTE (OTP)
   ============================================= */
.activer-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: #F0EBE0; }
.activer-card { width: 100%; max-width: 480px; background: #ffffff; border-radius: 20px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08); border: 1px solid var(--border); padding: 40px 32px; text-align: center; }
.activer-icon-wrap { width: 72px; height: 72px; background: linear-gradient(135deg, rgba(27, 67, 50, 0.1) 0%, rgba(45, 106, 79, 0.15) 100%); color: #1B4332; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.activer-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.activer-lead { font-size: 14px; color: var(--text-mid); margin-bottom: 24px; line-height: 1.5; }
.activer-email { color: #1B4332; }
.activer-alert { margin-bottom: 20px; padding: 12px; border-radius: 10px; font-size: 13px; }
.activer-alert.error { background: #FEF2F2; color: #991B1B; font-weight: 600; }
.activer-alert.info { background: #EFF6FF; color: #1E40AF; }
.activer-alert.success { background: #ECFDF5; color: #065F46; }
.activer-code-field { margin-bottom: 24px; }
.activer-code-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.activer-otp-row { display: flex; gap: 12px; justify-content: center; }
.otp-digit { width: 54px; height: 60px; font-size: 24px; font-weight: 800; text-align: center; border: 2px solid var(--border); border-radius: 12px; outline: none; transition: all 0.2s; }
.activer-code-error { display: block; color: #DC2626; font-size: 12.5px; margin-top: 8px; font-weight: 600; }
.activer-submit-btn { width: 100%; padding: 14px; font-size: 15px; font-weight: 800; border-radius: 12px; background: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%); color: #ffffff; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(27, 67, 50, 0.25); display: flex; justify-content: center; align-items: center; }
.activer-resend { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-mid); }
.activer-resend-btn { background: none; border: none; color: #1B4332; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }
.resend-form-inline { display: inline; margin-left: 4px; }

/* =============================================
   AUTEUR : PROFIL (CONSULTATION)
   ============================================= */
.max-w-820 { max-width: 820px; }
.profil-header-card { margin-bottom: 24px; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.profil-header-left { display: flex; align-items: center; gap: 20px; }
.profil-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.profil-avatar-circle-lg { width: 72px; height: 72px; font-size: 24px; }
.profil-header-name { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }
.badge-size-11-solo { font-size: 11px; }
.profil-edit-btn { padding: 10px 18px; font-size: 13px; }
.profil-card-spaced { margin-bottom: 24px; }
.profil-info-grid { padding: 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.auteur-label-muted { color: var(--text-light); font-weight: 500; }
.profil-info-value { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.profil-bio-wrap { padding: 0 28px 24px; }
.profil-bio-text { font-size: 14px; color: var(--text-dark); line-height: 1.6; margin-top: 4px; }

/* =============================================
   AUTEUR : LISTE DES CONCOURS
   ============================================= */
.concours-title-block { font-size: 14.5px; color: var(--text-dark); display: block; }
.concours-desc-block { font-size: 12px; color: var(--text-light); line-height: 1.4; display: block; }
.concours-period-cell { font-size: 12.5px; color: var(--text-mid); }
.concours-participants-strong { font-size: 13.5px; color: var(--text-dark); }
.concours-inscrit-box { background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); border-radius: 8px; padding: 6px 12px; display: inline-block; text-align: right; }
.concours-inscrit-label { font-size: 11.5px; color: #2e7d32; font-weight: 700; display: block; }
.concours-inscrit-oeuvre { font-size: 12.5px; color: var(--text-dark); }
.concours-participer-form { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.concours-select-sm { padding: 6px 10px; font-size: 12px; max-width: 180px; }
.concours-btn-participer { background: #1B4332; color: #fff; border: none; padding: 7px 14px; font-size: 12px; font-weight: 700; }
.concours-hint-muted { font-size: 11.5px; color: #888; font-style: italic; }
.concours-hint-upcoming { font-size: 12px; color: #e07b39; font-style: italic; }
.concours-hint-closed { font-size: 12px; color: #888; font-style: italic; }

/* =============================================
   LECTEUR INTÉGRÉ (librairie/lire)
   ============================================= */
.reader-page { background: #1a1a1a; color: #e0e0e0; min-height: 90vh; padding: 40px 20px; }
.reader-inner { max-width: 900px; margin: 0 auto; }
.reader-topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.reader-back-link { font-size: 13px; font-weight: 600; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; }
.reader-title { font-size: 22px; font-weight: 800; color: #fff; margin-top: 6px; line-height: 1.2; }
.reader-meta { font-size: 12.5px; color: #aaa; }
.reader-meta-status { color: #E07B39; }
.reader-actions { display: flex; gap: 10px; align-items: center; }
.reader-btn-download { background: #242424; color: #fff; border-color: #555; font-size: 12.5px; padding: 8px 16px; }
.reader-font-controls { display: flex; gap: 6px; }
.reader-font-btn { background: #333; border: none; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.reader-pdf-panel { background: #242424; border-radius: 12px; padding: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
.reader-pdf-iframe { width: 100%; height: 78vh; border: none; border-radius: 8px; }
.reader-content { background: #242424; border-radius: 8px; padding: 48px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); font-size: 16px; line-height: 1.8; font-family: 'Georgia', serif; text-align: justify; }
.reader-content-title { font-family: 'Inter', sans-serif; font-size: 24px; color: #fff; text-align: center; margin-bottom: 32px; }
.reader-resume { margin-bottom: 20px; text-indent: 24px; }
.reader-download-block { text-align: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid #333; font-family: 'Inter', sans-serif; }
.reader-download-hint { color: #aaa; font-size: 14px; margin-bottom: 16px; }
.reader-btn-download-lg { background: #242424; color: #fff; border-color: #555; font-size: 13px; padding: 10px 20px; display: inline-block; }
.reader-no-file { color: #888; font-size: 13px; }

/* =============================================
   AUTH : CONNEXION
   ============================================= */
.login-card { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo-center { margin: 0 auto 16px; }
.login-title { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.login-subtitle { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.login-error-box { background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.2); color: #c62828; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 12.5px; }
.login-field { margin-bottom: 20px; }
.login-label { font-size: 12.5px; font-weight: 600; color: var(--text-mid); display: block; margin-bottom: 6px; }
.login-input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 13.5px; outline: none; }
.login-password-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.login-label-inline { font-size: 12.5px; font-weight: 600; color: var(--text-mid); }
.login-forgot-link { font-size: 11.5px; color: var(--red); font-weight: 500; }
.login-remember-row { margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.login-checkbox { accent-color: var(--green); }
.login-remember-label { font-size: 12.5px; color: var(--text-light); cursor: pointer; user-select: none; }
.login-submit-btn { width: 100%; justify-content: center; padding: 14px; font-size: 14px; }
.login-footer { margin-top: 28px; text-align: center; border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; color: var(--text-light); }
.login-footer-link { color: var(--green); font-weight: 600; text-decoration: underline; }

/* =============================================
   PAGE ACTUALITÉS
   ============================================= */
.actualites-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.actualites-inner { max-width: 900px; }
.actualites-header { margin-bottom: 48px; text-align: center; }
.actualites-title { font-size: 38px; font-weight: 800; color: var(--text-dark); margin-top: 12px; }
.actualites-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.actualite-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.actualite-card-body { padding: 28px; }
.actualite-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.actualite-tag.red { color: var(--red); }
.actualite-tag.green { color: var(--green); }
.actualite-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-top: 8px; margin-bottom: 12px; line-height: 1.35; }
.actualite-card-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 20px; }
.actualite-card-link { font-size: 12px; font-weight: 600; }
.actualite-card-link.red { color: var(--red); }
.actualite-card-link.green { color: var(--green); }

/* =============================================
   CONCOURS : PARTICIPER
   ============================================= */
.participer-page { background: var(--bg-cream-light); padding: 60px 40px; min-height: 80vh; }
.participer-inner { max-width: 600px; }
.participer-back-wrap { margin-bottom: 32px; }
.participer-back-link { font-size: 14px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.participer-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); }
.participer-header { margin-bottom: 28px; }
.participer-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--red); letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.participer-title { font-size: 24px; font-weight: 800; color: var(--text-dark); line-height: 1.25; }
.participer-ineligible-box { background: rgba(224, 123, 57, 0.05); border: 1px dashed var(--orange); color: var(--orange); padding: 20px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; margin-bottom: 24px; }
.participer-ineligible-title { font-weight: 700; margin-bottom: 6px; }
.participer-btn-full { width: 100%; justify-content: center; text-align: center; padding: 12px; }
.participer-field { margin-bottom: 24px; }
.participer-label { font-size: 13px; font-weight: 600; color: var(--text-mid); display: block; margin-bottom: 8px; }
.participer-select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-family: inherit; font-size: 13.5px; outline: none; }
.participer-hint { font-size: 11.5px; color: var(--text-light); margin-top: 6px; line-height: 1.4; }
.participer-disclaimer { background: var(--bg-cream-light); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-size: 12px; color: var(--text-mid); line-height: 1.5; margin-bottom: 32px; }
.participer-submit-btn { width: 100%; justify-content: center; text-align: center; padding: 14px; }

/* =============================================
   ADMIN : VENTES PAR AUTEUR (LISTE)
   ============================================= */
.search-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.search-result-text { font-size: 13.5px; color: var(--text-light); }
.search-cancel-link { color: #b71c1c; margin-left: 10px; font-weight: 600; text-decoration: underline; }
.search-form-inline { display: flex; gap: 8px; }
.search-input-sm { padding: 8px 14px; font-size: 13px; width: 280px; }
.search-btn-solid { background: #1B4332; color: #fff; }
.stat-value-md-teal-block { font-size: 14px; color: #1B4332; }
.stat-value-md-gold2-block { font-size: 14px; color: #D4A041; }

/* =============================================
   AUTEUR : MES DEMANDES DE SERVICES ÉDITORIAUX
   ============================================= */
.commandes-header-bar { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: #fff; padding: 20px 24px; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); }
.commandes-header-title { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }
.commandes-header-desc { font-size: 13.5px; color: var(--text-light); margin: 0; }
.commandes-cta-btn { background: linear-gradient(135deg, #E07B39 0%, #B5451B 100%); color: #ffffff; font-weight: 700; font-size: 13.5px; padding: 12px 22px; border-radius: 10px; box-shadow: 0 4px 14px rgba(224, 123, 57, 0.28); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.2); }
.commandes-empty-padded { padding: 40px 20px; }
.commandes-empty-btn { margin-top: 10px; background: #1B4332; color: #fff; padding: 10px 20px; font-weight: 700; }
.commandes-service-tarif { font-size: 11.5px; color: #1B4332; font-weight: 600; }
.commandes-date-cell { color: var(--text-light); font-size: 12.5px; }
.commandes-notes-cell { font-size: 12.5px; color: var(--text-mid); max-width: 220px; }

/* =============================================
   PAIEMENT : REDIRECTION PASSERELLE
   ============================================= */
.paiement-redirect-page { background: var(--bg-cream-light); padding: 60px 40px; min-height: 80vh; }
.paiement-redirect-inner { max-width: 720px; }
.paiement-redirect-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 56px 40px; text-align: center; box-shadow: var(--shadow); }
.paiement-icon-wrap { margin-bottom: 24px; }
.paiement-icon { width: 56px; height: 56px; color: var(--green); margin: 0 auto; display: block; }
.paiement-redirect-title { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.paiement-redirect-desc { font-size: 14px; color: var(--text-light); margin-bottom: 28px; line-height: 1.6; }
.paiement-amount-red { color: var(--red); }
.paiement-loading-pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--bg-cream); border-radius: 8px; margin-bottom: 28px; }
.paiement-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; }
.paiement-loading-text { font-size: 13px; color: var(--text-mid); }
.paiement-redirect-btn { padding: 14px 32px; display: inline-block; text-decoration: none; }
.paiement-fallback-text { margin-top: 18px; font-size: 12px; color: var(--text-light); }
.paiement-fallback-link { color: var(--green); text-decoration: underline; font-weight: 600; }
.paiement-secure-note { text-align: center; font-size: 12px; color: var(--text-light); margin-top: 24px; }

/* =============================================
   TREMPLIN : SOUMETTRE
   ============================================= */
.tremplin-soumettre-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.tremplin-soumettre-inner { max-width: 600px; }
.tremplin-soumettre-back-wrap { margin-bottom: 32px; }
.tremplin-soumettre-back-link { font-size: 14px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.tremplin-soumettre-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); }
.tremplin-soumettre-header { margin-bottom: 28px; }
.tremplin-soumettre-eyebrow { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.tremplin-soumettre-title { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.tremplin-soumettre-field { margin-bottom: 20px; }
.tremplin-soumettre-field-last { margin-bottom: 24px; }
.tremplin-soumettre-label { font-size: 13px; font-weight: 600; color: var(--text-mid); display: block; margin-bottom: 8px; }
.tremplin-soumettre-select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-family: inherit; font-size: 13.5px; outline: none; }
.tremplin-soumettre-textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 13.5px; outline: none; resize: vertical; }
.tremplin-soumettre-submit-btn { width: 100%; justify-content: center; padding: 14px; }

/* =============================================
   PAGE LANGUES
   ============================================= */
.langues-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.langues-inner { max-width: 900px; }
.langues-header { margin-bottom: 48px; text-align: center; }
.langues-title { font-size: 38px; font-weight: 800; color: var(--text-dark); margin-top: 12px; }
.langues-lead { font-size: 15px; color: var(--text-mid); max-width: 600px; margin: 16px auto 0; line-height: 1.6; }
.langues-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.langue-card { background: var(--white); border: 1px solid var(--border); padding: 32px 24px; text-align: center; border-radius: var(--radius); box-shadow: var(--shadow); }
.langue-icon { color: var(--red); background: var(--bg-cream-light); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.langue-name { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.langue-speakers { font-size: 14px; font-weight: 800; color: var(--red); display: block; margin-bottom: 6px; }
.langue-region { font-size: 12px; color: var(--text-light); line-height: 1.4; }
.langues-cta-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); text-align: center; }
.langues-cta-title { font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.langues-cta-desc { font-size: 14.5px; color: var(--text-mid); line-height: 1.6; max-width: 580px; margin: 0 auto 28px; }
.langues-cta-btn { padding: 14px 28px; }

/* =============================================
   ÉDITEUR : CATALOGUE D'ŒUVRES
   ============================================= */
.editeur-catalogue-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.editeur-catalogue-filter-form { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 500px; }
.flex-1 { flex: 1; }
.w-170 { width: 170px; }
.editeur-filter-btn { padding: 10px 18px; }
.editeur-add-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.icon-16-thin { width: 16px; height: 16px; }
.editeur-empty-block { padding: 40px; text-align: center; color: var(--text-mid); }
.text-dark-plain { color: var(--text-dark); }
.text-capitalize { text-transform: capitalize; }
.text-teal-bold { font-weight: 700; color: #1B4332; }
.text-mono-mid { font-family: monospace; color: var(--text-mid); }
.text-mid-xs { color: var(--text-mid); font-size: 12px; }
.pagination-pad-top { margin-top: 20px; padding: 0 20px 20px; }

/* =============================================
   PAGE PUBLIQUE : PROFIL D'UN AUTEUR
   ============================================= */
.auteur-show-page { background: var(--bg-cream-light); padding: 60px 40px; min-height: 80vh; }
.auteur-show-inner { max-width: 1000px; }
.auteur-show-back-wrap { margin-bottom: 32px; }
.auteur-show-back-link { font-size: 14px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.auteur-show-header-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; margin-bottom: 48px; }
.auteur-show-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid var(--border); box-shadow: var(--shadow); }
.auteur-show-avatar.no-photo { background: var(--bg-cream-light); display: flex; align-items: center; justify-content: center; }
.auteur-show-initials { font-size: 40px; font-weight: 900; color: var(--red); }
.auteur-show-eyebrow { font-size: 11px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.auteur-show-name { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; }
.auteur-show-bio { font-size: 14px; color: var(--text-mid); line-height: 1.7; white-space: pre-line; }
.auteur-show-pubs-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 24px; }
.auteur-show-empty-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; text-align: center; color: var(--text-light); box-shadow: var(--shadow); }
.auteur-show-books-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; }

/* =============================================
   ADMIN : JOURNAUX D'AUDIT
   ============================================= */
.search-row-end { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.search-input-sm-260 { padding: 8px 14px; font-size: 13px; width: 260px; }
.audit-date-cell { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.audit-user-name { font-size: 13.5px; color: var(--text-dark); display: block; }
.text-muted-xs-block { font-size: 11px; color: var(--text-light); }
.audit-user-anon { font-size: 12.5px; color: var(--text-light); font-style: italic; }
.badge-orange-audit { background: rgba(224, 123, 57, 0.1); color: #E07B39; font-size: 10.5px; }
.audit-desc-cell { font-size: 13px; color: var(--text-dark); }
.audit-ip-cell { font-size: 12px; color: var(--text-mid); font-family: monospace; }

/* =============================================
   PAIEMENT : ÉCHEC
   ============================================= */
.paiement-echec-icon-wrap { margin-bottom: 20px; }
.paiement-echec-icon { width: 72px; height: 72px; color: var(--red); margin: 0 auto; display: block; }
.paiement-echec-title { font-size: 26px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.paiement-echec-desc { font-size: 15px; color: var(--text-light); line-height: 1.6; max-width: 520px; margin: 0 auto 24px; }
.paiement-echec-error-box { background: #fee; border: 1px solid #fcc; border-radius: 8px; padding: 12px 16px; color: var(--red); font-size: 13px; margin-bottom: 24px; }
.paiement-echec-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.paiement-echec-btn { padding: 12px 24px; text-decoration: none; }
.paiement-echec-link-muted { padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--text-mid); text-decoration: underline; }
.paiement-support-link { color: var(--green); text-decoration: underline; }

/* =============================================
   LAYOUT ÉDITEUR PARTENAIRE (sidebar + topbar + footer)
   ============================================= */
.brand-sub-editeur { color: #2D6A4F; font-weight: 800; }
.avatar-gradient-editeur { background: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%); color: #fff; }
.role-label-editeur { color: #2D6A4F; font-weight: 700; }
.editeur-footer-bar { padding: 18px 32px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); border-top: 1px solid rgba(226, 217, 200, 0.8); margin-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-mid); }
.footer-left-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-right-group { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.editeur-badge-agree { background: rgba(27, 67, 50, 0.08); color: #1B4332; padding: 4px 11px; border-radius: 20px; font-weight: 700; border: 1px solid rgba(27, 67, 50, 0.15); }

/* =============================================
   LAYOUT PRESTATAIRE ÉDITORIAL (sidebar + topbar + footer)
   ============================================= */
.brand-sub-prestataire { color: #E07B39; font-weight: 800; }
.avatar-gradient-prestataire { background: linear-gradient(135deg, #E07B39 0%, #B5451B 100%); color: #fff; }
.role-label-prestataire { color: #E07B39; font-weight: 700; }
.prestataire-badge-agree { background: rgba(224, 123, 57, 0.08); color: #B5451B; padding: 4px 11px; border-radius: 20px; font-weight: 700; border: 1px solid rgba(224, 123, 57, 0.15); }

/* =============================================
   ÉDITEUR : PUBLIER UNE ŒUVRE (co-édition)
   ============================================= */
.max-w-820-center { max-width: 820px; margin: 0 auto; }
.card-pad-32 { padding: 32px; }
.form-header-block { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.form-header-title { font-size: 20px; font-weight: 800; color: var(--text-dark); margin: 0; }
.form-header-desc { font-size: 13.5px; color: var(--text-light); margin-top: 4px; }
.form-grid-2col-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.form-grid-2col-16-mb28 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.submit-btn-full { width: 100%; justify-content: center; padding: 14px; }

/* =============================================
   PRESTATAIRE : LISTE DES MISSIONS
   ============================================= */
.filter-bar-between { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.filter-form-inline { display: flex; align-items: center; gap: 12px; }
.w-200 { width: 200px; }
.filter-btn-pad { padding: 10px 18px; }
.badge-blue-new { background: rgba(3, 105, 161, 0.1); color: #0369A1; }
.action-link-sm { text-decoration: none; display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12px; }

/* =============================================
   AUTEUR : CATALOGUE DES SERVICES ÉDITORIAUX
   ============================================= */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.service-card { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; transition: transform 0.2s ease; }
.service-badge-available { margin-bottom: 12px; }
.service-title { font-size: 17px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.service-desc { font-size: 13px; color: var(--text-mid); line-height: 1.55; margin-bottom: 18px; }
.service-price { font-size: 20px; font-weight: 900; color: #1B4332; margin-bottom: 16px; }
.service-order-btn { padding: 11px; font-size: 13px; width: 100%; justify-content: center; background: #1B4332; border-radius: 8px; }

/* =============================================
   PAGES SERVICE (détail : accompagnement, publication, couverture, editorial)
   ============================================= */
.service-detail-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.service-detail-inner { max-width: 800px; }
.service-detail-header { margin-bottom: 40px; text-align: center; }
.service-detail-icon { width: 64px; height: 64px; margin: 0 auto 16px; }
.service-detail-icon-img { width: 50%; }
.service-detail-title { font-size: 34px; font-weight: 800; color: var(--text-dark); margin-top: 12px; }
.service-detail-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); font-size: 14.5px; color: var(--text-mid); line-height: 1.7; }
.service-detail-intro { margin-bottom: 24px; }
.service-detail-subtitle { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.service-detail-list { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; list-style: disc; margin-bottom: 32px; }
.service-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================
   PAGES LÉGALES / TEXTE LONG (mentions légales, à propos)
   ============================================= */
.legal-page { background: var(--bg-cream-light); padding: 80px 40px; min-height: 80vh; }
.legal-inner { max-width: 800px; }
.legal-header { margin-bottom: 40px; text-align: center; }
.legal-title { font-size: 38px; font-weight: 800; color: var(--text-dark); }
.legal-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.legal-subtitle { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.legal-para { margin-bottom: 24px; }
.legal-card-145 { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow); font-size: 14.5px; color: var(--text-mid); line-height: 1.7; }
.legal-para-20 { margin-bottom: 20px; }
.legal-subtitle-mt { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-top: 32px; margin-bottom: 12px; }
.legal-list-plain { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; list-style: disc; }

/* =============================================
   AUTEUR : TABLEAU DE BORD
   ============================================= */
.bg-icon-teal { color: #1B4332; }
.bg-icon-brown { color: #8B5E3C; }
.bg-icon-red2 { color: #B5451B; }
.bg-icon-gold { color: #D4A041; }
.price-currency-tiny { font-size: 10px; font-weight: 600; color: var(--text-light); }
.mt-24 { margin-top: 24px; }
.stat-value-20 { font-size: 20px; }
.text-blue-bold { color: #2563EB; }
.text-teal-bold-800 { font-weight: 800; color: #1B4332; }
.avatar-img-56 { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.avatar-circle-56 { width: 56px; height: 56px; font-size: 18px; }
.text-muted-2xs-mt6 { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.back-link-green-hover { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-mid); text-decoration: none; transition: color 0.2s; }
.text-light-normal { font-weight: 400; color: var(--text-light); }
.icon-18 { width: 18px; height: 18px; }

/* =============================================
   PARTIAL : ESPACES-SWITCHER (sidebar)
   ============================================= */
.espaces-switcher-nav { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 8px; padding-top: 12px; }
.nav-link-orange { color: var(--orange, #E07B39); }

/* =============================================
   PARTIAL : CONCOURS (accueil)
   ============================================= */
.concours-empty-panel { background: rgb(28 67 50 / 76%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); padding: 48px; text-align: center; color: rgba(255, 255, 255, 0.75); }
.voir-plus-mt24 { margin-top: 24px; }
.cursor-pointer { cursor: pointer; }
.flex-center-row { display: flex; align-items: center; }
.max-w-700 { max-width: 700px; }
.text-muted-sm { font-size: 13px; color: var(--text-light); }
.text-muted-xs { font-size: 12px; color: var(--text-light); }
.text-dark-xs-bold { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.text-dark-sm-bold { font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.text-dark-sm-bold-block { font-size: 13.5px; color: var(--text-dark); font-weight: 700; display: block; }
.text-muted-sm-top2 { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.empty-text-block { font-size: 13px; color: var(--text-light); text-align: center; padding: 20px; }
.btn-danger-outline { border-color: #ef9a9a; color: #c62828; }
.icon-inline-sm { width: 16px; height: 16px; margin-right: 6px; }
.btn-sm-pad { padding: 10px 20px; font-size: 13px; }
.btn-xs-pad { padding: 4px 10px; font-size: 11px; }
.btn-pad-12 { padding: 12px; }
.btn-pad-10 { padding: 10px; }
.btn-pad-14 { padding: 14px; font-size: 14px; }

/* =============================================
   FORMULAIRES LONGS (inscription, profils étendus...)
   ============================================= */
.form-card { width: 100%; max-width: 580px; }
.form-header-center { text-align: center; margin-bottom: 28px; }
.form-header-center h1 { font-size: 24px; font-weight: 800; color: var(--text-dark); }
.form-header-center p { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.required-brand { color: var(--red); }

.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.form-section-box {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1.5px solid;
}
.form-section-box.variant-auteur { background: #FDFAF5; border-color: #EAE0D0; }
.form-section-box.variant-editeur { background: #F4F8F6; border-color: #C2E2D6; }
.form-section-box.variant-prestataire { background: #F8F6F4; border-color: #E4D8CE; }
.form-section-title {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-section-title.c-green { color: #1B4332; }
.form-section-title.c-brown { color: #5D4037; }
/* champs de formulaire compacts dans les blocs de section (fond blanc, 13px) */
.form-section-box .form-field input,
.form-section-box .form-field select,
.form-section-box .form-field textarea {
  padding: 10px 12px;
  font-size: 13px;
  background: #fff;
}

.form-footer-note {
  margin-top: 28px;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 13px;
  color: var(--text-light);
}
.form-footer-note a { color: var(--green); font-weight: 600; text-decoration: underline; }
.login-logo-center { margin: 0 auto 16px; }
.select-pointer-bold { cursor: pointer; font-weight: 600; }

/* =============================================
   CARTES D'EXPORT (admin/rapports)
   ============================================= */
.export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; }
.export-card { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.export-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.export-card-icon svg { width: 22px; height: 22px; }
.export-card-icon.c-green { background: rgba(27, 67, 50, 0.1); color: #1B4332; }
.export-card-icon.c-gold { background: rgba(212, 160, 65, 0.1); color: #D4A041; }
.export-card-icon.c-orange { background: rgba(224, 123, 57, 0.1); color: #E07B39; }
.export-card-icon.c-brick { background: rgba(181, 69, 27, 0.1); color: #B5451B; }
.export-card h2 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.export-card p { font-size: 13px; color: var(--text-light); line-height: 1.5; margin-bottom: 20px; }
.export-card-actions { display: flex; gap: 10px; flex-direction: column; }
.export-btn { width: 100%; justify-content: center; }
.export-btn-excel.c-green { background: #1B4332; }
.export-btn-excel.c-gold { background: #D4A041; color: #fff; }
.export-btn-excel.c-orange { background: #E07B39; }
.export-btn-excel.c-brick { background: #B5451B; }
.export-btn-pdf { padding: 10px; color: #fff; border: none; cursor: pointer; }
.export-btn-pdf.c-green { background: #2e7d32; }
.export-btn-pdf.c-gold { background: #b27b18; }
.export-btn-pdf.c-orange { background: #b85214; }
.export-btn-pdf.c-brick { background: #882200; }

.loader-panel { background: #fff; padding: 32px 40px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); text-align: center; max-width: 420px; width: 90%; }
.loader-spinner { width: 48px; height: 48px; border: 4px solid #E0D8C8; border-top: 4px solid #1B4332; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 18px; }
.loader-title { font-size: 18px; font-weight: 800; color: #1B4332; margin-bottom: 6px; }
.loader-desc { font-size: 13px; color: #666; margin: 0; }
.toast-icon-lg { font-size: 20px; }

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title svg { width: 20px; height: 20px; }
.card-title.icon-green svg { color: var(--green); }
.card-title.icon-gold svg { color: var(--gold); }

/* Champ de formulaire standard : wrapper + label + input/select/textarea. */
.form-field { margin-bottom: 16px; }
.form-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  display: block;
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13.5px;
}

.alert-success-soft {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.2);
  color: #2e7d32;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
}
.alert-validation-errors {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.2);
  color: #c62828;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 12.5px;
}
.alert-validation-errors ul { list-style: disc; padding-left: 16px; }

.profile-header-card {
  padding: 36px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.profile-avatar-lg {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--green), var(--orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}
.profile-role-pill {
  background: rgba(27, 67, 50, 0.1);
  color: var(--green);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.profile-layout-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}
.empty-block { text-align: center; padding: 40px 20px; }
.empty-block svg { width: 48px; height: 48px; color: var(--border); margin: 0 auto 12px; display: block; }
.empty-block h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.empty-block p { font-size: 13px; color: var(--text-light); margin-bottom: 16px; }