/* === BfastAI — Correctifs responsive mobile ==================================
   Une seule feuille pour tout le site. Les mises en page sont portées par des
   styles inline générés : les règles ci-dessous les surchargent donc avec
   !important, en ciblant les classes de hook (bf-nav, bf-grid--2, bf-pill…)
   ou des morceaux de l'attribut style. Pour ces derniers, viser la forme
   RENDUE, avec espaces : le runtime passe les styles à React et le navigateur
   réécrit l'attribut (« padding:72px 24px » du source devient
   « padding: 72px 24px; », « repeat(2,1fr) » devient « repeat(2, 1fr) »).
   Un sélecteur écrit sans espaces ne trouve rien, sans aucune erreur.
   Points de rupture : 860 px (navigation), 760 px (grilles), 640 px et
   480 px (finitions). Le hamburger est écrit dans le HTML de chaque page ;
   assets/responsive.js ne fait que l'ouvrir et le fermer.
   La feuille porte aussi, en tête, un correctif global qui n'est pas lié au
   mobile : la hauteur de l'enveloppe de page. */

/* ---- Hauteur de l'enveloppe : la nav sticky doit tenir jusqu'en bas.
   Le runtime x-dc injecte, après cette feuille, sa propre remise à zéro :
       html, body { height: 100%; }
       #dc-root, #dc-root > .sc-host { height: 100%; }
   Le contenu déborde alors d'une enveloppe haute d'un seul écran. Or une nav
   `position:sticky` ne colle que dans les limites de son bloc conteneur : passé
   un écran de défilement, elle se décroche et disparaît. Le symptôme se voyait
   sur toutes les pages sauf l'accueil, qui échappe à cette injection.
   On laisse donc la hauteur suivre le contenu, en gardant un plein écran
   minimum pour les pages courtes. Les sélecteurs sont volontairement plus
   spécifiques que ceux du runtime (html:root vaut 0-1-1 contre 0-0-1 pour
   html) : sa feuille étant injectée après, l'ordre ne suffirait pas. */
html:root,
html:root > body { height: auto; min-height: 100%; }
body > #dc-root,
body > #dc-root > .sc-host { height: auto; min-height: 100%; }

/* ---- Navigation, desktop : rien ne change. Les deux enveloppes du menu
   mobile sont en display:contents, donc la pilule de liens et le bouton
   « Nous contacter » restent, pour la mise en page, des enfants directs de
   la nav ; le hamburger est masqué. */
.bf-nav-menu,
.bf-nav-menu-inner { display: contents; }
.bf-burger { display: none; }

/* ---- Navigation, mobile (≤ 860 px) : une seule bulle de verre, comme la
   pilule du desktop — logo à gauche, hamburger à droite. Ouverte, la bulle
   s'allonge vers le bas et déroule Accueil, Réalisation, Blog et
   Nous contacter.
   La nav garde ses 56 px dans le flux ; c'est .bf-nav-menu, en absolute, qui
   dessine la bulle et grandit par-dessus la page : rien ne saute dessous. */
