/* ——— le Journal ——————————————————————————————————————————————————
   Les jetons sont ceux du site : mêmes teintes, mêmes familles, mêmes
   pas d'espacement. Rien n'est réinventé ici, la rubrique n'est pas un
   autre site.

   Angles vifs partout, sauf le visuel d'une entrée (12 px) et le bouton
   d'action (pilule) — les deux seules exceptions de la charte. Le
   dégradé sunburst ne sert qu'au signe et à un filet ; jamais sous du
   texte. */

:root{
  --encre:#1E1440; --violet900:#2E1A66; --violet500:#7C5AD6; --violet300:#B6A0EC;
  --orange:#E56020; --orange700:#B84A16; --ambre:#FFC24B;
  --blanc:#FFFFFF; --nuage:#F2F1F5; --filet:#E4E2E8; --gris:#8A8794; --ardoise:#565360;
  --sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px; --texte:680px;
  /* La hauteur de la barre collante, mesurée : 20 px de marge, son contenu,
     20 px de marge. Elle ne sert qu'à décoller ce qui se fixe en dessous —
     si elle dérivait, le visuel collant se poserait un peu haut ou un peu
     bas, rien ne casserait. */
  --barre:82px;
  --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --s16:64px; --s20:80px; --s24:96px;
}

@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/geist-400.woff2) format('woff2')}
@font-face{font-family:Geist;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/geist-500.woff2) format('woff2')}
@font-face{font-family:Geist;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/geist-700.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/geist-mono-400.woff2) format('woff2')}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--violet500);outline-offset:3px}
img{max-width:100%}

/* Le lien d'évitement : hors de l'écran, mais pas hors de la page — un
   clavier doit pouvoir sauter la barre. */
.jl-saut{position:absolute;left:-9999px;top:0;z-index:20;padding:12px 18px;
  background:var(--encre);color:var(--blanc);text-decoration:none}
.jl-saut:focus{left:0}

/* — la barre — */
/* — la barre —
   Celle du reste du site, aux mêmes mesures : fond blanc, texte encre,
   logotype à gauche, et à droite le sélecteur de langue, le lien de la
   rubrique et le bouton en pilule. Sur la home elle est fixe et sa teinte
   suit l'aplat qui passe dessous ; ici il n'y a pas de chorégraphie, donc
   elle est simplement collante et reste blanche. */
.jl-barre{position:sticky;top:0;z-index:10;display:flex;align-items:center;
  justify-content:space-between;gap:8px 20px;flex-wrap:wrap;
  padding:20px clamp(20px,5vw,56px);
  background:var(--blanc);color:var(--encre)}
.jl-nom{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;
  letter-spacing:-.03em;color:inherit;text-decoration:none}
.jl-signe{width:26px;height:26px;flex:0 0 auto}
.jl-droite{display:flex;align-items:center;gap:14px}

/* Le sélecteur : même dessin que sur la home — mono, très espacé, la
   langue courante pleine et en gras, l'autre à demi. Ce sont des liens et
   non des boutons : chaque langue a ici sa propre adresse. */
.jl-lang{display:flex;align-items:center;gap:2px;
  font:400 12px/1 var(--mono);letter-spacing:.1em}
/* La home grise la langue inactive avec « opacity:.5 ». Mesuré, ça met
   l'encre à 1,89:1 sur blanc — très en dessous du seuil pour du 12 px.
   Même effet, même hiérarchie, mais par une COULEUR nommée : --ardoise
   donne 7,04:1 et reste visiblement secondaire à côté du gras. */
.jl-lang a,.jl-lang span{padding:7px 8px;text-decoration:none;
  color:var(--ardoise);transition:color .2s ease}
.jl-lang a:hover{color:var(--encre)}
.jl-lang [aria-current]{color:var(--encre);font-weight:700}

.jl-j{color:inherit;text-decoration:none;font-size:14px;font-weight:500;
  padding:8px 2px;border-bottom:1px solid transparent}
.jl-j:hover{border-bottom-color:currentColor}

/* Le bouton s'inverse au survol. Les deux couleurs sont NOMMÉES : avec
   « currentColor », la déclaration voisine qui pose la couleur du texte
   l'emporte, et le fond, la bordure et le texte prennent tous les trois
   la même valeur — le bouton devient invisible. */
.jl-btn{display:inline-block;border:1px solid currentColor;color:inherit;
  border-radius:999px;padding:9px 20px;font-size:14px;font-weight:500;
  white-space:nowrap;text-decoration:none;
  transition:background .2s ease,color .2s ease}
.jl-btn:hover{background:var(--encre);border-color:var(--encre);color:var(--blanc)}

/* Sous 470 px, le logotype et le groupe de droite ne tiennent plus sur la
   même ligne : la barre passe sur deux rangées plutôt que de rogner un
   libellé. Mesuré, comme sur la page de lancement. */
