/* ============================================================
   NTROPYX · Page de mesure (evidence.html) — reconstruction du 18.09.2026
   Donnees : rapports GBT104002131 et GBT104002132, mars 2026.

   Feuille autonome, entierement prefixee .ev-. Elle ne redefinit aucune
   regle de styles.css : en-tete, pied de page et navigation restent ceux
   du site. Aucune contre-regle, aucun !important.

   Langage : page produit Apple, mode sombre. Tuiles sans bordure sur le
   noir, typographie SF, anneaux d'activite. Une couleur par moteur, sur
   toute la page : Scania = vert (systemGreen), Caterpillar = cyan
   (systemCyan). Vert et cyan restent distincts en deuteranopie.

   Desktop et mobile sont deux compositions, pas une reduction : sur
   mobile, barre de sections collante, controles segmentes par moteur,
   tableaux recomposes en fiches, aucune image decorative telechargee.

   Chaque graphique est genere par wip/evidence-pro-20260918/
   gen_fragments.py a partir des valeurs des rapports ; ce fichier ne
   porte que la forme.
   ============================================================ */

.ev {
  /* ---- Couleurs systeme Apple, mode sombre (HIG). Chacune est definie une seule fois ;
     toute variante en derive par opacite (color-mix), jamais par une autre valeur. */
  --ev-vert: #00d959;                     /* vert de la section « Worth the upgrade? » d'apple.com/iphone-18-pro, mesure le 18.09 */
  --ev-bleu: #2997ff;                     /* bleu de « Watch the film » d'apple.com/iphone-18-pro, mesure le 18.09 */
  --ev-orange: #ff9f0a;                   /* systemOrange */
  --ev-rouge: #ff453a;                    /* systemRed */
  --ev-gris: #8e8e93;                     /* systemGray */
  --ev-gris-2: #636366;                   /* systemGray2 */
  --ev-gris-5: #2c2c2e;                   /* systemGray5 */
  --ev-gris-6: #1c1c1e;                   /* systemGray6, secondarySystemBackground */
  --ev-remplissage: rgba(120,120,128,.36);   /* systemFill */
  --ev-remplissage-3: rgba(118,118,128,.24); /* tertiarySystemFill */
  --ev-remplissage-4: rgba(118,118,128,.18); /* quaternarySystemFill */
  --ev-separateur: rgba(84,84,88,.6);        /* separator */

  /* ---- Encres : les deux couleurs de texte d'apple.com/ipad-pro, mesurees le 18.09 (fond noir,
     tuiles systemGray6). La hierarchie vient de la taille et de la graisse, pas d'un troisieme gris. */
  --ev-label: #f5f5f7;                    /* titres, valeurs, mots en surbrillance ; 15,6:1 sur la tuile */
  --ev-corps: #86868b;                    /* texte courant et secondaire ; 4,7:1 sur la tuile, 5,8:1 sur le noir */

  /* ---- Surfaces */
  --ev-tuile: var(--ev-gris-6);
  --ev-tuile-2: var(--ev-gris-5);
  --ev-trait: rgba(255,255,255,.14);
  --ev-trait-fin: rgba(255,255,255,.08);
  --ev-r-tuile: clamp(20px, 2.2vw, 28px);

  /* ---- Roles. Une couleur par moteur : Scania = vert, Caterpillar = cyan. L'effet mesure
     avec NTROPYX, commun aux deux moteurs, prend le vert ; la reference, le gris. */
  --ev-scania: var(--ev-vert);
  --ev-cat: var(--ev-bleu);
  --ev-lien: var(--ev-bleu);              /* liens, comme « Learn more » sur apple.com */
  --ev-ntx: var(--ev-vert);
  --ev-ntx-2: color-mix(in srgb, var(--ev-vert) 56%, transparent);   /* second releve (terrain, groupe 2) */
  --ev-base: var(--ev-gris);
  --ev-danger: var(--ev-rouge);
  --ev-accent: var(--ev-orange);
  --ev-emf-vif: #ff3b30;                  /* signe EMF seul : rouge systeme, apparence claire, plus vif que --ev-danger */

  /* ---- Rampes ordinales des donuts de cycle, du regime le plus bas au plus haut : opacite
     decroissante de la couleur du moteur, vert pour le Scania (ESC), cyan pour le Caterpillar (E3). */
  --ev-vert-1: var(--ev-scania);
  --ev-vert-2: color-mix(in srgb, var(--ev-scania) 78%, transparent);
  --ev-vert-3: color-mix(in srgb, var(--ev-scania) 56%, transparent);
  --ev-vert-4: color-mix(in srgb, var(--ev-scania) 40%, transparent);
  --ev-cyan-1: var(--ev-cat);
  --ev-cyan-2: color-mix(in srgb, var(--ev-cat) 78%, transparent);
  --ev-cyan-3: color-mix(in srgb, var(--ev-cat) 56%, transparent);
  --ev-cyan-4: color-mix(in srgb, var(--ev-cat) 40%, transparent);

  /* ---- Echelle typographique d'apple.com/ipad-pro, mesuree le 18.09 aux trois paliers d'Apple
     (>= 1069, 735-1068, <= 734 px). Un role = graisse, taille, interligne, police et interlettrage ;
     les paliers ne redefinissent que ces variables. SF Pro Display des 19 px (--serif), SF Pro Text
     en dessous (--font). Tailles en rem : la page suit le reglage de taille du lecteur. */
  --ev-f-affiche: 600 4rem/1 var(--serif);             --ev-l-affiche: -.02em;     /* hero-headline 64/64, -1,28 px */
  --ev-f-titre: 600 3.5rem/1.0714 var(--serif);        --ev-l-titre: -.005em;      /* site-headline 56/60, -0,28 px */
  --ev-f-chiffre: 600 3rem/1.0835 var(--serif);        --ev-l-chiffre: -.003em;    /* headline 48/52, -0,144 px */
  --ev-f-sous-titre: 600 1.75rem/1.1429 var(--serif);  --ev-l-sous-titre: .007em;  /* site-headline-reduced 28/32, +0,196 px */
  --ev-f-corps: 600 1.3125rem/1.381 var(--serif);      --ev-l-corps: .011em;       /* site-body 21/29, +0,231 px */
  --ev-f-texte: 400 1.0625rem/1.4706 var(--font);      --ev-l-texte: -.022em;      /* site-body-reduced 17/25, -0,374 px */
  --ev-f-libelle: 600 1.0625rem/1.2353 var(--font);    --ev-l-libelle: -.01em;     /* 17/21 semi-gras, -0,17 px */
  --ev-f-petit: 400 .875rem/1.4286 var(--font);        --ev-l-petit: -.016em;      /* 14/20, -0,224 px */
  --ev-f-petit-fort: 600 .875rem/1.4286 var(--font);                               /* 14/20 semi-gras, meme interlettrage */
  --ev-f-note: 400 .75rem/1.3333 var(--font);          --ev-l-note: -.01em;        /* 12/16, -0,12 px */

  --ev-sp: clamp(72px, 9vw, 148px);
  --ev-sp-m: clamp(40px, 5vw, 64px);
  /* Amorti critique : aucune apparition n'est nee d'un geste, donc aucun depassement. */
  --ev-ressort: cubic-bezier(.22, 1, .36, 1);
  --ev-tiroir: cubic-bezier(.32, .72, 0, 1);

  color: var(--ev-label);
}

