/*
Theme Name: Imagenumerique
Theme URI: https://www.imagenumerique.fr/
Author: Lucas Dominguez
Description: Theme sur mesure pour imagenumerique.fr. Classique, sans constructeur de mise en page, sans jQuery et sans police distante. Il remplace InHype 1.5.1, theme de 2019 qui ne declarait aucune compatibilite PHP et bloquait le passage en PHP 8. Il fonctionne sous PHP 7.4 comme sous PHP 8.4, ce qui lui permet d'etre installe AVANT la bascule de version. Il embarque le style des comparatifs, jusqu'ici duplique dans le corps de chaque page.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imagenumerique
*/

/* --------------------------------------------------------------------------
   Palette relevee sur le site lui meme, pas transposee d'ailleurs : le violet
   et le bleu sont les deux accents declares, le noir celui du logo et du
   texte. Le theme reste en clair : les pages portent des encarts marchands et
   des vignettes sur fond blanc, qu'un fond sombre desservirait.
   -------------------------------------------------------------------------- */
:root{
  --violet:#4200ff;
  --bleu:#2568ef;
  --noir:#121212;
  --encre:#121212;
  --gris:#7a7a7a;
  --trait:#e7e7e7;
  --fond:#f8f8f8;
  --vert:#0a7a53;
  --ambre:#8a5a00;
  --largeur:1120px;
  /* Mesure de lecture. 70ch donnait 771 px, soit 88 signes par ligne, mesure
     au rendu : trop large, l'oeil perd le debut de la ligne suivante. Avec un
     corps de 19 px, 620 px place la ligne autour de 72 signes, la fenetre
     confortable etant de 65 a 75. */
  --lecture:620px;
  --pas:clamp(18px,4vw,32px);
  /* Deux rayons, pas quatre. Le theme en comptait 10, 12, 14 et 16 px selon
     les blocs, ce qui empechait l'oeil de reconnaitre deux objets de meme
     nature. Petit pour les pastilles, moyen pour les cartes. */
  --r-s:6px;
  --r-m:10px;
}

*,*::before,*::after{box-sizing:border-box}
/* L'en-tete est collant : sans decalage, un lien d'ancre depose le titre
   vise SOUS la barre de navigation. */
:target{scroll-margin-top:80px}
.imgn h2,.imgn h3{scroll-margin-top:80px}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--violet)}
a:focus-visible,button:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 16px;border:2px solid var(--violet)}

