/* =========================================================================
   PRESSWORK (media-criticism.com) : le marbre d'un copy desk rendu public.
   Rhabillage du squelette officiel « journal-deux-col », direction 06, Le Journal de Piste.
   Prefixe de classes : jp-. Aucune requete externe, aucune police distante, aucun script.

   REGLE NEGATIVE jp- : aucun degrade de couleur, aucune ombre floue (tout box-shadow a un blur de 0),
   aucun angle arrondi au-dela de 0. La profondeur vient de l'epaisseur des filets : 5px / 3px double / 1px.
   REGLE NEGATIVE 2 : --rouge-correcteur ne touche jamais un lien, un fond de bloc ni un titre.
   Il ne sert qu'a marquer une correction ou une reserve. Un rouge qui sert a tout ne corrige plus rien.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS : matieres nommees, un seul bloc a lire
   ------------------------------------------------------------------------- */
:root{
  /* papiers et encres */
  --papier-journal:#F0F2F5;      /* papier journal gris pale : fond general, et lui seul */
  --papier-marbre:#F8F9FB;       /* marbre de composition blanchi : blocs de marge, cartouches, fil date */
  --encre-signal:#1C2530;        /* encre noire de signal : texte, titres, filet de plomb 5 px */
  --encre-douce:#4B5766;         /* encre grasse delavee : chapeaux, legendes, mentions secondaires */
  --acier-port:#4A6FA5;          /* acier bleu du port : liens, onglet actif en aplat */
  --acier-quai:#2F4C74;          /* acier peint du quai : survol, focus, fond de la bande retournee */
  --laiton:#9C7A3C;              /* laiton brosse : filet d'accompagnement, marque « verifie » */
  --rouge-correcteur:#A32B22;    /* rouge de crayon de correcteur : le crochet de correction, rien d'autre */
  --filet-plomb:#C2CDD9;         /* plomb oxyde : filets 1 px, 3 px double, bordures de tableau */
  --surlignage:#E5E9EF;          /* papier frotte : exergue, ligne de tableau survolee */

  /* trois roles typographiques, trois piles systeme, zero fichier de police */
  --police-titre:"Iowan Old Style","Hoefler Text",Georgia,"Times New Roman",serif;
  --police-texte:Verdana,"DejaVu Sans",Geneva,sans-serif;
  --police-mention:"Andale Mono",Menlo,"Courier New",monospace;
  --role-reserve:italic 400 1.04rem/1.62 var(--police-titre);

  /* trois cadrages nommes */
  --ratio-une:16/9;
  --ratio-marbre:4/3;
  --ratio-detail:1/1;

  /* rythme */
  --largeur-page:74rem;
  --largeur-marge:15.5rem;
  --mesure:66ch;
  --gouttiere:2.4rem;
  --pas:1.05rem;
  --marge-page:clamp(1rem,4vw,2rem);
  /* la bande retournee sort de la page : ce que la fenetre laisse hors de l'edition */
  --sortie:max(0px,calc((100vw - var(--largeur-page)) / 2));
  --retrait-epreuve:calc(var(--marge-page) + var(--sortie));

  /* traits : les trois epaisseurs font toute la profondeur du site */
  --filet-simple:1px solid var(--filet-plomb);
  --filet-double:3px double var(--filet-plomb);
  --filet-plomb-fort:5px solid var(--encre-signal);
  --filet-laiton:3px solid var(--laiton);
}

/* -------------------------------------------------------------------------
   2. BASES
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--papier-journal);
  color:var(--encre-signal);
  font-family:var(--police-texte);
  font-size:clamp(16.5px,.55vw + 15px,18px);
  line-height:1.68;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--acier-port);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--acier-quai)}
:focus-visible{outline:3px solid var(--acier-quai);outline-offset:2px}
h1,h2,h3,h4{
  font-family:var(--police-titre);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.14;
  margin:0 0 calc(var(--pas) * .55);
}
h1{line-height:1.06}
h3{font-size:1.1rem;font-weight:600;letter-spacing:0}
p,ul,ol,figure,table,blockquote,dl{margin:0 0 var(--pas)}
figcaption,p,li,dd{hyphens:manual}
abbr{text-decoration:none}

/* lien d'evitement, conserve du squelette */
.jp-evitement{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--encre-signal);color:var(--papier-marbre);
  padding:.6rem 1rem;
  font:600 10px/1 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
}
.jp-evitement:focus{left:0}

