/* ============================================================================
   LA FEUILLE DU GRIOT — une seule feuille de style pour tout le site.
   ----------------------------------------------------------------------------
   Règle : toute page du Griot est une feuille du même journal. Ce qui change
   entre les pages, c'est la taille de la manchette, pas sa nature.

   Cette feuille est servie par /griot.css?v=<empreinte> (cache immuable un an,
   l'empreinte change avec le fichier). Elle est chargée :
     - par toutes les pages secondaires (rubriques, archives, enquêtes, griot,
       à propos, veille, JO, corpus, comptes…), qui n'ont plus de CSS en ligne ;
     - par les éditions, APRÈS leur feuille cuite dans le fichier HTML et après
       les correctifs d'écran : elle gagne donc à spécificité égale et rattrape
       les quarante éditions déjà parues sans les refabriquer.

   Ce qui ne bouge pas : le papier crème, l'encre, la table brune, le rouge
   d'imprimerie, les quatre voix typographiques (gothique, Playfair, Baskerville,
   Garamond italique), les filets doubles, l'ours.

   L'affiche PNG et le PDF sont rendus par puppeteer depuis le fichier HTML nu
   (file://), sans cette feuille : rien ici ne les touche.
   ========================================================================== */

/* ---------- 1. Les jetons ----------
   Les noms anglais (--paper, --ink…) sont ceux des éditions figées : ils font
   foi. Les noms français des anciennes pages secondaires restent en alias,
   pour qu'aucune règle oubliée ne perde ses couleurs. */
:root{
  --paper:#f3eee1;
  --paper-deep:#e8e0cd;
  --ink:#17140f;
  --ink-soft:#3b352b;
  --rule:#17140f;
  --table:#57503f;
  --accent:oklch(0.46 0.170 32);
  --papier:var(--paper);
  --encre:var(--ink);
  --brun:var(--table);
  --doux:var(--ink-soft);

  /* la gamme d'espaces : tous les blancs de la feuille tirent dedans */
  --e-1:4px;--e-2:8px;--e-3:16px;--e-4:24px;--e-5:40px;--e-6:64px;

  /* l'échelle typographique des pages secondaires (les éditions gardent
     --corps, leur mesure de journal) */
  --t-une:clamp(27px,5vw,40px);
  --t-titre:clamp(20px,3.2vw,26px);
  --t-sous:17px;
  --t-rubrique:11px;
  --t-chapeau:17px;
  --t-corps:15.5px;
  --t-note:12.5px;

  /* les interlettrages : quatre, pas dix-neuf */
  --serre:-.02em;--caps:.08em;--caps-large:.12em;

  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --titrage:"Playfair Display",Georgia,serif;
  --italique:"EB Garamond",Georgia,serif;
  --gothique:"UnifrakturMaguntia","Playfair Display",serif;
  --ombre:0 18px 50px rgba(0,0,0,.45);
}

/* La lampe : le lecteur l'allume lui-même (cookie griot_lampe, classe posée
   par le serveur). Six jetons redéfinis, et TOUT le site suit — les éditions
   comme les rubriques, qui restaient crème jusqu'ici. */
html.lampe{
  color-scheme:dark;
  --paper:oklch(0.20 0.012 70);
  --paper-deep:oklch(0.24 0.014 70);
  --ink:oklch(0.90 0.014 82);
  --ink-soft:oklch(0.74 0.012 82);
  --rule:oklch(0.90 0.014 82);
  --table:oklch(0.14 0.008 70);
  --accent:oklch(0.68 0.15 36);
  --ombre:0 18px 50px rgba(0,0,0,.7);
}

/* ---------- 2. La table ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--table)}
html{-webkit-text-size-adjust:100%}
body{color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
html.lampe body{background:var(--table)}

/* Tourner la feuille : d'une page à l'autre, la nav reste en place et seule la
   feuille se fond. Sans script, ignoré par les navigateurs qui ne le gèrent
   pas, éteint si le lecteur a demandé moins de mouvement. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}

/* ---------- 3. La navigation du site ----------
   La lampe et les cinq cases. Sur téléphone, une seule ligne qui défile au
   doigt, la lampe en dernière case : plus de case noire vide. */
