/*
 * SYNIAL — expérience mobile des pages vitrines
 * Chargé sous 768 px, ainsi que sur les téléphones en paysage, depuis base.html.
 * Les styles desktop restent dans marketing.css et ne sont pas modifiés ici.
 */

:root {
  --mobile-gutter: 18px;
  --mobile-section-space: 64px;
  --mobile-card-radius: 12px;
  --mobile-header-height: 64px;
}

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--mobile-header-height) + 12px);
}

body.marketing-page {
  overflow-x: hidden;
  font-size: 16px;
}

.marketing-page .section-inner {
  width: calc(100% - (2 * var(--mobile-gutter)));
}

.marketing-page p,
.marketing-page li {
  text-wrap: pretty;
}

.marketing-page a,
.marketing-page button,
.marketing-page input,
.marketing-page textarea {
  -webkit-tap-highlight-color: transparent;
}

.marketing-page .button,
.marketing-page .text-link,
.marketing-page .nav-links a,
.marketing-page .contact-links a,
.marketing-page .footer-links a,
.marketing-page .footer-social-links a {
  min-height: 44px;
}

.marketing-page .marketing-section,
.marketing-page .contact-section,
.trust-page .trusted-logo-section,
.trust-page .event-gallery-section,
.play-page .play-intro-section,
.play-page .scenarios-section,
.legal-page .content-section {
  padding-block: var(--mobile-section-space);
}

.marketing-page .section-heading h2,
.marketing-page .marketing-section h2 {
  font-size: clamp(2.05rem, 9.4vw, 2.55rem);
  line-height: 1.06;
  text-wrap: balance;
}

.marketing-page .eyebrow {
  font-size: 0.68rem;
}

/* Header et navigation */

.marketing-page .site-header {
  min-height: var(--mobile-header-height);
  padding-top: env(safe-area-inset-top, 0px);
}

.marketing-page .nav-shell {
  width: calc(100% - 28px);
  min-height: calc(var(--mobile-header-height) - 1px);
}

.marketing-page .brand-logo {
  width: 34px;
  height: 32px;
}

.marketing-page .brand-text {
  font-size: 0.94rem;
}

.marketing-page .nav-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--marketing-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.marketing-page .nav-toggle svg {
  width: 21px;
  height: 21px;
}

.marketing-page .nav-panel,
.marketing-page .nav-panel.is-open {
  position: fixed;
  z-index: 100;
  inset: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)) 0 0;
  width: 100%;
  height: calc(100dvh - var(--mobile-header-height) - env(safe-area-inset-top, 0px));
  padding: 24px var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background: var(--marketing-bg);
  box-shadow: none;
  overflow-y: auto;
}