/* -------------------------------------------------------------------------
   3. TROIS SIGNATURES, EN CSS PUR
   A. jp-plomb : la reglure de plomb a trois epaisseurs (le box-shadow est un filet plein, blur 0)
   ------------------------------------------------------------------------- */
.jp-plomb{border-block-end:var(--filet-plomb-fort);box-shadow:0 8px 0 -6px var(--laiton)}
.jp-plomb--double{border-block-end:var(--filet-double);box-shadow:none}
.jp-plomb--fin{border-block-end:var(--filet-simple);box-shadow:none}

/* B. jp-marque-correcteur : le crochet rouge de correcteur en angle */
.jp-marque-correcteur{position:relative;padding-inline-start:1.15rem}
.jp-marque-correcteur::before{
  content:"";position:absolute;inset-block-start:.55em;inset-inline-start:0;
  width:.6rem;height:.6rem;
  border-inline-start:2px solid var(--rouge-correcteur);
  border-block-end:2px solid var(--rouge-correcteur);
}
.jp-marque-correcteur--pose::before{border-color:var(--laiton)}

/* C. jp-cartouche-source : le cartouche mono qui nomme l'organe traite */
.jp-cartouche-source{
  display:inline-block;
  font:600 10px/1 var(--police-mention);
  letter-spacing:.14em;text-transform:uppercase;
  padding:.4em .55em;
  color:var(--encre-signal);background:var(--papier-marbre);
  border:var(--filet-simple);border-inline-start:3px solid var(--acier-port);
}
.jp-cartouche-source--corrige{border-inline-start-color:var(--rouge-correcteur)}
.jp-cartouche-source--muette{border-inline-start-color:var(--laiton);color:var(--encre-douce)}

/* la trame de marbre : rayage de filets de plomb tous les 6 px, jamais un degrade */
.jp-trame-marbre{
  background-color:var(--papier-marbre);
  background-image:repeating-linear-gradient(180deg,var(--filet-plomb) 0 1px,transparent 1px 6px);
}

/* -------------------------------------------------------------------------
   4. EDITION, BANDEAU, MANCHETTE, ONGLETS
   ------------------------------------------------------------------------- */
.jp-edition{
  max-width:var(--largeur-page);
  margin:0 auto;
  padding:0 var(--marge-page) calc(var(--pas) * 2.6);
  border-inline:var(--filet-simple);
}
.jp-bandeau-edition{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  align-items:center;justify-content:space-between;
  min-block-size:34px;padding-block:.35rem;
  padding-inline:var(--marge-page);
  font:600 10px/1.3 var(--police-mention);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-bandeau-edition__mention{display:block}
.jp-bandeau-edition__mention--fin{text-align:end}

.jp-manchette{
  max-width:var(--largeur-page);margin-inline:auto;
  padding:calc(var(--pas) * 1.5) var(--marge-page) calc(var(--pas) * .8);
  text-align:center;
}
.jp-manchette__ligne{
  display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;
  align-items:baseline;justify-content:space-between;
  padding-block-end:.5rem;margin-block-end:calc(var(--pas) * .8);
  border-block-end:var(--filet-simple);
  font:600 10px/1.4 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);text-align:start;
}
.jp-manchette__titre{
  margin:0;
  font-size:clamp(2.6rem,6vw,4.1rem);
  letter-spacing:-.018em;line-height:1.06;
}
.jp-manchette__titre a{color:inherit;text-decoration:none}
.jp-manchette__titre a:hover{color:var(--acier-quai)}
.jp-manchette__titre--reduit{
  font-size:1.05rem;letter-spacing:.02em;
  font-family:var(--police-mention);font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;
}
.jp-manchette__devise{
  max-width:38ch;margin:calc(var(--pas) * .5) auto 0;
  font-family:var(--police-titre);font-style:italic;font-size:1.12rem;
  color:var(--encre-douce);
}
.jp-oreilles{
  display:grid;gap:.4rem var(--gouttiere);
  grid-template-columns:minmax(0,1fr);
  margin-block-start:calc(var(--pas) * 1.1);
  padding-block-start:.7rem;border-block-start:var(--filet-simple);
  text-align:start;
}
@media (min-width:48rem){.jp-oreilles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jp-oreille{margin:0;font-size:.86rem;color:var(--encre-douce)}
.jp-oreille b{
  display:block;
  font:600 10px/1.6 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-signal);
}