.lampe-choix{display:block;width:1080px;max-width:100%;margin:0 auto var(--e-1);text-align:right}
.dit-seulement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.si-sombre{display:none}
html.lampe .si-clair{display:none}
html.lampe .si-sombre{display:inline}
.lampe-choix a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding:5px 9px;text-decoration:none;background:var(--paper);color:var(--ink);border:1.5px solid var(--rule)}
.lampe-choix a:hover{background:var(--ink);color:var(--paper)}
.lampe-choix svg{width:30px;height:30px;display:block}

.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  width:1080px;max-width:100%;margin:0 auto var(--e-2);background:var(--rule);border:1.5px solid var(--rule);
  view-transition-name:cases}
.cases a{display:block;background:var(--paper);color:var(--ink);text-decoration:none;text-align:center;
  padding:8px 6px;font-family:var(--titrage);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--caps);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cases a:hover{background:var(--ink);color:var(--paper)}
/* La case active prend l'encre pleine, comme le jour courant dans le bandeau. */
.cases a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.cases a:focus-visible,.lampe-choix a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

.cases .case-lampe{display:none}
@media (max-width:620px){
  .lampe-choix{display:none}
  .cases{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity}
  .cases::-webkit-scrollbar{display:none}
  .cases a{flex:0 0 auto;font-size:10px;padding:10px 12px;min-height:40px;scroll-snap-align:start}
  .cases a[aria-current="page"]{order:-1}
  /* la lampe redevient une case de la bande, en fin de ligne */
  .cases .case-lampe{display:block}
}

/* ---------- 4. Le bandeau de la semaine (éditions) ----------
   Il fait partie de l'édition, pas de la navigation du site : il descend sous
   la nav, sur une ligne. Sur téléphone il ne montre que les cinq derniers
   jours ; le reste est aux archives. */
.semaine{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:center;
  width:1080px;max-width:100%;margin:0 auto var(--e-2);padding:8px 12px;
  background:var(--paper);border:1.5px solid var(--rule);
  font-family:var(--titrage);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--caps)}
.semaine .lbl{color:var(--ink-soft);letter-spacing:var(--caps-large)}
.semaine a{color:var(--ink);text-decoration:none;padding:2px 6px;border:1px solid transparent}
.semaine a:hover{border-color:var(--rule)}
.semaine a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.semaine .abo-lien{margin-left:auto;border:1.5px solid var(--rule);padding:3px 9px}
.semaine .enveloppe{width:1.05em;height:auto;vertical-align:-.14em;margin-left:.4em;fill:none;
  stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:620px){
  .semaine{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
    gap:2px;padding:4px 8px;font-size:10px}
  .semaine::-webkit-scrollbar{display:none}
  .semaine .lbl{display:none}
  .semaine a{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;padding:0 10px;margin:0}
  /* les jours au-delà des cinq derniers : aux archives */
  .semaine a:not(.abo-lien):nth-last-child(n+7){display:none}
  .semaine .abo-lien{margin-left:auto}
}

/* ---------- 5. La feuille des pages secondaires ---------- */
.feuille{max-width:760px;margin:0 auto;background:var(--paper);box-shadow:var(--ombre);position:relative}
.feuille--large{max-width:1080px}
.feuille--etroite{max-width:560px}
.cadre.centre{text-align:center}
.cadre.centre p,.cadre.centre .message{margin-left:auto;margin-right:auto}
.message{margin:var(--e-3) 0 var(--e-2)}
.message p{font-size:15.5px;line-height:1.65}
.cadre{border:3px double var(--rule);margin:10px;padding:var(--e-4) clamp(18px,5vw,44px) var(--e-4)}
body.page-papier{padding:var(--e-4) 14px var(--e-6);line-height:1.7;font-size:var(--t-corps)}
@media (max-width:620px){
  body.page-papier{padding:var(--e-2) var(--e-1) var(--e-5)}
  .cadre{margin:8px;padding:var(--e-3) 14px var(--e-4)}
}

/* La manchette réduite : l'ours devient l'en-tête. Titre gothique, date du
   jour, numéro. Même feuille, même journal que la Une. */
.manchette{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--e-2) var(--e-3);
  border-top:3px double var(--rule);border-bottom:3px double var(--rule);padding:var(--e-2) 2px;
  margin:0 0 var(--e-4);font-family:var(--titrage);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:var(--caps);view-transition-name:manchette}
.manchette .titre{grid-column:2;text-align:center;text-decoration:none;color:inherit;
  display:flex;align-items:baseline;gap:.35em;text-transform:none;letter-spacing:0}
