/* ============================================
   ESPACE PRO NOVEXPERT POLYNÉSIE
   Identité : noir & blanc, Franklin Gothic, espace, turquoise par touches
   ============================================ */

:root {
  --noir: #000000;
  --noir-doux: #1a1a1a;
  --blanc: #ffffff;
  --gris-fond: #fafafa;
  --gris-bordure: #e8e8e8;
  --gris-bordure-fonce: #cccccc;
  --gris-texte: #5a5a5a;
  --gris-meta: #8a8a8a;
  --turquoise: #51baad;     /* RÉSERVÉ : ligne Trio-Zinc + accents discrets */
  --turquoise-fonce: #3d9a8e;
  --beige: #f5f0e8;
}

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

html, body {
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--noir-doux);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--noir);
}

/* ============================================
   BANDEAU PROMO HAUT (style Novexpert)
   ============================================ */

.top-banner {
  background: var(--noir);
  color: var(--blanc);
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================
   LOGIN
   ============================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
}

.login-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.login-logo {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--noir);
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 56px;
}

.login-title {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 700;
}

.login-description {
  font-size: 14px;
  color: var(--gris-texte);
  margin-bottom: 36px;
}

.form-group {
  text-align: left;
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1.5px solid var(--noir);
  border-radius: 0;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-bottom-color: var(--turquoise-fonce);
}

.btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: var(--noir);
  color: var(--blanc);
  border: 1.5px solid var(--noir);
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 12px;
}

.btn-primary:hover {
  background: var(--blanc);
  color: var(--noir);
}

.login-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--gris-bordure);
}
.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-meta);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.login-tab.is-active {
  color: var(--noir);
  border-bottom-color: var(--noir);
}
.login-tab:hover { color: var(--noir); }
.login-form { animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.login-footer {
  margin-top: 48px;
  font-size: 12px;
  color: var(--gris-meta);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.login-error {
  background: var(--blanc);
  border-left: 2px solid #c0392b;
  color: #c0392b;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 16px;
  text-align: left;
  letter-spacing: 0.02em;
  display: none;
}

.login-error.visible {
  display: block;
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bordure);
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.brand-logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 0.12em;
}

.brand-tag {
  font-size: 10px;
  color: var(--gris-meta);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--noir-doux);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.nav-link:hover {
  border-bottom-color: var(--turquoise);
  color: var(--noir);
}

.nav-link.active {
  border-bottom-color: var(--noir);
}

.logout-link {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.logout-link:hover {
  color: var(--noir);
}

/* ============================================
   DASHBOARD
   ============================================ */

.page-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px 80px;
}

/* Bandeau placeholder (à retirer) */
.placeholder-banner {
  background: #fff8e1;
  border-left: 3px solid #d4a000;
  color: #5a4500;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
}

/* Welcome */
.welcome {
  margin-bottom: 56px;
  max-width: 800px;
}

.welcome-eyebrow {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}

.welcome-title {
  font-size: 42px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.welcome-date {
  font-size: 13px;
  color: var(--gris-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hero : opération en cours (style éditorial, pas coloré) */
.hero-op {
  border-top: 1px solid var(--noir);
  border-bottom: 1px solid var(--noir);
  padding: 48px 0;
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 14px;
}

.hero-title {
  font-size: 34px;
  margin-bottom: 14px;
  color: var(--noir);
  font-weight: 700;
  line-height: 1.15;
  max-width: 720px;
}

.hero-desc {
  font-size: 15px;
  color: var(--gris-texte);
  max-width: 640px;
  line-height: 1.6;
}

.btn-secondary {
  background: var(--noir);
  color: var(--blanc);
  padding: 14px 28px;
  border: 1.5px solid var(--noir);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  display: inline-block;
}

.btn-secondary:hover {
  background: var(--blanc);
  color: var(--noir);
}

/* ============================================
   BANDEAU VALEURS DE MARQUE (style Novexpert)
   ============================================ */

.brand-values {
  background: var(--gris-fond);
  margin: 0 -32px 64px;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  border-top: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
}

.value-item {
  text-align: center;
  font-size: 11px;
  color: var(--noir-doux);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--noir);
}

.value-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.value-label {
  display: block;
  font-weight: 600;
}

/* ============================================
   CARDS
   ============================================ */

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 14px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 32px;
  font-weight: 700;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 80px;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.card {
  background: var(--blanc);
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 36px 32px;
  transition: background 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  background: var(--gris-fond);
}

.card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 18px;
}

/* Card "Trio Zinc" : seul endroit où turquoise est utilisé */
.card-eyebrow.is-trio-zinc {
  color: var(--turquoise-fonce);
}

.card-title {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.card-text {
  font-size: 14px;
  color: var(--gris-texte);
  margin-bottom: 24px;
  flex: 1;
  line-height: 1.6;
}

.card-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--noir);
  border-bottom: 1px solid var(--noir);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.15s, border-color 0.15s;
}

.card-link:hover {
  color: var(--turquoise-fonce);
  border-bottom-color: var(--turquoise-fonce);
}

/* Carte contact spéciale */
.contact-card {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.contact-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--noir);
}

.contact-role {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================
   ACCÈS RAPIDES (style éditorial liste)
   ============================================ */

.quicklinks-block {
  border-top: 1px solid var(--noir);
  padding-top: 40px;
}

.quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.quicklink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--gris-bordure);
  font-size: 16px;
  font-weight: 600;
  color: var(--noir);
  transition: padding-left 0.2s, color 0.2s;
}

