/* ═══════════════════════════════════════════════════════════════════
   BLOG MUSLIMOS — feuille de style unique, ecrite a la main.

   POURQUOI ELLE N EST PAS DANS LE GENERATEUR. Le CSS d addiction.js
   vit coince dans un litteral a backticks : chaque correction y coute
   une relecture d echappement. Cette feuille est un FICHIER SOURCE.
   blog-auto.py ne la touche jamais, il se contente de la lier.

   POURQUOI ELLE NE CHARGE AUCUNE POLICE DISTANTE. Un article est du
   texte long, souvent ouvert depuis un resultat de recherche sur un
   telephone en 4G. Une requete vers un domaine de polices, c est une
   resolution DNS, une poignee de main TLS et un blocage du rendu
   avant le premier mot lisible. On prend la pile systeme : elle est
   deja en memoire, elle s affiche a la premiere image. Les noms de la
   charte restent en tete de pile — si le visiteur arrive de la page
   d accueil, il les a deja et la continuite visuelle est gratuite.

   LES COULEURS SONT CELLES DU SITE (index.html, :root) : papier
   #E8E6E1, encre #141310, or #8A6A18. Rien de neuf, rien d invente.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --papier:#E8E6E1;
  --papier2:#DEDBD4;
  --blanc:#F4F2EE;
  --encre:#141310;
  --encre2:rgba(20,19,16,.68);
  --encre3:rgba(20,19,16,.45);
  --trait:rgba(20,19,16,.16);
  --trait2:rgba(20,19,16,.09);
  --or:#8A6A18;
  --d:'Bricolage Grotesque','Arial Narrow',Arial,Helvetica,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --p:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;

  /* LA MESURE. 66 signes par ligne : le milieu de la fourchette 60-75
     ou l oeil retrouve le debut de la ligne suivante sans se perdre.
     `ch` suit la police reelle du visiteur, un `px` ne suivrait rien. */
  --mesure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--p);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Le lien dans le corps du texte se voit sans crier : souligne fin,
   qui s epaissit au survol. On anime la couleur, pas la geometrie. */
.art-corps a{
  color:var(--or);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:text-decoration-thickness .15s linear;
}
.art-corps a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ─────────── LE VOILE DE LECTURE ───────────
   Une bande fine, collante, qui rappelle ou l on est et comment
   revenir. Rien d autre : un blog se lit, il ne se pilote pas. */
.bandeau{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--trait2);
}
.bandeau-in{
  width:min(1100px,100% - 40px);margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  min-height:56px;
}
.bandeau b{font-family:var(--d);font-weight:800;letter-spacing:-.03em;font-size:1.05rem}
.bandeau nav{margin-inline-start:auto;display:flex;gap:16px;flex-wrap:wrap}
.bandeau nav a{
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre2);text-decoration:none;transition:color .18s linear;
}
.bandeau nav a:hover{color:var(--encre)}
@media(max-width:560px){
  .bandeau-in{width:min(1100px,100% - 26px);gap:12px}
  .bandeau nav{gap:11px}
  .bandeau nav a{font-size:.72rem;letter-spacing:.06em}
}

/* ─────────── LA CHARPENTE ─────────── */
.enveloppe{width:min(1100px,100% - 40px);margin-inline:auto}
@media(max-width:560px){.enveloppe{width:min(1100px,100% - 26px)}}

.fil{
  font-family:var(--m);font-size:.72rem;color:var(--encre3);
  letter-spacing:.02em;padding:26px 0 0;
}
.fil a{color:var(--encre3);text-decoration:none}
.fil a:hover{color:var(--encre)}
.fil span{margin:0 .45em}

/* ─────────── L EN-TETE D ARTICLE ─────────── */
.art-tete{padding:22px 0 34px;border-bottom:1px solid var(--trait)}
.etiquette{
  font-family:var(--m);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or);display:block;margin-bottom:16px;
}
h1{
  margin:0;font-family:var(--d);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(1.85rem,1.15rem + 2.6vw,3.15rem);
  max-width:22ch;
}
.chapo{
  margin:20px 0 0;max-width:var(--mesure);
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  line-height:1.6;color:var(--encre2);
}
.art-meta{
  margin-top:22px;font-family:var(--m);font-size:.72rem;
  color:var(--encre3);letter-spacing:.02em;
}
.art-meta span+span::before{content:'·';margin:0 .5em}

/* ─────────── LE CORPS ─────────── */
.art-corps{padding:8px 0 40px}
.art-corps>*{max-width:var(--mesure)}
.art-corps p{margin:0 0 1.15em}
.art-corps h2{
  margin:2.4em 0 .7em;font-family:var(--d);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.35rem,1.15rem + .95vw,1.95rem);
  max-width:26ch;
}
.art-corps h3{
  margin:1.9em 0 .5em;font-family:var(--d);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem);
  max-width:34ch;
}
.art-corps ul,.art-corps ol{margin:0 0 1.3em;padding-inline-start:1.15em}
.art-corps li{margin:0 0 .5em}
.art-corps li::marker{color:var(--encre3)}

/* Le rappel encadre : un fait qu on ne veut pas voir sauté. */
.encart{
  margin:1.8em 0;padding:18px 20px;
  background:var(--blanc);border:1px solid var(--trait2);
  border-inline-start:3px solid var(--or);
  border-radius:2px;
}
.encart p:last-child{margin-bottom:0}
.encart b{font-weight:600}

/* ─────────── LE TABLEAU ───────────
   Il deborde sur telephone : il defile DANS SON CADRE, jamais la
   page. Un corps qui defile lateralement est un defaut de mise en
   page, et Google le mesure. */
