/* Avalue — responsive. Paliers 1024 / 768 / 480.
   Le site est écrit en styles inline : les règles ci-dessous doivent forcer.
   Les accroches .av-* sont posées sur les conteneurs concernés dans chaque page. */

.av-burger { display: none; }
.av-sheet { display: none; }
.av-scrim { display: none; }

@keyframes av-sheet-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes av-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 1024 : tablette ---------- */
@media (max-width: 1024px) {
  .av-3col { grid-template-columns: repeat(2, 1fr) !important; }
  .av-5col { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- 768 : mobile ---------- */
@media (max-width: 768px) {
  #navpill { display: none !important; }
  .av-burger { display: inline-flex !important; padding: 13px 18px !important; }
  .av-sheet { display: flex !important; }
  .av-scrim { display: block !important; }

  /* le bouton menu porte la même teinte que la pilule du desktop */
  .av-burger.nav-light { background: rgba(240, 239, 235, 0.55) !important; color: #0C1012 !important; }
  .av-burger.nav-dark  { background: rgba(240, 239, 235, 0.22) !important; color: #FFFFFF !important; }
  .av-burger:not(.nav-light):not(.nav-dark) { background: rgba(240, 239, 235, 0.22) !important; color: #FFFFFF !important; }

  /* le menu se révèle par la droite, en verre : la page reste lisible dessous */
  .av-sheet {
    background: rgba(12, 16, 18, 0.62) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: -1px 0 0 rgba(240, 239, 235, 0.15);
    animation: av-sheet-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .av-scrim {
    position: fixed;
    inset: 0;
    z-index: 114;
    background: rgba(12, 16, 18, 0.28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: av-scrim-in 380ms ease both;
  }

  /* --- échelle typographique : le mobile suit le desktop --- */
  h1 { font-size: clamp(48px, 12.5vw, 64px) !important; }
  .av-bigtitle { font-size: clamp(40px, 10vw, 50px) !important; }
  #goodnews { font-size: clamp(34px, 8.6vw, 44px) !important; }

  .av-2col, .av-3col, .av-footgrid, .av-digitgrid { grid-template-columns: 1fr !important; }
  .av-5col { grid-template-columns: repeat(2, 1fr) !important; }
  .av-numrow { grid-template-columns: 64px 1fr !important; }
  .av-footnews { margin-top: 0 !important; }
  .av-wordmark { aspect-ratio: 198 / 44 !important; width: 100% !important; }
  .av-crystal { object-position: 72% center !important; opacity: 0.18 !important; }
  .av-heromeasure { max-width: 100% !important; }

  /* hero 3D : le chapeau tient sur plusieurs lignes au lieu d'être coupé */
  .av-herosub {
    white-space: normal !important;
    bottom: 40px !important;
    max-width: 26ch !important;
  }

  /* héros scindé en deux colonnes (Scanvalue) : on empile */
  #svc-hero > div { height: auto !important; grid-template-columns: 1fr !important; }
  #svc-hero > div > div:first-child { max-width: none !important; padding: 148px clamp(24px, 6vw, 100px) 56px !important; justify-self: stretch !important; }
  #svc-hero > div > div:last-child { height: 62svh !important; }

  /* pile de projets : le défilement un-projet-par-scroll est conservé.
     Budget du sticky (100svh) : padding*2 + titre + marge + scène. */
  #cases-wrap > div { padding: 44px clamp(24px, 6vw, 100px) !important; }
  #cases-wrap > div > div > div:first-child { margin-bottom: 40px !important; }
  #cases-wrap [data-case-slide] { grid-template-columns: 1fr !important; grid-template-rows: 200px minmax(0, 1fr) !important; }
  #cases-wrap [data-case-slide] > div:last-child { padding: 20px !important; }
  .av-casestage { height: min(68svh, 520px) !important; }

  /* filet de sécurité mobile : le texte d'article ne peut jamais rester invisible */
  section h1, section h2, section h3, section h4, section p, section li, section figure, section blockquote { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* liste de projets de l'accueil : le nom prend sa ligne, la méta suit */
  .av-worksrow { flex-wrap: wrap !important; gap: 8px 20px !important; padding: 24px 0 !important; }
  .av-worksrow > *:nth-child(2) { flex: 1 1 100% !important; order: 2; }
  .av-worksrow > *:nth-child(3),
  .av-worksrow > *:nth-child(4) { width: auto !important; text-align: left !important; order: 3; }
  .av-workshead { display: none !important; }

  /* timeline : fil aligné à gauche, pastilles centrées dessus */
  .av-tlrow { grid-template-columns: 28px 1fr !important; column-gap: 20px !important; padding: 36px 0 !important; }
  .av-tlrow > *:nth-child(1) { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; }
  .av-tlrow > *:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; padding-top: 12px !important; }
  .av-tlrow > *:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; margin-top: 20px !important; }
  .av-tlthread { left: 14px !important; }

  /* rail de galerie horizontal résiduel : empilement vertical */
  #gal-wrap { height: auto !important; }
  #gal-wrap > div { position: static !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  #gal-track { display: grid !important; width: 100% !important; gap: 16px !important; transform: none !important; }
  #gal-track > img { height: auto !important; width: 100% !important; }

  /* filet de sécurité mobile : aucune révélation ne peut laisser du vide */
  [data-reveal] { opacity: 1 !important; }

  /* le chapeau du héros reste aligné à gauche sur le titre */
  .av-herosub { margin-left: 0 !important; margin-right: auto !important; }

  /* méthode : le grand chiffre sticky passe dans chaque carte, au-dessus du titre */
  .av-digitsticky { display: none !important; }
  .av-stepnum { display: block !important; }
}

/* ---------- 480 : petit mobile ---------- */
@media (max-width: 480px) {
  .av-imgrow { flex-direction: column !important; gap: 16px !important; }
  .av-numrow { grid-template-columns: 52px 1fr !important; }
  .av-numrow-s { grid-template-columns: 44px 1fr !important; }
  .av-3col { grid-template-columns: 1fr !important; }
}

/* ---------- Sticky CTA mobile + états de formulaire ---------- */
.av-stickycta { display: none; }
@media (max-width: 768px) {
  .av-stickycta {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    min-height: 52px; align-items: center; justify-content: center; padding: 0 24px;
    border-radius: 5px; background: #F97942; color: #0C1012;
    font-size: 15px; line-height: 1.3; text-decoration: none;
    transition: transform 420ms cubic-bezier(0.22, 0, 0, 1), opacity 300ms ease;
  }
  body.av-scrolldown .av-stickycta { transform: translateY(160%); opacity: 0; }
  .av-submit, .av-submit .av-btn { width: 100%; }
  .av-submit .av-btn { justify-content: center; }
  .av-3col { grid-template-columns: 1fr !important; }
  img { max-width: 100%; }
  html, body { overflow-x: hidden; }
}


/* ---------- Mobile : effets au scroll sans rAF ----------
   Déclenchés à l'entrée (IntersectionObserver), animés par des transitions CSS :
   fiables pendant l'inertie iOS, où la boucle JS peut se taire. */
html.av-mobile #goodnews .rw { opacity: 0.18 !important; transition: opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
html.av-mobile #goodnews.lit .rw { opacity: 1 !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(2) { transition-delay: 90ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(3) { transition-delay: 180ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(4) { transition-delay: 270ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(5) { transition-delay: 360ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(6) { transition-delay: 450ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(7) { transition-delay: 540ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(8) { transition-delay: 630ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(9) { transition-delay: 720ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(10) { transition-delay: 810ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(11) { transition-delay: 900ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(12) { transition-delay: 990ms !important; }
html.av-mobile #goodnews.lit .rw:nth-of-type(n+13) { transition-delay: 1080ms !important; }

/* halo noir → orange (Scanvalue) : monte en 1.6 s à l'entrée du panneau */
html.av-mobile #diag-on { opacity: 0 !important; transform: scale(0.55) !important; transition: opacity 1600ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
html.av-mobile #diag-card.lit #diag-on { opacity: 1 !important; transform: scale(1.8) !important; }
html.av-mobile #diag-copy { opacity: 0.06 !important; transition: opacity 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms !important; }
html.av-mobile #diag-card.lit #diag-copy { opacity: 1 !important; }
html.av-mobile #diag-wrap { height: 160vh !important; }

/* ---------- Mobile : perspectives + pied de page ---------- */
@media (max-width: 768px) {
  .av-persphead { flex-direction: column !important; align-items: flex-start !important; }
  .av-persphead > a { display: none !important; }
  .av-persphead h2 { max-width: none !important; }
  .av-persplink-bottom { display: inline-block !important; margin-top: 40px !important; }
  .av-footgrid { display: flex !important; flex-direction: column !important; gap: 40px !important; }
  .av-footlogo { order: 1; margin-bottom: 0 !important; }
  .av-footnews { order: 2; }
  .av-footlinks { order: 3; }
  .av-footmeta { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .av-footmeta > div { flex-wrap: wrap !important; gap: 12px 24px !important; }
  .av-footmeta p { white-space: normal !important; }
  .av-footmeta .av-che { display: block !important; }
  .av-wordmark { aspect-ratio: 198 / 50 !important; width: 100% !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; }
}