/* ═══════════════════════════════════════════════════════
   EXERCISES CATALOGUE / SALES PAGE  v3.1 — CHARTE MENTHE-VIOLET
   v3.1 (06/08/2026) : fond violet éclairci, valeur choisie par Fred —
   --pev-lock-bg et le bloc verrouillé passent de #F0E9FC à #F1EDF8.
   v3.0 (06/08/2026) : migration olive -> menthe/violet
   (CHARTE-EN-MENTHE-VIOLET.md, validée par Fred le 06/08) :
   héros vert forêt #1E3A2F, accent #5FE8B4, cartouches #191C10,
   apprendre #2FBF8F/#27A67B, acheter VIOLET #7C4DDB/#6A3DC4,
   prix #5B2FB0, thème Avancé = darks #1E3A2F/#191C10.
   Sélecteurs et markup INCHANGÉS.
   v2.3 (05/08/2026) : cartouches OPTION J du designer (charte v6,
   « puce en creux ») — fond #23260F (valeur du header), bordure
   blanche 14%, remplace la menthe translucide v2.2 (jugée boueuse).
   v2.1 (05/08/2026) : héros harmonisé (charte v5 §5b) — plat #33361F
   pleine largeur collé au header, texte à gauche, stats en puces
   bordées à carré menthe, bloc accès descendu dans la page,
   barre de confiance sans emoji (carrés menthe).
   File: css/page-exercices-vente.css
   Enqueued by et-05 (shortcode [excellab_catalogue])
   v2.0 (04/08/2026) : passage aux tokens de CHARTE-EN-OLIVE.md
   (validée par Fred le 04/08/2026 — EN uniquement).
   Sélecteurs INCHANGÉS (markup et-05 intouché). Règles charte :
   radius 0 · aucune ombre · menthe #1F7355 = apprendre ·
   olive #4A5023 = acheter · ambre #8A6A1F = MONTANTS uniquement ·
   Archivo = titres · IBM Plex Sans = texte.
   v1.0 : port FR (vert/or/bleu, arrondis, ombres) — remplacé.
   ═══════════════════════════════════════════════════════ */

:root {
  --pev-mint: #2FBF8F;
  --pev-mint-h: #27A67B;
  --pev-mint-bg: #DFF7EC;
  --pev-olive: #7C4DDB;   /* nom historique — désormais le VIOLET acheter */
  --pev-olive-h: #6A3DC4;
  --pev-price: #5B2FB0;
  --pev-lock: #6E7263;
  --pev-lock-bg: #F1EDF8;
  --pev-ink: #191C10;
  --pev-text: #3C4033;
  --pev-muted: #6E7263;
  --pev-bd: #DBDCD0;
  --pev-white: #FFFFFF;
}

.pev-hero, .pev-trust, .pev-section, .pev-pricing, .pev-player {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ═══ HERO ═══
   v2.1 : gabarit unifié 5b — plat #33361F, PLEINE LARGEUR, collé au header,
   texte à gauche, un seul modèle de puces (carré menthe, pas d'emoji). */
#body:has(.pev-hero) { overflow-x: clip; }
#body:has(.pev-hero) #content { padding-top: 0; }
.pev-hero {
  background: #1E3A2F;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 56px max(24px, calc(50vw - 550px)) 60px;
  text-align: left;
}
.pev-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5FE8B4;
}
.pev-eyebrow .pev-dot { display: none; }
.pev-hero h1 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.025em;
  margin: 14px 0 10px;
  line-height: 1.06;
  max-width: 640px;
}
.pev-hero h1 em {
  color: #5FE8B4;
  font-style: normal;
}
.pev-hero p {
  color: #C8DCD2;
  font-size: 15.5px;
  max-width: 560px;
  margin: 0 0 22px;
  line-height: 1.6;
  text-align: left;
}
.pev-hero-stats {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.pev-stat-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: #191C10;
  padding: 9px 14px;
}
.pev-stat-box::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #5FE8B4;
  flex: 0 0 auto;
}
.pev-stat-box strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.pev-stat-box span {
  font-size: 12.5px;
  color: #DDE0CE;
  font-weight: 400;
}
/* Le détail Free/Paid vit DANS la page (5b), plus dans le héros : carte claire. */
.pev-access {
  max-width: 660px;
  margin: 28px auto 0;
  background: #FFFFFF;
  border: 1px solid #DBDCD0;
  border-left: 4px solid #2FBF8F;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.pev-access-t {
  font-weight: 600;
  color: #191C10;
  font-size: 14px;
  margin-bottom: 2px;
}
.pev-access-i {
  font-size: 13.5px;
  color: #3C4033;
  line-height: 1.45;
}
.pev-access-i b { color: #14785A; font-weight: 600; }
.pev-access-i + .pev-access-i b { color: #7C4DDB; }

/* ═══ TRUST BAR ═══ */
.pev-trust {
  max-width: 900px;
  margin: 10px auto 0;
  padding: 30px 24px;
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.pev-trust-i {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pev-mint-h);
}
.pev-trust-i::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--pev-mint);
  flex: 0 0 auto;
}
.pev-trust-ic { display: none; }

