/* ==========================================================================
   GYMPAY — LANDING PAGE
   Mobile-first strict : tout le CSS de base cible le téléphone.
   Les seules media queries sont en min-width (768px puis 1100px) et
   n'ajoutent que de la mise en page multi-colonnes.
   ========================================================================== */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root {
  /* Bleu repris de l'application GymPay, orange réservé aux appels à l'action */
  --ink:        #0B1B33;
  --ink-soft:   #52627D;
  --blue:       #2563EB;
  --blue-deep:  #12296B;
  --blue-wash:  #EEF3FF;
  --orange:     #F26522;
  --orange-dark:#D2490C;
  --sand:       #F4F6FB;
  --paper:      #FFFFFF;
  --alert:      #FDEAE4;
  --alert-line: #F3B7A5;
  --line:       #DCE3F0;
  --green:      #15A34A;

  --radius:     14px;
  --radius-lg:  20px;
  --shadow:     0 2px 4px rgba(11, 27, 51, .04), 0 8px 24px rgba(11, 27, 51, .07);
  --shadow-cta: 0 6px 18px rgba(242, 101, 34, .32);

  --gutter:     18px;   /* respiration horizontale sur mobile */
  --maxw:       1080px;
}

/* --- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
   -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width:100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;           /* garde-fou : jamais de scroll horizontal */
}

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

h1, h2, h3 {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 .5em;
  letter-spacing: -0.2px;
}

h1 { font-size: clamp(1.55rem, 6.2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 5.4vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 4.2vw, 1.35rem); font-weight: 800; }

p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }

/* Accessibilité clavier — visible partout */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- 3. STRUCTURE ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: 42px; }
.band--tight  { padding-block: 28px; }
.band--sand   { background: var(--sand); }
.band--ink    { background: var(--ink); color: #E7EDF9; }
.band--ink h2 { color: #fff; }

.center { text-align: center; }

.eyebrow {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .5px;
  color: var(--blue);
  margin-bottom: 10px;
}

.lede {
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.hr-soft {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 32px;
}

/* --- 4. EN-TÊTE --------------------------------------------------------- */
.topbar {
  border-bottom: 1px solid var(--line);
  padding-block: 12px;
  background: var(--paper);
}

.brandbox {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 340px;
  margin-inline: auto;
}

.brandbox img { height: 30px; width: auto; }

/* Logo de repli en CSS tant que assets/img/logo.png n'est pas fourni */
.brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
}

.brandname {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .5px;
}

/* --- 5. HERO ------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, var(--blue-wash) 100%);
  padding-block: 30px 38px;
  text-align: center;
}

.hero h1 { margin-bottom: 14px; }
.hero h1 .hl { color: var(--blue); }

.hero .lede { max-width: 620px; margin-inline: auto; }

/* --- 6. VIDÉO (façade : l'iframe n'est chargée qu'au clic) -------------- */
.video {
  position: relative;
  margin-block: 22px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0A1526;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
}

.video img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}

.video:hover .video__play { transform: scale(1.08); }

/* Triangle « lecture ». En RTL le triangle doit pointer vers la gauche. */
.video__play::before {
  content: "";
  border-style: solid;
  border-width: 13px 22px 13px 0;
  border-color: transparent #fff transparent transparent;
  margin-inline-end: 4px;
}

.video__hint {
  position: absolute;
  inset-block-end: 12px;
  inset-inline: 0;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

/* --- 7. BOUTONS --------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;              /* zone tactile confortable */
  padding: 14px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform .15s ease, background .15s ease;
}

.btn:hover  { background: var(--orange-dark); }
.btn:active { transform: translateY(1px); }

.btn[disabled] { opacity: .65; cursor: not-allowed; box-shadow: none; }

.btn--navy { background: var(--blue-deep); box-shadow: 0 6px 18px rgba(18, 41, 107, .25); }
.btn--navy:hover { background: #0C1D51; }

/* --- 8. CARTES ---------------------------------------------------------- */
.grid { display: grid; gap: 14px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

/* Cartes de qualification : barre bleue en tête de ligne */
.card--qualify {
  background: var(--blue-wash);
  border: 0;
  border-top: 4px solid var(--blue);
  box-shadow: none;
  font-weight: 500;
}

.card--qualify strong { color: var(--blue-deep); }

/* Cartes bénéfices */
.card--perk { background: var(--blue-wash); border: 0; box-shadow: none; }
.card--perk h3 { color: var(--blue-deep); margin-bottom: 4px; }
.card--perk p  { color: var(--ink-soft); font-size: .95rem; }

/* --- 9. BANDEAU D'ALERTE ------------------------------------------------ */
.alertbox {
  background: var(--alert);
  border: 1px solid var(--alert-line);
  border-radius: var(--radius);
  padding: 18px;
  font-weight: 500;
  text-align: center;
}

/* --- 10. SIGNATURE : LE « REÇU » ---------------------------------------
   GymPay imprime des reçus : les blocs de preuve et la garantie en
   reprennent la forme (papier perforé, bord déchiré, pointillés).        */
.receipt {
  --notch: var(--paper);      /* les encoches prennent la couleur du fond de section */
  position: relative;
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
}

.band--sand .receipt { --notch: var(--sand); }

/* les deux encoches latérales du ticket */
.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--notch);
  transform: translateY(-50%);
}
.receipt::before { inset-inline-start: -11px; }
.receipt::after  { inset-inline-end:   -11px; }

.receipt__stamp {
  display: inline-block;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .5px;
  color: var(--blue);
  background: var(--blue-wash);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.receipt__who {
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  color: var(--blue-deep);
  margin-top: 12px;
}

/* Marqueur des textes à remplacer par de vrais témoignages */
.todo {
  display: block;
  background: #FFF4CC;
  border: 1px dashed #E0A800;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
  color: #8A6100;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* --- 11. BLOCS FONCTIONNALITÉS (screenshot + texte) --------------------- */
.feature { margin-bottom: 38px; }
.feature:last-child { margin-bottom: 0; }

.feature__num {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  font-size: .8rem;
  color: var(--blue);
  background: var(--blue-wash);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 10px;
}

.feature__text p { color: var(--ink-soft); }

/* Mockup de téléphone en CSS pur — aucun fichier de cadre à charger */
.phone {
  width: 100%;
  max-width: 270px;
  margin: 0 auto 18px;
  border: 9px solid #0F1B2E;
  border-radius: 30px;
  overflow: hidden;
  background: #0F1B2E;
  box-shadow: 0 12px 30px rgba(11, 27, 51, .22);
}

.phone img { border-radius: 21px; }

.checks { list-style: none; margin: 12px 0 0; padding: 0; }

.checks li {
  position: relative;
  padding-inline-start: 28px;
  margin-bottom: 8px;
  font-weight: 500;
}

.checks li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  color: var(--green);
  font-size: .75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- 12. OFFRE / PRIX --------------------------------------------------- */
.price {
  background: linear-gradient(160deg, var(--blue-deep) 0%, #1E3FA8 100%);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow);
}

.price__old {
  font-size: 1.3rem;
  font-weight: 700;
  color: #9DB4EE;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.price__now {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 17vw, 4.6rem);
  line-height: 1.05;
  color: #FFB27A;
  margin-block: 2px 6px;
}

.price__now span { font-size: .38em; color: #fff; }

.price__note { color: #C9D8FA; font-size: .95rem; }

/* --- 13. FORMULAIRE ----------------------------------------------------- */
.formcard {
  border: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
  scroll-margin-top: 16px;
}

.formcard__head {
  background: var(--orange);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  text-align: center;
  padding: 13px 16px;
}

.formcard__body { padding: 18px 16px 20px; }

.field { margin-bottom: 15px; }

.field label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
}

.field .req { color: var(--orange); }

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--sand);
  font-family: inherit;
  font-size: 16px;              /* < 16px déclencherait un zoom auto sur iOS */
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}

.field textarea { min-height: 96px; resize: vertical; line-height: 1.7; }

.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  background: var(--paper);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.field input::placeholder,
.field textarea::placeholder { color: #9AA7BC; }

.field.is-bad input,
.field.is-bad textarea { border-color: #DC2626; background: #FEF2F2; }

.field__err {
  display: none;
  color: #DC2626;
  font-size: .85rem;
  font-weight: 700;
  margin-top: 5px;
}

.field.is-bad .field__err { display: block; }

/* Piège à robots : invisible pour l'humain, sans display:none (que certains
   bots détectent), et retiré de l'ordre de tabulation. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}


.form__note {
  text-align: center;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: 11px;
}

.form__alert {
  display: none;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  border-radius: 10px;
  padding: 11px 13px;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 13px;
}

.form__alert.is-on { display: block; }

/* --- 14. CTA COLLANT (mobile uniquement) -------------------------------- */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 40;
  padding: 9px var(--gutter) calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform .25s ease;
}


.sticky.is-on { transform: translateY(0); }
.sticky .btn  { min-height: 52px; font-size: 1rem; }

/* --- 15. PIED DE PAGE --------------------------------------------------- */
.foot {
  background: var(--ink);
  color: #94A6C4;
  padding-block: 30px;
  text-align: center;
  font-size: .88rem;
}

.foot .brandbox { border-color: #33456A; margin-bottom: 16px; }
.foot .brandname { color: #fff; }

.foot a { color: #fff; font-weight: 700; text-decoration: none; }

.foot__legal {
  font-size: .72rem;
  line-height: 1.75;
  color: #64789B;
  border-top: 1px solid #22334F;
  margin-top: 18px;
  padding-top: 16px;
}

/* --- 16. PAGE DE REMERCIEMENT ------------------------------------------ */
.thanks {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-block: 40px;
}

.thanks__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 20px;
  text-align: center;
  width: 100%;
}

.thanks__tick {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #DCFCE7;
  color: var(--green);
  font-size: 2.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  text-align: start;
}

.steps li {
  position: relative;
  padding-inline-start: 42px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps { counter-reset: step; }

/* ==========================================================================
   17. TABLETTE — à partir d'ici on n'ajoute que de la mise en page
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  body { font-size: 17px;
   }

  .band       { padding-block: 64px; }
  .band--tight{ padding-block: 40px; }

  .hero { padding-block: 48px 60px; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .card, .receipt { padding: 24px; }

  /* Screenshot et texte côte à côte, alternés une ligne sur deux */
  .feature {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 56px;
  }

  .feature:nth-child(even) .feature__media { order: 2; }

  .phone { margin-bottom: 0; max-width: 300px; }

  .video { margin-block: 30px; }

  .formcard__head { font-size: 1.15rem; padding: 16px; }
  .formcard__body { padding: 26px 24px 28px; }

  /* fit-content, sinon un flex de niveau bloc s'étirerait sur toute la largeur */
  .btn { width: fit-content; min-width: 320px; margin-inline: auto; }
  .formcard .btn { width: 100%; }

  .price { padding: 40px 30px; }

  /* Le CTA collant est une béquille mobile : inutile sur grand écran. */
  .sticky { display: none; }

  .thanks__card { padding: 48px 40px; }
}

/* ==========================================================================
   18. DESKTOP
   ========================================================================== */
@media (min-width: 1100px) {
  .hero .lede { font-size: 1.15rem; }

  .feature { grid-template-columns: 330px 1fr; gap: 60px; }

  .formcard { max-width: 640px; margin-inline: auto; }

  .alertbox { font-size: 1.08rem; padding: 24px; }
}