@media (max-width: 860px) {
  .bf-nav {
    top: 12px !important;
    width: calc(100% - 32px) !important;
    height: 56px;
    margin: 12px auto !important;
    /* 22 px à gauche : le logo s'aligne sur le texte des liens du menu
       (1 px de bordure + 7 px de padding de la bulle + 14 px du lien). */
    padding: 0 7px 0 22px !important;
  }

  /* Logo et hamburger passent au-dessus du fond de la bulle. */
  .bf-nav-logo,
  .bf-burger {
    position: relative;
    z-index: 1;
  }

  .bf-burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    color: #FFFCF8;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,252,248,0.12), rgba(255,252,248,0.04));
    border: 1px solid rgba(255,252,248,0.14);
    box-shadow: inset 0 1px 0 rgba(255,252,248,0.18);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .3s ease;
  }
  .bf-burger:focus-visible { outline: 2px solid #A37BFF; outline-offset: 2px; }
  .bf-burger span {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }
  /* Les trois traits se referment en croix quand le menu est ouvert. */
  .bf-menu-open .bf-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .bf-menu-open .bf-burger span:nth-child(2) { opacity: 0; }
  .bf-menu-open .bf-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* La bulle : même verre que la pilule desktop. Fermée, elle ne montre que
     sa rangée haute de 56 px (54 + bordures) ; la ligne de grille 0fr → 1fr
     anime sa hauteur jusqu'à celle du contenu. */
  .bf-nav-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0fr;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 54px 7px 0;
    border-radius: 28px;
    background: rgba(10,10,15,0.55);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,252,248,0.10);
    box-shadow: 0 6px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,252,248,0.10);
    transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
  }
  .bf-menu-open .bf-nav-menu { grid-template-rows: 1fr; }

  /* Contenu du menu : aucun padding propre (sinon la ligne 0fr ne se ferme
     pas complètement), et invisible une fois fermé pour que Tab et les
     lecteurs d'écran ne tombent pas sur des liens cachés. visibility attend
     la fin de l'animation de fermeture avant de basculer. */
  .bf-nav-menu-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .4s;
  }
  .bf-menu-open .bf-nav-menu-inner {
    visibility: visible;
    transition-delay: 0s;
  }
  /* Filet sous la rangée logo / hamburger. */
  .bf-nav-menu-inner::before {
    content: "";
    flex: none;
    height: 1px;
    margin: 1px 13px 7px;
    background: rgba(255,252,248,0.08);
  }

  /* La pilule de liens devient une liste verticale, sans son propre verre
     (la bulle le porte déjà). position:relative et non static : la pastille
     .bf-nav-glass de l'onglet actif, en absolute, s'y mesure. */
  .bf-nav-links {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* line-height explicite : chaque page hérite d'une hauteur de ligne
     différente, le menu garderait sinon des rangées inégales d'une page à
     l'autre. 12 + 22 + 12 + 2 px de bordure = rangées de 48 px. */
  .bf-nav-links > a {
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 22px;
  }

  /* « Nous contacter » : pleine largeur en bas du menu. */
  .bf-nav-menu-inner > a {
    display: block;
    margin: 8px 0 7px;
  }
  .bf-nav-menu-inner > a button {
    display: flex !important;
    width: 100% !important;
  }
  /* Le bouton remplit exactement la largeur du menu, dont le contenu est
     rogné (overflow:hidden, indispensable à l'animation d'ouverture) : le
     grossissement du survol (scale 1.02) ferait couper net ses bouts
     arrondis. On garde seulement le léger enfoncement au clic. */
  .bf-nav-menu-inner > a button:hover { transform: none !important; }
  .bf-nav-menu-inner > a button:active { transform: scale(.99) !important; }
}

/* ---- Contour violet au survol du hamburger : seulement avec une vraie
   souris. Au doigt, le navigateur garde l'état « survol » après le toucher
   et le contour resterait allumé. */
@media (max-width: 860px) and (hover: hover) {
  .bf-burger:hover { border-color: rgba(163,123,255,0.45); }
}

/* ---- Grilles à colonnes fixes : une seule colonne sous 760 px.
   Chaque grille concernée porte une classe d'accroche : bf-grid--2 (bénéfices
   et services de l'accueil), bf-grid--3 (solutions de
   l'accueil, KPI de réalisation) et bf-footer-grid (pied de page de toutes
   les pages). Toute nouvelle grille à colonnes fixes doit recevoir l'une de
   ces classes. La grille du blog n'en a pas besoin : en auto-fill, elle se
   replie seule. */
