:root {
    --base: clamp(14px, 3vw, 18px);
    --h1: clamp(28px, 5vw, 48px);
    --h2: clamp(20px, 3vw, 32px);
    --h3: clamp(16px, 2.5vw, 24px);
    --h4: clamp(14px, 2vw, 20px);
}

/* -------------------- GLOBAL -------------------- */
.SG {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 30px) clamp(40px, 10vw, 100px);
    box-sizing: border-box;
}

/* -------------------- HEADER -------------------- */
.header-img.SG {
  background-image: url("../Image/Imagesactivites/fondarriereplan.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: clamp(240px, 45vw, 520px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}


.header-img.SG::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.35));
    z-index: 0;
}

.header-img.SG h1 {
    position: relative;
    z-index: 1;
    color: #fff;
    margin: 0;
    font-size: var(--h1);
    text-shadow: 0 0 10px black;
}

/* -------------------- INTRO -------------------- */
.intro.SG {
    padding: 50px 50px;
}

/* -------------------- RESERVATION (FORM + IMAGE) -------------------- */
.reservation.SG {
    display: flex;
    gap: 30px;
    padding: 20px 20px;
    justify-content: space-between;
    align-items: stretch;
    min-height: auto;
}

.form-SG select option,
.form-SG select optgroup {
    color: #ffffff;
    background-color: #000000;
}

.form-container.SG {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    box-sizing: border-box;
}

.form-container.SG h2 {
    margin-left: 0;
    margin-bottom: 24px;
    font-size: var(--h2);
}

.form-SG {
    width: 100%;
    margin: 0px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(255,255,255,0.01);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid rgba(245,252,20,0.1);
}

.form-SG label {
    display: block;
    font-size: 0.95rem;
    color: #e8e8e8;
    font-weight: 500;
}

.form-SG input,
.form-SG select {
    width: 100%;
    padding: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(245,252,20,0.2);
    border-radius: 6px;
    color: #fff;
    margin-top: 6px;
    box-sizing: border-box;
    transition: all 0.25s ease;
    font-size: inherit;
}

.form-SG input::placeholder {
    color: rgba(255,255,255,0.4);
}

.form-SG input:focus,
.form-SG select:focus {
    outline: none;
    background: rgba(255,255,255,0.1);
    border-color: #f5fc14;
    box-shadow: 0 0 12px rgba(245,252,20,0.15);
}

.form-SG .btn-primary,
.btn-primary {
    padding: 14px 24px;
    background: #f5fc14;
    border: none;
    color: #000;
    cursor: pointer;
    font-weight: 700;
    border-radius: 6px;
    margin-top: 10px;
    transition: all 0.25s ease;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(245,252,20,0.25);
}

.form-SG .btn-primary:hover,
.btn-primary:hover {
    background: #f5fc14;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(245,252,20,0.35);
}

.img-container.SG {
    flex: 1 1 100%;
    display: flex;
    height: 100%;
    border-radius: 8px;
    min-height: 400px;
    object-fit: contain;
    margin: auto;
}

.img-container.SG img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
    align-items: center;
    justify-content: center;
}

.img-container.SG img:hover {
    transform: scale(1.03);
}

.tarifs {
    background: linear-gradient(135deg, rgba(245,252,20,0.08) 0%, rgba(245,252,20,0.04) 100%);
    border-left: 4px solid #f5fc14;
    padding: 18px 20px;
    margin: 18px 0 26px 0;
    font-weight: 700;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(245,252,20,0.1);
}

/* -------------------- DESCRIPTION -------------------- */
.description.SG {
    padding: 50px 50px;
}

.description.SG p {
    margin-bottom: 20px;
}

/* -------------------- GALERIE -------------------- */
.galerie.SG {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(30px, 4vw, 40px) 0;
    text-align: center;
    flex-wrap: wrap;
}

.carte.SG {
    flex: 0 0 calc(33.333% - clamp(20px, 3vw, 40px));
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.carte.SG:hover {
    box-shadow: 0 10px 30px rgba(245,252,20,0.15);
    transform: translateY(-4px);
}

.carte.SG img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
    min-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}


.carte.SG img:hover {
    transform: scale(1.05);
}

.carte.SG h3 {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: var(--h3);
    font-weight: bold;
    color: #f5f5f5;
}

/* -------------------- CONFERENCES -------------------- */
.conference.SG {
    padding: 50px 50px;
    line-height: 1.6;
    text-align: left;
}

.conference.SG h4 {
    font-size: var(--h4);
    margin-bottom: 20px;
    font-weight: bold;
}

.conferences-title,
.conferences-text {
    text-align: center;
}

.conferences-text {
    max-width: 800px;
    margin: 10px auto 0;
}