.manchette .titre .gothique{font-family:var(--gothique);font-weight:400;font-size:26px;line-height:1}
.manchette .titre .capitales{font-family:var(--titrage);font-weight:900;font-size:22px;letter-spacing:var(--serre);
  text-transform:uppercase;line-height:1}
.manchette .titre:hover .capitales{color:var(--accent)}
.manchette .gauche{grid-column:1;grid-row:1}
.manchette .droite{grid-column:3;grid-row:1;text-align:right}
.manchette .num{color:var(--accent)}
.manchette .devise{grid-column:1 / -1;text-align:center;font-family:var(--italique);font-style:italic;
  font-weight:400;font-size:13px;text-transform:none;letter-spacing:0;margin-top:-4px}
@media (max-width:620px){
  .manchette{grid-template-columns:1fr 1fr;padding:var(--e-2) 0;margin-bottom:var(--e-3)}
  .manchette .titre{grid-column:1 / -1;grid-row:1;justify-content:center}
  .manchette .gauche{grid-column:1;grid-row:2;font-size:9.5px;letter-spacing:.04em}
  .manchette .droite{grid-column:2;grid-row:2;font-size:9.5px;letter-spacing:.04em}
  .manchette .devise{display:none}
}

/* Le fil : d'où l'on vient, en une ligne. */
.fil{font-family:var(--titrage);font-size:var(--t-rubrique);text-transform:uppercase;letter-spacing:var(--caps-large);
  text-align:center;margin:0 0 var(--e-3)}
.fil a{color:inherit}
.rubrique{font-family:var(--titrage);font-weight:700;text-transform:uppercase;letter-spacing:var(--caps-large);
  font-size:var(--t-rubrique);text-align:center;margin:0 0 var(--e-3)}

/* La typographie des pages secondaires */
.cadre h1{font-family:var(--titrage);font-weight:900;font-size:var(--t-une);line-height:1.06;
  margin:0 0 var(--e-2);text-align:center;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.cadre h1.bas-de-casse{text-transform:none;letter-spacing:var(--serre)}
.resume,.sous,.chapeau-texte{font-family:var(--italique);font-style:italic;font-size:var(--t-chapeau);text-align:center;
  margin:0 auto var(--e-2);max-width:60ch;line-height:1.5;border-bottom:3px solid var(--rule);padding-bottom:var(--e-3)}
.cadre h2{font-family:var(--titrage);font-weight:700;font-size:var(--t-sous);text-transform:uppercase;
  letter-spacing:.06em;margin:var(--e-5) 0 var(--e-2);border-bottom:1px solid var(--rule);padding-bottom:5px;line-height:1.2}
.cadre h2:first-of-type{margin-top:var(--e-4)}
.cadre h3{font-family:var(--titrage);font-weight:700;font-size:15.5px;margin:var(--e-3) 0 var(--e-1)}
.cadre p{font-size:var(--t-corps);margin:0 0 13px;max-width:66ch}
.cadre p:last-child{margin-bottom:0}
.cadre a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.cadre a:hover{text-decoration-thickness:2px}
.cadre a.bouton,.cadre a.retour,.cadre .chip,.cadre .fiche,.cadre .sujets a,.cadre .case h2 a,.cadre .item h2 a,.cadre .feuilleter a,.cadre .manchette a{text-decoration:none}
.cadre a:focus-visible,.cadre button:focus-visible,.cadre input:focus-visible,.cadre summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.cadre strong{font-family:var(--titrage)}
.cadre ul.main{margin:0 0 13px;padding-left:0;list-style:none;max-width:64ch}
.cadre ul.main li{font-size:var(--t-corps);margin-bottom:var(--e-2);padding-left:22px;position:relative}
.cadre ul.main li::before{content:"☞";position:absolute;left:0}
.cadre .justifie p{text-align:justify;hyphens:auto}
.fleuron{width:120px;margin:var(--e-4) auto;color:var(--ink);display:block}
.fleuron svg{width:100%;height:auto;display:block}
.encadre{border:1.5px solid var(--rule);padding:var(--e-3) 18px;margin:var(--e-4) 0;background:var(--paper-deep)}
.encadre p:last-child{margin-bottom:0}
.vide{border:1.5px dashed var(--rule);padding:18px;text-align:center;font-family:var(--italique);
  font-style:italic;font-size:16px;margin:var(--e-4) 0}
.note{font-size:var(--t-note);color:var(--ink-soft)}
.date{font-family:var(--titrage);font-size:var(--t-rubrique);text-transform:uppercase;letter-spacing:var(--caps-large);
  text-align:center;margin:14px 0 var(--e-4)}

/* Les boutons de plomb, un seul dessin partout */
.bouton,.retour,.cadre button,.ours-fin button{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--rule);cursor:pointer;text-decoration:none;
  font-family:var(--titrage);font-weight:700;text-transform:uppercase;letter-spacing:var(--caps);
  font-size:12px;padding:11px 22px;min-height:44px;line-height:1}
