/* ==========================================================================
   Aerolis — réglages responsive (téléphones et tablettes)

   CE QUE FAIT CE FICHIER
   Le site était déjà structurellement responsive : aucun débordement
   horizontal, même à 320 px. Ce qui n'allait pas était le calibrage — des
   valeurs pensées pour un écran large et appliquées telles quelles sur un
   téléphone :

     · le rythme vertical restait à 88–96 px entre chaque section, soit près
       de 200 px de vide entre deux blocs sur un écran de 844 px de haut.
       La page d'accueil mesurait 18 143 px à 390 px de large, soit 21 écrans ;
     · --fs-h2 valait 34 px en dur, quelle que soit la largeur ;
     · la navigation basculait en menu burger dès 1080 px, alors que la barre
       complète ne réclame que 866 px et tient donc sur un iPad en paysage.

   COMMENT C'EST BRANCHÉ
   Les espacements littéraux des styles inline ont été convertis en variables
   --sp-NN (« padding:88px 0 » → « padding:var(--sp-88) 0 »). Il suffit donc de
   redéfinir ces variables par media query : aucun !important, aucun sélecteur
   fragile, et le rythme reste réglable depuis un seul endroit — ici.

   OÙ RÉGLER : les trois blocs « paliers d'espacement » ci-dessous. Baisser un
   nombre resserre la page, le monter l'aère.

   ATTENTION : ce fichier agit sur l'export statique. Si vous reconstruisez le
   site depuis le projet source, ces réglages devront y être reportés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paliers d'espacement — valeurs de référence (écran large)
   Identiques à l'origine : sur desktop, rien ne change.
   -------------------------------------------------------------------------- */
:root {
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-50: 50px;
  --sp-52: 52px;
  --sp-56: 56px;
  --sp-60: 60px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-76: 76px;
  --sp-80: 80px;
  --sp-88: 88px;
  --sp-96: 96px;
}

/* --------------------------------------------------------------------------
   2. Tablettes (≤ 1024 px) — rythme resserré d'environ un quart
   Une tablette a de la place, mais pas celle d'un écran 27 pouces : garder
   96 px de respiration entre sections y coûte un écran de défilement par
   section sans rien apporter.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --sp-32: 28px;
    --sp-36: 30px;
    --sp-40: 32px;
    --sp-44: 36px;
    --sp-48: 38px;
    --sp-50: 40px;
    --sp-52: 42px;
    --sp-56: 44px;
    --sp-60: 46px;
    --sp-64: 50px;
    --sp-72: 56px;
    --sp-76: 58px;
    --sp-80: 60px;
    --sp-88: 66px;
    --sp-96: 72px;
  }
}

/* --------------------------------------------------------------------------
   3. Téléphones (≤ 600 px) — rythme réduit de moitié, et échelle typographique
   revue. C'est ici que se joue l'essentiel du gain de longueur.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --sp-32: 22px;
    --sp-36: 22px;
    --sp-40: 24px;
    --sp-44: 26px;
    --sp-48: 28px;
    --sp-50: 30px;
    --sp-52: 30px;
    --sp-56: 32px;
    --sp-60: 34px;
    --sp-64: 36px;
    --sp-72: 40px;
    --sp-76: 42px;
    --sp-80: 44px;
    --sp-88: 48px;
    --sp-96: 52px;
  }
}

/* --------------------------------------------------------------------------
   4. Échelle typographique
   Les titres passent par les tokens (--type-h2 → --fs-h2), il suffit donc de
   redéfinir les tailles : tout le site suit, sans toucher au balisage.
   34 px pour un H2 sur un écran de 390 px, c'est un titre de quatre lignes
   qui occupe un tiers de la hauteur utile avant même la première phrase.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --fs-display-1: 46px;
    --fs-display-2: 38px;
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 22px;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-display-1: 34px;
    --fs-display-2: 30px;
    --fs-h1: 28px;
    --fs-h2: 25px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-body-lg: 16px;
    /* Le corps de texte reste à 15 px : descendre en dessous nuit à la
       lisibilité, et ce n'est pas là que se gagne la longueur de page. */
  }
}

/* Écrans très étroits (iPhone SE, 320 px) : la gouttière de 24 px de chaque
   côté ampute 15 % de la largeur utile. */
@media (max-width: 360px) {
  :root {
    --container-pad: 18px;
    --card-pad: 18px;
    --fs-h2: 23px;
  }
}