/* barre d'onglets pleine largeur : chaque item en flex 1, filets verticaux, actif en aplat plein */
.jp-onglets{margin-inline:calc(var(--marge-page) * -1);border-block-end:var(--filet-plomb-fort)}
.jp-onglets__commande{position:absolute;width:1px;height:1px;opacity:0}
.jp-onglets__declencheur{
  display:block;cursor:pointer;
  padding:.7rem var(--marge-page);
  border-block-end:var(--filet-simple);
  font:600 10px/1.4 var(--police-mention);letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-signal);background:var(--papier-marbre);
}
.jp-onglets__declencheur::after{content:" +"}
.jp-onglets__commande:checked ~ .jp-onglets__declencheur::after{content:" -"}
.jp-onglets__liste{display:none;list-style:none;margin:0;padding:0;background:var(--papier-marbre)}
.jp-onglets__commande:checked ~ .jp-onglets__liste{display:block}
.jp-onglet{border-block-start:var(--filet-simple)}
.jp-onglet a{
  display:block;padding:.65rem var(--marge-page);
  font:600 10px/1.4 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-signal);text-decoration:none;
}
.jp-onglet a:hover{background:var(--surlignage);color:var(--acier-quai)}
.jp-onglet--actif a{background:var(--acier-port);color:var(--papier-marbre)}

@media (min-width:62rem){
  .jp-onglets__declencheur{display:none}
  .jp-onglets__liste,.jp-onglets__commande:checked ~ .jp-onglets__liste{display:flex}
  .jp-onglet{flex:1;border-block-start:0;border-inline-end:var(--filet-simple)}
  .jp-onglet:last-child{border-inline-end:0}
  .jp-onglet a{padding:.75rem .5rem;text-align:center}
}

/* -------------------------------------------------------------------------
   5. GRILLE ASYMETRIQUE : tribune large + marge etroite (ordre inchange)
   ------------------------------------------------------------------------- */
.jp-grille{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:calc(var(--pas) * 1.8) 0;
  align-items:start;
}
@media (min-width:62rem){
  .jp-grille{
    grid-template-columns:minmax(0,2.3fr) minmax(230px,1fr);
    gap:calc(var(--pas) * 2) var(--gouttiere);
  }
}
.jp-tribune{min-width:0}
.jp-marge{min-width:0;display:grid;gap:calc(var(--pas) * 1.5);align-content:start}
.jp-marge--rail{position:sticky;top:1.5rem}

/* -------------------------------------------------------------------------
   6. LA UNE : .95fr 1.35fr, le texte plus etroit que l'image (le geste, jamais inverse)
   ------------------------------------------------------------------------- */
.jp-une{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--pas) * 1.2);align-items:start}
@media (min-width:48rem){
  .jp-une{grid-template-columns:.95fr 1.35fr;gap:0 var(--gouttiere)}
  /* le visuel precede le texte dans le DOM ; sur grand ecran le texte repasse en colonne etroite */
  .jp-une__texte{order:1}
  .jp-une__visuel{order:2}
}
.jp-une__texte{display:grid;align-content:start;gap:.35rem}
.jp-une__titre{
  font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.018em;line-height:1.14;
  margin:calc(var(--pas) * .35) 0 calc(var(--pas) * .3);
}
.jp-une__titre a{color:inherit;text-decoration:none}
.jp-une__titre a:hover{color:var(--acier-quai)}
.jp-une__chapeau p{font-size:1rem;color:var(--encre-douce)}
.jp-une__chapeau p:first-child{color:var(--encre-signal)}
.jp-une__visuel{margin:0}
.jp-une__visuel img{width:100%;aspect-ratio:var(--ratio-une);object-fit:cover;border:var(--filet-simple)}
.jp-une__visuel{border-block-end:var(--filet-laiton);padding-block-end:3px}

