/* ════════════════════════════════════════════════════════════
   🌴 Tropical Urban — Shipping Premium Skin (v2 · palette source)
   ------------------------------------------------------------
   Réalignement sur la palette officielle de style.css :
     --primary-color:#2ECC71   --secondary-color:#D4A82E
     --dark-color:#2C3E50      --light-bg:#F8F9FA
     (dark mode)  --bg-primary:#0A0A0A  --bg-card:#1E1E1E
                  --text-primary:#FFF   --text-secondary:#B8B8B8
                  --border-color:#333   --primary-dark:#1E8449
   Scope : body[data-page="shipping"]
   Mode clair par défaut, mode sombre via body.dark-mode[data-page="shipping"].
   Neutralise proprement les styles inline et la <style> locale dark-mode.
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TOKENS TEXTE THÈME-AWARE (toujours utiliser ces variables)
   --tu-on-dark   : texte posé sur un fond sombre/coloré (toujours blanc)
   --tu-on-light  : texte posé sur un fond clair (adapte en dark mode)
   Ne JAMAIS utiliser "color: white" ou "#fff" en dur pour du contenu
   susceptible d'apparaître sur un fond variable.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════ MODE CLAIR (palette style.css) ═══════════════
   Contrastes réhaussés :
   - Bordures passées de rgba(.10)/(.18) → rgba(.14)/(.26) pour que les
     cartes se détachent du fond --light-bg #F8F9FA.
   - --tu-muted passé de #7F8C8D (ratio 3.7:1) → #5A6C7B (ratio 5.6:1)
     pour respecter WCAG AA sur texte secondaire.
   - Fond de cartes légèrement rehaussé via gradient subtle pour lisibilité.
   ═══════════════════════════════════════════════════════════════ */
