/* =============================================================================
   ECOVEHICULE  /  feuille unique  /  theme autonome
   -----------------------------------------------------------------------------
   Plus de theme parent, donc plus une seule regle ecrite pour en corriger un.
   La v4 du theme enfant consacrait un tiers de sa longueur a repeindre JNews et
   a lui reprendre la police. Tout ca disparait.

   JETONS ISSUS D'UN RELEVE AU NAVIGATEUR, le 03/08/2026
   -----------------------------------------------------------------------------
   ev-database.org, reference du tableau comparatif de vehicules electriques :
     · bandeau de chiffres cles, valeur en grand et libelle en petit dessous,
       chaque bloc cliquable vers l'ancre de sa section detaillee ;
     · l'asterisque marque une valeur CONSTATEE, pas une valeur constructeur ;
     · tableau de specifications a deux colonnes, interlignage 2,0.
   insideevs.com : surfaces anthracite a six niveaux, titres a -0,031em.
   electrek.co  : une famille de caracteres, titres a 1,10, corps a 1,50,
                  image d'article en 2:1.
   Les trois sont a rayon 0. D'ou les angles vifs, 2 px seulement sur ce qui se
   saisit. Aucune valeur exacte n'est reprise : regle 1 du parc.

   MECANIQUES DE FINITION, barre amiseo.fr
   -----------------------------------------------------------------------------
   1. Taille racine fluide, tout le reste en rem, points de rupture compris.
   2. Rythme vertical par une seule mecanique, `> * + *`. Aucun composant ne pose
      de marge. Piege : la variable posee sur un bloc gouverne AUSSI sa propre
      marge, le rythme interieur se declare donc sur les enfants.
   3. Une courbe, quatre durees.
   4. Etats regroupes en fin de feuille.

   Prefixe : evx-  Aucune classe partagee avec un autre site du parc.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  --s0: #0B0E0F; --s1: #121617; --s2: #181D1E; --s3: #1F2527;
  --s4: #272F31; --s5: #313A3C; --s6: #232A2C;

  --i0: #F2F6F7; --i1: #DCE3E5; --i2: #9EA9AC; --i3: #8B9698;

  --on: #00DF6E; --on-deep: #0E9E55; --on-ink: #04120A;
  --on-wash: rgba(0,223,110,.09); --on-edge: rgba(0,223,110,.30);

  --warn: #FFB43F; --warn-wash: rgba(255,180,63,.07); --warn-edge: rgba(255,180,63,.26);

  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem;
  --t-xl: 1.5rem; --t-2xl: 1.95rem; --t-3xl: 2.6rem; --t-4xl: 3.2rem;

  --lh-titre: 1.1; --lh-corps: 1.6; --lh-donnee: 2;

  --sp1: .25rem; --sp2: .5rem; --sp3: .75rem; --sp4: 1rem;
  --sp5: 1.5rem; --sp6: 2rem; --sp7: 3rem; --sp8: 4rem; --sp9: 5.5rem;

  --flow: var(--sp4);
  --r: 0px; --r-input: 2px;

  --d-xs: .16s; --d-s: .28s; --d-m: .42s; --d-l: .6s;
  --curve: cubic-bezier(.625, .05, 0, 1);

  --lift:  0 1px 0 rgba(255,255,255,.04), 0 .7rem 1.6rem -.85rem rgba(3,6,7,.85);
  --lift2: 0 1px 0 rgba(255,255,255,.07), 0 1.4rem 2.8rem -1.1rem rgba(3,6,7,.95);

  --measure: 68ch;
  --max: 75rem;
}

.evx-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
}

/* -----------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--s0);
  color: var(--i1);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: var(--lh-corps);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--on); color: var(--on-ink); }
a { color: var(--on); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  color: var(--i0);
  line-height: var(--lh-titre);
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.02em; }
h4 { font-size: var(--t-lg); letter-spacing: -.01em; line-height: 1.25; }
@media (min-width: 60rem) { h1 { font-size: var(--t-4xl); } }

p, ul, ol, blockquote, figure, table { margin: 0; }

.evx-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.evx-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--on); color: var(--on-ink); padding: var(--sp3) var(--sp4);
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
}
.evx-skip:focus { left: 0; }

.evx-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--sp5); }
.evx-main { padding: var(--sp7) 0 var(--sp9); }

/* -----------------------------------------------------------------------------
   2. Marque
   Un mot-symbole, pas une image. Le point du i est remplace par un carre vert,
   comme un temoin allume au tableau de bord. Net a toutes les tailles, lisible
   meme si la police n'est pas encore chargee.
   -------------------------------------------------------------------------- */

