/* ==========================================================================
   Échelle typographique mobile — chargée après style.css par les trois langues.

   Ce fichier ne s'applique qu'en dessous de 780px : le rendu desktop reste
   entièrement défini par style.css et les styles en ligne.

   Repères retenus (guides de typographie mobile 2024-2026, iOS 17px /
   Material 16px) : corps de texte 15-17px, jamais sous 13px, titres de
   page 32-40px, interlignage 1.5-1.6, champs de formulaire à 16px pour
   éviter le zoom automatique d'iOS.

   Les tailles en clamp() ont vu leur minimum relevé directement dans
   index.html — elles n'apparaissent donc pas ici. Ce fichier ne reprend
   que les tailles fixes en px et celles écrasées en !important par
   style.css sur mobile.
   ========================================================================== */

@media (max-width: 780px) {

  /* --- Hero d'accueil : le nom de l'agence devient le point d'entrée --- */
  .twa-hero { min-height: min(50vh, 440px); }
  /* Le voile est calé sur ce que porte réellement chaque bande du cadre :
     boutons de 5 à 27 %, guépard de 34 à 58 %, sous-titre de 69 à 77 %, titre de
     78 à 89 %, surtitre au-dessus. Entre 34 et 58 % le voile tombe à zéro — la
     photo y est nue. Au-dessus et en dessous il se referme sur le texte, un peu
     plus qu'avant : le titre passait sur le ciel clair, il y était à la limite
     du lisible. */
  .twa-hero-scrim {
    background: linear-gradient(to top,
      rgba(20,17,14,0.74) 0%,
      rgba(20,17,14,0.30) 22%,
      rgba(20,17,14,0.00) 34%,
      rgba(20,17,14,0.00) 58%,
      rgba(20,17,14,0.40) 69%,
      rgba(20,17,14,0.50) 80%,
      rgba(20,17,14,0.58) 100%) !important;
  }
  .twa-hero-label { font-size: 9.5px !important; letter-spacing: 0.26em !important; margin-bottom: 12px !important; }
  .twa-hero-title { font-size: clamp(36px, 11vw, 50px) !important; line-height: 1 !important; margin-bottom: 14px !important; }
  .twa-hero-subtitle { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 22px !important; }
  .twa-hero-actions [data-go] { padding: 14px 22px !important; font-size: 11.5px !important; }
  .twa-hero-link { font-size: 11.5px !important; }

  /* --- En-tête et menu --- */
  .twa-brand > div:first-child { font-size: 21px !important; }
  .twa-brand > div:last-child { font-size: 9px !important; }
  .twa-mobile-link { font-size: 17px; padding: 16px 2px; }
  .twa-mobile-sublink { font-size: 16px; }
  .twa-mobile-label { font-size: 11.5px; }
  .twa-mobile-cta { font-size: 12px; }
  .twa-mobile-langs { font-size: 14px; }

  /* --- Surtitres et libellés en capitales --- */
  .twa-eyebrow, .twa-why-label { font-size: 11.5px !important; letter-spacing: 0.22em !important; }
  .twa-offer-level { font-size: 11.5px !important; letter-spacing: 0.2em !important; }
  .twa-why-cat { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .twa-hero-band-label { font-size: 9.5px !important; letter-spacing: 0.22em !important; }

  /* --- Chapôs et corps de texte --- */
  .twa-lead { font-size: 16px !important; line-height: 1.65 !important; }
  .twa-bw-intro-text { font-size: clamp(14.5px, 4vw, 16px) !important; }
  .twa-why-text { font-size: 15px !important; line-height: 1.55 !important; }
  .twa-why-toggle { font-size: 20px !important; }

  /* --- Les trois offres --- */
  .twa-offer-body { padding: 20px 20px 22px !important; gap: 9px !important; }
  .twa-offer-title { font-size: 22px !important; }
  .twa-offer-price { font-size: 14px !important; }
  .twa-offer-desc { font-size: 14.5px !important; line-height: 1.6 !important; }
  .twa-offer-body [data-go] { font-size: 11.5px !important; padding: 15px 18px !important; }

  /* --- Éthique / Transparence / Personnalisation ---
     Les trois textes n'ont pas la même longueur : en les affichant tour à tour
     avec display:none, le bloc changeait de hauteur à chaque onglet et tout ce
     qui suit — jusqu'au pied de page — remontait ou descendait. On les empile
     désormais dans la même cellule de grille : le bloc garde la hauteur du plus
     long des trois, et seule la visibilité change. */
  .twa-eth-tabs span { font-size: 21px; }
  .twa-eth-panels { display: grid; }
  .twa-eth-panels p {
    display: block;
    grid-area: 1 / 1;
    font-size: clamp(14px, 3.8vw, 15.5px);
    line-height: 1.65;
    visibility: hidden;
    opacity: 0;
    transition: opacity .28s ease;
  }
  .twa-eth-panels p.is-active { visibility: visible; opacity: 1; }

  /* --- Pour qui ? --- */
  .twa-audience-title { font-size: 22px !important; }
  .twa-audience-desc { font-size: 13.5px !important; }

  /* --- Lookasse --- */
  .twa-lk-text { font-size: 15.5px !important; line-height: 1.5 !important; }
  /* Note secondaire : volontairement plus petite que le paragraphe qu'elle suit,
     sinon les deux se confondent sur mobile. */
  .twa-lk-note { font-size: clamp(11.5px, 3.1vw, 13px) !important; line-height: 1.6 !important; }
  /* Phrase de clôture : elle doit tenir sur une seule ligne. Passée en gras (600),
     elle s'élargit d'environ 4 % — on rend donc ce que le gras prend, sinon elle
     déborde sur les écrans de 320px. */
  .twa-lk-baseline { font-size: 4.55vw !important; }

  /* Boutons : taille lisible sur petit écran. */
  .twa-btn { font-size: 12px !important; }

  /* --- Voyager avec The Wild Agency --- */
  .twa-title-voyager { font-size: clamp(18px, 7.1vw, 88px) !important; }

  /* --- Q&A et checklist --- */
  [data-faq-answer] { font-size: 16px !important; line-height: 1.7 !important; }
  [data-faq-toggle] { font-size: 22px !important; }
  .checklist-grid [data-tick] { font-size: 15.5px !important; line-height: 1.55 !important; }

  /* --- Réglages par langue -------------------------------------------------
     Quatre lignes du site sont dessinées pour tenir sur une seule ligne et
     remplir la largeur. Les traductions n'ont pas la même longueur : chacune a
     donc sa taille, mesurée à 320px (la contrainte la plus serrée) puis réduite
     de 4 % de marge. style.css contient des réglages plus anciens pour les
     mêmes lignes ; ceux-ci les remplacent. */
  [data-lang="en"] .twa-lk-baseline { font-size: 5.7vw !important; }
  [data-lang="en"] .twa-title-voyager { font-size: clamp(18px, 7.55vw, 88px) !important; }

  [data-lang="es"] .twa-lk-baseline { font-size: 4.75vw !important; }
  [data-lang="es"] .twa-title-voyager { font-size: clamp(18px, 7.85vw, 88px) !important; }
  /* « Solicitar un presupuesto a medida » est plus long qu'en français. */

  /* --- Pied de page ---
     Sur mobile le pied de page reprenait le fond du site et commençait sans
     marge : son filet supérieur se confondait avec les séparateurs du menu, et
     sur Contact ou Q&A il démarrait collé à la section précédente. On le pose
     sur le beige déjà utilisé ailleurs sur le site et on lui rend de l'air, pour
     que la coupure se lise de la même façon au bas des cinq pages. */
  footer {
    background: #F1EAE0;
    border-top: 1px solid rgba(42,38,34,0.14) !important;
    margin-top: 34px;
  }
  .twa-foot-grid { padding-top: 34px !important; padding-bottom: 32px !important; }
  .twa-foot-nav span { font-size: 13px !important; }
  .twa-foot-contact { font-size: 13.5px !important; }
  .twa-foot-langs { font-size: 13px !important; }
  .twa-foot-copy { font-size: 12px !important; }
}