body[data-page="shipping"] {
  --tu-bg:           var(--light-bg);                  /* #F8F9FA */
  --tu-surface:      var(--white);                     /* #FFFFFF */
  --tu-line:         rgba(44,62,80,.14);               /* dark-color @ 14% */
  --tu-line-strong:  rgba(44,62,80,.26);               /* dark-color @ 26% */
  --tu-fg:           var(--dark-color);                /* #2C3E50 — texte principal */
  --tu-fg-soft:      #34495E;                          /* texte secondaire dark */
  --tu-muted:        #5A6C7B;                          /* AA-compliant sur #F8F9FA */
  --tu-accent:       var(--primary-color);             /* #2ECC71 — fonds/glyphes */
  --tu-accent-soft:  #1E8449;                          /* accent-dark */
  /* ─────────────────────────────────────────────────────────────
     TEXTE-ACCENT THEME-AWARE  (CAUSE RACINE DU BUG "textes clairs")
     ─────────────────────────────────────────────────────────────
     --primary-color #2ECC71 a un contraste de 2.1:1 sur fond blanc
     (WCAG AA exige 4.5:1) → tout texte vert en mode clair semblait
     délavé / quasi invisible. On isole donc le vert "texte" dans un
     token qui bascule automatiquement par thème :
       - Light : #1E8449 (AA 4.72:1 sur #FFFFFF)
       - Dark  : #4ADE80 (AAA 9.57:1 sur #1E1E1E)
     Utilisé partout où `color:` porte du contenu lisible. Le
     #2ECC71 reste disponible via --tu-accent pour les fonds,
     borders, gradients et icônes décoratives. */
  --tu-accent-text:       #1E8449;
  --tu-accent-text-hover: #145F36;                     /* AA 5.7:1 */
  --tu-hero-start:   var(--dark-color);
  --tu-hero-mid:     #1E3A2E;
  --tu-hero-end:     var(--primary-color);
  /* Tokens texte-sur-fond-coloré (toujours blanc) vs texte-sur-fond-clair */
  --tu-on-dark:      #FFFFFF;                          /* fond sombre/gradient vert */
  --tu-on-light:     var(--dark-color);                /* fond clair → texte sombre */
  --tu-on-accent:    #FFFFFF;
  --tu-shadow-card:  var(--shadow-md);                 /* 0 4px 10px rgba(0,0,0,.15) */
  --tu-shadow-soft:  var(--shadow-sm);
  --tu-shadow-strong:var(--shadow-lg);

  background: var(--tu-bg);
  color: var(--tu-fg);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════ MODE SOMBRE (palette style.css dark) ═══════════════ */
body.dark-mode[data-page="shipping"] {
  --tu-bg:           var(--bg-primary);
  --tu-surface:      var(--bg-card);
  --tu-line:         var(--border-color);
  --tu-line-strong:  rgba(255,255,255,.18);
  --tu-fg:           var(--text-primary);
  --tu-fg-soft:      var(--text-secondary);
  --tu-muted:        var(--text-muted);
  --tu-accent:       var(--primary-color);
  --tu-accent-soft:  var(--primary-dark);
  /* Texte-accent : vert plus clair qui tient sur fond sombre */
  --tu-accent-text:       #4ADE80;                     /* AAA 9.57:1 sur #1E1E1E */
  --tu-accent-text-hover: #86EFAC;                     /* AAA lighter */
  --tu-hero-start:   #0A0A0A;
  --tu-hero-mid:     #123320;
  --tu-hero-end:     var(--primary-dark);
  /* Mode sombre : texte-sur-clair bascule vers texte-sur-dark = blanc */
  --tu-on-light:     var(--text-primary);              /* fond card sombre → texte blanc */
  --tu-shadow-card:  0 14px 40px rgba(0,0,0,.45);
  --tu-shadow-soft:  0 4px 14px rgba(0,0,0,.35);
  --tu-shadow-strong:0 22px 60px rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════════════════════════
   SAFETY-NET : aucun texte blanc hérité sur fond clair.
   Les rares zones autorisant du texte blanc (hero, bannière verte,
   header tableau vert, bouton vert, cercles numérotés, chip kicker)
   sont gérées explicitement plus bas avec leur gradient de fond.
   Partout ailleurs, le texte principal/secondaire suit le thème.

   NOTE — après reprise propre de shipping.html (suppression des
   styles inline color/background/border), les sélecteurs ciblent
   désormais des CLASSES dédiées (.shipping-cards-grid,
   .shipping-contact-cta, .shipping-price-chip, .shipping-table-note,
   .shipping-footnote) au lieu des anciens [style*="..."]. Plus
   aucune dépendance à la présence d'attributs inline.
   ═══════════════════════════════════════════════════════════ */
body[data-page="shipping"] .legal-page,
body[data-page="shipping"] .legal-page .legal-section,
body[data-page="shipping"] .legal-page .shipping-box-section,
body[data-page="shipping"] .legal-page .shipping-card,
body[data-page="shipping"] .legal-page .shipping-contact-cta {
  color: var(--tu-fg);
}
body[data-page="shipping"] .legal-page .legal-section p,
body[data-page="shipping"] .legal-page .legal-section li,
body[data-page="shipping"] .legal-page .shipping-box-section p,
body[data-page="shipping"] .legal-page .shipping-box-section li,
body[data-page="shipping"] .legal-page .shipping-card p,
body[data-page="shipping"] .legal-page .shipping-card li,
body[data-page="shipping"] .legal-page .shipping-contact-cta p {
  color: var(--tu-fg-soft);
}
/* Zones explicitement sur fond vert/sombre → texte blanc conservé. */
body[data-page="shipping"] .shipping-highlight,
body[data-page="shipping"] .shipping-highlight *,
body[data-page="shipping"] .legal-page > .container > h1,
body[data-page="shipping"] .legal-section table thead tr,
body[data-page="shipping"] .legal-section table thead th,
body[data-page="shipping"] .shipping-box-section ol li::before,
body[data-page="shipping"] .shipping-contact-cta .btn {
  color: var(--tu-on-accent) !important;
}

/* ═ Main wrapper ═ */
body[data-page="shipping"] .legal-page {
  padding: 34px 18px 72px;
  min-height: 100vh;
  background: transparent !important;
  color: var(--tu-fg);
}
body[data-page="shipping"] .legal-page > .container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ───────── HERO TITRE ───────── */
body[data-page="shipping"] .legal-page > .container > h1 {
  position: relative;
  margin: 2px 0 0 !important;
  padding: 28px 28px 24px !important;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 110% -20%, rgba(46,204,113,.22), transparent 60%),
    linear-gradient(160deg, var(--tu-hero-start) 0%, var(--tu-hero-mid) 55%, var(--tu-hero-end) 160%) !important;
  color: var(--white) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--tu-shadow-strong);
  overflow: hidden;
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
}
body[data-page="shipping"] .legal-page > .container > h1::before {
  content: "ORKYVA · LIVRAISON";
  display: block;
  font-size: 11px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  margin-bottom: 10px;
}
body[data-page="shipping"] .legal-page > .container > h1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 0%, rgba(255,255,255,.06) 42%, transparent 70%);
  pointer-events: none;
}