/* Paliers typographiques d'Apple : seules les variables de role changent. */
@media (max-width: 1068px) {
  .ev {
    --ev-f-affiche: 600 4rem/1.0625 var(--serif);                                    /* 64/68 */
    --ev-f-titre: 600 3rem/1.0835 var(--serif);            --ev-l-titre: -.003em;      /* 48/52, -0,144 px */
    --ev-f-chiffre: 600 2.5rem/1.1 var(--serif);           --ev-l-chiffre: -.02em;     /* 40/44, -0,8 px */
  }
}
@media (max-width: 734px) {
  .ev {
    --ev-f-affiche: 600 2.5rem/1.1 var(--serif);                                     /* 40/44, -0,8 px */
    --ev-f-titre: 600 2rem/1.125 var(--serif);             --ev-l-titre: .004em;       /* 32/36, +0,128 px */
    --ev-f-chiffre: 600 2rem/1.125 var(--serif);           --ev-l-chiffre: .004em;     /* 32/36, +0,128 px */
    --ev-f-sous-titre: 600 1.3125rem/1.1905 var(--serif);  --ev-l-sous-titre: .011em;  /* 21/25, +0,231 px */
    --ev-f-corps: 600 1.1875rem/1.4211 var(--serif);       --ev-l-corps: .012em;       /* 19/27, +0,228 px */
  }
}

.ev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================================================
   Typographie : chaque texte prend un role de l'echelle d'apple.com/ipad-pro
   (variables en tete). Interlettrage propre a chaque taille : negatif sur les
   grands titres et au texte de 17 px et moins, positif de 19 a 28 px.
   ============================================================ */
.ev-t-section {
  font: var(--ev-f-titre);
  letter-spacing: var(--ev-l-titre);
  margin: 0;
  text-wrap: balance;
}
.ev-t-bloc {
  font: var(--ev-f-sous-titre);
  letter-spacing: var(--ev-l-sous-titre);
  margin: 0;
  text-wrap: balance;
}
/* Texte courant d'Apple : semi-gras gris, les mots cles en clair ou a la couleur de leur theme. */
.ev-texte {
  margin: 0;
  font: var(--ev-f-corps);
  letter-spacing: var(--ev-l-corps);
  color: var(--ev-corps);
  max-width: 62ch;
}
.ev-texte b { color: var(--ev-mot, var(--ev-label)); font-weight: 600; }
.ev-texte q,
.ev-donut__note q { color: var(--ev-label); }
.ev-note {
  margin: 0;
  font: var(--ev-f-petit);
  letter-spacing: var(--ev-l-petit);
  color: var(--ev-corps);
  max-width: 72ch;
}
.ev-note b { color: var(--ev-mot, var(--ev-label)); font-weight: 600; }
/* Mots colores par theme, comme les chiffres d'apple.com/iphone-18-pro : la couleur dit de qui
   ou de quoi parle le chiffre. Chaque gras de composant lit la variable ; sinon, sa couleur propre. */
.ev-mot--s { --ev-mot: var(--ev-scania); }
.ev-mot--c { --ev-mot: var(--ev-cat); }
.ev-mot--ntx { --ev-mot: var(--ev-ntx); }
.ev-mot--base { --ev-mot: var(--ev-base); }
.ev-mot--danger { --ev-mot: var(--ev-danger); }
.ev-mot--accent { --ev-mot: var(--ev-accent); }
.ev-note--espace { margin-top: 32px; }
.ev-note--serre { margin-top: 18px; }
.ev-note--entre { margin: 18px 0 16px; }

/* Surtitre facon Apple : court, semi-gras, sans capitales. */
.ev-repere {
  display: block;
  margin: 0;
  font: var(--ev-f-libelle);
  letter-spacing: var(--ev-l-libelle);
  color: var(--ev-accent);
}
.ev-repere--sourd { color: var(--ev-corps); }
/* Sur l'image du hero : la couleur de « MacBook Pro » sur apple.com/macbook-pro (#f5f5f7, mesure le 18.09). */
.ev-repere--clair { color: var(--ev-label); }

/* ============================================================
   Sections
   ============================================================ */
.ev-section {
  width: min(var(--max), calc(100% - 36px));
  margin-inline: auto;
  padding-block: var(--ev-sp);
  scroll-margin-top: 72px;
}
.ev-section + .ev-section { border-top: 1px solid var(--ev-trait-fin); }
.ev-tete { display: grid; gap: 14px; max-width: 980px; margin-bottom: var(--ev-sp-m); }
.ev-titres { display: grid; gap: 18px; }
.ev-bloc { display: grid; gap: 12px; max-width: 980px; margin: clamp(64px, 7vw, 112px) 0 28px; }

/* Tuile : la seule surface de la page. Jamais de tuile dans une tuile. */
.ev-tuile {
  margin: 0;
  background: var(--ev-tuile);
  border-radius: var(--ev-r-tuile);
  padding: clamp(20px, 2.8vw, 40px);
}
.ev-tuile__titre { margin: 0 0 6px; font: var(--ev-f-sous-titre); letter-spacing: var(--ev-l-sous-titre); color: var(--ev-label); }
/* Formule en chasse fixe (mesure), aux dimensions du role petit : 14/20. */
.ev-tuile__formule { margin: 0 0 20px; font: 400 .875rem/1.4286 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--ev-corps); }
.ev-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--ev-sp-m); }

/* ============================================================
   Couverture — comme apple.com/chfr/macbook-pro (reference de Frederic, 18.09) :
   l'image entiere, jamais recadree ni cachee, sur toute la largeur de la fenetre,
   surtitre et grand titre poses dessus en bas a gauche, alignes a gauche, portes
   par un fondu sombre : le bas de la photo se fond dans le noir de la page
   (Apple §12, bord de defilement), valide par Frederic le 18.09 ;
   puis l'introduction et le socle chiffre. Desktop : panorama 1916 x 821 ;
   telephone : portrait 1087 x 1447 (art direction du <picture>).
   ============================================================ */
