/*
 * Compatibilite schoolservices.ma <-> Generateur d'emploi du temps
 * Charge UNIQUEMENT sur generateur-emploi-du-temps.html.
 *
 * Le prefixe ss- protege les classes, pas les elements : le theme du site stylise directement
 * header (position fixe, z-index 1000), section (padding 5rem / 3rem), nav (flex centre) et, en arabe,
 * la direction de tous les elements.
 * Ces regles sont annulees a l'interieur de l'application. Specificite (0,0,1) grace a :where() :
 * elles passent apres le theme (fichier charge apres lui) mais cedent a toute classe ss- de l'application.
 */
:where(.ss-scope) header {
  position: revert;
  top: revert;
  left: revert;
  right: revert;
  z-index: revert;
  background: revert;
  box-shadow: revert;
  transition: revert;
}

:where(.ss-scope) section {
  padding: revert;
}

:where(.ss-scope) nav {
  display: revert;
  align-items: revert;
  gap: revert;
}

/* En arabe, le site passe <html> en dir="rtl" et variables.css impose `[dir="rtl"] * { direction: rtl }` a CHAQUE
   element (0,1,0) : sans cette regle, la mise en page de l'outil est inversee. L'outil reste en francais, en ltr,
   y compris le conteneur d'impression .ss-print-portal (qui porte aussi la classe ss-scope). Meme specificite,
   chargee apres le theme. L'application n'utilise aucune direction propre. */
.ss-scope,
.ss-scope * {
  direction: ltr;
}

/* Boutons flottants du site (WhatsApp z-index 1001, retour en haut) : ils passent au-dessus des fenetres de l'outil
   (z-index 1000) et masqueraient leurs boutons sur mobile. Masques uniquement pendant qu'une fenetre est ouverte. */
body:has(.ss-scope [aria-modal="true"]) .whatsapp-button,
body:has(.ss-scope [aria-modal="true"]) .scroll-top-btn {
  visibility: hidden;
}

/* Mise en page de la section qui accueille l'outil (classes propres a cette page). */
.ss-outil-section {
  padding: 2rem 0 4rem;
  background: var(--bg-color, #f8fafc);
}

.ss-outil-conteneur {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 16px;
}

.ss-outil-hero {
  padding: 8rem 0 3rem;
}

.ss-outil-hero .hero-subtitle {
  max-width: 760px;
}

.ss-outil-note {
  margin: 0 0 1rem;
  color: var(--gray-600, #4b5563);
  font-size: 0.95rem;
}

.ss-outil-note i {
  color: var(--secondary-color, #3b82f6);
  margin-right: 0.4rem;
}