:root {
  --fond: #0e1117;
  --carte: #171b24;
  --bord: #2a3040;
  --texte: #e4e7ee;
  --discret: #8b93a7;
  --accent: #4c8dff;
  --rouge: #e5534b;
  --ambre: #d9a441;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; flex: 1; }
h1 small { color: var(--discret); font-weight: normal; font-size: 1rem; }
h2 { font-size: 1.1rem; margin: 0; flex: 1; }

.barre {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;
}
.barre nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.marque { font: 400 1.15rem "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: var(--texte); white-space: nowrap; }

main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }

.entete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.filtres { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtres input[type=search] { flex: 1; min-width: 200px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.bouton, button.bouton {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #1f2532;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.bouton:hover { border-color: var(--accent); text-decoration: none; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.rouge { border-color: var(--rouge); color: var(--rouge); }
.lien { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.lien.rouge { color: var(--rouge); }
.danger { margin-top: 24px; }

input, select, textarea {
  width: 100%;
  padding: 7px 9px;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font: inherit;
}
input[type=checkbox], input[type=radio] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.filtres select { width: auto; }

.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.champs label { display: flex; flex-direction: column; gap: 4px; }
.champs label span { color: var(--discret); font-size: 0.85rem; }
.champs .large { grid-column: 1 / -1; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--rouge); font-size: 0.85rem; }
.actions { display: flex; gap: 8px; margin-top: 16px; }

.liste { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; }
.liste th, .liste td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.liste th { color: var(--discret); font-weight: 500; font-size: 0.85rem; }
.liste tfoot td { font-weight: 600; border-bottom: 0; }
.liste .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste.compact { border: 0; }
.liste.compact th, .liste.compact td { padding: 6px 8px; }
.actions-ligne { display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap; }
.depot-actif [data-depot] { outline: 2px dashed var(--accent); outline-offset: -4px; background: #1b2436; }
.lot { margin-top: 12px; }
.lot summary { cursor: pointer; color: var(--accent); }
.lot form { margin-top: 10px; }
.lot .champs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fiches { display: flex; align-items: center; gap: 6px; }
.fiches .bouton { padding: 5px 11px; }
.bouton.inactif { opacity: 0.35; cursor: default; }
.bouton.inactif:hover { border-color: var(--bord); }
h3 { font-size: 0.95rem; margin: 14px 0 6px; color: var(--discret); font-weight: 500; }
.elements { list-style: none; margin: 0; padding: 0; }
.elements li { padding: 5px 0; border-top: 1px solid var(--bord); }
.elements span { display: block; color: var(--discret); font-size: 0.85rem; }
.partage textarea { font-size: 0.95rem; line-height: 1.5; }
.selection label { display: block; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; }
.selection label:has(input:checked) { outline: 3px solid var(--accent); }
.selection input { width: auto; }
.carte-ciel { display: block; width: 100%; height: auto; margin-top: 8px; font-family: inherit; }
.carte-ciel .fond { fill: #0a0d14; stroke: var(--bord); }
.carte-ciel .grille { fill: none; stroke: #232a3a; stroke-width: 0.6; }
.carte-ciel .figure { fill: none; stroke: #4d6491; stroke-width: 0.8; }
.carte-ciel .figure.forte { stroke: var(--ambre); stroke-width: 1.6; }
.carte-ciel .etoiles { fill: #e9edf7; }
.carte-ciel .nom { fill: #6f7c99; font-size: 7px; text-anchor: middle; }
.carte-ciel .nom.fort { fill: var(--ambre); font-size: 9px; font-weight: 600; }
.carte-ciel .titre { fill: var(--discret); font-size: 10px; text-anchor: middle; }
.carte-ciel .pole { fill: #8f9bb8; font-size: 8px; text-anchor: middle; font-style: italic; }
.carte-ciel .heure { fill: var(--discret); font-size: 9px; text-anchor: middle; }
.carte-ciel .repere circle, .carte-ciel .repere path { fill: none; stroke: #ff5a4d; stroke-width: 2; }
.carte-ciel .repere text { fill: #ff8177; font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #0a0d14; stroke-width: 3px; }
label:target textarea { outline: 2px solid var(--accent); }
.note { color: var(--ambre); letter-spacing: 2px; }
.a-completer td { color: var(--ambre); }
.vide { color: var(--discret); text-align: center; padding: 20px; }

.vignette { width: 84px; }
.vignette img, .vignette .sans-image { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--fond); }

.deux-colonnes { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.deux-colonnes > div { min-width: 0; }
.deux-colonnes section { overflow-x: auto; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }

.principale { width: 100%; border-radius: 6px; display: block; margin-bottom: 12px; }
.fiche { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.fiche dt { color: var(--discret); }
.fiche dd { margin: 0; }
.remarques { border-top: 1px solid var(--bord); padding-top: 12px; margin-bottom: 0; }
.aide { color: var(--discret); font-size: 0.85rem; margin: 0 0 10px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.galerie figure { margin: 0; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
.galerie figure.est-principale { border-color: var(--accent); }
.galerie img, .galerie .sans-image { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--fond); padding: 0; }
.galerie .sans-image { padding: 10px; font-size: 0.8rem; color: var(--discret); overflow-wrap: anywhere; }
.galerie figcaption { display: flex; justify-content: space-between; padding: 6px 8px; font-size: 0.85rem; color: var(--discret); }

.documents { list-style: none; margin: 0; padding: 0; }
.apercu-document { flex: 1; display: flex; align-items: center; gap: 12px; }
.apercu-document img { width: 64px; height: 84px; object-fit: cover; object-position: top; border: 1px solid var(--bord); border-radius: 4px; background: #fff; }
.photo-fiche { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.photo-fiche img, .photo-fiche .sans-image { display: flex; align-items: center; justify-content: center; width: 220px; height: 165px; object-fit: contain; background: #fff; border-radius: 6px; color: #667; }
.photos-web button { padding: 0; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; font: inherit; }
.photos-web button:hover { border-color: var(--accent); outline: 2px solid var(--accent); }
.photos-web img { height: 150px; object-fit: contain; background: #fff; }
.photos-web span { display: block; padding: 4px 6px; font-size: 0.75rem; color: #445; background: #eef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vignette img { background: #fff; object-fit: contain; }
.documents li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bord); }

.message { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte); }
.message.success { border-color: #3fa66b; }
.message.warning { border-color: var(--ambre); }
.message.error { border-color: var(--rouge); }

.connexion h1 { font: 400 1.7rem/1.15 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; text-wrap: balance; }
.connexion { max-width: 360px; margin: 10vh auto; display: flex; flex-direction: column; gap: 14px; }
.connexion label { display: flex; flex-direction: column; gap: 4px; color: var(--discret); }

/* --- Accueil --- */
body.accueil main { max-width: none; padding: 0; }
body.accueil .barre { position: absolute; inset: 0 0 auto 0; z-index: 2; background: linear-gradient(#000a, #0000); border: 0; }
body.accueil .barre a, body.accueil .barre .lien { color: #fff; text-shadow: 0 1px 6px #000; }
body.accueil .message { margin: calc(var(--haut-barre, 58px) + 12px) 16px 0; position: relative; z-index: 1; }
body.accueil .message + .message { margin-top: 8px; }
.affiche {
  display: flex; align-items: flex-end; min-height: min(86vh, 900px); padding: 0 6vw 7vh;
  background: #05070b center / cover no-repeat; color: #fff; position: relative; isolation: isolate;
}
.affiche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, #0e1117 0%, #0e1117cc 16%, #0e111700 55%); }
.affiche:hover { text-decoration: none; }
.affiche-texte { max-width: 900px; }
.surtitre { margin: 0 0 10px; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ffd9a0; }
.affiche h1 {
  font: 400 clamp(2.4rem, 6.5vw, 5.2rem)/1.03 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing: -0.01em; margin: 0; text-wrap: balance; text-shadow: 0 2px 30px #000a;
}
.affiche .noms { margin: 14px 0 0; color: #d5dbe8; font-size: 1.05rem; max-width: 60ch; }
.reperes { display: flex; flex-wrap: wrap; gap: 14px 38px; list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid #ffffff38; }
.reperes li { display: flex; flex-direction: column; }
.reperes strong { font: 400 1.7rem/1.1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-variant-numeric: tabular-nums; }
.reperes span { color: #aab3c6; font-size: 0.8rem; margin-top: 4px; }
.vide-accueil { background-image: radial-gradient(ellipse at 70% 20%, #1c2740, #05070b 70%); }
.accueil-corps { max-width: 1200px; margin: 0 auto; padding: 8px 6vw 80px; }
.accueil-corps h2 { font: 400 1.5rem "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; margin: 54px 0 16px; }
.nuit { color: var(--discret); margin: 0 0 34px; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--bord); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.chiffres div { background: var(--carte); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.chiffres strong { font: 400 2.2rem/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-variant-numeric: tabular-nums; }
.chiffres span { color: var(--discret); font-size: 0.85rem; }
.mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mosaique a { color: var(--texte); border-radius: 10px; overflow: hidden; background: var(--carte); border: 1px solid var(--bord); transition: transform 0.2s, border-color 0.2s; }
.mosaique a:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--accent); }
.mosaique img, .mosaique .sans-image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fond); }
.mosaique span { display: block; padding: 10px 14px 13px; color: var(--discret); font-size: 0.85rem; }
.mosaique strong { display: block; color: var(--texte); font-size: 1rem; font-weight: 500; }
.collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.collections > * { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--texte); }
.collections a:hover { text-decoration: none; border-color: var(--accent); }
.collections div { opacity: 0.5; }
.collections span { color: var(--discret); font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .mosaique a { transition: none; } }
@media (max-width: 700px) {
  .barre { gap: 8px 16px; }
  .barre nav { order: 3; flex-basis: 100%; gap: 6px 16px; }
  .barre .marque { flex: 1; }
}

/* Images du ciel : fond noir, comme le ciel ; le blanc reste réservé aux photos de produits (matériel). */
.photos-web.selection label { background: #000; }
.photos-web.selection img { background: #000; }
.photos-web.selection span { background: var(--carte); color: var(--discret); }
.photos-web.selection label:has(input:checked) span { color: var(--texte); }
td.vignette.ciel img { background: #000; }

/* Historique des diffusions */
.defilement { overflow-x: auto; }
.diffusions td { vertical-align: middle; white-space: nowrap; font-size: 0.85rem; }
.diffusions td img { vertical-align: middle; border-radius: 4px; background: #000; }
.diffusions form { margin: 0; }
.bouton.discret { padding: 2px 10px; color: var(--discret); background: transparent; }
.statut-publiee { color: #5cc98a; }
.statut-envoyee { color: var(--ambre); }
.statut-distinguee { color: #ffd34d; font-weight: 600; }
.statut-refusee { color: var(--discret); }
.diffusion-site { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 0.9rem; }
.diffusion-site input { flex: 1 1 220px; width: auto; }

/* Retouche guidée */
.retouche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .retouche { grid-template-columns: 1fr; } }
.avant-apres { position: relative; background: #000; border-radius: 6px; overflow: hidden; }
.avant-apres img { display: block; width: 100%; height: auto; }
.avant-apres img.apres { position: absolute; inset: 0; height: 100%; object-fit: contain; clip-path: inset(0 0 0 var(--rideau, 50%)); transition: opacity 0.2s; }
.avant-apres .trait { position: absolute; top: 0; bottom: 0; left: var(--rideau, 50%); width: 0; border-left: 2px solid #fffc; box-shadow: 0 0 6px #000; pointer-events: none; }
.avant-apres .trait span { position: absolute; top: 8px; padding: 2px 8px; font-size: 0.75rem; background: #000a; color: #fff; border-radius: 4px; white-space: nowrap; }
.avant-apres .trait span:first-child { right: 8px; }
.avant-apres .trait span:last-child { left: 8px; }
.vues { display: flex; gap: 4px; }
.avant-apres img.apres.calcul { opacity: 0.6; }
.rideau { display: block; width: 100%; margin: 10px 0 4px; }
.reglages label { display: block; margin: 8px 0; }
.reglages label span { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.reglages label.propose span { color: var(--ambre); }
.reglages output { font-variant-numeric: tabular-nums; color: var(--texte); }
.reglages input[type=range] { width: 100%; }

/* Médailles des distinctions */
.image-medaillee { position: relative; }
/* Médailles sous l'image (jamais dessus : l'image reste intacte). */
.medailles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.medailles svg { width: 52px; height: 52px; filter: drop-shadow(0 1px 2px #0008); font-family: "DejaVu Sans", system-ui, sans-serif; }
.medailles:empty { display: none; }
.medailles.petites { margin-top: 0; }
.medailles.petites svg { width: 44px; height: 44px; }
.vignette .image-medaillee { display: block; }
.vignette .medailles { gap: 2px; margin-top: 2px; }
.vignette .medailles svg { width: 18px; height: 18px; }
.distinction { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--bord); }
.distinction > span { flex: 1; }
.distinction form { margin: 0; }
.outils-zoom { margin-bottom: 8px; }
.avant-apres { cursor: zoom-in; }
.avant-apres.zoom { height: 70vh; cursor: crosshair; }
.avant-apres.zoom img { width: 100%; height: 100%; object-fit: cover; }

/* Pages légales et pied de page */
.pied { text-align: center; padding: 24px 16px 32px; font-size: 0.85rem; color: var(--discret); }
.pied a { color: var(--discret); }
.legal { max-width: 820px; margin: 0 auto; line-height: 1.6; }
.legal h2 { margin-top: 24px; }
.fiche-fichier { font-size: 0.78rem; color: var(--discret); }

/* Fenêtre d'attente des traitements longs */
.attente { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000b; padding: 16px; }
.attente-boite { width: min(520px, 100%); background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 22px 24px; box-shadow: 0 10px 40px #000a; }
.attente-message { margin: 0 0 14px; font-weight: 600; }
.attente-barre { height: 10px; border-radius: 5px; background: var(--fond); overflow: hidden; border: 1px solid var(--bord); }
.attente-barre div { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent), #8fb8ff); border-radius: 5px; will-change: transform; }
@keyframes attente-remplir { from { transform: scaleX(0); } to { transform: scaleX(0.9); } }
@keyframes attente-finir { from { transform: scaleX(0.9); } to { transform: scaleX(0.99); } }
.attente-temps { margin: 12px 0 0; font-size: 0.88rem; color: var(--discret); font-variant-numeric: tabular-nums; }

/* Couleur sélective */
.selective { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.bandes { display: flex; gap: 6px; width: 100%; }
.bande { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--teinte); cursor: pointer; position: relative; padding: 0; }
.bande.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.bande.modifiee::after { content: ""; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid #000; }
.avant-apres.pipette, .avant-apres.pipette img { cursor: crosshair; }
.echantillon { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; border: 1px solid #fff8; }

/* Atelier de retouche, façon Lightroom : image au centre, palettes qui défilent à droite */
body.atelier main { max-width: none; padding: 10px 16px 0; }
.atelier-grille { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; height: calc(100vh - 70px); }
.atelier-image { display: flex; flex-direction: column; min-height: 0; }
.atelier-image .outils-zoom { flex-wrap: wrap; gap: 8px; }
.scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; border-radius: 6px; overflow: hidden; }
body.atelier .avant-apres { max-width: 100%; max-height: 100%; }
body.atelier .avant-apres img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 210px); }
body.atelier .avant-apres img.apres { width: 100%; height: 100%; max-height: none; }
body.atelier .avant-apres.zoom { width: 100%; height: 100%; }
body.atelier .avant-apres.zoom img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.atelier-panneau { overflow-y: auto; min-height: 0; padding-right: 6px; scrollbar-width: thin; }
.palette { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.palette > summary { cursor: pointer; font-weight: 600; padding: 4px 0; list-style: none; display: flex; justify-content: space-between; }
.palette > summary::after { content: "▾"; color: var(--discret); }
.palette:not([open]) > summary::after { content: "▸"; }
.palette .elements { font-size: 0.85rem; }
.atelier-actions { position: sticky; bottom: 0; background: var(--fond); padding: 10px 0 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--bord); }
body.atelier .pied { display: none; }
@media (max-width: 900px) {
  .atelier-grille { grid-template-columns: 1fr; height: auto; }
  body.atelier .avant-apres img { max-height: none; }
  .atelier-panneau { overflow: visible; }
}
.logo-actuel { max-height: 60px; background: repeating-conic-gradient(#555 0 25%, #333 0 50%) 0 0 / 12px 12px; padding: 4px; border-radius: 4px; }
input[type=color] { height: 36px; padding: 2px; }

/* Mes références */
.references { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.reference { background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.reference img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: #000; }
.reference .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.proposition textarea { width: 100%; font-size: 0.92rem; line-height: 1.5; }

/* Préparer une image pour une destination */
.preparer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .preparer { grid-template-columns: 1fr; } }
.zone-cadrage { position: relative; user-select: none; touch-action: none; background: #000; }
.zone-cadrage img { display: block; width: 100%; height: auto; opacity: 0.55; }
.cadre { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px #0008; cursor: move;
  background: linear-gradient(#fff4, #fff4) 33.33% 0 / 1px 100% no-repeat, linear-gradient(#fff4, #fff4) 66.66% 0 / 1px 100% no-repeat,
  linear-gradient(#fff4, #fff4) 0 33.33% / 100% 1px no-repeat, linear-gradient(#fff4, #fff4) 0 66.66% / 100% 1px no-repeat; }
.zone-cadrage { overflow: hidden; }
.poignee { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: #fff; border-radius: 50%; cursor: nwse-resize; }
.apercu-final { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; background: #000; transition: opacity 0.2s; }
.apercu-final.calcul { opacity: 0.6; }
.destination { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.destination img { width: 140px; max-height: 140px; object-fit: contain; background: #000; border-radius: 4px; }
.destination > div { display: flex; flex-direction: column; gap: 6px; }
[hidden] { display: none !important; }
.question { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid var(--accent); border-radius: 8px; }

/* Étapes numérotées des pages Soumettre et Partager */
.etapes { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .5rem 0; }
.etapes a { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .25rem; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none; color: inherit; }
.etapes a:hover { background: var(--survol, rgba(127, 127, 127, .12)); }
.numero { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent, #2a6fd6); color: #fff; font-size: .85em; font-weight: 600; margin-right: .3em; }
[id^="etape-"] { scroll-margin-top: 1rem; }

/* Pastilles de palette (RGB, SHO, HOO…), étoiles RGB et temps de pose */
.pastilles { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.pastille { display: inline-flex; align-items: center; gap: .25em; height: 1.6em; padding: 0 .5em; background: rgba(11, 13, 18, .6); border: 1px solid rgba(217, 180, 91, .28); border-radius: .4em; font: 700 .75rem/1 Arial, Helvetica, sans-serif; color: #eef1f6; white-space: nowrap; }
.pastille b { font-weight: 700; letter-spacing: .02em; }
.pastille b + b { margin-left: -.2em; }
.pastille small { font-size: .72em; font-weight: 700; margin-left: .15em; }
.pastille svg { height: 1em; width: auto; opacity: .8; }
.pastilles.grandes { gap: .5rem; margin: .6rem 0 .2rem; }
.pastilles.grandes .pastille { font-size: .9rem; height: 1.8em; padding: 0 .6em; }

/* Formulaire « Ajouter une distinction » : le bouton ne colle pas au dernier champ */
#distinctions details form > .bouton { margin-top: .9rem; }

/* Bulle « Aide » : conversation avec l'assistant du site */
.aide-bouton { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50; width: 68px; height: 68px; padding: 0; border-radius: 50%; border: 2px solid var(--bord); background: #f3efe9; cursor: pointer; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); transition: transform .2s; }
.aide-bouton:hover { transform: scale(1.08) rotate(-4deg); }
.aide-bouton img { width: 100%; height: 100%; display: block; transform: translateY(6%) scale(1.15); }
.aide-portrait { width: 2rem; height: 2rem; border-radius: 50%; background: #f3efe9; margin-right: .4rem; }
.aide-bulle { position: fixed; right: 1.2rem; bottom: 6rem; z-index: 50; width: min(380px, calc(100vw - 2rem)); max-height: min(560px, 70vh); display: flex; flex-direction: column; gap: .5rem; padding: .8rem; border-radius: .8rem; border: 1px solid var(--bord); background: var(--carte); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.aide-bulle[hidden] { display: none; }
.aide-fil { overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.aide-fil p { margin: 0; padding: .5rem .7rem; border-radius: .6rem; white-space: pre-wrap; line-height: 1.4; }
.aide-ia { background: rgba(127, 127, 127, .12); align-self: flex-start; }
.aide-moi { background: var(--accent); color: #fff; align-self: flex-end; }
.aide-ia.attente { color: var(--discret); font-style: italic; }
.aide-bulle form { display: flex; gap: .4rem; align-items: flex-end; }
.aide-bulle textarea { flex: 1; resize: none; }
.aide-micro { font-size: 1.1rem; padding: .35rem .55rem; }
.aide-micro.enregistre { background: var(--rouge); color: #fff; border-color: var(--rouge); animation: aide-pouls 1.2s ease-in-out infinite; }
@keyframes aide-pouls { 50% { opacity: .55; } }
.aide-moi.attente { opacity: .7; font-style: italic; }

/* Palmarès « Lunettes » */
.lunette { width: 4rem; height: auto; vertical-align: middle; }
.lunette.petite { width: 1.6rem; }
.lunette.grande { width: 9rem; }
.lunette-entete { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: inherit; font-size: .85rem; }
.niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; }
.niveaux > div { text-align: center; padding: .6rem; border: 1px solid var(--bord); border-radius: .6rem; }
.niveaux > div.pas-encore { opacity: .35; filter: grayscale(.7); }
.niveaux > div.actuel { border-color: var(--ambre); box-shadow: 0 0 0 1px var(--ambre); }
.jauge { height: .7rem; border-radius: 999px; background: rgba(127, 127, 127, .2); overflow: hidden; }
.jauge > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ambre), #f2cf63); }

/* Fête après une distinction */
.fete { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5, 7, 12, .72); animation: fete-fondu .4s ease-out; }
.fete-carte { position: relative; text-align: center; padding: 2rem 2.4rem; border-radius: 1rem; background: var(--carte); border: 1px solid var(--ambre); max-width: min(420px, 90vw); animation: fete-saut .7s cubic-bezier(.2, 1.6, .4, 1); }
.fete-lunette { width: 9rem; animation: fete-lunette 1.6s ease-in-out infinite alternate; }
.fete-etoiles { position: absolute; left: 50%; top: 40%; }
.fete-etoiles span { position: absolute; width: 8px; height: 8px; border-radius: 50%; opacity: 0; animation: fete-eclat 1.6s ease-out var(--d) 2 forwards; }
@keyframes fete-fondu { from { opacity: 0; } }
@keyframes fete-saut { from { transform: scale(.4); opacity: 0; } }
@keyframes fete-lunette { from { transform: rotate(-4deg) translateY(2px); } to { transform: rotate(4deg) translateY(-4px); } }
@keyframes fete-eclat { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fete *, .fete { animation: none !important; } }

/* Mes comptes et Publier partout */
.compte > summary { display: flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none; }
.compte > summary::-webkit-details-marker { display: none; }
.compte > summary h2 { margin: 0; flex: 1; }
.pas-a-pas { padding-left: 1.4rem; line-height: 1.5; }
.pas-a-pas li { margin: .45rem 0; }
.pas-a-pas li::marker { font-weight: 700; color: var(--accent); }
.etat-ok { color: #4fd67f; font-weight: 600; }
.etat-erreur { color: var(--rouge); font-weight: 600; }
.destination-choix { display: block; padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.destination-choix.indisponible { opacity: .6; }
.verifications { line-height: 1.8; }
.bouton.grand { font-size: 1.1rem; padding: .7rem 1.4rem; }

/* Images primées dans la recherche de repères */
.vignette-primee { position: relative; display: block; }
.badge-primee { position: absolute; left: .3rem; top: .3rem; padding: .1rem .45rem; border-radius: .4rem; background: rgba(11, 13, 18, .82); color: #f2cf63; font-size: .72rem; font-weight: 700; border: 1px solid rgba(217, 180, 91, .5); }

/* Logo Starissimo */
.marque img { height: 2.1rem; width: auto; display: block; }
.logo-connexion { height: 6rem; width: auto; max-width: 100%; }

/* Devise en grand sur la page d'accueil, dans la police du logo */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond.acccb36a2fc2.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic.b57f97f8abd5.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
/* Posée au centre de l'image à l'affiche, au-dessus du texte du bas. */
.devise { position: absolute; left: 6vw; right: 6vw; top: 30%; transform: translateY(-50%); text-align: left; pointer-events: none; }
/* L'étoile remplace le point du « i » de firmament, comme dans le logo. */
.i-etoile { position: relative; display: inline-block; margin-left: 0.03em; }
/* Mesures de Cormorant italique : le crochet du « f » monte à 0,726 em et déborde au-dessus du « ı » ;
   l'étoile est centrée à 0,78 em au-dessus de la ligne de base, dans l'axe penché du « ı » (10°). */
.i-etoile svg { position: absolute; left: 0.005em; bottom: 0.756em; width: 0.46em; height: 0.46em; filter: drop-shadow(0 0 6px rgba(242, 207, 99, .55)); }
.devise p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.05; letter-spacing: .01em; color: #f4efe4; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6); }
/* Téléphone : le menu passe sur plusieurs lignes ; la devise quitte sa place fixe et suit le menu, au-dessus du texte. */
@media (max-width: 700px) {
  .affiche { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: 13rem; }
  .devise { position: static; transform: none; margin: 0 0 2rem; }
  .devise p { font-size: clamp(2.1rem, 11vw, 3rem); }
}
.avertissement { border-left: 2px solid var(--ambre); padding-left: .6rem; }

/* Cibles proposées pour ce soir */
.cible-soir { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--bord); }
.pastille-niveau { font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--ambre); color: var(--ambre); }

/* Exemples d'images primées (Préparer une cible) : petites vignettes carrées, en grille */
.exemples-primees { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; margin: .8rem 0; }
.exemples-primees:has(.exemple-primee) { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .9rem; align-items: start; }
.exemple-primee { margin: 0; min-width: 0; overflow: hidden; font-size: .76rem; line-height: 1.35; }
.exemple-primee figcaption { padding: .35rem .1rem 0; }
.exemple-primee figcaption .aide { font-size: .72rem; margin: .2rem 0 0; }
.poses-primee { border-collapse: collapse; width: 100%; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.poses-primee { table-layout: auto; }
.poses-primee td { padding: .05rem .3rem .05rem 0; white-space: nowrap; }
.poses-primee td:first-child { white-space: normal; overflow-wrap: anywhere; }
.poses-primee td:last-child { text-align: right; padding-right: 0; }
.poses-primee tr.total td { border-top: 1px solid var(--bord); font-weight: 700; padding-top: .15rem; }
.exemples-primees a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: .5rem; border: 1px solid var(--bord); }
.exemples-primees img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.exemples-primees a:hover img { transform: scale(1.06); }
.exemples-primees .badge-primee { font-size: .62rem; left: .25rem; top: .25rem; padding: .05rem .35rem; }
.a-completer-optique { font-size: .8rem; color: var(--ambre); }
.pastille-niveau.rare { border-color: #6aa8ff; color: #6aa8ff; }
.conseil-ia { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--ambre); border-radius: .6rem; background: rgba(217, 172, 79, .06); }
.conseil-ia p { margin: .35rem 0; }
.exemple-cible { flex: 0 0 auto; width: 84px; height: 84px; border-radius: .45rem; overflow: hidden; border: 1px solid var(--bord); display: block; background: #0b0d12; }
.exemple-cible img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exemple-cible.grand { width: 100%; max-width: 420px; height: 220px; margin: .4rem 0; }
.cible-soir-texte { flex: 1; }
.attente-secours { margin-top: .8rem; font-size: .9rem; }
.exemple-cible.vide { display: grid; place-items: center; color: var(--discret); font-size: 1.6rem; }
.pastille-niveau.defi { border-color: #ff8a7a; color: #ff8a7a; }

/* Palmarès : images distinguées, triables par distinction */
.filtres-palmares { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.filtre-palmares { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--bord); color: inherit; text-decoration: none; font-size: .9rem; }
.filtre-palmares.actif { border-color: var(--ambre); background: rgba(217, 164, 65, .12); }
.filtre-palmares .point-couleur { width: .7rem; height: .7rem; border-radius: 50%; background: var(--couleur, var(--accent)); }
.galerie-palmares { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.carte-palmares { display: block; color: inherit; text-decoration: none; }
.carte-palmares .image-medaillee { aspect-ratio: 4 / 3; overflow: hidden; border-radius: .6rem; background: #05070b; }
.carte-palmares img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.carte-palmares:hover img { transform: scale(1.04); }
.carte-palmares .medailles svg { width: 40px; height: 40px; }
.titre-palmares { display: block; margin-top: .35rem; font-weight: 600; }

/* Poster du palmarès */
.poster-palmares { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid var(--bord); border-radius: 10px; }
.poster-palmares > span { flex: 1 1 16rem; }

/* Vérification des distinctions */
.compteur { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 1em; background: var(--rouge); color: #fff; font-size: .75em; text-align: center; }
.distinction.non-validee .medailles { opacity: .45; filter: grayscale(.6); }
.statut-distinction { display: inline-block; margin-left: .5em; padding: .05em .5em; border-radius: 1em; font-size: .8em; }
.statut-distinction.attente { background: rgba(217, 164, 65, .18); color: var(--ambre); }
.statut-distinction.refusee { background: rgba(229, 83, 75, .18); color: var(--rouge); }
.a-valider { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--bord); }
.a-valider-image { display: flex; flex-direction: column; gap: .5rem; }
.a-valider-image img { max-width: 100%; border-radius: 6px; border: 1px solid var(--bord); }
.a-valider-image .image-distinguee { max-height: 10rem; width: auto; }
.sans-preuve { padding: 1.5rem; border: 1px dashed var(--bord); border-radius: 6px; color: var(--discret); text-align: center; }
.a-valider-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.a-valider-actions input[type=text] { flex: 1 1 14rem; }
@media (max-width: 700px) { .a-valider { grid-template-columns: 1fr; } }

/* Barème des distinctions */
.bareme input[type=number] { width: 5.5rem; text-align: right; }
.bareme tr.modifie td:first-child { color: var(--ambre); }
.bareme tr.modifie input { border-color: var(--ambre); }
.actions-bareme { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ligne-lunette { display: inline-flex; align-items: center; gap: .5rem; }
.ligne-lunette svg.lunette { width: 40px; height: 32px; }

/* Import d'une galerie (AstroBin) */
.ligne-formulaire { display: flex; flex-wrap: wrap; gap: .6rem; }
.ligne-formulaire input[type=text] { flex: 1 1 22rem; }
.galerie-import { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin: .8rem 0; }
.carte-import { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .5rem; border: 1px solid var(--bord); border-radius: 10px; cursor: pointer; }
.carte-import:has(input:checked) { border-color: var(--accent); background: rgba(76, 141, 255, .08); }
.carte-import.deja { opacity: .7; }
.carte-import input { position: absolute; top: .8rem; left: .8rem; width: 1.2rem; height: 1.2rem; }
.carte-import img, .carte-import .sans-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #05070b; display: block; }
.titre-import { font-weight: 600; line-height: 1.25; }
.distinctions-import { display: flex; flex-wrap: wrap; gap: .25rem; }
.badge-import { font-size: .75em; padding: .05em .45em; border-radius: 1em; background: rgba(217, 164, 65, .18); color: var(--ambre); }
.sources-import { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.carte-source { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border: 1px solid var(--bord); border-radius: 10px; }
.carte-source h3 { margin: 0; }
.zone-dossier { border: 2px dashed var(--bord); border-radius: 12px; padding: 1.2rem; text-align: center; }
.zone-dossier.survol { border-color: var(--accent); background: rgba(76, 141, 255, .08); }
.suivi-import { list-style: none; padding: 0; margin: .5rem 0 0; max-height: 18rem; overflow: auto; font-size: .9em; }
.suivi-import li { padding: .15rem 0; }
.suivi-import li.deja, .suivi-import li.deja a { color: var(--discret); }
.suivi-import li.erreur { color: var(--rouge); }

/* Testeurs et administration */
.tuiles-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.tuiles-admin > a { color: inherit; text-decoration: none; }
.tuiles-admin > a:hover { border-color: var(--accent); }
.lien-invitation { width: min(28rem, 100%); font-size: .85em; }
.alerte-publique { border-color: var(--ambre); }
.avis { padding: .6rem 0; border-top: 1px solid var(--bord); }
.avis.non-lu { border-left: 3px solid var(--accent); padding-left: .8rem; }
.texte-avis { margin: .3rem 0 0; }

/* Évaluer une cible */
.boutons-cible { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.visites-jours .barre-cellule { width: 40%; min-width: 80px; }
.barre-visites { display: block; height: .7rem; border-radius: 4px; background: var(--accent, #4a8cff); min-width: 2px; }
.evaluation-cible { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--bord); }
.evaluation-cible.bon { border-color: #3fa66a; }
.evaluation-cible.moyen { border-color: var(--ambre); }
.evaluation-cible.mauvais { border-color: var(--rouge); }
.verdict-cible { margin: 0 0 .5rem; }
.points-cible { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.points-cible li { padding-left: 1.4rem; position: relative; font-size: .95em; }
.points-cible li::before { position: absolute; left: 0; }
.points-cible li.bon::before { content: "✓"; color: #3fa66a; }
.points-cible li.moyen::before { content: "!"; color: var(--ambre); font-weight: 700; left: .3rem; }
.points-cible li.mauvais::before { content: "✗"; color: var(--rouge); }
.points-cible li.neutre::before { content: "·"; color: var(--discret); left: .35rem; }
.exemples-evaluation { display: flex; gap: .5rem; margin: .7rem 0 .3rem; }
.exemples-evaluation img { width: 110px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.choix-cibles { border: 0; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.choix-cibles label.case { display: inline-flex; align-items: center; gap: .4rem; margin: 0; white-space: nowrap; }
.choix-cibles input[type=radio] { margin: 0; accent-color: var(--accent); }
.choix-cibles legend { padding: 0; margin-bottom: .2rem; }

/* Carte du ciel plein écran */
.bouton-carte-ciel { background: none; border: 1px solid var(--bord); color: var(--texte); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; font: inherit; }
.bouton-carte-ciel:hover { border-color: var(--accent); }
.fenetre-ciel { position: fixed; inset: 0; z-index: 1000; background: #05070d; display: flex; flex-direction: column; }
.fenetre-ciel[hidden] { display: none; }
body.carte-ouverte { overflow: hidden; }
.carte-ciel-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .5rem .8rem; border-bottom: 1px solid #1c2130; }
.onglets-carte button, .outils-carte button { background: #121722; color: var(--texte); border: 1px solid #2a3040; border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font: inherit; }
.onglets-carte button.actif { border-color: var(--accent); background: rgba(76, 141, 255, .15); }
.outils-carte { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--discret); }
.outils-carte[hidden] { display: none; }
.outils-carte input { min-width: 16rem; }
.reference-etat { font-size: .8rem; color: #c9a8ff; align-self: center; }
.fermer-carte { margin-left: auto; background: none; border: 0; color: var(--texte); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.carte-ciel-vue { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.carte-ciel-vue[hidden] { display: none; }
#carte-ciel-aladin { width: 100%; height: 100%; }
.carte-ciel-credit { margin: 0; padding: .3rem .8rem; font-size: .75em; color: var(--discret); }
.carte-ciel-credit a { color: var(--discret); }
#carte-ciel-celestial { width: 100%; height: 100%; }
.carte-ciel-vue { position: relative; }
.outils-carte button.actif { border-color: #5cf2a5; color: #5cf2a5; }
.angle-camera { display: inline-flex; align-items: center; gap: .4rem; color: var(--texte); }
.angle-camera[hidden] { display: none; }

/* Mode recherche : viseurs fixes au centre de « Photos du ciel » et barre compacte (le ciel garde les deux tiers) */
.viseurs-camera { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.viseur-camera { position: absolute; left: 50%; top: 50%; border: 2px solid var(--couleur, #5cf2a5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.carte-ciel-barre { font-size: .9em; gap: .4rem .8rem; padding: .35rem .8rem; }
.onglets-carte button, .outils-carte button { padding: .2rem .6rem; }
.outils-carte input[type=search] { width: 15rem; min-width: 0; flex: none; padding: .2rem .5rem; }
.outils-carte input[type=range] { width: 9rem; min-width: 0; padding: 0; flex: none; }
.outils-carte select { width: auto; min-width: 0; padding: .2rem .4rem; flex: none; }
.angle-camera { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.angle-camera[hidden] { display: none; }
.angle-texte { min-width: 3.5em; color: var(--texte); }
.outils-carte .pastille-config { border-color: var(--couleur); color: var(--couleur); background: none; opacity: .45;
  border-radius: 999px; white-space: nowrap; }
.outils-carte .pastille-config[aria-pressed=true] { opacity: 1; background: color-mix(in srgb, var(--couleur) 14%, transparent); }
.fenetre-ciel.barre-cachee .carte-ciel-barre, .fenetre-ciel.barre-cachee .carte-ciel-credit { display: none; }
.montrer-barre { display: none; position: absolute; top: .6rem; right: .6rem; z-index: 30; background: rgba(18, 23, 34, .85);
  color: var(--texte); border: 1px solid #2a3040; border-radius: 6px; padding: .25rem .6rem; cursor: pointer; font: inherit; }
.fenetre-ciel.barre-cachee .montrer-barre { display: block; }
/* Barre compacte : onglets et outils sur une ligne, croix de fermeture dans le coin */
.carte-ciel-barre { position: relative; padding-right: 2.6rem; }
.carte-ciel-barre .fermer-carte { position: absolute; top: .2rem; right: .6rem; }
.carte-ciel-barre > .outils-carte { flex: 1 1 0; min-width: 0; }
.outils-carte .pastille-config { font-size: .85em; padding: .15rem .55rem; }
.outils-carte select[data-camera] { max-width: 11rem; }
/* Aperçu du cadrage prévu (capture du viseur de la carte du ciel) */
.cadrage-prevu { margin: .8rem 0 0; }
.cadrage-prevu img { display: block; max-width: 100%; max-height: 360px; border-radius: 6px; border: 1px solid var(--bord); }
.cadrage-prevu figcaption { font-size: .8em; color: var(--discret); margin-top: .3rem; }
/* Préparer une cible : couches ajoutées (Hα, OIII, SII) */
.couches { display: inline-flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; border: 0; padding: 0; margin: .4rem 0 .6rem; }
.couches legend { float: left; margin-right: .6rem; padding: 0; color: var(--discret); }
.couches label { display: inline-flex; align-items: center; gap: .3rem; }
.ajouter-couches { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; }
/* Recherche de nébuleuses */
tr.discret td { opacity: .55; }
#zones .actions-ligne, #candidats .actions-ligne { gap: 6px; }
#zones .actions-ligne .bouton, #candidats .actions-ligne .bouton { padding: .15rem .5rem; font-size: .85em; }
/* Inspection d'une image (recherche de nébuleuses) */
.ins-inconnue { color: #ff9a3c; } .ins-dans { color: #6aa8ff; } .ins-connue { color: #9aa3b5; }
.inspection-image { position: relative; margin: .8rem 0; line-height: 0; }
.inspection-image img { width: 100%; height: auto; border-radius: 6px; }
.ins-cercle { position: absolute; aspect-ratio: 1; min-width: 14px; transform: translate(-50%, -50%); border: 2px solid currentColor;
  border-radius: 50%; text-decoration: none; }
.ins-cercle span { position: absolute; left: 100%; top: -2px; font: 600 11px/1 system-ui, sans-serif; text-shadow: 0 0 3px #000; }
.ins-cercle.ins-artefact { opacity: .3; border-style: dashed; }
.ins-cercle.ins-candidat { border-width: 3px; color: #ffd84a; box-shadow: 0 0 6px #ffd84a; }
.inspection-liste .verdicts { display: flex; gap: 4px; }
.inspection-liste .verdicts .bouton, .inspection-liste .actions-ligne .bouton { padding: .1rem .45rem; font-size: .8em; }
/* Signaler un bug */
.signaler-bouton { position: fixed; left: 16px; bottom: 16px; z-index: 1100; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--bord); background: var(--fond-carte, #161b26); font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.signaler-bouton:hover { transform: scale(1.08); }
.signaler-fenetre { position: fixed; left: 16px; bottom: 72px; z-index: 1150; width: min(420px, calc(100vw - 32px));
  background: var(--fond-carte, #161b26); border: 1px solid var(--bord); border-radius: 10px; padding: .8rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.signaler-fenetre[hidden] { display: none; }
.signaler-fenetre .entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.signaler-fenetre img { max-width: 100%; max-height: 180px; border-radius: 6px; border: 1px solid var(--bord); margin: .3rem 0; }
.signaler-capture { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; }
.capture-bug { max-width: 100%; max-height: 420px; border-radius: 6px; border: 1px solid var(--bord); margin: .5rem 0; }
.statut-bug { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.statut-bug textarea { flex: 1 1 100%; }
/* Mes images : photo de l'instrument */
td.instrument { white-space: nowrap; }
.vignette-instrument { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: .5rem;
  border: 1px solid var(--bord); background: #fff; }
/* Importer : matériel trouvé sur AstroBin */
.liste-materiel-astrobin { list-style: none; padding: 0; margin: .3rem 0 .8rem; columns: 2 26rem; }
.liste-materiel-astrobin li { break-inside: avoid; padding: .15rem 0; }
.liste-materiel-astrobin label { display: inline; }
.badge-distance { font-size: .75em; padding: .05rem .4rem; border-radius: 999px; border: 1px solid #6aa8ff; color: #6aa8ff; white-space: nowrap; }
.bouton.desactive { cursor: default; opacity: .85; }
.badge-vendu { font-size: .75em; padding: .05rem .4rem; border-radius: 999px; border: 1px solid #e0a040; color: #e0a040; white-space: nowrap; }
/* Formulaires en lignes (Matériel) */
.champs.ligne-1 { grid-template-columns: 1fr; }
.champs.ligne-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champs.ligne-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.titre-groupe { margin: 1rem 0 .3rem; font-size: 1rem; color: var(--discret); border-top: 1px solid var(--bord); padding-top: .8rem; }
@media (max-width: 700px) { .champs.ligne-3, .champs.ligne-4 { grid-template-columns: 1fr 1fr; } }
.actions-fin { display: flex; gap: .6rem; flex-wrap: wrap; }
.poses-courtes { display: inline-block; margin-top: .15rem; }
.poses-conseil { max-width: 320px; margin: .3rem 0 .6rem; }
.photos-web .exemple-primee { margin-top: .3rem; text-align: left; }
.verification-envoi h3 { margin: .8rem 0 .2rem; font-size: .95rem; }
.verification-envoi ul { list-style: none; padding: 0; margin: 0; }
.verification-envoi li { padding: .1rem 0; }
.verification-envoi li.ok { color: var(--vert, #6fcf97); }
.verification-envoi li.attention { color: #f2c94c; }
.verification-envoi li.erreur { color: var(--rouge); }

/* Téléphone : bouton « Signaler un bug » plus petit et discret ; une marge en bas pour qu'il ne cache pas la fin de page. */
@media (max-width: 700px) {
  .signaler-bouton { width: 38px; height: 38px; left: 10px; bottom: 10px; font-size: 18px; opacity: .8; }
  body { padding-bottom: 56px; }
}

/* Textes longs en <pre> (consignes, remarques) : retour à la ligne, jamais de défilement horizontal. */
pre.remarques { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Comparer à une référence : les deux images côte à côte, même hauteur */
.cote-a-cote { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .6rem 0 1rem; }
.cote-a-cote figure { margin: 0; }
.cote-a-cote img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #000; border-radius: .4rem; display: block; }
.cote-a-cote figcaption { text-align: center; font-size: .85rem; color: var(--discret); margin-top: .3rem; }
@media (max-width: 700px) { .cote-a-cote { grid-template-columns: 1fr; } }
.lien-astrobin { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .5rem 0; }
.lien-astrobin label { flex: 1 1 24rem; display: flex; flex-direction: column; gap: .25rem; }
.lien-astrobin.a-remplir { border: 1px solid var(--ambre, #f2c94c); border-radius: .5rem; padding: .6rem .8rem; background: rgba(242, 201, 76, .06); }
#nouvelle-comparaison .lien-astrobin { display: flex; flex-direction: column; }

/* Poses comparées : une ligne par filtre, deux barres (lumière captée) et une phrase */
.poses-resume { margin: .3rem 0 .6rem; }
.poses-comparees { display: grid; gap: .5rem; }
.filtre-bilan { display: grid; grid-template-columns: 4rem minmax(12rem, 1fr) minmax(14rem, 1.2fr); gap: .4rem 1rem; align-items: center;
  padding: .5rem .7rem; border-radius: .5rem; background: var(--carte, #161b26); border-left: 4px solid #5cc98a; }
.filtre-bilan.manque { border-left-color: #f2c94c; }
.nom-filtre { font-size: 1.15rem; font-weight: 700; }
.barres { display: grid; gap: .25rem; }
.barre-ligne { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .4rem; font-size: .85rem; }
.barre-ligne .barre { display: block; height: .7rem; border-radius: .35rem; min-width: 2px; max-width: 100%; }
.barre-ligne { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.barre.vous { background: #5aa0ff; }
.barre.lui { background: #9aa4b5; }
.barre-ligne .valeur { white-space: nowrap; }
.verdict-filtre { font-size: .92rem; }
.filtre-bilan.ok .verdict-filtre { color: #5cc98a; }
@media (max-width: 760px) { .filtre-bilan { grid-template-columns: 3rem 1fr; } .verdict-filtre { grid-column: 1 / -1; } }
.comment-calcule { margin-top: .4rem; }

/* Les heures juste au bout de leur barre (la plus longue barre fait 65 % de la ligne) */
.barre-ligne { display: flex !important; align-items: center; gap: 6px; }
.barre-ligne .qui { flex: 0 0 2.6rem; }
.barre-ligne .barre { flex: 0 0 auto; }
.filtre-bilan { grid-template-columns: 3.6rem minmax(0, 1.5fr) minmax(12rem, 1fr) !important; }
.barres { min-width: 0; }
.barre-ligne .valeur { white-space: normal; }
@media (max-width: 760px) { .filtre-bilan { grid-template-columns: 3rem minmax(0, 1fr) !important; } }

/* Comparer : votre image, puis les images primées les plus ressemblantes */
.mon-image-corps { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mon-image-corps img { width: 220px; max-width: 100%; border-radius: .4rem; background: #000; }
.faits-image { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.suggestions { display: grid; gap: .8rem; }
.suggestion { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; padding: .6rem; border-radius: .5rem; background: var(--fond); }
.suggestion img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .4rem; display: block; }
.ressemblance { margin: 0; font-size: 1.05rem; }
.ressemblance strong { font-size: 1.4rem; color: #5cc98a; }
.meilleure { color: #f2cf63; font-weight: 600; }
.suggestion-titre { margin: .1rem 0 .3rem; font-weight: 600; }
.raisons { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .1rem; font-size: .9rem; }
.raisons .bon { color: var(--texte); }
.raisons .different { color: var(--discret); }
@media (max-width: 700px) { .suggestion { grid-template-columns: 1fr; } }
.ressemblance.moyenne strong { color: #f2c94c; }
.ressemblance.faible strong { color: var(--discret); }
#nouvelle-comparaison .lien-astrobin { align-items: stretch; text-align: left; }
.plan-modele { list-style: none; display: flex; gap: .8rem; align-items: flex-start; margin: .4rem 0 .6rem -1.2rem; padding: .6rem; border-radius: .5rem; background: var(--fond); }
.plan-modele img { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .4rem; display: block; }
.badge-primee-texte { color: #f2cf63; font-weight: 600; }
@media (max-width: 700px) { .plan-modele { flex-direction: column; margin-left: 0; } }
.etiquette-projet { display: inline-block; padding: .05rem .45rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; color: #f2cf63; border: 1px solid rgba(242, 207, 99, .55); vertical-align: middle; }
/* Vignettes verticales ou panoramiques : affichées entières, jamais tronquées */
.plan-modele img { aspect-ratio: auto; height: auto; max-height: 220px; width: auto; max-width: 160px; object-fit: contain; background: #000; }
.suggestion img { aspect-ratio: 3 / 2; object-fit: contain; background: #000; }
.duree-pose { width: 5.5em; text-align: right; padding: 2px 6px; }
/* Menu « Exporter » (CSV, ou ZIP avec les photos) */
.menu-export { position: relative; display: inline-block; }
.menu-export summary { list-style: none; cursor: pointer; }
.menu-export summary::-webkit-details-marker { display: none; }
.menu-export > div { position: absolute; right: 0; z-index: 20; display: grid; min-width: 15rem; margin-top: .3rem; padding: .3rem;
  border: 1px solid var(--bord); border-radius: .5rem; background: var(--carte, #161b26); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.menu-export > div a { padding: .45rem .7rem; border-radius: .35rem; white-space: nowrap; }
.menu-export > div a:hover { background: var(--fond); text-decoration: none; }
.message.rappels { border-left: 4px solid #f2cf63; }

/* Vérification d'un document d'achat : focale/diamètre et pixel/résolution, deux petits champs l'un sous l'autre. */
td.caracteristiques input { width: 7.5em; display: block; margin: 2px 0; }

/* Premiers pas d'un nouveau membre : 1. matériel, 2. images. */
.premiers-pas { border-left: 4px solid #5aa0ff; }
.premiers-pas h2 { margin-top: 0; }
.etapes-premiers-pas { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.etapes-premiers-pas li { padding: 12px 14px; border-radius: 10px; background: #ffffff08; }
.etapes-premiers-pas li.en-cours { background: #5aa0ff18; outline: 1px solid #5aa0ff55; }
.etapes-premiers-pas li.a-venir { opacity: .7; }
.etapes-premiers-pas h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; color: inherit; font-size: 1.15rem; }
.etapes-premiers-pas .numero { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: #5aa0ff; color: #fff; font-size: .9em; flex: none; }
.etapes-premiers-pas li.faite .numero { background: #3fb950; }
.etapes-premiers-pas .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.etapes-premiers-pas .fait { color: #3fb950; font-weight: 600; }
.etapes-premiers-pas .facon { margin: 10px 0 4px; font-weight: 600; }
body.accueil .premiers-pas { margin: calc(var(--haut-barre, 58px) + 12px) 16px 0; position: relative; z-index: 1; }
body.accueil .premiers-pas + .message { margin-top: 8px; }
body.accueil .message + .premiers-pas { margin-top: 8px; }

/* Classement des astrophotographes */
.tableau.classement td { vertical-align: middle; }
.tableau.classement td.rang { text-align: center; font-weight: 600; }
.tableau.classement tr.moi { background: #5aa0ff18; }

/* Rappels avec la météo de la nuit */
.message.rappels p.rappel { margin: 4px 0; }
.message.rappels p.rappel + p.rappel { border-top: 1px solid #ffffff14; padding-top: 6px; }
.rappel-beau { font-size: 1.05em; }
.rappel-gris { opacity: .75; }
.meteo-rappel { font-size: .9em; color: var(--texte-doux, #aab3c2); }

/* Pastille « photographiable en ce moment » (astro.visibilite) */
.pastille-visibilite { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1;
  padding: .42em .65em .2em; border-radius: 999px; border: 1px solid currentColor; font-size: .8rem; }
/* Le texte est haut dans sa boîte (jambages descendants rares) : il est descendu par le rembourrage, le point
   remonté d'autant, pour que le texte, le point et l'ovale aient le même centre. */
.pastille-visibilite .point { transform: translateY(-.11em); }
.pastille-visibilite .point { width: .8em; height: .8em; border-radius: 50%; display: inline-block; flex: none;
  box-shadow: 0 0 0 2px #00000040; }
.pastille-visibilite.oui .point { background: #3fb950; box-shadow: 0 0 6px #3fb950aa; }
.pastille-visibilite.limite .point { background: #e3a008; }
.pastille-visibilite.hors .point { background: #8b93a1; }
.pastille-visibilite.jamais .point { background: transparent; border: 2px solid #8b93a1; }
.visibilite-fiche { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; }
.legende-visibilite .pastille-visibilite { vertical-align: middle; }
td.visibilite { white-space: nowrap; }
.pastille-visibilite .aide { line-height: 1; margin: 0; }
td.visibilite .pastille-visibilite { vertical-align: middle; }
a.lien-astrobin-liste { text-decoration: none; }
a.lien-astrobin-liste:hover { filter: brightness(1.3); }

/* Connexion : afficher le mot de passe */
.mot-de-passe { display: flex; gap: 6px; }
.mot-de-passe input { flex: 1; min-width: 0; }

/* Matériel : cases remplies d'après la fiche technique trouvée sur le web */
input.rempli-ia, select.rempli-ia { outline: 2px solid #5aa0ff88; }
.fiche-technique-etat:empty { display: none; }

/* Page d'accueil publique (vitrine) */
body.vitrine main { max-width: none; padding: 0; }
.vitrine-entete { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; position: absolute;
  inset: 0 0 auto 0; z-index: 2; }
.vitrine-logo { height: 54px; }
.vitrine-affiche { min-height: 78vh; display: flex; align-items: flex-end; padding: 120px 24px 56px;
  background: #0b0d16 center / cover no-repeat; }
.vitrine-accroche { max-width: 620px; }
.vitrine-accroche h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1; margin: 0 0 14px; }
.vitrine-accroche p { font-size: 1.15rem; color: #d7dce6; }
.vitrine-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 40px 24px;
  max-width: 1200px; margin: 0 auto; }
.vitrine-atouts article { background: #ffffff08; border-radius: 12px; padding: 18px; }
.vitrine-atouts h2 { margin-top: 0; font-size: 1.2rem; }
.vitrine-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 0 24px 40px;
  max-width: 1200px; margin: 0 auto; }
.vitrine-galerie figure { margin: 0; }
.vitrine-galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }
.vitrine-galerie figcaption { margin-top: 6px; font-size: .9rem; }
.vitrine-confiance { max-width: 800px; margin: 0 auto; padding: 10px 24px 60px; text-align: center; }
@media (max-width: 600px) {
  .vitrine-logo { height: 40px; }
  .vitrine-affiche { min-height: 70vh; padding: 100px 16px 32px; }
  .vitrine-atouts, .vitrine-galerie { padding-left: 16px; padding-right: 16px; }
}
.vitrine-legende { font-size: .85rem; color: #aab3c2; margin-top: 18px; }
.vitrine-contact { max-width: 760px; margin: 0 auto 30px; }
.vitrine-contact textarea { width: 100%; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body.vitrine main > .message { display: none; }  /* la vitrine montre ses messages dans le cadre « contact » */
.vitrine-fonctions { max-width: 1200px; margin: 0 auto; padding: 40px 24px 20px; }
.vitrine-titre-section { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 2rem; margin: 0 0 18px; }
.vitrine-familles { columns: 3 320px; column-gap: 18px; }
.vitrine-familles article { break-inside: avoid; background: #ffffff08; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; }
.vitrine-familles h3 { margin: 0 0 8px; font-size: 1.15rem; }
.vitrine-familles ul { margin: 0; padding-left: 1.1em; }
.vitrine-familles li { margin: 5px 0; line-height: 1.45; }
@media (max-width: 600px) { .vitrine-fonctions { padding: 28px 16px 10px; } }

/* FITS View : encart de la vitrine et page publique (/fits-view/, /en/fits-view/) */
.vitrine-fits-view { display: flex; align-items: center; gap: 18px; max-width: 1200px; margin: 0 auto 30px; padding: 18px 24px;
  background: #ffffff08; border-radius: 12px; }
.vitrine-fits-view h2 { margin: 0 0 4px; font-size: 1.2rem; }
.vitrine-fits-view p { margin: 0; color: #c9cfdb; }
.vitrine-fits-view div { flex: 1; }
body.fits-view .fits-view-entete { position: static; max-width: 1000px; margin: 0 auto; }
.fits-view-page { max-width: 1000px; margin: 0 auto; padding: 10px 24px 50px; }
.fits-view-presentation { display: flex; gap: 28px; align-items: flex-start; margin: 10px 0 34px; }
.fits-view-icone { width: 128px; height: 128px; flex: none; }
.fits-view-page h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1; margin: 0 0 12px; }
.fits-view-page h1 small { font-size: .5em; color: var(--discret); }
.fits-view-accroche { font-size: 1.15rem; color: #d7dce6; margin: 0 0 20px; }
.fits-view-telecharger { display: inline-flex; flex-direction: column; align-items: center; padding: 12px 26px; font-size: 1.1rem;
  font-weight: 600; border-radius: 10px; white-space: normal; text-align: center; }
.fits-view-telecharger span { font-size: .8rem; font-weight: 400; opacity: .85; }
.fits-view-nouveau { color: var(--accent); margin: -8px 0 18px; font-size: .95rem; }
.fits-view-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.fits-view-systemes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.fits-view-systemes h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--accent); }
.fits-view-exemples { display: grid; grid-template-columns: 1fr minmax(0, .36fr); gap: 14px; align-items: start; }
.fits-view-exemples figure { margin: 0; }
.fits-view-exemples img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--bord); display: block; }
.fits-view-exemples figcaption { margin-top: 6px; font-size: .85rem; color: var(--discret); }
.fits-view-etoiles { margin: 0 0 18px; }
.fits-view-etoiles img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--bord); display: block; }
.fits-view-etoiles figcaption { margin-top: 6px; font-size: .85rem; color: var(--discret); }
.fits-view-vignettes { margin-top: 18px; }
.fits-view-page h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.9rem; margin: 40px 0 14px; }
.fits-view-fonctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fits-view-fonctions div { background: #ffffff08; border-radius: 12px; padding: 14px 18px; }
.fits-view-fonctions h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--accent); }
.fits-view-fonctions p { margin: 0; color: #c9cfdb; }
.fits-view-etapes li { margin-bottom: 8px; }
.fits-view-formulaire { margin-top: 40px; scroll-margin-top: 20px; }
.fits-view-formulaire h2 { margin-top: 0; }
.fits-view-formulaire form { display: grid; gap: 12px; max-width: 520px; }
.fits-view-formulaire input[type=email] { width: 100%; }
.fits-view-case { display: flex; gap: 8px; align-items: flex-start; color: #c9cfdb; }
.fits-view-case input { margin-top: 4px; flex: none; }
.fits-view-formulaire button { justify-self: start; }
.fits-view-note { background: var(--carte); border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: 0 8px 8px 0;
  color: #c9cfdb; }
.fits-view-empreinte { word-break: break-all; font-size: .85rem; }
.fits-view-pied { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--bord); color: var(--discret); }
@media (max-width: 600px) {
  .vitrine-fits-view { flex-wrap: wrap; margin: 0 16px 24px; padding: 16px; }
  body.fits-view .fits-view-entete { padding: 14px 16px; }
  .fits-view-page { padding: 0 16px 40px; }
  .fits-view-presentation { flex-direction: column; gap: 14px; }
  .fits-view-icone { width: 88px; height: 88px; }
  .fits-view-exemples { grid-template-columns: 1fr; }
  .fits-view-exemples figure + figure img { max-height: 55vh; width: auto; max-width: 100%; margin: 0 auto; }
}

/* Ajout d'images par glisser-déposer (toute la fenêtre) ou par le bouton « Ajouter une image » */
.depot-voile { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; text-align: center;
  background: #0b0d16d9; border: 3px dashed #5aa0ff; font-size: 1.3rem; padding: 20px; }
.depot-voile.visible { display: grid; }
.depot-suivi { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: min(420px, calc(100vw - 32px));
  max-height: 50vh; overflow: auto; box-shadow: 0 8px 30px #0008; }
.depot-suivi ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: .9rem; }
.depot-suivi li.ok { color: #3fb950; }
.depot-suivi li.erreur { color: #f0883e; }
.depot-suivi li a { margin-left: 6px; }
label.bouton-ajout-image { cursor: pointer; }

/* Préparer une cible depuis une image qui plaît */
.depot-capture { border-left: 4px solid #5aa0ff; }
body.depot-actif .depot-capture { outline: 3px dashed #5aa0ff; }
.depot-materiel { border-left: 4px solid #5aa0ff; }
body.depot-actif .depot-materiel { outline: 3px dashed #5aa0ff; }
.choix-materiel { cursor: pointer; }
.choix-materiel:hover { background: #5aa0ff14; }
.choix-materiel .coche { visibility: hidden; color: #3fb950; font-weight: 700; }
.choix-materiel.choisie { background: #3fb95020; }
.choix-materiel.choisie .coche { visibility: visible; }
.a-cliquer { box-shadow: 0 0 0 4px #5aa0ff88; transition: box-shadow .3s; }
.niveau-temps { background: #5aa0ff14; border-radius: 8px; padding: 6px 10px; list-style: none; margin-left: -10px; }
.apercus-cadrage { margin-top: 14px; }
.deux-apercus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.deux-apercus figure { margin: 0; }
.deux-apercus img { width: 100%; border-radius: 8px; background: #05060c; min-height: 160px; display: block; }
.deux-apercus img.chargement { opacity: .35; }
.deux-apercus figcaption { font-size: .85rem; color: #aab3c2; margin-top: 4px; }
.lien-astrobin-capture { margin-top: 10px; }
.lien-astrobin-capture input { min-width: min(420px, 70vw); }
.cible-reconnue { font-size: 1.6rem; margin: 6px 0 8px; }
.ou-photographier ul { list-style: none; padding: 0; margin: 6px 0 12px; }
.ou-photographier li { margin: 4px 0; }

/* Mes images sur téléphone : vignette, visibilité, objet et date seulement (le reste est sur la fiche). */
.mes-images .date-courte { display: none; }
@media (max-width: 700px) {
  table.mes-images th:nth-child(4), table.mes-images td:nth-child(4), table.mes-images th:nth-child(5), table.mes-images td:nth-child(5),
  table.mes-images th:nth-child(6), table.mes-images td:nth-child(6), table.mes-images th:nth-child(n+8), table.mes-images td:nth-child(n+8),
  table.mes-images tfoot td:nth-child(n+2) { display: none; }
  .mes-images .date-longue { display: none; }
  .mes-images .date-courte { display: inline; white-space: nowrap; }
  table.mes-images td, table.mes-images th { padding-left: 6px; padding-right: 6px; }
  table.mes-images td:nth-child(3) { overflow-wrap: anywhere; }
}
/* Fiche : le détail de la visibilité passe à la ligne au lieu de dépasser. */
.visibilite-fiche .pastille-visibilite { white-space: normal; flex-wrap: wrap; }
/* Vidéo « voyage » : point visé sur l'image, lecteur vertical. */
.zone-video { position: relative; cursor: crosshair; user-select: none; }
.zone-video img { display: block; width: 100%; height: auto; }
.cible { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px #0008, inset 0 0 0 2px #0008; pointer-events: none; }
.cible::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff; border-radius: 50%; }
.video-voyage { display: block; max-width: 100%; max-height: 70vh; margin: 8px auto; background: #000; border-radius: 4px; }
.reglages-video { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.zoom-video { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.zoom-video input[type=range] { width: 100%; }

/* Visionneuse d'image (static/js/visionneuse.js) : fond noir, croix pour fermer */
.visionneuse { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }
body.visionneuse-ouverte { overflow: hidden; }
.visionneuse-cadre { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.visionneuse-cadre img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.visionneuse.reelle .visionneuse-cadre { display: block; overflow: auto; cursor: grab; }
.visionneuse.reelle .visionneuse-cadre img { max-width: none; max-height: none; cursor: zoom-out; }
.visionneuse-fermer { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 14px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.visionneuse-fermer:hover, .visionneuse-fermer:focus-visible { background: rgba(255,255,255,.18); outline: none; }
.visionneuse-original { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); left: 16px; z-index: 2; color: rgba(255,255,255,.75); font-size: .85rem; }
.visionneuse-aide { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; pointer-events: none; }

/* Articles (onglet Articles) */
.liste-articles { display: grid; gap: 1rem; }
.carte-article { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit; }
.carte-article img { width: 180px; max-width: 35%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.carte-article h2 { margin: 0 0 .2rem; }
.article-page { max-width: 760px; margin: 0 auto; }
.article-page h1 { text-wrap: balance; margin-bottom: .2rem; }
.chapeau-article { font-size: 1.15rem; color: var(--texte-doux, inherit); }
.image-article img { width: 100%; border-radius: 10px; }
.texte-article { line-height: 1.65; font-size: 1.05rem; }
.texte-article img { max-width: 100%; border-radius: 8px; }
.texte-article pre { overflow-x: auto; padding: .8rem; border-radius: 8px; background: rgba(127,127,127,.12); }
.formulaire-article textarea, .formulaire-article input[name=titre] { width: 100%; }
.texte-markdown { font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.etiquette-article { padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; border: 1px solid currentColor; }
.etiquette-article.public { color: #3fa66a; }
@media (max-width: 600px) { .carte-article { flex-direction: column; } .carte-article img { width: 100%; max-width: none; } }