/* ==========================================================================
   Runflow — additions (séparées du build pour ne pas toucher aux fichiers
   générés). Section "reel" de marque, photos du process, accent contact.
   ========================================================================== */

/* --- Bug réel : sur mobile, le 2e bouton du hero ("Voir nos formules")
   passe sous le bord de l'écran. .hero a déjà un correctif mobile
   (min-height:auto au lieu de 100vh), mais .hero-content - l'enfant qui
   contient vraiment le titre/texte/boutons - garde min-height:100vh sans
   aucune exception mobile. Un enfant qui force sa propre hauteur d'écran
   entière repousse son parent à la même hauteur, quoi que dise le parent :
   le correctif sur .hero seul ne suffisait pas. --- */
@media (max-width: 1100px) {
  .hero-content { min-height: auto !important; }
}

/* --- Navbar desktop (état haut de page, non scrollé) jugée trop grande à
   l'usage - 76px de haut. Rapprochée de l'état "scrolled" (58px) pour une
   barre plus compacte dès le départ, cohérente sur toute la page. --- */
@media (min-width: 769px) {
  .navbar { height: 62px !important; }
  .nav-cta { padding: 9px 16px !important; }
}

/* --- Bug réel : #navMenu (menu mobile) porte les classes "nav-pill" ET
   "nav-pill-mobile". main.css dit .nav-pill-mobile{display:none}, mais
   style.css dit .nav-pill{display:flex} SANS media query - même spécificité
   (une classe), donc c'est la règle chargée en dernier (style.css) qui
   gagne. Résultat : le menu mobile s'affiche en permanence, y compris sur
   desktop, superposé au menu desktop. Règle à 2 classes ci-dessous = plus
   spécifique que les deux règles à 1 classe en conflit, donc gagne
   toujours, peu importe l'ordre de chargement. :not(.open) pour ne pas
   interférer avec l'ouverture du menu sur mobile. --- */
.nav-pill.nav-pill-mobile:not(.open) { display: none; }

/* --- Canvas de particules du hero (#heroParticles, injecté en JS) : tournait
   à pleine opacité alors que le second canvas (#heroCanvas) est à 25%
   (antiblur.css) - trop dominant à côté. Baissé pour rester discret sans le
   supprimer. --- */
#heroParticles { opacity: .35; }

/* --- Bandeau vidéo de marque (remplace l'ancien programme Early Adopter) - */
.brand-reel { padding-top: 8px; padding-bottom: 8px; }
.brand-reel-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0e1a;
  box-shadow: 0 20px 60px -20px rgba(59, 165, 184, 0.25);
}
.brand-reel-video,
.brand-reel-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-reel-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-reel-video { display: none; }
  .brand-reel-poster { display: block; }
}
.brand-reel-frame { transition: box-shadow .4s ease, border-color .4s ease; }
.brand-reel-frame:hover {
  border-color: rgba(59, 165, 184, 0.35);
  box-shadow: 0 24px 70px -18px rgba(59, 165, 184, 0.4);
}

/* --- Photos dans les étapes du processus --------------------------------- */
.process-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .4s ease;
}
.process-step:hover .process-photo {
  transform: scale(1.03);
  border-color: rgba(59, 165, 184, 0.3);
}

