/* ==========================================================================
   08 - Mobile
   Lot 8, à recetter en dernier une fois le desktop figé.

   Piège principal : le menu est rendu DEUX FOIS dans le DOM, une fois pour le
   desktop et une fois pour le panneau mobile. Les règles du lot 2 ne doivent
   pas s'appliquer au panneau, en particulier le rectangle violet de l'entrée
   active, qui doit rester lisible sur le fond du panneau.
   ========================================================================== */

/* --- Pas de défilement horizontal, jamais --------------------------------- */

/* `overflow-x: hidden` sur html transforme la racine en conteneur de
   défilement et NEUTRALISE `position: sticky` sur tous ses descendants.
   C’est ce qui empêchait de rendre l’en-tête collant proprement.

   `clip` coupe le débordement horizontal exactement pareil, mais sans
   créer de conteneur de défilement : sticky continue de fonctionner. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, iframe, table {
  max-width: 100%;
}

/* --- En-tête mobile -------------------------------------------------------- */

@media (max-width: 1023px) {

  /* Titre réduit, centré, hauteur minimale : même objectif que sur desktop,
     voir le début du contenu sans scroller. */
  .elementor-location-header .hfe-site-title,
  .ehf-header .hfe-site-title,
  .elementor-location-header .elementor-widget-heading .elementor-heading-title,
  .ehf-header .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(1.0625rem, 4.5vw, 1.375rem);
    letter-spacing: .2em;
  }

  .elementor-location-header .elementor-section > .elementor-container,
  .ehf-header .elementor-section > .elementor-container {
    padding-block: .5rem;
  }

  /* Bouton d'ouverture du menu : 44px minimum. */
  .elementor-location-header .hfe-nav-menu__toggle,
  .ehf-header .hfe-nav-menu__toggle,
  .elementor-location-header .elementor-menu-toggle,
  .ehf-header .elementor-menu-toggle,
  .elementor-location-header .menu-toggle,
  .ehf-header .menu-toggle,
  .wpbf-mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-foreground);
  }
}

/* --- Panneau de menu mobile ------------------------------------------------
   Arborescence en accordéon : le site a 27 entrées de menu, un menu à plat
   serait illisible. Le dépliage lui-même est géré par le widget de menu (HFE
   ou Elementor Pro) ; ce fichier ne fait que le rendre utilisable au pouce. */

@media (max-width: 1023px) {

  .elementor-location-header .hfe-nav-menu__layout-vertical .menu-item a,
  .ehf-header .hfe-nav-menu__layout-vertical .menu-item a,
  .elementor-location-header .elementor-nav-menu--dropdown a,
  .ehf-header .elementor-nav-menu--dropdown a,
  .wpbf-mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    border-bottom: var(--lm-rule) solid var(--lm-border);
  }

  /* L'entrée active dans le panneau : pas de rectangle plein, qui écrase la
     lecture sur toute la largeur. Violet sur le texte et filet à gauche.

     Les trois classes d'ASCENDANCE sont ajoutées le 12/09 : le lot 2 les
     traite comme l'entrée active elle-même, et sur une page interne c'est
     presque toujours l'une d'elles qui est posée. Relevé sur
     /idees-debats/idees-forces/ : « Idées & Débats » portait bien le gros
     rectangle violet pleine largeur dans le panneau. */
  .elementor-location-header .elementor-nav-menu--dropdown .current-menu-item > a,
  .ehf-header .elementor-nav-menu--dropdown .current-menu-item > a,
  .elementor-location-header .elementor-nav-menu--dropdown .current-menu-ancestor > a,
  .ehf-header .elementor-nav-menu--dropdown .current-menu-ancestor > a,
  .elementor-location-header .elementor-nav-menu--dropdown .current-page-ancestor > a,
  .ehf-header .elementor-nav-menu--dropdown .current-page-ancestor > a,
  .elementor-location-header .elementor-nav-menu--dropdown .current-menu-parent > a,
  .ehf-header .elementor-nav-menu--dropdown .current-menu-parent > a,
  .elementor-location-header .hfe-nav-menu__layout-vertical .current-menu-item > a,
  .ehf-header .hfe-nav-menu__layout-vertical .current-menu-item > a,
  .wpbf-mobile-menu .current-menu-item > a {
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    font-weight: 600;
    border-left: 3px solid var(--lm-primary);
  }

  /* Les sous-niveaux se distinguent par un léger fond et un décalage. */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu a,
  .ehf-header .elementor-nav-menu--dropdown .sub-menu a,
  .wpbf-mobile-menu .sub-menu a {
    padding-left: 2.5rem;
    font-size: .8125rem;
    background: rgba(112, 88, 208, .04);
  }

  /* Bouton de dépliage d'un sous-menu : cible tactile suffisante. */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow,
  .ehf-header .elementor-nav-menu--dropdown .sub-arrow,
  .elementor-location-header .hfe-menu-toggle,
  .ehf-header .hfe-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- Grilles en mobile ------------------------------------------------------
   2 colonnes, jamais 1. La règle est posée dans 05-grilles.css ; on neutralise
   ici les passages à une colonne imposés par Elementor sur les colonnes de
   section, qui casseraient les mosaïques. */

