/* Sky Explorer BDE — page de base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--c-white); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

/* ---------- intro ---------- */

#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--c-deep);
  display: grid; place-items: center;
  transition: opacity .45s ease;
}
#intro.is-gone { opacity: 0; pointer-events: none; }
#intro video { width: 100%; height: 100%; object-fit: cover; }

#skip {
  position: absolute; right: 24px; bottom: 24px;
  font-family: var(--f-body); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-white);
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  border-radius: 0; padding: 10px 18px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
#skip:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ---------- logo ----------
   logo-white.png est derive du PNG fourni : meme dessin, rien de redessine. On a juste
   inverse la composition (blanc pur sur navy uni) pour recuperer l'alpha, coupe le halo
   de generation et recadre sur le lettrage. Resultat : 775x437 au lieu de 1254x1254,
   89 Ko au lieu de 945, et utilisable sur n'importe quel fond, clair compris.
   L'original reste intact dans assets/logo.png. */
.logo { display: block; flex: none; }
.logo img { display: block; width: 100%; }

/* ---------- header ---------- */

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding-block: 20px;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header .logo { width: 150px; }

.nav { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--c-white); text-decoration: none;
  padding-block: 6px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus-visible { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ---------- hero ---------- */

.hero {
  background: var(--c-deep);
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding-block: 140px 80px;
}
.hero .logo { width: min(480px, 78vw); margin-inline: auto; }
.hero p {
  color: var(--c-neutral); font-size: 20px;
  max-width: 46ch; margin: 28px auto 40px;
}
.hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- boutons ---------- */

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--f-display); font-size: 20px; text-transform: uppercase;
  background: transparent;
  border: var(--btn-border) solid currentColor;
  border-radius: var(--radius);
  padding: 14px 32px;
  color: var(--c-primary);
  transition: color .2s, background-color .2s;
}
.btn--accent { color: var(--c-accent); }                      /* sur fond sombre seulement */
.btn--accent:hover { background: var(--c-accent); color: var(--c-deep); }
.btn--light { color: var(--c-white); }
.btn--light:hover { background: var(--c-white); color: var(--c-deep); }
.btn--dark:hover { background: var(--c-primary); color: var(--c-white); }

/* ---------- sections ---------- */

.section { padding-block: 96px; }
.section h2 { margin: 0 0 8px; }
.section .lede { color: var(--c-text-muted); max-width: 60ch; margin: 0 0 40px; }

.section--navy { background: var(--c-primary); color: var(--c-white); }
.section--navy h2, .section--navy h3 { color: var(--c-white); }
.section--navy .lede { color: var(--c-neutral); }

.rule { width: 64px; height: 4px; background: var(--c-accent); margin-block: 0 28px; }

.grid-3 { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.card { border-top: 3px solid var(--c-primary); padding-top: 20px; }
.section--navy .card { border-top-color: var(--c-accent); }
.card h3 { font-size: 21px; margin: 0 0 10px; }
.card p { margin: 0; color: var(--c-text-muted); font-size: 16px; }
.section--navy .card p { color: var(--c-neutral); }

/* ---------- footer ---------- */

.site-footer { background: var(--c-deep); color: var(--c-neutral); padding-block: 56px; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer .logo { width: 170px; }
.site-footer p { margin: 0; font-size: 14px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; gap: 24px; }
  .nav { gap: 18px; }
  .nav a { font-size: 12px; letter-spacing: 1px; }
}
@media (max-width: 560px) {
  .site-header .logo { width: 110px; }
  .nav { display: none; }
  .section { padding-block: 64px; }
  .hero p { font-size: 17px; }
  .btn { font-size: 17px; padding: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #intro { transition: none; }
}

/* ---------- popup contact ---------- */

.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0, 10, 42, .88);
  opacity: 0; transition: opacity .28s ease;
  overflow-y: auto;
}
.modal.is-open { opacity: 1; }
.modal[hidden] { display: none; }

.modal__panel {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--c-primary);
  color: var(--c-white);
  padding: 44px 44px 40px;
  border-top: 4px solid var(--c-accent);
  transform: translateY(14px);
  transition: transform .28s ease;
}
.modal.is-open .modal__panel { transform: none; }

