/* ===================================================================
   AstroCollect — feuille de styles du site
   Direction « journal d'observation » (refonte 2026-07)

   Le site ressemble à ce que l'app remplace : un registre d'observation.
   Gris-vert froid de carrosserie d'instrument, accent rouge de lampe
   d'observation (celle qui préserve la vision nocturne), grille
   asymétrique à rail de marge, filets d'un pixel.

   Polices (toutes sous licence SIL OFL, sous-jeu latin, cf.
   assets/fonts/NOTICE.txt) :
     Archivo     — display, axes wght + wdth
     Literata    — texte courant, conçue pour la lecture à l'écran
     IBM Plex Mono — données, désignations, libellés
   =================================================================== */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/literata-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'PlexMono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* -------------------------------------------------------------------
   Jetons
   ------------------------------------------------------------------- */

:root{
  /* Clair — carrosserie d'instrument, gris-vert froid */
  --ground:#DCE0DB;
  --surface:#E8EBE5;
  --sunk:#D0D5CF;
  --ink:#141815;
  --ink-soft:#4F5953;
  --ink-faint:#77817B;
  --rule:#B4BDB6;
  --rule-soft:#C6CDC7;
  --accent:#A32A20;
  --accent-quiet:rgba(163,42,32,.10);
  --cool:#2C4B49;
  --on-accent:#F2F4EF;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Literata',Georgia,'Times New Roman',serif;
  --mono:'PlexMono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Trame */
  --rail:9.25rem;      /* colonne d'annotations */
  --gut:2.25rem;
  --page:75rem;        /* largeur maximale de la feuille */
  --read:46rem;        /* mesure de lecture des pages de contenu */
  --edge:1.5rem;       /* marge latérale */

  --radius:4px;
  --radius-sm:3px;
}

@media (prefers-color-scheme:dark){
  :root{
    /* Sombre — noir à biais vert, vision nocturne préservée */
    --ground:#0E1110;
    --surface:#171B18;
    --sunk:#0A0C0B;
    --ink:#E3E7E2;
    --ink-soft:#93A19A;
    --ink-faint:#6B7772;
    --rule:#272E29;
    --rule-soft:#1E2420;
    --accent:#E4594C;
    --accent-quiet:rgba(228,89,76,.12);
    --cool:#7BAAA4;
    --on-accent:#0E1110;
  }
}

/* -------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.68;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  min-height:100dvh;
}

.container,
.sheet{
  max-width:var(--page);
  margin:0 auto;
  padding:0 var(--edge);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:660;
  letter-spacing:-.025em;
  line-height:1.04;
  text-wrap:balance;
}

h1{font-size:clamp(2.3rem,4.4vw,3.5rem);font-stretch:113%;font-weight:680;letter-spacing:-.034em;margin-bottom:1.35rem}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-stretch:110%;margin-bottom:.9rem}
h3{font-size:1.25rem;font-stretch:106%;letter-spacing:-.015em;line-height:1.2;margin-bottom:.6rem}
h4{font-size:1.0625rem;font-stretch:104%;letter-spacing:-.012em;margin-bottom:.45rem}

p{margin-bottom:1.05em;max-width:66ch}
p:last-child{margin-bottom:0}

ul,ol{padding-left:1.35rem}
li{margin-bottom:.3rem}

a{
  color:var(--accent);
  text-decoration:none;
  transition:color .18s ease;
}
a:hover{text-decoration:underline;text-underline-offset:.18em}

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--cool);
  outline-offset:3px;
  border-radius:2px;
}

code{
  font-family:var(--mono);
  background:var(--sunk);
  padding:.15em .35em;
  border-radius:2px;
  font-size:.875em;
}

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:2.75rem 0 0;
}

img{max-width:100%;height:auto}

/* Libellés et chapeaux réutilisables */
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1rem;
}
.lede{
  font-size:1.0625rem;color:var(--ink-soft);max-width:58ch;
}
.terms{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  line-height:1.65;color:var(--ink-faint);letter-spacing:.01em;
  margin-bottom:0;
}

/* -------------------------------------------------------------------
   Bandeau supérieur
   ------------------------------------------------------------------- */

header{
  border-bottom:1px solid var(--rule);
  background:var(--ground);
}