.marketing-page .nav-panel.is-open {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.marketing-page .nav-panel.is-open .nav-links {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-page .site-header.is-open .nav-links,
.marketing-page .site-header.is-open .nav-actions {
  background: transparent;
}

.marketing-page .nav-links a {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 2px;
  border-bottom: 1px solid var(--marketing-line);
  color: var(--marketing-ink);
  font-size: 1.08rem;
  font-weight: 600;
}

.marketing-page .nav-panel.is-open .nav-links a,
.marketing-page .nav-panel.is-open .nav-links a:hover,
.marketing-page .nav-panel.is-open .nav-links a[aria-current="page"] {
  background: transparent;
}

.marketing-page .nav-links a::after {
  display: none;
}

.marketing-page .nav-links a[aria-current="page"] {
  color: var(--marketing-teal);
}

.marketing-page .nav-panel.is-open .nav-actions {
  display: block;
  padding: 0;
  border: 0;
}

.marketing-page .nav-actions .button {
  width: 100%;
  min-height: 54px;
  justify-content: space-between;
  padding-inline: 20px;
}

/* Héros communs */

.marketing-page .marketing-hero h1,
.marketing-page .page-hero h1 {
  max-width: 100%;
  font-size: clamp(2.55rem, 11.2vw, 3rem);
  line-height: 1.01;
  text-wrap: balance;
}

.marketing-page .marketing-hero .hero-lead,
.marketing-page .page-hero p:not(.eyebrow) {
  font-size: 1rem;
  line-height: 1.58;
}

.marketing-page .home-hero-layout,
.marketing-page .solutions-hero-layout,
.marketing-page .about-hero-layout {
  min-height: 0;
  gap: 28px;
  padding-block: 36px 42px;
}

.marketing-page .home-hero-copy,
.marketing-page .solutions-hero-copy,
.marketing-page .about-hero-copy {
  gap: 18px;
}

.marketing-page .hero-actions {
  gap: 12px;
  margin-top: 4px;
}

.marketing-page .hero-actions .button {
  min-height: 52px;
}

.marketing-page .page-hero {
  padding-block: 42px 48px;
}

.marketing-page .page-hero .illustrated-hero-grid {
  grid-template-columns: 1fr;
  gap: 26px;
}

.marketing-page .page-hero .character-scene {
  min-height: 190px;
}

.marketing-page .page-hero .character-scene::before {
  width: 205px;
  height: 165px;
}

.marketing-page .page-hero .character-scene img {
  width: min(100%, 205px);
  max-height: 190px;
}

/* Rails tactiles communs */

.marketing-page .experience-path,
.marketing-page .crisis-editorial-list,
.marketing-page .why-list,
.solutions-page .license-options,
.solutions-page .build-module-layout,
.solutions-page .support-module-grid,
.solutions-page .pedagogy-cycle,
.play-page .play-parameter-grid,
.play-page .source-scenario-grid,
.about-page .pedagogy-principles,
.trust-page .training-gallery-grid {
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  -webkit-overflow-scrolling: touch;
}

.marketing-page .experience-path::-webkit-scrollbar,
.marketing-page .crisis-editorial-list::-webkit-scrollbar,
.marketing-page .why-list::-webkit-scrollbar,
.solutions-page .license-options::-webkit-scrollbar,
.solutions-page .build-module-layout::-webkit-scrollbar,
.solutions-page .support-module-grid::-webkit-scrollbar,
.solutions-page .pedagogy-cycle::-webkit-scrollbar,
.play-page .play-parameter-grid::-webkit-scrollbar,
.play-page .source-scenario-grid::-webkit-scrollbar,
.about-page .pedagogy-principles::-webkit-scrollbar,
.trust-page .training-gallery-grid::-webkit-scrollbar {
  display: none;
}

/* Accueil */

.home-page .home-hero-layout {
  gap: 12px;
  padding-block: 34px 24px;
}

.home-page .home-hero-copy h1 {
  max-width: 11ch;
}

.home-page .home-hero .hero-actions .text-link,
.home-page .hero-proof-line {
  display: none;
}

.home-page .home-hero-visual {
  min-height: 150px;
  padding: 0;
  border: 0;
}

.home-page .home-hero-visual .hero-character-stage::before {
  width: 210px;
  height: 128px;
}

.home-page .home-hero-visual .hero-character-stage::after {
  right: 14%;
  bottom: 12px;
  left: 20%;
}

.home-page .home-hero-visual .sketch-character {
  width: 205px;
  max-height: 148px;
}

.home-page .evidence-line {
  min-height: 0;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  padding-block: 24px;
}

.home-page .evidence-line > div {
  display: grid;
  gap: 5px;
  padding: 0;
}

.home-page .evidence-line > div strong {
  font-size: 2.25rem;
}

.home-page .evidence-line > p {
  padding: 2px 0 2px 16px;
  border: 0;
  border-left: 1px solid var(--marketing-line);
  font-size: 0.87rem;
  line-height: 1.55;
}

.home-page .evidence-line .text-link {
  display: none;
}

.home-page .platform-editorial,
.home-page .heading-split,
.home-page .feedback-editorial,
.home-page .story-editorial,
.home-page .why-editorial {
  gap: 32px;
}

.home-page .platform-content .section-heading h2,
.home-page .story-copy h2,
.home-page .why-editorial .section-heading h2 {
  margin-bottom: 20px;
}

.home-page .experience-path {
  display: flex;
  gap: 12px;
  margin: 30px calc(-1 * var(--mobile-gutter)) 0 0;
  padding: 0 var(--mobile-gutter) 4px 0;
  border: 0;
  overflow-x: auto;
}

.home-page .experience-path li {
  flex: 0 0 calc(100% - 42px);
  min-height: 190px;
  align-content: start;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--marketing-line);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
  scroll-snap-align: start;
}

.home-page .experience-path p {
  font-size: 0.92rem;
}

.home-page .heading-split {
  margin-bottom: 30px;
}

.home-page .heading-split > p {
  padding-left: 18px;
  font-size: 0.94rem;
}

.home-page .crisis-editorial-list {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 3px 0;
  border: 0;
  overflow-x: auto;
}

.home-page .crisis-line {
  flex: 0 0 min(76vw, 290px);
  min-height: 155px;
  grid-template-columns: 28px 32px 1fr;
  gap: 12px;
  align-content: center;
  padding: 20px;
  border: 1px solid var(--marketing-line);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
  scroll-snap-align: start;
}

.home-page .crisis-line p {
  grid-column: 2 / -1;
  font-size: 0.9rem;
}

.home-page .feedback-section {
  padding-block: 58px;
}

.home-page .feedback-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 18px;
  align-items: end;
  padding: 0;
  border: 0;
}