.quicklink:nth-child(odd) {
  padding-right: 24px;
}

.quicklink:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--gris-bordure);
}

.quicklink:hover {
  color: var(--turquoise-fonce);
  padding-left: 8px;
}

.quicklink:nth-child(even):hover {
  padding-left: 32px;
}

.quicklink-arrow {
  font-size: 18px;
  color: var(--gris-meta);
}

/* ============================================
   FOOTER (style Novexpert : statement de marque)
   ============================================ */

.site-footer {
  background: var(--noir);
  color: var(--blanc);
  padding: 56px 32px 24px;
  margin-top: 80px;
}

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

.footer-statement {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.footer-statement-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 14px;
}

.footer-statement-text {
  font-size: 18px;
  line-height: 1.5;
  color: var(--blanc);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.08em;
}

/* ============================================
   LOGO RÉEL (image officielle)
   ============================================ */

.real-logo {
  height: 24px;
  width: auto;
  display: block;
}

.login-real-logo {
  height: 38px;
  width: auto;
  margin: 0 auto 6px;
  display: block;
}

/* ============================================
   CATALOGUE · Navigation par gammes
   ============================================ */

.gamme-nav-wrap {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bordure);
  position: sticky;
  top: 73px;
  z-index: 90;
  margin: 0 -32px 56px;
  padding: 16px 32px;
}