.evx-brand { display: inline-flex; align-items: center; text-decoration: none; }
.evx-wordmark {
  font-family: var(--cond);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.02em;
  color: var(--i0);
  line-height: 1;
  white-space: nowrap;
}

/* Toute la couleur de la marque tient dans le .com. C est le seul accent du
   mot-symbole : le i reste un i, avec son point, sans rien par-dessus.
   Ni plus petit ni plus leger que le mot, sinon il decroche au lieu de le
   prolonger. Le vert de marque sur le fond sombre de l en-tete donne un
   contraste tres au-dessus du seuil, mesure apres coup dans le rendu. */
.evx-wordmark__tld { color: var(--on); }

.evx-brand--foot .evx-wordmark { font-size: var(--t-lg); }

/* -----------------------------------------------------------------------------
   3. En-tete
   -------------------------------------------------------------------------- */

.evx-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 14, 15, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--s5);
}
@supports not (backdrop-filter: blur(1px)) { .evx-head { background: var(--s0); } }

.evx-head__in {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 0 var(--sp5);
  min-height: 4rem;
  display: flex; align-items: center; gap: var(--sp5);
}
.evx-nav { margin-left: auto; }
.evx-nav__list {
  display: flex; align-items: center; gap: var(--sp5);
  list-style: none; margin: 0; padding: 0;
}
.evx-nav__list a {
  display: block; padding: .35rem 0;
  font-family: var(--cond); font-weight: 600; font-size: var(--t-md);
  letter-spacing: .05em; text-transform: uppercase; color: var(--i2);
  border-bottom: 2px solid transparent;
}
.evx-nav__list .current-menu-item > a,
.evx-nav__list .current-menu-parent > a { color: var(--i0); border-bottom-color: var(--on); }

.evx-nav__list .sub-menu {
  position: absolute; min-width: 13rem;
  background: var(--s2); border: 1px solid var(--s5);
  list-style: none; margin: .35rem 0 0; padding: var(--sp2) 0;
  display: none;
}
.evx-nav__list li:hover > .sub-menu,
.evx-nav__list li:focus-within > .sub-menu { display: block; }
.evx-nav__list .sub-menu a { padding: .35rem var(--sp4); text-transform: none; letter-spacing: 0; }
.evx-nav__list > li { position: relative; }

.evx-burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--s5); border-radius: var(--r-input);
  padding: .55rem .6rem; cursor: pointer;
}
.evx-burger__bar { display: block; width: 1.1rem; height: 2px; background: var(--i1); }
.evx-burger__bar + .evx-burger__bar { margin-top: 4px; }

@media (max-width: 55rem) {
  .evx-burger { display: block; }
  .evx-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--s1); border-bottom: 1px solid var(--s5);
    padding: var(--sp4) var(--sp5);
  }
  .evx-nav.is-open { display: block; }
  .evx-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .evx-nav__list > li + li { border-top: 1px solid var(--s6); }
  .evx-nav__list a { padding: var(--sp3) 0; font-size: var(--t-lg); }
  .evx-nav__list .sub-menu { position: static; display: block; border: 0; background: none; padding-left: var(--sp4); }
}

/* -----------------------------------------------------------------------------
   4. Pied de page
   -------------------------------------------------------------------------- */

.evx-foot { border-top: 1px solid var(--s5); background: #070A0B; }
.evx-foot__in {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: var(--sp8) var(--sp5) var(--sp6);
  display: grid; gap: var(--sp6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .evx-foot__in { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp7); } }

.evx-foot__col p { color: var(--i3); font-size: var(--t-sm); }
.evx-foot__col--brand p { max-width: 40ch; }
.evx-foot__col--brand p + p { margin-top: var(--sp3); }
.evx-foot__col--brand .evx-brand { margin-bottom: var(--sp3); }
.evx-foot__note { color: var(--i3); font-style: normal; }

.evx-foot__title {
  font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--i2) !important;
  margin-bottom: var(--sp3) !important;
}
.evx-foot__list { list-style: none; margin: 0; padding: 0; }
.evx-foot__list li + li { margin-top: var(--sp2); }
.evx-foot__list a { color: var(--i2); font-size: var(--t-sm); }

