/* ══════════════════════════════════════════════════════════════════════════
   Tablette et téléphone.
   L'ordinateur fait foi : rien ici ne change une valeur de la maquette tant
   qu'on est au-dessus de 1100 px. En dessous, on ne rétrécit pas — on
   REMPILE. Une grille de trois colonnes serrée à 380 px ne se lit plus.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Jusqu'à 1100 px : le conteneur respire moins ──────────────────────── */
@media (max-width: 1100px) {
  :root { --largeur: 100%; --lecture: 100%; }
  .centre, .centre--large { width: calc(100% - 44px); }
  .section { padding-block: 76px; }
  h1 { font-size: 46px; }
  h2 { font-size: 32px; }
}

/* ── Tablette ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .entete__nav { display: none; }
  /* Le logo à 56 px mangeait la moitié d'un écran de téléphone. */
  .entete .logo { font-size: 36px; }

  /* Au doigt, la barre doit se lire comme une barre DÈS LE HAUT de la page :
     un écran de téléphone n'offre pas assez de contexte pour qu'un fond
     identique se distingue. Elle est donc légèrement plus claire que la
     page, et son filet est visible. */
  .entete {
    background: rgba(9, 14, 21, .96);
    border-bottom-color: rgba(255,255,255,.09);
  }
  .entete[data-defile] { box-shadow: 0 12px 28px -18px rgba(0,0,0,1); }
  .pied .logo { font-size: 32px; }
  .entete__burger {
    display: grid; gap: 5px; justify-self: end; grid-column: 3;
    width: 44px; height: 44px; place-content: center; cursor: pointer;
    background: none; border: 0; padding: 0;
  }
  .entete__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #C3C9CF; transition: transform .4s var(--douceur), opacity .3s; }
  body[data-menu-ouvert] .entete__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body[data-menu-ouvert] .entete__burger span:nth-child(2) { opacity: 0; }
  body[data-menu-ouvert] .entete__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Le menu se déplie sous l'en-tête, en pleine largeur, au doigt. */
  body[data-menu-ouvert] .entete__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0; padding: 12px 22px 22px;
    background: rgba(4,8,14,.98); border-bottom: 1px solid var(--bord);
  }
  body[data-menu-ouvert] .entete__nav a,
  body[data-menu-ouvert] .menu__bouton { padding: 15px 0; font-size: 16px; min-height: 48px; }
  body[data-menu-ouvert] .menu { width: 100%; }
  body[data-menu-ouvert] .menu__volet {
    position: static; transform: none; opacity: 1; visibility: visible;
    translate: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0;
  }
  /* Le bouton reprend sa place dans le flux, en bas du menu déplié. */
  .entete__action { position: static; transform: none; margin-top: 16px; }
  .entete__action .bouton { width: 100%; padding: 15px 26px; font-size: 15px; }

  /* Le panneau doit être OPAQUE : sur la capture de Lionel, le héros se
     lisait à travers entre les entrées. */
  body[data-menu-ouvert] .entete__nav {
    background: #05090F; box-shadow: 0 24px 50px -20px rgba(0,0,0,.95);
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  body[data-menu-ouvert] .entete__nav > a,
  body[data-menu-ouvert] .menu { border-top: 1px solid rgba(255,255,255,.05); }
  body[data-menu-ouvert] .entete__nav > a:first-child { border-top: 0; }

  .agents, .cartes, .cartes--4, .metiers { grid-template-columns: repeat(2, 1fr); }
  .cartes--2 { grid-template-columns: 1fr; max-width: 460px; }
  .pourquoi, .duo, .contact, .fondateurs { grid-template-columns: 1fr; gap: 32px; }
  .dix { grid-template-columns: 1fr; }
  .chiffres { max-width: 460px; grid-template-columns: repeat(2, 1fr); }
  .chiffres > div:nth-child(3) { border-left: 0; }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .heros { padding-block: 72px 68px; }
}

/* ── Téléphone ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .centre, .centre--large { width: calc(100% - 32px); }
  .section { padding-block: 58px; }
  h1 { font-size: 34px; line-height: 1.12; }
  h2 { font-size: 26px; }
  .chapeau { font-size: 16.5px; }
  .heros { padding-block: 52px; }
  .heros__boutons { flex-direction: column; align-items: stretch; }
  .heros__boutons .bouton { width: 100%; }

  .agents, .cartes, .cartes--4, .metiers, .chiffres { grid-template-columns: 1fr; }
  .chiffres > div + div { border-left: 0; border-top: 1px solid var(--bord); }
  .frise__jetons { grid-template-columns: 1fr; }
  /* La FAQ restait sur deux colonnes de 150 px au téléphone : textes serrés, page qui débordait de 90 px (04/11/2026). */
  .faq { grid-template-columns: minmax(0, 1fr); }
  .frise > li { grid-template-columns: 44px 1fr; gap: 14px; }
  .frise > li:not(:last-child)::before { left: 21px; top: 50px; }
  .frise__puce { width: 44px; height: 44px; font-size: 13px; }
  .frise__corps h3 { font-size: 18px; }
  .parcours > div { grid-template-columns: 58px 1fr; gap: 14px; }
  .appel { padding: 38px 22px; }
  .appel__mentions { gap: 12px; font-size: 13.5px; }
  .phrase-seule { font-size: 19px; }
  .citation blockquote { font-size: 17px; }
  .contact .carte { padding: 24px; }
  .appli__ligne { flex-wrap: wrap; gap: 8px; }
  .appli__etat { margin-left: 0; }

  .pied__haut { flex-direction: column; gap: 22px; }
  .pied__contact { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pied__contact .sep { display: none; }
  .pied__social { margin-left: 0; }
  .pied__bas { flex-direction: column; gap: 10px; }

  .bulle { right: 16px; bottom: 16px; }
  .rdv { padding: 68px 12px 12px; }
  .rdv__fermer { top: 12px; right: 12px; }
  .rdv__cadre { height: calc(100vh - 80px); height: calc(100dvh - 80px); }
  .intro__onde { gap: 5px; }
  .intro__onde i { width: 4px; }
  .intro__phrase { font-size: 19px; }
}