/* Intro — contraste renforcé pour lisibilité sur #F8F9FA */
body[data-page="shipping"] .legal-intro {
  margin: 0 !important;
  padding: 0 6px;
  color: var(--tu-fg-soft) !important;
  font-size: 15.5px !important;
  line-height: 1.7;
  max-width: 780px;
}
body.dark-mode[data-page="shipping"] .legal-intro {
  color: var(--tu-muted) !important;
}

/* ───────── BANNER LIVRAISON GRATUITE ───────── */
body[data-page="shipping"] .shipping-highlight {
  position: relative !important;
  padding: 32px 32px 30px !important;
  border-radius: var(--radius-lg) !important;
  color: var(--white) !important;
  background:
    radial-gradient(500px 260px at 110% -40%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--primary-color) 0%, #27AE60 55%, #1E8449 120%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 18px 40px rgba(46,204,113,.22), 0 0 0 1px rgba(255,255,255,.06) inset !important;
  overflow: hidden !important;
  text-align: center !important;
  margin: 8px 0 !important;
}
body.dark-mode[data-page="shipping"] .shipping-highlight {
  background:
    radial-gradient(500px 260px at 110% -40%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--primary-dark) 0%, #175F37 55%, #0E3A22 120%) !important;
  border-color: rgba(46,204,113,.30) !important;
}
body[data-page="shipping"] .shipping-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 70%);
  pointer-events: none;
}
body[data-page="shipping"] .shipping-highlight > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 14px !important;
  border-radius: 50% !important;
  /* Glass circle sur fond vert : rend l'icône visible sans se fondre
     dans le gradient dans les deux thèmes. */
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  font-size: 32px !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22) inset,
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  color: var(--white) !important;
}
body[data-page="shipping"] .shipping-highlight h2 {
  margin: 0 0 6px !important;
  font-size: clamp(26px, 3.2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: .5px;
  /* Fond vert → texte toujours blanc dans les deux thèmes.
     Avant : #4b4b4b (gris foncé) sans !important, sauvé en mode clair
     uniquement grâce à l'inline style sur le <h2>. On rend la règle
     autonome et theme-aware. */
  color: var(--white) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body[data-page="shipping"] .shipping-highlight p {
  margin: 0 !important;
  /* Avant : rgba(0,0,0,.92) — noir sur fond vert, contraste cassé dans
     les deux thèmes (plus lourdement en dark vert foncé). */
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ───────── SECTIONS ───────── */
body[data-page="shipping"] .legal-section {
  padding: 24px 26px 20px;
  border-radius: var(--radius-lg);
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  /* Shadow plus affirmée pour détacher les cartes du fond en mode clair */
  box-shadow: 0 6px 14px rgba(44,62,80,.08), 0 1px 3px rgba(44,62,80,.06);
  color: var(--tu-fg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.dark-mode[data-page="shipping"] .legal-section {
  border-color: var(--border-color);
  box-shadow: var(--tu-shadow-card);
}
body[data-page="shipping"] .legal-section h2 {
  margin: 0 0 2px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--tu-fg) !important;
  letter-spacing: .2px;
  line-height: 1.3;
  position: relative;
  padding-left: 16px;
}
body[data-page="shipping"] .legal-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary-color) 0%, #27AE60 100%);
}
body.dark-mode[data-page="shipping"] .legal-section h2::before {
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
body[data-page="shipping"] .legal-section h3 {
  margin: 14px 0 6px !important;
  font-size: 12.5px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tu-accent-text) !important;
  font-weight: 900 !important;
}
/* Plus de surcharge dark : --tu-accent-text bascule automatiquement */

body[data-page="shipping"] .legal-section p {
  margin: 0 !important;
  color: var(--tu-fg-soft) !important;
  font-size: 14.5px !important;
  line-height: 1.7;
}
body[data-page="shipping"] .legal-section p strong {
  color: var(--tu-fg) !important;
  font-weight: 800;
}
body[data-page="shipping"] .legal-section a {
  color: var(--tu-accent-text) !important;
  text-decoration: none !important;
  font-weight: 700;
  border-bottom: 1px dashed rgba(46,204,113,.35);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
body[data-page="shipping"] .legal-section a:hover {
  color: var(--tu-accent-text-hover) !important;
  border-bottom-color: rgba(46,204,113,.6);
}

/* Listes */
body[data-page="shipping"] .legal-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 2px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-page="shipping"] .legal-section ul li {
  position: relative;
  padding: 9px 12px 9px 40px !important;
  border-radius: var(--radius-md) !important;
  /* Mode clair : teinte émeraude plus marquée pour lisibilité sur #F8F9FA */
  background: rgba(46,204,113,.08) !important;
  border: 1px solid rgba(46,204,113,.22);
  color: var(--tu-fg) !important;
  font-size: 14px !important;
  line-height: 1.55;
}
body.dark-mode[data-page="shipping"] .legal-section ul li {
  background: rgba(255,255,255,.025) !important;
  border-color: var(--tu-line);
  color: var(--tu-fg-soft) !important;
}
body[data-page="shipping"] .legal-section ul li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(46,204,113,.16);
  color: var(--tu-accent-text);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46,204,113,.28);
}
body[data-page="shipping"] .legal-section ul li strong {
  color: var(--tu-fg) !important;
}