/* ═══ SECTIONS ═══ */
.pev-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 24px 0;
}
.pev-section-head {
  text-align: center;
  margin-bottom: 30px;
}
.pev-section-head h2 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pev-ink);
  margin-bottom: 6px;
}
.pev-section-head h2 em {
  color: var(--pev-mint);
  font-style: normal;
}
.pev-section-head p {
  font-size: 15px;
  color: var(--pev-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* ═══ FILTERS ═══ */
.pev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.pev-fil {
  background: var(--pev-white);
  border: 1px solid var(--pev-bd);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pev-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pev-fil:hover {
  border-color: var(--pev-lock);
  background: var(--pev-mint-bg);
}
.pev-fil.on {
  background: var(--pev-mint);
  color: #fff;
  border-color: var(--pev-mint);
}
.pev-fil .n { opacity: .7; margin-left: 3px; }

/* ═══ LEGEND ═══ */
.pev-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pev-legend-i {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pev-text);
}
.pev-legend-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.pev-ld-free { background: #2FBF8F; }
.pev-ld-deb  { background: #7C4DDB; }
.pev-ld-ava  { background: #191C10; }

/* ═══ THEME BLOCKS (accordions) ═══
   Gratuit = menthe (apprendre) · Débutant = olive · Avancé = olive sombre
   (les deux niveaux payants restent dans la même famille « acheter »). */
.pev-theme-block {
  margin-bottom: 20px;
  border: 1px solid var(--pev-bd);
  overflow: hidden;
}
.pev-theme-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  transition: filter .15s;
}
.pev-theme-header::-webkit-details-marker { display: none; }
.pev-theme-header:hover { filter: brightness(1.08); }

.pev-th-free { background: linear-gradient(135deg, #2FBF8F, #27A67B); }
.pev-th-deb  { background: linear-gradient(135deg, #7C4DDB, #6A3DC4); }
.pev-th-ava  { background: linear-gradient(135deg, #1E3A2F, #191C10); }

.pev-theme-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.pev-theme-info { flex: 1; }
.pev-theme-name { font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: #fff; margin-bottom: 2px; }
.pev-theme-sub  { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 400; }
.pev-theme-pills { display: flex; gap: 8px; }
.pev-tp {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 5px 12px;
  background: rgba(255,255,255,.16); color: #fff;
}
.pev-tp-free { background: rgba(255,255,255,.28); }
.pev-theme-chev { color: rgba(255,255,255,.7); transition: transform .2s; flex-shrink: 0; }
.pev-theme-chev svg { width: 20px; height: 20px; }
details[open] .pev-theme-chev { transform: rotate(180deg); }
.pev-theme-body { background: var(--pev-white); padding: 12px 16px 20px; }

/* ═══ EXERCISE ROWS — compact clickable cards (whole card = <a>) ═══ */
.pev-exo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: stretch; }
.pev-exo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--pev-bd); background: var(--pev-white);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.pev-exo:hover { border-color: var(--pev-lock); }
.pev-exo--open { background: var(--pev-mint-bg); border-color: var(--pev-bd); }
.pev-exo--open:hover { border-color: var(--pev-mint); }
.pev-exo--lock { background: var(--pev-lock-bg); border-color: var(--pev-bd); }
.pev-exo--lock:hover { border-color: var(--pev-lock); }

.pev-exo-info { min-width: 0; }
.pev-exo-name { font-weight: 600; font-size: 15px; color: var(--pev-ink); margin-bottom: 3px; }
.pev-exo--lock .pev-exo-name { color: #3C4033; }
.pev-exo-desc { font-size: 13px; color: var(--pev-muted); line-height: 1.45; }

.pev-exo-badge {
  flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
}
.pev-b-free { background: var(--pev-mint-bg); color: var(--pev-mint-h); }
.pev-b-lock { background: rgba(74,80,35,.12); color: var(--pev-olive); }
.pev-b-pop  { background: var(--pev-olive); color: #fff; }

/* ═══ PLAYER — exercise reader mode (?quiz=ID) ═══ */
.pev-player { max-width: 1000px; margin: 0 auto; padding: 28px 24px 50px; }
.pev-player-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--pev-mint);
  text-decoration: none; margin-bottom: 16px;
  border-bottom: 1px solid rgba(31,115,85,.4);
}
.pev-player-back:hover { color: var(--pev-mint-h); }
.pev-player-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -.02em;
  color: var(--pev-ink); margin: 0 0 20px;
}
.pev-player-lock {
  max-width: 520px; margin: 20px auto;
  background: var(--pev-white); border: 1px solid var(--pev-bd);
  border-top: 4px solid var(--pev-olive);
  padding: 32px 26px; text-align: center;
}
.pev-player-lock-t { font-family: 'Archivo', sans-serif; font-size: 20px; font-weight: 700; color: var(--pev-ink); margin-bottom: 10px; }
.pev-player-lock p { color: var(--pev-text); font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.pev-player-lock .pev-pcta { max-width: 280px; margin: 0 auto; }

/* ═══ PRICING ═══ */
.pev-pricing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}
.pev-tog-row {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-bottom: 32px;
}
.pev-tog {
  background: var(--pev-white);
  border: 1px solid var(--pev-bd);
  padding: 4px;
  display: inline-flex;
}
.pev-tog button {
  border: 0; background: none; font: inherit;
  font-size: 14.5px; font-weight: 600;
  color: var(--pev-muted);
  padding: 11px 24px;
  cursor: pointer; transition: background .15s, color .15s;
}
.pev-tog button.on {
  background: var(--pev-mint); color: #fff;
}
.pev-save-tag {
  background: var(--pev-olive); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 7px 14px;
}

.pev-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 780px;
  margin: 0 auto;
}
.pev-plan {
  padding: 28px 24px;
  position: relative;
  background: var(--pev-white);
  border: 1px solid var(--pev-bd);
  transition: border-color .2s;
}
.pev-plan:hover { border-color: var(--pev-lock); }
.pev-p-deb {
  background: var(--pev-white);
  border-color: var(--pev-bd);
}
.pev-p-ava {
  background: #F1EDF8;
  border: 1px solid var(--pev-olive);
}
.pev-p-ava:hover { border-color: var(--pev-olive-h); }
.pev-pop-label {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--pev-olive); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; white-space: nowrap;
}
.pev-plan h3 { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--pev-ink); margin: 6px 0 4px; }
.pev-plan .pev-who { font-size: 13.5px; color: var(--pev-muted); margin-bottom: 18px; line-height: 1.5; }
.pev-plan-price { font-family: 'Archivo', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--pev-price); line-height: 1; }
.pev-plan-price .pev-per { font-size: 16px; font-weight: 500; color: var(--pev-muted); }
.pev-plan-sub { font-size: 13px; color: var(--pev-muted); margin: 6px 0 18px; min-height: 18px; }
.pev-plan ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; line-height: 1.5; }
.pev-plan li { padding: 7px 0 7px 28px; position: relative; color: var(--pev-text); font-weight: 400; }
.pev-plan li::before { content: '\2713'; position: absolute; left: 2px; font-weight: 700; color: var(--pev-mint); font-size: 15px; }
.pev-plan li.pev-plus {
  font-weight: 600; color: var(--pev-olive);
  background: rgba(74,80,35,.08);
  padding-left: 30px; margin: 3px -6px;
}
.pev-plan li.pev-plus::before { content: '\2605'; color: var(--pev-olive); }
.pev-pcta {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-weight: 600; font-size: 15px;
  height: 46px; padding: 0 24px;
  transition: background-color .15s;
  text-decoration: none;
}
.pev-pcta:focus-visible { outline: 2px solid var(--pev-mint); outline-offset: 2px; }
.pev-pcta-green {
  background: var(--pev-mint); color: #fff;
}
.pev-pcta-green:hover {
  background: var(--pev-mint-h); color: #fff;
}
.pev-pcta-gold {
  background: var(--pev-olive); color: #fff;
}
.pev-pcta-gold:hover {
  background: var(--pev-olive-h); color: #fff;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .pev-hero { padding: 44px 20px 40px; }
  .pev-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pev-theme-pills { display: none; }
  .pev-exo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pev-hero h1 { font-size: 24px; }
  .pev-hero-stats { gap: 8px; }
  .pev-stat-box { min-width: 70px; padding: 10px 14px; }
  .pev-stat-box strong { font-size: 18px; }
  .pev-pcta { height: 48px; }
}