.gamme-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gamme-chip {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--noir);
  border: 1px solid var(--gris-bordure-fonce);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gamme-chip:hover {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

/* ============================================
   CATALOGUE · Sections par gamme
   ============================================ */

.gamme-section {
  margin-bottom: 80px;
  scroll-margin-top: 160px;
}

.gamme-header {
  border-top: 2px solid var(--gamme-color, var(--noir));
  padding-top: 24px;
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.gamme-eyebrow {
  font-size: 11px;
  color: var(--gamme-color, var(--noir));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.gamme-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.gamme-count {
  font-size: 12px;
  color: var(--gris-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Couleurs de gammes (touches discrètes uniquement) */
.gamme-section.trio-zinc { --gamme-color: #51baad; }
.gamme-section.acide-hyaluronique { --gamme-color: #f299b9; }
.gamme-section.vitamine-c { --gamme-color: #ec7802; }
.gamme-section.pro-collagene { --gamme-color: #be2664; }
.gamme-section.pro-melanine { --gamme-color: #cb926a; }
.gamme-section.omegas { --gamme-color: #93B278; }
.gamme-section.polyphenols { --gamme-color: #93B278; }
.gamme-section.magnesium { --gamme-color: #7ab8d6; }
.gamme-section.pro-retinol { --gamme-color: #1a1a1a; }
.gamme-section.complements { --gamme-color: #6b6b6b; }

/* ============================================
   CATALOGUE · Grille produits
   ============================================ */

.gamme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.product-card {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 0 0 22px;
  background: var(--blanc);
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 180px;
}

.product-card:hover {
  background: var(--gris-fond);
}

.product-img-wrap {
  background: var(--gris-fond);
  padding: 18px 12px;
  text-align: center;
  border-bottom: 1px solid var(--gris-bordure);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.product-card:hover .product-img-wrap {
  background: var(--blanc);
}

.product-img {
  max-height: 110px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-img-placeholder {
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
}

.product-card > .product-badges,
.product-card > .product-name,
.product-card > .product-format,
.product-card > .product-price,
.product-card > .product-pitch,
.product-card > .product-routine,
.product-card > .product-meta {
  padding-left: 22px;
  padding-right: 22px;
}

.product-card > .product-badges {
  padding-top: 22px;
}

.product-card.is-arret {
  opacity: 0.55;
}

.product-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 18px;
}

.badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.badge-bestseller {
  color: var(--noir);
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.badge-nouveaute {
  color: var(--turquoise-fonce);
  border-color: var(--turquoise);
  background: var(--blanc);
}

.badge-formulation {
  color: var(--noir);
  border-color: var(--noir);
  background: var(--blanc);
  font-style: italic;
}

.badge-arret {
  color: #999;
  border-color: #ccc;
  background: var(--blanc);
}

.product-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  color: var(--noir);
}

.product-format {
  font-size: 12px;
  color: var(--gris-texte);
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--noir);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.product-price-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-meta);
  margin-right: 8px;
}

.product-pitch {
  font-size: 13px;
  color: var(--noir-doux);
  line-height: 1.5;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 2px solid var(--gamme-color, var(--gris-bordure-fonce));
}

/* Routine "Booster" · variante alternative */
.product-routine.is-booster {
  margin-top: -4px;
  background: var(--blanc);
  border-left-style: dashed;
}

.product-routine.is-booster .product-routine-label {
  color: var(--gris-meta);
}

/* Encart avant/après */
.product-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 14px;
  background: var(--gris-fond);
  padding: 6px;
}

.product-ba-cell {
  position: relative;
}

.product-ba-cell img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

.product-ba-label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.7);
  color: var(--blanc);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 6px;
}

.product-routine {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--gris-fond);
  border-left: 2px solid var(--gamme-color, var(--gris-bordure-fonce));
  font-size: 12px;
  line-height: 1.5;
}

.product-routine-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gamme-color, var(--gris-meta));
  margin-bottom: 4px;
}

.product-routine-list {
  color: var(--noir-doux);
}

.product-routine-list span {
  font-weight: 600;
}

.product-routine-list .plus {
  color: var(--gris-meta);
  font-weight: 400;
  margin: 0 4px;
}

.product-meta {
  margin-top: auto;
  font-size: 10px;
  color: var(--gris-meta);
  letter-spacing: 0.04em;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  line-height: 1.5;
}

.product-meta-code {
  display: block;
  margin-bottom: 2px;
}

/* ============================================
   ROUTINES
   ============================================ */

.routine-block {
  border-top: 1px solid var(--noir);
  padding: 56px 0;
}

.routine-block:last-of-type {
  border-bottom: 1px solid var(--noir);
}

.routine-header {
  margin-bottom: 36px;
  max-width: 760px;
}

.routine-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--routine-color, var(--gris-meta));
  font-weight: 700;
  margin-bottom: 12px;
}

.routine-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.routine-target {
  font-size: 14px;
  color: var(--gris-texte);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.routine-benefit {
  font-size: 16px;
  color: var(--gris-texte);
  line-height: 1.55;
  max-width: 680px;
}

.routine-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.routine-step {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 28px 24px;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
}

.step-number {
  font-size: 56px;
  font-weight: 700;
  color: var(--routine-color, var(--turquoise));
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}

.step-action {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 8px;
}

.step-product {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  color: var(--noir);
}

.step-format {
  font-size: 12px;
  color: var(--gris-texte);
  margin-bottom: 16px;
}

.step-when {
  margin-top: auto;
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--gris-bordure);
  padding-top: 12px;
}

.routine-conseil {
  margin-top: 28px;
  font-size: 14px;
  color: var(--noir-doux);
  font-style: italic;
  padding: 18px 22px;
  background: var(--gris-fond);
  border-left: 3px solid var(--routine-color, var(--turquoise));
  line-height: 1.6;
  max-width: 760px;
}

.routine-conseil strong {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
  margin-bottom: 6px;
  color: var(--gris-meta);
}

/* Couleurs par routine */
.routine-block.matin { --routine-color: #ec7802; }       /* orange Vit C */
.routine-block.soir { --routine-color: #be2664; }        /* rose pro-collagene */
.routine-block.imperfections { --routine-color: #51baad; } /* turquoise trio-zinc */
.routine-block.anti-age { --routine-color: #be2664; }    /* rose pro-collagene */
.routine-block.anti-taches { --routine-color: #93B278; } /* vert polyphenols */
.routine-block.sensibles { --routine-color: #7ab8d6; }   /* bleu magnesium */

/* ============================================
   RITUELS PAR TYPE DE PEAU (officiel Novexpert)
   ============================================ */

.peau-section {
  border-top: 2px solid var(--peau-color, var(--noir));
  padding-top: 40px;
  margin-bottom: 72px;
  scroll-margin-top: 100px;
}

.peau-header {
  margin-bottom: 32px;
  max-width: 800px;
}

.peau-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peau-color, var(--gris-meta));
  font-weight: 700;
  margin-bottom: 12px;
}

.peau-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.signes-bloc {
  background: var(--gris-fond);
  padding: 20px 24px;
  margin: 20px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-left: 3px solid var(--peau-color, var(--gris-bordure-fonce));
}

.signes-bloc-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris-meta);
  margin-bottom: 10px;
}

.signes-bloc ul {
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--noir-doux);
}

.signes-bloc ul li::before {
  content: "·  ";
  color: var(--peau-color, var(--gris-meta));
  font-weight: 700;
}

.rituel-moment {
  margin-bottom: 32px;
}

.rituel-moment-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--noir);
  font-weight: 700;
  border-top: 1px solid var(--gris-bordure);
  padding-top: 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rituel-moment-label .moment-meta {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gris-meta);
  font-weight: 500;
  text-transform: none;
}

.rituel-steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.rituel-step-card {
  border: 1px solid var(--gris-bordure);
  padding: 18px 16px;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.rituel-step-card:hover {
  border-color: var(--peau-color, var(--gris-bordure-fonce));
}

.rituel-step-order {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--peau-color, var(--turquoise-fonce));
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.rituel-step-product {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--noir);
}

.rituel-step-condition {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.04em;
  font-style: italic;
  margin-bottom: 6px;
}

.rituel-step-or {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  margin: 8px 0;
  font-weight: 700;
}

.rituel-variante {
  margin-top: 12px;
  font-size: 12px;
  color: var(--noir-doux);
  padding: 10px 14px;
  background: var(--gris-fond);
  border-left: 2px solid var(--peau-color, var(--gris-bordure-fonce));
  line-height: 1.5;
}

.rituel-variante strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-meta);
  margin-bottom: 4px;
}

/* Couleurs par type de peau */
.peau-section.tres-seche { --peau-color: #6d6d6d; }
.peau-section.seche { --peau-color: #cb926a; }            /* terracotta */
.peau-section.normale { --peau-color: #be2664; }          /* rose foncé */
.peau-section.mixte { --peau-color: #ec7802; }            /* orange Vit C */
.peau-section.grasse { --peau-color: #51baad; }           /* turquoise Trio-Zinc */
.peau-section.sensible { --peau-color: #7ab8d6; }         /* bleu Magnésium */
.peau-section.taches-brunes { --peau-color: #93B278; }    /* vert Polyphénols */
.peau-section.pathologies { --peau-color: #1a1a1a; }      /* noir */

/* Sous-section pathologies */
.pathologie-bloc {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--gris-bordure);
}

.pathologie-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.pathologie-sub {
  font-size: 12px;
  color: var(--gris-meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Sticky nav adaptée aux types de peau */
.peau-nav-wrap {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bordure);
  position: sticky;
  top: 73px;
  z-index: 90;
  margin: 0 -32px 48px;
  padding: 16px 32px;
}

.peau-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.peau-chip {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--noir);
  border: 1px solid var(--gris-bordure-fonce);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.peau-chip:hover {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

/* ============================================
   SUPPORTS · Routines booster & Comparaisons
   ============================================ */

.booster-routine-card {
  border: 1px solid var(--gris-bordure);
  padding: 22px;
  background: var(--blanc);
  margin-bottom: 16px;
}

.booster-routine-cible {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--turquoise-fonce);
  margin-bottom: 6px;
}

.booster-routine-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.booster-routine-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.booster-routine-products.is-2 {
  grid-template-columns: repeat(2, 1fr);
}

.booster-product-mini {
  background: var(--gris-fond);
  padding: 12px 10px;
  text-align: center;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.booster-product-mini img {
  max-height: 50px;
  width: auto;
}

.booster-product-mini-name {
  font-weight: 700;
  color: var(--noir);
  line-height: 1.3;
}

.booster-routine-desc {
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.5;
}

/* Comparaisons produit */
.comparison-block {
  margin-bottom: 36px;
  border-top: 1px solid var(--gris-bordure);
  padding-top: 24px;
}

.comparison-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 6px;
}

.comparison-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.comparison-grid {
  display: grid;
  gap: 12px;
}

.comparison-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.comparison-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.comparison-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.comparison-cell {
  background: var(--gris-fond);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comparison-cell-img {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.comparison-cell-img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.comparison-cell-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--noir);
  line-height: 1.3;
  text-align: center;
}

.comparison-cell-target {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--gris-meta);
  text-align: center;
}

.comparison-cell-features {
  font-size: 11px;
  color: var(--noir-doux);
  line-height: 1.45;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gris-bordure);
}

@media (max-width: 800px) {
  .booster-routine-products,
  .booster-routine-products.is-2 {
    grid-template-columns: 1fr;
  }
  .comparison-grid.cols-3,
  .comparison-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   FORMATION · Système points (widget compact)
   ============================================ */

/* Widget compact en haut à droite, sticky */
.points-widget {
  position: fixed;
  top: 140px;
  right: 24px;
  z-index: 90;
  background: var(--noir);
  color: var(--blanc);
  padding: 14px 22px;
  border-radius: 28px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  font-family: inherit;
  min-width: 180px;
}

.points-widget-user {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.75;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.points-widget-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
}

.points-widget-pts {
  font-size: 18px;
  letter-spacing: -0.01em;
}

.points-widget-pts::after {
  content: " pts";
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-left: 2px;
}

.points-widget-sep {
  opacity: 0.5;
}

.points-widget-credit {
  font-size: 14px;
  font-weight: 600;
}

.points-widget-limit {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-top: 3px;
  font-weight: 500;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .points-widget {
    top: auto;
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    border-radius: 24px;
    min-width: 140px;
  }
  .points-widget-pts { font-size: 16px; }
  .points-widget-credit { font-size: 12px; }
  .points-widget-limit { font-size: 9px; }
}

/* Bloc Défi du mois (mis en avant, effet nouveauté) */
.defi-block {
  position: relative;
  background: linear-gradient(135deg, #f5fbf5 0%, #fffefb 100%);
  border: 1.5px solid #93B278;
  padding: 28px 32px 32px;
  margin-bottom: 56px;
}

.defi-badge-nouveau {
  position: absolute;
  top: -12px;
  left: 24px;
  background: #93B278;
  color: var(--blanc);
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* === Anciens styles formation (legacy, conservés au cas où) === */

.form-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  padding: 32px 0;
  margin-bottom: 48px;
}

.form-stats {
  display: flex;
  gap: 32px;
  align-items: center;
}

.form-stat {
  flex: 1;
}

.form-stat-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--noir);
  margin-bottom: 6px;
}

.form-stat-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
}

.form-prochain {
  background: var(--gris-fond);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-prochain-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 8px;
}

.form-prochain-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
}

.form-prochain-desc {
  font-size: 13px;
  color: var(--gris-texte);
  margin-bottom: 16px;
}

.form-cta {
  display: inline-block;
  background: var(--noir);
  color: var(--blanc);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  align-self: flex-start;
  border: 1.5px solid var(--noir);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.form-cta:hover {
  background: var(--blanc);
  color: var(--noir);
}

/* Paliers de récompenses */
.paliers-block {
  margin-bottom: 56px;
}

.paliers-progress {
  height: 6px;
  background: var(--gris-bordure);
  position: relative;
  margin: 20px 0 36px;
}

.paliers-progress-fill {
  height: 100%;
  background: var(--noir);
  transition: width 0.4s;
}

.paliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.palier-card {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 24px 22px;
  background: var(--blanc);
  text-align: center;
}

.palier-card.is-unlocked {
  background: #f0f9f7;
  border-color: var(--turquoise);
}

.palier-card.is-current {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.palier-card.is-current .palier-points,
.palier-card.is-current .palier-status {
  color: var(--blanc);
}

.palier-points {
  font-size: 32px;
  font-weight: 700;
  color: var(--noir);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.palier-points small {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gris-meta);
  font-weight: 600;
  text-transform: uppercase;
}

.palier-card.is-current .palier-points small {
  color: rgba(255,255,255,0.6);
}

.palier-product {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: inherit;
}

.palier-meta {
  font-size: 11px;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

.palier-card.is-current .palier-meta {
  color: rgba(255,255,255,0.7);
}

.palier-status {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid var(--gris-bordure);
  color: var(--gris-meta);
}

.palier-card.is-unlocked .palier-status {
  color: var(--turquoise-fonce);
  border-top-color: var(--turquoise);
}

/* Modules grid */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
  margin-bottom: 48px;
}

.module-card {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 22px 20px;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.module-card:hover {
  background: var(--gris-fond);
}

.module-card.is-locked {
  cursor: default;
  opacity: 0.5;
}

.module-card.is-locked:hover {
  background: var(--blanc);
}

.module-card.is-done {
  background: #f0f9f7;
}

.module-mois {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
}

.module-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 2px;
}

.module-gamme {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gris-texte);
  margin-bottom: 8px;
}

.module-cta {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 10px;
  border-top: 1px solid var(--gris-bordure);
}

.module-card.is-available .module-cta {
  color: var(--noir);
}

.module-card.is-done .module-cta {
  color: var(--turquoise-fonce);
}

.module-card.is-locked .module-cta {
  color: var(--gris-meta);
}

.module-card.is-current {
  border-top: 3px solid var(--noir);
  padding-top: 19px;
}

/* Quizz overlay */
.quizz-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.quizz-overlay.is-open {
  display: flex;
}

.quizz-modal {
  background: var(--blanc);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.quizz-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris-meta);
  line-height: 1;
}

.quizz-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--turquoise-fonce);
  font-weight: 700;
  margin-bottom: 8px;
}

.quizz-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.15;
}

.quizz-progress {
  font-size: 12px;
  color: var(--gris-meta);
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}

.question-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.4;
}

.answer-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--blanc);
  border: 1.5px solid var(--gris-bordure);
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.answer-option:hover {
  background: var(--gris-fond);
  border-color: var(--gris-bordure-fonce);
}

.answer-option.is-selected {
  border-color: var(--noir);
  background: var(--gris-fond);
}

.answer-option.is-correct {
  background: #d4edda;
  border-color: #28a745;
}

.answer-option.is-wrong {
  background: #f8d7da;
  border-color: #dc3545;
}

.quizz-feedback {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--gris-fond);
  border-left: 3px solid var(--turquoise);
  font-size: 13px;
  line-height: 1.55;
  display: none;
}

.quizz-multi-badge {
  display: inline-block;
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 6px 0 14px;
  border-radius: 2px;
}

/* Chrono question */
.quizz-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.chrono-badge {
  background: var(--noir);
  color: var(--blanc);
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s;
}
.chrono-badge.is-urgent {
  background: #c0392b;
  animation: chrono-pulse 0.7s infinite alternate;
}
@keyframes chrono-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* ============================================
   VENTES · Status + tickets + attestations
   ============================================ */

.ventes-status-card {
  padding: 24px 28px;
  background: var(--gris-fond);
  border-left: 4px solid var(--noir);
  margin-bottom: 24px;
}

.ventes-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 0 18px;
}