.ev-cover {
  display: grid;
  grid-template-areas: "scene" "lead" "socle" "alerte";
  margin-bottom: clamp(48px, 6vw, 96px);
}
.ev-cover__media {
  grid-area: scene;
  margin: 0;
}
.ev-cover__media img {
  width: 100%;
  height: auto;
  display: block;
  /* Fondu sombre = masque sur l'image elle-meme, sans calque : le noir est celui de la page.
     Arrets d'une courbe adoucie (ease-in), pas un lineaire a deux arrets qui ferait bande. */
  mask-image: linear-gradient(to bottom,
    #000 40%, rgb(0 0 0 / .93) 50%, rgb(0 0 0 / .8) 58%, rgb(0 0 0 / .6) 66%,
    rgb(0 0 0 / .38) 74%, rgb(0 0 0 / .2) 82%, rgb(0 0 0 / .08) 90%, transparent 100%);
}
.ev-cover__media figcaption {
  margin: 10px max(18px, (100% - var(--max)) / 2) 0;
  text-align: right;
  color: var(--ev-corps);
  font: var(--ev-f-note);
  letter-spacing: var(--ev-l-note);
}
/* Image et titre dans la meme cellule : le titre se cale en bas de l'image, sans position absolue. */
.ev-cover__scene { display: grid; }
.ev-cover__scene > * { grid-area: 1 / 1; }
.ev-cover__copy {
  align-self: end;
  padding: 0 max(18px, (100% - var(--max)) / 2) clamp(24px, 4vw, 64px);
}
.ev-cover h1 {
  width: fit-content;
  max-width: 16ch;
  margin: 14px 0 0;
  /* Couleurs de « Fast runs in the family. » sur apple.com/macbook-pro, mesurees le 18.09 :
     degrade 90deg peint dans le texte, boite a la largeur du texte, #f5f5f7 en repli. */
  color: var(--ev-label);
  background: linear-gradient(90deg, #e4f6f0, #9dcfca 31%, #6b95ac 68%, #45657d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Taille, interligne et interlettrage : typography-hero-headline d'apple.com/ipad-pro. */
  font: var(--ev-f-affiche);
  letter-spacing: var(--ev-l-affiche);
  text-wrap: balance;
}
.ev-cover__lead {
  grid-area: lead;
  max-width: 46ch;
  margin: clamp(28px, 3.4vw, 48px) max(18px, (100% - var(--max)) / 2) 0;
  color: var(--ev-corps);
  font: var(--ev-f-corps);
  letter-spacing: var(--ev-l-corps);
}
.ev-cover__socle {
  grid-area: socle;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-inline: max(18px, (100% - var(--max)) / 2);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.ev-cover__socle div {
  min-height: 126px;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 18px 18px 18px 0;
  border-top: 1px solid var(--ev-trait-fin);
}
.ev-cover__socle span { color: var(--ev-corps); font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); }
.ev-cover__socle strong {
  color: var(--ev-scania);
  font: var(--ev-f-chiffre);
  letter-spacing: var(--ev-l-chiffre);
  font-variant-numeric: tabular-nums;
}
/* Alerte EMF : le produit craint les champs, la page le dit avant toute mesure.
   Signe d'interdiction ISO 7010 dessine sur mesure (lignes de champ d'un dipole calculees). */
.ev-alerte {
  grid-area: alerte;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px clamp(22px, 2.6vw, 36px);
  margin: clamp(20px, 2.4vw, 30px) max(18px, (100% - var(--max)) / 2) 0;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 40px);
  border-radius: var(--ev-r-tuile);
  background: linear-gradient(100deg, color-mix(in srgb, var(--ev-danger) 10%, transparent), transparent 55%), var(--ev-tuile);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-danger) 30%, transparent);
}
.ev-alerte__signe { width: clamp(72px, 6.4vw, 92px); }
.ev-alerte__titre { margin: 0; font: var(--ev-f-sous-titre); letter-spacing: var(--ev-l-sous-titre); color: var(--ev-label); text-wrap: balance; }
/* Sur le fond teinte de l'alerte, le texte prend l'encre claire : le gris y tombait a 4,4:1. */
.ev-alerte__texte { margin: 8px 0 0; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-label); max-width: 68ch; }

/* ============================================================
   Barre de sections — mobile seulement (voir la requete 620 px).
   ============================================================ */
.ev-local { display: none; }

/* ============================================================
   Guide de lecture : huit questions, chacune vers sa reponse.
   ============================================================ */
.ev-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ev-guide__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 16px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--ev-trait-fin);
}
.ev-guide__n { font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); color: var(--ev-corps); font-variant-numeric: tabular-nums; }
.ev-guide__corps { display: grid; gap: 8px; }
.ev-guide__question { margin: 0; font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); }
.ev-guide__reponse { margin: 0; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-corps); }
.ev-guide__liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
/* Lien de section en pastille : guide de lecture et alerte EMF. */
.ev-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--ev-tuile-2);
  color: var(--ev-label);
  font: var(--ev-f-petit-fort);
  letter-spacing: var(--ev-l-petit);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color .18s var(--ev-ressort), transform .12s ease-out;
}
.ev-lien:active { transform: scale(.97); }
.ev-lien:focus-visible { outline: 2px solid var(--ev-cat); outline-offset: 2px; }

/* ============================================================
   Synthese : quatre tuiles, le chiffre en tete.
   ============================================================ */
/* Rangees partagees (sous-grille) : chiffres, titres, preuves et liens alignes d'une tuile a l'autre. */
.ev-piliers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ev-pilier { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 12px; }
.ev-pilier__chiffre {
  font: var(--ev-f-chiffre);
  letter-spacing: var(--ev-l-chiffre);
  color: var(--ev-ntx);
  font-variant-numeric: tabular-nums;
}
.ev-pilier__titre { margin: 0; font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); }
.ev-pilier__preuve { margin: 0; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-corps); }
.ev-pilier__lien { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; color: var(--ev-lien); font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); text-decoration: none; }
.ev-pilier__lien::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }

/* Source : attribution facon McKinsey, marques du laboratoire telles qu'imprimees. */
.ev-source { margin: 32px 0 0; display: grid; gap: 18px; }
.ev-source__texte { font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); max-width: 80ch; }
.ev-source__texte b { color: var(--ev-label); font-weight: 600; margin-right: 6px; }
.ev-source__marques {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: 18px 28px;
  border-radius: var(--r-m);
  background: #ffffff;
}
.ev-source__marques img { height: 40px; width: auto; display: block; }

/* ============================================================
   Controle segmente par moteur : masque ici, compose sur telephone
   (bloc @supports en fin de feuille).
   ============================================================ */
.ev-bascule__choix { display: none; }

/* ============================================================
   Bancs
   ============================================================ */
.ev-banc { display: grid; align-content: start; }
/* Le cadre fixe la hauteur ; l'image le remplit et s'y contient. */
.ev-banc__photo { margin: -8px 0 24px; height: clamp(220px, 20vw, 290px); }
.ev-banc__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Pastille de rapport : pleine pour le laboratoire accredite, en filet pour le releve de terrain. */
.ev-banc__rapport {
  justify-self: start;
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: var(--ev-label);          /* encre claire sur la pastille systemGray5 : le gris y tombait a 3,9:1 */
  font: var(--ev-f-petit);
  letter-spacing: var(--ev-l-petit);
  font-variant-numeric: tabular-nums;
}
.ev-banc__rapport--labo { background: var(--ev-tuile-2); }
.ev-banc__rapport--terrain { box-shadow: inset 0 0 0 1px var(--ev-trait); }
.ev-banc__moteur { margin: 0 0 4px; font: var(--ev-f-sous-titre); letter-spacing: var(--ev-l-sous-titre); }
.ev-banc__role { margin: 0 0 22px; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-corps); }
.ev-specs { display: grid; gap: 0; margin: 0; }
.ev-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ev-trait-fin); font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); }
.ev-specs dt { color: var(--ev-corps); }
.ev-specs dd { margin: 0; color: var(--ev-label); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Protocole : sept phases
   ============================================================ */
.ev-phases { display: grid; margin: 0; padding: 0; list-style: none; }
.ev-phase {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0 20px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--ev-trait-fin);
}
.ev-phase__n { font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-corps); font-variant-numeric: tabular-nums; }
.ev-phase__quoi { font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-label); }
.ev-phase__etat { font: var(--ev-f-petit-fort); letter-spacing: var(--ev-l-petit); white-space: nowrap; }
.ev-phase__etat--oui { color: var(--ev-ntx); }
.ev-phase__etat--non { color: var(--ev-corps); }