.home-page .feedback-stat .eyebrow {
  grid-column: 1 / -1;
}

.home-page .feedback-stat > strong {
  margin: 12px 0 0;
  font-size: 4.75rem;
}

.home-page .feedback-stat > p:last-child {
  padding-bottom: 4px;
  font-size: 0.93rem;
}

.home-page .feedback-quotes {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding-right: var(--mobile-gutter);
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.home-page .feedback-quotes::-webkit-scrollbar {
  display: none;
}

.home-page .feedback-quotes blockquote,
.home-page .training-proof {
  flex: 0 0 min(80vw, 310px);
  min-height: 164px;
  align-content: center;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mobile-card-radius);
  background: rgba(255, 255, 255, 0.04);
  scroll-snap-align: start;
}

.home-page .feedback-quotes blockquote {
  display: grid;
  font-size: 1.3rem;
}

.home-page .training-proof {
  display: flex;
  align-items: center;
}

.home-page .training-proof strong {
  font-size: 3rem;
}

.home-page .story-visual {
  display: none;
}

.home-page .story-copy > p:not(.eyebrow) {
  margin-bottom: 14px;
  font-size: 0.98rem;
  line-height: 1.65;
}

.home-page .why-list {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 3px 0;
  border: 0;
  overflow-x: auto;
}

.home-page .why-list > div {
  flex: 0 0 min(76vw, 286px);
  min-height: 164px;
  align-content: start;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--marketing-line);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
  scroll-snap-align: start;
}

.home-page .why-list p {
  grid-column: 2;
}

/* Nos solutions */

.solutions-page .solutions-hero-copy h1 {
  max-width: 12ch;
}

.solutions-page .solutions-hero-copy .text-link,
.solutions-page .solution-composer-visual,
.solutions-page .solution-roadmap {
  display: none;
}

.solutions-page .solutions-hero-layout {
  padding-block: 38px 48px;
}

.solutions-page .solution-stage {
  padding-block: 62px;
}

.solutions-page .stage-heading {
  gap: 20px;
  margin-bottom: 32px;
}

.solutions-page .stage-number {
  width: auto;
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding-top: 9px;
  border-top: 1px solid var(--marketing-teal);
}

.solutions-page .stage-number strong {
  font-size: 1.6rem;
}

.solutions-page .stage-heading > div:last-child > p:last-child {
  font-size: 0.94rem;
  line-height: 1.62;
}

.solutions-page .mode-fork {
  gap: 10px;
  margin-bottom: 44px;
  border: 0;
}

.solutions-page .mode-path,
.solutions-page .mode-path-intervention {
  min-height: 132px;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  padding: 18px;
  border: 1px solid var(--marketing-line);
  border-left: 3px solid var(--marketing-teal);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
}

.solutions-page .mode-path:first-child {
  border-bottom: 1px solid var(--marketing-line);
}

.solutions-page .mode-path-index {
  grid-column: 1 / -1;
}

.solutions-page .mode-detail-layout {
  gap: 44px;
}