.ventes-status-block {
  text-align: left;
}

.ventes-status-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 6px;
}

.ventes-status-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--noir);
}

.ventes-status-message {
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 8px;
}

.ventes-status-message.is-ok {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
  color: #1b5e20;
}

.ventes-status-message.is-bloque {
  background: #fff3e0;
  border-left: 3px solid #f57c00;
  color: #a85700;
}

.ventes-status-pending {
  margin-top: 10px;
  padding: 10px 16px;
  font-size: 13px;
  background: #fffde7;
  border-left: 3px solid #fbc02d;
  color: #8a6500;
}

@media (max-width: 700px) {
  .ventes-status-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .ventes-status-value { font-size: 28px; }
}

.quizz-feedback.is-visible {
  display: block;
}

.quizz-feedback strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--gris-meta);
}

.quizz-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.quizz-btn {
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid var(--noir);
  background: var(--noir);
  color: var(--blanc);
  cursor: pointer;
  font-family: inherit;
}

.quizz-btn:hover {
  background: var(--blanc);
  color: var(--noir);
}

.quizz-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quizz-btn.secondary {
  background: var(--blanc);
  color: var(--noir);
}

.quizz-btn.secondary:hover {
  background: var(--noir);
  color: var(--blanc);
}

/* Quizz result */
.quizz-result {
  text-align: center;
}