/* ---------- ossature ---------- */
.bande,.colonne,.grille{width:100%;margin-inline:auto;padding-inline:var(--pas)}
.bande{max-width:var(--largeur);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.colonne{max-width:calc(var(--lecture) + var(--pas) * 2)}
.site-corps{display:block;padding-block:clamp(24px,4vw,44px) 64px}

.site-entete{border-bottom:1px solid var(--trait);background:#fff;position:sticky;top:0;z-index:20}
/* La barre garde ses deux blocs sur une ligne : le nom du site passait
   dessous des que la navigation grandissait. */
.site-entete .bande{min-height:62px;flex-wrap:nowrap;justify-content:space-between;gap:18px}
.site-entete .marque{flex:0 0 auto}
.site-entete .nav{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
@media (max-width:860px){.site-entete .bande{flex-wrap:wrap}
 .site-entete .nav{justify-content:flex-start;flex-basis:100%}}
.marque{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--noir);text-decoration:none}
/* Navigation.

   Le sous-menu existait en HTML sans aucune regle : il se depliait a plat dans
   la barre, poussait les entrees suivantes vers la droite et faisait passer le
   nom du site a la ligne. L'en-tete entier partait en morceaux. Constate en
   ligne le 9 septembre 2026.

   Il devient un menu deroulant, ouvert au survol ET au clavier, pour qu'il
   reste atteignable sans souris. */
.nav{position:relative}
.nav .menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
.nav .menu > li{position:relative}
.nav a{color:var(--encre);text-decoration:none;font-weight:600;font-size:15px;
  display:block;padding:19px 0;line-height:1}
.nav a:hover{color:var(--violet)}

/* L'entree qui porte un sous-menu recoit un chevron, sinon rien n'annonce
   qu'il y a quelque chose dessous. */
.nav .menu-item-has-children > a::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;
}

.nav .sub-menu{
  position:absolute;top:100%;left:-14px;z-index:30;
  min-width:210px;margin:0;padding:8px 0;list-style:none;
  background:#fff;border:1px solid var(--trait);border-radius:var(--r-m);
  box-shadow:0 10px 30px -14px rgba(18,18,18,.35);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav .sub-menu a{padding:9px 16px;font-weight:500;font-size:14.5px;white-space:nowrap}
.nav .sub-menu a:hover{background:var(--fond);color:var(--violet)}

@media (max-width:860px){
  /* Pas de survol au doigt : le sous-menu se deplie sous son parent. */
  .site-entete .bande{padding-block:12px}
  .nav .menu{flex-wrap:wrap;gap:6px 18px}
  .nav a{padding:8px 0}
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:0 0 0 14px;min-width:0;background:none;
    display:flex;gap:14px;flex-wrap:wrap;
  }
  .nav .sub-menu a{padding:6px 0;font-size:13.5px;color:var(--gris)}
  .nav .menu-item-has-children > a::after{display:none}
}

.site-pied{border-top:1px solid var(--trait);background:var(--fond);padding-block:28px;margin-top:56px}
.site-pied .bande{flex-direction:column;align-items:flex-start;gap:12px}
.menu-pied{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu-pied a{color:var(--gris);font-size:14px;text-decoration:none}
.site-pied .mention{margin:0;color:var(--gris);font-size:13.5px;max-width:80ch}

/* ---------- tete d'article ---------- */
.article h1{font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.025em;margin:6px 0 12px;text-wrap:balance}
.rubriques{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.rubriques a{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--violet);background:#f1eeff;border-radius:999px;padding:4px 11px;text-decoration:none;
}
.chapeau-page{font-size:19px;color:#3a3a3a;margin:0 0 14px;max-width:62ch}
.fraicheur{display:flex;gap:8px 18px;flex-wrap:wrap;margin:0 0 22px;color:var(--gris);font-size:14px}
.fraicheur span{white-space:nowrap}
/* L'image d'en-tete n'etait bornee par rien : sur un ecran large elle
   traversait toute la fenetre, hors de toute mesure avec la colonne de
   lecture. Elle suit desormais la largeur de page. */
.visuel{margin:0 auto 30px;max-width:var(--largeur);padding-inline:var(--pas)}
.visuel img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r-m);display:block}
.visuel figcaption{margin-top:8px;font-size:13.5px;color:var(--gris)}

/* ---------- couche de confiance ---------- */
/* Bloc auteur et encart de methode se ressemblaient trait pour trait : deux
   rectangles gris arrondis empiles sous le titre, que rien ne distinguait. Le
   lecteur y voyait un mur avant d'atteindre le texte. L'auteur devient une
   bande signee, delimitee par deux filets ; l'encart de methode reste le seul
   objet encadre de la page, ce qui lui rend sa fonction d'avertissement. */
.bloc-auteur{
  display:flex;gap:14px;align-items:center;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:14px 0;margin:0 0 26px;background:none;border-radius:0;
}
.bloc-auteur .portrait{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px}
.bloc-auteur .txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.bloc-auteur .nom{font-weight:700;font-size:15.5px}
.bloc-auteur .role{color:var(--gris);font-size:13.5px;font-weight:500;
  letter-spacing:0;text-transform:none;margin:0}
.bloc-auteur p{margin:2px 0 0;font-size:14.5px;color:#4a4a4a}
.bloc-auteur .materiel span{font-weight:600;color:var(--encre)}

.bloc-methode{
  border:1px solid var(--trait);border-left:3px solid var(--violet);
  border-radius:var(--r-m);background:#fff;padding:18px 22px;margin:0 0 32px;
}
.bloc-methode h2{font-size:12.5px;margin:0 0 12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--violet);padding:0;border:0;font-weight:700}
.bloc-methode h2::before{display:none}
.bloc-methode ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.bloc-methode li{font-size:14.5px;margin:0;color:#4a4a4a;line-height:1.55}
.bloc-methode li::marker{color:var(--trait)}
.bloc-methode .lien{margin:14px 0 0;font-size:14px}

/* Provenance des mesures. La pastille est petite et grise : elle informe sans
   parasiter la lecture du chiffre, et elle est toujours la. */
.mesure{white-space:nowrap}
/* La pastille est posee par le moteur a cote de l'intitule du critere, sans
   conteneur « .mesure » : le selecteur descendant ne l'atteignait pas et elle
   sortait en texte nu. */
.prov,.mesure .prov{
  display:inline-block;margin:4px 0 0 0;font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--gris);background:var(--fond);border:1px solid var(--trait);
  border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:1px;
}
.prov a{color:inherit;text-decoration:none}
.prov a:hover{text-decoration:underline}
.prov.pr-maison{color:var(--vert);background:#e8f5ef;border-color:#bfe3d3}
.prov.pr-tiers{color:var(--bleu);background:#eaf1fe;border-color:#c6d9fb}
.prov.pr-calcule{color:var(--violet);background:#f1eeff;border-color:#d8cfff}
.prov.pr-inconnue{color:var(--ambre);background:#fff5e0;border-color:#f0d9a8}

.bilan-mesures{
  border:1px solid var(--trait);border-radius:var(--r-m);background:var(--fond);
  padding:18px 20px;margin:34px 0 0;
}
/* Selecteur porte a la profondeur de « .imgn h2 », qui vient plus bas dans la
   feuille et l'emportait a specificite egale : le titre du bilan sortait en
   29 px avec son filet de section. */
.imgn .bilan-mesures h2,.bilan-mesures h2{
  font-size:12.5px;margin:0 0 10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);padding:0;border:0;font-weight:700;
}
.imgn .bilan-mesures h2::before,.bilan-mesures h2::before{display:none}
.bilan-mesures p{margin:0 0 6px;font-size:15px}
.bilan-mesures .note{color:var(--gris);font-size:13.5px;margin:0}

/* Bloc « L'essentiel », en tete des pages pratiques.

   Il n'avait AUCUNE regle : le resume qui ouvre les neuf pages du gabarit
   pratique sortait en liste a puces brute, sans cadre ni hierarchie, alors
   que c'est le premier element lu de la page. Trouve a l'audit des formats. */
.imgn .essentiel{
  border:1px solid var(--trait);border-left:4px solid var(--violet);
  border-radius:var(--r-m);background:linear-gradient(180deg,#fbfaff,#fff);
  padding:20px 24px;margin:0 0 30px;
}
.imgn .essentiel h2{
  font-size:13px!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);margin:0 0 12px!important;padding-left:0!important;
}
.imgn .essentiel h2::before{display:none}
.imgn .essentiel ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.imgn .essentiel li{line-height:1.6}
.imgn .essentiel li::marker{color:var(--violet)}

/* ---------- tete de rubrique ---------- */
.tete-rubrique{margin-bottom:6px}
.tete-rubrique h1{font-size:clamp(28px,4vw,38px);line-height:1.1;letter-spacing:-.02em;margin:0 0 8px}
.tete-rubrique .compte{margin:0;color:var(--gris);font-size:14px}

/* ---------- grille de cartes ---------- */
.grille{
  max-width:var(--largeur);display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-block:18px 0;
}
.carte .lien{text-decoration:none;color:var(--encre);display:block}
.carte .vignette{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);display:block;background:var(--fond)}
.carte .vignette.vide{border:1px solid var(--trait)}
.carte .titre{display:block;margin-top:10px;font-weight:700;font-size:16.5px;line-height:1.35}
.carte .lien:hover .titre{color:var(--violet)}
.carte .meta{margin:4px 0 0;color:var(--gris);font-size:13.5px}
.voisines{margin-top:56px;border-top:1px solid var(--trait);padding-top:10px}
.voisines h2{font-size:22px;padding:0}
.voisines h2::before{display:none}
.pagination{margin-top:32px}

/* --------------------------------------------------------------------------
   Style des comparatifs.

   Ces regles etaient jusqu'ici injectees dans le corps de CHAQUE page par le
   moteur de rendu, soit environ 7 ko dupliques 121 fois en base, non cachables
   et impossibles a corriger sans regenerer tout le site. Elles vivent
   desormais ici.

   La portee « .imgn » est conservee volontairement : les pages deja publiees
   portent cette enveloppe et restent stylees a l'identique le jour ou le
   theme est active, avant meme d'etre regenerees.
   -------------------------------------------------------------------------- */
/* Le contenu porte la grille. Trois pistes : marge, lecture, marge. Tout ce
   qui est prose tient dans « lecture » ; les tableaux comparatifs prennent la
   piste « large ». Le motif de grille est prefere au debordement par marge
   negative en 100vw, qui compte la barre de defilement et fait deborder la
   page de quelques pixels sur les navigateurs de bureau. */
.contenu{
  font-size:19px;
  display:grid;
  /* Les suffixes « -start » et « -end » sont imposes par la specification :
     c'est ce qui fait qu'une paire de lignes nommees forme une zone utilisable
     par « grid-column: lecture ». Nommees en francais, elles ne formaient
     aucune zone et les elements etaient places automatiquement, la prose se
     retrouvant dans une colonne de 445 px calee a droite. */
  grid-template-columns:
    [large-start] minmax(var(--pas), 1fr)
    [lecture-start] min(var(--lecture), 100% - var(--pas) * 2) [lecture-end]
    minmax(var(--pas), 1fr) [large-end];
}
/* Le moteur de rendu enveloppe tout le contenu dans un « div.imgn ». Sans
   display:contents la grille ne voit qu'un seul enfant, la prose ET les
   tableaux atterrissent ensemble dans la piste de lecture, et le tableau
   deborde la page de 609 px. Constate au rendu. L'element reste dans l'arbre
   pour les selecteurs et continue de transmettre ses proprietes heritees. */
.contenu > .imgn{display:contents}
.contenu > *,
.contenu > .imgn > *{grid-column:lecture}
.contenu > .tableau-defilant,
.contenu > .imgn > .tableau-defilant,
.contenu > .imgn > .bilan-mesures,
.contenu > .bilan-mesures{
  grid-column:large;
  width:min(var(--largeur), 100%);
  margin-inline:auto;
}
.imgn{color:var(--encre);line-height:1.7}
/* Les titres portaient un tiret degrade violet vers bleu, colle a gauche. A
   cette taille il ne se lisait pas comme un signe mais comme un residu, et il
   introduisait un second accent dont le reste de la page n'avait pas l'usage.
   Remplace par un filet fin au dessus du titre : le decoupage se voit de loin,
   sans rien ajouter au vocabulaire de couleurs. */
.imgn h2{
  font-size:29px;line-height:1.2;letter-spacing:-.02em;font-weight:800;
  margin:60px 0 18px;padding-top:20px;border-top:1px solid var(--trait);
  text-wrap:balance;
}
.imgn h2:first-child{margin-top:0;padding-top:0;border-top:0}
.imgn h3{font-size:20px;margin:32px 0 10px;letter-spacing:-.015em;font-weight:700}
.imgn .chapeau{color:var(--gris);font-size:15px;margin:-6px 0 10px}

/* Tableau comparatif.

   Trois defauts mesures au rendu, et corriges ici :

   1. « white-space:nowrap » sur les intitules laissait le critere le plus long
      fixer la largeur de la colonne. Elle prenait 454 px sur 875, soit 52 pour
      cent, et il ne restait que 77 a 99 px par produit. Sur mobile la colonne
      des criteres faisait 454 px dans un conteneur de 352 : le lecteur ne
      voyait aucune donnee avant de faire defiler.
   2. « vertical-align:bottom » alignait les en-tetes par le bas. Les noms se
      brisant sur un nombre de lignes different, les vignettes se retrouvaient
      a trois hauteurs distinctes, 48 px d'ecart entre la plus haute et la plus
      basse.
   3. Le tableau etait enferme dans la colonne de lecture.

   La colonne des criteres est desormais collante : elle reste visible pendant
   le defilement horizontal, sans quoi le lecteur perd de vue ce qu'il compare. */
.imgn .tableau-defilant,.tableau-defilant{
  position:relative;overflow-x:auto;border:1px solid var(--trait);
  border-radius:var(--r-m);margin:26px 0;background:#fff;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.imgn .tableau-defilant table{
  width:100%;border-collapse:separate;border-spacing:0;
  table-layout:fixed;min-width:640px;font-size:14.5px;background:#fff;margin:0;
}
.imgn .tableau-defilant thead th:first-child,
.imgn .tableau-defilant tbody th{width:190px;min-width:190px}
.imgn .tableau-defilant thead th:not(:first-child),
.imgn .tableau-defilant tbody td{width:172px;min-width:172px}

/* L'en-tete etait une dalle noire pleine largeur, avec les vignettes posees
   dans des pastilles blanches. L'ensemble ecrasait le tableau et donnait a
   des photos detourees sur blanc l'air d'etre trouees. Fond clair, nom en
   encre, et un filet epais pour marquer la separation. */
.imgn .tableau-defilant thead th{
  background:#fff;color:var(--encre);padding:18px 14px 16px;text-align:left;
  font-weight:600;vertical-align:top;border:0;border-bottom:2px solid var(--noir);
}
.imgn .tableau-defilant thead th .h{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.imgn .tableau-defilant thead .h img{
  width:auto;max-width:100%;height:72px;object-fit:contain;
  display:block;mix-blend-mode:multiply;
}
.imgn .tableau-defilant thead a{
  color:var(--encre);text-decoration:none;font-weight:700;
  line-height:1.3;font-size:15px;text-wrap:balance;
}
.imgn .tableau-defilant thead a:hover{color:var(--violet)}

.imgn .tableau-defilant tbody td{
  padding:14px;border-bottom:1px solid var(--trait);
  color:#3a3a3a;vertical-align:top;line-height:1.5;
}
.imgn .tableau-defilant tbody th{
  padding:14px;text-align:left;background:var(--fond);
  color:var(--gris);font-weight:600;border-bottom:1px solid var(--trait);
  vertical-align:top;line-height:1.4;font-size:13.5px;
  position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--trait);
}
.imgn .tableau-defilant thead th:first-child{
  position:sticky;left:0;z-index:3;background:#fff;
}
.imgn .tableau-defilant tr:last-child td,
.imgn .tableau-defilant tr:last-child th{border-bottom:0}
.imgn .tableau-defilant tbody tr:hover td{background:#faf9ff}

/* La ligne de prix ouvre le tableau : elle est teintee et non simplement
   grasse, pour se distinguer des huit lignes de caracteristiques. */
/* Reserve au comparatif : le tableau de caracteristiques n'a pas de ligne
   de prix, et n'a donc rien a teinter. */
.imgn .tableau-defilant thead + tbody tr:first-child th,
.imgn .tableau-defilant thead + tbody tr:first-child td{
  background:#f5f2ff;border-bottom:1px solid var(--trait);padding-block:16px;
}
.imgn .tableau-defilant .prix{
  font-weight:800;color:var(--encre);white-space:nowrap;
  font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ---------- carte de fiche produit ----------

   Le bandeau d'achat etait une bande grise de 113 px de haut portant une
   vignette de 64 px, un prix et un bouton separes par un grand vide. L'image
   source du marchand fait 500 px de cote : elle est desormais affichee en
   moyen format, et le titre, le prix et le bouton la rejoignent dans une seule
   carte au lieu de flotter au dessus. */
.imgn .fiche-tete{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:32px;row-gap:10px;
  align-items:start;
  border:1px solid var(--trait);border-radius:var(--r-m);
  background:#fff;padding:28px 30px;margin:60px 0 30px;
}
/* Les conteneurs intermediaires du moteur s'effacent pour que l'image, le
   prix et le bouton deviennent des elements de la grille. */
/* wpautop, qui passe avant ce theme, enveloppe le bouton dans un paragraphe.
   Sans l'effacer lui aussi, c'est le paragraphe qui devient l'element de
   grille et le bouton se place n'importe ou. */
.imgn .fiche-tete .encart-achat,
.imgn .fiche-tete .encart-achat .g,
.imgn .fiche-tete .encart-achat > p{display:contents}

/* Selecteur porte a la meme profondeur que celui du bandeau hors carte, sans
   quoi « .imgn .encart-achat img{width:64px} », place plus bas dans la
   feuille, l'emportait a specificite egale et l'image restait en vignette. */
.imgn .fiche-tete .encart-achat img{
  grid-column:1;grid-row:1 / span 3;
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--fond);border-radius:var(--r-s);padding:20px;
  mix-blend-mode:multiply;align-self:center;
}

.imgn .fiche-titre{
  grid-column:2;grid-row:1;
  display:flex;align-items:baseline;gap:14px;
  margin:0;padding:0;border:0;font-size:27px;line-height:1.15;
  letter-spacing:-.02em;font-weight:800;
}
.imgn .fiche-titre .rang{
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--violet);color:#fff;
  font-size:16px;font-weight:700;line-height:1;
  transform:translateY(-2px);
}
.imgn .fiche-titre .nm{min-width:0}

/* Le prix porte son intitule : seul, un montant en gros n'indique pas de quoi
   il s'agit ni de quand il date. */
.imgn .fiche-tete .pr{
  grid-column:2;grid-row:2;align-self:end;
  font-weight:800;font-size:34px;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.imgn .fiche-tete .pr::before{
  content:"Prix relevé";display:block;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);margin-bottom:4px;
}
.imgn .fiche-tete .av{grid-column:2;grid-row:2;align-self:start;color:var(--gris);font-size:14px}
.imgn .fiche-tete .cta{grid-column:2;grid-row:3;justify-self:start;margin-top:6px}

.imgn .cta{display:inline-block;background:var(--violet);color:#fff!important;
  font-weight:700;padding:14px 26px;border-radius:var(--r-s);text-decoration:none;
  font-size:15px;white-space:nowrap;border:0}
.imgn .cta:hover{background:#3600cc}

/* Bandeau d'achat hors carte, par exemple sur le gabarit pratique. */
.imgn .encart-achat{display:flex;gap:18px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;border:1px solid var(--trait);border-radius:var(--r-m);background:var(--fond);
  padding:16px 20px;margin:18px 0 26px}
.imgn .encart-achat .g{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.imgn .encart-achat img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.imgn .encart-achat .pr{font-weight:800;font-size:22px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.imgn .encart-achat .av{color:var(--gris);font-size:14px}
.imgn .encart-achat .dl{font-size:12.5px;font-weight:700;color:var(--ambre);
  background:#fff5e0;border:1px solid #f0d9a8;border-radius:999px;padding:3px 10px;white-space:nowrap}

/* « À qui il s'adresse » : c'est la phrase qui tranche, elle etait le dernier
   paragraphe indistinct de la fiche. */
.imgn .pour-qui{
  border-left:3px solid var(--violet);background:var(--fond);
  border-radius:0 var(--r-s) var(--r-s) 0;
  padding:16px 20px;margin:22px 0 0;
}
.imgn .pour-qui .t{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--violet);margin-bottom:6px;
}
.imgn .pour-qui p{margin:0;font-size:16px;line-height:1.6;color:#3a3a3a}

.imgn .encart-produit{display:flex;gap:18px;align-items:center;border:1px solid var(--trait);
  border-radius:var(--r-m);background:#fff;padding:16px 18px;margin:22px 0;
  box-shadow:0 2px 14px -10px rgba(18,18,18,.26)}
.imgn .encart-produit .im{flex:0 0 96px;height:96px;display:flex;align-items:center;justify-content:center}
.imgn .encart-produit .im img{max-width:100%;max-height:96px;object-fit:contain}
.imgn .encart-produit .c{flex:1;min-width:0}
.imgn .encart-produit .lb{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--violet);margin-bottom:4px}
.imgn .encart-produit .nm{display:block;font-weight:800;font-size:16.5px;margin-bottom:4px}
.imgn .encart-produit .ds{display:block;color:var(--gris);font-size:14px;line-height:1.5}
.imgn .encart-produit .b{flex:0 0 auto;text-align:center}
.imgn .encart-produit .pr{display:block;font-weight:800;font-size:16px;margin-bottom:8px;white-space:nowrap}

.imgn .fiche-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
/* Les deux colonnes portaient chacune un lisere de 4 px, vert et bleu, ce qui
   ajoutait deux accents a une page qui en a deja un. La distinction passe
   desormais par l'intitule seul, qui suffit a la porter. */
.imgn .fiche-colonnes>div{border:1px solid var(--trait);border-radius:var(--r-m);
  padding:16px 20px;background:#fff}
.imgn .fiche-plus .t{color:var(--vert)}
.imgn .fiche-limites .t{color:var(--gris)}
.imgn .fiche-colonnes .t,.imgn p.t{margin:0 0 8px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);font-weight:700}
.imgn p.t{margin:26px 0 10px}
.imgn .fiche-colonnes ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.imgn .fiche-colonnes li{margin:0;padding-left:24px;position:relative;font-size:15.5px;line-height:1.5}
.imgn .fiche-colonnes li::before{
  position:absolute;left:0;top:0;font-weight:800;font-size:15px;
}
.imgn .fiche-plus li::before{content:"+";color:var(--vert)}
.imgn .fiche-limites li::before{content:"−";color:var(--manque, #9E2E1B)}
.imgn .fiche-limites .t{color:#9E2E1B}

.imgn .tableau-specs{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r-m);
  margin:0 0 24px;background:#fff}
.imgn .tableau-specs table{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.imgn .tableau-specs th{width:38%;padding:11px 16px;text-align:left;font-weight:600;
  color:var(--gris);background:var(--fond);border-bottom:1px solid var(--trait);vertical-align:top}
.imgn .tableau-specs td{padding:11px 16px;border-bottom:1px solid var(--trait);vertical-align:top}
.imgn .tableau-specs tr:last-child th,.imgn .tableau-specs tr:last-child td{border-bottom:0}
/* Une ligne sur deux teintee, comme le tableau comparatif : sur huit a neuf
   caracteristiques, l'oeil saute de ligne sans reperage. */
.imgn .tableau-specs tr:nth-child(even) th{background:#f2f2f4}
.imgn .tableau-specs tr:nth-child(even) td{background:#fcfcfd}
.imgn .tableau-specs td{font-variant-numeric:tabular-nums}

.imgn .liste-liens{border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden;
  background:#fff;box-shadow:0 2px 14px -10px rgba(18,18,18,.26);margin:14px 0 26px;
  list-style:none;padding:0}
.imgn .liste-liens li{margin:0;padding:14px 18px;border-bottom:1px solid var(--trait);position:relative}
.imgn .liste-liens li:last-child{border-bottom:0}
.imgn .liste-liens li::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--violet);opacity:0;transition:opacity .15s}
.imgn .liste-liens li:hover::before{opacity:1}
.imgn .liste-liens li:hover{background:var(--fond)}
.imgn .liste-liens a{color:var(--encre);text-decoration:none;font-weight:600}
.imgn .liste-liens a:hover{color:var(--violet)}

.imgn .selection{padding-left:18px}
.imgn .selection li{margin:8px 0}
.imgn .mention-affiliation,.imgn .mention-maj{color:var(--gris);margin-top:32px;
  padding-top:14px;border-top:1px solid var(--trait)}

@media (max-width:860px){
  /* La carte passe en colonne : l'image garde une taille utile plutot que de
     retrecir avec la fenetre. */
  .imgn .fiche-tete{grid-template-columns:1fr;row-gap:16px;padding:22px}
  .imgn .fiche-tete .encart-achat img{grid-column:1;grid-row:auto;max-width:190px;justify-self:start}
  .imgn .fiche-titre,.imgn .fiche-tete .pr,.imgn .fiche-tete .cta{grid-column:1;grid-row:auto}
  .imgn .fiche-titre{font-size:24px}
  .imgn .fiche-tete .cta{justify-self:stretch;text-align:center}
}
@media (max-width:640px){
  /* Colonne de criteres resserree : a 190 px sur un conteneur de 388, il ne
     restait la place que d'un seul produit a l'ecran. A 132 px on en voit un
     et demi, ce qui donne le point de comparaison sans lequel le tableau ne
     sert a rien. */
  .imgn .tableau-defilant thead th:first-child,
  .imgn .tableau-defilant tbody th{width:132px;min-width:132px;font-size:12.5px;padding:11px 10px}
  .imgn .tableau-defilant thead th:not(:first-child),
  .imgn .tableau-defilant tbody td{width:150px;min-width:150px;padding:11px 10px}
  .imgn .tableau-defilant table{min-width:0}
  .imgn .tableau-defilant thead .h img{max-width:56px;height:56px}
  .imgn .tableau-defilant thead a{font-size:13.5px}
  .imgn h2{font-size:23px;margin-top:38px}
  .imgn .fiche-colonnes{grid-template-columns:1fr}
  .imgn .encart-achat .cta{width:100%;text-align:center}
  .imgn .encart-produit{flex-direction:column;align-items:stretch}
  .imgn .encart-produit .im{width:100%;height:150px}
  .imgn .encart-produit .im img{max-height:150px}
  .imgn .encart-produit .b{text-align:left;border-top:1px solid var(--trait);padding-top:14px;
    display:flex;align-items:center;justify-content:space-between;gap:14px}
  .imgn .encart-produit .pr{margin-bottom:0}
  .bloc-auteur{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .site-entete,.site-pied,.voisines,.bloc-methode{display:none}
  body{font-size:12pt}
}

/* La pastille de provenance sous l'intitule du critere. */
.imgn .tableau-defilant tbody th .prov{display:block;width:fit-content}
.prov.pr-constructeur{color:var(--gris);background:#fff;border-color:var(--trait)}


/* Sommaire rendu par le theme (inc/sommaire.php), en remplacement de
   l'extension restee en version 2002. Compact, numerote, sans script. */
.sommaire{margin:28px 0 34px;padding:18px 22px;border:1px solid var(--trait);
  border-radius:var(--r-m);background:var(--fond)}
.sommaire-titre{margin:0 0 10px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.sommaire ol{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:32px}
.sommaire li{margin:0 0 6px;font-size:15.5px;line-height:1.45;
  break-inside:avoid}
.sommaire a{color:var(--encre);text-decoration:none;
  border-bottom:1px solid transparent}
.sommaire a:hover,.sommaire a:focus-visible{color:var(--violet);
  border-bottom-color:currentColor}
@media (max-width:700px){.sommaire ol{columns:1}}