nav{
  max-width:var(--page);
  margin:0 auto;
  padding:.85rem var(--edge);
  display:flex;
  align-items:center;
  gap:1.5rem;
}

nav .logo{
  font-family:var(--display);
  font-weight:700;
  font-stretch:118%;
  font-size:1.0625rem;
  letter-spacing:-.03em;
  color:var(--ink);
}
nav .logo:hover{color:var(--accent);text-decoration:none}

nav ul{
  list-style:none;
  padding:0;
  display:flex;
  gap:1.35rem;
  align-items:center;
  margin-left:auto;
}
nav li{margin-bottom:0}

nav ul a{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-soft);
  padding-bottom:.15rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
nav ul a:hover,
nav ul a.active{
  color:var(--ink);
  border-bottom-color:var(--accent);
  text-decoration:none;
}

/* Sélecteur de langue — sorti du <ul> pour rester accessible quand la
   barre de liens défile horizontalement sur petit écran. */
.lang-switcher{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:.3rem .5rem;
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .18s ease;
}
.lang-switcher:hover{border-color:var(--accent)}
.lang-switcher option{background:var(--ground);color:var(--ink)}

/* -------------------------------------------------------------------
   Trame de la page d'accueil : rail d'annotations + contenu
   ------------------------------------------------------------------- */

.row{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--gut);
  border-top:1px solid var(--rule);
  position:relative;
}
.row::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(var(--rail) + var(--gut) / 2);
  width:1px;background:var(--rule-soft);
}
.row > *{min-width:0}

/* Le rail porte des valeurs réelles, pas une numérotation décorative. */
.mark{padding:2.75rem 0 3.5rem}
.mark dl{display:grid;gap:1.15rem}
.mark dt{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.15rem;
}
.mark dd{
  font-family:var(--display);font-stretch:108%;font-weight:640;
  font-size:1.375rem;line-height:1.05;letter-spacing:-.02em;color:var(--ink);
}
.mark dd small{
  display:block;font-family:var(--mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.02em;color:var(--ink-soft);margin-top:.3rem;
  font-stretch:normal;
}

.body{padding:2.75rem 0 3.5rem}

/* -------------------------------------------------------------------
   Ouverture
   ------------------------------------------------------------------- */

.open{border-top:0}
.open .body{padding-top:4.5rem;padding-bottom:3.5rem}
.open .mark{padding-top:4.75rem}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
  gap:var(--gut);
  align-items:end;
}

h1 em{
  font-style:normal;
  color:var(--accent);
  box-shadow:inset 0 -.09em 0 var(--accent-quiet);
}

.hero-cta{
  display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap;
  margin-top:1.9rem;
}

/* Badge App Store officiel, non modifié. La zone de respiration
   exigée par Apple (10 % de la hauteur) est portée par le padding. */
.badge{
  display:inline-block;
  padding:.28rem;
  border-radius:5px;
  transition:translate .16s ease,box-shadow .16s ease;
}
.badge img{display:block;height:2.75rem;width:auto}
.badge:hover{translate:0 -1px;box-shadow:0 4px 14px -6px rgba(20,32,26,.5);text-decoration:none}
.badge:active{translate:0 1px;box-shadow:none}

/* -------------------------------------------------------------------
   Fiche d'objet — l'unité de base du produit
   ------------------------------------------------------------------- */

.record{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 12px 34px -18px rgba(20,32,26,.42);
}
.record-shot{
  display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;
  background:var(--sunk);border-bottom:1px solid var(--rule);
}
.record-head{
  display:flex;gap:.9rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--rule);align-items:baseline;
}
.record-head h3{font-size:1.0625rem;margin-bottom:.2rem}
.record-head .type{
  margin-left:auto;font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cool);
  white-space:nowrap;
}
.desig{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.06em;color:var(--ink-soft);margin-bottom:0;
}
.desig b{color:var(--accent);font-weight:500}

.record-data{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--rule);
}
.record-data div{padding:.6rem .75rem;border-right:1px solid var(--rule-soft)}
.record-data div:nth-child(3n){border-right:0}
.record-data div:nth-child(n+4){border-top:1px solid var(--rule-soft)}
.record-data dt{
  font-family:var(--mono);font-size:.5625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
}
.record-data dd{
  margin-top:.18rem;font-family:var(--mono);font-size:.8125rem;
  font-weight:500;color:var(--ink);
}