@media (max-width: 767px) {

  .lm-cols-4 > .elementor-container > .elementor-column,
  .lm-cols-4 > .elementor-container > .elementor-row > .elementor-column {
    flex-basis: 50%;
    max-width: 50%;
  }

  .lm-tile__body { padding: .5rem .625rem; }
  /* Titre des vignettes, et légendes de photos qui le reprennent. */
  :root { --lm-tile-title-size: .8125rem; }
}

/* --- Cibles tactiles -------------------------------------------------------
   Contrôle de recette :
     [...document.querySelectorAll('a, button, input[type=submit]')]
       .filter(e => { const r = e.getBoundingClientRect();
                      return r.height > 0 && r.height < 44; })
   Les liens en flux de texte sont volontairement exclus : imposer 44px à
   chaque lien d'un paragraphe casserait l'interlignage. */

@media (max-width: 767px) {

  .lm-breadcrumb a {
    display: inline-block;
    padding-block: .35rem;
  }

  .lm-footer-links a,
  .lm-newsletter button,
  .lm-newsletter input[type="email"] {
    min-height: 44px;
  }
}

/* --- Page d'accueil en mobile -----------------------------------------------
   Les trois photos passent sur deux colonnes, la signature manuscrite reste
   centrée dessous. À vérifier sur la structure réelle de la page d'accueil :
   si les photos sont dans trois colonnes Elementor, ajouter la classe
   lm-cols-4 sur leur section depuis Elementor pour hériter de la règle
   ci-dessus. */

/* ==========================================================================
   Recette mobile du 12/09 : en-tête compact et panneau lisible
   ==========================================================================

   Trois défauts signalés par Philippe, captures à l'appui, et mesurés sur le
   DOM réel en 390px de large :

   1. l'en-tête occupait 222px pour un titre et un bouton, soit le quart d'un
      écran de téléphone avant le premier mot de la page. La cause n'est pas
      dans le thème : le modèle d'en-tête pose `padding: 50px` et
      `margin-top: -30px` sur la section du menu, en dessous de 1024px
      (post-42.css). Cinquante pixels de marge de chaque côté sur un écran qui
      en fait 390, c'est aussi ce qui réduisait le panneau à 270px ;

   2. le panneau déroulant s'ouvrait en rangées horizontales, entrées et
      sous-menus mélangés. Deux causes, corrigées à la source :
      `display: flex` sur la liste (02-entete-menu.css, désormais limité à la
      barre desktop) et `display: block !important` sur les sous-menus
      (09-megamenu.css, supprimé). Il reste ici à défaire le décor de la barre
      desktop, qui n'a pas de sens dans un panneau : cadre, ombre, coins ;

   3. les mosaïques restaient à quatre vignettes par rangée. Traité dans
      05-grilles.css, au plus près de la règle qui en était la cause.

   Le seuil est celui du reste du fichier, 1023px. Le panneau, lui, n'existe
   qu'en dessous de 768px : le widget est réglé sur « dropdown-mobile », et
   entre 768 et 1023px c'est la barre desktop qui s'affiche. */

