/* ================================
   THEME & BASE
   ================================ */

/* Variables (mode normal) */
:root{
  --bg:#0e0e1a;
  --text:#f0f0f0;
  --muted:#cfd4e0;           /* figcaption & textes secondaires */
  --accent:#90caf9;

  --panel:rgba(255,255,255,0.05);
  --panel-hover:rgba(255,255,255,0.08);
  --ring:#7bdcff;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* Mode nuit (rouge/noir) : on change uniquement les variables */
body.night-mode{
  --bg:#000;
  --text:#ff3c3c;
  --muted:#ff8585;
  --accent:#ff5555;

  --panel:rgba(255,0,0,0.06);
  --panel-hover:rgba(255,0,0,0.10);
  --ring:#ff5555;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #152039 0%, var(--bg) 60%, #070910 100%);
  color:var(--text);
  line-height:1.7;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ================================
   HEADER & LOGOS
   ================================ */

header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(11,14,35,0.95), rgba(11,14,35,0.65), transparent);
  backdrop-filter:blur(6px);
  padding:1em 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.header-container{
  max-width:1200px; margin:0 auto; padding:1rem 2rem;
  display:grid; grid-template-columns:200px 1fr 200px; gap:40px; align-items:center;
}
.header-container h1{
  margin:0; text-align:center;
  font-size:clamp(1.4rem, 2.2vw + 1rem, 2.2rem);
  letter-spacing:.3px;
}

.logo-wrapper.right,
.logo-wrapper.left{ display:flex; align-items:center; justify-content:center; }

.logo{ width:auto; height:auto; object-fit:contain; }
.logo-spica{ max-height:85px; content:url("../images/logos/spica_logo_transparent.png");
 border-radius: 18px; /* arrondit les coins */
  overflow: hidden;    /* masque ce qui dépasse */ }
body.night-mode .logo-spica{ content:url("../images/logos/spica_logo_nuit.png"); }
.logo-iejn{ max-height:85px; }
body.night-mode .logo-iejn{
  filter:brightness(0) saturate(100%) invert(17%) sepia(95%) saturate(7480%) hue-rotate(0deg) brightness(93%) contrast(119%);
}

/* ================================
   NAVIGATION
   ================================ */

nav ul{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  list-style:none; margin:0; padding:0 1rem 1rem;
}
nav a{
  color:var(--text); text-decoration:none;
  padding:.55rem .9rem; border-radius:999px;
  background:var(--panel);
  transition:background .2s, transform .1s;
}
nav a:hover{ background:var(--panel-hover); transform:translateY(-1px); }
nav a:focus, nav a:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }
nav a.active[aria-current="page"]{ box-shadow:0 0 0 2px var(--panel-hover) inset; }

/* ================================
   BOUTON MODE NUIT
   ================================ */

.toggle-night-mode{ position:absolute; right:1rem; top:1rem; }
#nightModeBtn{
  background:var(--panel); color:var(--text);
  border:1px solid rgba(255,255,255,0.15);
  padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
#nightModeBtn:hover{ background:var(--panel-hover); border-color:rgba(255,255,255,0.25); }
#nightModeBtn:focus, #nightModeBtn:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }

/* ================================
   CONTENU & SECTIONS
   ================================ */

main{ max-width:90ch; margin:0 auto; padding:3rem 2rem 4rem; }
@media (min-width:1200px){ main{ max-width:96ch; } }

section{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow), 0 1px 0 rgba(255,255,255,0.04) inset;
  padding:1.5rem 1.25rem; margin:1.25rem 0;
}
section:hover{ border-color:rgba(255,255,255,0.14); }

h2{
  color:var(--accent);
  font-size:clamp(1.25rem, 1.2vw + 1rem, 1.8rem);
  margin:0 0 .75rem 0; letter-spacing:.3px;
}

/* Liens */
a{ color:var(--accent); }
main a{ text-decoration:underline; text-underline-offset:2px; }
main a:hover{ text-decoration-thickness:2px; }

/* Fil d’Ariane (désactive soulignement/pointeillé) */
.fil-ariane a,
.fil-ariane a:link,
.fil-ariane a:visited,
.fil-ariane a:hover,
.fil-ariane a:focus{
  text-decoration:none !important;
  border:0 !important;
}

/* Paragraphes */
section p{ color:var(--text); }

/* ================================
   GRILLES INTRO & ACTIVITÉS
   ================================ */

.intro, .activites{ display:grid; gap:1.5rem; }
.intro > h2, .activites > h2, .projets > h2{ grid-column:1 / -1; }