.evx-foot__bar {
  border-top: 1px solid var(--s6);
  padding: var(--sp4) var(--sp5);
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp3); justify-content: space-between;
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .05em; text-transform: uppercase; color: var(--i3);
}
.evx-foot__bar p { margin: 0; }
.evx-foot__bar a { color: var(--i2); }

/* -----------------------------------------------------------------------------
   5. Rythme vertical
   -------------------------------------------------------------------------- */

.entry-content > * + *, .evx-flow > * + * { margin-top: var(--flow); }
.entry-content > h2 { --flow: var(--sp8); }
.entry-content > h3 { --flow: var(--sp6); }
.entry-content > :is(h2, h3, h4) + * { --flow: var(--sp3); }
.entry-content > :is(p, ul, ol, blockquote) { max-width: var(--measure); }
.entry-content p { text-wrap: pretty; color: var(--i1); }

.entry-content > h2 {
  padding-top: var(--sp3);
  border-top: 2px solid var(--on);
  border-image: linear-gradient(to right, var(--on) 0 2.5rem, var(--s5) 2.5rem) 1;
  scroll-margin-top: 5.5rem;
}

/* -----------------------------------------------------------------------------
   6. En-tete de page et d'archive
   -------------------------------------------------------------------------- */

.evx-pagehead { padding-bottom: var(--sp5); border-bottom: 1px solid var(--s5); margin-bottom: var(--sp7); }
.evx-pagehead > * + * { margin-top: var(--sp3); }
.evx-pagehead__intro { color: var(--i2); max-width: 74ch; }
.evx-pagehead__count {
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--i3);
}

.evx-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center;
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--i3);
  margin-bottom: var(--sp4);
}
.evx-crumbs a { color: var(--i2); }

.evx-empty { color: var(--i2); }

/* -----------------------------------------------------------------------------
   7. Article
   -------------------------------------------------------------------------- */

.evx-article { max-width: 52rem; }
.evx-article__head > * + * { margin-top: var(--sp4); }
.evx-article__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center;
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--i3);
}
.evx-article__fig {
  margin: var(--sp6) 0;
  aspect-ratio: 2 / 1; overflow: hidden;
  border: 1px solid var(--s5);
}
.evx-article__fig img { width: 100%; height: 100%; object-fit: cover; }
.evx-article__body { margin-top: var(--sp6); }

.evx-share { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.evx-share__btn {
  font-family: var(--cond); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .7rem;
  border: 1px solid var(--s5); border-radius: var(--r-input);
  color: var(--i2);
}

.entry-content strong { color: var(--i0); font-weight: 600; }
.entry-content a { border-bottom: 1px solid var(--on-edge); }
.entry-content ul, .entry-content ol { padding-left: 0; list-style: none; }
.entry-content li { margin-top: var(--sp2); color: var(--i1); }
.entry-content ul > li { position: relative; padding-left: 1.35rem; }
.entry-content ul > li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: .5rem; height: 1px; background: var(--on-deep);
}
.entry-content ol { counter-reset: n; }
.entry-content ol > li { position: relative; padding-left: 2rem; counter-increment: n; }
.entry-content ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .04em;
  font-family: var(--cond); font-weight: 700; font-size: .9em; color: var(--on-deep);
}
.entry-content blockquote {
  padding: var(--sp4) var(--sp5);
  background: var(--s1); border: 1px solid var(--s5);
  color: var(--i2);
}
.entry-content code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background: var(--s2); border: 1px solid var(--s5);
  padding: .05rem .35rem; border-radius: var(--r-input);
  font-size: .88em; color: var(--on);
}
.entry-content img { border-radius: var(--r); }

/* -----------------------------------------------------------------------------
   8. Tableau
   -------------------------------------------------------------------------- */