.solutions-page .track-heading {
  gap: 10px;
}

.solutions-page .track-heading h3 {
  font-size: 2rem;
}

.solutions-page .license-options {
  display: flex;
  gap: 12px;
  margin: 26px calc(-1 * var(--mobile-gutter)) 0 0;
  padding: 0 var(--mobile-gutter) 4px 0;
  border: 0;
  overflow-x: auto;
}

.solutions-page .license-option {
  flex: 0 0 min(80vw, 300px);
  min-height: 206px;
  align-content: start;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--marketing-line);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
  scroll-snap-align: start;
}

.solutions-page .license-duration {
  grid-template-columns: 28px auto 1fr;
}

.solutions-page .license-option h4 {
  font-size: 1.02rem;
}

.solutions-page .license-option p,
.solutions-page .intervention-services li,
.solutions-page .module-features li,
.solutions-page .solution-module > p,
.solutions-page .scenario-module-copy > div > p:last-child {
  font-size: 0.9rem;
  line-height: 1.56;
}

.solutions-page .intervention-track {
  padding: 38px 0 0;
}

.solutions-page .intervention-services li {
  min-height: 50px;
}

.solutions-page .mode-clarification {
  margin-top: 36px;
  padding: 16px;
}

.solutions-page .build-module-layout,
.solutions-page .support-module-grid {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 5px 0;
  overflow-x: auto;
}

.solutions-page .build-module-layout > .solution-module,
.solutions-page .support-module-grid > .solution-module {
  flex: 0 0 min(84vw, 322px);
  padding: 22px 20px;
  scroll-snap-align: start;
}

.solutions-page .module-topline {
  margin-bottom: 24px;
}

.solutions-page .solution-module h3 {
  font-size: 1.55rem;
}

.solutions-page .module-promise {
  padding-bottom: 18px;
}

.solutions-page .scenario-process li {
  grid-template-columns: 28px 1fr;
  padding-block: 10px;
}

.solutions-page .scenario-process small {
  grid-column: 2;
}

.solutions-page .identity-preview {
  display: none;
}

.solutions-page .composition-examples {
  display: none;
}

.solutions-page .pedagogy-intro {
  gap: 24px;
  margin-bottom: 32px;
}

.solutions-page .pedagogy-intro > p {
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.62;
}

.solutions-page .pedagogy-cycle {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 4px 0;
  border: 0;
  overflow-x: auto;
}

.solutions-page .pedagogy-cycle::before {
  display: none;
}

.solutions-page .pedagogy-cycle li,
.solutions-page .pedagogy-cycle li:first-child,
.solutions-page .pedagogy-cycle li + li {
  flex: 0 0 min(72vw, 276px);
  min-height: 220px;
  padding: 20px;
  border: 1px solid var(--marketing-line);
  border-radius: var(--mobile-card-radius);
  background: #ffffff;
  scroll-snap-align: start;
}

.solutions-page .cycle-icon {
  width: 42px;
  height: 42px;
  margin: 24px 0 18px;
}

/* Scénarios */

.play-page .play-hero .section-inner {
  gap: 22px;
}

.play-page .play-hero h1 {
  max-width: 9ch;
}

.play-page .play-hero p:not(.eyebrow) {
  padding-left: 18px;
  font-size: 1rem;
  line-height: 1.58;
}

.play-page .play-hero-character {
  width: 96px;
  margin-top: -12px;
}

.play-page .play-intro-section .split-layout {
  gap: 32px;
}

.play-page .play-parameter-grid {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 5px 0;
  overflow-x: auto;
}

.play-page .play-parameter-grid > div {
  flex: 0 0 min(72vw, 275px);
  min-height: 158px;
  padding: 20px;
  scroll-snap-align: start;
}

.play-page .scenario-toolbar {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}