.quizz-result-score {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 16px 0 8px;
}

.quizz-result-label {
  font-size: 13px;
  color: var(--gris-texte);
  margin-bottom: 24px;
}

.quizz-result-points {
  background: var(--noir);
  color: var(--blanc);
  display: inline-block;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

/* Toast notif */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--noir);
  color: var(--blanc);
  padding: 14px 24px;
  font-size: 13px;
  letter-spacing: 0.05em;
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
}

@media (max-width: 800px) {
  .form-hero {
    grid-template-columns: 1fr;
  }
  .form-stats {
    gap: 16px;
  }
  .form-stat-value {
    font-size: 36px;
  }
  .paliers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .modules-grid {
    grid-template-columns: 1fr;
  }
  .quizz-modal {
    padding: 28px 20px;
  }
}

/* ============================================
   CONTACT + STORE LOCATOR
   ============================================ */

.contact-hero {
  display: grid;
  grid-template-columns: 200px 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  padding: 40px 0;
  margin-bottom: 48px;
}

.contact-avatar-big {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 0.02em;
}

.contact-info-big .name {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.contact-info-big .role {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
  margin-bottom: 18px;
}

.contact-info-big .society {
  font-size: 13px;
  color: var(--gris-texte);
  margin-bottom: 24px;
}

.contact-channels {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-channels a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1.5px solid var(--noir);
  color: var(--noir);
  background: var(--blanc);
  transition: background 0.2s, color 0.2s;
}

.contact-channels a:hover {
  background: var(--noir);
  color: var(--blanc);
}

.contact-channels a.primary {
  background: var(--noir);
  color: var(--blanc);
}

.contact-channels a.primary:hover {
  background: var(--blanc);
  color: var(--noir);
}

/* Store locator */
.store-section {
  margin-top: 56px;
}

.ile-block {
  border-top: 1px solid var(--noir);
  padding-top: 24px;
  margin-bottom: 40px;
}

.ile-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.ile-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ile-count {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
}

.pharmacie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.pharmacie-card {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 22px 20px;
  background: var(--blanc);
  transition: background 0.15s;
}

.pharmacie-card:hover {
  background: var(--gris-fond);
}

.pharmacie-commune {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 6px;
}

.pharmacie-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 4px;
}