.record-log{padding:.75rem 1rem .9rem}
.record-log > p{
  font-family:var(--mono);font-size:.5625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.5rem;
}
.record-log ol{padding:0;list-style:none;display:grid;gap:.4rem}
.record-log li{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:0;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);
}
.record-log li span:first-child{
  width:.4rem;height:.4rem;border-radius:50%;background:var(--cool);
  flex:none;translate:0 -.15em;
}
.record-log li b{color:var(--ink);font-weight:500;margin-left:auto}

/* -------------------------------------------------------------------
   Entrées de journal
   ------------------------------------------------------------------- */

.entry .lede{margin-bottom:1.4rem}

.spec{
  margin-top:1.5rem;padding:0;list-style:none;
  display:grid;gap:.05rem;max-width:46rem;
}
.spec li{
  display:grid;grid-template-columns:11.5rem minmax(0,1fr);
  gap:1.25rem;padding:.6rem 0;margin-bottom:0;
  border-top:1px solid var(--rule-soft);font-size:.9375rem;
}
.spec li:first-child{border-top:0;padding-top:0}
.spec b{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.03em;color:var(--cool);text-transform:uppercase;
  line-height:1.9;
}
.spec span{color:var(--ink-soft)}

/* -------------------------------------------------------------------
   Table des catalogues
   ------------------------------------------------------------------- */

.tablewrap{overflow-x:auto;margin-top:1.9rem;border-top:1px solid var(--rule)}

.tablewrap table{border-collapse:collapse;width:100%;min-width:40rem;font-size:.9375rem}
.tablewrap caption{
  caption-side:bottom;text-align:left;padding-top:.85rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);letter-spacing:.02em;
}
.tablewrap th,
.tablewrap td{padding:.72rem .9rem;text-align:left;vertical-align:top}
.tablewrap th{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
.tablewrap td{border-bottom:1px solid var(--rule-soft);color:var(--ink-soft)}
.tablewrap tbody tr:hover td{background:var(--surface)}
.tablewrap th:first-child,
.tablewrap td:first-child{padding-left:0;width:15rem}
.tablewrap th:last-child,
.tablewrap td:last-child{width:5rem}
.tablewrap th.num,
.tablewrap td.num{text-align:right;font-family:var(--mono);font-weight:500}
.tablewrap td.num{color:var(--ink)}
.tablewrap td .cat{
  font-family:var(--display);font-stretch:106%;font-weight:640;
  font-size:1rem;color:var(--ink);letter-spacing:-.015em;display:block;
}
.tablewrap td .cat + em{
  font-style:normal;font-family:var(--mono);font-size:.6875rem;
  color:var(--accent);letter-spacing:.05em;
}
.tablewrap tfoot td{
  border-bottom:0;border-top:1px solid var(--rule);color:var(--ink);
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
}

/* -------------------------------------------------------------------
   Plateformes — fiche technique, pas quatre cartes
   ------------------------------------------------------------------- */

.plat{margin-top:1.75rem;padding:0;list-style:none;display:grid;gap:.05rem}
.plat li{
  display:grid;grid-template-columns:12rem minmax(0,1fr) auto;
  gap:1.5rem;align-items:baseline;margin-bottom:0;
  padding:.95rem 0;border-top:1px solid var(--rule-soft);
}
.plat li:first-child{border-top:1px solid var(--rule)}
.plat h3{font-size:1.0625rem;margin-bottom:0}
.plat h3 + span{
  display:block;font-family:var(--mono);font-size:.6875rem;
  font-weight:500;color:var(--ink-faint);margin-top:.25rem;letter-spacing:.02em;
}
.plat p{font-size:.9375rem;color:var(--ink-soft);margin-bottom:0;max-width:none}
.plat li[data-study] h3,
.plat li[data-study] p{color:var(--ink-soft)}

.tag{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:.24rem .5rem;border-radius:2px;
}
.tag--live{background:var(--accent-quiet);color:var(--accent)}
.tag--study{background:var(--sunk);color:var(--ink-faint);border:1px solid var(--rule-soft)}

/* -------------------------------------------------------------------
   Bande de captures
   ------------------------------------------------------------------- */

.strip{
  display:flex;gap:1rem;overflow-x:auto;margin-top:1.9rem;
  padding-bottom:1rem;scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.strip figure{flex:none;scroll-snap-align:start}
.strip img{
  display:block;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--sunk);box-shadow:0 10px 26px -16px rgba(20,32,26,.4);
}
.strip .p img{width:13rem}
.strip .l img{width:24rem}
.strip figcaption{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);margin-top:.6rem;letter-spacing:.02em;
}
.strip figcaption b{color:var(--ink-soft);font-weight:500}

