/* Mobile & Android — lisibilité, zones sûres, pas de débordement */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

.site-header__bar {
  padding-top: env(safe-area-inset-top, 0);
  min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

.site-header .header-inner {
  height: var(--header-h);
}

.site-footer {
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0));
}

.container {
  padding-inline: max(1.35rem, calc(env(safe-area-inset-left, 0px) + 0.5rem))
    max(1.35rem, calc(env(safe-area-inset-right, 0px) + 0.5rem));
}

.site-header .container {
  padding-inline: max(1rem, calc(env(safe-area-inset-left, 0px) + 0.35rem))
    max(1rem, calc(env(safe-area-inset-right, 0px) + 0.35rem));
}

/* Retours à la ligne sans césures forcées (évite « cata-logues ») */
h1,
h2,
h3,
p,
.hero-lead,
.section-header p,
.domain-card__digital,
.project-card__summary,
.featured-project p,
.about-block p,
.vision-inner p,
.coming-soon-card p,
.detail-rich,
.home-pillar p,
.home-explore__card p,
.value-card p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

a,
button,
.filter-btn,
.project-card {
  -webkit-tap-highlight-color: rgba(0, 212, 255, 0.12);
}

.header-inner {
  min-width: 0;
}

.logo {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-mobile.is-open {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 899px) {
  /* Pas d’animation translateY : évite chevauchements avant affichage */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--ease);
  }

  .reveal:not(.is-visible) {
    opacity: 0.92;
  }

  .header-cta {
    display: none !important;
  }

  .header-inner {
    gap: 0.5rem;
  }

  .nav-toggle {
    margin-left: auto;
  }

  .hero--landing {
    min-height: auto;
    display: block;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem) 0 2.5rem;
  }

  .hero {
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem) 0 2.5rem;
  }

  .hero-copy {
    margin-bottom: 0;
    padding-inline: 0.15rem;
  }

  .hero-copy .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    max-width: 100%;
  }

  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-copy .hero-lead {
    max-width: 100%;
  }

  .hero-copy .hero-actions {
    width: 100%;
    max-width: 100%;
  }

  .hero .container.hero-inner {
    padding-inline: max(1.5rem, calc(env(safe-area-inset-left, 0px) + 0.65rem))
      max(1.5rem, calc(env(safe-area-inset-right, 0px) + 0.65rem));
  }

  .home-pillars {
    grid-template-columns: 1fr;
    max-width: 20rem;
  }

  .home-explore {
    grid-template-columns: 1fr;
  }

  .cta-band--home .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band--home .hero-actions .btn {
    width: 100%;
  }

  .hero-glow {
    width: min(280px, 85vw);
    height: min(280px, 85vw);
    top: -60px;
    right: -40px;
  }

  .hero h1 {
    font-size: clamp(1.45rem, 5.5vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .hero-lead {
    font-size: 1.05rem;
    max-width: none;
    margin-bottom: 1.5rem;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  /* Bloc visuel : toujours sous le texte */
  .hero-visual {
    position: relative;
    z-index: 1;
    order: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
  }

  .hero-copy {
    order: 1;
    position: relative;
    z-index: 2;
  }

  .hero-visual__caption {
    color: var(--text-muted);
  }

  .sector-pills {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    align-content: start;
  }

  .sector-pill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 12rem;
    margin-inline: auto;
    width: 100%;
  }

  .sector-pill {
    text-align: center;
    font-size: 0.8rem;
    padding: 0.55rem 0.65rem;
    line-height: 1.25;
  }

  .hero-visual__caption {
    position: static;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .section {
    padding: 3.25rem 0;
  }

  .section-header {
    max-width: none;
    margin-bottom: 2rem;
  }

  .section-header h2 {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    line-height: 1.15;
  }

  .featured-project {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.35rem;
    margin-bottom: 1.5rem;
  }

  .featured-project__badge {
    align-self: flex-start;
  }

  .featured-project__content {
    order: 1;
  }

  .featured-project__visual {
    order: 2;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    flex-shrink: 0;
  }

  .featured-project__visual--cover {
    width: min(100%, 200px);
    height: auto;
    aspect-ratio: 1;
    max-height: 200px;
  }

  .featured-project__letter {
    font-size: 2rem;
  }

  .featured-project h3 {
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .featured-project p {
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .domain-card {
    padding: 1.35rem;
  }

  .domain-card h3 {
    font-size: 1.1rem;
  }

  .domain-card__digital {
    font-size: 0.9rem;
  }

  .approach-step {
    padding: 1.2rem;
  }

  .approach-step h3 {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .cta-band {
    padding: 2rem 1.15rem;
  }

  .cta-band h2 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .page-hero {
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.25rem) 0 1rem;
    overflow: hidden;
  }

  .page-hero.container {
    padding-inline: max(1.5rem, calc(env(safe-area-inset-left, 0px) + 0.65rem))
      max(1.5rem, calc(env(safe-area-inset-right, 0px) + 0.65rem));
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.2;
  }

  .page-hero .hero-lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .section .container,
  .contact-layout {
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-pillars-section .home-pillars {
    max-width: 100%;
  }

  .detail-cover {
    aspect-ratio: 16 / 10;
  }

  .detail-cover--brand {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .detail-cover--brand img {
    max-height: min(55vw, 220px);
  }

  .project-media {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    gap: 1.5rem;
  }

  .project-detail .hero-lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .about-grid .approach-steps {
    margin-top: 1rem !important;
  }

  .vision-section {
    padding: 3.25rem 0;
  }

  .vision-inner h2 {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
  }

  .footer-grid {
    gap: 1.75rem;
  }

  .footer-brand p {
    max-width: 22rem;
  }
}

@media (max-width: 520px) {
  :root {
    --header-h: 64px;
  }

  .logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 52px);
  }

  .logo__img {
    height: 34px;
    max-width: 100%;
  }

  .nav-toggle {
    flex-shrink: 0;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .sector-pills {
    grid-template-columns: 1fr 1fr;
  }

  .sector-pill {
    font-size: 0.75rem;
    padding: 0.5rem 0.45rem;
  }

  .impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
  }

  .impact-item strong {
    font-size: 1.5rem;
  }

  .impact-item span {
    font-size: 0.8rem;
    line-height: 1.35;
    display: block;
  }

  .projects-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.35rem;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  }

  .projects-toolbar::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }

  .btn,
  .nav-toggle {
    min-height: 44px;
  }

  .nav-mobile {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding: 1rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
  }

  .nav-mobile a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .nav-mobile__cta {
    min-height: 48px;
  }

  .project-card__body {
    padding: 1.15rem;
  }

  .project-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .project-card__summary {
    font-size: 0.88rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 20rem;
    margin-inline: auto;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    font-size: 16px;
  }

  .projects-mosaic {
    grid-template-columns: 1fr;
  }

  .partners-row {
    gap: 0.5rem;
  }

  .partner-pill {
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
  }

  .value-card {
    padding: 1.35rem;
  }

  .coming-soon-card {
    padding: 1.2rem;
  }
}

@media (max-width: 380px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }

  .sector-pills {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) and (pointer: coarse) {
  .project-card:hover,
  .domain-card:hover,
  .team-card:hover,
  .featured-project:hover,
  .coming-soon-card:hover,
  .partner-pill:hover,
  .value-card:hover {
    transform: none;
  }

  .project-card:hover .project-card__media img {
    transform: none;
  }

  .btn:hover,
  .sector-pill:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-glow {
    animation: none;
  }
}