.play-page .filter-chips {
  justify-content: flex-start;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.play-page .filter-chips span {
  flex: 0 0 auto;
  padding-inline: 12px;
}

.play-page .scenario-toolbar::after,
.trust-page .event-gallery-section .section-heading::after {
  content: "Glissez pour explorer  →";
  color: var(--marketing-teal);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.play-page .source-scenario-grid {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 6px 0;
  overflow-x: auto;
}

.play-page .source-scenario-card {
  flex: 0 0 min(84vw, 330px);
  min-height: 520px;
  align-self: stretch;
  scroll-snap-align: start;
}

.play-page .scenario-image {
  aspect-ratio: 1.45 / 1;
}

.play-page .scenario-card-content {
  min-height: 280px;
  padding: 18px;
}

.play-page .source-scenario-card:hover {
  transform: none;
}

/* Qui sommes-nous */

.about-page .about-hero-layout {
  gap: 24px;
  padding-bottom: 34px;
}

.about-page .about-hero-visual {
  min-height: 226px;
  padding: 0;
  border: 0;
}

.about-page .about-hero-visual > div::before {
  width: 225px;
  height: 170px;
}

.about-page .about-hero-visual img {
  width: 230px;
  max-height: 190px;
}

.about-page .about-hero-visual figcaption {
  padding-top: 14px;
  font-size: 0.7rem;
}

.about-page .about-manifesto {
  gap: 12px;
  margin-bottom: 48px;
  padding-bottom: 28px;
}

.about-page .about-manifesto p {
  font-size: 1.85rem;
}

.about-page .person-story {
  gap: 30px;
  padding-bottom: 60px;
}

.about-page .person-story + .person-story {
  padding-top: 60px;
}

.about-page .person-portrait {
  width: min(100%, 240px);
}

.about-page .person-portrait > img {
  height: 260px;
}

.about-page .person-narrative h2 {
  margin-bottom: 12px;
  font-size: 2.65rem;
}

.about-page .person-role {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 1rem;
}

.about-page .person-sketch {
  display: none;
}

.about-page .mobile-person-details {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.about-page .mobile-person-details[hidden] {
  display: none;
}

.about-page .mobile-person-details p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.68;
}

.about-page .mobile-disclosure-toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--marketing-line-strong);
  background: transparent;
  color: var(--marketing-teal);
  font: 700 0.82rem var(--font-body);
  text-align: left;
}

.about-page .mobile-disclosure-toggle::after {
  content: "+";
  font: 500 1.45rem/1 var(--font-body);
}

.about-page .mobile-disclosure-toggle[aria-expanded="true"]::after {
  content: "−";
}

.about-page .pedagogy-editorial {
  gap: 34px;
}

.about-page .pedagogy-intent {
  gap: 14px;
}

.about-page .pedagogy-principles {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--mobile-gutter));
  padding: 0 var(--mobile-gutter) 4px 0;
  border: 0;
  overflow-x: auto;
}

.about-page .pedagogy-principles li {
  flex: 0 0 min(78vw, 295px);
  min-height: 230px;
  align-content: start;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mobile-card-radius);
  background: rgba(255, 255, 255, 0.035);
  scroll-snap-align: start;
}

.about-page .terrain-editorial {
  gap: 32px;
}

.about-page .terrain-quote {
  padding: 24px 0 0 20px;
  font-size: 1.5rem;
}

.about-page .about-cta-section {
  padding-bottom: 64px;
}

.about-page .about-cta {
  gap: 0;
  padding: 34px 24px;
}

.about-page .about-cta figure {
  display: none;
}

/* Références */

.trust-page .trust-hero-character {
  min-height: 190px;
}

.trust-page .section-heading.center {
  text-align: left;
}

.trust-page .section-heading.center h2,
.trust-page .section-heading.center > p:last-child {
  margin-inline: 0;
}

.trust-page .logo-marquee {
  margin: 34px calc(-1 * var(--mobile-gutter)) 0;
  padding: 8px var(--mobile-gutter);
  overflow-x: auto;
  mask-image: none;
  scrollbar-width: none;
  scroll-snap-type: inline mandatory;
}

.trust-page .logo-marquee::-webkit-scrollbar {
  display: none;
}

.trust-page .partner-logo-track {
  gap: 10px;
  animation: none;
}

.trust-page .partner-logo-card {
  width: 156px;
  min-height: 86px;
  flex: 0 0 156px;
  border-right: 1px solid var(--marketing-line);
  scroll-snap-align: start;
}

.trust-page .partner-logo-track > [aria-hidden="true"] {
  display: none;
}