/* Ponderation des cycles */
.ev-cycles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ev-donut {
  display: grid;
  grid-template-columns: minmax(120px, 176px) minmax(0, 1fr);
  grid-template-areas: "titre titre" "anneau legende";
  gap: 22px 32px;
  align-items: center;
}
.ev-donut__titre { grid-area: titre; display: grid; gap: 4px; color: var(--ev-corps); }
.ev-donut__titre b { font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); color: var(--ev-mot, var(--ev-label)); }
.ev-donut__titre span { font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); }
.ev-donut__svg { grid-area: anneau; width: 100%; height: auto; display: block; }
.ev-seg { fill: none; stroke-width: 11; }
/* Segment (anneau) et pastille de legende portent le meme token : la legende a la couleur exacte du segment.
   s = cycle ESC du Scania, c = cycle E3 du Caterpillar ; les ecarts restent lisibles en gris. */
.ev-seg--s1 { stroke: var(--ev-vert-1); }
.ev-seg--s2 { stroke: var(--ev-vert-2); }
.ev-seg--s3 { stroke: var(--ev-vert-3); }
.ev-seg--s4 { stroke: var(--ev-vert-4); }
.ev-seg--c1 { stroke: var(--ev-cyan-1); }
.ev-seg--c2 { stroke: var(--ev-cyan-2); }
.ev-seg--c3 { stroke: var(--ev-cyan-3); }
.ev-seg--c4 { stroke: var(--ev-cyan-4); }
.ev-seg-fond--s1 { background: var(--ev-vert-1); }
.ev-seg-fond--s2 { background: var(--ev-vert-2); }
.ev-seg-fond--s3 { background: var(--ev-vert-3); }
.ev-seg-fond--s4 { background: var(--ev-vert-4); }
.ev-seg-fond--c1 { background: var(--ev-cyan-1); }
.ev-seg-fond--c2 { background: var(--ev-cyan-2); }
.ev-seg-fond--c3 { background: var(--ev-cyan-3); }
.ev-seg-fond--c4 { background: var(--ev-cyan-4); }
/* Onze analyses, communes aux deux carburants : couleur de l'effet NTROPYX, pas celle d'un moteur. */
.ev-seg--ntx { stroke: var(--ev-ntx); }
.ev-donut__valeur { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.03em; fill: var(--ev-label); }
.ev-donut__unite { font-family: var(--font); font-size: 8.5px; font-weight: 600; fill: var(--ev-corps); }
.ev-donut__legende { grid-area: legende; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ev-donut__legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-corps); }
.ev-donut__legende b { font-weight: 600; color: var(--ev-label); font-variant-numeric: tabular-nums; }
.ev-pastille { width: 12px; height: 12px; border-radius: 4px; align-self: center; }
.ev-donut--seul { grid-template-columns: 1fr; grid-template-areas: "anneau" "note"; justify-items: center; }
.ev-donut--seul .ev-donut__svg { max-width: 210px; }
.ev-donut__note { grid-area: note; margin: 0; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); text-align: center; max-width: 34ch; }

/* ============================================================
   Faits : grille posee sur le fond
   ============================================================ */
.ev-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin: 0; }
.ev-fait { display: grid; gap: 6px; align-content: start; padding: 20px 0 22px; border-top: 1px solid var(--ev-trait-fin); }
.ev-fait dt { font: var(--ev-f-petit-fort); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-fait dd { margin: 0; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-label); }
.ev-fait dd small { display: block; margin-top: 6px; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }

/* ============================================================
   Tableaux de donnees : toujours visibles. Desktop : defilement dans leur
   cadre si besoin. Mobile : recomposes en fiches (requete 620 px).
   ============================================================ */
.ev-tableau table { width: 100%; border-collapse: collapse; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); }
.ev-tableau caption { caption-side: top; text-align: left; padding: 0 0 14px; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-label); }
.ev-tableau thead th { font: var(--ev-f-petit-fort); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-tableau tbody th { font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-tableau td { font-variant-numeric: tabular-nums; }
.ev-tableau td:first-child { color: var(--ev-label); }
.ev-tableau th + td { color: var(--ev-label); }
.ev-tableau td:not(:first-child):not(th + td) { color: var(--ev-corps); }
/* Mise en page en tableau au-dessus de 620 px ; en dessous, fiches (bloc 620). Plages exclusives :
   aucune regle de l'une n'a a defaire l'autre. */
@media (min-width: 621px) {
  .ev-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ev-tableau :is(th, td) { padding-block: 12px; padding-right: 14px; vertical-align: baseline; }
  .ev-tableau :is(th, td):first-child { padding-left: 0; }
  .ev-tableau :is(th, td):not(:first-child) { padding-left: 14px; }
  .ev-tableau :is(th, td):first-child,
  .ev-tableau th + td { text-align: left; }
  .ev-tableau :is(th, td):not(:first-child):not(th + td) { text-align: right; }
  .ev-tableau thead th { border-bottom: 1px solid var(--ev-trait); }
  .ev-tableau tbody :is(th, td) { border-bottom: 1px solid var(--ev-trait-fin); }
  .ev-tableau tbody th { width: 44%; }
}
.ev-duo-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
/* Tableaux empiles : l'ecart vient du conteneur, jamais du tableau. */
.ev-pile { display: grid; gap: 28px; }
.ev-tuile__tableau { margin-top: 20px; }

/* ============================================================
   Onze analyses
   ============================================================ */
.ev-analyses { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.ev-analyses__corps { display: grid; gap: 24px; }
.ev-liste-analyses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; counter-reset: analyse; }
.ev-liste-analyses li { counter-increment: analyse; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 13px 0; border-top: 1px solid var(--ev-trait-fin); }
.ev-liste-analyses li::before { content: counter(analyse, decimal-leading-zero); grid-row: span 2; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-ntx); font-variant-numeric: tabular-nums; }
.ev-liste-analyses span { font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-label); }
.ev-liste-analyses small { font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }

/* ============================================================
   Cetane
   ============================================================ */
.ev-cetane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ev-cetane__texte { display: grid; gap: 16px; }
.ev-cetane__svg { width: 100%; height: auto; display: block; }
.ev-cetane__fleche { fill: none; stroke: var(--ev-scania); stroke-width: 2.2; }
.ev-cetane__pointe { fill: var(--ev-scania); }
.ev-cetane__index { stroke: var(--ev-accent); stroke-width: 2; stroke-dasharray: 3 3; }

/* ============================================================
   Mosaique des resultats (bento)
   ============================================================ */
.ev-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ev-bento__tuile { display: grid; align-content: space-between; gap: 18px; }
/* Taille par variable : .ev-bento pose sa valeur (168), .ev-bento--margin5 la sienne (156). Une
   seule declaration de max-width : jamais une seconde regle qui la corrige par-dessus. */
.ev-bento__anneau { width: 100%; max-width: var(--ev-anneau-mx, 168px); justify-self: center; }
/* Photo du navire (section 12) : seule tuile large de la page, sur toute la hauteur de la rangee (etiree, pas centree). */
.ev-bento__tuile--large { grid-column: span 2; grid-row: span 2; }
/* Section 05 seule : meme gabarit que .ev-anneaux (section Margin), 5 cartes identiques par rangee,
   meme anneau. Composant distinct : .ev-bento (ci-dessus) garde sa forme d'origine pour la section 12. */