/* --------------------------------------------------------------------------
   5. Navigation — le burger commençait trop tôt
   La barre complète (logo + menu + téléphone + CTA) réclame 866 px, soit
   930 px avec les gouttières. Elle tient donc largement sur un iPad en
   paysage (1024 px) et sur une fenêtre de portable réduite. On abaisse le
   seuil à 960 px : au-dessus, navigation complète ; en dessous, burger.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) and (max-width: 1080px) {
  /* On restaure exactement les valeurs de base : .hd__nav est un flex,
     .hd__cta et .hd__phone des inline-flex. */
  .hd__nav { display: flex; }
  .hd__cta,
  .hd__phone { display: inline-flex; }

  .hd__burger,
  .hd__phoneIcon { display: none; }

  /* La barre d'action fixe en bas de l'écran fait doublon dès que le CTA
     « Audit gratuit » est visible dans l'en-tête — et elle ampute 74 px de
     hauteur utile sur chaque page. */
  .actionbar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   6. Cibles tactiles
   Les liens du pied de page mesuraient 21 px de haut, empilés à quelques
   pixels les uns des autres : sur un écran tactile, on en vise un et on en
   touche un autre. On les espace sans les grossir — la mise en page reste la
   même, seule la zone cliquable s'agrandit.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (pointer: coarse) {
  .ft__col a,
  .ft__cities a,
  .ft__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Les liens du menu burger : même logique, ils sont la navigation
     principale sur mobile. */
  .mnav a,
  .mnav button { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   7. Bandeau de contact (.om-topbar)
   Sur un écran de 390 px il occupait 119 px — un tiers du premier écran — et
   le numéro de téléphone se cassait un groupe de chiffres par ligne : le lien
   mesurait 16 px de large sur 99 px de haut. L'adresse postale part (elle
   reste dans le pied de page et dans les données structurées), le numéro et
   l'e-mail tiennent sur une ligne.
   -------------------------------------------------------------------------- */
.om-topbar a { white-space: nowrap; }

/* !important est ici indispensable, et seulement ici : ces deux éléments
   portent leur display et leur justify-content en style inline, qui l'emporte
   sur toute feuille de style. Partout ailleurs dans ce fichier, la cascade
   normale suffit. */
@media (max-width: 600px) {
  .om-topbar > div > span:first-child { display: none !important; }

  .om-topbar > div {
    justify-content: center !important;
    gap: 18px !important;
  }
}

/* Un numéro de téléphone ne doit jamais se couper, où qu'il soit. */
a[href^="tel:"] { white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. Barre d'action fixe — sécurité d'affichage
   Sur iPhone, la barre système du bas recouvre les 34 derniers pixels.
   env(safe-area-inset-bottom) décale la barre juste ce qu'il faut, et vaut
   zéro partout ailleurs.
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  .actionbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   9. Hub Infogérance — grille des prestations
   La liste est passée de quatre cartes à trois. Sa grille, dessinée pour un
   2×2, laissait la troisième carte seule sur une deuxième ligne : elle est
   passée à trois colonnes dans la page.
   Reste la tablette : entre 761 et 1000 px, trois colonnes deviennent
   étroites. Le hub Cybersécurité portait déjà cette règle intermédiaire, pas
   celui de l'Infogérance — on l'aligne ici plutôt que dans le chunk, pour
   que tous les réglages d'écran restent au même endroit.
   En dessous de 760 px, la page applique déjà une colonne unique.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1000px) {
  .pg-infogerance #svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   10. Hub Solutions — quatre prestations
   Le retrait du cloud a ramené la liste à quatre cartes. Trois colonnes en
   donnaient 3 + 1, avec une carte seule sur la dernière ligne : la page passe
   donc à deux colonnes, soit 2 + 2, et une seule sur téléphone — règle que la
   page applique déjà en dessous de 760 px. Plus rien à forcer sur tablette.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11. Sécurisation réseau — la grille « Le déclencheur »
   Cinq constats sur deux colonnes : le dernier restait seul, et la grille
   étant tracée au filet, la case vide à côté de lui laissait un demi-cadre
   ouvert. Il occupe désormais toute la largeur — le rectangle reste plein.
   Sur téléphone, la grille ne se repliait pas : deux colonnes pour des phrases
   entières, c'était illisible.
   -------------------------------------------------------------------------- */
#declencheurs-grid > *:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  #declencheurs-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   12. Page Services — le bandeau des quatre pôles
   En auto-fit, la largeur commande le nombre de colonnes, et la bande
   intermédiaire donnait trois colonnes pour quatre cartes : une seule sur la
   dernière ligne. On impose deux colonnes jusqu'à 1080 px, une seule en
   dessous de 560 px ; au-delà, les quatre tiennent sur une ligne.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  #poles-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #poles-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   13. Page Services — la bande 761-1000 px
   Rail de 200 px à gauche, visuel de 380 px à droite : il ne restait que 40 px
   au titre du pôle, qui débordait. La page déplie déjà tout en dessous de
   760 px ; on applique les mêmes règles un cran plus haut.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1000px) {
  .pg-services #fam-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pg-services #fam-rail {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pg-services .fam-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   14. Plan du site — la bande tablette
   Neuf groupes ne se répartissent proprement qu'en trois colonnes. Sur grand
   écran c'est déjà le cas ; entre 620 et 1000 px, la largeur n'en autorisait
   plus que deux et le neuvième groupe restait seul. On garde trois colonnes
   jusqu'en bas de cette bande, puis une seule sur téléphone.
   -------------------------------------------------------------------------- */
@media (min-width: 620px) and (max-width: 1000px) {
  #plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   15. Déploiement de réseaux sécurisés — la bande 761-1000 px
   La hero gardait deux colonnes et le plan de zones tombait à 230 px : les
   cartes se réduisaient à 78 px et leurs libellés étaient rognés. La page
   déplie déjà la hero en dessous de 760 px ; on étend cette règle.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1000px) {
  .pg-infrastructures-reseaux-lan-wan-sd-wan .om-2col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}