/* ───────── 3 CARTES OPTIONS DE LIVRAISON ───────── */
body[data-page="shipping"] .shipping-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0 6px;
}
body[data-page="shipping"] .shipping-card {
  position: relative;
  padding: 20px 20px 18px !important;
  border-radius: var(--radius-lg) !important;
  /* Mode clair : blanc pur + border plus marquée + shadow renforcée */
  background: var(--tu-surface) !important;
  border: 1px solid var(--tu-line-strong) !important;
  box-shadow: 0 6px 14px rgba(44,62,80,.08), 0 1px 3px rgba(44,62,80,.06) !important;
  border-left: 4px solid var(--primary-color) !important;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.dark-mode[data-page="shipping"] .shipping-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  border-left-color: var(--primary-color) !important;
  box-shadow: var(--tu-shadow-card) !important;
}
body[data-page="shipping"] .shipping-card:hover {
  transform: translateY(-2px);
  border-color: rgba(46,204,113,.45) !important;
  border-left-color: var(--primary-color) !important;
  box-shadow: 0 14px 32px rgba(46,204,113,.18), 0 2px 6px rgba(44,62,80,.08) !important;
}
body.dark-mode[data-page="shipping"] .shipping-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.55) !important;
}
body[data-page="shipping"] .shipping-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at 100% 0%, rgba(46,204,113,.10), transparent 60%);
  pointer-events: none;
}
body[data-page="shipping"] .shipping-card h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--tu-fg) !important;
  letter-spacing: .2px;
  text-transform: none !important;
}
/* CORRIGÉ — avant : color: var(--primary-color) (#2ECC71) sur fond
   --bg-card (#1E1E1E) = 3.9:1 → en dessous du seuil WCAG AA (4.5:1).
   Après : --tu-accent-text (#4ADE80 en dark) = 9.57:1 → AAA. Cohérent
   avec .legal-section h3 et les autres eyebrows accentués. */