.evx-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--s5); background: var(--s1);
  scrollbar-color: var(--s5) var(--s2); scrollbar-width: thin;
}
.evx-tablewrap::-webkit-scrollbar { height: .55rem; }
.evx-tablewrap::-webkit-scrollbar-track { background: var(--s2); }
.evx-tablewrap::-webkit-scrollbar-thumb { background: var(--s5); }

.entry-content table, table.evx-table {
  width: 100%; min-width: 34rem;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.entry-content table th, table.evx-table th {
  background: var(--s3); color: var(--i0);
  font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .07em; text-transform: uppercase; text-align: left;
  padding: var(--sp3) var(--sp4);
  border: 0; border-bottom: 1px solid var(--s5);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.entry-content table td, table.evx-table td {
  padding: var(--sp2) var(--sp4);
  border: 0; border-bottom: 1px solid var(--s6);
  color: var(--i1); vertical-align: top; line-height: var(--lh-donnee);
}
.entry-content table :is(th, td):not(:first-child),
table.evx-table :is(th, td):not(:first-child) { border-left: 1px solid var(--s6); }
.entry-content table tbody tr:nth-child(even),
table.evx-table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
.entry-content table tbody tr:last-child td { border-bottom: 0; }

.entry-content table td:first-child, table.evx-table td:first-child {
  color: var(--i0); font-weight: 500;
  position: sticky; left: 0; z-index: 1;
  background: var(--s1); box-shadow: 1px 0 0 var(--s6);
}
.entry-content table tbody tr:nth-child(even) td:first-child { background: #151A1B; }
.entry-content table th:first-child, table.evx-table th:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--s3); box-shadow: 1px 0 0 var(--s5);
}
.entry-content table td.evx-best, table.evx-table td.evx-best { color: var(--on); font-weight: 600; }
.entry-content table caption {
  caption-side: bottom; padding: var(--sp3) var(--sp4);
  font-size: var(--t-sm); color: var(--i3); text-align: left;
  border-top: 1px solid var(--s6);
}
.evx-scrollhint {
  display: none; font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--i3);
  --flow: var(--sp2);
}
.evx-tablewrap.is-scrollable + .evx-scrollhint { display: block; }

/* -----------------------------------------------------------------------------
   9. Bandeau de chiffres cles, gabarit ev-database
   -------------------------------------------------------------------------- */

.evx-keys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--s5); border: 1px solid var(--s5);
}
.evx-keys__item { display: block; background: var(--s1); padding: var(--sp4) var(--sp4) var(--sp3); border: 0 !important; }
.evx-keys__v {
  display: block; font-family: var(--cond); font-weight: 700;
  font-size: var(--t-2xl); line-height: 1; color: var(--on);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.evx-keys__k {
  display: block; margin-top: var(--sp2);
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .09em; text-transform: uppercase; color: var(--i3);
}
.evx-keys__src { color: var(--i3); font-size: .6em; vertical-align: super; margin-left: .15em; font-weight: 400; }
.evx-keysnote { font-size: var(--t-sm); color: var(--i3); --flow: var(--sp2); }

/* -----------------------------------------------------------------------------
   10. Composants du gabarit d'article
   -------------------------------------------------------------------------- */

.evx-answer {
  padding: var(--sp5);
  background: var(--s1);
  border: 1px solid var(--on-edge); border-left: 3px solid var(--on);
  max-width: 72ch;
}
.evx-answer__tag {
  display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--on); margin-bottom: var(--sp2);
}
.evx-answer p { margin: 0 !important; font-size: var(--t-lg); line-height: 1.45; color: var(--i0); }

.evx-toc {
  padding: var(--sp4) var(--sp5);
  background: var(--s1); border: 1px solid var(--s5);
  max-width: var(--measure);
}
.evx-toc__title {
  font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--i3);
  margin: 0 0 var(--sp2);
}
.evx-toc ol { counter-reset: toc; margin: 0; padding: 0; list-style: none; }
.evx-toc li { counter-increment: toc; position: relative; padding-left: 1.85rem; margin: 0 0 .2rem; }
.evx-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--cond); font-weight: 700; font-size: .85em; color: var(--i3);
}
.evx-toc a { color: var(--i2); border: 0 !important; font-size: var(--t-sm); }

