:root {
  --bg: #0a0a0a;
  --bg-alt: #131313;
  --card: #171717;
  --border: #2a2a2a;
  --text: #f5f5f5;
  --text-muted: #a8a8a8;
  --accent: #e8672e;
  --accent-light: #ff8a4c;
  --font-head: "Oswald", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

a { color: inherit; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 20px;
  padding: 12px 20px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.brand-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.9rem;
}

.nav a {
  text-decoration: none;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav a:hover { color: var(--accent-light); }

/* HERO */
.hero {
  padding: 56px 0 40px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 103, 46, 0.15), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}

.hero-logo {
  width: auto;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto 16px;
}

.hero-kicker {
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 1.9rem;
  line-height: 1.2;
}

.hero-sub {
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 24px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: var(--accent-light); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover { border-color: var(--accent); }

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
}

/* SECTIONS */
.section {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.section-alt { background: var(--bg-alt); }

.section-kicker {
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.section-title { font-size: 1.6rem; }

.section-lead {
  color: var(--text-muted);
  margin-bottom: 28px;
  max-width: 520px;
}

/* QUI SOMMES-NOUS */
.apropos-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .apropos-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.apropos-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}

.apropos-card h3 {
  color: var(--accent-light);
  font-size: 1rem;
  margin-bottom: 10px;
}

.apropos-card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* PROGRAMME CARD */
.programme-name {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-light);
  font-size: 1rem;
  margin: 28px 0 12px;
}

.programme-name:first-of-type { margin-top: 0; }

.programme-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 12px;
}

.programme-poster {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.programme-badge {
  height: 130px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.programme-badge img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.programme-badge-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 10px 18px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 12px;
}

.programme-badge-text span {
  font-family: var(--font-head);
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.programme-skills {
  margin: 0 0 20px;
  padding: 0 0 0 18px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.9;
}

.programme-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.programme-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  flex-wrap: wrap;
}

.programme-list li:last-child { border-bottom: none; padding-bottom: 0; }

.li-label {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.li-value {
  font-weight: 600;
  text-align: right;
}

/* FORM */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  gap: 16px;
}

.hidden-field { display: none; }

.form-row {
  display: flex;
  gap: 10px;
}

.type-toggle {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
}

.type-toggle input {
  position: absolute;
  opacity: 0;
}

.type-toggle:has(input:checked),
.type-toggle.is-checked {
  border-color: var(--accent);
  color: var(--accent-light);
  background: rgba(232, 103, 46, 0.08);
}

.field { display: grid; gap: 6px; }

.field label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  background: #0f0f0f;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.checkbox-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox-field input { margin-top: 3px; }

.form-success {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 32px 24px;
}

.success-check {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  margin: 0 auto 16px;
}

.form-success h3 { margin-bottom: 8px; }
.form-success p { color: var(--text-muted); margin: 4px 0; }

/* CONTACT */
.contact-inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--accent-light); }

.contact-icon { font-size: 1.2rem; }

/* FOOTER */
.site-footer {
  padding: 32px 0 48px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.site-footer strong { color: var(--text); }
.footer-muted { margin: 4px 0; }

@media (min-width: 640px) {
  .hero h1 { font-size: 2.4rem; }
}

/* VIDEOS / HIGHLIGHTS */
.video-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.video-badge {
  display: inline-block;
  background: rgba(232, 103, 46, 0.15);
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.video-card p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* GALERIE MÉDIA (vidéos + photos, fichiers hébergés directement) */
.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 560px) {
  .media-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.media-gallery-item {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
}

.media-gallery-item img,
.media-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.media-gallery-item .media-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  pointer-events: none;
}

/* Anciennes entrées (lien Instagram sans fichier uploadé) : on garde
   l'iframe /embed/ jouable directement dans la grille, sans lightbox. */
.media-gallery-item-embed {
  cursor: default;
}

.media-gallery-item-embed iframe {
  width: 100%;
  height: 900px;
  border: none;
  margin-top: -72px;
  transform: scale(1.35);
  transform-origin: center top;
}

/* LIGHTBOX */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lightbox[hidden] {
  display: none;
}

.media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.media-lightbox-content {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.media-lightbox-media {
  width: 100%;
  max-height: 76vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.media-lightbox-media video,
.media-lightbox-media img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  display: block;
}

.media-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}

/* CARROUSEL INSTAGRAM */
.ig-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.ig-carousel-track::-webkit-scrollbar {
  height: 6px;
}

.ig-carousel-track::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.ig-carousel-track > .ig-slide {
  flex: 0 0 auto;
  align-self: flex-start; /* évite que le "stretch" par défaut du flex
    ignore aspect-ratio et laisse le conteneur grandir avec le contenu
    (c'est ce qui empêchait le rognage du bas de fonctionner) */
  width: min(340px, 84vw);
  height: 560px;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}

/* Le lecteur officiel Instagram inclut toujours un bandeau (photo de
   profil + nom d'utilisateur) en haut et une barre d'actions/légende en
   bas — ce qui, combiné à une hauteur fixe non alignée sur le contenu
   réel, produisait des bandes blanches au-dessus/en dessous de la vidéo.
   On donne à l'iframe une grande hauteur fixe (jamais compressée) puis on
   la remonte avec une marge négative pour masquer l'en-tête ; le
   conteneur (hauteur fixe + overflow hidden) rogne tout le reste en flux
   normal. Un léger zoom compense aussi les bandes noires que certains
   reels ont nativement quand leur vidéo source n'est pas exactement au
   format 9:16 (Instagram les ajoute lui-même dans son lecteur). */
.ig-carousel-track > .ig-slide iframe {
  width: 100% !important;
  height: 900px !important;
  display: block;
  border: none;
  margin-top: -72px !important;
  transform: scale(1.35);
  transform-origin: center top;
}

.ig-carousel-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-carousel-nav:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

@media (max-width: 640px) {
  .ig-carousel-nav {
    width: 34px;
    height: 34px;
  }
}

/* BANDEAU PRODUIT VEDETTE (toujours visible, bas de page) */
.product-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  background: var(--card);
  border-top: 2px solid var(--accent);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.4);
}

.product-banner-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #0f0f0f;
  flex-shrink: 0;
}

.product-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.product-banner-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-light);
  font-weight: 700;
}

.product-banner-title {
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-banner-price {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.product-banner-cta {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 0.92rem;
}

.product-banner-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 6px;
}

.product-banner-close:hover { color: var(--text); }

body { padding-bottom: 88px; }

@media (max-width: 480px) {
  .product-banner-info { display: none; }
}

/* AVIS CLIENTS */
.reviews-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.reviews-list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.reviews-list::-webkit-scrollbar {
  height: 6px;
}

.reviews-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.reviews-carousel-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-carousel-nav:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

@media (max-width: 640px) {
  .reviews-carousel-nav {
    width: 34px;
    height: 34px;
  }
}

.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  flex: 0 0 auto;
  width: min(320px, 84vw);
  scroll-snap-align: start;
}

.review-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  display: block;
}

.review-stars {
  color: var(--accent-light);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.review-comment {
  color: var(--text);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

.review-author {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.reviews-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.review-form-toggle summary {
  list-style: none;
  cursor: pointer;
}

.review-form-toggle summary::-webkit-details-marker { display: none; }

.review-form {
  margin-top: 16px;
}

.review-note {
  color: var(--accent-light);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

/* Nos partenaires */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.partner-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.partner-logo-link:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.partner-logo-link img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}