/* -------------------------------------------------------------------
   Confidentialité — affirmations vérifiables
   ------------------------------------------------------------------- */

.claims{margin-top:1.6rem;padding:0;list-style:none;display:grid;gap:.05rem;max-width:46rem}
.claims li{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.85rem;
  padding:.65rem 0;margin-bottom:0;border-top:1px solid var(--rule-soft);
  font-size:.9375rem;color:var(--ink-soft);
}
.claims li:first-child{border-top:0;padding-top:0}
.claims svg{width:.95rem;height:.95rem;color:var(--cool);translate:0 .45em}
.claims b{color:var(--ink);font-weight:600}

/* -------------------------------------------------------------------
   Clôture
   ------------------------------------------------------------------- */

.close{background:var(--surface);border-top:1px solid var(--rule)}
.close .row{border-top:0}
.close .body{padding-top:3.5rem;padding-bottom:3.75rem}
.close h2{margin-bottom:.85rem;max-width:26ch}

/* -------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------- */

footer{
  border-top:1px solid var(--rule);
  background:var(--ground);
  margin-top:0;
}

/* Accueil — pied en colonnes */
.footer-content{
  max-width:var(--page);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2rem;padding:2.25rem 0 1.5rem;
}
.footer-section h3{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.75rem;
}
.footer-section p{
  font-size:.875rem;color:var(--ink-soft);margin-bottom:.5rem;max-width:34ch;
}
.footer-section ul{list-style:none;padding:0}
.footer-section li{margin-bottom:.35rem}
.footer-section a{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  color:var(--ink-soft);letter-spacing:.02em;
}
.footer-section a:hover{color:var(--accent)}
.copyright{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);margin-top:.85rem;letter-spacing:.02em;
}
.footer-bottom{
  max-width:var(--page);margin:0 auto;
  padding:1rem 0 2rem;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);letter-spacing:.02em;
}
.footer-bottom p{margin-bottom:0;max-width:none}

/* Sous-pages — pied en ligne simple */
footer > p{
  max-width:var(--page);
  margin:0 auto;
  padding:0 var(--edge);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);letter-spacing:.02em;line-height:2.1;
}
footer > p:first-child{padding-top:2rem}
footer > p:last-child{padding-bottom:2.25rem}
footer > p a{color:var(--ink-soft)}
footer > p a:hover{color:var(--accent)}

/* -------------------------------------------------------------------
   Pages de contenu (confidentialité, support, changelog, roadmap)
   ------------------------------------------------------------------- */

.privacy-policy,
.support-page,
.changelog-page{
  max-width:var(--read);
  margin:3.25rem auto 4rem;
}

/* Le titre d'une page de contenu n'a pas à peser autant que le titre
   d'ouverture de l'accueil. */
.privacy-policy h1,
.support-page h1,
.changelog-page h1{
  font-size:clamp(2rem,3.4vw,2.85rem);
  margin-bottom:1.25rem;
}

/* Ces pages posent déjà des <hr> entre leurs sections : pas de filet
   supplémentaire sur les h2, sinon ils se doublent. */
.privacy-policy h2,
.support-page h2,
.changelog-page h2{
  margin-top:2.75rem;
  font-size:clamp(1.5rem,2.4vw,1.9rem);
}
hr + h2{margin-top:0}

.privacy-policy h3,
.support-page h3,
.changelog-page h3{margin-top:2rem;color:var(--ink)}

.privacy-policy p,
.support-page p,
.changelog-page p,
.privacy-policy li,
.support-page li,
.changelog-page li{color:var(--ink-soft)}

