/* ═══════════════════════════════════════════════════════════════════════════
   abys-ai/assets/css/mobile.css

   LA COUCHE MOBILE, ET RIEN D'AUTRE.

   Règle absolue de ce fichier : TOUT est enfermé dans @media (max-width:768px).
   Aucune ligne ne peut atteindre le bureau, quoi qu'il arrive. Il se charge
   APRÈS style.css, donc il gagne à spécificité égale sans avoir à surenchérir.

   Le !important n'apparaît qu'à un endroit, la barre du haut, et pour une
   raison précise : plusieurs pages posent leur propre couleur de barre dans un
   <style> en ligne, qui passe forcément après une feuille externe. Sans lui, la
   barre resterait opaque sur l'accueil et sur l'audit.

   Les trois défauts corrigés ici, vus sur téléphone le 11 septembre :
     1. une barre encombrée (logo, gros bouton, burger) et déséquilibrée ;
     2. un rythme vertical de bureau : on scrolle beaucoup pour voir peu ;
     3. des alignements mélangés, héros centré puis sections à gauche.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. LA BARRE DU HAUT ──────────────────────────────────────────────────
     Deux choses, pas trois : le menu à gauche, le logo à droite. Le bouton
     « Commencer » quitte la barre ; il est déjà en grand dans le héros, et il
     volait la moitié de la largeur. La porte de l'espace client reste dans le
     menu (le tiroir la porte déjà).
     La barre est transparente en haut de page et prend un fond flouté dès que
     l'on scrolle, pour que le logo reste lisible sur n'importe quel contenu. */
  .nav {
    padding: 10px 16px !important;
    justify-content: space-between !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    /* LA BARRE FLOTTE AU-DESSUS DE LA PAGE, elle ne prend plus de place. Sans
       cela, elle laissait une bande claire de 64 px au-dessus d'un héros sombre :
       une transparence qui ne montre que le fond du body ne transparaît de rien.
       La première section récupère la hauteur de la barre en padding. */
    position: fixed; top: 0; left: 0; right: 0;
  }
  /* LA PLACE DE LA BARRE, RENDUE À TOUTES LES PAGES. Le body réserve la hauteur
     de la barre ; les pages dont le héros doit passer DESSOUS la reprennent avec
     une marge négative. Viser « la première section » ne marchait pas : selon la
     page, c'est une section, un main ou un simple div, et sur Contact le premier
     titre se retrouvait caché derrière le menu. */
  body { padding-top: 60px; }
  .ac-hero, .mp-hero { margin-top: -60px !important; }
  body.nav-solid .nav {
    background: rgba(242, 251, 247, .86) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(16, 185, 129, .10) !important;
  }
  body.mila.nav-solid .nav { background: rgba(255, 247, 240, .88) !important; border-bottom-color: rgba(249, 115, 22, .14) !important; }

  /* Le logo tient la gauche, le menu la droite. */
  .nav-burger { position: static !important; transform: none !important; margin: 0 !important; order: 3; }

  /* Le logo sans sa tuile : il se pose sur la page, il ne s'y colle pas. */
  .nav .ab-logo { order: 0; margin-left: 0; margin-right: auto; }
  .nav .ab-tuile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 32px; height: 32px; flex-basis: 32px;
  }
  .nav .ab-logo:hover .ab-tuile { box-shadow: none !important; }
  /* Le monde Maison repeint la tuile avec un !important : il faut être plus
     précis que lui pour que le logo reste transparent là aussi. */
  body.mila .nav .ab-tuile { background: transparent !important; border: 0 !important; box-shadow: none !important; }

  /* Ce qui quitte la barre. */
  .nav-links, .nav-lang, .nav-portes, .nav > .btn-sm, .nav .nav-espace, .nav .nav-login { display: none !important; }

  /* ── 2. LA GOUTTIÈRE ──────────────────────────────────────────────────────
     20 px de chaque côté, partout, sans exception. Un texte qui touche le bord
     d'un téléphone donne l'impression que la page est cassée. */
  .container { padding: 0 20px; }
  .container-sm { padding: 0 20px; }

  /* ── 3. LE RYTHME VERTICAL ────────────────────────────────────────────────
     Sur un écran de 390 px de large, une marge de section de 100 px mange un
     quart de la hauteur visible. On descend à une échelle mobile : 44 px entre
     deux sections, 28 px entre deux blocs d'une même section. */
  section { padding-top: 44px; padding-bottom: 44px; }

  /* ── 4. LA TYPOGRAPHIE ────────────────────────────────────────────────────
     Un titre de 48 px sur 390 px de large se casse n'importe où. On resserre,
     et on empêche les mots longs de déborder. */
  h1 { font-size: 32px !important; line-height: 1.12 !important; letter-spacing: -.03em; }
  h2 { font-size: 25px !important; line-height: 1.18 !important; letter-spacing: -.02em; }
  h3 { font-size: 19px !important; line-height: 1.25 !important; }
  h1, h2, h3, p, li { overflow-wrap: break-word; }
  p { font-size: 15.5px; line-height: 1.6; }

  /* ── 5. LES ZONES TACTILES ────────────────────────────────────────────────
     44 px, la hauteur d'un doigt. En dessous, on rate la cible. */
  a.btn, button.btn, .btn-sm, .nav-drawer-panel a { min-height: 44px; }

  /* ── 6. RIEN NE DÉBORDE JAMAIS À DROITE ───────────────────────────────────
     Un débordement horizontal sur mobile fait glisser toute la page et donne
     l'air d'un site cassé. Les tableaux et les blocs de code défilent dans leur
     propre boîte, pas dans la page. */
  /* PAS de overflow-x:hidden ici. Il ne corrige rien : il coupe ce qui dépasse
     et cache le défaut au lieu de le montrer. Le pied de page se retrouvait
     tronqué à droite sans que rien ne le signale. */
  table { display: block; overflow-x: auto; max-width: 100%; }
  /* Pas de height:auto ici : il écrasait les portraits carrés qui ont une
     taille posée et un object-fit. On borne la largeur, rien de plus. */
  img, video, canvas { max-width: 100%; }

  /* LE PORTRAIT ÉCRASÉ DE LA PAGE CONTACT. L'image est enveloppée dans un
     <picture> qui, lui, n'a aucune largeur : dans une boîte flex serrée, c'est
     le <picture> qui se comprime, et la photo tombait à 13 px de large pour
     72 de haut. Le défaut existe avec ou sans cette feuille, il se voyait
     seulement sur téléphone, là où la place manque. */
  .contact-thomas picture { flex: 0 0 72px; width: 72px; display: block; }

  /* ── 7. L'ACCUEIL ────────────────────────────────────────────────────────
     Le héros était centré sur toute la hauteur de l'écran : deux cent cinquante
     pixels de vide avant le premier mot, et le titre qui touchait le bord droit
     parce qu'il restait dimensionné pour un écran large. On le cale en haut, on
     resserre le titre, et la promesse tient dans le premier coup d'œil avec le
     champ et le bouton. */
  .ac-hero {
    /* LE FOND ANIMÉ DOIT ALLER JUSQU'EN BAS DE L'ÉCRAN. Sans hauteur imposée,
       le héros s'arrêtait à la bascule Travail/Maison et une bande blanche de
       la section suivante apparaissait sous le pouce. svh, et non vh : sur
       iPhone, vh compte l'écran SANS les barres de Safari, et le héros passait
       dessous. svh est la hauteur réellement visible, barres comprises. */
    min-height: 100vh !important;
    min-height: 100svh !important;
    /* LE CENTRAGE DOIT TENIR COMPTE DE LA BARRE. Le héros fait toute la
       hauteur de l'écran, mais ses cinquante premiers pixels sont occupés par
       la barre flottante : un centrage nu laisse donc un vide deux fois plus
       grand en bas qu'en haut, et le bloc paraît tomber. Le rembourrage haut
       vaut exactement la hauteur de la barre, le rembourrage bas est nul : le
       centrage se fait alors sur l'espace réellement libre, et le vide au-
       dessus du texte égale le vide sous la bascule. */
    /* ON NE CENTRE PAS UN PETIT BLOC AU MILIEU D'UN GRAND ÉCRAN : ON ÉTALE.
       Le héros fait toute la hauteur, le contenu occupe toute cette hauteur et
       répartit l'espace disponible entre ses cinq éléments. L'accroche remonte
       sous la barre, la bascule Travail/Maison descend vers le bas de l'écran,
       et tout ce qui est entre les deux respire au lieu d'être tassé. */
    justify-content: flex-start !important;
    /* 100 svh sur un iPhone avec les deux barres de Safari, ce n'est pas 844
       pixels mais environ 660. Un rembourrage de 100 en haut et 44 en bas ne
       laissait plus rien à répartir : les écarts tombaient à zéro et la
       bascule se collait à la barre du bas. On réserve moins, l'étalement se
       charge du reste, et cela tient aussi bien sur un petit écran que sur un
       grand. */
    padding: 100px 16px 28px !important;
  }
  .ac-hero-content {
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    width: 100%;
  }
  /* LES TITRES QUI DÉFILENT. Chaque ligne est en white-space:nowrap : écrite
     pour un écran large, elle ne se coupe jamais. Sur 390 px, la plus longue
     (« Les papiers, les rappels, les relances, ») demanderait 20 px de corps
     pour tenir sur une ligne : illisible. On autorise donc le retour à la
     ligne sur téléphone, et on garde un corps de 25 px. La boîte est calée sur
     trois lignes : les titres courts en tiennent deux, le plus long trois, et
     le champ ne bouge jamais pendant le défilé. */
  .ac-titres { font-size: 26px !important; height: 3.5em !important; margin: 0 0 22px !important; }
  .ac-titres .ac-titre { letter-spacing: -.03em; height: 3.4em !important; }
  .ac-titres .ac-titre span { white-space: normal !important; text-wrap: balance; }
  .ac-kicker, .ac-hero .ac-k { font-size: 14.5px !important; margin-bottom: 16px !important; }

  /* CE QUI EST SOUS LE CHAMP. Les trois preuves et la bascule Travail/Maison
     prenaient autant de hauteur que le champ lui-même : trois lignes de 12 px
     largement espacées, puis un gros interrupteur. On les resserre, et la place
     gagnée repart en haut (entre les titres et le champ) et en bas (avant la
     fin de l'écran), là où elle sert à respirer. */
  /* LES TROIS PREUVES. Surtout PAS de flex en colonne ici : Safari sur iPhone
     calcule la largeur d'un conteneur flex en colonne imbriqué dans un autre
     flex en colonne comme une largeur mini, et chaque ligne se coupe en deux
     (« Gratuit pour / commencer »). Chromium, lui, ne le fait pas, donc le
     défaut ne se voit qu'à l'écran réel. On sort du flex : un bloc de largeur
     pleine, et chaque preuve est une ligne centrée. Aucune largeur à deviner,
     donc rien à calculer de travers. */
  .ac-gage {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }
  .ac-gage div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .ac-gage div + div { margin-top: 2px !important; }
  .ac-gage svg { width: 11px !important; height: 11px !important; }
  .ac-duo-switch { margin-top: 20px !important; margin-bottom: 8px !important; padding: 3px !important; }
  .ac-duo-switch button { font-size: 13px !important; padding: 5px 16px 5px 10px !important; gap: 7px !important; }
  .ac-duo-switch .ac-sw-ico { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .ac-duo-switch .ac-sw-ico svg { width: 14px !important; height: 14px !important; }

  /* Les trois boutons de la boîte (document, micro, options). À 46 px ils
     prenaient une ligne entière pour trois icônes et poussaient le bouton
     principal hors du premier écran. */
  .ac-plus, .ac-outil { width: 38px !important; height: 38px !important; flex-basis: 38px !important; box-shadow: 0 0 0 3px rgba(52,211,153,.10) !important; }
  .ac-plus svg, .ac-outil svg { width: 17px !important; height: 17px !important; }
  .ac-gauche { gap: 8px !important; }
  .ac-ligne { gap: 10px !important; }
  .ac-boite { gap: 10px !important; }
  /* Le champ est le produit : sur un écran plein, il mérite la place que le
     héros libère plutôt que de la laisser en fond vert. */
  .ac-champ { min-height: 128px !important; }

  /* ── 8. LES PAGES DE VENTE (Mila, Alfred, Milo) ──────────────────────────
     Elles partagent le même squelette « mp- ». Sur téléphone, chaque section
     posait 72 px de vide en haut et autant en bas : sur quinze sections, cela
     fait deux mille pixels de rien du tout, et la page de Mila atteignait
     quinze mille six cents pixels, soit dix-huit écrans. On resserre le rythme
     sans toucher au contenu. */
  .mp-sec { padding: 40px 0 !important; }
  .mp-hero { padding: 78px 0 34px !important; }
  .mp-h2 { font-size: 24px !important; line-height: 1.14 !important; margin: 0 0 12px !important; }
  .mp-p { font-size: 15.5px !important; line-height: 1.62 !important; margin: 0 0 22px !important; }
  .mp-k { margin-bottom: 10px !important; }
  .mp-hg { font-size: 30px !important; line-height: 1.1 !important; }

  /* Le héros de Mila et d'Alfred : le décor de faisceaux prenait 288 px de haut
     avant même le portrait, et le portrait 200 de plus. Résultat, on arrivait sur
     la page et on voyait du violet : ni le nom, ni la promesse, ni le bouton. On
     réduit le décor et le portrait pour que la phrase et l'appel à l'action
     tiennent dans le premier écran. */
  .mp-milo { height: 34px !important; margin-bottom: 0 !important; }
  .mp-mila { width: 152px !important; margin: 0 auto !important; }
  .mp-hero .mp-h1 { font-size: 27px !important; line-height: 1.14 !important; }
  .mp-lead { font-size: 15.5px !important; line-height: 1.62 !important; }
  .mp-cta { gap: 10px !important; }

  /* ── 9. LE PIED DE PAGE ───────────────────────────────────────────────────
     C'était le pire endroit du site sur téléphone, et il est sur TOUTES les
     pages. La grille est écrite en style en ligne, « 2fr 1fr 1fr 1fr » : quatre
     colonnes d'une centaine de pixels sur un écran de 390. Le texte se coupait
     tous les deux mots (« Dites-lui / quoi faire, il / le fait tous / les
     jours. ») et la colonne Légal sortait de l'écran par la droite.
     Un style en ligne ne se bat qu'avec !important : c'est le seul moyen ici,
     et il reste enfermé dans le média mobile. */
  .ft-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
    margin-bottom: 32px !important;
  }
  /* La marque et la longue colonne « Les agents » prennent toute la largeur ;
     Ressources et Légal, trois liens chacune, tiennent côte à côte. */
  .ft-cols > div:nth-child(1), .ft-cols > div:nth-child(2) { grid-column: 1 / -1; }
  .ft-cols > div:nth-child(1) p { max-width: none !important; }
  /* Les dix liens « Les agents » sur deux colonnes : empilés, ils faisaient à
     eux seuls la hauteur d'un écran de téléphone. */
  .ft-cols > div:nth-child(2) > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px !important;
  }
  footer { padding: 40px 0 26px !important; margin-top: 52px !important; }
  .ft-bas { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  /* LE CARROUSEL DES MÉTIERS QUITTE LE TÉLÉPHONE. Dix vignettes qui défilent
     en boucle au-dessus du pied de page : sur un grand écran c'est une vitrine,
     sur un téléphone c'est une animation qui tourne dans le vide en bas de
     chaque page. Les dix pages métier restent accessibles par le menu. */
  .ft-metier-bloc { display: none !important; }

  /* ── 10. LA PAGE CONTACT ──────────────────────────────────────────────────
     Elle gardait un rythme de bureau : 48 px de gouttière, un en-tête suivi de
     64 px de vide, une carte de formulaire à 40 px de marge intérieure. Et les
     champs à 14 px : en dessous de 16, Safari zoome tout seul dès qu'on touche
     un champ, et le visiteur se retrouve à faire glisser la page pour lire ce
     qu'il écrit. */
  .contact-page { padding: 26px 20px 48px !important; }
  .contact-header { margin-bottom: 30px !important; }
  .contact-header-sub { font-size: 15.5px !important; line-height: 1.6 !important; }
  .contact-grid { gap: 28px !important; }
  .contact-channels { gap: 10px !important; margin-bottom: 28px !important; }
  .contact-channel { padding: 14px 16px !important; gap: 13px !important; border-radius: 13px !important; }
  .contact-channel-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
  .contact-channel-title { font-size: 14.5px !important; }
  .contact-channel-desc { font-size: 12.5px !important; }
  .contact-channel-arrow { display: none !important; }
  .contact-form-card { padding: 22px 18px !important; border-radius: 18px !important; }
  .contact-form-card h2 { font-size: 20px !important; }
  .contact-form-sub { margin-bottom: 20px !important; }
  .contact-steps { gap: 11px !important; }
  .contact-page input[type=text],
  .contact-page input[type=email],
  .contact-page select,
  .contact-page textarea { font-size: 16px !important; }
  .contact-page textarea { min-height: 104px !important; }
}