@media (max-width: 1023px) {

  /* L'en-tête reprend les espacements du reste du site. La spécificité du
     modèle est de trois classes ; `body[class*=]` est le préfixe déjà retenu
     dans 02-entete-menu.css pour passer devant sans coder en dur les
     identifiants d'éléments, qui changent au premier enregistrement. */
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 > .elementor-section,
  body[class*="elementor-kit-"] .ehf-header .elementor-42 > .elementor-section {
    padding: .25rem 1rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* La colonne du menu prend toute la largeur : le modèle lui donne 93% et un
     centrage qui, une fois les 50px de marge retirés, décalait le panneau. */
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-column,
  body[class*="elementor-kit-"] .ehf-header .elementor-42 .elementor-column {
    width: 100%;
  }

  /* Le panneau : une liste verticale, pleine largeur. */
  header.elementor-location-header .elementor-nav-menu--dropdown,
  .ehf-header .elementor-nav-menu--dropdown {
    width: 100%;
  }

  header.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu,
  .ehf-header .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: block;
    width: 100%;
  }

  header.elementor-location-header .elementor-nav-menu--dropdown .menu-item,
  .ehf-header .elementor-nav-menu--dropdown .menu-item {
    display: block;
    width: 100%;
  }

  /* Le sous-menu se déplie DANS le flux, sous son entrée : ni cadre, ni ombre,
     ni coins arrondis, qui sont le décor du menu déroulant desktop posé au
     lot 2 et donneraient ici une carte flottante au milieu de la liste. */
  header.elementor-location-header .elementor-nav-menu--dropdown .sub-menu,
  .ehf-header .elementor-nav-menu--dropdown .sub-menu {
    position: static;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
}

/* --- Bouton de dépliage des sous-menus du panneau --------------------------
   Le widget de navigation est réglé SANS indicateur de sous-menu : il n'imprime
   aucune flèche, et les six sous-menus du panneau étaient donc inatteignables
   au doigt. Le bouton est ajouté par assets/js/lm-front.js, à côté du lien et
   jamais à sa place : l'entrée parente continue de mener à sa page.

   Le sous-menu reste fermé tant que le bouton n'a pas posé `lm-sub-open` : on
   n'a donc pas besoin de masquer quoi que ce soit ici, Elementor le fait déjà
   avec `.elementor-nav-menu ul { display: none }`. */

.lm-sub-toggle {
  display: none;   /* le panneau n'existe qu'en dessous de 1024px */
}

@media (max-width: 1023px) {

  header.elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children,
  .ehf-header nav.elementor-nav-menu--dropdown .menu-item-has-children {
    position: relative;
  }

  /* Le libellé s'arrête avant le bouton, sinon un titre long passerait
     dessous. */
  header.elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children > a,
  .ehf-header nav.elementor-nav-menu--dropdown .menu-item-has-children > a {
    padding-right: 3.25rem;
  }

  header.elementor-location-header nav.elementor-nav-menu--dropdown .lm-sub-toggle,
  .ehf-header nav.elementor-nav-menu--dropdown .lm-sub-toggle,
  .hfe-nav-menu__layout-vertical .lm-sub-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-foreground);
    cursor: pointer;
  }

  /* Chevron dessiné au trait : pas de police d'icônes à charger pour deux
     traits, et il suit la couleur du texte. */
  header.elementor-location-header nav.elementor-nav-menu--dropdown .lm-sub-toggle::before,
  .ehf-header nav.elementor-nav-menu--dropdown .lm-sub-toggle::before,
  .hfe-nav-menu__layout-vertical .lm-sub-toggle::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }

  header.elementor-location-header nav.elementor-nav-menu--dropdown .lm-sub-toggle[aria-expanded="true"]::before,
  .ehf-header nav.elementor-nav-menu--dropdown .lm-sub-toggle[aria-expanded="true"]::before,
  .hfe-nav-menu__layout-vertical .lm-sub-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(-135deg);
  }

  header.elementor-location-header nav.elementor-nav-menu--dropdown .lm-sub-toggle:focus-visible,
  .ehf-header nav.elementor-nav-menu--dropdown .lm-sub-toggle:focus-visible {
    outline: 2px solid var(--lm-primary);
    outline-offset: -2px;
  }

  /* Le sous-menu déplié. La règle du widget, `.elementor-nav-menu ul`, ne pèse
     qu'une classe et un type : le chemin complet du panneau suffit à passer
     devant, sans !important. */
  header.elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children.lm-sub-open > .sub-menu,
  .ehf-header nav.elementor-nav-menu--dropdown .menu-item-has-children.lm-sub-open > .sub-menu,
  .hfe-nav-menu__layout-vertical .menu-item-has-children.lm-sub-open > .sub-menu {
    display: block;
  }
}