.evx-ai { --flow: var(--sp7); }
.evx-ai__label {
  display: block; font-family: var(--cond); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--i3); margin-bottom: var(--sp2);
}
.evx-ai__row { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.evx-ai__btn {
  font-family: var(--cond); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .8rem;
  border: 1px solid var(--s5); border-radius: var(--r-input);
  color: var(--i2); background: var(--s1);
}

.evx-callout {
  padding: var(--sp4) var(--sp5);
  background: var(--s2); border: 1px solid var(--s5); max-width: 72ch;
}
.evx-callout__tag {
  font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase; color: var(--on); margin-right: var(--sp2);
}
.evx-callout p { margin: 0 !important; }

.evx-recap {
  padding: var(--sp4) var(--sp5); border-left: 2px solid var(--s5);
  color: var(--i2); font-size: var(--t-sm); max-width: 72ch;
}
.evx-recap__tag {
  display: block; font-family: var(--cond); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--i3); margin-bottom: var(--sp1);
}

.evx-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--s5); border: 1px solid var(--s5); }
.evx-matrix__cell { background: var(--s1); padding: var(--sp4); }
.evx-matrix__who { display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-lg); color: var(--i0); margin-bottom: var(--sp1); }
.evx-matrix__verdict { display: block; font-size: var(--t-sm); color: var(--i2); }
.evx-matrix__cell--oui { box-shadow: inset 3px 0 0 var(--on); }
.evx-matrix__cell--non { box-shadow: inset 3px 0 0 var(--warn); }

.evx-proof { padding: var(--sp5); background: var(--s1); border: 1px solid var(--s5); max-width: 72ch; }
.evx-proof__title { font-family: var(--cond); font-weight: 700; font-size: var(--t-lg); color: var(--i0); margin-bottom: var(--sp2); }
.evx-proof li { font-size: var(--t-sm); color: var(--i2); }

.evx-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp4); }
.evx-related__item { display: block; }
.evx-related__fig {
  display: block; aspect-ratio: 2 / 1; overflow: hidden;
  border: 1px solid var(--s5); background: var(--s2); margin-bottom: var(--sp2);
}
.evx-related__fig img { width: 100%; height: 100%; object-fit: cover; }
.evx-related__title {
  display: block; font-family: var(--cond); font-weight: 700;
  font-size: var(--t-md); line-height: 1.2; color: var(--i0); border: 0 !important;
}

.evx-stale {
  display: flex; gap: var(--sp4); align-items: flex-start;
  padding: var(--sp4) var(--sp5);
  background: var(--warn-wash); border: 1px solid var(--warn-edge); max-width: 72ch;
}
.evx-stale__tag {
  flex: none; font-family: var(--cond); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--warn);
  padding-top: .2rem; white-space: nowrap;
}
.evx-stale p { margin: 0 !important; font-size: var(--t-sm); color: var(--i2); max-width: none !important; }
.evx-stale a { color: var(--warn); border-bottom: 1px solid var(--warn-edge); }

.evx-specs { border: 1px solid var(--s5); background: var(--s1); }
.evx-specs__head {
  padding: var(--sp3) var(--sp4); background: var(--s3);
  border-bottom: 1px solid var(--s5);
  font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--i0);
}
.evx-specs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evx-specs__row {
  display: flex; justify-content: space-between; gap: var(--sp3);
  padding: 0 var(--sp4); line-height: var(--lh-donnee);
  border-bottom: 1px solid var(--s6); font-size: var(--t-sm);
}
.evx-specs__grid .evx-specs__row:nth-child(odd) { border-right: 1px solid var(--s6); }
.evx-specs__k { color: var(--i3); font-family: var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.evx-specs__v { color: var(--i0); font-weight: 600; text-align: right; }

.evx-verdict { padding: var(--sp5); background: var(--s2); border: 1px solid var(--s5); box-shadow: var(--lift); }
.evx-verdict__title { font-family: var(--cond); font-weight: 700; font-size: var(--t-xl); color: var(--i0); }
.evx-verdict__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp5); margin-top: var(--sp4); }
.evx-verdict__col h4 { font-family: var(--cond); font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; }
.evx-verdict__col--plus h4 { color: var(--on); }
.evx-verdict__col--moins h4 { color: var(--warn); }
.evx-verdict__col li { font-size: var(--t-sm); }

