/* =============================================================================
   Maestro Landing — Styles custom (Tailwind CDN gère le reste)
   ============================================================================= */

/* === Smooth scroll === */
html { scroll-behavior: smooth; }

/* === Hero halo === */
.hero-halo { padding: 12px 0 28px; }
@media (min-width: 768px) { .hero-halo { padding: 36px 0 72px; } }

/* === Mockup MacBook === */
.macbook { width: 100%; }
.macbook__screen {
  background: #111317;
  border-radius: 16px 16px 0 0;
  padding: 13px 13px 13px;
  position: relative;
  box-shadow: 0 22px 50px rgba(13,27,42,.22);
}
.macbook__screen::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #34373d;
}
.macbook__screen img { display: block; width: 100%; height: auto; border-radius: 4px; }
.macbook__base {
  height: 15px; margin: 0 -3.2%;
  background: linear-gradient(#e1e4ea 0%, #c4c8d0 55%, #a9afb9 100%);
  border-radius: 0 0 12px 12px; position: relative;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.18), 0 8px 16px rgba(13,27,42,.12);
}
.macbook__base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16%; height: 7px; background: #b3b8c1; border-radius: 0 0 7px 7px;
}

/* === Mockup iPhone === */
.iphone {
  position: relative;
  background: #0b0b0d;
  border-radius: 42px;
  padding: 9px;
  box-shadow: 0 24px 60px rgba(13,27,42,.20);
}
.iphone__screen {
  border-radius: 34px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.iphone__screen img { display: block; width: 100%; height: auto; }
.iphone::after { /* Dynamic Island */
  content: "";
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; background: #0b0b0d;
  border-radius: 11px; z-index: 2;
}

/* === Boutons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 16px; border-radius: 12px;
  padding: 14px 28px; min-height: 52px;
  transition: all 0.2s ease; cursor: pointer; text-decoration: none;
  text-align: center; line-height: 1.3;
}
.btn-primary { background: #E6631B; color: #fff; }
.btn-primary:hover { background: #C85316; }
.btn-ghost {
  background: transparent; color: #0D1B2A;
  border: 1.5px solid #d1d5db;
}
.btn-ghost:hover { background: #f3f4f6; border-color: #9ca3af; }
.btn-ghost-orange {
  background: transparent; color: #E6631B;
  border: 1.5px solid #E6631B;
}
.btn-ghost-orange:hover { background: #FFF3EC; }
.btn-on-dark-ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
}
.btn-on-dark-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.btn-wa { background: #25D366; color: #fff; gap: 6px; }
.btn-wa:hover { background: #1fba59; }

/* === Tiles (cards) === */
.tile {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 16px; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tile:hover { box-shadow: 0 8px 30px rgba(13,27,42,.08); transform: translateY(-2px); }

/* === Price cards === */
.price-card {
  background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 20px; transition: box-shadow 0.25s ease;
}
.price-card:hover { box-shadow: 0 12px 40px rgba(13,27,42,.1); }
.price-card.featured { border-color: #E6631B; box-shadow: 0 12px 40px rgba(230,99,27,.15); }

/* === Reveal animations === */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
/* Fallback robustesse : si l'utilisateur a désactivé les animations, le contenu reste visible */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* === Slideshow (infinite horizontal) === */
.slideshow { overflow: hidden; border-radius: 16px; }
.slideshow-track {
  display: flex; width: calc(4 * 100%);
  animation: slideshow 12s linear infinite;
}
.slideshow-track img { width: 25%; flex-shrink: 0; display: block; }
@keyframes slideshow {
  0% { transform: translateX(0); }
  25% { transform: translateX(0); }
  33.33% { transform: translateX(-25%); }
  58.33% { transform: translateX(-25%); }
  66.66% { transform: translateX(-50%); }
  91.66% { transform: translateX(-50%); }
  100% { transform: translateX(-75%); }
}

/* === Marquee (témoignages) === */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; gap: 16px; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-card { min-width: 320px; max-width: 360px; flex-shrink: 0; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === FAQ === */
.faq {
  border-bottom: 1px solid #e5e7eb;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; font-size: 16px; font-weight: 600; color: #0D1B2A;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform 0.2s ease; flex-shrink: 0; margin-left: 12px; }
.faq[open] summary .chev { transform: rotate(180deg); }
.faq-body {
  padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: #5A6478;
}

/* === WhatsApp flottant === */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.1); }
.wa-tooltip {
  position: fixed; bottom: 88px; right: 24px; z-index: 49;
  background: #fff; color: #0D1B2A; font-size: 13px; padding: 10px 14px;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  max-width: 260px; opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.wa-tooltip.visible { opacity: 1; transform: translateY(0); }

/* === Sticky CTA mobile === */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb; padding: 12px 16px;
  transform: translateY(100%); transition: transform 0.3s ease;
}
.sticky-cta.visible { transform: translateY(0); }

/* === No scrollbar for horizontal scroll === */
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* === Snap scroll === */
.snap-x { scroll-snap-type: x mandatory; }
.snap-x > * { scroll-snap-align: center; }

/* === Mobile adjustments === */
@media (max-width: 767px) {
  .wa-float { bottom: 80px; }
}

/* === Modale capture d'intérêt (Solo / Multi) === */
.imodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.imodal[hidden] { display: none; }
.imodal__overlay { position: absolute; inset: 0; background: rgba(13,27,42,.62); backdrop-filter: blur(2px); }
.imodal__card { position: relative; z-index: 1; background: #fff; border-radius: 16px; width: 100%; max-width: 440px; padding: 34px 28px 30px; box-shadow: 0 30px 80px rgba(13,27,42,.35); animation: imodal-in .22s ease; }
@keyframes imodal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.imodal__close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 30px; line-height: 1; color: #8390A4; cursor: pointer; padding: 4px; }
.imodal__close:hover { color: #0D1B2A; }
.imodal__title { font-size: 22px; font-weight: 700; color: #0D1B2A; line-height: 1.2; }
.imodal__sub { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #5A6478; }
.imodal__form { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.imodal__input { width: 100%; border: 1px solid #C0CCD9; border-radius: 10px; padding: 13px 14px; font-size: 15px; color: #0D1B2A; font-family: inherit; }
.imodal__input:focus { outline: none; border-color: #E6631B; box-shadow: 0 0 0 3px rgba(230,99,27,.15); }
.imodal__submit { width: 100%; }
.imodal__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.imodal__err { margin-top: 12px; font-size: 14px; color: #b42318; }
.imodal__success { text-align: center; padding: 10px 0; }
.imodal__check { width: 56px; height: 56px; border-radius: 50%; background: #e7faf0; color: #13ce66; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }



/* === Carrousel chef d'orchestre (une carte à la fois, fondu auto) === */
.oc-stage { position: relative; }
.oc-carousel.oc-ready { display: flex; flex-direction: column; height: 100%; }
.oc-carousel.oc-ready .oc-stage { position: relative; flex: 1 1 auto; min-height: 260px; }
.oc-carousel:not(.oc-ready) .oc-card { margin-bottom: 12px; }
.oc-carousel.oc-ready .oc-card { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.oc-carousel.oc-ready .oc-card.is-active { opacity: 1; pointer-events: auto; }
.oc-dots { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }
.oc-carousel:not(.oc-ready) .oc-dots { display: none; }
.oc-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.3); transition: background .2s; }
.oc-dot.is-active { background: #E6631B; }


/* === Carrousel MacBook (section Trois étapes) === */
.mac-carousel { position: relative; overflow: hidden; border-radius: 4px; }
.mac-track { display: flex; transition: transform .5s ease; }
.mac-track > img { flex: 0 0 100%; width: 100%; height: auto; display: block; border-radius: 0; }
.mac-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(13,27,42,.55); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.mac-arrow:hover { background: rgba(13,27,42,.82); }
.mac-prev { left: 10px; } .mac-next { right: 10px; }
.mac-carousel:not(.mac-ready) .mac-arrow { display: none; }
.mac-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.mac-dots:empty { display: none; }
.mac-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(13,27,42,.2); transition: background .2s; }
.mac-dot.is-active { background: #E6631B; }


/* === Cadre fenêtre/app (carrousel Trois étapes) === */
.appwin { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 22px 55px rgba(13,27,42,.16); }
.appwin__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f1f2f5; border-bottom: 1px solid #e7e9ee; }
.appwin__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cfd3da; }
.appwin__screen { line-height: 0; }
.appwin__screen .mac-carousel { border-radius: 0; }

/* === Carrousel appréciations : fondu sur mobile, grille sur desktop === */
.ap-dot { width: 8px; height: 8px; border-radius: 9999px; background: #d1d5db; border: 0; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; }
.ap-dot.is-active { background: #E6631B; width: 22px; }
@media (max-width: 639px) {
  .ap-stage { position: relative; }
  .ap-stage .ap-card { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
  .ap-stage .ap-card.is-active { position: relative; opacity: 1; pointer-events: auto; }
}

/* === Carrousel ChatGPT : fondu hauteur auto sur mobile === */
@media (max-width: 767px) {
  .oc-carousel.oc-ready .oc-stage { min-height: 0; }
  .oc-carousel.oc-ready .oc-card.is-active { position: relative; }
}

/* === Section "s'ajuste" : cartes desktop / accordéon mobile === */
details.sajuste > summary { list-style: none; display: block; }
details.sajuste > summary::-webkit-details-marker { display: none; }
.sajuste-chev { color: #5A6478; transition: transform .2s ease; }
@media (min-width: 640px) {
  details.sajuste > summary { pointer-events: none; }
}
@media (max-width: 639px) {
  details.sajuste > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
  details.sajuste > summary > .text-orange { margin-bottom: 0; flex-shrink: 0; }
  details.sajuste > summary > h3 { flex: 1; }
  .sajuste-chev { margin-left: auto; flex-shrink: 0; }
  details.sajuste[open] > summary .sajuste-chev { transform: rotate(180deg); }
}

/* === Section "Trois étapes" : accordéon sur mobile, cartes complètes sur desktop === */
.etape-chev { transition: transform .2s ease; }
@media (max-width: 639px) {
  .etape { cursor: pointer; }
  .etape .etape-desc { display: none; }
  .etape.open .etape-desc { display: block; }
  .etape.open .etape-chev { transform: rotate(180deg); }
}

/* === Bouton hero "Voir comment ça marche" : Bleu Roi plein sur mobile === */
@media (max-width: 767px) {
  .hero-voir { background: #2B4A8C; color: #fff; border-color: transparent; }
  .hero-voir:hover { background: #24407A; border-color: transparent; }
}

/* === Carrousel générique fondu : 1 carte centrée, hauteur auto, swipe (mobile) ; grille (desktop) === */
.fcar { position: relative; }
@media (max-width: 767px) {
  .fcar-stage { position: relative; }
  .fcar .fcar-stage > * { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
  .fcar .fcar-stage > *.is-active { position: relative; opacity: 1; pointer-events: auto; }
}
.fcar-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
@media (min-width: 768px) { .fcar-dots { display: none; } }
.fcar-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.3); border: 0; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; }
.fcar-dot.is-active { background: #E6631B; width: 22px; }

/* === Onglets Offres (TEST/SOLO/MULTI) + hauteur égale (mobile) === */
.fcar-tabs-top { margin-top: 0; margin-bottom: 30px; }
.fcar-tab {
  flex: 1 1 0; max-width: 130px; padding: 9px 6px;
  border-radius: 9999px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; cursor: pointer; transition: all .2s ease;
  border: 1.5px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.7);
}
.fcar-tab.is-active { background: #fff; color: #0D1B2A; border-color: #fff; }
.fcar-tab-multi { color: #E6631B; border-color: #E6631B; }
.fcar-tab-multi.is-active { background: #E6631B; color: #fff; border-color: #E6631B; }
@media (max-width: 767px) {
  .fcar-equal .fcar-stage > *.is-active { height: 100%; }
}

/* === Décalage d'ancre sous le header collant (mobile) : titre visible à l'arrivée === */
@media (max-width: 767px) {
  #comment, #offres, #faq { scroll-margin-top: 76px; }
}

/* === Compte à rebours lancement (5 octobre) === */
.cd-bar { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, #0D1B2A, #16273d); color: #fff; padding: 7px 12px; font-size: 12px; }
.cd-bar .cd-bar-label { font-weight: 700; letter-spacing: .01em; }