@media (max-width:470px){
  .jl-nom{flex:1 0 100%}
  .jl-droite{width:100%;justify-content:flex-end;gap:10px}
}

/* — la liste — */
.jl-tete{padding:var(--s20) clamp(20px,5vw,56px) var(--s10);
  max-width:var(--wrap);margin:0 auto}
.jl-tete h1{margin:0;font-size:clamp(40px,6vw,72px);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.jl-chapo{margin:var(--s4) 0 0;max-width:46ch;font-size:19px;color:var(--ardoise)}
/* Le seul dégradé de la page : un filet, sous le titre de rubrique. */
.jl-filet{height:3px;border:0;margin:var(--s8) 0 0;max-width:var(--wrap);
  background:linear-gradient(90deg,var(--violet500),var(--orange) 52%,var(--ambre))}

.jl-liste{list-style:none;margin:0 auto;padding:0 clamp(20px,5vw,56px) var(--s20);
  max-width:var(--wrap)}
.jl-liste li{border-bottom:1px solid var(--filet)}
.jl-entree{display:grid;gap:var(--s3) var(--s10);align-items:start;
  grid-template-columns:1fr;padding:var(--s8) 0;
  color:inherit;text-decoration:none}
/* La deuxième colonne est celle du chiffre, et n'existe que pour les
   entrées qui en portent un — d'où le modificateur, posé au rendu. Le
   reste du contenu est cloué en colonne 1 : sans ça, l'auto-placement
   envoyait le titre à droite dès que le chiffre manquait. */
@media (min-width:860px){
  .jl-entree--chiffre{grid-template-columns:1fr 200px}
  .jl-entree--chiffre > :not(.jl-chiffre-liste){grid-column:1}
  .jl-chiffre-liste{grid-row:1/span 3;grid-column:2;align-self:start;
    justify-self:end;text-align:right}
}
.jl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ardoise)}
.jl-entree h2{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:700;
  letter-spacing:-.03em;line-height:1.16;text-wrap:balance}
.jl-entree:hover h2{text-decoration:underline;text-underline-offset:4px}
.jl-entree p{margin:0;max-width:60ch;color:var(--ardoise)}
.jl-chiffre-liste{font-size:clamp(30px,3.4vw,44px);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}


/* — une entrée — */
.jl-article{max-width:var(--wrap);margin:0 auto;
  padding:var(--s12) clamp(20px,5vw,56px) var(--s20)}
/* « height:auto » n'est pas décoratif : l'image porte ses dimensions en
   attributs — il les faut, ils réservent la place avant le chargement et
   évitent que la page ne saute — mais l'attribut height se traduit en
   hauteur CSS, qui l'emporte sur aspect-ratio. Sans cette ligne le visuel
   s'affiche à ses 1350 px et non aux 550 de son cadre. */
.jl-visuel{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:12px;background:var(--nuage);margin:0 0 var(--s10)}
.jl-texte{max-width:var(--texte)}

/* Au-delà de cette largeur, le visuel cesse d'occuper une bande à lui seul
   en haut de l'article : il passe à gauche et le texte vient se ranger
   contre lui. Le seuil est celui où les deux colonnes tiennent vraiment —
   plus tôt, le visuel maigrit jusqu'à ne plus rien montrer.
   « align-items:start » est ce qui empêche l'image de s'étirer sur toute
   la hauteur de l'article, qui fait plusieurs écrans. */
@media (min-width:1100px){
  .jl-article{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
    column-gap:var(--s12);align-items:start}
  /* Collant : le visuel accompagne la lecture au lieu de sortir par le haut
     dès le premier écran. C'est le titre de l'entrée qui reste ainsi sous
     les yeux pendant qu'on en lit l'argument. Il se fixe sous la barre, pas
     dessous — d'où la hauteur de celle-ci, plus une respiration.
     « align-items:start » au-dessus est ce qui rend le collant possible :
     un élément étiré sur toute la hauteur de sa cellule n'a nulle part où
     glisser. */
  .jl-visuel{max-width:none;margin:0;position:sticky;top:calc(var(--barre) + var(--s6))}
}
.jl-article h1{margin:var(--s4) 0 0;max-width:20ch;
  font-size:clamp(34px,5vw,60px);font-weight:700;
  letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.jl-article .jl-chapo{font-size:21px;color:var(--ardoise);max-width:var(--texte)}

.jl-corps{max-width:var(--texte);margin-top:var(--s10);font-size:18px;line-height:1.7}
.jl-corps > *{margin:0 0 var(--s4)}
.jl-corps h2{font-size:26px;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;margin-top:var(--s10)}
.jl-corps h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-top:var(--s8)}
.jl-corps h4,.jl-corps h5{font-size:18px;font-weight:700;margin-top:var(--s6)}
.jl-corps ul,.jl-corps ol{padding-left:22px}
.jl-corps li{margin:0 0 8px}
.jl-corps a{color:var(--orange700);text-underline-offset:3px}
.jl-corps code{font-family:var(--mono);font-size:.92em;background:var(--nuage);padding:1px 5px}
.jl-corps blockquote{margin:var(--s8) 0;padding-left:var(--s4);
  border-left:3px solid var(--violet500);color:var(--ardoise)}
