/* ==========================================================================
   DeaX — couche mobile et tablette
   Chargée après core.css et sections.css sur toutes les pages.
   Objectif : un rythme rapide, des titres forts mais lisibles, des interactions au pouce.
   ========================================================================== */

/* ---------- Tablette ---------- */
@media (max-width: 1060px) {
  :root { --section: clamp(72px, 10vw, 120px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section: 64px;
    --fs-mega: clamp(2.6rem, 11.4vw, 3.9rem);
    --fs-xxl: clamp(2.3rem, 10.4vw, 3.3rem);
    --fs-xl: clamp(1.85rem, 8vw, 2.5rem);
    --fs-l: clamp(1.45rem, 6.2vw, 1.9rem);
    --fs-m: 1.2rem;
  }
  body { font-size: 1rem; line-height: 1.55; }
  .h-mega { line-height: .92; letter-spacing: -.04em; }
  .h-xxl, .h-xl { line-height: .98; letter-spacing: -.03em; }
  .lead { font-size: 1.05rem; line-height: 1.5; }

  /* Rythme vertical */
  .section + .section:not(.on-night):not(.band) { padding-top: var(--section); }
  .section-head { margin-bottom: 28px; gap: 12px; }
  .section-head--split { row-gap: 12px; }
  .page-hero { padding-top: 104px; padding-bottom: 28px; }
  .page-hero__crumb { margin-bottom: 14px; font-size: .82rem; }
  .page-hero .lead { margin-top: 16px; }
  .page-hero .btn-row { margin-top: 20px; }
  .page-hero--split .page-hero__side { margin-top: 18px; }
  .split { row-gap: 22px; }
  .split__head { gap: 12px; }
  .features .feature { padding: 18px 0; }
  .fact { padding-top: 14px; }
  .fact dd { font-size: 1.55rem; }
  .cta-band { gap: 20px; }
  .acc__q { padding: 18px 0; font-size: 1.02rem; gap: 16px; }
  .acc__icon { width: 32px; height: 32px; }
  .acc__a .prose { padding-bottom: 20px; }
  .stack-cards { gap: 14px; }
  .stack-card { padding: 22px; gap: 10px; }
  .stack-card__num { font-size: 3.2rem; }
  .statement { font-size: clamp(1.7rem, 8vw, 2.3rem); }

  /* Boutons : hauteur confortable, jamais collés */
  .btn { min-height: 50px; padding: 0 1.25em; }
  .btn-row { gap: 10px; }

  /* Verre : flou plus léger ; grandes surfaces en fond plein (performance) */
  .glass { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
  .final-cta__form.glass, .support__form.glass, .brief__form.glass, .pack__form.glass, .partner-form.glass, .work__note.glass {
    background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line);
  }
  .final-cta__form.glass::before, .support__form.glass::before, .brief__form.glass::before, .pack__form.glass::before, .partner-form.glass::before, .work__note.glass::before { display: none; }

  /* Animations propres au mobile : courte montée + léger scale, images dévoilées verticalement */
  .js [data-reveal] { transform: translateY(18px) scale(.97); transition-duration: .7s, .9s; }
  .js [data-clip] { clip-path: inset(0 0 26% 0 round var(--r-m)); transition-duration: 1.1s; }
  .js [data-clip].is-in { clip-path: inset(0 0 0 0 round var(--r-m)); }
  .js [data-clip] img { transform: scale(1.06); }

  /* Pied de page */
  .site-footer { padding-top: 56px; }
  .footer__grid { gap: 28px 20px; }
  .footer__word { margin-top: 40px; }
  .footer__member { margin-top: 28px; }

  /* ----- Accueil ----- */
  .hero { padding-top: 100px; }
  .hero__intro { margin-top: 20px; }
  .hero__intro .btn-row { margin-top: 22px; }
  .hero__proof { margin-top: 22px; font-size: .9rem; }
  .hero__screens { margin-top: 36px; aspect-ratio: 1 / .74; }
  .hero__chip { font-size: .78rem; bottom: -12px; left: 8px; }
  .clients { padding-block: 8px 24px; }
  /* Solutions : carrousel tactile plutôt qu'une colonne interminable */
  .solutions__head { margin-bottom: 24px; gap: 12px; }
  .solutions__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-left: var(--gutter); scrollbar-width: none; }
  .solutions__list::-webkit-scrollbar { display: none; }
  .sol { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 14px 14px 20px; align-items: stretch; }
  .sol__visual { order: -1; aspect-ratio: 16 / 10; }
  .sol__visual--ui { min-height: 0; padding: 12px; }
  .sol__text { gap: 12px; padding-inline: 4px; }
  .solutions__pack { margin-top: 12px; }
  .works-h__sticky { padding-block: 64px; }
  .works-h__head { margin-bottom: 24px; }
  .tools__grid { row-gap: 32px; }
  .tools__text { gap: 20px; }
  .about-teaser__photo { max-width: 150px; margin-bottom: 20px; }
  .about-teaser__text { gap: 20px; }
  .final-cta .grid { row-gap: 28px; }
  .final-cta__main { gap: 18px; }

  /* ----- Réalisations ----- */
  .works__list { gap: 56px; }
  .work__body, .work:nth-of-type(even) .work__body { margin-top: 16px; gap: 12px; }
  .filters-wrap { top: 76px; }

  /* ----- FAQ / support / pages simples ----- */
  .faq-hero .h-xxl { margin-bottom: 22px; }
  .faq-search { height: 56px; }
  .faq__groups { gap: 36px; }
  .simple-hero { min-height: 70vh; }
  .about-hero__grid { row-gap: 24px; }
  .about-hero__photo { max-width: 180px; }
  .giving__num { font-size: clamp(5rem, 30vw, 8rem); }
}

/* Écrans étroits : boutons empilés pleine largeur */
@media (max-width: 440px) {
  .btn-row > .btn { flex: 1 1 100%; }
  .cta-band .btn-row, .final-cta .btn-row { width: 100%; }
}

/* Très petits écrans (320 px) */
@media (max-width: 350px) {
  :root { --gutter: 16px; --fs-mega: 2.45rem; --fs-xxl: 2.15rem; }
  .nav__burger-label { display: none; }
  .logo { font-size: 1.2rem; }
  .sol { flex-basis: 92%; }
  .float-cta .btn { padding: 0 1em; font-size: .88rem; }
}

/* Accueil mobile : accroche → texte → CTA → visuel → preuves (le visuel remonte vers la ligne de flottaison) */
@media (max-width: 760px) {
  .hero__intro { display: contents; }
  .hero__title { order: 1; }
  .hero__intro .lead { order: 2; grid-column: 1 / -1; margin-top: 16px; }
  .hero__intro .btn-row { order: 3; grid-column: 1 / -1; }
  .hero__screens { order: 4; grid-row: auto; margin-top: 30px; }
  .hero__proof { order: 5; grid-column: 1 / -1; margin-top: 34px; }
  .hero__intro .btn-row .btn--ghost { flex: 0 1 auto; min-height: 46px; }
}