.privacy-policy .meta,
.support-page .meta,
.changelog-page .meta{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:2rem;
}

.privacy-policy .checklist{list-style:none;padding-left:0}
.privacy-policy .checklist li{padding:.35rem 0;border-top:1px solid var(--rule-soft)}
.privacy-policy .checklist li:first-child{border-top:0}
.privacy-policy .checklist.negative li{color:var(--ink-faint)}

.privacy-policy .warning,
.faq-item .note{
  background:var(--surface);
  border-left:2px solid var(--accent);
  padding:.9rem 1.1rem;
  margin:1.5rem 0;
  font-size:.9375rem;
}
.faq-item .note{border-left-color:var(--cool)}

.privacy-policy blockquote{
  border-left:2px solid var(--cool);
  padding-left:1.25rem;
  margin:1.5rem 0;
  font-style:italic;
  color:var(--ink-soft);
}

.footer-note{
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  color:var(--ink-faint);
}

/* Support — cartes de contact */
.contact-methods{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  margin:1.75rem 0 2.5rem;
}
.contact-card{background:var(--ground);padding:1.4rem}
.contact-icon{font-size:1.5rem;margin-bottom:.6rem;line-height:1}
.contact-card h3{margin-top:0;font-size:1.0625rem}
.contact-card p{font-size:.9375rem;margin-bottom:.4rem}
.contact-card .note{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--ink-faint);margin-top:.6rem;margin-bottom:0;
}

/* Support — FAQ */
.faq-item{
  margin-bottom:2.25rem;
  padding-bottom:2.25rem;
  border-bottom:1px solid var(--rule-soft);
}
.faq-item:last-child{border-bottom:0}
.faq-item h3{margin-top:0;color:var(--ink)}

/* Support — guide d'astronomie */
.object-types-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  margin:1.75rem 0;
}
.object-type-card{background:var(--ground);padding:1rem 1.1rem}
.object-type-card .type-icon{font-size:1.125rem;margin-right:.45rem}
.object-type-card strong{
  font-family:var(--display);font-stretch:106%;font-weight:640;
  color:var(--ink);letter-spacing:-.012em;
}
.object-type-card p{
  font-size:.875rem;color:var(--ink-soft);
  margin-top:.4rem;margin-bottom:0;
}

/* Support — table des magnitudes */
.magnitude-table{
  width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.9375rem;
}
.magnitude-table th,
.magnitude-table td{
  padding:.6rem .75rem;text-align:left;
  border-bottom:1px solid var(--rule-soft);
}
.magnitude-table th{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);
}
.magnitude-table td{color:var(--ink-soft)}
.magnitude-table th:first-child,
.magnitude-table td:first-child{padding-left:0;font-family:var(--mono);font-weight:500;color:var(--ink)}
.magnitude-table tbody tr:hover td{background:var(--surface)}

/* Changelog & roadmap */
.version-section{margin-bottom:1rem}
.version-section h2{
  display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;
}
.version-date{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);
}
.feature-category{margin:1.75rem 0}
.feature-category h3{
  font-size:1.125rem;margin-top:1.5rem;margin-bottom:.5rem;
}
.feature-category h4{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cool);
  margin-top:1.35rem;margin-bottom:.4rem;
}
.feature-intro{color:var(--ink);margin-bottom:.5rem}
.feature-category ul,
.feature-category ol{color:var(--ink-soft)}

.stats-box{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  margin-top:1.75rem;
}
.stats-box h4{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.7rem;
}
.stats-box ul{
  list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.35rem 1.25rem;
}
.stats-box li{
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  color:var(--ink-soft);margin-bottom:0;
}

.warning-box{
  background:var(--accent-quiet);
  border-left:2px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.1rem 1.25rem;
  margin:1.75rem 0;
}
.warning-box h3{color:var(--accent);margin-top:0;font-size:1.0625rem}
.warning-box p{color:var(--ink)}

