/* by Najm — feuille de style unique. Deux familles : Reem Kufi (titres, repères) et Source Serif 4 (texte). */
@font-face{font-family:"Reem Kufi";src:url("/fonts/reem-kufi-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Reem Kufi";src:url("/fonts/reem-kufi-arabic-wght-normal.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Source Serif 4";src:url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-display:swap}

:root{
  --sky:#E8EEF5;      /* papier de carte du ciel */
  --paper:#FCFDFE;    /* page */
  --ink:#14213D;      /* encre indigo */
  --muted:#46566F;    /* texte secondaire */
  --line:#A3B3C8;     /* traits de la carte */
  --brass:#A87A22;    /* métal des étoiles */
  --rule:rgba(20,33,61,.18);
  --kufi:"Reem Kufi","Source Serif 4",Georgia,serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.62}
h1,h2,h3{font-family:var(--kufi);line-height:1.12;margin:0;text-wrap:balance;word-spacing:.1em}
p{margin:0}
a{color:inherit;text-decoration-thickness:.06em;text-underline-offset:.2em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:70rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.skip{position:absolute;left:-999rem}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem .75rem;z-index:2}

/* En-tête */
.top{background:var(--sky)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:1.25rem}
.mark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--kufi);font-weight:600;font-size:1.35rem;text-decoration:none}
.mark svg{width:1.15em;height:1.15em;flex:none}
.nav{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;font-family:var(--kufi);font-size:1rem}
.nav a{text-decoration:none;padding-block:.25rem}
.nav a:hover{text-decoration:underline}
.nav .lang{padding-inline-start:1.6rem;border-inline-start:1px solid var(--rule)}

/* Ouverture : la carte du ciel */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:2rem 3rem;padding-block:clamp(2rem,6vw,4.5rem) clamp(2.5rem,7vw,5.5rem)}
.hero h1{font-weight:600;font-size:clamp(2.1rem,1.15rem + 3.7vw,3.7rem);letter-spacing:-.012em}
.hero .lede{margin-top:1.4rem;max-width:33rem;font-size:1.12em}
.hero .gloss{margin-top:1.6rem;color:var(--muted);font-size:.95em}
.hero .gloss [lang=ar]{font-family:var(--kufi);font-size:1.5em;line-height:1;color:var(--ink);padding-inline:.12em}
.chart{display:block;width:100%;height:auto;max-width:35rem;justify-self:end}
.chart .grat{fill:none;stroke:var(--line);stroke-width:1}
.chart .ticks{fill:none;stroke:var(--line);stroke-width:7;stroke-dasharray:1 15}
.chart .dust{fill:var(--ink);opacity:.34}
.chart .link{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s .25s ease-out forwards}
.chart .star{fill:var(--brass);opacity:0;animation:rise .6s ease-out forwards}
.chart .s1 .star{animation-delay:.1s}.chart .s2 .star{animation-delay:.9s}.chart .s3 .star{animation-delay:1.3s}
.chart .ring{fill:none;stroke:var(--brass);stroke-width:1;opacity:.55}
.chart .hit{fill:transparent}
.chart text{font-family:var(--kufi);font-size:19px;font-weight:500;fill:var(--ink)}
.chart a{text-decoration:none}
.chart a:hover text,.chart a:focus-visible text{text-decoration:underline}
.chart a:focus-visible{outline:none}
.chart a:focus-visible .ring{stroke:var(--ink);stroke-width:2;opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0}to{opacity:1}}

/* Les trois lignes : un catalogue d'étoiles */
.lines{padding-block:clamp(3rem,7vw,5.5rem)}
.lines h2,.rules h2{font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem)}
.catalogue{list-style:none;margin:2rem 0 0;padding:0}
.line{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr) minmax(10rem,14rem);gap:.6rem 2.5rem;align-items:baseline;padding-block:1.7rem;border-top:1px solid var(--rule);scroll-margin-top:1.5rem}
.line:last-child{border-bottom:1px solid var(--rule)}
.line h3{font-weight:600;font-size:1.55rem}
.line .what{max-width:38rem}
.state{display:flex;align-items:baseline;gap:.5rem;font-family:var(--kufi);font-size:.98rem;color:var(--muted);word-spacing:.1em}
.state svg{width:.95em;height:.95em;flex:none;transform:translateY(.1em)}
.legend{margin-top:1.1rem;color:var(--muted);font-size:.9em;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.legend span{display:inline-flex;align-items:baseline;gap:.45rem}
.legend svg{width:.9em;height:.9em;transform:translateY(.08em)}

/* Ce à quoi la maison se tient */
.rules{background:var(--sky);padding-block:clamp(3rem,7vw,5rem)}
.rules ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem}
.rules li{border-top:1px solid var(--ink);padding-top:1.1rem}
.rules strong{display:block;font-family:var(--kufi);font-weight:600;font-size:1.18rem;line-height:1.25;margin-bottom:.5rem;word-spacing:.1em}

/* Pages de texte */
.prose{max-width:44rem;padding-block:clamp(2.5rem,6vw,4.5rem)}
.prose h1{font-weight:600;font-size:clamp(2rem,1.4rem + 2.4vw,2.9rem)}
.prose h2{font-weight:600;font-size:1.3rem;margin-top:2.2rem}
.prose p{margin-top:.9rem}
.prose .date{color:var(--muted);font-size:.92em;margin-top:2.4rem}

/* Pied */
.foot{border-top:1px solid var(--rule);padding-block:2rem 2.6rem;font-size:.92em;color:var(--muted)}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem}

@media (max-width:54rem){
  .hero{grid-template-columns:minmax(0,1fr)}
  .chart{justify-self:center;max-width:30rem}
  .chart text{font-size:24px}
  .line{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .rules ul{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .nav .lang{padding-inline-start:0;border:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chart .link{animation:none;stroke-dashoffset:0}
  .chart .star{animation:none;opacity:1}
}
@media print{.top,.rules{background:none}.chart .link{stroke-dashoffset:0}.chart .star{opacity:1}}