.modal__panel h2 { color: var(--c-white); margin: 0 0 6px; font-size: 32px; }
.modal__lede { color: var(--c-neutral); margin: 0 0 28px; font-size: 16px; }

.modal__close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--c-neutral); font-size: 30px; line-height: 1;
  padding: 6px 10px;
}
.modal__close:hover { color: var(--c-accent); }

/* champs : soulignement seul, zero arrondi — comme les inputs de sky-explorer.fr */
.field { margin-bottom: 22px; border: 0; padding: 0; }
.field > label, .field > legend {
  display: block; padding: 0;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--c-neutral);
  margin-bottom: 8px;
}
.field input[type="email"],
.field input[type="text"],
.field textarea {
  width: 100%;
  font-family: var(--f-body); font-size: 17px;
  color: var(--c-white);
  background: transparent;
  border: 0; border-bottom: 2px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  padding: 8px 0;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .3); }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--c-accent);
}
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #FF6B6B; }

.radios { display: flex; gap: 28px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio span {
  font-family: var(--f-body); font-size: 17px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--c-white);
  display: inline-flex; align-items: center; gap: 10px;
}
.radio span::before {
  content: ""; width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .5);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.radio input:checked + span::before {
  background: var(--c-accent); border-color: var(--c-accent);
  box-shadow: inset 0 0 0 3px var(--c-primary);
}
.radio input:focus-visible + span::before { border-color: var(--c-accent); }

.modal__error { color: #FF6B6B; font-size: 15px; margin: 0 0 16px; }
.modal__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.modal__actions .btn { font-size: 18px; padding: 12px 26px; }

.modal__success { text-align: center; padding-block: 20px; }
.modal__success p { color: var(--c-neutral); margin: 0 0 8px; }
.modal__demo { font-size: 14px; color: var(--c-accent); margin-bottom: 24px !important; }
.modal__success .btn { margin-top: 16px; }

@media (max-width: 560px) {
  .modal { padding: 14px; }
  .modal__panel { padding: 34px 22px 28px; }
  .modal__panel h2 { font-size: 26px; }
  .modal__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__panel { transition: none; }
}

/* ---------- avions de fond ----------
   L'avion est extrait de l'intro (frame 2,25 s), detoure en blanc + alpha : c'est la
   meme silhouette que celle du decollage, elle continue sa route dans la page.

   L'angle de montee est baked dans l'image. Mesure par regression sur le centroide du
   fuselage colonne par colonne : 19,4 deg, queue a 1,1% / 54,3% de l'image. La trainee
   et la trajectoire reprennent ces valeurs, pas une approximation a l'oeil.

   Le deplacement vertical est en vw comme l'horizontal : 60/170 = tan(19,4 deg) sur
   TOUS les ecrans. Avec des vh, l'angle changerait entre un portable et un 27 pouces. */

.sky {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.plane {
  position: absolute;
  left: 0; top: var(--top, 70%);
  width: var(--w, 150px);
  aspect-ratio: 529 / 192;
  background: url("plane.png") center / contain no-repeat;
  opacity: var(--op, .22);
  animation: fly var(--dur, 40s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

/* la trainee part de la queue reelle et descend dans l'axe exact du fuselage */
.plane::before {
  content: "";
  position: absolute;
  right: 97%; top: 54.3%;
  width: 430%; height: 2px;
  background: linear-gradient(to left,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.26) 22%,
    rgba(255,255,255,0)  100%);
  transform: rotate(-19.4deg);
  transform-origin: right center;
}

@keyframes fly {
  from { transform: translate(-35vw,  20vw); }
  to   { transform: translate(135vw, -40vw); }   /* dx 170vw, dy -60vw = 19,4 deg */
}

/* le contenu du hero passe au-dessus du ciel */
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .sky { display: none; }
}

/* ---------- le bureau ---------- */

.section--deep { background: var(--c-deep); color: var(--c-white); }
.section--deep h2, .section--deep h3 { color: var(--c-white); }
.section--deep .lede { color: var(--c-neutral); }

/* Les portraits sont en bichromie navy : leurs noirs valent #000A2A, exactement le fond
   de cette section. Les ombres se fondent dans la page au lieu de former un carre. */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1060px;   /* deux personnes seulement : on assume le grand format
                          plutot que deux vignettes perdues dans la largeur */
}
.member { margin: 0; }
.member img {
  width: 100%; height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.member figcaption {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 3px solid var(--c-accent);
}
.member h3 {
  font-family: var(--f-display);
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 8px;
}
.member figcaption p {
  margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--c-accent);
}

@media (max-width: 700px) {
  .team { grid-template-columns: 1fr; gap: 36px; max-width: 420px; }
  .member h3 { font-size: 30px; }
}

/* petit bouton de contact du header — hors du <ul> pour survivre au masquage mobile */
.btn--sm {
  font-size: 13px;
  letter-spacing: 1px;
  padding: 9px 16px;
  border-width: 2px;
}
@media (max-width: 560px) {
  .btn--sm { font-size: 11px; padding: 8px 12px; }
}

/* ---------- texte courant ---------- */

.prose { max-width: 62ch; }
.prose p { margin: 0 0 20px; font-size: 18px; line-height: 1.7; }
.prose__lead { font-size: 22px !important; color: var(--c-primary); font-weight: 700; }

/* ---------- "X qui deviennent Y" ---------- */

.becomes { list-style: none; margin: 44px 0 0; padding: 0; }
.becomes li {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.9vw, 38px);   /* la plus longue des trois tient sur une ligne */
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--c-neutral);
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.becomes li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.becomes em { font-style: normal; color: var(--c-accent); }