/* --- Les libellés du panneau, à l'endroit ---------------------------------
   Relevé le 12/09 : `font-style: oblique` sur les liens du panneau. Il vient de
   la typographie réglée dans le widget pour son menu déroulant, sortie par
   Elementor en CSS d'élément. Nulle part ailleurs sur le site le menu n'est en
   italique, la maquette non plus. Même préfixe que dans 02-entete-menu.css pour
   passer devant sans coder en dur l'identifiant du widget. */

@media (max-width: 1023px) {
  body[class*="elementor-kit-"] header.elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > a,
  body[class*="elementor-kit-"] .ehf-header nav.elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > a {
    font-style: normal;
  }
}

/* --- La barre de menu entre 768 et 1023px ---------------------------------
   Le widget ne passe au bouton hamburger qu'en dessous de 768px : entre les
   deux, c'est la BARRE desktop qui s'affiche. Mesuré à 820px de large : les
   huit entrées demandent environ 720px pour 680px disponibles, et « Contact »
   tombait seul sur une deuxième ligne.

   Même arbitrage qu'au lot 2 pour le desktop : on reprend la place sur les
   espacements, jamais sur la taille du texte. La pastille de l'entrée active
   suit, sans quoi elle dépasserait des autres entrées. */

@media (min-width: 768px) and (max-width: 1023px) {

  body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a,
  body[class*="elementor-kit-"] .ehf-header .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a {
    padding: 8px 6px !important;
  }
}

/* --- Le bouton du menu ne dépend plus d'une police d'icônes ----------------
   SIGNALÉ LE 12/09 par Philippe, capture à l'appui : à la place du bouton, un
   carré vide.

   C'est le carré que dessine le navigateur quand la police demandée n'a pas
   le caractère voulu. Le bouton d'Elementor est une lettre : la classe
   `eicon-menu-bar` affiche `\e816` dans la police `eicons`. Si cette police
   n'arrive pas — fichier absent du cache du navigateur, requête perdue,
   extension qui bloque les polices distantes — il ne reste que le carré.

   Vérifié côté serveur le 12/09 : le fichier est bien servi, 108 ko en
   `font/woff2`, réponse 200 du CDN Hostinger. Le défaut est donc au chargement,
   côté visiteur, et il est par nature intermittent.

   Sur un téléphone, ce bouton est le SEUL accès au menu : il ne doit dépendre
   de rien. On le dessine donc au trait, en CSS. Trois barres pour ouvrir, une
   croix pour fermer, dans la couleur du texte. La lettre de la police est
   neutralisée (`content: ""`) pour ne pas se superposer au dessin quand la
   police arrive normalement.

   Le reste du site continue d'utiliser les polices d'icônes : la loupe, les
   réseaux sociaux du pied de page. Aucune n'est un point de passage obligé. */

