/* GoodSpeakVR, site Entreprises v2 (cahier des charges de Thierry, 28/09/2026).
   Uniquement les nouveautés : sélecteur, menu, blocs 3 et 7, fenêtre démo. */

/* ── Sélecteur Entreprises / Particuliers, au-dessus du menu ── */
:root { --audience-h: 38px; }
.audience-switch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--audience-h);
  z-index: 1003;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  background: #05060c;
  border-bottom: 1px solid rgba(91, 138, 255, 0.18);
  font-family: "Space Grotesk", sans-serif;
}
.audience-switch a {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(243, 244, 247, 0.6);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.audience-switch a:hover { color: #fff; }
.audience-switch a.is-active { color: #fff; border-bottom-color: #34d8ff; }
.audience-switch a:focus-visible { outline: 2px solid #34d8ff; outline-offset: -2px; }
.global-header { top: var(--audience-h); }
body { padding-top: var(--audience-h); }
body.is-immersive .audience-switch { display: none; }

/* ── Menu : tout sur une ligne, bouton « Réserver une démo » en bout de menu ── */
.global-nav { gap: 18px; padding: 8px 10px 8px 22px; }
.global-nav a, .global-nav .dropdown-toggle { white-space: nowrap; }
.global-nav .nav-demo-btn {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.global-nav .nav-demo-btn::after { display: none; }
.global-nav .lang-switcher { margin-left: 0; }
@media (min-width: 901px) {
  .global-header { gap: 14px; }
  .global-nav { flex-wrap: nowrap; }
}
/* Écrans d'ordinateur portable : langues réduites aux drapeaux, menu resserré */
@media (max-width: 1480px) and (min-width: 901px) {
  .global-nav { gap: 14px; }
  .global-nav a, .global-nav .dropdown-toggle { font-size: 0.85rem; }
  .lang-switcher a { font-size: 0; padding: 5px 6px; gap: 0; }
  .lang-switcher .lang-flag { font-size: 1rem; }
  .lang-switcher .separator { display: none; }
}
@media (max-width: 1120px) and (min-width: 901px) {
  .global-nav { gap: 10px; padding-left: 16px; }
  .global-nav a, .global-nav .dropdown-toggle { font-size: 0.8rem; }
  .global-nav .nav-demo-btn { padding: 8px 12px; font-size: 0.8rem; }
  .global-nav .nav-client-link { padding-left: 10px !important; padding-right: 10px !important; }
  /* Tablette en paysage : le bouton flottant « Démo » prend le relais */
  .global-nav .nav-demo-btn { display: none; }
  .global-nav { padding-right: 16px; }
}
@media (max-width: 900px) {
  .global-nav { padding: calc(100px + var(--audience-h)) 20px 40px; }
  .global-nav .nav-demo-btn { font-size: 1.1rem !important; padding: 14px 28px !important; margin-top: 18px !important; }
}

/* ── Bloc 3 : le jour J ── */
.jour-j, .cas { padding: clamp(60px, 8vw, 110px) 20px; }
.jour-j__inner, .cas__inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.jour-j h2, .cas h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
}
.jour-j__intro, .cas__intro {
  font-size: 1.12rem;
  color: rgba(243, 244, 247, 0.7);
  max-width: 640px;
  margin: 0 auto 44px;
  line-height: 1.6;
}
.jour-j__grid, .cas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}
.jour-j__card, .cas__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 138, 255, 0.22);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jour-j__card h3, .cas__card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.12rem;
  color: #34d8ff;
  margin: 0 0 4px;
}
.jour-j__card p, .cas__card p {
  margin: 0;
  color: rgba(243, 244, 247, 0.86);
  line-height: 1.6;
  font-size: 1rem;
}
.jour-j__conclusion {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  max-width: 820px;
  margin: 56px auto 16px;
  text-wrap: balance;
}
.jour-j__final {
  font-size: 1.12rem;
  color: #34d8ff;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Bloc 4 ── */
.suite-formation__lead {
  text-align: center;
  color: #0f172a;
  max-width: 820px;
  margin: 0 auto 28px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
}
.suite-formation__lead strong { color: #0fa8c9; }

/* ── Bloc 7 : trois cas ── */
.cas__card h3 { font-size: 1.3rem; color: #fff; }
.cas__card { border-top: 3px solid #34d8ff; }
.cas__cta { margin-top: 44px; }

/* ── Bloc 9 : citation d'Edmond ── */
.edmond-quote {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 3px solid #34d8ff;
  background: rgba(52, 216, 255, 0.07);
  border-radius: 0 12px 12px 0;
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  color: #fff;
}
.edmond-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 0.9rem; color: #34d8ff; }

/* ── Blocs 12 et 13 ── */
.deux-boutons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 auto 40px; }
.independants { text-align: center; margin: 60px auto 0; color: rgba(243, 244, 247, 0.75); font-size: 1rem; }
.independants a { color: #34d8ff; font-weight: 600; white-space: nowrap; }
.force-badge { white-space: nowrap; }

/* ── Bloc 16 ── */
.thierry .thierry__chiffres, p.thierry__chiffres { font-weight: 700; color: #34d8ff; margin: -14px 0 30px; font-size: 1.02rem; letter-spacing: 0.01em; }

/* ── Bloc 22 : fenêtre « Réserver une démo » ── */
.demo-modal { padding: 16px; }
.demo-modal__container { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 34px 32px; width: min(540px, 100%); }
.demo-modal__header { margin-bottom: 22px; }
.demo-modal__header h3 { color: #fff; }
.demo-modal .form-group select,
.demo-modal .form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
}
.demo-modal .form-group select option { color: #0f172a; }
.demo-modal .form-group textarea { resize: vertical; min-height: 76px; }
.demo-modal .form-group textarea::placeholder { color: rgba(243, 244, 247, 0.4); }
.demo-modal .form-group textarea:focus { outline: none; border-color: var(--color-accent, #5b8aff); }
.demo-modal__close:focus-visible, .demo-modal .btn:focus-visible { outline: 2px solid #34d8ff; outline-offset: 2px; }
.demo-modal__status { margin: 4px 0 0; font-size: 0.92rem; text-align: center; min-height: 1.3em; }
.demo-modal__status.is-error { color: #ff8f8f; }
.demo-modal__merci { text-align: center; padding: 24px 0 8px; color: #fff; }
.demo-modal__merci h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.6rem; margin-bottom: 10px; }
.demo-modal__merci p { color: rgba(243, 244, 247, 0.75); line-height: 1.6; }
.demo-modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 900px) {
  .jour-j__grid, .cas__grid { grid-template-columns: 1fr; }
  .demo-modal__container { padding: 28px 20px; }
}
@media (max-width: 520px) {
  .audience-switch a { padding: 0 16px; }
  .demo-modal .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) and (min-width: 901px) {
  .global-header { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .global-nav { gap: 9px; padding-left: 14px; padding-right: 12px; }
  .global-nav a, .global-nav .dropdown-toggle { font-size: 0.78rem; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .global-header { padding-left: 8px; padding-right: 8px; }
  .global-nav { gap: 6px; padding-left: 10px; padding-right: 8px; }
  .global-nav a, .global-nav .dropdown-toggle { font-size: 0.72rem; }
  .global-nav .nav-client-link { padding-left: 8px !important; padding-right: 8px !important; }
  .brand { padding: 6px 10px; }
}

/* ── Menu Blog : libellés longs sur deux lignes ── */
.dropdown-menu--blog { min-width: 330px; }
.dropdown-menu--blog a { white-space: normal; line-height: 1.35; }

/* ── Bloc 10 : la phrase est devenue longue, on l'allège ── */
.scenario-lead { display: block; font-weight: 300; font-size: 1rem; line-height: 1.6; }
.scenario-lead strong { font-weight: 700; }

/* ── Bloc 13 : carte Particuliers (courte) : à sa hauteur naturelle, centrée face à la carte Entreprises ── */
.force-card--porte { align-self: center; height: auto !important; padding-top: 44px !important; padding-bottom: 34px !important; }
.force-card--porte .card-cta { margin-top: 8px !important; }
.force-card--porte p { margin-bottom: 24px !important; }

@media (max-width: 560px) {
  #mode-hybrid-btn, #mode-saas-btn, #pricing-mode-saas, #pricing-mode-hybrid { padding: 10px 14px !important; font-size: 0.82rem !important; line-height: 1.25; }
}

/* ── Pages internes : le menu est plus large qu'avant et passait sur les titres centrés ── */
@media (min-width: 901px) {
  html:not([data-page="index"]):not([data-page="particuliers"]) body { padding-top: calc(var(--audience-h) + 54px); }
}

/* ── Particuliers : 4 formules ── */
.pwl-plans.pwl-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pwl-plans--4 .pwl-plan { padding: 26px 16px 22px; }
.pwl-plans--4 .pwl-plan__price { font-size: 1.8rem; }
@media (max-width: 1100px) { .pwl-plans.pwl-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pwl-plans.pwl-plans--4 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ── Bouton flottant « Démo » : il descendait le long de la page et passait sur les textes.
   Masqué quand le menu porte déjà « Réserver une démo », sinon fixe en bas à droite. ── */
@media (min-width: 1121px) { .floating-demo { display: none !important; } }
@media (max-width: 1120px) { .floating-demo { top: auto !important; bottom: 20px !important; right: 16px !important; } }

/* ── Bloc 5 : les deux cartes (ordinateur / casque VR) : titres de longueurs différentes, images alignées en bas ── */
.dual-video__card { display: flex; flex-direction: column; }
.dual-video__card h3 { padding: 22px 18px 0; margin-bottom: 18px !important; line-height: 1.3; text-wrap: balance; }
.dual-video__card .dual-video__media { margin-top: auto; }

/* ── Menu resserré : les libellés de langue réapparaissaient sous 1120 px et chevauchaient les drapeaux ── */
@media (max-width: 1480px) and (min-width: 901px) {
  .global-nav .lang-switcher a { font-size: 0 !important; }
  .global-nav .lang-switcher .lang-flag { font-size: 1rem !important; }
}

/* ── Téléphone : bloc final (les tailles étaient inversées : sur-titre et texte plus gros que le titre) ── */
@media (max-width: 768px) {
  .final-cta .final-cta__content > h2 { font-size: 1.65rem !important; line-height: 1.25 !important; }
  .final-cta .final-cta__content > p { font-size: 1.02rem !important; line-height: 1.6 !important; }
  .final-cta .final-cta__content > p:first-child { font-size: 0.76rem !important; letter-spacing: 0.12em !important; }
  .final-cta .final-cta__content > p:last-child { font-size: 0.86rem !important; }
  /* Abonnements : le titre « Personnalisation » touchait son étiquette */
  .pricing-card > div[style*="space-between"] { flex-wrap: wrap; gap: 8px 12px; }
  .pricing-card > div[style*="space-between"] > span { white-space: nowrap; }
}
/* Particuliers : sur téléphone la formule recommandée passait en premier, on garde l'ordre des prix */
.pwl-plans--4 .pwl-plan.is-featured { order: 0 !important; }
/* Bas de page : la dernière ligne passait sous le bouton flottant « Démo » */
@media (max-width: 1120px) { .footer { padding-bottom: 84px !important; } }

/* 16/10/2026 : « Blog » du menu est un lien vers /blog/ ; garder la flèche du menu déroulant
   au lieu du soulignement animé des liens (.global-nav a::after). */
.global-nav a.dropdown-toggle::after {
  content: "\25BE"; position: static; width: auto; height: auto; background: none;
  transform: none; font-size: 0.8em; transition: transform 0.3s;
}
.global-nav .nav-item.dropdown:hover a.dropdown-toggle::after { transform: rotate(180deg); width: auto; }