@media (min-width:900px){
  .intro, .activites{
    grid-template-columns:1fr 380px; align-items:center;
  }
  .intro-text{ grid-column:1; }
  .intro .illustration{ grid-column:2; }
  .activites .illustration{ grid-column:1; }
  .activites-text{ grid-column:2; }
}

/* ================================
   ILLUSTRATIONS & VARIANTES
   ================================ */

.illustration{
  margin:0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.illustration img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  transition:transform .3s ease;
}
.illustration:hover img{ transform:scale(1.02); }
.illustration figcaption{
  padding:.6rem .9rem; font-size:.95rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.06);
}

/* Recadrage sur le haut (au cas par cas) */
.illustration img.focus-top{
  object-fit:cover; object-position:top; aspect-ratio:4/3;
}

/* Logos & petites images (arrondis, sans bandes) */
.illustration.logo{
  border-radius:12px; overflow:hidden;
  display:inline-block;
  border:1px solid rgba(255,255,255,0.15);
  max-width:220px;
}
.illustration.logo img{ width:100%; height:auto; object-fit:cover; }

/* Figures centrées dans une page projet */
.projet-detail > .illustration{ display:block; margin:.75rem auto; }

/* Figures multiples dans un bloc : aligner & centrer */
.projet-detail .bloc{ text-align:center; }
.projet-detail .bloc > .illustration{
  display:inline-block; vertical-align:top; margin:.5rem;
}
.projet-detail .bloc > .illustration.logo{ max-width:280px; }

/* Texte des blocs à gauche */
.projet-detail .bloc h2,
.projet-detail .bloc p,
.projet-detail .bloc ul,
.projet-detail .bloc li{ text-align:left; }

/* Image large (panoramique, sans rognage) */
.illustration.full{ border-radius:14px; overflow:hidden; }
.illustration.full img{
  width:100%; height:auto; aspect-ratio:auto; object-fit:contain; display:block;
}

/* Variante : pas de recadrage forcé pour une figure précise */
.illustration.no-crop img{
  width:100%; height:auto; aspect-ratio:auto; object-fit:contain; background:#000;
}

/* ================================
   VIDEO : grilles & variantes
   ================================ */

.video-grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
  justify-items:center; align-items:start;
}
.video-embed{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  width:min(100%, 800px); aspect-ratio:16/9;
}
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* Vidéo native (ex. <video>) sans recadrage forcé */
.video-embed.no-crop{ aspect-ratio:auto; }
.video-embed video{
  width:100%; height:auto; display:block; object-fit:contain; background:#000;
}

/* Disposer vidéo + image côte à côte si possible */
.illustrations-ligne{
  display:flex; gap:1rem; flex-wrap:wrap;
  justify-content:center; align-items:flex-start;
}
.illustrations-ligne .video-embed,
.illustrations-ligne .illustration{
  flex:1 1 420px; max-width:800px;
}

/* ================================
   LISTE DES ACTIVITÉS (icônes)
   ================================ */

.activites p{ margin-bottom:.5rem; }
.activites ul{ list-style:none; padding:0; margin:.25rem 0 0 0; display:grid; gap:.5rem; }
.activites li{ position:relative; padding-left:1.6rem; line-height:1.6; }
.activites li::before{
  content:"•"; position:absolute; left:0; top:0; transform:translateY(2px); opacity:.9;
}
.activites li.talks::before{ content:"🎙️"; }
.activites li.obs::before{ content:"🔭"; }
.activites li.meet::before{ content:"🧑‍🚀"; }
.activites li.visits::before{ content:"🌌"; }
.activites li.projects::before{ content:"🛰️"; }
.activites li.library::before{ content:"📚"; }

/* ================================
   FORMULAIRE
   ================================ */