.trust-page .training-gallery-grid {
  display: flex;
  gap: 12px;
  margin: 32px calc(-1 * var(--mobile-gutter)) 0 0;
  padding: 0 var(--mobile-gutter) 5px 0;
  overflow-x: auto;
}

.trust-page .training-gallery-item,
.trust-page .training-gallery-featured {
  flex: 0 0 min(84vw, 330px);
  height: 330px;
  margin: 0;
  scroll-snap-align: start;
}

.trust-page .training-gallery-button,
.trust-page .training-gallery-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mentions légales */

.legal-page .legal-character-scene {
  min-height: 170px;
}

.legal-page .source-legal-layout {
  gap: 0;
}

.legal-page .legal-block,
.legal-page .legal-block.wide {
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--marketing-line);
  border-radius: 0;
  background: transparent;
}

.legal-page .legal-block:first-child {
  border-top: 1px solid var(--marketing-line);
}

.legal-page .legal-block h2 {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.legal-page .legal-block p {
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Contact */

.marketing-page .contact-grid {
  gap: 36px;
}

.marketing-page .contact-grid .section-heading h2 {
  margin-bottom: 18px;
}

.marketing-page .contact-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 28px;
}

.marketing-page .contact-links a,
.marketing-page .contact-links a:first-child {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  gap: 7px;
  padding: 0;
  border: 1px solid rgba(8, 127, 120, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
}

.marketing-page .contact-links a + a::before {
  display: none;
}

.marketing-page .contact-character-scene {
  display: none;
}

.marketing-page .contact-form {
  gap: 16px;
  padding: 22px 18px;
  border-radius: var(--mobile-card-radius);
}

.marketing-page .contact-form input,
.marketing-page .contact-form textarea {
  min-height: 52px;
  font-size: 16px;
}

.marketing-page .contact-form textarea {
  min-height: 132px;
}

.marketing-page .contact-form .button {
  min-height: 52px;
}

/* Footer */

.marketing-page .site-footer {
  padding: 46px 0 calc(22px + env(safe-area-inset-bottom, 0px));
}

.marketing-page .footer-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

.marketing-page .footer-intro {
  grid-column: auto;
}

.marketing-page .footer-intro > p {
  margin-top: 14px;
  font-size: 0.87rem;
}

.marketing-page .footer-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.marketing-page .footer-links a {
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.marketing-page .footer-contact {
  gap: 12px;
}

.marketing-page .footer-email {
  min-height: 44px;
}

.marketing-page .footer-social-links a {
  min-height: 44px;
}

.marketing-page .footer-credits {
  margin-top: 32px;
  padding-top: 20px;
  font-size: 0.65rem;
  line-height: 1.55;
}

/* Petits téléphones */

@media (max-width: 374px) {
  :root {
    --mobile-gutter: 16px;
    --mobile-section-space: 58px;
  }

  .marketing-page .marketing-hero h1,
  .marketing-page .page-hero h1 {
    font-size: 2.42rem;
  }

  .marketing-page .contact-links {
    grid-template-columns: 1fr;
  }

  .marketing-page .contact-links a,
  .marketing-page .contact-links a:first-child {
    justify-content: flex-start;
    padding-inline: 14px;
  }
}

/* Téléphone en paysage : menu et héros plus compacts */

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --mobile-section-space: 48px;
  }

  .marketing-page .nav-panel,
  .marketing-page .nav-panel.is-open {
    padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .marketing-page .nav-links a {
    min-height: 44px;
  }

  .marketing-page .nav-panel.is-open {
    gap: 12px;
  }

  .marketing-page .nav-actions .button {
    min-height: 48px;
  }

  .marketing-page .home-hero-layout,
  .marketing-page .solutions-hero-layout,
  .marketing-page .about-hero-layout {
    padding-block: 28px;
  }

  .marketing-page .page-hero {
    min-height: 0;
    padding-block: 28px;
  }

  .home-page .home-hero-visual,
  .about-page .about-hero-visual,
  .play-page .play-hero-character,
  .marketing-page .page-hero .character-scene {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page * {
    scroll-behavior: auto;
  }
}