/* heclium.astronomie.science : feuille de style unique.
   Le ciel (noir étoilé) encadre la page : en-tête et pied ; la lecture se fait sur fond clair. */

/* Polices hébergées sur le site (licence SIL OFL : u/f/OFL-*.txt) */
@font-face {font-family:Inter;font-weight:400;font-display:swap;src:url(../f/inter-latin-400-normal.woff2) format("woff2");}
@font-face {font-family:Inter;font-weight:500;font-display:swap;src:url(../f/inter-latin-500-normal.woff2) format("woff2");}
@font-face {font-family:Outfit;font-weight:500;font-display:swap;src:url(../f/outfit-latin-500-normal.woff2) format("woff2");}
@font-face {font-family:Outfit;font-weight:600;font-display:swap;src:url(../f/outfit-latin-600-normal.woff2) format("woff2");}

:root
{
	--ciel: #05070d;
	--ciel-texte: #dfe3ec;
	--ciel-pale: #8b93a5;
	--fond: #f4f5f8;
	--carte: #fff;
	--encre: #1b2030;
	--pale: #62697a;
	--filet: #e3e6ec;
	--orange: #f26b1d;
	--orange-texte: #c9540f;
	--titres: Outfit, sans-serif;
}

* {box-sizing:border-box;}
body {margin:0;background:var(--fond);color:var(--encre);font-family:Inter,sans-serif;font-size:16px;line-height:1.65;min-width:320px;}
a {color:var(--orange-texte);}
a:hover {color:var(--orange);}
img, video {max-width:100%;height:auto;}
.col {max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- En-tête et menu ---------- */

#header {background:var(--ciel);}
.entete {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px;}
.marque {display:flex;align-items:center;gap:10px;font-family:var(--titres);font-size:22px;font-weight:600;color:#fff;text-decoration:none;}
.marque:hover {color:#fff;}
.menu {display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:4px;background:rgba(5,7,13,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:10px;backdrop-filter:blur(6px);}
.menu a {display:block;padding:7px 14px;color:var(--ciel-texte);font-size:15px;text-decoration:none;border-radius:6px;}
.menu a:hover {color:#fff;background:rgba(255,255,255,0.08);}
.menu a[aria-current] {color:#fff;background:rgba(242,107,29,0.25);}

/* ---------- Pages : une colonne de lecture ---------- */

article {max-width:860px;margin:32px auto;padding:12px 40px 28px;background:var(--carte);border-radius:12px;box-shadow:0 2px 10px rgba(10,13,22,0.06);}
h1, h2, h3 {font-family:var(--titres);line-height:1.25;margin:0;}
h1 {font-size:32px;font-weight:600;padding:18px 0 12px;}
h2 {font-size:23px;font-weight:600;padding:26px 0 6px;}
h3 {font-size:18px;font-weight:600;padding:16px 0 2px;}
p {margin:0 0 14px;}
ul, ol {margin:0 0 14px;padding-left:24px;}
li {padding:2px 0;}
li > ul, li > ol {margin:0;}
kbd {font-family:inherit;font-size:0.85em;padding:1px 6px;border:1px solid var(--filet);border-bottom-width:2px;border-radius:4px;background:#fff;}
code, .source {font-family:Consolas,'Courier New',monospace;font-size:0.9em;background:var(--fond);border-radius:4px;}
code {padding:1px 5px;}
.source {padding:10px 14px;margin:0 0 14px;overflow-x:auto;}
.source p {margin:0;}
table {border-collapse:collapse;}
th, td {border:1px solid var(--filet);padding:8px 12px;vertical-align:top;text-align:left;}
th {background:var(--fond);font-weight:600;}
.center, .movie {text-align:center;}
.chapeau {color:var(--pale);font-size:17px;}
.discret {color:var(--pale);font-size:14.5px;}

/* Article : date, titre, sous-titre, retour à la liste */
.date {margin:18px 0 0;color:var(--orange-texte);font-weight:500;font-size:14.5px;}
.date + h1 {padding-top:2px;}
.sous-titre {margin:-4px 0 18px;color:var(--pale);font-size:18px;}
.suite {margin:34px 0 0;padding-top:16px;border-top:1px solid var(--filet);}
.suite a {text-decoration:none;font-weight:500;}

/* Captures légendées */
figure {margin:0;}
figure.capture {display:inline-block;vertical-align:top;max-width:384px;margin:10px 8px 18px;}
figure.capture img, .illustration img {display:block;border-radius:8px;box-shadow:0 2px 8px rgba(10,13,22,0.15);}
figure.capture figcaption, .illustration figcaption {margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--pale);}

/* Boutons */
.bouton {display:inline-block;padding:13px 26px;border-radius:8px;background:var(--orange);color:#fff;font-weight:500;text-decoration:none;border:0;font:inherit;font-weight:500;cursor:pointer;}
.bouton:hover {background:#ff7d33;color:#fff;}

/* Formulaires */
label {display:block;margin:12px 0 4px;font-weight:500;}
input, textarea {width:100%;max-width:520px;padding:9px 10px;font:inherit;border:1px solid var(--filet);border-radius:6px;background:#fff;}
input:focus, textarea:focus {outline:2px solid rgba(242,107,29,0.35);border-color:var(--orange);}
.piege {position:absolute;left:-9999px;}

/* Encadré (détails techniques, conseils) */
details, .encadre {margin:22px 0 0;padding:12px 16px;background:var(--fond);border-radius:8px;font-size:15px;}
details summary {cursor:pointer;color:var(--pale);}
details p {margin:8px 0 0;}

/* Liste des articles */
.articles {list-style:none;padding:0;margin:10px 0 0;}
.articles li {padding:0;border-top:1px solid var(--filet);}
.articles a {display:flex;gap:18px;align-items:center;padding:16px 0;color:var(--encre);text-decoration:none;}
.articles img {flex:0 0 160px;width:160px;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:var(--fond);}
.articles time {display:block;font-size:13.5px;color:var(--orange-texte);font-weight:500;}
.articles b {display:block;font-family:var(--titres);font-weight:600;font-size:18px;line-height:1.3;}
.articles span {display:block;color:var(--pale);font-size:14.5px;}
.articles a:hover b {color:var(--orange-texte);}

/* Feuille de route : une ligne par évolution, avec son état */
.route {list-style:none;padding:0;}
.route li {padding:12px 0 12px 130px;position:relative;border-top:1px solid var(--filet);color:var(--pale);}
.route b {display:block;color:var(--encre);font-family:var(--titres);font-weight:600;font-size:17px;}
.etat {position:absolute;left:0;top:14px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--fond);color:var(--pale);}
.etat.prepa {background:rgba(242,107,29,0.14);color:var(--orange-texte);}
.etat.fait {background:#e6f4ea;color:#1e7a3c;}

/* Page « Le logiciel » : une fonction par ligne, image et texte alternés */
.fonction {display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:26px 0;border-top:1px solid var(--filet);}
.fonction:nth-of-type(even) .illustration {order:2;}
.fonction h2 {padding-top:0;}
.fonction p:last-child {margin-bottom:0;}

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

.pied {background:var(--ciel);color:var(--ciel-pale);font-size:14px;padding:30px 0 36px;}
.pied .col {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.pied a {color:var(--ciel-texte);margin-left:18px;text-decoration:none;}
.pied a:hover {color:#fff;}

/* ---------- Accueil ---------- */

.accueil #header {background:var(--ciel) url(../../illu/accueil/ouverture.jpg) right center/auto 100% no-repeat;position:relative;}
.accueil #header::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ciel) 30%,rgba(5,7,13,0.3) 55%,rgba(5,7,13,0) 70%);}
.accueil #header > * {position:relative;}
.accueil .entete {border-bottom:1px solid rgba(255,255,255,0.08);}
.ouverture {padding-top:70px;padding-bottom:80px;color:var(--ciel-texte);}
.ouverture h1 {font-size:52px;font-weight:500;line-height:1.08;color:#fff;max-width:500px;padding:0;margin:0 0 16px;}
.ouverture p {font-size:18px;color:#b9c0cf;max-width:480px;margin:0 0 28px;}
.ouverture .lien {margin-left:18px;color:#fff;text-decoration:none;}
.ouverture .detail {font-size:13.5px;color:var(--ciel-pale);margin-top:14px;}

.accueil article {max-width:1080px;margin:0 auto;padding:0 24px;background:none;box-shadow:none;border-radius:0;}
.atouts {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-40px;position:relative;z-index:1;}
.atout {background:var(--carte);border-radius:12px;padding:24px;box-shadow:0 6px 24px rgba(10,13,22,0.08);}
.atout h2 {font-size:19px;padding:0 0 6px;}
.atout h2::before {content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:10px;vertical-align:2px;box-shadow:0 0 0 4px rgba(242,107,29,0.18);}
.atout p {margin:0;color:var(--pale);font-size:15px;}

.rubrique {padding:58px 0 64px;}
.rubrique > h2 {font-size:30px;padding:0 0 6px;}

.galerie {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
.galerie figure {position:relative;border-radius:12px;overflow:hidden;background:var(--ciel);box-shadow:0 2px 10px rgba(10,13,22,0.08);}
.galerie figure:first-child {grid-column:span 2;grid-row:span 2;}
.galerie a {display:block;height:100%;}
.galerie img {display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s;}
.galerie figure:hover img {transform:scale(1.03);}
.galerie figcaption {position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;background:linear-gradient(0deg,rgba(5,7,13,0.88),rgba(5,7,13,0));color:#e6e9f0;font-size:14px;line-height:1.4;pointer-events:none;}
.galerie figcaption b {display:block;font-family:var(--titres);font-weight:600;font-size:15px;color:#fff;}
.galerie figure:first-child figcaption {font-size:15.5px;padding:60px 22px 18px;}
.galerie figure:first-child figcaption b {font-size:20px;}

.bandeau {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:40px;padding:18px 22px;background:var(--carte);border-radius:12px;color:var(--pale);}
.bandeau a {font-weight:500;text-decoration:none;}

/* Rubriques d'appel en fin de page (Le logiciel, Feuille de route) */
.appels {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:34px;}
.appel {padding:22px 24px;border-radius:12px;background:var(--fond);border:1px solid var(--filet);}
.appel h2 {padding:0 0 6px;font-size:21px;}
.appel p {color:var(--pale);}
.appel > a:not(.bouton) {font-weight:500;text-decoration:none;}
.appel.sombre {background:var(--ciel) url(../../illu/accueil/ouverture.jpg) right center/auto 100% no-repeat;border-color:var(--ciel);color:#fff;position:relative;overflow:hidden;}
.appel.sombre::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ciel) 45%,rgba(5,7,13,0.55));}
.appel.sombre > * {position:relative;}
.appel.sombre p {color:#b9c0cf;}

/* ---------- Téléphone ---------- */

@media (max-width:760px)
{
	.col {padding:0 16px;}
	.entete {flex-direction:column;align-items:flex-start;padding-top:12px;padding-bottom:10px;}
	.menu a {padding:6px 10px;font-size:14px;}
	article {margin:0;padding:4px 16px 20px;border-radius:0;box-shadow:none;}
	h1 {font-size:26px;}
	h2 {font-size:20px;}
	figure.capture {margin:10px 0 16px;}
	.articles img {flex-basis:96px;width:96px;}
	.fonction {grid-template-columns:1fr;gap:14px;}
	.route li {padding-left:0;}
	.etat {position:static;display:inline-block;margin-bottom:4px;}
	.fonction:nth-of-type(even) .illustration {order:0;}

	.accueil #header {background-size:auto 55%;background-position:right bottom;}
	.accueil #header::before {background:linear-gradient(0deg,rgba(5,7,13,0.1) 0%,var(--ciel) 55%);}
	.ouverture {padding-top:36px;padding-bottom:150px;}
	.ouverture h1 {font-size:36px;}
	.ouverture .lien {display:block;margin:16px 0 0;}
	.ouverture .detail {color:#d0d5df;text-shadow:0 1px 3px #000;}
	.accueil article {padding:0 16px;}
	.atouts, .galerie {grid-template-columns:1fr;}
	.galerie figure:first-child {grid-column:auto;grid-row:auto;}
	.galerie figure:first-child figcaption {font-size:14px;padding:34px 16px 12px;}
	.galerie figure:first-child figcaption b {font-size:15px;}
}

/* ---------- Visionneuse d'images (u/j/lightbox.js) ---------- */


dialog.lightbox {
	border: none;
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	background: rgba(20, 20, 20, 0.94);
	color: rgb(230, 230, 230);
	overflow: hidden;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }

/* Pas de défilement de l'article sous la visionneuse */
html.lightbox-open { overflow: hidden; }

.lightbox-figure {
	margin: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 52px 72px 24px 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.lightbox-img {
	display: block;
	max-width: 100%;
	max-height: calc(100% - 5em);
	object-fit: contain;
	background: black;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
	margin-top: 12px;
	max-width: 900px;
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.4;
	text-align: center;
	color: rgb(220, 220, 220);
}

/* Barre du haut : numéro de l'image et lien vers la taille réelle */
.lightbox-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 64px;
	padding: 14px 18px;
	font-size: 14px;
	display: flex;
	gap: 20px;
	align-items: center;
}
.lightbox-full { color: rgb(255, 203, 96); text-decoration: none; }
.lightbox-full:hover { text-decoration: underline; }

/* Boutons : fermeture en haut à droite, précédente/suivante sur les côtés */
.lightbox-close, .lightbox-prev, .lightbox-next {
	position: fixed;
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 22px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	color: white;
	background: rgba(255, 255, 255, 0.14);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
	background: rgba(255, 203, 96, 0.85);
	color: black;
	outline: none;
}
.lightbox-close { top: 8px; right: 10px; }
.lightbox-prev, .lightbox-next { top: 50%; margin-top: -22px; font-size: 32px; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* Petits écrans : l'image prend toute la largeur, les flèches passent en bas */
@media screen and (max-width: 640px) {
	.lightbox-figure { padding: 52px 8px 64px 8px; }
	.lightbox-prev, .lightbox-next { top: auto; bottom: 10px; margin-top: 0; }
	.lightbox-caption { font-size: 13px; }
}