/* faf-responsive.css — garde-fous de largeur sur petit écran.

   Chargée partout, après les autres feuilles du thème : ces règles corrigent des
   comportements d'Elementor, elles doivent donc passer en dernier.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Largeurs de widget saisies en pixels ────────────────────────────────────
   Quand on fixe la largeur d'un widget en pixels dans Elementor, celui-ci écrit :

       width: var( --container-widget-width, 820px );

   La valeur en pixels n'est qu'un REPLI. La variable, elle, n'est définie que par
   les conteneurs flexbox (`.e-con { --container-widget-width: 100% }`). Une page
   bâtie sur l'ancienne structure section / colonne — c'est le cas de l'accueil et
   des pages de service — n'en pose aucun : le repli s'applique donc tel quel, à
   toutes les largeurs d'écran.

   Sur un téléphone de 390 px, des widgets de 500, 560, 600 et jusqu'à 820 px
   sortaient de l'écran : la page mesurait 856 px de large, et les textes de
   l'accueil débordaient franchement (constaté en production le 12/08/2026).

   On PLAFONNE plutôt qu'on ne force. `width: 100%` écraserait les blocs
   volontairement étroits — une colonne de texte resserrée, une signature — qui
   n'ont aucune raison de s'étirer d'un bord à l'autre sous prétexte qu'on est sur
   mobile. `max-width: 100%` ne touche qu'à ce qui dépasse.

   Le `!important` est nécessaire : la règle d'Elementor est écrite en ligne, avec
   l'identifiant de la page dans le sélecteur (`.elementor-2211 .elementor-element-…`),
   ce qu'aucune feuille externe ne peut dépasser en spécificité.

   Seuil à 767 px : celui d'Elementor pour « mobile », afin que le point de rupture
   soit le même partout et qu'aucune largeur ne se règle entre deux régimes. */
@media (max-width: 767px) {
  .elementor-widget__width-initial,
  .elementor-widget__width-auto {
    max-width: 100% !important;
  }
}