.evx-cta {
  padding: var(--sp6); background: var(--s1); border: 1px solid var(--s5);
  box-shadow: var(--lift); --flow: var(--sp9);
}
.evx-cta > * + * { margin-top: var(--sp3); }
.evx-cta__title { font-family: var(--cond); font-weight: 700; font-size: var(--t-xl); color: var(--i0); }
.evx-cta p { color: var(--i2); max-width: 62ch; }

.evx-disclosure {
  padding: var(--sp3) var(--sp4); border: 1px dashed var(--s5);
  font-size: var(--t-sm); color: var(--i3);
  background: rgba(255,255,255,.012); max-width: var(--measure);
}
.evx-disclosure strong { color: var(--i2); }

.evx-label {
  display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .14em; text-transform: uppercase; color: var(--on);
}
.evx-btn {
  display: inline-block; font-family: var(--cond); font-weight: 700; font-size: var(--t-md);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  padding: .72rem 1.4rem; border-radius: var(--r-input);
  background: var(--on); color: var(--on-ink); border: 1px solid var(--on);
  cursor: pointer;
}
.evx-btn--ghost { background: transparent; color: var(--on); border-color: var(--on-edge); }

/* -----------------------------------------------------------------------------
   11. Cartes, grilles, accueil
   -------------------------------------------------------------------------- */

.evx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp5); }
.evx-card { background: var(--s1); border: 1px solid var(--s5); box-shadow: var(--lift); }
.evx-card__link { display: block; color: inherit; }
.evx-card__fig { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--s2); }
.evx-card__fig img { width: 100%; height: 100%; object-fit: cover; }
.evx-card__body { display: block; padding: var(--sp4); }
.evx-card__cat {
  display: inline-block; margin-bottom: var(--sp2);
  background: var(--on-wash); color: var(--on); border: 1px solid var(--on-edge);
  font-family: var(--cond); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: .1rem .5rem;
}
.evx-card__title {
  display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-lg);
  line-height: 1.15; letter-spacing: -.02em; color: var(--i0);
}
.evx-card__excerpt { display: block; margin-top: var(--sp2); color: var(--i2); font-size: var(--t-sm); }
.evx-card__date {
  display: block; margin-top: var(--sp3);
  font-family: var(--cond); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--i3);
}

.evx-pager { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp7); }
.evx-pager .page-numbers {
  display: inline-block; padding: .4rem .8rem;
  border: 1px solid var(--s5); border-radius: var(--r-input);
  font-family: var(--cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--i2);
}
.evx-pager .page-numbers.current { background: var(--on); border-color: var(--on); color: var(--on-ink); }

.evx-search { display: flex; flex-wrap: wrap; gap: var(--sp2); max-width: 34rem; }
.evx-search__input {
  flex: 1; min-width: 12rem;
  background: var(--s2); border: 1px solid var(--s5); border-radius: var(--r-input);
  color: var(--i0); font-family: var(--sans); font-size: var(--t-md); padding: .7rem .85rem;
}
::placeholder { color: var(--i3); opacity: 1; }

.evx-section { --flow: var(--sp9); }
.evx-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp4);
  padding-bottom: var(--sp3); border-bottom: 1px solid var(--s5); margin-bottom: var(--sp5);
}
.evx-section__head h2 { padding-top: 0 !important; border: 0 !important; }
.evx-section__head a {
  font-family: var(--cond); font-size: var(--t-sm);
  letter-spacing: .07em; text-transform: uppercase; border: 0 !important; white-space: nowrap;
}

.evx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--s5); padding: var(--sp7) var(--sp5);
}
@media (min-width: 48rem) { .evx-hero { padding: var(--sp8) var(--sp7); } }
.evx-hero > * + * { margin-top: var(--sp4); }
.evx-hero__media { display: block; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 60%; }
.evx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(102deg, var(--s0) 4%, rgba(11,14,15,.94) 44%, rgba(11,14,15,.55) 100%);
}
.evx-hero h1 { max-width: 20ch; }
.evx-hero__lead { font-size: var(--t-lg); line-height: 1.45; color: var(--i2); max-width: 48ch; text-wrap: pretty; }
.evx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp3); }

