/* Œil de Nuit — univers « carte du ciel ».
   Mode sombre bleu nuit, quadrillage polaire de carte céleste, étoiles et constellation en tête de page, horizon en silhouette.
   Bouton « lumière rouge » : tout le site passe en rouge sur noir, comme la lampe des astronomes (préserve la vision de nuit).
   Titres Jost (géométrique), texte Spectral, étiquettes Space Mono (Bunny Fonts). Boutons jaune étoile. */
:root {
  --ciel: #0b1530;
  --nuit: #070e22;
  --carte: #121f45;
  --trait: #263764;
  --etoile: #e8ecf8;
  --pale: #aab4d4;
  --or: #f2c14e;
  --or-fonce: #8a6a1c;
  --rouge: #e5534b;
  --lune: #f4ecd0;
  --titre: 'Jost', 'Futura', 'Trebuchet MS', sans-serif;
  --mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --grille-polaire: repeating-radial-gradient(circle at 50% -30%, transparent 0 139px, rgba(232,236,248,.05) 139px 140px),
    repeating-conic-gradient(from 0deg at 50% -30%, transparent 0 7.6deg, rgba(232,236,248,.035) 7.6deg 8deg);
  --etoiles: radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 44% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 74% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 95% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 88%, #fff 50%, transparent 51%);
  --horizon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='40' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V26c40-6 70-14 110-12s60 10 100 8 70-16 120-14 70 12 110 10 50-12 90-10 40 6 70 6V40z' fill='%23070e22'/%3E%3C/svg%3E");
}
/* Lumière rouge : rouge sur noir partout */
html[data-nuit="rouge"] {
  --ciel: #000; --nuit: #000; --carte: #120000; --trait: #3a0b08; --etoile: #ff6b5e; --pale: #d9584d; --or: #ff6b5e; --or-fonce: #7a1a12;
  --rouge: #ff6b5e; --lune: #ff6b5e; --fond: #000; --texte: #ff6b5e; --doux: #1a0000; --accent: #ff6b5e; --accent-texte: #000;
}
html[data-nuit="rouge"] img, html[data-nuit="rouge"] .hero svg { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-45deg) brightness(.85); }

body { font-size: 19px; background-color: var(--ciel); color: var(--etoile); background-image: var(--grille-polaire); background-attachment: fixed; }
a { color: var(--or); text-underline-offset: 3px; }
h1, h2, h3, .logo, .produit-nom, .choix-nom, .quiz-titre, .quiz-verdict, .carte-nom, .proches h2, .groupe h2, .faq summary, .cartes a { font-family: var(--titre); }
h2 { font-size: 32px; font-weight: 600; letter-spacing: .005em; line-height: 1.15; color: var(--etoile); }
.meta, .ariane, .produit-cat, .produit-choix, .choix-label, .produit-specs dt, .quiz legend, .carte-label, .sommaire-lateral p,
.avertissement, .produit-source, .barre-choix span, .filtres button, thead th, .largeurs figcaption, .largeur strong, .lumiere-rouge { font-family: var(--mono); }
.ariane ol, .meta, .cartes p, .largeurs figcaption, .produit-cat, .produit-specs dt, .produit-source { color: var(--pale); }

/* En-tête : la nuit, logo en œil (iris doré, pupille ouverte) */
.entete { background: var(--nuit); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--etoile); font-weight: 600; font-size: 23px; letter-spacing: .02em; }
.logo::before { content: ""; display: inline-block; width: 24px; height: 14px; margin-right: 10px; vertical-align: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--nuit) 0 2.5px, var(--or) 3px 5px, var(--lune) 5.5px); box-shadow: 0 0 0 1.5px var(--lune); }
.entete nav a { color: var(--pale); font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--or); }

/* Tête de page : ciel étoilé sur carte polaire, horizon en silhouette */
.hero { color: var(--etoile); background-color: var(--nuit); background-image: var(--etoiles), var(--grille-polaire); }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 30px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.06; font-weight: 600; letter-spacing: .005em; max-width: 19ch; margin: 18px 0; }
.hero .ariane ol { margin: 0; }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.auteur { display: inline-flex; align-items: center; gap: 8px; }
.horizon { height: 34px; background: var(--horizon) bottom / 100% 100% no-repeat, var(--nuit); background-color: var(--ciel); }
.hero-intro p { font-size: 20px; max-width: 46ch; }
.lumiere-rouge { margin-left: auto; background: transparent; color: var(--rouge); border: 1.5px solid var(--rouge); border-radius: 999px;
  padding: 4px 12px 4px 26px; font-size: 13px; cursor: pointer; position: relative; }