form input, form textarea, form select{
  font-family:inherit; font-size:1em;
  padding:8px; border-radius:4px; border:1px solid #ccc;
  background:#fff; color:#000; width:100%; margin-bottom:1em;
}
form button[type="submit"]{
  background:#121229; color:#f0f0f0; border:1px solid var(--accent);
  cursor:pointer; transition:background-color .3s ease;
  padding:.5em 1em; width:auto;
}
/* Mode nuit formulaire */
body.night-mode form input,
body.night-mode form textarea,
body.night-mode form select{ background:#111; color:var(--text); border:1px solid #552222; }
body.night-mode form button[type="submit"]{ background:#111; color:var(--text); border:1px solid var(--accent); }

/* ================================
   FOCUS VISIBLE (a11y)
   ================================ */

a,button{ outline:none; }
a:focus,a:focus-visible,
button:focus,button:focus-visible,
[role="button"]:focus,[role="button"]:focus-visible{
  outline:2px solid var(--ring); outline-offset:3px; border-radius:8px;
}

/* ================================
   FOOTER
   ================================ */

footer{
  max-width:1100px; margin:2rem auto 3rem; padding:0 1.5rem;
  color:var(--muted); font-size:.95rem; text-align:center;
}

/* ================================
   ACTUALITÉS : icônes
   ================================ */

.actualites li{ position:relative; padding-left:2rem; line-height:1.6; }
.actualites li::before{ position:absolute; left:0; top:0; transform:translateY(2px); font-size:1.2rem; }
.actualites li.pleine-lune::before{ content:"🌕"; }
.actualites li.nouvelle-lune::before{ content:"🌑"; }
.actualites li.croissant::before{ content:"🌙"; }
.actualites li.gibbeuse::before{ content:"🌔"; }
.actualites li.mercure::before{ content:"⚪"; }
.actualites li.venus::before{ content:"♀️"; }
.actualites li.mars::before{ content:"🔴"; }
.actualites li.jupiter::before{ content:"🟠"; }
.actualites li.saturne::before{ content:"🪐"; }
.actualites li.neptune::before{ content:"🔵"; }
.actualites li.uranus::before{ content:"🟢"; }
.actualites li.ceres::before{ content:"🟤"; }
.actualites li.meteor::before{ content:"☄️"; }
.actualites li.voie-lactee::before{ content:"🌌"; }
.actualites li.eclipse::before{ content:"🌒"; }
.actualites li.solstice::before{ content:"❄️"; }
.actualites li.equinoxe::before{ content:"🍂"; }
.actualites li.heure-hiver::before{ content:"⏰"; }
.actualites li.conference::before{ content:"🗣️"; }
.actualites li.observation::before{ content:"🔭"; }
.actualites li.musee::before{ content:"🏛️"; }

/* ================================
   PROJETS : cartes
   ================================ */

.projets-cartes .projets-grid{ display:grid; gap:1rem; }
@media (min-width:780px){ .projets-cartes .projets-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .projets-cartes .projets-grid{ grid-template-columns:1fr 1fr 1fr; } }

.carte-projet{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:1rem;
  box-shadow:var(--shadow);
  transition:border-color .2s, transform .1s;
}
.carte-projet:hover{ border-color:rgba(255,255,255,0.14); transform:translateY(-2px); }
.carte-projet h3{ margin:0 0 .4rem 0; font-size:1.05rem; letter-spacing:.2px; }
.projets-note{ margin-top:1rem; color:var(--muted); }

/* Transforme toute la carte en lien cliquable */
.carte-lien{
  display:block; text-decoration:none; color:inherit;
  transition:transform .1s, border-color .2s, box-shadow .2s;
  border-radius:14px;
}
.carte-lien:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.16);
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
.carte-lien:focus, .carte-lien:focus-visible{
  outline:2px solid var(--ring); outline-offset:3px; border-radius:14px;
}

/* ================================
   RESPONSIVE FINESSES
   ================================ */

@media (max-width:720px){
  .header-container{ grid-template-columns:auto 1fr auto; }
  .logo-spica{ max-height:70px; }
  .logo-iejn{ max-height:85px; }
  nav ul{ gap:.5rem; }
  section{ padding:1.25rem 1rem; }
}

/* Mise en évidence inline (option) */
.highlight{
  background:rgba(255,255,255,0.08);
  padding:.15em .3em; border-radius:6px;
  font-weight:600; color:var(--accent);
}

/* === PRESSE SOLARIS === */
.presse-solaris {
    margin-top: 40px;
    padding: 20px;
    background-color: #1a1a2e;
    border-radius: 8px;
}

.presse-solaris h2 {
    color: #bbdefb;
}

.article-presse {
    text-align: center;
    margin-top: 15px;
}

.apercu-article {
    max-width: 100%;
    height: auto;
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease;
}

.apercu-article:hover {
    transform: scale(1.02);
}


/* ================================
   DÉCALAGE ANCRES AVEC HEADER STICKY
   ================================ */

/* Chrome / Edge / Safari moderne → scroll-margin-top fonctionne */
[id] {
  scroll-margin-top: 110px;
}

/* Fallback universel → utilisé par Safari iOS et Firefox
   (pseudo-élément invisible qui décale la cible) */
:where(h1,h2,h3,h4,h5,h6,section,div,article,aside,nav)[id]::before {
  content: "";
  display: block;
  height: 110px;       /* hauteur du header */
  margin-top: -110px;  /* valeur négative identique */
  visibility: hidden;
  pointer-events: none;
}

/* Défilement fluide (esthétique) */
html {
  scroll-behavior: smooth;
}