.evx-lead { display: grid; grid-template-columns: 1fr; gap: var(--sp6); align-items: start; }
@media (min-width: 64rem) { .evx-lead { grid-template-columns: 1.6fr 1fr; } }
.evx-lead__main { display: block; }
.evx-lead__fig {
  display: block; aspect-ratio: 2 / 1; width: 100%;
  border: 1px solid var(--s5); overflow: hidden; background: var(--s2); margin-bottom: var(--sp4);
}
.evx-lead__fig img { width: 100%; height: 100%; object-fit: cover; }
.evx-lead__title {
  display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-2xl);
  line-height: var(--lh-titre); letter-spacing: -.03em; color: var(--i0); margin-bottom: var(--sp2);
}
.evx-lead__excerpt { display: block; color: var(--i2); font-size: var(--t-sm); max-width: 54ch; }
.evx-lead__side { border-top: 1px solid var(--s5); padding-top: var(--sp3); }

.evx-index { border-top: 1px solid var(--s5); }
.evx-index__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp2) var(--sp4);
  align-items: baseline; padding: var(--sp4) var(--sp2); border-bottom: 1px solid var(--s6);
}
@media (min-width: 48rem) { .evx-index__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; } }
.evx-index__name { display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-lg); color: var(--i0); }
.evx-index__desc { display: block; color: var(--i2); font-size: var(--t-sm); grid-column: 1 / -1; }
@media (min-width: 48rem) { .evx-index__desc { grid-column: auto; } }
.evx-index__count { display: block; font-family: var(--cond); font-size: var(--t-sm); letter-spacing: .07em; text-transform: uppercase; color: var(--i3); white-space: nowrap; }

.evx-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp4); }
.evx-photo { display: block; }
.evx-photo__fig { display: block; aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid var(--s5); background: var(--s2); margin-bottom: var(--sp3); }
.evx-photo__fig img { width: 100%; height: 100%; object-fit: cover; }
.evx-photo__title { display: block; font-family: var(--cond); font-weight: 700; font-size: var(--t-lg); line-height: 1.2; color: var(--i0); }
.evx-photo__meta { display: block; margin-top: var(--sp1); font-family: var(--cond); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--i3); }

.evx-list { margin: 0; padding: 0; list-style: none; }
.evx-list__item {
  display: flex; align-items: baseline; gap: var(--sp3);
  padding: var(--sp3) 0; border-bottom: 1px solid var(--s6);
}
.evx-list__item::before { display: none !important; }
.evx-list__item:last-child { border-bottom: 0; }
.evx-list__item a { flex: 1; color: var(--i0); font-size: var(--t-sm); line-height: 1.35; border: 0 !important; }
.evx-list__date { font-family: var(--cond); font-size: var(--t-xs); letter-spacing: .06em; color: var(--i3); white-space: nowrap; }

/* -----------------------------------------------------------------------------
   12. Formulaire Fluent Forms
   -------------------------------------------------------------------------- */

.fluentform label, .fluentform .ff-el-input--label label {
  font-family: var(--cond) !important; font-weight: 600 !important;
  font-size: var(--t-sm) !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--i2) !important;
}
.fluentform input[type=text], .fluentform input[type=email],
.fluentform input[type=tel], .fluentform select, .fluentform textarea {
  background: var(--s2) !important; border: 1px solid var(--s5) !important;
  border-radius: var(--r-input) !important; color: var(--i0) !important;
  font-family: var(--sans) !important; font-size: var(--t-md) !important;
  padding: .7rem .85rem !important; box-shadow: none !important;
}
.fluentform .ff-btn-submit, .fluentform button[type=submit] {
  background: var(--on) !important; color: var(--on-ink) !important;
  border: 0 !important; border-radius: var(--r-input) !important;
  font-family: var(--cond) !important; font-weight: 700 !important;
  font-size: var(--t-md) !important; letter-spacing: .07em !important;
  text-transform: uppercase !important; padding: .8rem 1.6rem !important;
}
.fluentform .error, .fluentform .text-danger { color: var(--warn) !important; }

/* -----------------------------------------------------------------------------
   13. Etats
   -------------------------------------------------------------------------- */