@media (max-width: 760px) {
  .bf-grid--2,
  .bf-grid--3,
  .bf-footer-grid {
    grid-template-columns: 1fr !important;
  }
  .bf-footer-grid { gap: 28px !important; }
  /* Sections : 72 px de respiration verticale est trop généreux sur mobile.
     Le « ; » final limite la règle aux sections en « 72px 24px » pile : les
     en-têtes de page en « 72px 24px 84px » (ou 44px, 48px) gardent le leur. */
  section[style*="padding: 72px 24px;"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* ---- Bandeau témoignages : les fondus latéraux (2 × 90 px) mangeraient la
   moitié d'un écran de 375 px. */
@media (max-width: 640px) {
  .bf-tm::before,
  .bf-tm::after { width: 40px !important; }
}

/* ---- Petits écrans : plus aucun texte ne doit être clippé. */
@media (max-width: 480px) {
  /* Badges « pilule » à texte long (hero « Automatisation intelligente pour
     entreprises ambitieuses » ≈ 400 px) : retour à la ligne plutôt que
     débordement. Les badges courts ne sont pas affectés visuellement. */
  .bf-pill {
    white-space: normal !important;
    text-align: center !important;
  }
  /* Grands boutons (taille lg, min-height 52 px) : « Découvrir la solution
     adaptée à mon activité → » fait 407 px, « Réserver mon appel gratuit → »
     ~280 px pour ~260 px disponibles dans sa carte — on réduit et on autorise
     le retour à la ligne. */
  button[style*="min-height: 52px"] {
    padding: 14px 18px !important;
    font-size: 15px !important;
    white-space: normal !important;
    text-align: center;
  }
  /* Hero d'accueil : le plancher de 44 px du clamp() reste imposant à
     375 px, on descend à 36 px. */
  h1[style*="clamp(44px"] { font-size: 36px !important; }
  /* Pages légales : cartes texte moins gourmandes en marges internes. */
  .privacy-card { padding: 24px 18px !important; }
}

/* ---- Mouvement réduit : la bulle s'ouvre et se ferme sans animation. */
@media (prefers-reduced-motion: reduce) {
  .bf-burger span,
  .bf-nav-menu,
  .bf-nav-menu-inner { transition: none; }
}

/* === Défilement mobile : plus de flou d'arrière-plan =========================
   SYMPTÔME : au défilement sur téléphone, la nav et les cartes tremblaient.

   CAUSE : `backdrop-filter` ne se compose pas, il se recalcule. Le navigateur
   doit relire le contenu situé DERRIÈRE l'élément, le flouter, puis le peindre
   — à chaque image. Le défilement, lui, est piloté par le compositeur, hors du
   fil principal : le contenu glisse à 60 images/s pendant que ces passes de
   flou arrivent en retard. La nav `position:sticky`, qui doit être repeinte à
   chaque image par construction, décroche alors d'une image ou deux du contenu
   qu'elle survole : c'est le tremblement.

   L'accueil en comptait 26 d'un coup, dont cinq cartes de 345 × 414 px et la
   bulle de nav. Or le fond du site est PLAT (#0A0A0F) : flouter un aplat ne
   donne rien à voir. Le flou ne se remarquait que sous la nav, quand du texte
   passait dessous — on le remplace donc là par un fond presque opaque, qui
   rend la même lecture pour un coût nul.

   Deux familles de sélecteurs, car le flou vient de deux endroits :
     - les classes ci-dessous, posées par une feuille (bulle de nav, pastille,
       recherche) ;
     - [style*="backdrop-filter: blur("] pour les styles inline générés
       (.bf-pill, grandes cartes en blur(var(--blur-md))). Viser la forme
       RENDUE, avec l'espace après le deux-points, comme expliqué en tête de
       cette feuille. Le fragment attrape aussi -webkit-backdrop-filter, qui
       le contient.
   `button` couvre les boutons du design system, dont le flou est posé par sa
   propre feuille : ils sont remplis d'un dégradé, le flou n'y était pas
   visible. `.privacy-card` est la carte des pages légales (CGU,
   Confidentialité) : jusqu'à 345 × 745 px floutées en 16 px, pour un fond
   blanc à 3 % qui ne laissait rien voir du flou ; `.booking-shell`, celle du
   calendrier de contact, est dans le même cas (345 × 662 px). */
@media (max-width: 860px) {
  .bf-nav,
  .bf-nav-menu,
  .bf-nav-glass,
  .bf-pill,
  .bf-search,
  .privacy-card,
  .booking-shell,
  button,
  /* Le bouton « Liquid Glass » pose son flou en !important avec une
     specificite de (0,1,1) : un simple `button` en !important perdait
     l'arbitrage. On reprend son selecteur a l'identique. */
  button[style*="--bf-violet-500"],
  [style*="backdrop-filter: blur("] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Une seule compensation, et seulement là où elle est necessaire : la bulle
     de nav est le seul de ces elements sous lequel du CONTENU defile. Le flou
     etait ce qui rendait ce contenu illisible au travers ; sans lui, il faut
     de l'opacite, sinon le texte de la page transparait sous les liens.
     Les autres (.bf-pill, .bf-search, .privacy-card, .booking-shell) reposent
     sur un fond fixe et lisse : retirer leur flou ne change rien à l'écran,
     et les opacifier, si. On n'y touche donc pas. */
  .bf-nav-menu { background: rgba(10,10,15,0.92) !important; }
}