/*
 * Ajustements responsive NEXO.
 *
 * 767px = point de rupture « mobile » d'Elementor : au-delà, le hero repasse
 * en rangée (vérifié à 900px) et ces règles n'ont plus lieu d'être.
 *
 * ATTENTION — les sélecteurs .e-nxg… sont des identifiants générés par
 * Elementor. Ils sont stables tant que le bloc n'est pas supprimé puis
 * recréé dans l'éditeur. La classe métier .nx-visuel-couvrant aurait été
 * plus robuste, mais elle est portée par 5 blocs différents de l'accueil :
 * la cibler aurait réordonné cinq sections au lieu d'une.
 */

@media (max-width: 767px) {

  /* --------------------------------------------- hero de la page d'accueil */

  /* L'image est après le texte dans le DOM (colonne de droite en desktop).
     En colonne, elle tombait donc sous le paragraphe ; la maquette la veut
     en tête. column-reverse plutôt qu'un `order` : la rangée n'a que deux
     enfants, l'intention reste lisible. */
  body.home .e-nxg21a9131c {
    flex-direction: column-reverse;
    gap: 0;
  }

  /* Image pleine largeur : on annule les 24px de padding latéral portés par
     la rangée, et on arrondit les deux coins bas comme sur la référence
     (24px est le rayon déjà utilisé par le bloc). */
  body.home .e-nxg3f4330fc {
    flex: 0 0 auto;
    width: calc(100% + 48px);
    max-width: none;
    margin-inline: -24px;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
  }

  /* 80px de padding haut se cumulaient à l'écart de rangée et éloignaient
     trop le surtitre de l'image. */
  body.home .e-nxg2469061a {
    padding-top: 40px;
  }

  /* Le hero se terminait au ras des deux cartes. */
  body.home .e-nxg573d41af {
    padding-bottom: 72px;
  }
}

@media (max-width: 767px) {

  /* -------------------------------------- titres de carte (page d'accueil) */

  /* Ces titres sortaient à 32px, comme les H2 de section : le texte cassait
     en trois lignes très inégales (327 / 254 / 125 sur 342 de large) et le
     titre paraissait ne pas occuper la largeur. La référence les pose à
     24px, ce qui donne deux lignes pleines.

     Ciblés un par un, et non par `h3` : la page d'accueil compte 25 titres
     de niveau 3 répartis sur QUATRE échelles distinctes — 20px (cartes du
     hero, secteurs, questions FAQ), 24px (engagements), 32px (ces cartes)
     et 48px (les chiffres clés). Une règle sur `h3` les écrase toutes.
     Aucune classe métier ne distingue ces quatre-là ; les identifiants
     générés sont donc le seul point d'accroche. Ils tiennent tant que la
     carte n'est pas supprimée puis recréée dans l'éditeur. */
  body.home .e-nxg0cbeb369,
  body.home .e-nxg8c48ea33,
  body.home .e-nxg8a48425e,
  body.home .e-nxg968e0e02 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {

  /* ------------------------------------------------------------- pied de page */

  /* Les 56px du conteneur s'ajoutaient aux 24px du bloc interne : 80px
     d'encoche de chaque côté, soit 278px de contenu utile sur 390. Le reste
     du site travaille à 24px, et la référence pose exactement 40px 24px.
     Contrairement aux .e-nxg… générés, .e-nxftr et .e-nxftrin sont des
     identifiants choisis dans scripts/entete_pied.php : ils sont stables.

     Le préfixe `.elementor` n'est pas décoratif : Elementor écrit
     `.elementor .e-nxftr` (deux classes). Une règle à une seule classe perd
     malgré un chargement plus tardif. */
  .elementor .e-nxftr {
    padding: 40px 24px;
  }

  .elementor .e-nxftrin {
    padding: 0;
  }
}

@media (max-width: 767px) {

  /* ------------------------------- débordement horizontal des titres longs */

  /* Page /solutions/dematerialisation/ : ce H2 sortait à 48px alors que tous
     les autres H2 de la page sont à 32px — une valeur isolée, manifestement
     saisie par erreur. À 48px, le mot « dématérialisation » mesure 387px pour
     342 disponibles. En contexte flex, `min-width: auto` impose au conteneur
     la largeur du mot le plus long : la page passait à 417px de large, d'où
     la bande vide à droite et le défilement horizontal. */
  .elementor .e-nxgc56871b1 {
    font-size: 32px;
  }

  /* Garde-fou général. Sans effet visible tant qu'un mot tient dans sa
     colonne ; le jour où un titre déborde, il se coupe proprement (la page
     est en lang="fr-FR", la césure est donc correcte) au lieu d'élargir
     toute la page. */
  .elementor h1,
  .elementor h2,
  .elementor h3,
  .elementor h4 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}