a, .evx-btn, .evx-card, .evx-index__row, .evx-list__item a,
.evx-keys__item, .evx-ai__btn, .evx-share__btn, .evx-pager .page-numbers,
.evx-photo__fig img, .evx-lead__fig img, .evx-related__fig img, .evx-card__fig img {
  transition: color var(--d-xs) var(--curve), background-color var(--d-xs) var(--curve),
              border-color var(--d-xs) var(--curve), box-shadow var(--d-s) var(--curve),
              transform var(--d-m) var(--curve);
}

a:hover { color: #4DFF9C; }
.entry-content a:hover { border-bottom-color: var(--on); }
.evx-nav__list a:hover, .evx-foot__list a:hover, .evx-foot__bar a:hover,
.evx-crumbs a:hover, .evx-toc a:hover, .evx-section__head a:hover { color: var(--on); }

.evx-btn:hover { background: #2BF893; color: var(--on-ink); }
.evx-btn--ghost:hover { background: var(--on-wash); color: var(--on); }
.fluentform .ff-btn-submit:hover { background: #2BF893 !important; }
.evx-ai__btn:hover, .evx-share__btn:hover { border-color: var(--on-edge); color: var(--on); }

.evx-card:hover, .evx-card:focus-within {
  transform: translateY(-.35rem); border-color: var(--on-edge); box-shadow: var(--lift2);
}
.evx-card:hover .evx-card__title { color: var(--on); }
.evx-card:hover .evx-card__fig img,
.evx-photo:hover .evx-photo__fig img,
.evx-lead__main:hover .evx-lead__fig img,
.evx-related__item:hover .evx-related__fig img { transform: scale(1.035); }
.evx-photo:hover .evx-photo__title,
.evx-lead__main:hover .evx-lead__title,
.evx-related__item:hover .evx-related__title { color: var(--on); }
.evx-index__row:hover { background: var(--s1); }
.evx-index__row:hover .evx-index__name { color: var(--on); }
.evx-list__item a:hover { color: var(--on); }
.evx-keys__item:hover { background: var(--s4); }
.evx-tablewrap tbody tr:hover { background: var(--on-wash); }
.evx-pager .page-numbers:hover { background: var(--on); border-color: var(--on); color: var(--on-ink); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.evx-btn:focus-visible, .evx-card__link:focus-visible, .evx-index__row:focus-visible,
.evx-photo:focus-visible, .evx-lead__main:focus-visible, .evx-keys__item:focus-visible,
.evx-related__item:focus-visible, .evx-tablewrap:focus-visible, .evx-burger:focus-visible {
  outline: 2px solid var(--on); outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
input:focus, textarea:focus, select:focus,
.fluentform input:focus, .fluentform textarea:focus {
  border-color: var(--on) !important;
  box-shadow: 0 0 0 3px var(--on-wash) !important;
  outline: none !important;
}
.evx-btn:active, .fluentform .ff-btn-submit:active { transform: translateY(1px); }
.evx-card:active { transform: translateY(-.15rem); }

/* -----------------------------------------------------------------------------
   14. Mouvement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .evx-reveal { opacity: 0; transform: translateY(.7rem); }
  .evx-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--d-l) var(--curve), transform var(--d-l) var(--curve); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .evx-reveal { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   15. Adaptation
   -------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  .evx-wrap, .evx-head__in, .evx-foot__in, .evx-foot__bar { padding-left: var(--sp4); padding-right: var(--sp4); }
  .evx-main { padding-top: var(--sp6); }
  .evx-specs__grid { grid-template-columns: 1fr; }
  .evx-specs__grid .evx-specs__row:nth-child(odd) { border-right: 0; }
  .evx-verdict__cols { grid-template-columns: 1fr; gap: var(--sp4); }
  .evx-hero h1 { max-width: none; }
  .evx-section__head { flex-wrap: wrap; gap: var(--sp2); }
  .entry-content table th { position: static; }
  .evx-stale { flex-direction: column; gap: var(--sp2); }
  .evx-cta { padding: var(--sp5); }
  .evx-answer { padding: var(--sp4); }
  .evx-answer p { font-size: var(--t-md); }
  .evx-keys { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .evx-keys__v { font-size: var(--t-xl); }
  .evx-article__fig { margin: var(--sp5) 0; }
}