.pharmacie-location {
  font-size: 12px;
  color: var(--gris-texte);
  line-height: 1.4;
}

@media (max-width: 800px) {
  .contact-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .contact-avatar-big {
    margin: 0 auto;
  }
  .contact-channels {
    justify-content: center;
  }
  .pharmacie-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SUPPORTS · Téléchargements & posts
   ============================================ */

.support-section {
  margin-bottom: 56px;
}

.support-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 10px;
}

.support-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.support-desc {
  font-size: 14px;
  color: var(--gris-texte);
  margin-bottom: 24px;
  line-height: 1.55;
  max-width: 700px;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
}

.download-card {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--blanc);
  transition: background 0.15s;
}

.download-card:hover {
  background: var(--gris-fond);
}

.download-icon {
  font-size: 24px;
  color: var(--noir);
  margin-bottom: 4px;
  line-height: 1;
}

.download-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--noir);
  line-height: 1.3;
}

.download-meta {
  font-size: 11px;
  color: var(--gris-meta);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  flex: 1;
}

.download-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--noir);
  border-bottom: 1px solid var(--noir);
  align-self: flex-start;
  padding-bottom: 2px;
}

/* Posts du plan éditorial */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.post-card {
  border: 1px solid var(--gris-bordure);
  padding: 22px;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gris-bordure);
}

.post-theme {
  font-size: 15px;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 2px;
}

.post-produit {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--gris-texte);
  margin-bottom: 12px;
}

.post-content {
  font-size: 13px;
  color: var(--noir-doux);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--gris-fond);
  padding: 14px;
  border-left: 2px solid var(--turquoise);
  margin-bottom: 10px;
}

.post-hashtags {
  font-size: 11px;
  color: var(--turquoise-fonce);
  letter-spacing: 0.03em;
}

@media (max-width: 800px) {
  .download-grid {
    grid-template-columns: 1fr;
  }
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   NOUVEAUTÉS
   ============================================ */

.nouveaute-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--noir);
  align-items: start;
}

.nouveaute-block:last-of-type {
  border-bottom: 1px solid var(--noir);
}

.nouveaute-img-wrap {
  background: var(--gris-fond);
  padding: 32px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nouveaute-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nouveaute-content {
  padding-top: 8px;
}

.nouveaute-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gamme-color, var(--gris-meta));
  font-weight: 700;
  margin-bottom: 10px;
}

.nouveaute-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.nouveaute-pitch {
  font-size: 16px;
  color: var(--noir-doux);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 620px;
}

.nouveaute-claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  border-top: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 20px 0;
}

.claim {
  text-align: center;
}

.claim-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--gamme-color, var(--noir));
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.claim-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gris-texte);
  line-height: 1.35;
}

.nouveaute-pitch-comptoir {
  background: var(--gris-fond);
  padding: 18px 22px;
  border-left: 3px solid var(--gamme-color, var(--turquoise));
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: var(--noir-doux);
}

.nouveaute-pitch-comptoir strong {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gris-meta);
  display: block;
  margin-bottom: 6px;
}

.nouveaute-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nouveaute-actions a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1.5px solid var(--noir);
  color: var(--noir);
  background: var(--blanc);
  transition: background 0.2s, color 0.2s;
}

.nouveaute-actions a:hover {
  background: var(--noir);
  color: var(--blanc);
}

.nouveaute-actions a.primary {
  background: var(--noir);
  color: var(--blanc);
}

.nouveaute-actions a.primary:hover {
  background: var(--blanc);
  color: var(--noir);
}