.bouton:hover,.retour:hover,.cadre button:hover,.ours-fin button:hover{background:var(--ink-soft);color:var(--paper)}
.bouton.calme,.cadre button.calme,.chip{background:var(--paper);color:var(--ink)}
.cadre input[type=email],.cadre input[type=text]:not(.piege),.cadre input[type=password],.cadre textarea,
.ours-fin input[type=email]{
  font-family:var(--italique);font-size:16px;padding:10px 12px;min-height:44px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);min-width:0;width:100%}
.cadre input:focus,.ours-fin input:focus{outline:2px solid var(--accent);outline-offset:1px}
.piege{position:absolute;left:-6000px;width:1px;height:1px;opacity:0}


/* Les formulaires de compte : étiquettes en capitales, champs pleine largeur */
.formulaire{text-align:left;margin:var(--e-3) 0 var(--e-2)}
.formulaire .etiquette{display:block;font-family:var(--titrage);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:var(--caps);color:var(--ink-soft);margin:0 0 4px}
.formulaire input[type=email],.formulaire input[type=password],.formulaire input[type=text]:not(.piege){margin:0 0 12px}
.formulaire .case-a-cocher{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:2px 0 14px;line-height:1.5}
.formulaire .case-a-cocher input{width:auto;min-height:0;margin-top:3px;accent-color:var(--ink)}
.formulaire .envoi,.envoi{text-align:center}
.cadre.centre .gauche{text-align:left}

/* Les rubriques : une grille de cases */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;margin-top:var(--e-3)}
.case{border-top:1px solid var(--rule);padding:14px 16px 16px}
.case h2{font-size:16px;letter-spacing:.03em;margin:0 0 5px;border:0;padding:0}
.case h2 a{color:inherit;text-decoration:none}
.case h2 a:hover{text-decoration:underline}
.case p{font-size:13px;margin:0;font-family:var(--italique);font-style:italic}
.compte{font-family:var(--titrage);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;margin-top:6px;color:var(--ink-soft)}

/* Les listes d'éditions et d'enquêtes */
article.item{border-top:1px solid var(--rule);padding:15px 0}
article.item:first-of-type{border-top:3px solid var(--rule)}
.rang{font-family:var(--titrage);font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);margin:0 0 4px}
.item h2{font-size:19px;line-height:1.12;margin:0 0 5px;border:0;padding:0;text-transform:none;letter-spacing:0}
.item h2 a{color:inherit;text-decoration:none}
.item h2 a:hover{text-decoration:underline}
.item p{font-family:var(--italique);font-style:italic;font-size:14.5px;margin:0}
.formats{font-family:var(--titrage);font-size:10.5px;text-transform:uppercase;letter-spacing:var(--caps);margin-left:8px}
.formats a{margin-left:8px}

