/* ============================================================
   mobile.css — ajustements réservés aux téléphones.

   Cette feuille est chargée APRÈS styles.css et ne fait que corriger :
   elle ne redéfinit aucune couleur, aucune police, aucune mise en page.
   Chaque bloc explique le défaut constaté sur un vrai téléphone.
   ============================================================ */


/* ------------------------------------------------------------
   1. Le fond de zellige est affiché partout, y compris sur téléphone.

   Cette feuille commençait par le désactiver sur les petits écrans :
   le fichier motif.png pesait 2,7 Mo, à lui seul plus que tout le reste
   du site réuni, pour une texture posée à 5 % d'opacité derrière les
   bandeaux. Le motif a depuis été ramené à la taille à laquelle il est
   réellement affiché — motif-tuile.png, 59 Ko, écart visuel mesuré :
   2 nuances sur 255, donc invisible à l'œil. Il ne coûte plus rien,
   et le zellige peut rester visible sur téléphone comme ailleurs.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   2. Les champs de formulaire ne font plus zoomer l'iPhone.

   Safari sur iOS agrandit automatiquement la page dès qu'on touche
   un champ dont le texte fait moins de 16 px — et il ne revient pas
   en arrière ensuite. Les champs du site étaient à 15,2 px : chaque
   prise de contact commençait donc par une page déformée qu'il
   fallait repincer à la main. 16 px exactement suffit à l'empêcher.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ------------------------------------------------------------
   3. Des zones tactiles à la taille d'un doigt.

   Apple et Google recommandent 44 px de côté minimum. On garde
   l'apparence exacte des boutons et des liens : on se contente de
   leur donner une hauteur utile suffisante.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .header .nav a,
  .burger,
  .btn,
  .ala-lang-switch button,
  .ala-lang-switch a,
  .footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Le lien du logo garde sa mise en page d'origine. */
  .header .brand { display: inline-flex; align-items: center; }

  /* Supprime le délai de 300 ms que les navigateurs mobiles
     imposaient historiquement avant de déclencher un appui. */
  a, button, .btn, input, select, textarea { touch-action: manipulation; }
}


/* ------------------------------------------------------------
   4. L'encoche et la barre d'accueil de l'iPhone.

   En plein écran (site ajouté à l'écran d'accueil), le bas de la
   fenêtre est occupé par la barre d'accueil : le bouton de
   l'assistant s'y trouvait à moitié caché.
   ------------------------------------------------------------ */
@supports (padding: max(0px)) {
  .ai-widget-root {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
    right:  max(20px, calc(env(safe-area-inset-right) + 12px));
  }
  html[dir="rtl"] .ai-widget-root {
    left: max(20px, calc(env(safe-area-inset-left) + 12px));
  }
  .footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}


/* ------------------------------------------------------------
   5. Garde-fous d'affichage.

   Empêche une image ou un tableau trop large de faire déborder la
   page horizontalement, et empêche iOS de grossir tout seul le
   texte quand on tourne le téléphone.
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 860px) {
  img, video, iframe, table { max-width: 100%; }
  img, video { height: auto; }
  /* Un mot très long (adresse, terme translittéré) ne pousse plus
     la page vers la droite : il est coupé proprement. */
  p, li, td, dd, h1, h2, h3 { overflow-wrap: break-word; }
}