/* ligne de service : rubrique + datation, sur filet */
.jp-ligne-service{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;
  margin:0;padding-block-end:.35rem;border-block-end:var(--filet-simple);
  font:600 10px/1.4 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-ligne-service a{color:var(--encre-douce);text-decoration:none}
.jp-ligne-service a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-datation{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.jp-suite{
  display:inline-block;
  font:600 10px/1.4 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-block-end:2px solid var(--acier-port);
}
.jp-suite:hover{border-block-end-color:var(--acier-quai)}
.jp-serre{margin-block-end:0}
.jp-intro{max-width:var(--mesure);color:var(--encre-douce)}

/* -------------------------------------------------------------------------
   7. LE FLUX DATE : dense, sans image, chaque entree porte les trois signatures
   ------------------------------------------------------------------------- */
.jp-tete-bloc{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  align-items:baseline;justify-content:space-between;
}
.jp-tete-bloc__titre,
.jp-cahier__titre{
  font-size:clamp(1.4rem,2.2vw,1.75rem);margin:0;
  padding-block-end:.45rem;flex:1 1 auto;
}
.jp-cahier__intitule{display:block}
.jp-fil{list-style:none;margin:0;padding:0}
.jp-depeche{
  display:grid;gap:.2rem;
  padding-block:calc(var(--pas) * .95);
  border-block-end:var(--filet-simple);
}
.jp-depeche:first-child{border-block-start:var(--filet-simple)}
.jp-depeche__titre{margin:0;font-size:1.16rem;line-height:1.2}
.jp-depeche__titre a{color:inherit;text-decoration:none}
.jp-depeche__titre a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-depeche__amorce{margin:0;font-size:.94rem;color:var(--encre-douce);max-width:var(--mesure)}
.jp-depeche--illustre{grid-template-columns:11rem minmax(0,1fr);column-gap:calc(var(--pas) * .9)}
.jp-depeche--illustre > .jp-depeche__vignette{grid-column:1;grid-row:1 / span 3;align-self:start}
.jp-depeche--illustre > .jp-depeche__titre,
.jp-depeche--illustre > .jp-ligne-service,
.jp-depeche--illustre > .jp-depeche__amorce{grid-column:2}
.jp-depeche__vignette{margin:0}
.jp-depeche__vignette img{
  width:100%;aspect-ratio:var(--ratio-marbre);object-fit:cover;
  border:var(--filet-simple);filter:saturate(.86) contrast(1.04);
}
.jp-legende--vignette{margin-block-start:.3rem;font-size:9px;letter-spacing:.12em}
.jp-depeche .jp-cartouche-source{justify-self:start}
.jp-depeche__marque{
  font:400 11px/1.4 var(--police-mention);letter-spacing:.06em;
  color:var(--encre-douce);font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------------------------
   8. THE PROOF BAR : la bande retournee en aplat plein, une seule fois par page
   ------------------------------------------------------------------------- */
.jp-epreuve{
  margin-inline:calc(var(--retrait-epreuve) * -1);
  padding:calc(var(--pas) * 1.5) var(--retrait-epreuve);
  background:var(--acier-quai);
  border-block-start:5px solid var(--acier-port);
  color:var(--papier-journal);
}
.jp-epreuve__titre{
  font-size:clamp(1.4rem,2.2vw,1.75rem);color:var(--papier-journal);
  margin:0 0 .3rem;padding-block-end:.4rem;border-block-end:3px double rgba(240,242,245,.55);
}
.jp-epreuve__intro{max-width:62ch;color:var(--filet-plomb);font-size:.95rem;margin-block-end:calc(var(--pas) * 1.1)}
.jp-epreuve__colonnes{
  display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--pas) * 1.3);
  align-items:start;
}
@media (min-width:52rem){.jp-epreuve__colonnes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jp-epreuve__colonne{display:grid;align-content:start;gap:.45rem}
.jp-epreuve__statut{
  margin:0;padding-block-end:.35rem;
  border-block-end:var(--filet-laiton);
  font:600 10px/1.4 var(--police-mention);letter-spacing:.16em;text-transform:uppercase;
}
.jp-epreuve__definition{margin:0;font-size:.86rem;color:var(--filet-plomb);opacity:.92}
.jp-epreuve__liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.jp-epreuve__entree{
  padding-block-end:.5rem;border-block-end:1px solid rgba(240,242,245,.28);
  font-size:.92rem;
}
.jp-epreuve__entree a{color:var(--papier-journal);text-decoration-color:rgba(240,242,245,.5)}
.jp-epreuve__entree a:hover{color:#fff}
.jp-epreuve .jp-cartouche-source{
  background:transparent;color:var(--papier-journal);border-color:rgba(240,242,245,.45);
  border-inline-start-color:var(--laiton);margin-block-end:.3rem;
}

/* -------------------------------------------------------------------------
   9. LE SECOND CAHIER : les rubriques par ce qu'elles contiennent
   ------------------------------------------------------------------------- */
.jp-cahier{display:grid;gap:calc(var(--pas) * 1.3);align-content:start}
.jp-cahier__liste{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--pas) * 1.2);align-items:start}
@media (min-width:62rem){.jp-cahier__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jp-cahier__entree{display:grid;gap:.4rem;align-content:start}
.jp-cahier__entree h3{margin:.45rem 0 0;font-size:1.24rem}
.jp-cahier__entree h3 a{color:inherit;text-decoration:none}
.jp-cahier__entree h3 a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-cahier__resume{margin:0;font-size:.92rem;color:var(--encre-douce)}
.jp-cahier__compte{
  margin:0;font:400 11px/1.5 var(--police-mention);letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-douce);font-variant-numeric:tabular-nums;
}
.jp-cahier__visuel{margin:0}
.jp-cahier__visuel img{width:100%;aspect-ratio:var(--ratio-marbre);object-fit:cover;border:var(--filet-simple)}
.jp-cahier__note{margin:0;font:400 11px/1.6 var(--police-mention);letter-spacing:.04em;color:var(--encre-douce)}
.jp-cahier__entree--muette{border-inline-start:3px solid var(--laiton);padding-inline-start:.75rem}

/* -------------------------------------------------------------------------
   10. LA MARGE : entrefilets numerotes, chiffres, encadre de reserve, renvois
   ------------------------------------------------------------------------- */
.jp-entrefilets{list-style:none;margin:0;padding:0}
.jp-entrefilet{
  display:grid;gap:.15rem;
  padding-block:.7rem;border-block-end:var(--filet-simple);
}
.jp-entrefilet__numero{
  font:400 11px/1.4 var(--police-mention);letter-spacing:.14em;
  color:var(--laiton);font-variant-numeric:tabular-nums;
}
.jp-entrefilet h3{margin:0;font-size:1rem}
.jp-entrefilet h3 a{color:inherit;text-decoration:none}
.jp-entrefilet h3 a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-entrefilet p{margin:0;font-size:.88rem;color:var(--encre-douce)}
.jp-chiffres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.jp-chiffre{display:grid;gap:.15rem;border-block-start:var(--filet-laiton);padding-block-start:.4rem}
.jp-chiffre__valeur{
  font:400 28px/1.1 var(--police-mention);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--encre-signal);
}
.jp-chiffre__libelle{font-size:.82rem;color:var(--encre-douce)}
.jp-encadre{
  padding:calc(var(--pas) * .9);
  border:var(--filet-simple);
}
.jp-encadre p{margin:0 0 .6rem;font:var(--role-reserve);color:var(--encre-signal);font-style:italic}
.jp-encadre p:last-child{margin-block-end:0}
.jp-encadre__note{font:400 11px/1.6 var(--police-mention);font-style:normal;letter-spacing:.08em;color:var(--encre-douce)}
.jp-renvois{list-style:none;margin:0;padding:0}
.jp-renvois li{border-block-end:var(--filet-simple)}
.jp-renvois a{
  display:block;padding-block:.5rem;
  font:400 11px/1.5 var(--police-mention);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-signal);text-decoration:none;
}
.jp-renvois a:hover{background:var(--surlignage);color:var(--acier-quai)}
.jp-detail{margin:0;border:var(--filet-simple);background:var(--papier-marbre)}
.jp-detail img{width:100%;aspect-ratio:var(--ratio-detail);object-fit:cover}