body.dark-mode[data-page="shipping"] .shipping-card h3,
body.dark-mode[data-page="shipping"] .shipping-card h4 { color: var(--tu-accent-text) !important; }
body[data-page="shipping"] .shipping-card p {
  margin: 0 !important;
  color: var(--tu-fg-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.6;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
body[data-page="shipping"] .shipping-card p strong {
  color: var(--tu-muted) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  min-width: 60px;
  flex: 0 0 auto;
}
body.dark-mode[data-page="shipping"] .shipping-card p strong { color: var(--text-muted) !important; }
body.dark-mode[data-page="shipping"] .shipping-card p,
body.dark-mode[data-page="shipping"] .shipping-card li { color: var(--text-secondary) !important; }

/* Prix en chip — classe dédiée .shipping-price-chip
   Avant : ciblée par position (p:first-of-type > span) — fragile dès
   qu'on réordonne les <p>. Maintenant : classe explicite sur le span
   ou le <strong> porteur du prix. */
body[data-page="shipping"] .shipping-price-chip,
body[data-page="shipping"] .shipping-card p:first-of-type > span,
body[data-page="shipping"] .shipping-card p:first-of-type > strong:last-child {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  background: rgba(46,204,113,.12);
  color: var(--tu-accent-text);
  border: 1px solid rgba(46,204,113,.28);
  flex: 0 0 auto;
  text-transform: none;
  min-width: 0;
}
body.dark-mode[data-page="shipping"] .shipping-price-chip,
body.dark-mode[data-page="shipping"] .shipping-card p:first-of-type > span,
body.dark-mode[data-page="shipping"] .shipping-card p:first-of-type > strong:last-child {
  background: rgba(46,204,113,.18);
  border-color: rgba(46,204,113,.35);
  /* color: hérite de --tu-accent-text = #4ADE80 en dark */
}

/* Petite note dans une cellule du tableau tarifaire ("Gratuit dès 80€") */
body[data-page="shipping"] .shipping-table-note {
  color: var(--tu-muted);
  font-size: 12px;
  display: inline-block;
  margin-top: 2px;
}

/* Note de bas de tableau ("* Commande avant 16h…") */
body[data-page="shipping"] .shipping-footnote {
  color: var(--tu-muted);
  font-size: 12.5px;
  letter-spacing: .02em;
  margin: 4px 0 0;
}
body[data-page="shipping"] .shipping-card em {
  color: var(--tu-muted) !important;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .02em;
}
body[data-page="shipping"] .shipping-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body[data-page="shipping"] .shipping-card ul li {
  padding: 6px 10px 6px 32px !important;
  font-size: 12.5px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--tu-fg-soft) !important;
  line-height: 1.5;
}
body[data-page="shipping"] .shipping-card ul li::before {
  width: 16px; height: 16px;
  font-size: 9px;
  left: 8px;
}

/* ───────── BOXES PROCESS / DÉTAILS / SUIVI ───────── */
body[data-page="shipping"] .shipping-box-section {
  padding: 20px 22px !important;
  border-radius: var(--radius-lg) !important;
  /* Mode clair : tint émeraude plus visible + bordure renforcée */
  background:
    radial-gradient(500px 300px at 110% -30%, rgba(46,204,113,.10), transparent 60%),
    var(--tu-surface) !important;
  border: 1px solid rgba(46,204,113,.28) !important;
  box-shadow: 0 6px 14px rgba(44,62,80,.08), 0 1px 3px rgba(44,62,80,.06) !important;
  margin: 8px 0 !important;
  border-left: 4px solid var(--primary-color) !important;
}
body.dark-mode[data-page="shipping"] .shipping-box-section {
  background:
    radial-gradient(500px 300px at 110% -30%, rgba(46,204,113,.10), transparent 60%),
    var(--bg-card) !important;
  border-color: var(--border-color) !important;
  border-left-color: var(--primary-color) !important;
}
body[data-page="shipping"] .shipping-box-section h4 {
  margin: 0 0 10px !important;
  font-size: 12.5px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tu-accent-text) !important;
  font-weight: 900 !important;
}
/* Plus de surcharge dark : --tu-accent-text bascule automatiquement */