/* Repères de difficulté d'observation */
.mag-easy{color:#3F7D5C}
.mag-medium{color:#8A7A2E}
.mag-hard{color:#A8603A}
.mag-very-hard{color:var(--accent)}
@media (prefers-color-scheme:dark){
  .mag-easy{color:#79BC96}
  .mag-medium{color:#C9B85E}
  .mag-hard{color:#DE9166}
}

/* -------------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------------- */

.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:1.5rem}
.mb-3{margin-bottom:2rem}

/* -------------------------------------------------------------------
   Adaptation
   ------------------------------------------------------------------- */

@media (max-width:62rem){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .record{margin-top:.5rem}
  .plat li{grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1.25rem}
  .plat li p{grid-column:1 / -1}
}

/* Barre de navigation : pas de menu hamburger, cinq liens tiennent
   dans une bande qui défile, le sélecteur de langue reste épinglé. */
@media (max-width:52rem){
  nav{flex-wrap:wrap;gap:.75rem 1rem;padding:.8rem var(--edge)}
  nav .logo{order:1}
  nav .lang{order:2;margin-left:auto}
  nav ul{
    order:3;flex-basis:100%;margin-left:0;
    flex-wrap:nowrap;overflow-x:auto;gap:1.15rem;
    scrollbar-width:none;
    margin-inline:calc(var(--edge) * -1);
    padding-inline:var(--edge);
  }
  nav ul::-webkit-scrollbar{display:none}
}

/* La table des catalogues ne défile jamais latéralement : sous 48rem
   chaque ligne devient un bloc, les en-têtes repassent en libellés via
   data-label. Le <table> reste sémantique. */
@media (max-width:48rem){
  .tablewrap{overflow-x:visible;border-top:0}
  /* flex plutôt que block : caption-side:bottom ne survit pas à
     display:block, l'ordre explicite le remplace. */
  .tablewrap table{min-width:0;display:flex;flex-direction:column}
  .tablewrap thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .tablewrap tbody{display:block;order:1}
  .tablewrap tfoot{display:block;order:2}
  .tablewrap caption{order:3;display:block;width:100%;padding-top:1rem}
  .tablewrap tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:1rem;align-items:baseline;
    padding:1rem 0;border-top:1px solid var(--rule);
  }
  .tablewrap tbody tr:hover td{background:none}
  .tablewrap th,
  .tablewrap td{padding:0;border-bottom:0}
  .tablewrap th:first-child,
  .tablewrap td:first-child,
  .tablewrap th:last-child,
  .tablewrap td:last-child{width:auto}
  .tablewrap tbody td:first-child{grid-column:1}
  .tablewrap tbody td.num{
    grid-column:2;grid-row:1;font-size:1.5rem;font-family:var(--display);
    font-stretch:108%;font-weight:640;letter-spacing:-.02em;line-height:1;
  }
  .tablewrap tbody td.num::after{
    content:" " attr(data-label);
    font-family:var(--mono);font-size:.5625rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);font-stretch:normal;
  }
  .tablewrap tbody td:not(:first-child):not(.num){
    grid-column:1 / -1;margin-top:.7rem;font-size:.9375rem;
  }
  .tablewrap tbody td:not(:first-child):not(.num)::before{
    content:attr(data-label);display:block;
    font-family:var(--mono);font-size:.5625rem;font-weight:500;
    letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
    margin-bottom:.15rem;
  }
  .tablewrap tfoot tr{
    display:flex;justify-content:space-between;gap:1rem;
    padding:.9rem 0 0;border-top:1px solid var(--rule);
  }
  .tablewrap tfoot td{border-top:0}

  /* La trame à rail se replie : les annotations passent en bandeau. */
  :root{--rail:0px;--gut:0px}
  .row{grid-template-columns:1fr}
  .row::before{display:none}
  .mark{padding:2.25rem 0 0}
  .mark dl{
    grid-auto-flow:column;grid-auto-columns:max-content;
    gap:1.75rem;overflow-x:auto;padding-bottom:.35rem;
  }
  .mark dd{font-size:1.125rem}
  .body{padding-top:1.5rem;padding-bottom:2.75rem}
  .open .body{padding-top:2rem}
  .open .mark{padding-top:2.5rem}
  .spec li{grid-template-columns:1fr;gap:.15rem}
  .spec b{line-height:1.5}

  .magnitude-table{font-size:.875rem}
  .privacy-policy,
  .support-page,
  .changelog-page{margin-top:2.25rem}
  .privacy-policy h2,
  .support-page h2,
  .changelog-page h2{margin-top:2rem}
  hr{margin-top:2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}