/* -------------------------------------------------------------------------
   11. LEGENDES ET IMAGES
   ------------------------------------------------------------------------- */
/* les images passent au gris de papier journal : un seul filtre, aucun degrade */
.jp-une__visuel img,.jp-cahier__visuel img,.jp-detail img,
.jp-ouverture__visuel img,.jp-figure img{filter:saturate(.86) contrast(1.04)}
.jp-legende{
  margin-block-start:.45rem;
  font:400 10px/1.6 var(--police-mention);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-legende b{font-weight:400;color:var(--encre-signal)}
.jp-figure{margin:0}
.jp-figure img{width:100%;border:var(--filet-simple)}
.jp-figure--une img{aspect-ratio:var(--ratio-une);object-fit:cover}
.jp-figure--marbre img{aspect-ratio:var(--ratio-marbre);object-fit:cover}

/* -------------------------------------------------------------------------
   12. ARTICLE : titraille, releve a trois entrees, lettrine, exergue, notes, tableau
   ------------------------------------------------------------------------- */
.jp-fil-ariane{
  margin:0 0 calc(var(--pas) * .8);
  font:400 10px/1.5 var(--police-mention);letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-fil-ariane a{color:var(--encre-douce);text-decoration:none}
.jp-fil-ariane a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-fil-ariane span[aria-hidden]{padding-inline:.35rem;color:var(--filet-plomb)}
.jp-titraille{padding-block-end:calc(var(--pas) * .9)}
.jp-titraille h1{
  font-size:clamp(1.95rem,3.6vw,2.9rem);letter-spacing:-.018em;line-height:1.06;
  margin:.55rem 0 .6rem;
}
.jp-chapeau{font-family:var(--police-titre);font-size:1.14rem;line-height:1.5;color:var(--encre-douce);max-width:48rem}
.jp-chapeau p{margin:0}
.jp-signature{
  margin:calc(var(--pas) * .7) 0 0;
  font:400 10px/1.6 var(--police-mention);letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-corps{max-width:var(--mesure)}
.jp-corps h2{
  font-size:clamp(1.4rem,2.2vw,1.75rem);
  margin-block:calc(var(--pas) * 1.7) calc(var(--pas) * .5);
  padding-block-end:.4rem;
}
.jp-corps h3{margin-block:calc(var(--pas) * 1.2) .3rem}
.jp-corps p{margin:0 0 var(--pas)}
.jp-corps ul,.jp-corps ol{margin:0 0 var(--pas);padding-inline-start:1.1rem}
.jp-corps li{margin-block-end:.3rem}
.jp-corps blockquote{
  margin:calc(var(--pas) * 1.2) 0;padding:0 0 0 1rem;
  border-inline-start:5px solid var(--encre-signal);
  font:var(--role-reserve);color:var(--encre-douce);
}
.jp-cible{
  font:400 11px/1.7 var(--police-mention);letter-spacing:.04em;color:var(--encre-douce);
  border-block-start:var(--filet-double);padding-block-start:.6rem;margin-block-start:calc(var(--pas) * 1.4);
}

/* la lettrine : Iowan 62 px, trois lignes, filet de correcteur sous la lettre seule */
.jp-lettrine > p:first-of-type::first-letter{
  float:inline-start;
  font-family:var(--police-titre);font-weight:700;
  font-size:62px;line-height:.82;
  padding-inline-end:.08em;margin-inline-end:.06em;
  border-block-end:3px solid var(--rouge-correcteur);
}

/* l'exergue, sur trame de marbre */
.jp-exergue{
  margin:calc(var(--pas) * 1.4) 0;
  padding:calc(var(--pas) * .9) calc(var(--pas) * 1.1);
  border-inline-start:5px solid var(--encre-signal);
  font-family:var(--police-titre);font-size:1.16rem;line-height:1.48;
}
.jp-exergue p{margin:0}
.jp-exergue cite{
  display:block;margin-block-start:.5rem;font:400 10px/1.6 var(--police-mention);
  font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);
}

/* le releve a trois entrees, toujours au meme endroit */
.jp-releve{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:.1rem 1rem;margin:0 0 calc(var(--pas) * 1.4);
  border-block-start:var(--filet-plomb-fort);padding-block-start:.7rem;
}
@media (min-width:48rem){.jp-releve{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr)}}
.jp-releve__terme{
  font:600 10px/1.7 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-releve__definition{
  margin:0;padding-block-end:.7rem;border-block-end:var(--filet-simple);
  font-size:.98rem;
}
.jp-releve__definition--reserve{font:var(--role-reserve);font-style:italic;color:var(--encre-douce)}

/* la colonne de notes collante : les reperes de provenance de l'article */
.jp-notes{display:grid;gap:.5rem;align-content:start}
/* le pas de la grille fait le rythme : la marge par defaut du <p> la doublait (25 px au lieu de 8) */
.jp-notes > p{margin:0}
.jp-notes__entree{display:grid;gap:.1rem;border-block-end:var(--filet-simple);padding-block-end:.5rem}
.jp-notes__mention{
  font:400 11px/1.6 var(--police-mention);letter-spacing:.06em;color:var(--encre-douce);
  font-variant-numeric:tabular-nums;
}
.jp-notes__titre{margin:0;font-size:.95rem}
.jp-notes__titre a{display:block;color:var(--encre-signal);text-decoration:none}
.jp-notes__titre a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-notes__numero{color:var(--laiton)}

/* le tableau defilant : chiffres tabulaires, jamais de debordement de page */
.jp-defilant{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-block:var(--filet-simple);margin-block:calc(var(--pas) * 1.3);
}
.jp-defilant table{border-collapse:collapse;width:100%;min-width:34rem;margin:0;font-size:.9rem}
.jp-defilant caption{
  text-align:start;padding-block:.5rem;
  font:400 10px/1.6 var(--police-mention);letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-defilant th,.jp-defilant td{
  text-align:start;padding:.5rem .6rem;
  border-block-end:var(--filet-simple);vertical-align:top;
  font-variant-numeric:tabular-nums;
}
.jp-defilant thead th{
  font:600 10px/1.5 var(--police-mention);letter-spacing:.12em;text-transform:uppercase;
  border-block-end:var(--filet-double);
}
.jp-defilant tbody tr:hover{background:var(--surlignage)}
.jp-defilant tbody tr:last-child td{border-block-end:0}
.jp-defilant td a{text-decoration:none}
.jp-defilant td a:hover{text-decoration:underline}

.jp-pied-article{
  border-block-start:var(--filet-double);
  margin-block-start:calc(var(--pas) * 1.6);padding-block-start:var(--pas);
}
.jp-etiquettes{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 var(--pas);padding:0}
.jp-etiquette a{
  display:inline-block;
  font:600 10px/1.6 var(--police-mention);letter-spacing:.12em;text-transform:uppercase;
  border:var(--filet-simple);padding:.25rem .5rem;
  color:var(--encre-signal);text-decoration:none;
}
.jp-etiquette a:hover{border-color:var(--acier-port);color:var(--acier-quai)}
.jp-lies{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.jp-lies__entree{border-block-start:var(--filet-simple);padding-block-start:.4rem}
.jp-lies__entree h3{margin:0 0 .15rem;font-size:1rem}
.jp-lies__entree h3 a{color:inherit;text-decoration:none}
.jp-lies__entree h3 a:hover{color:var(--acier-quai);text-decoration:underline}
.jp-lies__entree p{margin:0;font-size:.88rem;color:var(--encre-douce)}

/* -------------------------------------------------------------------------
   13. PAGE DE RUBRIQUE
   ------------------------------------------------------------------------- */
.jp-ouverture{padding-block:calc(var(--pas) * .6) calc(var(--pas) * 1.1)}
.jp-ouverture__titre{
  font-size:clamp(1.8rem,4.2vw,2.8rem);letter-spacing:-.018em;line-height:1.06;
  margin:.5rem 0 .5rem;padding-block-end:.5rem;
}
.jp-ouverture__texte{max-width:var(--mesure);color:var(--encre-douce)}
.jp-ouverture__compte{
  margin:0;font:400 11px/1.6 var(--police-mention);letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-douce);font-variant-numeric:tabular-nums;
}
.jp-ouverture__visuel{margin:calc(var(--pas) * 1.1) 0 0}
.jp-ouverture__visuel img{width:100%;aspect-ratio:var(--ratio-une);object-fit:cover;border:var(--filet-simple)}
.jp-mis-en-avant{display:grid;gap:.6rem;padding-block:calc(var(--pas) * 1.2);border-block-end:var(--filet-simple)}
.jp-rubriques-voisines{
  list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
  font:400 11px/1.6 var(--police-mention);letter-spacing:.1em;text-transform:uppercase;
}

/* -------------------------------------------------------------------------
   14. PAGE DE SERVICE
   ------------------------------------------------------------------------- */
.jp-page{padding-block:calc(var(--pas) * 1.2)}
.jp-page__titre{
  font-size:clamp(1.8rem,4.2vw,2.6rem);letter-spacing:-.018em;
  margin:.4rem 0 .8rem;padding-block-end:.5rem;
}
.jp-page__corps{max-width:var(--mesure)}
.jp-page__corps h2{font-size:clamp(1.4rem,2.2vw,1.75rem);margin-block:calc(var(--pas) * 1.5) .4rem}

/* -------------------------------------------------------------------------
   15. OURS : le pied qui prouve
   ------------------------------------------------------------------------- */
.jp-ours{
  margin-block-start:calc(var(--pas) * 2.2);
  padding:calc(var(--pas) * 1.4) var(--marge-page) calc(var(--pas) * 1.2);
  margin-inline:calc(var(--marge-page) * -1);
  border-block-start:var(--filet-plomb-fort);
  background:var(--papier-marbre);
  font-size:.9rem;
}
.jp-ours__grille{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:calc(var(--pas) * 1.2) var(--gouttiere);align-items:start;
}
@media (min-width:62rem){.jp-ours__grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.jp-ours h2{
  font:600 10px/1.5 var(--police-mention);letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .5rem;padding-block-end:.3rem;border-block-end:var(--filet-laiton);
}
.jp-ours p{margin:0 0 .5rem;color:var(--encre-douce)}
.jp-ours p:last-child{margin-block-end:0}
.jp-ours ul{list-style:none;margin:0;padding:0}
.jp-ours li{padding-block:.15rem}
.jp-ours__mention{
  display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;justify-content:space-between;
  margin-block-start:calc(var(--pas) * 1.4);padding-block-start:.6rem;
  border-block-start:var(--filet-simple);
  font:400 10px/1.6 var(--police-mention);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-douce);
}
.jp-ours__signature a{color:var(--encre-signal)}

/* -------------------------------------------------------------------------
   16. UTILITAIRES ET IMPRESSION
   ------------------------------------------------------------------------- */
.jp-invisible{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.jp-texte-fin{font:400 11px/1.7 var(--police-mention);letter-spacing:.04em;color:var(--encre-douce)}

@media (max-width:calc(62rem - 1px)){
  .jp-marge--rail{position:static}
  .jp-detail{display:none}
  .jp-depeche--illustre{grid-template-columns:6.4rem minmax(0,1fr);column-gap:calc(var(--pas) * .55)}
  .jp-legende--vignette{font-size:8px;letter-spacing:.06em}
  .jp-figure--marbre img{aspect-ratio:3/4}
  .jp-lettrine > p:first-of-type::first-letter{font-size:46px}
  .jp-epreuve__colonnes{gap:calc(var(--pas) * 1.1)}
  /* une seule colonne : la grille s'efface et ses deux cellules remontent dans le flux de l'edition,
     ce qui permet de remettre en ordre la bande d'epreuve et le second cahier avant la marge */
  .jp-edition{display:grid;grid-template-columns:minmax(0,1fr);row-gap:calc(var(--pas) * 2)}
  .jp-grille{display:contents}
  .jp-epreuve{order:2}
  .jp-cahier--suite{order:3}
  .jp-marge{order:4}
  .jp-edition--accueil .jp-tribune{order:1}
  .jp-edition--hub .jp-ouverture{order:1}
  .jp-edition--hub .jp-tribune{order:3}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

@media print{
  body{background:#fff}
  .jp-edition{border:0;max-width:none}
  .jp-onglets,.jp-epreuve__colonnes{display:none}
  .jp-depeche--illustre{grid-template-columns:minmax(0,1fr)}
  .jp-depeche__vignette{display:none}
  .jp-marge--rail{position:static}
}