/* Demandez au griot : la conversation */
.q-form{display:flex;gap:10px;flex-wrap:wrap;margin:var(--e-3) 0}
.q-form input{flex:1 1 200px}
.reponse{border:3px double var(--rule);padding:20px 22px;margin:18px 0;font-size:16px;line-height:1.7;background:var(--paper-deep)}
.msg{display:flex;margin:0 0 12px}
.msg.u{justify-content:flex-end}
.msg .bulle{max-width:86%;padding:10px 14px;font-size:15px;line-height:1.6}
.msg.u .bulle{background:var(--ink);color:var(--paper);border:1.5px solid var(--rule)}
.msg.b .bulle{background:var(--paper);border:1.5px solid var(--rule)}
.fiche{display:block;border:1px solid var(--rule);padding:7px 11px;margin-top:9px;text-decoration:none;color:inherit;background:var(--paper-deep)}
.fiche-l{display:block;font-family:var(--titrage);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.fiche-t{display:block;font-size:13.5px;font-weight:700;font-family:var(--titrage)}
.fiche-x{display:block;font-size:13px;font-family:var(--italique);font-style:italic;margin-top:2px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 var(--e-3);padding:0;border:0}
.chip{border:1.5px solid var(--rule);padding:7px 13px;font-family:var(--titrage);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;text-align:left;min-height:40px}
.chip:hover{background:var(--ink);color:var(--paper)}

/* L'enquête du dimanche */
.chapeau-texte{font-size:18px;line-height:1.55}
.reserve{position:relative}
.barriere{border:2px solid var(--rule);padding:22px 24px;margin:var(--e-4) 0 0;text-align:center;background:var(--paper-deep)}
.barriere p{text-align:center;font-size:15px}
.barriere .titre{font-family:var(--titrage);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:15px;margin-bottom:10px}
.fondu{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);max-height:190px;overflow:hidden}
.cadre .chiffres-enquete{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:var(--e-4) 0}
.cadre .chiffres-enquete div{margin-bottom:8px;font-size:15px}
.cadre .chiffres-enquete .v{font-family:var(--titrage);font-weight:900;font-size:20px;margin-right:8px}
.reserves{font-family:var(--italique);font-style:italic;font-size:14.5px;border-left:3px solid var(--rule);padding-left:16px;margin:var(--e-4) 0}
.cadre .sources{font-size:13px;margin-top:var(--e-4);border-top:1px solid var(--rule);padding-top:14px;color:var(--ink-soft)}

/* Les pages d'offre : veille, JO, corpus */
.releve,.champs{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px}
.tableau{overflow-x:auto;margin:0 0 var(--e-3)}
.releve th,.champs th{text-align:left;font-family:var(--titrage);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;padding:0 12px 6px 0;border-bottom:2px solid var(--rule)}
.releve td,.champs td{padding:9px 12px 9px 0;border-bottom:1px solid var(--paper-deep);vertical-align:top}
.releve td.v{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.releve tr:last-child td,.champs tr:last-child td{border-bottom:none}
.champs{font-size:14px}
.champs td.n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;white-space:nowrap}
.champs td.t{font-style:italic;white-space:nowrap;color:var(--ink-soft);font-size:13px}
@media (max-width:620px){.champs td.t,.champs th:nth-child(2){display:none}}
.sujets{display:flex;flex-wrap:wrap;gap:6px;margin:var(--e-1) 0 var(--e-4);padding:0;list-style:none}
.sujets a{display:block;border:1.5px solid var(--rule);padding:7px 11px;text-decoration:none;min-height:40px;
  font-family:var(--titrage);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.6}
.sujets a[aria-current]{background:var(--ink);color:var(--paper)}
.sujets .n{font-family:var(--serif);font-weight:400;opacity:.7}
.jour{margin:0 0 var(--e-4);border-top:1.5px solid var(--rule);padding-top:12px}
.jour .date{display:inline;font-family:var(--titrage);font-weight:900;font-size:15px;text-transform:uppercase;
  letter-spacing:.04em;margin:0}
.jour .num{font-family:var(--italique);font-style:italic;font-size:14px;color:var(--ink-soft)}
.entree{margin:12px 0;padding-left:74px;position:relative;max-width:66ch}
.entree .rang{position:absolute;left:0;top:2px;font-size:10px;font-weight:700;border:1px solid var(--rule);
  padding:1px 5px;white-space:nowrap;color:var(--ink)}
.entree .t{font-family:var(--titrage);font-weight:700;font-size:15.5px;display:block}
.entree .x{font-size:15px;display:block}
.entree .s{font-size:13px;color:var(--ink-soft);font-style:italic;display:block;margin-top:2px}
.lesChiffres{margin:10px 0 0;padding-left:74px;font-size:14.5px}
.lesChiffres b{font-variant-numeric:tabular-nums}
.sourcesJour{padding-left:74px;font-size:13px;color:var(--ink-soft);font-style:italic;margin-top:8px}
@media (max-width:620px){
  .entree,.lesChiffres,.sourcesJour{padding-left:0}
  .entree .rang{position:static;display:inline-block;margin-bottom:4px}
}
.extrait{border:1.5px solid var(--rule);background:var(--paper-deep);padding:14px 16px;margin:8px 0 6px;overflow-x:auto}
.extrait pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;white-space:pre}
.souslien{font-size:13.5px;margin:0 0 18px}