/* --- Simulateur de prix ---------------------------------------------------- */
.pcalc {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.pcalc-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.pcalc-block {
  background: linear-gradient(160deg, #1a2735, #1f2f3d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.04);
}
.pcalc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.pcalc-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #e8eaf0;
  margin: 0 0 16px;
}
.pcalc-block-head .pcalc-block-title { margin-bottom: 0; }
.pcalc-block-sub {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  color: rgba(232, 234, 240, 0.5);
  margin-left: 4px;
}
.pcalc-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(59, 165, 184, 0.14);
  border: 1px solid rgba(59, 165, 184, 0.3);
  color: #3ba5b8;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Period toggle - visually mirrors .packs-toggle but is fully self-contained */
.pcalc-period {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px;
}
.pcalc-period-btn {
  border: none;
  background: none;
  color: rgba(232, 234, 240, 0.65);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.pcalc-period-btn span {
  margin-left: 5px;
  font-size: 0.68rem;
  color: #5ab947;
  font-weight: 700;
}
.pcalc-period-btn.active { background: #3ba5b8; color: #05161a; }
.pcalc-period-btn.active span { color: #05161a; opacity: 0.75; }

/* Pack radio cards */
.pcalc-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pcalc-pack { display: block; cursor: pointer; }
.pcalc-pack input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pcalc-pack-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pcalc-pack input:checked + .pcalc-pack-body {
  border-color: #3ba5b8;
  background: rgba(59, 165, 184, 0.09);
  transform: translateY(-2px);
}
.pcalc-pack input:focus-visible + .pcalc-pack-body { outline: 2px solid #3ba5b8; outline-offset: 2px; }
.pcalc-pack-name { font-size: 0.86rem; font-weight: 700; color: #e8eaf0; }
.pcalc-pack-price { font-size: 0.82rem; color: rgba(232, 234, 240, 0.6); }
.pcalc-pack-price em { font-style: normal; font-size: 1.15rem; font-weight: 800; color: #5ecad6; }
.pcalc-pack-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  background: #3ba5b8;
  color: #05161a;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Options checklist */
.pcalc-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pcalc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pcalc-opt:hover { border-color: rgba(59, 165, 184, 0.3); }
.pcalc-opt input { accent-color: #3ba5b8; width: 16px; height: 16px; flex-shrink: 0; }
.pcalc-opt-name { flex: 1; font-size: 0.82rem; color: #e8eaf0; }
.pcalc-opt-price { font-style: normal; font-size: 0.76rem; font-weight: 700; color: rgba(232, 234, 240, 0.55); white-space: nowrap; }
.pcalc-opt:has(input:checked) { border-color: #3ba5b8; background: rgba(59, 165, 184, 0.08); }
.pcalc-opt:has(input:checked) .pcalc-opt-price { color: #5ecad6; }

/* Summary panel */
.pcalc-summary { position: sticky; top: 96px; align-self: start; }
.pcalc-summary-inner {
  background: linear-gradient(160deg, #16222e, #0d1720);
  border: 1px solid rgba(59, 165, 184, 0.22);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 36px -12px rgba(59, 165, 184, 0.22), inset 0 1px rgba(255, 255, 255, 0.05);
}
.pcalc-summary-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232, 234, 240, 0.5);
  margin-bottom: 6px;
}
.pcalc-summary-formule { font-size: 1rem; font-weight: 700; color: #e8eaf0; margin-bottom: 10px; }
.pcalc-summary-total { display: flex; align-items: baseline; gap: 6px; }
.pcalc-summary-amount {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, #3ba5b8, #5ecad6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.25s ease;
  display: inline-block;
}
.pcalc-summary-total.pcalc-flash .pcalc-summary-amount { animation: pcalcPulse 0.45s ease; }
.pcalc-summary-unit { font-size: 1.1rem; font-weight: 700; color: rgba(232, 234, 240, 0.7); }
.pcalc-summary-unit small { font-size: 0.7rem; font-weight: 600; }
.pcalc-summary-annual {
  margin-top: 6px;
  font-size: 0.74rem;
  color: rgba(232, 234, 240, 0.55);
  line-height: 1.4;
}
.pcalc-summary-breakdown {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pcalc-summary-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  color: rgba(232, 234, 240, 0.7);
}
.pcalc-summary-breakdown li span:last-child { flex-shrink: 0; color: #e8eaf0; font-weight: 600; }
.pcalc-breakdown-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-weight: 700;
  color: #e8eaf0 !important;
}
.pcalc-breakdown-total span:last-child { color: #5ecad6 !important; }
.pcalc-summary-activation {
  margin-top: 14px;
  font-size: 0.78rem;
  color: rgba(232, 234, 240, 0.65);
}
.pcalc-summary-activation strong { color: #e8eaf0; }
.pcalc-summary-activation span { color: rgba(232, 234, 240, 0.45); }
.pcalc-cta { margin-top: 16px; }
.pcalc-note {
  margin-top: 10px;
  font-size: 0.68rem;
  color: rgba(232, 234, 240, 0.4);
  text-align: center;
}

@keyframes pcalcPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (max-width: 900px) {
  .pcalc { grid-template-columns: 1fr; }
  .pcalc-summary { position: static; }
  .pcalc-packs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pcalc-options { grid-template-columns: 1fr; }
}

/* --- Témoignages ------------------------------------------------------------ */
.testimonials {
  display: flex;
  justify-content: center;
}
.testimonial-card {
  max-width: 640px;
  width: 100%;
  background: linear-gradient(160deg, #1a2735, #1f2f3d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 40px 36px 32px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.04);
  margin: 0;
}
.testimonial-quote-mark { color: #3ba5b8; opacity: 0.55; }
.testimonial-text {
  margin: 18px 0 26px;
  font-family: var(--font-display, inherit);
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
  color: #e8eaf0;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px;
  flex-shrink: 0;
}
.testimonial-name { display: block; font-size: 0.92rem; font-weight: 700; color: #e8eaf0; }
.testimonial-source { display: block; font-size: 0.76rem; color: rgba(232, 234, 240, 0.5); }

/* --- Correctif : menu mobile transparent -----------------------------------
   .nav-pill{background:transparent!important} (règle du pill desktop, dans
   main-*.css) s'applique aussi à #navMenu car il partage la classe "nav-pill".
   Résultat : le panneau de navigation mobile ouvert est invisible et le texte
   se superpose au contenu de la page. On force un fond opaque avec une
   spécificité plus élevée (3 classes) pour regagner la priorité. --- */
@media (max-width: 768px) {
  .nav-pill.nav-pill-mobile.open {
    background: #0c1218f7 !important;
  }
}

/* --- Correctif : .stats-grid reste en 2 colonnes jusqu'aux petits mobiles -
   Aucune règle <768px dans main.css : sur iPhone SE (375px) et plus petit,
   4 statistiques en grille 2x2 se tassent. On repasse en 1 colonne. --- */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .stat {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--hairline);
    padding-top: 20px;
  }
  .stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* --- Correctif : tap target du CTA "Devis" sous 480px trop petit (~26px de
   hauteur, sous le seuil d'accessibilité tactile de 44px recommandé). --- */
@media (max-width: 480px) {
  .nav-cta {
    padding: 12px 16px !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
}