.cadre-table{
  margin:1.8em 0;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--trait);border-radius:3px;background:var(--blanc);
}
table{border-collapse:collapse;width:100%;min-width:min(560px,100%);font-size:.93rem}
caption{
  caption-side:top;text-align:start;padding:14px 16px 12px;
  font-family:var(--m);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--encre3);
  border-bottom:1px solid var(--trait2);
}
th,td{padding:11px 16px;text-align:start;vertical-align:top;border-bottom:1px solid var(--trait2)}
thead th{
  font-family:var(--m);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--encre2);font-weight:500;
  background:var(--papier2);
}
tbody tr:last-child td{border-bottom:0}
td.prix{font-family:var(--m);white-space:nowrap}
table a{color:var(--or);text-decoration:none;border-bottom:1px solid rgba(138,106,24,.35)}
table a:hover{border-bottom-color:var(--or)}

/* ─────────── LA SORTIE D ARTICLE ─────────── */
.sortie{
  margin:2.6em 0 0;padding:26px 0 0;border-top:1px solid var(--trait);
  max-width:var(--mesure);
}
.sortie h2{margin-top:0}
.bt{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--encre);color:var(--papier);
  padding:13px 22px;border-radius:999px;
  font-size:.9rem;font-weight:500;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),opacity .18s linear;
}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:translateY(0)}
.bt.creux{background:none;color:var(--encre);border:1px solid var(--trait)}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

.a-lire{margin:2.6em 0 0;padding:26px 0 0;border-top:1px solid var(--trait)}
.a-lire h2{margin-top:0;font-size:1.15rem}
.a-lire ul{list-style:none;margin:0;padding:0;max-width:var(--mesure)}
.a-lire li{margin:0;border-bottom:1px solid var(--trait2)}
.a-lire a{
  display:block;padding:14px 0;text-decoration:none;color:var(--encre);
  transition:color .18s linear;
}
.a-lire a:hover{color:var(--or)}
.a-lire em{
  display:block;font-style:normal;font-family:var(--m);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre3);margin-bottom:3px;
}

/* ─────────── LE SOMMAIRE ─────────── */
.som-tete{padding:34px 0 40px;border-bottom:1px solid var(--trait)}
.som-tete p{max-width:var(--mesure);color:var(--encre2);margin:18px 0 0}

.filtres{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.filtres button{
  font-family:var(--m);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre2);
  border:1px solid var(--trait);border-radius:999px;padding:8px 15px;
  background:none;cursor:pointer;
  transition:color .18s linear,border-color .18s linear;
}
.filtres button[aria-pressed="true"]{color:var(--papier);background:var(--encre);border-color:var(--encre)}

.liste{list-style:none;margin:0;padding:0}
.liste li{border-bottom:1px solid var(--trait)}
.liste a{
  display:grid;grid-template-columns:auto 1fr;gap:6px 26px;
  align-items:baseline;padding:26px 0;text-decoration:none;color:var(--encre);
}
.liste .n{
  font-family:var(--m);font-size:.7rem;color:var(--encre3);
  letter-spacing:.02em;min-width:5.5em;
}
.liste h2{
  margin:0;font-family:var(--d);font-weight:700;letter-spacing:-.025em;
  line-height:1.16;font-size:clamp(1.15rem,1.02rem + .6vw,1.55rem);
  max-width:32ch;transition:color .18s linear;
}
.liste a:hover h2{color:var(--or)}
.liste p{margin:8px 0 0;color:var(--encre2);font-size:.93rem;max-width:60ch}
.liste .cote{
  grid-column:1;font-family:var(--m);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--or);
}
@media(max-width:640px){
  .liste a{grid-template-columns:1fr;gap:4px}
  .liste .n{min-width:0}
}

/* ─────────── LE PIED ─────────── */
.pied{
  margin-top:60px;padding:34px 0 40px;
  border-top:1px solid var(--trait);color:var(--encre2);font-size:.86rem;
}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:18px}
.pied a{color:var(--encre2);text-decoration:none;transition:color .18s linear}
.pied a:hover{color:var(--encre)}
.pied small{color:var(--encre3);font-family:var(--m);font-size:.72rem;letter-spacing:.04em}

/* ─────────── L APPARITION ───────────
   ON PART VISIBLE. Un observateur qui ne demarre pas — script
   differe, navigateur ancien, onglet restaure — ne doit jamais
   laisser une page blanche derriere lui. Le mouvement est ajoute
   par-dessus quelque chose de deja lisible : `.monte` n est posee
   qu en JavaScript, une fois l observateur reellement branche. */
.monte{opacity:0;transform:translate3d(0,14px,0)}
.monte.vu{
  opacity:1;transform:none;
  transition:opacity .5s linear,transform .5s cubic-bezier(.2,.7,.3,1);
}

/* On coupe le MOUVEMENT, jamais le CONTENU. Les deux signaux valent :
   le reglage du systeme et le mode calme du site. */
@media(prefers-reduced-motion:reduce) and (min-width:999999px) /* desarme 17/08 : data-calme est le seul interrupteur */{
  html{scroll-behavior:auto}
  .monte,.monte.vu{opacity:1;transform:none;transition:none}
  .bt{transition:none}
  .bt:hover{transform:none}
}
:root[data-calme="1"] .monte,
:root[data-calme="1"] .monte.vu{opacity:1;transform:none;transition:none}
:root[data-calme="1"] .bt{transition:none}
:root[data-calme="1"] .bt:hover{transform:none}

/* ─────────── L IMPRESSION ───────────
   Un article long finit souvent sur du papier. */
@media print{
  .bandeau,.filtres,.boutons,.a-lire{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .enveloppe{width:auto}
  .cadre-table{overflow:visible}
  a[href^="/"]::after{content:" (muslimos.fr" attr(href) ")";font-size:9pt;color:#555}
}