body[data-page="shipping"] .shipping-box-section p {
  margin: 4px 0 !important;
  color: var(--tu-fg-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.65;
}
body.dark-mode[data-page="shipping"] .shipping-box-section p { color: var(--text-secondary) !important; }
body[data-page="shipping"] .shipping-box-section p strong {
  color: var(--tu-fg) !important;
}

/* Timeline de <ol> */
body[data-page="shipping"] .shipping-box-section ol {
  list-style: none !important;
  counter-reset: tu-step;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
body[data-page="shipping"] .shipping-box-section ol li {
  counter-increment: tu-step;
  position: relative;
  padding: 12px 14px 12px 64px !important;
  border-radius: var(--radius-lg) !important;
  /* Mode clair : fond blanc pur pour se détacher du container teinté */
  background: var(--tu-surface) !important;
  border: 1px solid rgba(46,204,113,.26);
  color: var(--tu-fg) !important;
  font-size: 13.5px !important;
  line-height: 1.65;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform .12s;
  box-shadow: 0 2px 6px rgba(44,62,80,.05);
}
body.dark-mode[data-page="shipping"] .shipping-box-section ol li {
  background: rgba(255,255,255,.025) !important;
  border-color: var(--tu-line);
  color: var(--text-secondary) !important;
  box-shadow: none;
}
body[data-page="shipping"] .shipping-box-section ol li:hover {
  border-color: rgba(46,204,113,.32);
  transform: translateY(-1px);
}
body.dark-mode[data-page="shipping"] .shipping-box-section ol li:hover {
  background: var(--bg-card-hover) !important;
}
body[data-page="shipping"] .shipping-box-section ol li::before {
  content: counter(tu-step);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(46,204,113,.28), 0 0 0 3px rgba(46,204,113,.12);
}
body.dark-mode[data-page="shipping"] .shipping-box-section ol li::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
body[data-page="shipping"] .shipping-box-section ol li strong {
  color: var(--tu-fg) !important;
}

/* UL dans shipping-box-section */
body[data-page="shipping"] .shipping-box-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-page="shipping"] .shipping-box-section ul li {
  position: relative;
  padding: 9px 12px 9px 40px !important;
  border-radius: var(--radius-md) !important;
  /* Mode clair : blanc pour détacher du fond tinté du container */
  background: var(--tu-surface) !important;
  border: 1px solid rgba(46,204,113,.22);
  color: var(--tu-fg) !important;
  font-size: 13.5px !important;
  line-height: 1.55;
}
body.dark-mode[data-page="shipping"] .shipping-box-section ul li {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--tu-line);
  color: var(--text-secondary) !important;
}
body[data-page="shipping"] .shipping-box-section ul li::before {
  content: "•";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(46,204,113,.14);
  color: var(--tu-accent-text);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46,204,113,.28);
}

/* ───────── TABLEAU TARIFAIRE ───────── */
body[data-page="shipping"] .legal-section table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 18px 0 14px !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--tu-shadow-card);
  border: 1px solid var(--tu-line);
  background: var(--tu-surface);
}
body.dark-mode[data-page="shipping"] .legal-section table {
  background: var(--bg-card);
  border-color: var(--border-color);
}
body[data-page="shipping"] .legal-section table thead tr {
  background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 100%) !important;
  color: var(--white) !important;
}
body.dark-mode[data-page="shipping"] .legal-section table thead tr {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}
body[data-page="shipping"] .legal-section table thead th {
  padding: 14px 16px !important;
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900 !important;
  color: var(--white) !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}