.ev-bento--margin5 { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; --ev-anneau-mx: 156px; }
/* styles.css pose hyphens: none via :where() (priorite nulle) : le navigateur ignore alors les cesures
   douces. Ici, manual = il ne coupe que la ou le texte porte une cesure, jamais de lui-meme. */
.ev :where(h1, h2, h3, h4, p, li, span, strong, em, a, figcaption) { hyphens: manual; }
.ev-bento__texte { display: grid; gap: 8px; }
.ev-bento__nom { margin: 0; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); }
/* Une valeur par ligne, dans toutes les tuiles de la rangee. */
.ev-bento__valeurs { margin: 0; display: grid; gap: 4px; justify-items: start; }
.ev-bento__abs { margin: 0; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); font-variant-numeric: tabular-nums; }
/* Chiffres : role chiffre (headline d'Apple) ; la tuile large passe au role affiche par ses variables. */
.ev-v { font: var(--ev-v-f, var(--ev-f-chiffre)); letter-spacing: var(--ev-v-l, var(--ev-l-chiffre)); font-variant-numeric: tabular-nums; }
/* Terrain (M/V KAYRA) : couleur de l'effet NTROPYX, pas celle d'un moteur de banc. */
.ev-v--terrain { color: var(--ev-ntx); }
.ev-v--terrain-2 { color: var(--ev-ntx-2); }

/* ============================================================
   Anneaux d'activite (mosaique, marge, terrain)
   ============================================================ */
.ev-anneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ev-anneau { display: grid; justify-items: center; text-align: center; }
.ev-anneau__svg { width: 100%; max-width: 156px; height: auto; display: block; }
.ev-arc { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ev-arc--piste-s { stroke: color-mix(in srgb, var(--ev-scania) 16%, transparent); stroke-linecap: butt; }
.ev-arc--piste-c { stroke: color-mix(in srgb, var(--ev-cat) 16%, transparent); stroke-linecap: butt; }
.ev-arc--piste-b { stroke: var(--ev-remplissage-4); stroke-linecap: butt; }
.ev-arc--piste-ntx { stroke: color-mix(in srgb, var(--ev-ntx) 16%, transparent); stroke-linecap: butt; }
.ev-arc--scania { stroke: var(--ev-scania); }
.ev-arc--cat { stroke: var(--ev-cat); }
.ev-arc--base { stroke: var(--ev-base); }
/* Terrain (M/V KAYRA) : effet NTROPYX, vert systeme, puis le meme vert a 56 % pour le second releve. */
.ev-arc--terrain { stroke: var(--ev-ntx); }
.ev-arc--terrain-2 { stroke: var(--ev-ntx-2); }
/* Traces (arcs, rayons, barre EMF) : plein par defaut ; --attente = vide, pose et retire par le JS. */
.ev-trace { stroke-dashoffset: var(--ev-plein); transition: stroke-dashoffset 1s var(--ev-ressort) .09s; }
.ev-trace--2 { transition-delay: .21s; }
.ev-trace--attente { stroke-dashoffset: var(--ev-vide); }
.ev-anneau__v1 { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -.02em; fill: var(--ev-scania); font-variant-numeric: tabular-nums; }
.ev-anneau__v2 { font-family: var(--serif); font-size: 12px; font-weight: 600; fill: var(--ev-cat); font-variant-numeric: tabular-nums; }
.ev-anneau__v1--neutre { fill: var(--ev-label); }
.ev-anneau__v1--ntx { fill: var(--ev-ntx); }
/* L'unite sort de l'anneau : texte HTML, a la taille du texte, jamais serre contre le trait. */
.ev-anneau__unite { margin: 8px 0 0; font: var(--ev-f-petit-fort); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-anneau__nom { margin: 16px 0 0; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-label); }
.ev-anneau__cadre { margin: 4px 0 0; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-anneau__gain { margin: 10px 0 0; font: var(--ev-f-petit-fort); letter-spacing: var(--ev-l-petit); color: var(--ev-ntx); }

/* Table jumelle : toute valeur reste atteignable sans survol. */
.ev-jumelle { margin-top: 28px; }
.ev-jumelle summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font: var(--ev-f-texte);
  letter-spacing: var(--ev-l-texte);
  color: var(--ev-lien);
  touch-action: manipulation;
}
.ev-jumelle summary:active { transform: scale(.97); }
.ev-jumelle summary::-webkit-details-marker { display: none; }
.ev-jumelle summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ev-ressort); }
.ev-jumelle[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ============================================================
   Graphes SVG : vocabulaire commun
   ============================================================ */
.ev-haltere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ev-haltere__svg,
.ev-soufre__svg,
.ev-rendement__svg { width: 100%; height: auto; display: block; }
/* Plafond de largeur : textes du rendement a 12 px (axe) et 14 px, comme l'haltere et le cetane. */
.ev-rendement__svg { max-width: 308px; margin-inline: auto; }
.ev-soufre { margin: 20px 0; }
.ev-g-grille { stroke: var(--ev-trait-fin); stroke-width: 1; }
.ev-g-axe-trait { stroke: var(--ev-trait); stroke-width: 1.5; }
/* Textes des graphes, en unites du viewBox : 11 px pour l'axe, 13 px pour le reste. Un graphe dont le
   viewBox est trop large pour le telephone fixe une taille unique a ses textes par --ev-g-taille,
   posee sur sa propre racine SVG : une seule declaration de taille par classe, aucun selecteur de contexte. */
.ev-g-axe { font-family: var(--font); font-size: var(--ev-g-taille, 11px); fill: var(--ev-corps); font-variant-numeric: tabular-nums; }
.ev-g-titre { font-family: var(--font); font-size: var(--ev-g-taille, 13px); font-weight: 600; fill: var(--ev-label); }
.ev-g-lib { font-family: var(--font); font-size: var(--ev-g-taille, 13px); fill: var(--ev-corps); }
.ev-g-val { font-family: var(--serif); font-size: var(--ev-g-taille, 13px); font-weight: 600; fill: var(--ev-label); font-variant-numeric: tabular-nums; }
.ev-g-val--s { fill: var(--ev-scania); }
.ev-g-val--c { fill: var(--ev-cat); }
.ev-g-val--fin { font-weight: 500; fill: var(--ev-label); }
.ev-g-lien--s { stroke: color-mix(in srgb, var(--ev-scania) 36%, transparent); stroke-width: 1.5; }
.ev-g-lien--c { stroke: color-mix(in srgb, var(--ev-cat) 36%, transparent); stroke-width: 1.5; }
/* Incertitude elargie : trait fin a bouts plats, moustache a chaque borne. La longueur dessinee
   est exactement l'incertitude du rapport ; la couleur est celle du moteur (reference en gris). */
.ev-g-u { stroke: var(--ev-corps); stroke-width: 2; stroke-linecap: butt; }
.ev-g-u--s { stroke: var(--ev-scania); }
.ev-g-u--c { stroke: var(--ev-cat); }
.ev-g-base { fill: var(--ev-base); }
.ev-g-traite--s { fill: var(--ev-scania); }
.ev-g-traite--c { fill: var(--ev-cat); }
.ev-g-barre--calc { fill: var(--ev-remplissage); }
.ev-g-barre--mes { fill: var(--ev-cat); }

/* Rendement : texte a gauche, graphes generes (vocabulaire .ev-g-*) a droite. */
.ev-rendement { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ev-rendement__texte { display: grid; gap: 18px; }

/* ============================================================
   Conformite : barres pleines, plafond en trait rouge
   ============================================================ */
.ev-jauge { margin-top: 24px; }
.ev-jauge__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ev-jauge__nom { font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-label); }
.ev-jauge__limite { font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); font-variant-numeric: tabular-nums; }
.ev-jauge__piste { position: relative; height: 26px; }
/* Le trait rouge marque le plafond ; la valeur est ecrite en tete de jauge. */
.ev-jauge__seuil { position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--ev-danger); }
.ev-jauge__barre { position: absolute; left: 0; height: 9px; border-radius: var(--r-pill); }
.ev-jauge__barre--base { top: 0; background: var(--ev-base); }
.ev-jauge__barre--s { top: 15px; background: var(--ev-scania); }
.ev-jauge__barre--c { top: 15px; background: var(--ev-cat); }