.jl-corps hr{height:1px;border:0;background:var(--filet);margin:var(--s10) 0}

/* Le chiffre du jour, sur violet profond : texte blanc, angles vifs. */
.jl-chiffre{max-width:var(--texte);margin-top:var(--s12);padding:var(--s8);
  background:var(--encre);color:var(--blanc)}
.jl-chiffre b{display:block;font-size:clamp(44px,6vw,72px);font-weight:700;
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.jl-chiffre p{margin:var(--s3) 0 0;font-size:17px;color:#C8C5D2;max-width:44ch}
.jl-source{display:inline-block;margin-top:var(--s4);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet300);text-underline-offset:4px}

/* L'appel à l'action. Une seule sur la page, et c'est celle-ci. */
.jl-appel{max-width:var(--texte);margin-top:var(--s12);padding-top:var(--s8);
  border-top:1px solid var(--filet)}
.jl-appel p{margin:0 0 var(--s6);font-size:21px;font-weight:500;
  letter-spacing:-.02em;max-width:34ch}
.jl-action{display:inline-block;padding:14px 26px;border-radius:999px;
  background:var(--orange);color:var(--encre);
  font-weight:700;font-size:16px;text-decoration:none}
.jl-action:hover{background:var(--orange700);color:var(--blanc)}
.jl-ailleurs{margin-top:var(--s8);font-size:15px;color:var(--ardoise)}
.jl-ailleurs a{color:var(--ardoise);text-underline-offset:3px}

/* — pagination, page vide, pied — */
.jl-pages{display:flex;gap:var(--s4);justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,56px) var(--s20);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.jl-pages a{color:var(--encre);text-underline-offset:4px}
.jl-vide{max-width:var(--texte);margin:0 auto;padding:var(--s20) clamp(20px,5vw,56px)}
.jl-vide h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.04em;line-height:1.05;margin:var(--s4) 0}
.jl-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ardoise);margin:0}

/* — la page d'attente —
   Tant qu'aucune entrée n'est publiée, la rubrique tenait en une phrase
   centrée au milieu d'un grand blanc. Ce bloc le remplit avec ce qui est
   vrai : ce qu'on y publiera. Angles vifs, une seule action orange — le
   bouton du bas ; le flux reste un lien de texte. */
.jl-attente{max-width:var(--wrap);margin:0 auto;
  padding:var(--s12) clamp(20px,5vw,56px) var(--s20)}
.jl-attente__t{margin:0;font-size:clamp(24px,3vw,32px);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--encre);max-width:20ch}
.jl-attente__d{margin:14px 0 0;font-size:18px;line-height:1.6;
  color:var(--ardoise);max-width:52ch}
.jl-attente__act{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;
  margin:var(--s10) 0 0}

/* — le pied —
   Celui du reste du site, aux mêmes mesures : quatre colonnes dont la
   première vaut 1,7 fois les autres, le paragraphe de bas de page sous un
   filet, et la barre de signature. Sur violet profond le texte est blanc —
   la charte l'impose, et #C8C5D2 sur #1E1440 donne 9,9:1. */
.jl-ft{background:var(--encre);color:var(--blanc);
  padding:var(--s16) clamp(20px,5vw,56px) var(--s10)}
.jl-ft__in{max-width:var(--wrap);margin:0 auto}
.jl-ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s10)}
.jl-ft__logo{display:inline-block;line-height:0}
.jl-ft__logo img{width:196px;height:auto}
.jl-ft__d{margin:22px 0 0;color:#C8C5D2;max-width:38ch;font-size:15px;line-height:1.6}
.jl-ft__soon{margin:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet300)}
.jl-ft__h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet300);font-weight:400;line-height:1.4;margin:0 0 14px}
.jl-ft__l{list-style:none;padding:0;margin:0}
.jl-ft__l li{font-size:15px;line-height:1.5;color:#C8C5D2;padding:7px 0}
.jl-ft__l a{color:#C8C5D2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24);
  transition:color .15s ease,border-color .15s ease}
.jl-ft__l a:hover{color:var(--blanc);border-bottom-color:var(--blanc)}
.jl-ft__seo{margin-top:var(--s16);padding-top:var(--s8);border-top:1px solid rgba(255,255,255,.14);
  font-size:14px;line-height:1.7;color:#A9A5B6;max-width:94ch}
.jl-ft__bar{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;
  margin-top:var(--s8);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet300)}
.jl-ft :focus-visible{outline-color:var(--ambre)}
@media (max-width:900px){ .jl-ft__grid{grid-template-columns:1fr 1fr;gap:var(--s8)} }
@media (max-width:620px){ .jl-ft__grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}