/* ══════════════════════════════════════════════════════════════════════
   mobile.css — passe responsive (v34). Chargé en dernier sur toutes les pages.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 650px) {
  /* Ouvertures de page : le fil d'Ariane passe sous le menu fixe */
  .page-hero { padding-top: 146px; }

  /* Accueil · Le travail, en pratique : le texte d'abord, l'exemple ensuite */
  .case-cards .case-card .case-copy { order: 1 !important; min-height: 0; padding-bottom: 30px; }
  .case-cards .case-card .case-media { order: 2 !important; }

  /* Accueil · Notre façon de travailler : « Comprendre. » entier et lisible */
  .page-index #methode .section-ghost { top: 18px; left: 18px; font-size: 15.5vw; opacity: .1; }
  .page-index #methode { padding-top: 84px; }

  /* Contact : la première carte ne chevauche plus le changement de fond */
  .direct-contact { padding-top: 36px; }

  /* Offres : le mot géant « BRAND ELEVATION » recouvrait le fil d'Ariane */
  .page-offres .page-hero::before { display: none; }
  .page-offres .tier-grid .offer-commitment { min-height: 0; margin-bottom: 18px; }

  /* Lisibilité : plus de libellés à 8–9 px */
  .case-cards .case-copy .eyebrow,
  .situation > .eyebrow { font-size: 10px; }

  /* Zones tactiles d'au moins 44 px */
  .footer-links a,
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-links { row-gap: 0; }
  .legal-toc a { padding-block: 12px; }
}

/* Hero de l'accueil : la colonne de texte ne dépasse plus de l'écran (texte coupé à droite) */
@media (max-width: 650px) {
  .page-index .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .page-index .hero-copy { min-width: 0; max-width: 100%; }
  .page-index .hero .text-link,
  .page-index .case-footer a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Très petits téléphones : le bouton menu restait en partie hors écran */
@media (max-width: 370px) {
  .nav { padding-inline: 10px; gap: 8px; }
  .nav .nav__logo img { width: 104px; }
  .nav .nav__cta { padding-inline: 12px; font-size: 11.5px; }
}
@media (max-width: 340px) {
  .nav { padding-inline: 8px; gap: 6px; }
  .nav .nav__logo img { width: 88px; }
  .nav .nav__cta { padding-inline: 10px; font-size: 11px; }
  .nav .nav__cta span { display: none; }
}
/* Tablettes : mêmes corrections de lisibilité et de zones tactiles */
@media (max-width: 900px) {
  .case-cards .case-copy .eyebrow,
  .situation > .eyebrow { font-size: 10px; }
  .footer-links a,
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-toc a { padding-block: 12px; }
  .page-index .hero .text-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Texte en dégradé : la zone peinte descend sous la ligne pour ne plus couper
   les jambages (g, p, q, j), sans changer l'espacement des titres. */
.gradient { padding-bottom: .14em; }
.page-index .hero h1 .hero-line__text.gradient { padding-bottom: .16em; margin-bottom: -.16em; }

/* Liens vers les réseaux sociaux, dans le pied de page */
.footer-social { display: flex; flex-wrap: wrap; gap: 4px 20px; width: 100%; margin-top: 10px; }
.footer-social a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: #d9c9f2; text-decoration: none; }
.footer-social a::after { content: "↗"; margin-left: 5px; font-size: 11px; opacity: .7; }
.footer-social a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 901px) { .footer-social { justify-content: flex-end; } }
.footer-top { flex-wrap: wrap; }
.footer-social { flex-basis: 100%; }
@media (min-width: 901px) { .footer-social { margin-top: -18px; } }

/* Accueil · cartes d'offres : mêmes lignes à la même hauteur dans les deux cartes
   (accroche, titre, texte, chaque bloc, trait et prix), et blocs alignés à gauche
   sur le titre. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .page-index #offres .grid-3--two { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .page-index #offres .grid-3--two > .situation {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      align-items: start;
    }
    .page-index #offres .grid-3--two > .situation > .eyebrow { justify-self: start; }
    .page-index #offres .grid-3--two .tiers--situations {
      grid-row: span 3;
      display: grid;
      grid-template-rows: subgrid;
      gap: 0;
    }
    .page-index #offres .grid-3--two .tiers--situations .tier-summary { align-self: stretch; align-content: start; }
    .page-index #offres .grid-3--two .offer-bottom { align-self: end; }
  }
}
.page-index #offres .tiers--situations .tier-summary { padding-left: 0; padding-right: 0; }