/* ---------- appel final ---------- */

.takeoff {
  background: var(--c-primary);
  padding-block: 92px;
  text-align: center;
}
.takeoff h2 {
  color: var(--c-white);
  font-size: clamp(28px, 5vw, 56px);
  margin: 0 0 36px;
}
@media (max-width: 560px) {
  .takeoff { padding-block: 64px; }
  .becomes li { padding: 16px 0; }
}

.site-footer a { color: var(--c-neutral); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--c-accent); }

/* ---------- coupure ----------
   Meme geste que le logo, qui encadre « BDE » entre deux filets : ici c'est l'avion
   qui est encadre. Sur le navy #24265A de la charte, pour casser la suite de deux
   sections sombres identiques. */
.divider {
  background: var(--c-primary);
  padding-block: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.divider__line {
  height: 1px;
  width: min(190px, 24vw);
  background: rgba(255, 255, 255, .32);
}
.divider__plane {
  width: 58px;
  aspect-ratio: 529 / 192;
  background: url("plane.png") center / contain no-repeat;
  opacity: .9;
  flex: none;
}
@media (max-width: 560px) {
  .divider { padding-block: 24px; gap: 14px; }
  .divider__plane { width: 44px; }
}

/* ---------- tarifs ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 860px;
}

.plan {
  border: 3px solid var(--c-primary);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
}
.plan h3 {
  font-family: var(--f-display);
  font-size: 26px; letter-spacing: 0; line-height: 1.1;
  margin: 0 0 18px;
}
.plan__price {
  font-family: var(--f-display);
  font-size: 20px;
  margin: 0 0 26px;
  color: var(--c-primary);
}
.plan__price span { font-size: 56px; line-height: 1; }
.plan__price small { font-family: var(--f-body); font-size: 14px; font-weight: 400; opacity: .7; }

.plan__list { list-style: none; margin: 0 0 30px; padding: 0; flex: 1; }
.plan__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 16px; line-height: 1.5;
  color: var(--c-text-muted);
}
.plan__list li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 10px; height: 10px;
  background: var(--c-neutral);
}
/* Les avantages exclusifs au premium portent un + au lieu d'une puce.
   Specificite (0,4,2) : il faut battre `.plan--premium .plan__list li::before`
   (0,3,2) plus bas, sinon la puce carree l'emporte et le + disparait. */
.plan--premium .plan__list li.plan__plus::before {
  content: "+";
  background: none;
  width: auto; height: auto;
  top: 0;
  font-family: var(--f-body); font-weight: 700; font-size: 19px;
  line-height: 1.35;
  color: var(--c-accent);
}
.plan .btn { align-self: flex-start; }

/* La formule premium est en aplat navy : l'accent #E4F803 est illisible sur blanc
   (1,18:1) mais excellent sur navy (11,8:1). */
.plan--premium {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}
.plan--premium h3 { color: var(--c-white); }
.plan--premium .plan__price { color: var(--c-accent); }
.plan--premium .plan__list li { color: var(--c-neutral); }
.plan--premium .plan__list li::before { background: rgba(255, 255, 255, .5); }

@media (max-width: 700px) {
  .plans { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- header : variante page interieure ---------- */

.header-actions { display: flex; align-items: center; gap: 10px; }
.site-header--solid { position: static; background: var(--c-deep); }
.btn.is-current { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------- boutique ---------- */

.page-boutique { background: var(--c-deep); }
.shop__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}
.field__label {
  display: block;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--c-neutral);
  margin-bottom: 10px;
}

/* liste deroulante stylisee — un <select> natif ne peut pas afficher d'images */
.select { position: relative; }
.select__button {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: transparent;
  color: var(--c-white);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-body); font-size: 17px;
}
.select__button:hover, .select.is-open .select__button { border-color: var(--c-accent); }
.select__label { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.select__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select__chevron {
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.select.is-open .select__chevron { transform: rotate(225deg) translate(-2px, -2px); }

.select__list {
  position: absolute; z-index: 20;
  top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 0; list-style: none;
  background: var(--c-primary);
  border: 2px solid var(--c-accent);
  max-height: 320px; overflow-y: auto;
  display: none;
}
.select.is-open .select__list { display: block; }
.select__list:focus { outline: none; }

.select__option {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--c-white);
  font-size: 16px;
}
.select__option:hover { background: rgba(255, 255, 255, .08); }
.select__option[aria-selected="true"] { background: rgba(228, 248, 3, .14); }

/* vignettes */
.thumb, .produit__image {
  display: block; flex: none;
  object-fit: cover;
  background: var(--c-deep);
}
.thumb { width: 40px; height: 40px; }
.produit__image { width: 100%; max-width: 360px; aspect-ratio: 1; }

/* pas encore de photo : pastille avec l'initiale, plutot qu'une image cassee */
.thumb--vide, .produit__image--vide {
  display: grid; place-items: center;
  font-family: var(--f-display);
  color: var(--c-accent);
  border: 1px solid rgba(228, 248, 3, .45);
  background: var(--c-primary);
}
.thumb--vide { font-size: 18px; }
.produit__image--vide { font-size: 96px; }

.shop__cta { margin-top: 28px; }
/* --c-text-muted est calibre pour fond blanc ; sur navy il tombe a 4,3:1.
   --c-neutral atteint 10,4:1 sur ce fond. */
.shop__note { font-size: 14px; color: var(--c-neutral); margin: 16px 0 0; max-width: 34ch; }

.produit { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.produit__texte h3 { font-family: var(--f-display); font-size: 30px; margin: 0 0 10px; color: var(--c-white); }
.produit__texte p { margin: 0; color: var(--c-neutral); font-size: 17px; max-width: 40ch; }
.produit__prix { font-family: var(--f-display); font-size: 30px; color: var(--c-accent) !important; margin-top: 16px !important; }

@media (max-width: 860px) {
  .shop__grid { grid-template-columns: 1fr; gap: 36px; }
  .produit__image { max-width: 100%; }
}
@media (max-width: 560px) {
  .header-actions { gap: 6px; }
}

/* ---------- ciel de fond pleine page (boutique) ----------
   La couche est fixe et le contenu passe au-dessus. Il faut donc rendre la section
   transparente : .section--deep pose un fond opaque qui masquerait tout le ciel.
   C'est le <body> qui porte la couleur. */
.sky--page { position: fixed; z-index: 0; }
.page-boutique .site-header,
.page-boutique main,
.page-boutique .site-footer { position: relative; z-index: 1; }
.page-boutique .shop { background: transparent; }
.page-boutique .site-footer { background: rgba(0, 10, 42, .85); }