.conferences-youtube {
    display: flex;
    justify-content: center;
    margin: 16px auto 32px;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 900px) {
    .SG {
        padding: clamp(12px, 2vw, 24px) clamp(30px, 5vw, 60px);
    }
    body {
        font-size: clamp(13px, 2.5vw, 16px);
    }
    .reservation.SG {
        flex-direction: column;
        gap: 30px;
        padding: clamp(12px, 2vw, 24px) clamp(30px, 5vw, 60px);
    }
    .form-container.SG, .img-container.SG {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .SG {
        padding: clamp(12px, 2vw, 24px) clamp(25px, 5vw, 50px);
    }
    .reservation.SG {
        gap: 16px;
        padding: clamp(12px, 2vw, 24px) clamp(25px, 5vw, 50px);
    }
    .galerie.SG {
        flex-direction: column;
        align-items: center;
        gap: clamp(16px, 2vw, 30px);
    }
    .carte.SG {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .SG {
        padding: clamp(10px, 2vw, 16px) clamp(24px, 6vw, 40px);
    }
    body {
        font-size: clamp(12px, 3vw, 15px);
    }
    .intro.SG, .description.SG, .conference.SG, .reservation.SG {
        padding: clamp(10px, 2vw, 16px) clamp(24px, 6vw, 40px);
    }
    .galerie.SG {
        gap: 20px;
        padding: clamp(10px, 2vw, 16px) clamp(24px, 6vw, 40px);
    }
}

/* Ajustement responsive du formulaire */
@media (max-width: 900px) {
    .form-SG {
        padding: clamp(16px, 4vw, 24px);
    }
}

@media (max-width: 480px) {
    .form-SG {
        padding: 50px
    }
}

/* ===============================
   SECTION OBSERVATION — AMÉLIORÉE
=================================*/

.observation.SG {
    display: flex;
    gap: clamp(24px, 3vw, 48px);
    justify-content: space-between;
    align-items: center;
    padding: clamp(30px, 4vw, 60px);
    box-sizing: border-box;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
.maquette {
    height: auto;
    width: 100%;
    }


    /* ------- Image ------- */
.obs-image.SG {
    flex: 1 1 45%;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    transform: translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.obs-image.SG img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.obs-image.SG:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}

/* ------- Texte ------- */
.obs-texte.SG {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    color: #e6e6e6;
}

.obs-texte.SG h2 {
    font-size: var(--h2);
    margin-bottom: 18px;
    font-weight: 700;
    color: #f5f5f5;
    line-height: 1.25;
}

.obs-texte.SG p {
    margin-bottom: 16px;
    line-height: 1.65;
    font-size: calc(var(--base) * 0.95);
}

/* ------- CTA (Au besoin) ------- */
.obs-cta {
    margin-top: 20px;
}

.obs-cta .btn-primary {
    padding: 14px 26px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
}

/* ===============================
   RESPONSIVE
=================================*/
@media (max-width: 900px) {
    .observation.SG {
        flex-direction: column;
        padding: clamp(20px, 4vw, 36px);
    }

    .obs-image.SG {
        width: 100%;
        min-height: 280px;
    }

    .obs-texte.SG {
        width: 100%;
    }

    .obs-texte.SG h2 {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .observation.SG {
        gap: 18px;
        padding: clamp(16px, 5vw, 24px);
        border-radius: 8px;
    }

    .obs-texte.SG p {
        font-size: calc(var(--base) * 0.9);
    }
}

/* ===============================
   PAGE ASTROPHOTOGRAPHIE
=================================*/

/* ---- Header ---- */
.header-astro.SG {
    background-color: #05060a;
    background-image: url("../Imagesactivités/astrophotographie_header.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: clamp(220px, 42vw, 360px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
}

.header-astro.SG::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.35));
    z-index: 0;
}

.header-astro.SG h1 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: var(--h1);
    text-shadow: 0 0 10px #000;
    margin: 0;
}

/* ---- Intro ---- */
.intro-astro.SG {
    padding: clamp(40px, 5vw, 70px) clamp(10px, 4vw, 40px);
    color: #ddd;
    line-height: 1.65;
}

.intro-astro.SG p {
    margin-bottom: 20px;
}

/* ---- Technique + Image ---- */
.technique-astro.SG {
    display: flex;
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(40px, 5vw, 80px) 0;
    align-items: center;
}

.technique-texte.SG {
    flex: 1 1 50%;
    color: #e5e5e5;
}

.technique-texte.SG h2 {
    font-size: var(--h2);
    margin-bottom: 18px;
    color: #fff;
}

.technique-texte.SG p {
    font-size: calc(var(--base)*0.95);
    margin-bottom: 14px;
}

.technique-image.SG {
    flex: 1 1 45%;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    transform: translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.technique-image.SG img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.technique-image.SG:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}

/* ---- Galerie Astro ---- */
.galerie-astro.SG {
    padding: clamp(40px, 5vw, 80px) 0;
    display: flex;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    flex-wrap: wrap;
}

.carte-astro.SG {
    flex: 0 0 calc(33.333% - clamp(20px, 3vw, 40px));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.carte-astro.SG:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

.carte-astro.SG img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    aspect-ratio: 4/3;
}

.carte-astro.SG h3 {
    text-align: center;
    margin: 12px 0;
    font-size: var(--h3);
    color: #f5f5f5;
}

/* ---- Réservation ---- */
.resa-astro.SG {
    padding: clamp(40px, 5vw, 80px);
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.resa-astro.SG h2 {
    font-size: var(--h2);
    margin-bottom: 16px;
    color: #fff;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .technique-astro.SG {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .carte-astro.SG {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- WARNING BOX --- */
.warning-box {
    background: rgba(255, 0, 0, 0.15);
    border-left: 4px solid red;
    padding: 14px 16px;
    margin: 20px 0;
    border-radius: 6px;
    font-weight: 600;
    color: #ffaaaa;
}

/* --- SOHO IMAGE SECTION --- */
.soho-image.SG {
    margin-top: 30px;
    text-align: center;
}

.soho-image.SG img {
    width: 100%;
    max-width: 650px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.soho-image .source {
    margin-top: 8px;
    color: #ccc;
    font-size: 0.85rem;
}

.spectro-main {
 width: 100%;
 max-width: 1100px;
 margin: auto;
 padding: 40px 20px;
}

.spectro-section {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.spectro-title {
 font-size: 2rem;
 margin-top: 20px;
 color: var(--text-color, #fff);
 text-transform: uppercase;
 letter-spacing: 1px;
}

.spectro-text {
 font-size: 1rem;
 line-height: 1.7;
 color: var(--text-color, #ddd);
}

.spectro-list {
 margin-left: 20px;
 list-style: disc;
 color: var(--text-color, #ddd);
}

.spectro-image-container {
 display: flex;
 justify-content: center;
 padding: 20px 0;
}

.spectro-image {
 max-width: 75%;
 border-radius: 6px;
 box-shadow: 0 0 10px rgba(255,255,255,0.25);
}

/* -------------------- RESPONSIVE -------------------- */

/* Tablettes */
@media (max-width: 900px) {
 .spectro-main {
 padding: 30px 15px;
 }
 .spectro-title {
 font-size: 1.75rem;
 }
 .spectro-text {
 font-size: 0.95rem;
 }
}

/* Petits tablettes / grands mobiles */
@media (max-width: 768px) {
 .spectro-main {
 padding: 25px 12px;
 }
 .spectro-title {
 font-size: 1.6rem;
 }
 .spectro-text {
 font-size: 0.9rem;
 }
 .spectro-list {
 margin-left: 16px;
 }
 .spectro-image {
 max-width: 100%;
 }
}

/* Mobiles */
@media (max-width: 480px) {
 .spectro-main {
 padding: 20px 10px;
 }
 .spectro-title {
 font-size: 1.4rem;
 }
 .spectro-text {
 font-size: 0.85rem;
 line-height: 1.5;
 }
 .spectro-list {
 margin-left: 14px;
 font-size: 0.85rem;
 }
 .spectro-image {
 max-width: 100%;
 }
}

.page-soirees {
 max-width: 1100px;
 margin: 0 auto;
 padding: clamp(20px, 4vw, 60px);
 color: #e6e6e6;
}

.page-soirees h2 {
 font-size: var(--h2);
 margin-top: 32px;
 margin-bottom: 12px;
 color: white; 
}

.page-soirees p,
.page-soirees ul {
 font-size: var(--base);
 margin-bottom: 14px;
 line-height: 1.65;
}

.page-soirees ul {
 margin-left: 20px;
 list-style: disc;
}

.page-soirees .meteo {
 font-style: italic;
 opacity: 0.85;
}

.page-soirees .tarif {
 background: rgba(245, 252, 20, 0.08);
 border-left: 4px solid #f5fc14;
 padding: 12px 16px;
 margin: 22px 0;
 color: #fff;
 font-weight: 600;
 border-radius: 4px;
}

.page-soirees .note {
 font-style: italic;
 opacity: 0.9;
}

.page-soirees a {
 color: #f5fc14;
 text-decoration: underline;
}

.page-soirees a:hover {
 opacity: 0.8;
}

/* Responsive */
@media (max-width: 600px) {
 .page-soirees {
 padding: clamp(14px, 4vw, 32px);
 }
 .page-soirees ul {
 margin-left: 16px;
 }
}

.soirees-images.SG {
 display: flex;
 gap: clamp(16px, 2vw, 28px);
 margin-bottom: 30px;
}

.soirees-images.SG img {
 width: 50%;
 border-radius: 10px;
 object-fit: cover;
 box-shadow: 0 10px 26px rgba(0,0,0,0.35);
 transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.soirees-images.SG img:hover {
 transform: translateY(-6px);
 box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}

/* Responsive */
@media (max-width: 900px) {
 .soirees-images.SG {
 flex-direction: column;
 }

 .soirees-images.SG img {
 width: 100%;
 }
}