/* LE MOBILE — décidé avec Jonas le 13/09.

   Trois règles, sans exception :
     · aucune animation décorative,
     · aucune vidéo de fond,
     · aucune transition de section.

   Ce qui RESTE animé, c'est ce qui répond au doigt : l'ouverture du menu, le
   défilement du carrousel, l'ouverture d'une question. Couper ça aussi ne
   ferait pas un site sobre, ça ferait un site cassé.

   Cette feuille est chargée par les dix-sept pages et ne contient QUE du
   mobile : tout ce qui s'y trouve est sous media query. */

@media(max-width:900px){

  /* ── 1 · plus rien ne bouge tout seul ─────────────────────────────────── */
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    transition-delay:0s!important;
  }
  html{scroll-behavior:auto!important}

  /* ce qui répond à un doigt garde sa durée */
  .mobile-navigation[open]{animation-duration:.22s!important}
  .mobile-navigation a,.menu-toggle,.menu-close,
  .faq-item summary,.faq-item summary:after,
  .s-form-input,.s-form-textarea,.s-form-option-texte,.s-form-submit,
  .button,.text-link,.carrousel-fleche,.carrousel-points button,
  .contact-reseaux a,.nav-contact{transition-duration:.2s!important}

  /* ── 2 · rien ne doit rester invisible ────────────────────────────────────
     Beaucoup d'éléments partent à l'opacité 0 et attendent un script de
     défilement qu'on vient d'éteindre. Sans ces lignes, la page serait vide. */
  .reveal,.motion-ready .reveal,.case-reveal,.hero-art,.article-card,
  .work-card,.expert-card,.intro-text,.intro-text-two,
  .card-description,.photo-caption>span,.material-photo,
  .print-development>span,.print-development:after{
    opacity:1!important;transform:none!important;max-height:none!important}
  .work-card .work-visual,.domain-card,.commitments article{opacity:1!important}

  /* ── 3 · l'arrivée de l'accueil : un seul écran, fixe ─────────────────────
     La séquence d'images pesait 17 Mo sur mobile pour une animation que le
     script ne joue plus. On garde l'image d'ouverture et le texte, on jette la
     piste de défilement de sept écrans. */
  .intro-journey{height:auto!important}
  .intro-stage{position:relative!important;height:auto!important;min-height:100svh;
    display:grid;place-items:center;padding:96px 6% 60px}
  .intro-canvas{display:none!important}
  .intro-static{position:absolute!important;inset:0;
    background-image:url(assets/intro/sequence-hd/mobile/000.webp)!important;
    background-size:cover!important;background-position:50% 50%!important}
  .intro-stage>.agency{display:none!important}
  .intro-text{position:relative!important;inset:auto!important;width:100%!important;
    left:auto!important;right:auto!important;top:auto!important;text-align:left}
  .intro-text-two{display:none}
  .intro-nav{position:relative!important;bottom:auto;left:auto;right:auto;
    margin-top:34px;flex-wrap:wrap;gap:14px}

  /* ── 3 bis · « notre méthode » : trois écrans empilés, plus une histoire
     qui se joue au défilement. La section faisait 270vh avec trois panneaux
     superposés découpés au masque, et ses textes attendaient le script pour
     apparaître : sur mobile ils ne seraient jamais sortis de l'opacité 0. */
  .ink-journey{height:auto!important}
  .ink-stage{position:relative!important;height:auto!important;overflow:visible!important}
  .ink-reveal,.ink-conception,.ink-realisation{
    position:relative!important;inset:auto!important;clip-path:none!important;
    padding:70px 6%!important;min-height:0!important}
  .next-tongue,.third-tongue,.conception-live,.ink-figure{display:none!important}
  .ink-copy,.conception-copy,.realisation-copy{
    position:relative!important;inset:auto!important;width:auto!important;max-width:none!important}

  /* et tout ce qui attendait un script pour se montrer se montre */
  .expert-header>*,.expert-header p,.collage .piece,.ink-copy,.conception-copy,
  .realisation-copy,.ink-reveal *,.ink-conception *,.ink-realisation *,
  .project-scene>header,.project-scene .project-layout,.journal-card{
    opacity:1!important;transform:none!important;visibility:visible!important}

  /* ── 3 ter · l'arrivée disparaît : on entre directement dans le site ──────
     L'écran d'ouverture n'avait plus d'animation à jouer, il ne restait qu'un
     fond noir. On atterrit sur « Votre communication, un seul interlocuteur ». */
  .intro-journey{display:none!important}

  /* ── 3 quater · les mises en page à deux colonnes retombent sur une ───────
     Le repli de socle.css vivait AVANT la feuille de page : la règle à deux
     colonnes, plus tardive, gagnait. Résultat, la section « ensemble » de
     /expertises restait coincée sur un demi-écran à gauche. Ici la feuille
     mobile est chargée en dernier, donc elle tranche. */
  .together,.conviction-layout,.production-grid,.film-layout,.team-layout,
  .responsibility-head,.studio-heading,.contact-piece,.contact-faq{
    display:block!important}
  .together>*,.conviction-layout>*{width:auto!important;max-width:none!important}
  .join-mark{display:none!important}

  /* ── 4 · pas de vidéo de fond : on garde l'affiche ────────────────────── */
  .agency-film-preview,.brief-video,.realisation-video{display:none!important}

  /* ── 4 bis · à la place des vidéos, une image — pas du noir ───────────────
     Les trois écrans de « notre méthode » avaient leur fond vidéo masqué : il
     ne restait qu'un aplat. On y remet une image fixe, et on garde les voiles
     d'origine pour que le texte reste lisible par-dessus. */
  .brief-media{background:url(assets/brief-poster-m.webp) center/cover no-repeat!important}
  .ink-conception{background:#f4eee1 url(assets/conception-provisoire-m.webp) center/cover no-repeat!important}
  .ink-conception .conception-copy{position:relative;z-index:2}
  .ink-conception:before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(0deg,#f4eee1f2,#f4eee1cc)}
  /* l'image de l'écran 3 : la photo de production plutôt que le visuel
     provisoire, qui ne montrait pas l'atelier */
  .realisation-photo{opacity:1!important;transform:none!important;mask-image:none!important;
    background:url(assets/production-poster-m.webp) center/cover no-repeat!important}

  /* la goutte qui tombait de « 03 — RÉALISER » vers « Des projets » : son
     script la rendait visible en style en ligne, la feuille n'avait pas la
     main dessus. Elle est masquée ici ET le script la saute (projects.js
     traite désormais le mobile comme un « mouvement réduit »). Signalée par
     Christine, invisible chez Jonas qui a les animations réduites. (13/09) */
  .project-drop,.project-wave{display:none!important}

  /* ── 5 · les transitions de section n'existent pas ────────────────────── */
  .agency-screen-passage{display:none!important}
  .agency-scene-held{position:static!important;top:auto!important;
    width:auto!important;z-index:auto!important;clip-path:none!important}
  .agency-scene-placeholder{display:none!important}

  /* ── 6 · les images pèsent la moitié de l'écran, pas celle du bureau ─────
     Les visuels sont calibrés pour un grand écran : 1 448 à 1 920 px de large,
     2,2 Mo à eux seuls sur la page d'accueil. Un téléphone de 390 pt n'en
     affiche jamais plus de 900 px, même en haute densité. Chaque fichier a
     donc une variante « -m » de 900 px, et le mobile ne charge qu'elle.

     Deux façons de la désigner, parce que les images arrivent par deux
     chemins : par la feuille (sélecteur connu) ou par un --image écrit dans
     l'attribut style de la carte (d'où le sélecteur sur [style*=…], qui est
     la seule prise que la feuille ait sur une valeur posée en ligne). */
  .journal-photo{background-image:url(assets/journal-m.webp)!important}
  .flight-photo{background-image:url(assets/journal-m.webp)!important}
  .project-image{background-image:url(assets/projets-reference-m.webp)}
  .photo{background-image:url(assets/reference-m.webp)!important}
  .photo-art,.related.ivory .related-links a .related-visual{
    background-image:var(--image,url(assets/expertises-reference-m.webp))!important}
  .card-art{background-image:var(--image,url(assets/expertises-reference-m.webp))!important}

  [style*="expertises-reference.webp"]{--image:url(assets/expertises-reference-m.webp)!important}
  [style*="projets-reference.webp"]  {--image:url(assets/projets-reference-m.webp)!important}
  [style*="realisation-provisoire.webp"]{--image:url(assets/realisation-provisoire-m.webp)!important}
  [style*="conception-provisoire.webp"] {--image:url(assets/conception-provisoire-m.webp)!important}
  [style*="/identite.webp"],[style*="(assets/identite.webp"]{--image:url(assets/identite-m.webp)!important}
  [style*="(assets/reference.webp"]{--image:url(assets/reference-m.webp)!important}
  [style*="(assets/journal.webp"] {--image:url(assets/journal-m.webp)!important}

  /* ── 7 · le plancher de lisibilité ──────────────────────────────────────
     Relevé au navigateur sur les dix-huit pages à 390 pt : trente-deux séries
     de textes descendaient sous 11 px, certaines à 8. À cette taille on ne lit
     plus, on devine. Ce sont des surtitres et des mentions, donc du texte
     court : sur grand écran, très petit et très espacé, c'est un parti pris qui
     tient ; à bout de bras sur un téléphone, non.

     11 px pour les capitales espacées (elles portent mieux), 12 px pour ce qui
     se lit comme une phrase. Rien ne bouge au-dessus de 900 px. */
  .eyebrow,
  .contact-kicker,
  .journal-label,
  .projet-marque,
  .composition-label,
  .work-type,
  .expert-eyebrow,
  .agency-film-time,
  .live-phase,
  .production-phase,
  .duration,
  .project-demo,
  .projet-fiche dt,
  .type-tile small,.type-tile span,
  .ink-steps button,
  .ink-controls span,.ink-controls button,
  .brief-pause,.live-pause,.production-pause,
  .work-meta span,
  .collage .piece div,
  .atelier-techniques b,
  .live-meta span,
  .next-tongue b,.third-tongue b,
  .brief-sheet span,
  .agency-address span,
  .project-copy h5,
  /* ces deux-là portent DEUX classes dans leur feuille d'origine : il faut
     les nommer aussi précisément, sinon la règle ci-dessus ne les atteint pas. */
  .price-card .eyebrow,
  .carrousel-mot .eyebrow,
  .portfolio-grid .work-meta{font-size:11px}

  .image-caption,
  .review-card figcaption small,
  .request-choice-group legend small,
  .production-live-controls small,
  .project-copy small,
  .brief-sheet small{font-size:12px}

  /* ── 8 · la zone touchable ──────────────────────────────────────────────
     Les liens de texte faisaient 16 à 27 px de haut. Le pouce en vise 40.
     Le téléphone et l'adresse du bandeau de contact, les deux liens qui
     comptent le plus sur mobile, étaient les deux plus difficiles à toucher.

     On agrandit la ZONE, pas le dessin : le remplissage vertical étend la
     surface sensible, la marge négative rend au flux ce que le remplissage
     lui a pris. À l'écran, rien n'a bougé. */
  .work-legende>a,
  .projet-suite a,
  .sillon-link,
  .text-link,
  .agency-address a,
  .reading-heading a,
  .expert-card .card-title{display:inline-block;padding-block:12px;margin-block:-12px}

  .contact-phone,
  .contact-email{padding-block:11px}
  .contact-email{margin-top:14px}   /* 25 d'origine, moins les 11 ajoutés */

  .ink-steps button,
  .project-dots button,
  .reviews-more{min-height:40px}
  .project-dots button{min-width:40px}
}