/* ---------- 6. L'ours de fin : un seul pied pour tout le site ---------- */
.ours-fin{border-top:3px double var(--rule);margin-top:var(--e-5);padding-top:var(--e-3);text-align:center;
  font-size:var(--t-note);line-height:1.7;color:var(--ink)}
.ours-fin .marque{font-family:var(--titrage);font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:var(--caps);margin:0 0 var(--e-2)}
.ours-fin form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:var(--e-2) auto var(--e-1);max-width:520px}
.ours-fin form input[type=email]{flex:1 1 220px;width:auto}
.ours-fin p{margin:var(--e-1) 0;max-width:none}
.ours-fin .liens a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ours-fin .devise-pied{font-family:var(--italique);font-style:italic;color:var(--ink-soft);margin-top:var(--e-2)}

/* L'ancien double pied hors feuille : il ne doit plus apparaître, mais si une
   page l'émet encore, il prend au moins l'habit du journal. */
.pied-journal{width:760px;max-width:100%;margin:22px auto 0;padding:14px 12px 4px;border-top:1px solid var(--rule);
  text-align:center;font-family:var(--serif);font-size:13px;line-height:1.7;color:var(--ink)}
.pied-journal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pied-journal form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 4px}
.pied-journal input{font-family:var(--italique);font-size:15px;padding:9px 11px;min-height:44px;border:1.5px solid var(--rule);
  background:var(--paper);color:inherit;min-width:200px}
.pied-journal button{font-family:var(--titrage);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--caps);
  padding:9px 16px;min-height:44px;cursor:pointer;border:1.5px solid var(--rule);background:var(--ink);color:var(--paper)}
.pied-journal .devise-pied{font-style:italic;opacity:.8;margin-top:8px}
.cadre .pied{text-align:center;margin-top:var(--e-4);border-top:1px solid var(--rule);padding-top:var(--e-3);font-size:13px}

/* La bannière de première visite, dans l'habit de la feuille. */
.premiere-visite{width:1080px;max-width:100%;margin:0 auto var(--e-2);padding:10px 16px;background:var(--paper);
  border:1px solid var(--rule);color:var(--ink);font-family:var(--italique);font-style:italic;font-size:15px;text-align:center}
.premiere-visite a{color:inherit;font-weight:700}

/* ---------- 7. Les éditions : ce que la feuille corrige au service ----------
   Le HTML des éditions est figé (fichier cuit à la fabrication). Tout ce qui
   suit s'applique par-dessus, sans toucher au fichier ni à l'affiche, et
   seulement sous body.edition, posé par le serveur : aucune autre page n'est
   touchée. */

/* Les colonnes se remplissent comme chez un metteur en page : les encadrés
   latéraux se répartissent sur la hauteur de la colonne centrale au lieu de
   laisser un trou en bas. Le bas de page : les brèves, les plus longues,
   tiennent deux rangs ; l'abonnement et le partage se rangent dessous. */
@media (min-width:961px){
  .edition .body-grid{align-items:stretch}
  .edition .body-grid > .col:first-child,.edition .body-grid > .col:last-child{justify-content:space-between}
  .edition .foot-grid{align-items:start}
  .edition .foot-grid > .brefs{grid-row:span 2}
  .edition .foot-grid > .box{min-height:0}
}

/* La météo repliée n'existe que sur téléphone. */
.edition .meteo-tel{display:none}

/* Le feuilletage hier/demain, au bas de la feuille. */
.feuilleter{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);font-family:var(--titrage);
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--caps);margin:var(--e-3) 0 0;
  border-top:1px solid var(--rule);padding-top:var(--e-2)}
.feuilleter a{text-decoration:none;color:var(--ink);border:1px solid var(--rule);padding:8px 12px;min-height:40px;
  display:inline-flex;align-items:center}
.edition .feuilleter a{text-decoration:none}
.feuilleter a:hover{background:var(--ink);color:var(--paper)}
.feuilleter span{flex:1}
.ours-fin .feuilleter{border-top:0;margin:0 0 var(--e-3);padding-top:0}

/* Le pli mobile : le lecteur venu de WhatsApp voit la nouvelle du jour sans
   faire défiler. Le journal papier fait pareil, plié en quatre dans la boîte. */