.nouveaute-block.trio-zinc { --gamme-color: #51baad; }
.nouveaute-block.pro-retinol { --gamme-color: #1a1a1a; }
.nouveaute-block.complements { --gamme-color: #be2664; }

@media (max-width: 800px) {
  .nouveaute-block {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .nouveaute-img-wrap {
    height: 240px;
  }
  .nouveaute-title {
    font-size: 24px;
  }
  .nouveaute-claims {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================
   PLAN TRADE · Timeline annuelle
   ============================================ */

.trimestre-section {
  border-top: 2px solid var(--noir);
  padding-top: 28px;
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}

.trimestre-header {
  margin-bottom: 28px;
}

.trimestre-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 8px;
}

.trimestre-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.operation-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.operation-card {
  border-top: 1px solid var(--gris-bordure);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 130px 140px 1fr 160px;
  gap: 24px;
  align-items: start;
}

.operation-card:last-child {
  border-bottom: 1px solid var(--gris-bordure);
}

.operation-mois {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--noir);
  padding-top: 4px;
}

.operation-type {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid var(--gris-bordure-fonce);
  display: inline-block;
  white-space: nowrap;
}

.operation-type.is-op {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.operation-type.is-challenge {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--noir);
}

.operation-content {
  padding-right: 16px;
}

.operation-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
}

.operation-mecanique {
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.55;
}

.operation-statut {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  text-align: center;
  align-self: start;
  white-space: nowrap;
}

.operation-statut.is-passed {
  background: var(--gris-fond);
  color: var(--gris-meta);
}

.operation-statut.is-current {
  background: var(--turquoise);
  color: var(--blanc);
}

.operation-statut.is-upcoming {
  background: var(--blanc);
  color: var(--noir);
  border: 1px solid var(--noir);
}

/* Section mécanique générale */
.mecanique-explain {
  background: var(--gris-fond);
  padding: 32px;
  margin: 48px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.mecanique-bloc h4 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mecanique-bloc p {
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.6;
}

@media (max-width: 800px) {
  .operation-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .operation-content {
    padding-right: 0;
  }
  .mecanique-explain {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   BLOC "Actualités produit" · info changement
   ============================================ */

.actu-produit {
  background: var(--gris-fond);
  border-left: 4px solid var(--actu-color, var(--turquoise));
  padding: 20px 24px;
  margin: 32px 0 40px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  align-items: center;
}

.actu-produit.is-vit-c { --actu-color: #ec7802; }
.actu-produit.is-trio-zinc { --actu-color: #51baad; }
.actu-produit.is-ah { --actu-color: #f299b9; }
.actu-produit.is-pro-collagene { --actu-color: #be2664; }

.actu-produit-photo {
  width: 90px;
  height: 90px;
  background: var(--blanc);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gris-bordure);
}

.actu-produit-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.actu-produit-content {
  padding-top: 2px;
}

.actu-produit-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--actu-color, var(--turquoise-fonce));
  margin-bottom: 4px;
}

.actu-produit-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.actu-produit-desc {
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.55;
}

.actu-produit-codes {
  margin-top: 10px;
  font-size: 11px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--noir-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.actu-produit-codes div {
  display: flex;
  flex-direction: column;
}

.actu-produit-codes-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--gris-meta);
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', Arial, sans-serif;
  margin-bottom: 2px;
  font-weight: 600;
}

/* ============================================
   BLOC "Prochaine opération" · highlight illustré
   ============================================ */

.next-op-highlight {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  padding: 32px;
  margin: 24px 0 48px;
  align-items: center;
  background: var(--blanc);
}

.next-op-text {
  max-width: 480px;
}

.next-op-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 10px;
}

.next-op-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 10px;
}

.next-op-desc {
  font-size: 14px;
  color: var(--gris-texte);
  line-height: 1.55;
  margin-bottom: 16px;
}

.next-op-meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 600;
}

.next-op-img {
  width: 360px;
  height: 180px;
  flex-shrink: 0;
  position: relative;
}

.next-op-img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.next-op-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  height: 100%;
}

.next-op-img-cell {
  background: var(--gris-fond);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.next-op-img-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.next-op-img-cell-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gris-meta);
  font-weight: 700;
  background: rgba(255,255,255,0.9);
  padding: 2px 4px;
}

.next-op-badge {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  z-index: 2;
}

.next-op-badge-big {
  font-size: 20px;
  line-height: 1;
}

.next-op-badge-small {
  font-size: 7px;
  letter-spacing: 0.15em;
  margin-top: 3px;
}

@media (max-width: 800px) {
  .next-op-highlight {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .next-op-img {
    width: 100%;
    height: 140px;
  }
  .next-op-title {
    font-size: 22px;
  }
}

/* ============================================
   BANDEAU BDC TÉLÉCHARGEMENT (CTA proéminent)
   ============================================ */

.bdc-band {
  background: var(--noir);
  color: var(--blanc);
  margin: 8px 0 24px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bdc-band-text {
  font-size: 13px;
  letter-spacing: 0.05em;
}

.bdc-band-text strong {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,0.7);
}

.bdc-band-cta {
  background: var(--blanc);
  color: var(--noir);
  padding: 8px 20px;
  border: 1.5px solid var(--blanc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.bdc-band-cta:hover {
  background: transparent;
  color: var(--blanc);
}

.page-wrap > .bdc-band:first-child {
  margin-top: -32px;
}

/* ============================================
   HERO IMAGE BANNER (visuel pleine largeur)
   ============================================ */

.hero-banner {
  margin: 0 -32px 48px;
  overflow: hidden;
  position: relative;
  height: 280px;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloc dashboard avec image lifestyle en haut */
.dashboard-block-img {
  margin: -28px -28px 24px;
  height: 140px;
  overflow: hidden;
  border-bottom: 1px solid var(--gris-bordure);
}

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

@media (max-width: 700px) {
  .hero-banner {
    height: 180px;
    margin: 0 -20px 32px;
  }
  .bdc-band {
    padding: 20px;
  }
}

/* ============================================
   DASHBOARD ACCUEIL
   ============================================ */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--gris-bordure);
  border-left: 1px solid var(--gris-bordure);
  margin-bottom: 24px;
}

.dashboard-block {
  border-right: 1px solid var(--gris-bordure);
  border-bottom: 1px solid var(--gris-bordure);
  padding: 28px 28px;
  background: var(--blanc);
}

.dashboard-block-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-meta);
  font-weight: 700;
  margin-bottom: 16px;
}

.event-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--noir);
  font-weight: 700;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--gris-bordure);
}