.lumiere-rouge::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--rouge); }
.lumiere-rouge[aria-pressed="true"] { background: var(--rouge); color: #000; }
.lumiere-rouge[aria-pressed="true"]::before { background: #000; }

/* Accueil : planisphère qui tourne lentement, comme le ciel */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.planisphere { width: 100%; max-width: 300px; justify-self: center; }
.pl-bord { fill: var(--carte); stroke: var(--trait); stroke-width: 3; }
.pl-grille { fill: none; stroke: rgba(232,236,248,.18); stroke-width: 1; }
.pl-constellation { fill: none; stroke: var(--or); stroke-width: 1.2; stroke-opacity: .8; }
.pl-etoiles circle { fill: var(--etoile); }
.pl-ciel { transform-origin: 150px 150px; animation: rotation 240s linear infinite; }
.pl-lune-nuit { fill: var(--carte); stroke: var(--lune); stroke-width: 1.5; }
.pl-lune-jour { fill: var(--lune); }
.pl-centre { fill: var(--or); }
@keyframes rotation { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-ciel { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 320px; } }

/* Mise en page : lecture + colonne collante sur grand écran */
.mise-en-page { display: grid; gap: 48px; margin-top: 8px; }
.mise-en-page > article { min-width: 0; }
.colonne { display: none; }
@media (min-width: 1040px) {
  .mise-en-page { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; }
  .colonne { display: block; }
  .colonne-in { position: sticky; top: 24px; display: grid; gap: 24px; padding-top: 24px; }
  .mobile-seul { display: none; }
}
.carte-choix { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; color: var(--or); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.carte-nom { font-size: 25px; font-weight: 600; line-height: 1.1; }
.carte-pourqui { font-size: 16px; color: var(--pale); }
.carte-choix .bouton { display: block; text-align: center; }
.sommaire-lateral p { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--pale); margin: 0 0 8px; }
.sommaire-lateral ol { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.sommaire-lateral li { margin-bottom: 6px; }

/* Boutons jaune étoile */
.bouton { background: var(--or); color: var(--nuit); border: 2px solid var(--etoile); border-radius: 999px; padding: 10px 22px;
  box-shadow: 0 3px 0 var(--or-fonce); font-family: var(--titre); font-weight: 600; transition: transform .08s, box-shadow .08s; }
.bouton:hover { filter: none; transform: translateY(-1px); box-shadow: 0 4px 0 var(--or-fonce); }
.bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--or-fonce); }

.avertissement { font-size: 13px; background: transparent; border: 1px dashed var(--trait); border-radius: 10px; color: var(--pale); }
.sommaire { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }

/* Choix rapide : des repères sur la carte */
.choix { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px; }
.choix-label { color: var(--or); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.choix-nom { font-size: 20px; line-height: 1.15; }
.choix-nom a { color: var(--etoile); }
.choix-pourqui { font-size: 15px; color: var(--pale); }

/* Fiches produit : numéro dans un cercle de pointage */
.produit { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 30px 20px 18px; margin: 48px 0; }
.produit-rang { top: -24px; left: 18px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--nuit); color: var(--or); border: 2px solid var(--or); box-shadow: 0 0 0 5px var(--ciel), 0 0 0 6px var(--trait);
  font-family: var(--mono); font-weight: 700; font-size: 17px; }
.produit-choix { color: var(--or); font-size: 12px; letter-spacing: .1em; }
.produit-nom { font-size: 30px; font-weight: 600; line-height: 1.1; }
.produit-cat { background: transparent; color: var(--pale); border: 1px solid var(--trait); font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .06em; }
.produit-specs { gap: 0; background: transparent; margin: 14px 0; border-top: 1px solid var(--trait); }
.produit-specs div { padding: 8px 10px; border-bottom: 1px solid var(--trait); }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.plus li::marker { color: #6fd39a; }
.moins li::marker { color: var(--rouge); }

/* L'avis de Noé : une note marginale, signée d'un croissant */
blockquote { position: relative; background: transparent; border: 1px solid var(--trait); border-radius: 14px; padding: 16px 20px 14px 56px;
  margin: 32px 0; font-style: italic; font-size: 19px; }
blockquote::before { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(90deg, transparent 50%, var(--lune) 50%); box-shadow: 0 0 0 1.5px var(--lune); }
blockquote strong:first-child { font-family: var(--titre); font-style: normal; color: var(--or); }

/* Quiz */
.quiz { color: var(--etoile); border: 1px solid var(--trait); border-radius: 18px; padding: 22px; background-color: var(--nuit); background-image: var(--etoiles); }
.quiz-titre { font-size: 25px; font-weight: 600; }
.quiz-progres { background: var(--trait); height: 6px; }
.quiz-progres span { background: var(--or); }
.quiz legend { color: var(--or); font-size: 13px; margin-bottom: 10px; }
.quiz label { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--trait); border-radius: 999px; padding: 10px 16px; margin-bottom: 10px; font-size: 17px; }
.quiz label:hover { border-color: var(--or); }
.quiz input { accent-color: var(--or); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-resultat { border-top: 0; margin-top: 0; padding-top: 0; }
.quiz-verdict { font-size: 23px; }

/* Tableau et filtres */
.tableau { border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); }
thead th { background: var(--nuit); color: var(--or); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr { border-color: var(--trait); }
tbody tr:hover { background: var(--ciel); }
tbody th a { color: var(--etoile); font-family: var(--titre); font-weight: 600; }
.filtres button { background: transparent; border: 1.5px solid var(--trait); color: var(--etoile); font-size: 13px; }
.filtres button[aria-pressed="true"] { background: var(--or); color: var(--nuit); border-color: var(--or); }

.faq details { border-bottom: 1px solid var(--trait); }
.proches, .cartes li { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; }
.cartes a { color: var(--etoile); }
.barre-choix { background: var(--nuit); color: var(--etoile); border-top: 1px solid var(--trait); }
.pied { background: var(--nuit); color: var(--pale); border: 0; }
.pied .mention { color: var(--etoile); }

/* Outil signature : ce que vous verrez (diamètres à l'échelle, lumière, magnitude, cibles) */
.outil-ouverture { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 18px; margin: 32px 0; }
.ouv-cercles { margin: 0 0 14px; }
.ouv-cercles svg { display: block; width: 100%; height: auto; }
.ouv-miroir { fill: var(--nuit); stroke: var(--or); stroke-width: 2; }
.ouv-oeil { fill: var(--etoile); }
.ouv-cote { fill: var(--pale); font-family: var(--mono); font-size: 12px; }
.ouv-cercles figcaption, .ouv-note { font-size: 14px; color: var(--pale); }
.ouv-table { overflow-x: auto; margin: 12px 0; border: 1px solid var(--trait); border-radius: 12px; }
.ouv-table table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
.ouv-table th, .ouv-table td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.ouv-table thead th { background: var(--nuit); color: var(--or); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ouv-table tbody th { font-family: var(--titre); font-weight: 600; min-width: 170px; }
.ouv-table .bouton { margin-top: 6px; }
.ouv-cible { text-align: center; }
.ouv-oui { color: #6fd39a; font-weight: 700; }
.ouv-non { color: var(--pale); }

/* Simulateur « votre télescope » et calculateur de grossissement */
.ouv-simu, .og-form { display: grid; gap: 12px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--trait); }
.ouv-champ { display: grid; gap: 4px; font-family: var(--mono); font-size: 13px; color: var(--pale); }
.ouv-champ input, .ouv-champ select { width: 100%; box-sizing: border-box; font: inherit; font-size: 18px; padding: 8px 10px; color: var(--etoile);
  background: var(--nuit); border: 1.5px solid var(--or); border-radius: 10px; }
.ouv-simu-chiffres { font-size: 16px; color: var(--etoile); }
.ouv-simu-cibles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ouv-simu-cibles li { border: 1.5px solid var(--trait); border-radius: 999px; padding: 4px 12px 4px 30px; position: relative; font-size: 15px; }
.ouv-simu-cibles li::before { position: absolute; left: 11px; font-weight: 700; }
.ouv-simu-cibles li.ouv-oui { border-color: #6fd39a; color: var(--etoile); }
.ouv-simu-cibles li.ouv-oui::before { content: "✓"; color: #6fd39a; }
.ouv-simu-cibles li.ouv-non { color: var(--pale); }
.ouv-simu-cibles li.ouv-non::before { content: "–"; }
.og-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.og-res { display: grid; gap: 10px; }
.og-g { font-family: var(--titre); font-size: 30px; font-weight: 600; color: var(--or); margin: 0; }
.og-res ul { margin: 0; padding-left: 20px; }
.og-alerte { color: var(--rouge); }