@media (max-width:620px){
  body.edition{padding:var(--e-1) var(--e-1) var(--e-4)}
  .edition .sheet{padding:6px}
  .edition .frame{padding:6px}
  .edition .masthead{gap:2px;padding:2px 0}
  .edition .masthead .sun-wrap,.edition .masthead .motto,.edition .masthead .title-sub{display:none}
  .edition .title-1{font-size:clamp(24px,7.5vw,32px);margin:2px 0 0}
  .edition .title-2{font-size:clamp(34px,11vw,48px);margin:0}
  /* la météo quitte la manchette : elle est reposée après le sommaire par le
     serveur (details.meteo-tel), repliée */
  .edition .masthead .meteo{display:none}
  .edition .meteo-tel{display:block;border:1px solid var(--rule);margin:var(--e-2) 0;padding:0}
  .edition .meteo-tel summary{cursor:pointer;list-style:none;padding:10px 12px;font-family:var(--titrage);font-weight:700;
    font-size:11px;text-transform:uppercase;letter-spacing:var(--caps);display:flex;justify-content:space-between;align-items:center;min-height:44px}
  .edition .meteo-tel summary::-webkit-details-marker{display:none}
  .edition .meteo-tel summary::after{content:"▾";font-size:14px}
  .edition .meteo-tel[open] summary::after{content:"▴"}
  .edition .meteo-tel .cloud{width:40px;margin:0 auto 4px}
  .edition .meteo-tel .p{padding:0 12px 12px;text-align:left}
  .edition .meteo-tel .hd{display:none}
  .edition .ours{grid-template-columns:auto 1fr auto;gap:var(--e-2);text-align:center;font-size:9.5px;padding:4px 0}
  .edition .ours .mid{font-size:10px;letter-spacing:.05em}
  .edition .ours .right{text-align:right}
  .edition .ours .whisper{display:none}
  .edition .rule-thick{margin:5px 0}
  .edition .lede-title{font-size:clamp(26px,8vw,36px);margin-top:4px}
  .edition .lede-sub{font-size:15px;margin:6px 0 4px}
  /* le sommaire suit le lecteur pendant qu'il lit */
  .edition .sommaire-tel{position:sticky;top:0;z-index:5;background:var(--paper);gap:4px;padding:6px 4px;margin:6px 0;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;justify-content:flex-start}
  .edition .sommaire-tel::-webkit-scrollbar{display:none}
  .edition .sommaire-tel a{flex:0 0 auto;min-height:40px;font-size:.8em;padding:0 10px;border:1px solid var(--rule)}
  .edition [id]{scroll-margin-top:60px}
  .edition .griot-parle{padding:8px 6px;margin:6px 0;gap:10px}
  .edition .griot-parle .kora-lit{width:40px}
  .edition .griot-parle audio{height:40px}
}
@media (max-width:620px) and (prefers-reduced-motion:no-preference){
  .edition .meteo-tel[open] .p{animation:deplie .18s ease-out}
  @keyframes deplie{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* Les titres tiennent leurs lignes ; le corps justifié coupe les mots en
   français. */
.edition .lede-title,.edition .st-titre,.edition .dep-titre,.edition .deck-title,.edition .title-2{text-wrap:balance}
.edition .lede-corps p,.edition .depeche .p{hyphens:auto;-webkit-hyphens:auto}
.edition h1,.edition h2,.edition h3{overflow-wrap:break-word}

/* La lampe sur les éditions : le fichier cuit porte trois couleurs en dur ;
   on les rattrape ici. */
html.lampe .edition .abo-form input[type=email],html.lampe .edition .appel-abonnement input{background:var(--paper-deep)}
html.lampe .edition .sheet::before{opacity:.18}
html.lampe .edition .photo-wrap::after{opacity:.35}
html.lampe .edition .photo-wrap img{filter:grayscale(1) contrast(1.05) brightness(.86) sepia(.10)}
html.lampe .premiere-visite,html.lampe .encadre,html.lampe .reponse{background:var(--paper-deep)}

/* ---------- 8. L'impression : une règle, la même partout ---------- */
@media print{
  html,body{background:#fff}
  .lampe-choix,.cases,.semaine,.premiere-visite,.ours-fin form,.pied-journal,.sommaire-tel,.meteo-tel,.partage-ecran{display:none!important}
  .feuille,.sheet{box-shadow:none;max-width:none}
}