/* Legendes : pastilles a la couleur exacte de ce qu'elles designent */
.ev-legende { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ev-legende i { display: inline-block; border-radius: 2px; }
/* Chaque marqueur pose sa taille et sa couleur une seule fois. */
.ev-legende__s { width: 16px; height: 4px; background: var(--ev-scania); }
.ev-legende__c { width: 16px; height: 4px; background: var(--ev-cat); }
.ev-legende__base { width: 16px; height: 4px; background: var(--ev-base); }
.ev-legende__u { width: 16px; height: 2px; background: var(--ev-corps); }
.ev-legende__seuil { width: 2px; height: 14px; background: var(--ev-danger); }

/* ============================================================
   Champs electromagnetiques
   ============================================================ */
/* Signe EMF : anneau et barre ISO 7010 en rouge systeme eclaire en haut a gauche, champ en blanc
   froid qui s'efface vers l'exterieur, halo sombre qui detache la barre des lignes qu'elle coupe. */
/* Clignote : le signe alerte avant toute lecture, comme un temoin de danger reel. Amorti critique
   a l'arret haut (pas de saut), ralenti sous mouvement reduit plutot que retire (Apple §14). */
.ev-emf { display: block; width: 100%; height: auto; animation: evEmfClignote 1.6s ease-in-out infinite; }
@keyframes evEmfClignote { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .ev-emf { animation-duration: 4s; }
}
/* Arrets des degrades evEmfAnneau et evEmfDisque (defs de la page) : rouge systeme, opacite portee par chaque arret. */
.ev-emf__teinte { stop-color: var(--ev-emf-vif); }
.ev-emf__disque { fill: url(#evEmfDisque); stroke: url(#evEmfAnneau); stroke-width: 10; }
.ev-emf__reflet { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: .6; }
.ev-emf__ligne { fill: none; stroke: var(--ev-label); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ev-emf__ligne--1 { opacity: .95; }
.ev-emf__ligne--2 { opacity: .7; }
.ev-emf__ligne--3 { opacity: .48; }
.ev-emf__ligne--4 { opacity: .3; }
.ev-emf__aimant { fill: var(--ev-gris-6); stroke: var(--ev-label); stroke-width: 1.4; }
.ev-emf__pole-n { fill: var(--ev-label); }
.ev-emf__halo { stroke: rgba(0, 0, 0, .6); stroke-width: 13; }
.ev-emf__barre { stroke: url(#evEmfAnneau); stroke-width: 8; }
.ev-tete__signe { width: clamp(88px, 8vw, 120px); }
/* Trois rayons, trois centres, une echelle : chaque tuile porte la meme regle 0-15 m. */
.ev-rayons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ev-rayon { display: grid; align-content: start; }
.ev-rayon__svg { width: 100%; max-width: 264px; height: auto; display: block; justify-self: center; margin: 0 0 24px; }
.ev-rayon__cadre { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
.ev-rayon__anneau { fill: none; stroke: var(--ev-accent); stroke-width: 1.5; }
.ev-rayon__regle { stroke: var(--ev-trait); stroke-width: 1; }
.ev-rayon__trait { stroke: rgba(255,255,255,.26); stroke-width: 1; }
.ev-rayon__trait--in { stroke: color-mix(in srgb, var(--ev-accent) 85%, transparent); }
.ev-rayon__couvert { stroke: var(--ev-accent); stroke-width: 2; }
.ev-rayon__bout { fill: var(--ev-accent); }
.ev-rayon__chiffre { font: 600 11px var(--font); fill: var(--ev-corps); font-variant-numeric: tabular-nums; }
.ev-rayon__glyphe { fill: var(--ev-tuile); stroke: var(--ev-label); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.ev-rayon__m { margin: 0; font: var(--ev-f-affiche); letter-spacing: var(--ev-l-affiche); color: var(--ev-accent); font-variant-numeric: tabular-nums; }
.ev-rayon__m span { margin-left: .1em; font-size: .4em; letter-spacing: -.01em; color: var(--ev-corps); }
.ev-rayon__nom { margin: 16px 0 8px; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-label); }
.ev-rayon__txt { margin: 0; font: var(--ev-f-texte); letter-spacing: var(--ev-l-texte); color: var(--ev-corps); }
.ev-rayon__src { margin: 16px 0 0; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-faits--glyphes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.ev-isole__glyphe { width: 28px; height: 28px; display: block; margin-bottom: 14px; color: var(--ev-accent); }

/* ============================================================
   Dilution : echelle
   ============================================================ */
.ev-echelle { position: relative; height: 2px; margin: 58px 0 0; border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ev-accent) 55%, transparent), var(--ev-separateur)); }
.ev-cran { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.ev-cran__point { width: var(--ev-cran-d, 10px); height: var(--ev-cran-d, 10px); border-radius: 50%; background: var(--ev-cran-teinte, var(--ev-corps)); border: 2px solid var(--fond); }
/* Variantes du cran, par variables : le dosage des deux bancs prend la couleur de l'effet NTROPYX, la technologie pure l'orange. */
.ev-cran--actif { --ev-cran-teinte: var(--ev-ntx); --ev-cran-d: 14px; }
.ev-cran--pur { --ev-cran-teinte: var(--ev-accent); }
.ev-cran__etiq { position: absolute; bottom: 22px; white-space: nowrap; text-align: center; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
.ev-cran__etiq b { display: block; margin-bottom: 3px; font: var(--ev-f-libelle); letter-spacing: var(--ev-l-libelle); color: var(--ev-cran-teinte, var(--ev-label)); }
.ev-cran__sous { position: absolute; top: 22px; white-space: nowrap; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
/* Pied de l'echelle : role du texte courant ; seule sa distance a l'echelle lui est propre. */
.ev-echelle__pied { margin: 82px 0 0; font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); color: var(--ev-corps); max-width: 62ch; }
.ev-echelle__pied b { color: var(--ev-mot, var(--ev-label)); font-weight: 600; }

/* ============================================================
   Terrain
   ============================================================ */
/* Plus de figcaption : la tuile n'a qu'un seul enfant (l'image). .ev-bento__tuile pose
   align-content: space-between pour les tuiles a plusieurs lignes (nom/valeurs/abs) ; ici une
   seule ligne doit occuper toute la hauteur, donc stretch au lieu de l'espacement herite.
   margin: 0 — la figure n'a plus la classe .ev-tuile (qui posait margin:0), la marge par
   defaut du navigateur sur <figure> (1em) decalait l'image de 16px en haut et en bas. */
.ev-bento__photo { margin: 0; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
/* Objet carre (1400x1400) : cover pour remplir la tuile sans bandes vides. Pas de max-height : l'image
   doit occuper toute la hauteur disponible (base a base avec les 4 autres cartes), jamais moins. */
.ev-bento__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ev-r-tuile); display: block; }
.ev-terrain__texte { margin: var(--ev-sp-m) 0 0; font: var(--ev-f-corps); letter-spacing: var(--ev-l-corps); color: var(--ev-corps); max-width: 52ch; }
/* "+1.28 kt" (section 12) : la valeur et son unite ne se separent jamais quand la carte retrecit. */
.ev-v--nowrap { white-space: nowrap; }
.ev-espace { margin-top: var(--ev-sp-m); }
.ev-cadre__notes { display: grid; gap: 16px; }

/* ============================================================
   Perimetre et references
   ============================================================ */
/* Le cadre est une .ev-tuile (surface, rayon, marge interne) ; il n'ajoute que sa grille. */
.ev-cadre { display: grid; gap: 22px; }
.ev-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin-top: var(--ev-sp-m); }

/* ============================================================
   Apparition — recette de finition : opacite, 8 px, flou leger.
   Visible par defaut : sans JS, rien n'est masque. Le JS pose l'etat
   d'attente sur les seuls blocs hors ecran et le retire a leur entree ;
   sous mouvement reduit, il ne le pose jamais.
   ============================================================ */
.ev-monte { transition: opacity .45s var(--ev-ressort), transform .45s var(--ev-ressort), filter .45s var(--ev-ressort); }
.ev-monte--attente { opacity: 0; transform: translate3d(0, 8px, 0); filter: blur(4px); }

/* Reperes de position des bandes : poses par le JS, visibles au telephone seulement. */
.ev-points { display: none; }

/* ============================================================
   Tablette
   ============================================================ */
@media (max-width: 900px) {
  .ev-duo,
  .ev-cycles,
  .ev-duo-tables,
  .ev-analyses,
  .ev-cetane,
  .ev-haltere,
  .ev-refs,
  .ev-rendement,
  .ev-guide { grid-template-columns: 1fr; }
  .ev-piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-faits--glyphes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-phase { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 14px; }
  /* En colonne etroite, l'echelle devient une liste : un cran par ligne. */
  .ev-echelle { position: static; margin: 0; height: auto; background: none; display: grid; gap: 26px; }
  .ev-cran { position: static; transform: none; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 14px; align-items: start; justify-items: start; }
  .ev-cran__point { grid-row: 1; grid-column: 1; margin-top: 6px; }
  .ev-cran__etiq { position: static; grid-row: 1; grid-column: 2; bottom: auto; text-align: left; }
  .ev-cran__sous { position: static; grid-row: 2; grid-column: 2; top: auto; margin-top: 5px; white-space: normal; }
  .ev-echelle__pied { margin-top: 34px; }
  /* Rayons : ligne de spec des 900 px — cadran a gauche, chiffre et nom a droite, texte sur toute
     la largeur. En trois colonnes etroites, les graduations tombaient sous 9 px. */
  .ev-rayons { grid-template-columns: 1fr; gap: 12px; }
  .ev-rayon { grid-template-columns: 132px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .ev-rayon__svg { grid-row: 1 / span 2; margin: 0; }
  .ev-rayon__m { grid-column: 2; align-self: end; }
  .ev-rayon__nom { grid-column: 2; align-self: start; margin: 10px 0 0; }
  .ev-rayon__txt,
  .ev-rayon__src { grid-column: 1 / -1; }
  .ev-rayon__txt { margin-top: 18px; }
  .ev-rayon__chiffre { font-size: 19px; }
}

/* ============================================================
   Telephone — composition propre, pas une reduction du desktop.
   ============================================================ */
@media (max-width: 620px) {
  /* Couverture : l'image portrait (1087 x 1447) arrive par le <picture>, entiere ;
     seul le socle chiffre passe en une colonne, chaque intitule au-dessus de son chiffre. */
  .ev-cover__socle { grid-template-columns: 1fr; gap: 0; }
  .ev-cover__socle div { min-height: 0; gap: 6px; padding: 16px 0; }
  .ev-alerte { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 16px 18px; padding: 20px; }
  .ev-alerte__signe { width: 56px; }
  .ev-alerte__lien { grid-column: 1 / -1; justify-self: start; }

  .ev { --ev-sp: 64px; }
  .ev-tete { margin-bottom: 32px; }
  .ev-bloc { margin: 56px 0 20px; }

  /* Barre de sections collante juste sous l'en-tete du site (sa hauteur, mesuree en continu
     par le JS, arrive dans --ev-entete), matiere translucide, section active en evidence. */
  .ev-local {
    display: block;
    position: sticky;
    top: var(--ev-entete, 82px);
    z-index: 30;
    margin: 0;
    padding: 10px 0;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  /* Le fondu de bord appartient au contenu, jamais a la matiere : masquer la barre rendait son
     fond transparent sur les 12 % de droite et le texte de la page la traversait (mesure iPhone,
     19/09/2026). La liste porte donc le defilement et le fondu ; la barre reste une matiere pleine. */
  .ev-local__liste {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0 64px 0 max(16px, env(safe-area-inset-left));
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .ev-local__liste > li { flex: 0 0 auto; }
  .ev-local__liste::-webkit-scrollbar { display: none; }
  .ev-local__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    color: var(--ev-corps);
    font: var(--ev-f-petit);
    letter-spacing: var(--ev-l-petit);
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s var(--ev-ressort), color .18s var(--ev-ressort);
  }
  .ev-local__liste a[aria-current="true"] { background: var(--ev-tuile-2); color: var(--ev-label); }
  /* L'ancre s'arrete 18 px sous l'en-tete ; la marge interne de la section (64 px) degage la barre. */
  .ev-section { scroll-margin-top: calc(var(--ev-entete, 82px) + 18px); }

  .ev-guide__item { grid-template-columns: 36px minmax(0, 1fr); padding: 22px 0; }

  /* Bandes glissees, sur le modele de la galerie « Get the highlights » d'apple.com/iphone-18-pro
     (mesuree le 18.09 : cartes a 20 px d'ecart, aimantees au debut, la suivante depasse de la marge).
     Un groupe de meme nature devient une rangee horizontale. Defilement natif (suivi du doigt, elan et
     rebond iOS), aimantation sur chaque carte. Rien n'est masque ni retire. */
  .ev-bande {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--ev-bande-carte, 86%);
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ev-bande::-webkit-scrollbar { display: none; }
  .ev-bande > * { scroll-snap-align: start; }
  /* Pose dans une section : la bande va jusqu'aux bords de l'ecran ; carte = largeur utile - ecart,
     la suivante depasse de la largeur de la marge, comme chez Apple. */
  .ev-bande--plein { --ev-bande-carte: calc(100% - 20px); margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  /* Navigation a points d'apple.com : pastille de verre sombre (#2a2a2d a 72 %, flou 7 px, 56 px de haut,
     32 px sous les cartes), points de 8 px, l'actif s'allonge a 32 px. Chaque point fait glisser la bande. */
  .ev-points {
    --ev-point-m: 8px;
    display: flex;
    align-items: center;
    width: fit-content;
    height: 56px;
    margin: 32px auto 0;
    padding: 0 16px;
    border-radius: 28px;
    background: rgba(42, 42, 45, .72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  /* Au-dela de 8 cartes, les points se resserrent pour tenir dans la largeur du telephone. */
  .ev-points:has(> :nth-child(9)) { --ev-point-m: 4px; }
  .ev-points__point {
    width: 8px;
    height: 8px;
    margin: 0 var(--ev-point-m);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .36);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .25s linear;
  }
  .ev-points__point--actif { width: 32px; background: var(--ev-label); }

  .ev-phase { grid-template-columns: 30px minmax(0, 1fr) auto; }

  .ev-donut { grid-template-columns: 112px minmax(0, 1fr); gap: 18px 20px; }
  .ev-donut--seul { grid-template-columns: 1fr; }
  .ev-donut--seul .ev-donut__svg { max-width: 168px; }
  /* Unite au centre des donuts : 13 unites, soit 12 px au moins dans le plus petit donut (112 px). */
  .ev-donut__unite { font-size: 13px; }
  .ev-liste-analyses { grid-template-columns: 1fr; }

  /* Graphes : une taille unique de texte, posee sur la racine du graphe, pour 12 px rendus au moins
     des 360 px de large (mesure : haltere 12,4 ; cetane 12,1 ; soufre 12,5 ; rendement 12,8). */
  .ev-haltere__svg { --ev-g-taille: 18px; }
  .ev-cetane__svg { --ev-g-taille: 22px; }
  .ev-soufre__svg { --ev-g-taille: 20px; }
  .ev-rendement__svg { --ev-g-taille: 13px; }

  /* Mosaique restee en grille (terrain) : ecart serre. La mosaique des resultats (05) est une bande. */
  .ev-bento:not(.ev-bande) { gap: 12px; }
  /* Photo du navire (section 12) : le placement 2 x 2 du desktop tombe, la tuile redevient une carte. */
  .ev-bento__tuile--large { grid-column: auto; grid-row: auto; }
  .ev-bento__anneau { max-width: 132px; }

  .ev-anneau__svg { max-width: 124px; }

  /* Tableaux recomposes en fiches : chaque ligne devient un bloc lisible au pouce,
     chaque valeur porte l'intitule de sa colonne (data-label pose a l'assemblage). */
  .ev-tableau :is(table, tr, th) { display: block; }
  .ev-tableau td:is(:first-child, :not([data-label])) { display: block; }
  .ev-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ev-tableau caption { display: block; }
  /* Une ligne de tableau sur telephone a deux vies, ecrites une fois chacune, sans que l'une
     annule l'autre : empilee, elle est une ligne de liste separee par un trait ; glissee dans une
     bande, elle est une carte. Sans la carte, le lecteur voyait du texte nu surmonte d'une pastille
     de points rattachee a rien de visible (retour de Frederic, 19/09/2026 : « on ne sait pas ce
     qu'est cette bande »). Memes jetons que .ev-tuile : aucune valeur nouvelle. */
  .ev-tableau tbody:not(.ev-bande) > tr { padding: 14px 0; border-bottom: 1px solid var(--ev-trait-fin); }
  .ev-tableau tbody.ev-bande > tr {
    padding: clamp(20px, 2.8vw, 40px);
    /* systemGray5 et non systemGray6 : ces cartes se posent presque toujours DANS une tuile.
       Au meme gris que leur support elles disparaissent — carte dans carte, aucune demarcation
       (mesure du 19/09/2026 : fond identique rgb(28,28,30) des deux cotes). Apple §12 : une
       surface posee sur une surface change de poids, sinon la hierarchie s'effondre. */
    background: var(--ev-tuile-2);
    border-radius: var(--ev-r-tuile);
  }
  .ev-tableau th,
  .ev-tableau td:not(:first-child) { padding: 3px 0; }
  /* Titre de fiche : la valeur de la premiere colonne, en semi-gras. */
  .ev-tableau td:first-child { padding: 3px 0 6px; font-weight: 600; }
  .ev-tableau th,
  .ev-tableau td:is(:first-child, :not([data-label])) { text-align: left; }
  .ev-tableau td[data-label]:not(:first-child) { display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .ev-tableau td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--ev-corps); text-align: left; }
  /* Tableaux de rendement : le titre de chaque fiche rappelle l'intitule de sa colonne (Point, mode E3 · poids). */
  .ev-tableau--intitule td:first-child::before { content: attr(data-label); display: block; margin-bottom: 2px; font: var(--ev-f-petit); letter-spacing: var(--ev-l-petit); color: var(--ev-corps); }
  .ev-tableau tbody th { font-weight: 600; }

  .ev-faits--glyphes dt { display: flex; align-items: center; gap: 12px; }
  .ev-isole__glyphe { width: 24px; height: 24px; margin: 0; }
}

/* Photos moteurs, navire, marques du laboratoire et la phrase qui les cite : desktop uniquement.
   Telephone en portrait comme en paysage, tablette tactile : masquees. Ces images sont en
   loading="lazy" : masquees, elles ne sont jamais demandees au reseau. */
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
  .ev-banc__photo,
  .ev-bento__photo,
  .ev-source__marques,
  .ev-source__mention { display: none; }
}

/* ============================================================
   Controle segmente par moteur (telephone) : une valeur a la fois.
   Radios natives : une seule source d'etat, clavier et lecteur d'ecran compris.
   Tout repose sur :has() ; sans lui, le controle reste masque et les deux
   moteurs restent affiches, sans controle inerte.
   ============================================================ */
@supports selector(:has(*)) {
  @media (max-width: 620px) {
    .ev-bascule__choix {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 0 0 16px;
      padding: 3px;
      border-radius: var(--r-s);
      background: var(--ev-remplissage-3);
    }
    .ev-bascule__choix::before {
      content: "";
      position: absolute;
      top: 3px;
      bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      border-radius: 9px;
      background: var(--ev-gris-2);
      transition: transform .24s var(--ev-tiroir);
    }
    .ev-bascule__choix:has(.ev-bascule__radio[value="c"]:checked)::before { transform: translateX(100%); }
    .ev-bascule__option {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border-radius: 9px;
      font: var(--ev-f-petit-fort);
      letter-spacing: var(--ev-l-petit);
      color: var(--ev-label);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .ev-bascule__option::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
    .ev-bascule__option--s::before { background: var(--ev-scania); }
    .ev-bascule__option--c::before { background: var(--ev-cat); }
    .ev-bascule__option:has(:focus-visible) { outline: 2px solid var(--ev-cat); outline-offset: 2px; }
    .ev-bascule__option:active { transform: scale(.97); }
    .ev-bascule__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .ev-bascule:has(.ev-bascule__radio[value="s"]:checked) [data-moteur="c"],
    .ev-bascule:has(.ev-bascule__radio[value="c"]:checked) [data-moteur="s"] { display: none; }
  }
}

/* ============================================================
   Preferences systeme et moyens de saisie
   ============================================================ */
/* Survol : pointeur fin seulement. Au doigt, seul l'etat :active repond, a l'appui. */
@media (hover: hover) and (pointer: fine) {
  .ev-lien:hover { background: var(--fond-3); }
  .ev-pilier__lien:hover,
  .ev-jumelle summary:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-trace,
  .ev-bascule__choix::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ev-local { background: #000000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .ev-tuile { outline: 1px solid rgba(255,255,255,.4); }
  .ev-texte,
  .ev-note { color: var(--ev-label); }
}