/* Styles de transition/animation partagés entre les 4 pages du site. */

[hidden] { display: none !important; }

/* iOS Safari zoome automatiquement la page au focus d'un champ dont le
   texte fait moins de 16px — nos champs de formulaire utilisent
   text-body-md (15px). 16px désactive ce zoom sans jamais bloquer le zoom
   manuel de l'utilisateur (contrairement à user-scalable=no, mauvais pour
   l'accessibilité). */
input, textarea, select {
  font-size: 16px !important;
}

/* Inter ne couvre pas l'arabe : on bascule sur Cairo (chargée en Google
   Fonts sur chaque page) uniquement quand dir="rtl", sans toucher au rendu
   latin par défaut. */
[dir="rtl"] {
  font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.lang-option {
  opacity: .4;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.lang-option.is-active { opacity: 1; }
.lang-option:hover { transform: scale(1.12); }

@keyframes flex-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flex-phone-in {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.reveal-eager { opacity: 0; animation: flex-fade-up .7s cubic-bezier(.16,.8,.24,1) forwards; }
.reveal-eager:nth-child(1) { animation-delay: .02s; }
.reveal-eager:nth-child(2) { animation-delay: .12s; }
.reveal-eager:nth-child(3) { animation-delay: .22s; }
.reveal-eager:nth-child(4) { animation-delay: .32s; }

.phone-in { opacity: 0; animation: flex-phone-in .8s cubic-bezier(.16,.8,.24,1) .18s forwards; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal-eager, .phone-in, .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}