@media (max-width: 1023px) {

  header.elementor-location-header .elementor-menu-toggle,
  .ehf-header .elementor-menu-toggle {
    color: var(--lm-foreground);
  }

  /* Le porte-icône devient la barre du milieu. */
  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open,
  .ehf-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    font-size: 0;
    background: currentColor;
  }

  /* Les deux autres barres. `content: ""` remplace la lettre de la police. */
  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::before,
  .ehf-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::before,
  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::after,
  .ehf-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
  }

  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::before,
  .ehf-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::before {
    top: -7px;
  }

  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::after,
  .ehf-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open::after {
    top: 7px;
  }

  /* La croix de fermeture, même principe : deux barres croisées. */
  header.elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close,
  .ehf-header .elementor-menu-toggle .elementor-menu-toggle__icon--close {
    position: relative;
    width: 22px;
    height: 22px;
    font-size: 0;
  }

  header.elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::before,
  .ehf-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::before,
  header.elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::after,
  .ehf-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
  }

  header.elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::before,
  .ehf-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::before {
    transform: rotate(45deg);
  }

  header.elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::after,
  .ehf-header .elementor-menu-toggle .elementor-menu-toggle__icon--close::after {
    transform: rotate(-45deg);
  }

  /* Couleur du bouton au survol et au focus (check du 24/09/2026).
     Le modèle d'en-tête (post 42) règle `div.elementor-menu-toggle:hover` et
     `:focus` sur #DB0A0A00, un rouge TRANSPARENT. Or le bouton garde le focus
     après le toucher, et le tactile garde le survol : la croix de fermeture
     disparaissait dès l'ouverture du panneau, et au clavier le burger
     lui-même devenait invisible. Même impasse de spécificité qu'au survol des
     entrées desktop (02-entete-menu.css) : !important, limité à la couleur. */
  header.elementor-location-header .elementor-menu-toggle:hover,
  header.elementor-location-header .elementor-menu-toggle:focus,
  header.elementor-location-header .elementor-menu-toggle.elementor-active,
  .ehf-header .elementor-menu-toggle:hover,
  .ehf-header .elementor-menu-toggle:focus,
  .ehf-header .elementor-menu-toggle.elementor-active {
    color: var(--lm-foreground) !important;
  }

  /* La loupe reste à côté du bouton quand le panneau s'ouvre. Le panneau
     s'ouvre dans le flux : il étirait la colonne de la loupe, dont le contenu
     est centré verticalement, et la loupe descendait au milieu de la liste.
     Sans étirement, la colonne garde sa hauteur et la loupe sa place ; sa
     hauteur minimale est celle du bouton (44px, plus haut), pour que les deux
     restent centrés sur la même ligne. */
  header.elementor-location-header .elementor-container:has(> .elementor-column > .elementor-widget-wrap > .elementor-widget-search-form) {
    align-items: flex-start;
  }

  header.elementor-location-header .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-search-form) {
    min-height: 44px;
  }
}

/* --- En-tête non collant sur un écran bas --------------------------------
   Check du 24/09/2026 : l'en-tête mobile fait 138px. Collant, il prend 17 %
   d'un téléphone en portrait, mais plus du tiers en paysage. Sous 500px de
   haut, il défile avec la page. */
@media (max-width: 1023px) and (max-height: 500px) {
  header.elementor-location-header,
  .ehf-header {
    position: relative;
  }
}

/* --- La recherche, rendue au téléphone et à la tablette --------------------
   Validé par Philippe le 12/09 : le widget était masqué en dessous de 1024px
   par deux classes du modèle, `elementor-hidden-tablet` et
   `elementor-hidden-phone`, posées sur la colonne ET sur le widget. Résultat,
   aucun accès à la recherche sur un téléphone, alors que c'est là qu'un
   sommaire de 27 entrées est le plus pénible à parcourir.

   Le masquage est levé ici plutôt que dans l'éditeur : c'est un réglage à deux
   endroits dans un modèle partagé, et la ligne de menu mobile doit de toute
   façon être remise en page pour accueillir la loupe à côté du bouton.

   Les deux colonnes restent donc côte à côte : le menu prend la place
   disponible, la recherche juste ce qu'il lui faut. */

@media (max-width: 1023px) {

  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-column.elementor-hidden-tablet,
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-column.elementor-hidden-phone,
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-widget.elementor-hidden-tablet,
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-widget.elementor-hidden-phone {
    display: block;
  }

  /* La colonne du menu prend la place restante, celle de la loupe s'ajuste à
     son contenu. Cette règle vient après celle qui met les colonnes de
     l'en-tête à 100% : c'est elle qui gagne pour ces deux colonnes-là. */
  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-column:has(.elementor-widget-nav-menu) {
    flex: 1 1 auto;
    width: auto;
  }

  body[class*="elementor-kit-"] header.elementor-location-header .elementor-42 .elementor-column:has(.elementor-widget-search-form) {
    flex: 0 0 auto;
    width: auto;
  }
}

/* --- Texte justifié : au fer à gauche sur les petits écrans ----------------
   Validé par Philippe le 12/09. La justification est réglée widget par widget
   dans les pages ; elle tient sur une colonne large, mais sur 390px de large
   elle ouvre des lézardes d'un mot à l'autre — visible sur le premier
   paragraphe de l'accueil.

   On ne touche pas au réglage des pages : la justification est posée sur le
   CONTENEUR du widget et héritée par les paragraphes. Une valeur écrite
   directement sur le paragraphe l'emporte sur l'héritage, sans !important et
   sans rien changer au desktop. */

@media (max-width: 767px) {
  main p,
  main li,
  .entry-content p,
  .entry-content li {
    text-align: left;
  }
}