body[data-page="shipping"] .legal-section table thead th:not(:first-child) {
  text-align: center !important;
}
body[data-page="shipping"] .legal-section table tbody tr {
  background: transparent !important;
  border: none !important;
  transition: background var(--transition-fast);
}
body[data-page="shipping"] .legal-section table tbody tr:nth-child(even) {
  background: rgba(46,204,113,.07) !important;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.02) !important;
}
body[data-page="shipping"] .legal-section table tbody tr:hover {
  background: rgba(46,204,113,.08) !important;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody tr {
  border-color: var(--border-color) !important;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody tr:hover {
  background: rgba(46,204,113,.08) !important;
}
body[data-page="shipping"] .legal-section table tbody td {
  padding: 14px 16px !important;
  color: var(--tu-fg) !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  border-top: 1px solid var(--tu-line) !important;
  border-right: 1px solid var(--tu-line) !important;
  background: transparent !important;
  text-align: center;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody td {
  color: var(--text-secondary) !important;
  border-top-color: var(--border-color) !important;
  border-right-color: var(--border-color) !important;
}
body[data-page="shipping"] .legal-section table tbody td:last-child {
  border-right: none !important;
}
body[data-page="shipping"] .legal-section table tbody td:first-child {
  text-align: left;
}
body[data-page="shipping"] .legal-section table tbody td strong {
  color: var(--tu-fg) !important;
  font-weight: 800;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody td strong {
  color: var(--text-primary) !important;
}
body[data-page="shipping"] .legal-section table tbody td span {
  color: var(--tu-muted) !important;
  font-size: 12px;
}
body[data-page="shipping"] .legal-section table tbody td:nth-child(2) {
  font-weight: 900;
  color: var(--tu-fg) !important;
}
body.dark-mode[data-page="shipping"] .legal-section table tbody td:nth-child(2) {
  color: var(--primary-color) !important;
}

/* Légende */
body[data-page="shipping"] .legal-section table + p {
  margin: 0 !important;
  color: var(--tu-muted) !important;
  font-size: 12px !important;
  padding: 0 6px;
  letter-spacing: .02em;
}

/* Mobile tableau en cartes */
@media (max-width: 680px) {
  body[data-page="shipping"] .legal-section table,
  body[data-page="shipping"] .legal-section table thead,
  body[data-page="shipping"] .legal-section table tbody,
  body[data-page="shipping"] .legal-section table tr,
  body[data-page="shipping"] .legal-section table td,
  body[data-page="shipping"] .legal-section table th {
    display: block !important;
    width: 100% !important;
  }
  body[data-page="shipping"] .legal-section table thead {
    position: absolute !important;
    left: -9999px;
    top: -9999px;
  }
  body[data-page="shipping"] .legal-section table tbody tr {
    margin-bottom: 10px;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--tu-line) !important;
    background: var(--tu-surface) !important;
    padding: 6px 12px !important;
  }
  body.dark-mode[data-page="shipping"] .legal-section table tbody tr {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
  }
  body[data-page="shipping"] .legal-section table tbody td {
    border: none !important;
    border-bottom: 1px dashed var(--tu-line) !important;
    padding: 8px 4px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    text-align: right !important;
    gap: 10px;
  }
  body[data-page="shipping"] .legal-section table tbody td:last-child { border-bottom: none !important; }
  body[data-page="shipping"] .legal-section table tbody td:first-child {
    font-size: 15px;
    font-weight: 900;
    color: var(--tu-fg) !important;
    text-align: left !important;
    padding: 10px 4px !important;
    border-bottom: 2px solid rgba(46,204,113,.24) !important;
  }
  body[data-page="shipping"] .legal-section table tbody td:first-child:before { display: none; }
  body[data-page="shipping"] .legal-section table tbody td:nth-child(2):before { content: "TARIF"; }
  body[data-page="shipping"] .legal-section table tbody td:nth-child(3):before { content: "DÉLAI"; }
  body[data-page="shipping"] .legal-section table tbody td:nth-child(4):before { content: "COUVERTURE"; }
  body[data-page="shipping"] .legal-section table tbody td:before {
    color: var(--tu-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
  }
}

/* ───────── FAQ ───────── */
body[data-page="shipping"] .legal-section:nth-of-type(6) h3 {
  margin: 16px 0 6px !important;
  font-size: 15px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--tu-fg) !important;
  font-weight: 800 !important;
  position: relative;
  padding: 14px 16px !important;
  /* Mode clair : teinte émeraude plus marquée pour que les FAQ ressortent */
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.30);
  border-radius: var(--radius-md);
  line-height: 1.4;
}
body.dark-mode[data-page="shipping"] .legal-section:nth-of-type(6) h3 {
  background: rgba(46,204,113,.10);
  border-color: rgba(46,204,113,.25);
}
body[data-page="shipping"] .legal-section:nth-of-type(6) h3 + p {
  margin: 6px 6px 10px !important;
  padding: 0 6px !important;
  color: var(--tu-fg-soft) !important;
  font-size: 14px !important;
  line-height: 1.7;
}
body[data-page="shipping"] .legal-section:nth-of-type(6) h3 + p strong {
  color: var(--tu-fg) !important;
}

/* ───────── CONTACT CTA FINAL ───────── */
body[data-page="shipping"] .shipping-contact-cta {
  position: relative !important;
  margin-top: 6px !important;
  padding: 28px 28px 24px !important;
  border-radius: var(--radius-lg) !important;
  /* Mode clair : tint émeraude + shadow renforcée */
  background:
    radial-gradient(600px 260px at 50% -30%, rgba(46,204,113,.18), transparent 60%),
    var(--tu-surface) !important;
  border: 1px solid rgba(46,204,113,.30) !important;
  box-shadow: 0 6px 14px rgba(44,62,80,.08), 0 1px 3px rgba(44,62,80,.06) !important;
  overflow: hidden;
  text-align: center !important;
  color: var(--tu-fg) !important;
}
body.dark-mode[data-page="shipping"] .shipping-contact-cta {
  background:
    radial-gradient(600px 260px at 50% -30%, rgba(46,204,113,.22), transparent 60%),
    var(--bg-card) !important;
  border-color: rgba(46,204,113,.28) !important;
}
body[data-page="shipping"] .shipping-contact-cta::before {
  content: "ORKYVA · SUPPORT";
  display: block;
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--tu-accent-text);
  font-weight: 900;
  margin-bottom: 10px;
}
/* Plus de surcharge dark : --tu-accent-text bascule automatiquement */
body[data-page="shipping"] .shipping-contact-cta h3 {
  margin: 0 0 6px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--tu-fg) !important;
  letter-spacing: .2px;
}
body[data-page="shipping"] .shipping-contact-cta p {
  margin: 0 auto 18px !important;
  max-width: 460px;
  color: var(--tu-muted) !important;
  font-size: 14px !important;
  line-height: 1.6;
}
body[data-page="shipping"] .shipping-contact-cta .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 50px !important;
  padding: 14px 26px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, var(--primary-color) 0%, #27AE60 100%) !important;
  color: var(--white) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(46,204,113,.28) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-normal);
}
body.dark-mode[data-page="shipping"] .shipping-contact-cta .btn {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}
body[data-page="shipping"] .shipping-contact-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(46,204,113,.40) !important;
}
body[data-page="shipping"] .shipping-contact-cta .btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body[data-page="shipping"] .legal-page { padding: 22px 14px 60px; }
  body[data-page="shipping"] .legal-page > .container { gap: 14px; }
  body[data-page="shipping"] .legal-page > .container > h1 { padding: 22px 20px 18px !important; }
  body[data-page="shipping"] .shipping-highlight { padding: 26px 22px 24px !important; }
  body[data-page="shipping"] .shipping-highlight > i { width: 62px !important; height: 62px !important; font-size: 26px !important; }
  body[data-page="shipping"] .legal-section,
  body[data-page="shipping"] .shipping-box-section,
  body[data-page="shipping"] .shipping-contact-cta { padding: 18px 18px 16px !important; }
  body[data-page="shipping"] .legal-section h2 { font-size: 17.5px !important; }
  body[data-page="shipping"] .shipping-box-section ol li { padding-left: 58px !important; }
  body[data-page="shipping"] .shipping-box-section ol li::before { width: 32px; height: 32px; font-size: 13px; left: 12px; }
  body[data-page="shipping"] .shipping-contact-cta .btn { width: 100%; min-height: 52px !important; }
}
@media (max-width: 480px) {
  body[data-page="shipping"] .legal-page { padding: 18px 12px 50px; }
  body[data-page="shipping"] .legal-page > .container > h1 { padding: 18px 16px 16px !important; font-size: 22px !important; }
  body[data-page="shipping"] .legal-intro { font-size: 14px !important; }
  body[data-page="shipping"] .shipping-highlight h2 { font-size: 22px !important; }
  body[data-page="shipping"] .shipping-highlight p { font-size: 13.5px !important; }
  body[data-page="shipping"] .shipping-card { padding: 18px !important; }
  body[data-page="shipping"] .shipping-card h3 { font-size: 16px !important; }
  body[data-page="shipping"] .legal-section ul li { font-size: 13.5px !important; padding-left: 36px !important; }
  body[data-page="shipping"] .legal-section:nth-of-type(6) h3 { font-size: 14px !important; padding: 12px 14px !important; }
}

/* Accessibility */
body[data-page="shipping"] a:focus-visible,
body[data-page="shipping"] button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="shipping"] *,
  body[data-page="shipping"] *::before,
  body[data-page="shipping"] *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}