.event-section-label:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.event-section-label.is-current::before {
  content: "● ";
  color: var(--turquoise);
  margin-right: 4px;
}

.event-list {
  list-style: none;
}

.event-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--gris-bordure);
  gap: 12px;
  align-items: center;
}

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

.event-item.is-current .event-label {
  font-weight: 700;
  color: var(--noir);
}

.event-period {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gris-meta);
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
  min-width: 70px;
}

.event-label {
  flex: 1;
  color: var(--noir-doux);
  line-height: 1.3;
}

.event-empty {
  font-size: 12px;
  color: var(--gris-meta);
  font-style: italic;
  padding: 10px 0;
}

/* Ruptures */
.rupture-list {
  font-size: 13px;
}

.rupture-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-bordure);
  align-items: center;
}

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

.rupture-product {
  font-weight: 600;
  color: var(--noir);
  font-size: 13px;
}

.rupture-product-meta {
  font-size: 11px;
  color: var(--gris-meta);
  margin-top: 2px;
}

.rupture-status {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--gris-bordure-fonce);
  font-weight: 700;
  white-space: nowrap;
}

.rupture-status.is-rupture {
  background: #c0392b;
  color: var(--blanc);
  border-color: #c0392b;
}

.rupture-status.is-tension {
  background: #d4a000;
  color: var(--blanc);
  border-color: #d4a000;
}

.rupture-status.is-arrival {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.rupture-eta {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gris-meta);
  text-transform: uppercase;
  margin-top: 4px;
}

.rupture-empty {
  font-size: 12px;
  color: var(--gris-meta);
  font-style: italic;
  padding: 14px 0;
  text-align: center;
}

/* Focus produit */
.focus-block {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.focus-block .dashboard-block-eyebrow {
  color: rgba(255,255,255,0.6);
}

.focus-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--blanc);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.focus-format {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}

.focus-pitch {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 18px;
  line-height: 1.55;
}

.focus-cta {
  background: var(--blanc);
  color: var(--noir);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  border: 1.5px solid var(--blanc);
  transition: background 0.2s, color 0.2s;
}

.focus-cta:hover {
  background: transparent;
  color: var(--blanc);
}

.focus-meta {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
  font-weight: 600;
}

.focus-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.focus-img-wrap {
  background: var(--blanc);
  padding: 14px;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.focus-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 700px) {
  .focus-inner {
    grid-template-columns: 1fr;
  }
  .focus-img-wrap {
    order: -1;
    width: 100%;
    height: 160px;
  }
}

/* ============================================
   ACCUEIL · image hero produit (si dispo)
   ============================================ */

.card-img-wrap {
  margin: -36px -32px 20px;
  padding: 32px;
  background: var(--gris-fond);
  text-align: center;
  border-bottom: 1px solid var(--gris-bordure);
}

.card-img {
  max-width: 120px;
  height: auto;
  margin: 0 auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .brand-values {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
}

@media (max-width: 900px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 16px;
  }
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 0;
  }
  .nav-link {
    padding: 6px 10px;
    font-size: 11px;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .quicklinks {
    grid-template-columns: 1fr;
  }
  .quicklink:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
  .quicklink:nth-child(odd) {
    padding-right: 0;
  }
  .page-wrap {
    padding: 40px 20px 60px;
  }
  .welcome-title {
    font-size: 30px;
  }
  .hero-op {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .hero-title {
    font-size: 24px;
  }
  .brand-values {
    margin: 0 -20px 48px;
    padding: 28px 20px;
  }
  .gamme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gamme-nav-wrap {
    margin: 0 -20px 40px;
    padding: 12px 20px;
    top: auto;
    position: relative;
  }
  .gamme-title {
    font-size: 22px;
  }
  .routine-steps {
    grid-template-columns: 1fr;
  }
  .routine-title {
    font-size: 24px;
  }
  .step-number {
    font-size: 40px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .focus-title {
    font-size: 22px;
  }
  .signes-bloc {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .peau-title {
    font-size: 26px;
  }
  .peau-nav-wrap {
    margin: 0 -20px 32px;
    padding: 12px 20px;
    top: auto;
    position: relative;
  }
}

@media (max-width: 560px) {
  .brand-values {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-tag {
    display: none;
  }
  .login-card {
    padding: 0 8px;
  }
  .gamme-grid {
    grid-template-columns: 1fr;
  }
}