/* ============================================
   Variables CSS - Design System
   ============================================ */
   :root {
    /* Couleurs principales */
    --color-primary: #002FBD;
    --color-primary-hover: #0024a0;
    --color-primary-active: #001d7a;
    --color-primary-light: rgba(0, 47, 189, 0.1);
    --color-primary-shadow: rgba(0, 47, 189, 0.15);
    --color-primary-shadow-active: rgba(0, 47, 189, 0.2);
    
    /* Couleurs de texte */
    --color-text-primary: var(--color-text-primary);
    --color-text-secondary: #5f6368;
    --color-text-tertiary: #80868b;
    --color-text-disabled: #999999;
    --color-text-white: #ffffff;
    
    /* Couleurs de fond */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f0f0f0;
    --color-bg-hover: rgba(0, 0, 0, 0.02);
    --color-bg-active: rgba(0, 0, 0, 0.05);
    --color-bg-disabled: #dadce0;
    
    /* Couleurs de bordure */
    --color-border-default: #dadce0;
    --color-border-hover: #bdc1c6;
    --color-border-focus: var(--color-primary);
    --color-border-light: #e8eaed;
    
    /* Espacements */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    
    /* Rayons de bordure */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 50%;
    
    /* Ombres */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 12px var(--color-primary-shadow);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s ease;
    
    /* Typographie */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Layout (menu bas, etc.) */
    --app-bottom-menu-height: 56px;
    --app-bottom-menu-padding-top: 10px;

    /* Tokens responsives (réécrits dans les breakpoints standard ci-dessous) */
    --page-padding-h: 16px;
    --page-padding-v: 20px;
    --title-font-size: 20px;
    --title-font-size-sm: 18px;
    --content-max-width: 100%;
    --header-padding-h: 16px;
    --header-padding-v: 12px;
    --subscription-hero-title: 28px;
  }

  /* ============================================
     Breakpoints standard de l'application
     À utiliser pour uniformiser les tailles sur toutes les pages.
     ============================================
     | Catégorie                   | Breakpoint    | Usage                    |
     | --------------------------- | ------------- | ------------------------ |
     | Très petits smartphones     | max-width: 320px  | Très petit mobile        |
     | Petits smartphones          | max-width: 360px  | Petit mobile             |
     | Moyens smartphones          | max-width: 480px  | Mobile portrait          |
     | Grands smartphones         | max-width: 600px  | Grand mobile / petite tablette |
     | Tablette portrait           | max-width: 768px  | Tablette portrait        |
     | Tablette paysage / petit desktop | max-width: 1024px | Tablette paysage   |
     | Laptop                      | max-width: 1280px | Ordinateur portable     |
     | Grand écran                 | min-width: 1281px | Desktop / grand écran   |
     ============================================ */

  /* Ordre : du plus large au plus étroit (max-width) pour que le bon tier s'applique */

  /* Grand écran (≥1281px) */
  @media (min-width: 1281px) {
    :root {
      --page-padding-h: 32px;
      --page-padding-v: 36px;
      --title-font-size: 24px;
      --title-font-size-sm: 20px;
      --content-max-width: 1200px;
      --header-padding-h: 32px;
      --header-padding-v: 18px;
      --subscription-hero-title: 32px;
    }
  }

  /* Laptop (≤1280px) */
  @media (max-width: 1280px) {
    :root {
      --page-padding-h: 28px;
      --page-padding-v: 32px;
      --title-font-size: 24px;
      --title-font-size-sm: 20px;
      --content-max-width: 900px;
      --header-padding-h: 28px;
      --header-padding-v: 16px;
      --subscription-hero-title: 30px;
    }
  }

  /* Tablette paysage / petit desktop (≤1024px) */
  @media (max-width: 1024px) {
    :root {
      --page-padding-h: 24px;
      --page-padding-v: 28px;
      --title-font-size: 22px;
      --title-font-size-sm: 20px;
      --content-max-width: 720px;
      --header-padding-h: 24px;
      --header-padding-v: 16px;
      --subscription-hero-title: 28px;
    }
  }

  /* Tablette portrait (≤768px) */
  @media (max-width: 768px) {
    :root {
      --page-padding-h: 20px;
      --page-padding-v: 24px;
      --title-font-size: 20px;
      --title-font-size-sm: 18px;
      --content-max-width: 100%;
      --header-padding-h: 20px;
      --header-padding-v: 14px;
      --subscription-hero-title: 26px;
    }
  }

  /* Grand mobile / petite tablette (≤600px) */
  @media (max-width: 600px) {
    :root {
      --page-padding-h: 18px;
      --page-padding-v: 22px;
      --title-font-size: 19px;
      --title-font-size-sm: 18px;
      --header-padding-h: 18px;
      --header-padding-v: 12px;
      --subscription-hero-title: 25px;
    }
  }

  /* Mobile portrait (≤480px) */
  @media (max-width: 480px) {
    :root {
      --page-padding-h: 16px;
      --page-padding-v: 20px;
      --title-font-size: 18px;
      --title-font-size-sm: 17px;
      --content-max-width: 100%;
      --header-padding-h: 16px;
      --header-padding-v: 12px;
      --subscription-hero-title: 24px;
    }
  }

  /* Petit mobile (≤360px) */
  @media (max-width: 360px) {
    :root {
      --page-padding-h: 12px;
      --page-padding-v: 16px;
      --title-font-size: 17px;
      --title-font-size-sm: 16px;
      --header-padding-h: 12px;
      --header-padding-v: 10px;
      --subscription-hero-title: 23px;
    }
  }

  /* Très petit mobile (≤320px) */
  @media (max-width: 320px) {
    :root {
      --page-padding-h: 10px;
      --page-padding-v: 14px;
      --title-font-size: 16px;
      --title-font-size-sm: 15px;
      --header-padding-h: 10px;
      --header-padding-v: 10px;
      --subscription-hero-title: 22px;
    }
  }
  
  /* Reset et styles de base */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    position: relative;
  }
  
  /* Container principal */
  .welcome-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  /* Logo */
  .logo-welcome {
    max-width: 40%;
    height: auto;
    width: auto;
    max-height: 35vh;
    object-fit: contain;
    display: block;
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .welcome-container {
      padding: 15px;
    }
    
    .logo-welcome {
      max-width: 45%;
      max-height: 30vh;
    }
  }
  
  /* Responsive pour écrans moyens (tablettes) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .welcome-container {
      padding: 30px;
    }
    
    .logo-welcome {
      max-width: 35%;
      max-height: 35vh;
    }
  }
  
  /* Responsive pour écrans larges (desktop) */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .logo-welcome {
      max-width: 30%;
      max-height: 35vh;
    }
  }
  
  /* Responsive pour très grands écrans */
  @media screen and (min-width: 1025px) {
    .logo-welcome {
      max-width: 25%;
      max-height: 35vh;
    }
  }
  
  /* Orientation paysage pour mobile */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .logo-welcome {
      max-width: 30%;
      max-height: 35vh;
    }
  }
  
  /* Support pour les très petits écrans */
  @media screen and (max-width: 320px) {
    .welcome-container {
      padding: 10px;
    }
    
    .logo-welcome {
      max-width: 50%;
      max-height: 28vh;
    }
  }
  
  /* Support pour les très grands écrans (4K et plus) */
  @media screen and (min-width: 1920px) {
    .logo-welcome {
      max-width: 20%;
      max-height: 35vh;
    }
  }
  
  /* ============================================
     Page Choisir Compte - Style ClassDojo
     ============================================ */
  
  /* Page choisir compte - Fond blanc */
  body.choose-account-page {
    background-color: #ffffff;
    overflow: hidden;
    overflow-x: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    inset: 0;
  }
  
  .page-container {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .choose-account-page .page-container {
    min-height: 0;
  }
  
  .choose-account-page .main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Header avec bouton Se connecter */
  .page-header {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 50px;
  }
  
  /* Header avec bouton Se connecter à droite (page choisir_compte uniquement) */
  .choose-account-page .page-header {
    justify-content: flex-end;
  }
  
  /* Header avec bouton retour - toujours à gauche */
  .email-signup-page .page-header,
  .login-page .page-header,
  .governorat-page .page-header {
    justify-content: flex-start;
  }
  
  .btn-login {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 3px;
    transition: background-color var(--transition-base);
  }
  
  .btn-login:hover {
    background-color: var(--color-bg-tertiary);
  }
  
  .btn-login:active {
    background-color: var(--color-bg-active);
  }
  
  /* Contenu principal */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Container logo */
  .logo-container {
    margin-top: 30px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
  }
  
  .logo-droussi {
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  
  /* Texte de bienvenue */
  .welcome-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 auto 60px auto;
    line-height: 1.3;
    width: 100%;
    max-width: 500px;
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
    word-wrap: break-word;
  }
  
  /* Container des boutons de compte */
  .account-buttons {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  /* Description sous les boutons (Choix rôle) */
  .choose-role-description {
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin: 24px auto 0;
    padding: 0 24px;
    max-width: 400px;
  }
  
  .choose-role-description:first-of-type {
    margin-top: 20px;
  }
  
  .choose-role-description + .choose-role-description {
    margin-top: 8px;
  }
  
  /* ===== Espacement des sections - Page Choix rôle ===== */
  .choose-account-page .main-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 0;
  }
  .choose-account-page .logo-container {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 50px;
  }
  .choose-account-page .description {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .choose-account-page .description .choose-role-description:first-of-type {
    margin-top: 0;
  }
  .choose-account-page .description .choose-role-description + .choose-role-description {
    margin-top: 0.5rem;
  }
  .choose-account-page .welcome-section {
    margin-top: 0;
  }
  .choose-account-page .account-buttons {
    gap: 1rem;
  }
  
  /* Boutons de compte */
  .account-btn {
    width: 100%;
    padding: 22px 24px;
    border-radius: 3px;
    border: 2px solid #e0e0e0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 17px;
    text-align: center;
    box-sizing: border-box;
    min-height: 68px;
  }
  
  .account-btn:hover {
    border-color: var(--color-primary);
    background-color: #f5f7ff;
    transform: translateY(-2px);
  }
  
  .account-btn:active {
    transform: translateY(0);
  }
  
  .account-btn-primary {
    border-color: #e0e0e0;
    background-color: #ffffff;
  }
  
  /* Bouton Parent : fond bleu */
  .account-btn[data-account="parent"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .account-btn[data-account="parent"] .account-text {
    color: #ffffff;
  }
  .account-btn[data-account="parent"]:hover {
    background-color: #0024a3;
    border-color: #0024a3;
  }
  .account-btn[data-account="parent"]:hover .account-text {
    color: #ffffff;
  }
  
  /* Bouton Enseignant : fond blanc, bordure bleue */
  .account-btn[data-account="teacher"] {
    background-color: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
  }
  .account-btn[data-account="teacher"] .account-text {
    color: var(--color-primary);
  }
  .account-btn[data-account="teacher"]:hover {
    background-color: #f5f7ff;
    border-color: var(--color-primary);
  }
  .account-btn[data-account="teacher"]:hover .account-text {
    color: var(--color-primary);
  }
  
  .account-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }
  
  img.account-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    font-size: 0;
  }
  
  .account-text {
    color: var(--color-text-primary);
    font-weight: 500;
    flex: 1;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Responsivité page Choix rôle : éviter le scroll indésirable */
  @media screen and (max-width: 480px) {
    .choose-account-page .main-content {
      padding: 12px 16px;
      padding-top: 4rem;
      padding-bottom: 1rem;
    }
    .choose-account-page .logo-container {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .choose-account-page .description {
      margin-top: 0;
      margin-bottom: 1.5rem;
    }
    .choose-account-page .logo-droussi {
      max-width: 140px;
    }
    .choose-account-page .choose-role-description {
      font-size: 13px;
      padding: 0 12px;
    }
    .choose-account-page .description .choose-role-description + .choose-role-description {
      margin-top: 0.4rem;
    }
    .choose-account-page .welcome-section {
      margin-top: 0;
    }
    .choose-account-page .account-buttons {
      gap: 0.75rem;
    }
    .choose-account-page .account-btn {
      padding: 14px 18px;
      min-height: 52px;
      font-size: 15px;
    }
  }
  
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .choose-account-page .main-content {
      padding: 8px 16px;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .choose-account-page .logo-container {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }
    .choose-account-page .description {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .choose-account-page .logo-droussi {
      max-width: 100px;
    }
    .choose-account-page .choose-role-description {
      font-size: 12px;
    }
    .choose-account-page .description .choose-role-description + .choose-role-description {
      margin-top: 0.35rem;
    }
    .choose-account-page .welcome-section {
      margin-top: 0;
    }
    .choose-account-page .account-buttons {
      gap: 0.5rem;
    }
    .choose-account-page .account-btn {
      padding: 10px 14px;
      min-height: 44px;
      font-size: 14px;
    }
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .page-header {
      padding: 12px 15px;
      flex-shrink: 0;
      display: flex !important;
      visibility: visible !important;
      min-height: 48px;
    }
  
    .btn-login {
      font-size: 14px;
      padding: 6px 14px;
      white-space: nowrap;
    }
  
    .main-content {
      padding: 15px;
      padding-top: 30px;
      justify-content: flex-start;
      min-height: calc(100vh - 60px);
    }
  
    .logo-container {
      margin-top: 25px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 150px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 20px;
      margin: 0 auto 28px auto;
      padding: 0 15px;
      max-width: 100%;
    }
  
    .account-buttons {
      max-width: 100%;
      gap: 12px;
      padding: 0 15px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 16px 18px;
      border-radius: 3px;
      gap: 14px;
      min-height: 56px;
    }
  
    .account-icon {
      font-size: 24px;
      flex-shrink: 0;
    }
  
    .account-text {
      font-size: 15px;
    }
  }
  
  /* Responsive pour écrans moyens (tablettes) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .page-header {
      padding: 15px 25px;
    }
  
    .main-content {
      padding: 25px;
      padding-top: 35px;
    }
  
    .logo-container {
      margin-bottom: 65px;
      margin-top: 30px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 180px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 22px;
      margin: 0 auto 50px auto;
      padding: 0 20px;
      max-width: 500px;
    }
  
    .account-buttons {
      max-width: 450px;
      gap: 18px;
      padding: 0 20px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 18px 22px;
      min-height: 64px;
    }
  
    .account-icon {
      font-size: 26px;
    }
  }
  
  /* Responsive pour écrans larges (desktop) */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .page-header {
      padding: 20px 30px;
    }
  
    .main-content {
      padding: 30px;
      padding-top: 40px;
    }
  
    .logo-container {
      margin-bottom: 75px;
      margin-top: 35px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 220px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 26px;
      margin: 0 auto 55px auto;
      padding: 0 20px;
      max-width: 550px;
    }
  
    .account-buttons {
      max-width: 500px;
      gap: 20px;
      padding: 0 20px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 20px 24px;
      font-size: 17px;
      min-height: 70px;
    }
  
    .account-icon {
      font-size: 32px;
    }
  }
  
  /* Responsive pour très grands écrans (desktop large) */
  @media screen and (min-width: 1025px) {
    .page-header {
      padding: 25px 40px;
    }
  
    .main-content {
      padding: 40px;
      padding-top: 50px;
    }
  
    .logo-container {
      margin-bottom: 80px;
      margin-top: 40px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 250px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 28px;
      margin: 0 auto 65px auto;
      padding: 0 20px;
      max-width: 600px;
    }
  
    .account-buttons {
      max-width: 550px;
      gap: 22px;
      padding: 0 20px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 22px 28px;
      font-size: 18px;
      min-height: 75px;
    }
  
    .account-icon {
      font-size: 36px;
    }
  }
  
  /* Orientation paysage pour mobile */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .main-content {
      padding-top: 20px;
      padding-bottom: 10px;
      justify-content: center;
    }
    .main-content.login-content {
      justify-content: flex-start;
    }
  
    .logo-container {
      margin-bottom: 35px;
      margin-top: 15px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 120px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 18px;
      margin: 0 auto 25px auto;
      padding: 0 15px;
      max-width: 100%;
    }
  
    .account-buttons {
      gap: 10px;
      max-width: 400px;
      padding: 0 15px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 12px 16px;
      min-height: 50px;
    }
  
    .account-icon {
      font-size: 22px;
    }
  
    .account-text {
      font-size: 14px;
    }
  }
  
  /* Support pour les très petits écrans */
  @media screen and (max-width: 320px) {
    .page-header {
      padding: 10px 12px;
    }
  
    .btn-login {
      font-size: 13px;
      padding: 5px 12px;
    }
  
    .main-content {
      padding: 12px;
      padding-top: 25px;
    }
  
    .logo-container {
      margin-bottom: 50px;
      margin-top: 20px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 130px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 18px;
      margin: 0 auto 35px auto;
      padding: 0 10px;
      max-width: 100%;
    }
  
    .account-buttons {
      padding: 0 10px;
      gap: 10px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 14px 16px;
      gap: 12px;
      min-height: 52px;
      border-radius: 3px;
    }
  
    .account-icon {
      font-size: 22px;
    }
  
    .account-text {
      font-size: 14px;
    }
  }
  
  /* Support pour les très grands écrans (4K et plus) */
  @media screen and (min-width: 1920px) {
    .page-header {
      padding: 30px 60px;
    }
  
    .main-content {
      padding: 60px;
      padding-top: 60px;
    }
  
    .logo-container {
      margin-bottom: 90px;
      margin-top: 50px;
      width: 100%;
    }
  
    .logo-droussi {
      max-width: 300px;
      width: auto;
      margin: 0 auto;
    }
  
    .welcome-text {
      font-size: 32px;
      margin: 0 auto 75px auto;
      padding: 0 20px;
      max-width: 700px;
    }
  
    .account-buttons {
      max-width: 600px;
      gap: 25px;
      padding: 0 20px;
      margin: 0 auto;
    }
  
    .account-btn {
      padding: 25px 32px;
      font-size: 20px;
      min-height: 85px;
      border-radius: 3px;
    }
  
    .account-icon {
      font-size: 40px;
    }
  }
  
  /* ============================================
     Page Saisir Email - Styles (Inspiré de l'image)
     ============================================ */
  
  /* Page email signup - Fond blanc */
  body.email-signup-page {
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
  }
  
  .email-content {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  
  /* Bouton retour */
  .btn-back {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    padding: 8px 0;
    display: inline-flex !important;
    align-items: center;
    transition: opacity 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 32px;
    min-height: 32px;
  }
  
  .btn-back:hover {
    opacity: 0.7;
  }
  
  .btn-back ion-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
  }
  
  .email-signup-page .page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* Container icône */
  .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    margin-top: 20px;
  }
  
  .signup-icon {
    width: 140px;
    height: auto;
    max-width: 170px;
    object-fit: contain;
  }
  
  /* Titre de la page */
  .email-signup-page .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin: 0 auto 20px auto;
    line-height: 1.3;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Lien connexion */
  .login-prompt {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-primary);
    margin-bottom: 30px;
    padding: 0 20px;
  }
  
  .link-login {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
  }
  
  .link-login:hover {
    text-decoration: underline;
  }
  
  /* Formulaire email */
  .email-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .email-form .form-group {
    margin-bottom: 20px;
  }
  
  .email-input {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    font-size: 16px;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
  }
  
  .email-input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  
  .email-input::placeholder {
    color: #999999;
  }
  
  /* Bouton Continuer */
  .btn-continue {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    border: none;
    border-radius: 3px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    cursor: not-allowed;
    transition: all var(--transition-base);
  }
  
  .btn-continue.active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    cursor: pointer;
  }
  
  .btn-continue.active:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
  }
  
  .btn-continue.active:active {
    transform: translateY(0);
    background-color: var(--color-primary-active);
  }
  
  /* Séparateur */
  .separator {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .separator-line {
    flex: 1;
    height: 1px;
    background-color: #E0E0E0;
  }
  
  .separator-text {
    padding: 0 15px;
    font-size: 14px;
    color: #666666;
  }
  
  /* Texte conditions */
  .terms-text {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 30px auto 20px auto;
    max-width: 400px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .link-terms {
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .link-terms:hover {
    text-decoration: underline;
  }
  
  /* Container bouton Google */
  .google-button-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Bouton Google */
  .btn-google {
    width: 100%;
    padding: 16px 24px;
    background-color: #ffffff;
    color: var(--color-text-primary);
    border: 2px solid #E0E0E0;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
  }
  
  .btn-google:hover {
    border-color: #BDBDBD;
    background-color: #FAFAFA;
  }
  
  .btn-google:active {
    background-color: #F5F5F5;
  }
  
  .google-icon {
    flex-shrink: 0;
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .email-signup-page .page-title {
      font-size: 24px;
      margin-bottom: 15px;
    }
  
    .signup-icon {
      width: 120px;
      height: auto;
      max-width: 150px;
    }
  
    .email-form {
      padding: 0 15px;
    }
  
    .google-button-container {
      padding: 0 15px;
    }
  
    .email-input {
      padding: 14px 16px;
      font-size: 15px;
    }
  
    .btn-continue,
    .btn-google {
      padding: 14px 20px;
      font-size: 15px;
    }
  
    .separator {
      margin: 25px auto;
      padding: 0 15px;
    }
  
    .terms-text {
      font-size: 11px;
      padding: 0 15px;
    }
  }
  
  /* Responsive pour écrans moyens (tablettes) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .email-signup-page .page-title {
      font-size: 26px;
    }
  
    .email-form {
      max-width: 450px;
    }
  
    .google-button-container {
      max-width: 450px;
    }
  }
  
  /* Responsive pour écrans larges (desktop) */
  @media screen and (min-width: 769px) {
    .email-signup-page .page-title {
      font-size: 32px;
    }
  
    .email-form {
      max-width: 500px;
    }
  
    .google-button-container {
      max-width: 500px;
    }
  }
  
  /* ============================================
     Page Connexion - Styles
     ============================================ */
  
  /* Page login - Fond blanc, pas de défilement (contenu tient dans la vue) */
  body.login-page {
    background-color: #ffffff;
    overflow: hidden;
    overflow-x: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }
  
  body.login-page .page-container {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  
  body.login-page .main-content.login-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-top: 56px;
    padding-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: flex-start;
  }
  
  .login-content {
    padding-top: 56px;
    padding-bottom: 40px;
    justify-content: flex-start;
  }
  
  /* Logo connexion */
  .logo-container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 45px;
    margin-top: 10px;
  }
  
  .logo-droussi-login {
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  
  /* Header connexion */
  .login-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 20px;
  }
  
  .btn-student {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s ease;
  }
  
  .btn-student:hover {
    opacity: 0.7;
  }
  
  /* Titre connexion */
  .login-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 auto 40px auto;
    line-height: 1.3;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Espacement bouton Facebook sur page connexion */
  .login-btn-facebook-wrap {
    margin-top: 15px;
  }
  
  /* Bouton Facebook (page connexion) */
  .btn-facebook {
    background-color: #1877F2 !important;
    color: #ffffff !important;
    border-color: #1877F2 !important;
  }
  
  .btn-facebook:hover {
    background-color: #166fe5 !important;
    color: #ffffff !important;
    border-color: #166fe5 !important;
  }
  
  .btn-facebook span {
    color: #ffffff !important;
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .logo-container-login {
      margin-bottom: 40px;
      margin-top: 5px;
    }
  
    .logo-droussi-login {
      max-width: 140px;
    }
  
    .login-title {
      font-size: 24px;
      margin-bottom: 30px;
    }
  
    .login-header {
      padding: 12px 15px;
    }
  
    .btn-student {
      font-size: 13px;
    }
  }
  
  /* Responsive pour écrans moyens (tablettes) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .logo-container-login {
      margin-bottom: 50px;
      margin-top: 15px;
    }
  
    .logo-droussi-login {
      max-width: 170px;
    }
  
    .login-title {
      font-size: 26px;
    }
  }
  
  /* Responsive pour écrans larges (desktop) */
  @media screen and (min-width: 769px) {
    .logo-container-login {
      margin-bottom: 55px;
      margin-top: 20px;
    }
  
    .logo-droussi-login {
      max-width: 180px;
    }
  
    .login-title {
      font-size: 32px;
    }
  }
  
  /* Champ mot de passe avec icône */
  .password-group {
    position: relative;
  }
  
  .password-input {
    width: 100%;
    padding: 16px 50px 16px 18px;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    font-size: 16px;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
  }
  
  .password-input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  
  .password-input::placeholder {
    color: #999999;
  }
  
  .btn-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    transition: color 0.2s ease;
  }
  
  .btn-toggle-password:hover {
    color: var(--color-text-primary);
  }
  
  .btn-toggle-password ion-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
  
  /* Champ email en lecture seule */
  .email-input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
  }
  
  /* Lien mot de passe oublié */
  .link-forgot-password {
    display: block;
    text-align: center;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin: 20px auto 30px auto;
    transition: opacity 0.2s ease;
  }
  
  .link-forgot-password:hover {
    opacity: 0.7;
    text-decoration: underline;
  }
  
  /* Bouton connexion sans mot de passe */
  .btn-no-password {
    width: 100%;
    padding: 16px 24px;
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-sizing: border-box;
  }
  
  .btn-no-password:hover {
    background-color: var(--color-primary);
    transform: translateY(-1px);
  }
  
  .btn-no-password:active {
    transform: translateY(0);
    background-color: var(--color-primary);
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .password-input {
      padding: 14px 45px 14px 16px;
      font-size: 15px;
    }
  
    .btn-toggle-password {
      right: 10px;
      padding: 6px;
    }
  
    .btn-toggle-password ion-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }
  
    .link-forgot-password {
      font-size: 13px;
      margin: 15px auto 25px auto;
    }
  
    .btn-no-password {
      padding: 14px 20px;
      font-size: 15px;
    }
  }
  
  /* ============================================
     Page Gouvernorat - Styles
     ============================================ */
  
  /* Page gouvernorat - Fond blanc */
  body.governorat-page {
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
  }
  
  body.governorat-page.app-style-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }
  
  .governorat-content {
    width: 100%;
    max-width: 100%;
    padding-bottom: 0;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    min-height: 0;
    box-sizing: border-box;
  }
  
  /* Logo gouvernorat */
  .logo-container-governorat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 10px;
  }
  
  .logo-droussi-governorat {
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  
  /* Titre gouvernorat : réutilise le style subscription-page-title (voir .subscription-page-title) */
  .subscription-page-title .page-title-ar {
    margin-right: 0.35em;
  }
  
  /* Sous-titre (cohérence typo) */
  .page-subtitle {
    font-size: var(--font-size-md);
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 auto 35px auto;
    line-height: 1.6;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Formulaire gouvernorat - zone scrollable entre titre et footer */
  .governorat-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  
  .governorat-content .section {
    padding: 0 var(--page-padding-h);
  }
  
  .governorat-content .section.full {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .governorat-content > .subscription-page-title {
    flex-shrink: 0;
  }
  
  
  .governorat-form .form-group {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
  }
  
  .governorat-form .form-group.select-group.active {
    z-index: 1001;
  }
  
  .form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
  }
  
  /* Select wrapper */
  .select-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
  }
  
  .select-wrapper.active {
    z-index: 1001;
  }
  
  .select-wrapper.active .select-dropdown {
    display: block;
  }
  
  .select-wrapper.active .select-icon {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .select-input {
    width: 100%;
    padding: 16px 50px 16px 18px;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    font-size: 16px;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
  }
  
  .select-input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  
  .select-input:disabled {
    background-color: #f5f5f5;
    border-color: #E0E0E0;
    color: #999999;
    cursor: not-allowed;
  }
  
  .select-input:disabled + .select-icon {
    color: #CCCCCC;
  }
  
  .select-input::placeholder {
    color: #999999;
  }
  
  .select-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666666;
    pointer-events: none;
    transition: transform 0.2s ease;
  }
  
  .select-wrapper.active .select-icon {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .select-wrapper.active .select-icon[name="search-outline"] {
    transform: translateY(-50%);
  }
  
  /* Dropdown */
  .select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1002;
    margin-top: 0;
    animation: slideDown 0.2s ease-out;
  }
  
  .select-wrapper.active .select-dropdown {
    display: block;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .select-dropdown::-webkit-scrollbar {
    width: 6px;
  }
  
  .select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  .select-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
  
  .select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  .select-option {
    padding: 14px 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 16px;
    color: var(--color-text-primary);
    border-bottom: 1px solid #f0f0f0;
  }
  
  .select-option:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
  }
  
  .select-option:first-child {
    border-radius: 8px 8px 0 0;
  }
  
  .select-option:hover {
    background-color: #f8f9ff;
    color: var(--color-primary);
  }
  
  .select-option:active {
    background-color: #e8ebff;
  }
  
  .select-option.no-results {
    color: #999999;
    font-style: italic;
    cursor: default;
  }
  
  .select-option.no-results:hover {
    background-color: transparent;
  }
  
  /* Indicateur de progression */
  .governorat-form .form-group.select-group {
    position: relative;
    padding-left: 0;
  }
  
  .governorat-form .form-group.select-group::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 35px;
    width: 4px;
    height: calc(100% - 20px);
    background-color: #E0E0E0;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    display: none; /* Masqué par défaut sur mobile */
  }
  
  @media (min-width: 768px) {
    .governorat-form .form-group.select-group::before {
      display: block;
    }
  }
  
  .governorat-form .form-group.select-group.completed::before {
    background-color: var(--color-primary);
  }
  
  .governorat-form .form-group.select-group.active::before {
    background-color: var(--color-primary);
    animation: pulse 1.5s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  
  /* Amélioration visuelle des labels */
  .governorat-form .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .governorat-form .form-label::before {
    content: attr(data-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #E0E0E0;
    color: #666666;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }
  
  .governorat-form .form-group.select-group.completed .form-label::before {
    background-color: var(--color-primary);
    color: #ffffff;
  }
  
  .governorat-form .form-group.select-group.active .form-label::before {
    background-color: var(--color-primary);
    color: #ffffff;
  }
  
  /* Responsive pour petits écrans (mobile) */
  @media screen and (max-width: 480px) {
    .logo-container-governorat {
      margin-bottom: 25px;
      margin-top: 5px;
    }
  
    .logo-droussi-governorat {
      max-width: 140px;
    }
  
    .governorat-form .form-group {
      margin-bottom: 25px;
    }
  
    .select-input {
      padding: 14px 45px 14px 16px;
      font-size: 15px;
    }
  
    .select-icon {
      font-size: 18px;
      right: 14px;
    }
  
    .select-dropdown {
      max-height: 220px;
      border-radius: 3px;
    }
  
    .select-option {
      padding: 12px 16px;
      font-size: 15px;
    }
  }
  
  /* Responsive pour écrans moyens (tablettes) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .logo-container-governorat {
      margin-bottom: 35px;
      margin-top: 15px;
    }
  
    .logo-droussi-governorat {
      max-width: 170px;
    }
  }
  
  /* Responsive pour écrans larges (desktop) */
  @media screen and (min-width: 769px) {
    .logo-container-governorat {
      margin-bottom: 40px;
      margin-top: 20px;
    }
  
    .logo-droussi-governorat {
      max-width: 180px;
    }
  }
  
  /* ============================================
     Liste visible des gouvernorats
     ============================================ */
  .search-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-xl);
  }
  
  .search-input {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-lg) var(--spacing-lg);
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    font-size: var(--font-size-md);
    font-family: inherit;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-base);
    box-sizing: border-box;
  }
  
  .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  
  .search-input::placeholder {
    color: var(--color-text-disabled);
  }
  
  .search-icon {
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    pointer-events: none;
  }
  
  /* ========== Simple Listview – template Mobilekit (identique) ========== */
  .governorat-content .listview-title {
    color: #4F5050;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .governorat-content .listview-title.mt-2 {
    margin-top: 8px;
  }
  
  .governorat-content .listview {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    color: #141515;
    background: #fff;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    line-height: 1.3em;
  }
  
  .governorat-content .listview .text-muted {
    font-size: 13px;
    color: #A1A1A2 !important;
  }
  
  .governorat-content .listview > li {
    padding: 8px 16px;
    display: block;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 50px;
    cursor: pointer;
  }
  
  .governorat-content .listview > li .item {
    position: relative;
  }
  
  .governorat-content .listview > li:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #E1E1E1;
  }
  
  .governorat-content .listview > li:last-child:after {
    display: none;
  }
  
  .governorat-content .listview > li footer,
  .governorat-content .listview > li header {
    font-size: 12px;
    margin: 0;
    line-height: 1.2em;
  }
  
  .governorat-content .listview > li footer {
    color: #4F5050;
    margin-top: 3px;
  }
  
  .governorat-content .listview > li header {
    margin-bottom: 3px;
  }
  
  .governorat-content .listview.simple-listview > li {
    display: flex;
  }
  
  .governorat-content .listview .governorat-item:hover {
    background-color: #F5F5F5;
  }
  
  .governorat-content .listview .governorat-item.selected {
    background-color: rgba(0, 47, 189, 0.1);
    color: var(--color-primary);
    font-weight: 500;
  }
  
  .governorat-content .listview .governorat-item:active {
    background-color: rgba(0, 47, 189, 0.08);
  }
  
  /* Bouton Continuer sous la liste (flux normal, plus de chevauchement) */
  .governorat-footer {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    z-index: 2;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    background: #fff;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }
  
  .governorat-footer .btn-continue {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    border-radius: 3px;
    padding: 16px;
  }
  
  .governorat-footer .btn-continue.active:hover {
    transform: translateY(-1px);
  }
  
  .governorat-footer .btn-continue.active:active {
    transform: translateY(0);
  }
  
  /* Scroll dans la zone liste - style scrollbar optionnel */
  .governorat-content .section.full::-webkit-scrollbar {
    width: 6px;
  }
  
  .governorat-content .section.full::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
  }
  
  .governorat-content .section.full::-webkit-scrollbar-thumb {
    background: var(--color-text-tertiary);
    border-radius: 3px;
  }
  
  .governorat-content .section.full::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
  }
  
  /* Responsive pour mobile */
  @media screen and (max-width: 480px) {
    .governorat-content .section.full {
      margin-top: 12px;
    }
  
    .governorat-content .listview.simple-listview > li {
      padding: 8px 16px;
      min-height: 50px;
    }
  
    .search-input {
      padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md);
      font-size: var(--font-size-base);
    }
  
    .search-icon {
      right: var(--spacing-md);
      font-size: var(--font-size-lg);
    }
  }
  
  /* ============================================
     Styles pour la modale de sélection de compte
     ============================================ */
  .account-select-modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12000;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
  }
  
  .account-select-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .account-select-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 12001;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  
  .account-select-dialog {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 12002;
    display: flex;
    justify-content: center;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .account-select-modal.show .account-select-dialog {
    transform: translateY(0);
  }
  
  .account-select-content {
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    overflow: hidden;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  
  /* Indicateur de drag en haut de la modale */
  .account-select-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    z-index: 1;
  }
  
  .account-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #fff;
    position: relative;
    z-index: 2;
  }
  
  .account-select-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .provider-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .provider-logo svg {
    width: 100%;
    height: 100%;
  }
  
  .account-select-title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text-primary);
    padding: 0 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  
  .account-select-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: #5f6368;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  .account-select-close:hover,
  .account-select-close:focus {
    background: rgba(60, 64, 67, 0.08);
    color: var(--color-text-primary);
  }
  
  .account-select-close:active {
    background: rgba(60, 64, 67, 0.12);
    transform: scale(0.95);
  }
  
  .account-select-close ion-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
  
  .account-select-body {
    padding: 8px 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Style de la scrollbar */
  .account-select-body::-webkit-scrollbar {
    width: 4px;
  }
  
  .account-select-body::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .account-select-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  .account-select-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  
  .account-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .account-item {
    padding: 16px 24px;
    min-height: 80px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  .account-item:last-child {
    border-bottom: 0;
  }
  
  .account-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: rgba(66, 133, 244, 0.08);
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .account-item:hover::before,
  .account-item:focus::before {
    width: 3px;
  }
  
  .account-item:hover,
  .account-item:focus {
    background: rgba(66, 133, 244, 0.04) !important;
  }
  
  .account-item:active {
    background: rgba(66, 133, 244, 0.08) !important;
    transform: scale(0.998);
  }
  
  .account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f1f3f4;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .account-avatar svg {
    width: 28px;
    height: 28px;
  }
  
  .account-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: 2px;
  }
  
  .account-name {
    font-weight: 400;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    word-break: break-word;
  }
  
  .account-email {
    font-size: 14px;
    color: #5f6368;
    line-height: 1.43;
    word-break: break-word;
  }
  
  .account-connect-text {
    font-size: 13px;
    color: #1a73e8;
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.38;
    letter-spacing: 0.01em;
  }
  
  .account-item[data-provider="facebook"] .account-connect-text {
    color: #1877F2;
  }
  
  .account-item[data-provider="google"]:hover .account-connect-text,
  .account-item[data-provider="google"]:focus .account-connect-text {
    color: #1557b0;
  }
  
  .account-item[data-provider="facebook"]:hover .account-connect-text,
  .account-item[data-provider="facebook"]:focus .account-connect-text {
    color: #1565c0;
  }
  
  /* Responsive pour petits écrans */
  @media screen and (max-width: 480px) {
    .account-select-content {
      max-height: 85vh;
      border-radius: 8px 8px 0 0;
    }
    
    .account-select-content::before {
      top: 6px;
      width: 36px;
      height: 3px;
    }
    
    .account-select-header {
      padding: 18px 20px 14px 20px;
    }
    
    .account-select-logo {
      width: 24px;
      height: 24px;
    }
    
    .account-select-title {
      font-size: 16px;
      padding: 0 12px;
    }
    
    .account-select-close {
      width: 36px;
      height: 36px;
    }
    
    .account-select-close ion-icon {
      font-size: 22px;
      width: 22px;
      height: 22px;
    }
    
    .account-item {
      padding: 14px 20px;
      min-height: 76px;
    }
    
    .account-avatar {
      width: 44px;
      height: 44px;
      margin-right: 14px;
    }
    
    .account-avatar svg {
      width: 24px;
      height: 24px;
    }
    
    .account-name {
      font-size: 15px;
    }
    
    .account-email {
      font-size: 13px;
    }
    
    .account-connect-text {
      font-size: 12px;
      margin-top: 3px;
    }
  }
  
  /* Animation d'apparition pour les items */
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .account-item {
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }
  
  .account-item:nth-child(1) {
    animation-delay: 0.05s;
  }
  
  .account-item:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  .account-item:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  .account-item:nth-child(4) {
    animation-delay: 0.2s;
  }
  
  .account-item:nth-child(5) {
    animation-delay: 0.25s;
  }
  
  /* ============================================
     Styles pour la page de saisie de téléphone
     ============================================ */
  .phone-page {
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .phone-page .page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
  }
  
  .phone-content {
    flex: 1;
    padding: 32px 24px 40px 24px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
  }
  
  .phone-logo-container {
    margin-bottom: 32px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .phone-logo-container .signup-icon {
    max-width: 170px;
    width: auto;
    height: auto;
  }
  
  .phone-page .page-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 40px 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    width: 100%;
  }
  
  .phone-input-container {
    margin-bottom: 32px;
    width: 100%;
    max-width: 100%;
    position: relative;
  }
  
  .phone-input-group-wrapper {
    position: relative;
  }
  
  .phone-input-group {
    display: flex;
    align-items: stretch;
    gap: 12px;
    border: 1px solid #dadce0;
    border-radius: 3px;
    padding: 0;
    background: #fff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    z-index: 10;
  }
  
  .phone-input-group:focus-within {
    border-color: var(--color-primary);
  }
  
  .country-selector.active {
    background: rgba(0, 47, 189, 0.05);
  }
  
  .country-selector.active .country-arrow {
    transform: rotate(180deg);
  }
  
  .country-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: transparent;
    border: 0;
    border-right: 1px solid #dadce0;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
    min-width: 80px;
  }
  
  .country-selector:hover {
    background: rgba(0, 0, 0, 0.02);
  }
  
  .country-selector:active {
    background: rgba(0, 0, 0, 0.05);
  }
  
  .country-flag {
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .country-arrow {
    font-size: 18px;
    color: #5f6368;
    transition: transform 0.2s ease;
  }
  
  .country-selector:active .country-arrow {
    transform: rotate(180deg);
  }
  
  .phone-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .phone-input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 16px 16px 16px 0;
    font-size: 16px;
    color: var(--color-text-primary);
    outline: none;
    font-family: inherit;
  }
  
  .phone-input::placeholder {
    color: #80868b;
    font-weight: 400;
  }
  
  .phone-terms {
    font-size: 13px;
    line-height: 1.5;
    color: #5f6368;
    margin: 0;
    padding: 0;
    max-width: 100%;
    text-align: center;
  }
  
  /* Bouton Continuer pour la page téléphone */
  .phone-continue-container {
    width: 100%;
    margin-top: 32px;
    display: flex;
    justify-content: center;
  }
  
  .btn-continue-phone {
    width: 100%;
    max-width: 400px;
    padding: 16px 24px;
    background: #002FBD;
    color: #fff;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
  }
  
  .btn-continue-phone:disabled {
    background: #dadce0;
    color: #80868b;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  .btn-continue-phone:not(:disabled):hover {
    background: #0024a0;
    transform: translateY(-1px);
  }
  
  .btn-continue-phone:not(:disabled):active {
    background: #001d7a;
    transform: translateY(0);
  }
  
  /* Liste déroulante de sélection de pays */
  .country-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 3px;
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  
  .country-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .country-search-container {
    padding: 12px 16px;
    border-bottom: 1px solid #e8eaed;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .country-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dadce0;
    border-radius: 3px;
    font-size: 15px;
    color: var(--color-text-primary);
    background: #f8f9fa;
    outline: none;
    transition: all 0.2s ease;
  }
  
  .country-search-input:focus {
    background: #fff;
    border-color: var(--color-primary);
  }
  
  .country-search-input::placeholder {
    color: #80868b;
  }
  
  .country-dropdown-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
  }
  
  .country-loading {
    padding: 20px 16px;
    text-align: center;
    color: #5f6368;
    font-size: 14px;
  }
  
  .country-no-results {
    padding: 20px 16px;
    text-align: center;
    color: #5f6368;
    font-size: 14px;
  }
  
  /* ============================================
     Page Classe - Sélection de classe
     ============================================ */
  body.classe-page {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    overflow-x: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  
  .classe-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("assets/img/bg_school_tools_1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
  }
  
  .classe-page .page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  
  .classe-page .app-header .app-header-content {
    justify-content: flex-start;
    padding: 15px 20px;
    position: relative;
    z-index: 10;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 50px;
  }
  
  .app-main-content.classe-content {
    background-color: #ffffff;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .classe-selected-ecole {
    margin: 0 0 8px 0;
    padding: 0 16px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .classe-content {
    flex: 1;
    padding: 20px 16px 32px 16px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }
  
  .classe-logo-container {
    margin-bottom: 28px;
    margin-top: 0;
  }
  
  .classe-logo-container .signup-icon {
    max-width: 170px;
    width: 100%;
    height: auto;
  }
  
  .classe-title {
    color: var(--color-primary);
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 1.4;
  }
  .classe-title .i18n-fr,
  .classe-title .i18n-ar {
    display: block;
  }
  .classe-title .i18n-ar {
    font-weight: normal;
    margin-top: 0.2em;
  }
  
  .classe-container {
    width: 100%;
    max-width: 500px;
    min-width: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  
  .classe-numbers-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  
  .classe-numbers-row .classe-number {
    margin-right: 0;
  }
  
  .classe-letters-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  
  .classe-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  
  .classe-lettres {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  
  .classe-letter-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 2px solid #e3f2fd;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    box-sizing: border-box;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .classe-letter-btn:hover {
    border-color: #90caf9;
    background: #e3f2fd;
    transform: scale(1.05);
  }
  
  .classe-letter-btn.active {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
  }
  
  .classe-number {
    background: var(--color-primary);
    color: var(--color-text-white);
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-right: 10px;
    box-sizing: border-box;
  }
  
  .classe-continue-container {
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
  }
  
  .btn-subscribe {
    width: 100%;
    max-width: 100%;
    padding: 14px 24px;
    background: var(--color-primary, #002FBD);
    color: var(--color-text-white);
    border: 0;
    border-radius: 3px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-height: 48px;
  }
  
  .btn-subscribe:disabled {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  .btn-subscribe:not(:disabled):hover {
    background: var(--color-primary-hover, #0024a0);
    transform: translateY(-1px);
  }
  
  .btn-subscribe:not(:disabled):active {
    transform: translateY(0);
  }
  
  .classe-page .btn-subscribe {
    background: #00e0a0;
    color: #ffffff;
  }
  .classe-page .btn-subscribe:not(:disabled):hover {
    background: #00c98e;
  }
  
  /* Responsive pour la page classe */
  
  /* ============================================
     Breakpoints optimisés pour smartphones réels
     Basés sur les résolutions réelles des appareils
     ============================================ */
  
  /* Très petits écrans (≤320px) */
  @media screen and (max-width: 320px) {
    .classe-page .app-header .app-header-content {
      padding: 8px 10px;
      min-height: 44px;
    }
    .classe-content {
      padding: 14px 10px 20px 10px;
    }
    .classe-selected-ecole {
      padding: 0 10px;
      font-size: 19px;
    }
    .classe-title {
      font-size: 14px;
      margin-bottom: 14px;
      padding: 0 8px;
    }
    .classe-container {
      padding: 6px 10px;
      margin-bottom: 12px;
      gap: 10px;
    }
    .classe-numbers-row {
      gap: 6px;
    }
    .classe-letters-row {
      gap: 6px;
    }
    .classe-letter-btn {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      font-size: 11px;
      border-width: 1.5px;
    }
    .classe-number {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      font-size: 11px;
    }
    .classe-col {
      gap: 6px;
    }
    .classe-continue-container {
      margin-top: 8px;
      padding: 0 10px;
    }
    .btn-subscribe {
      padding: 10px 14px;
      font-size: 13px;
      min-height: 42px;
    }
  }

  /* Très petits téléphones (321px–380px) */
  @media screen and (min-width: 321px) and (max-width: 380px) {
    .classe-page .app-header .app-header-content {
      padding: 10px 14px;
      display: flex !important;
      visibility: visible !important;
      min-height: 46px;
    }
  
    .classe-content {
      padding: 18px 14px 24px 14px;
    }
  
    .classe-selected-ecole {
      padding: 0 14px;
      font-size: 20px;
    }
  
    .classe-logo-container {
      margin-bottom: 18px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 120px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 16px;
      margin-bottom: 18px;
      padding: 0 10px;
      line-height: 1.3;
    }
  
    .classe-container {
      margin-bottom: 14px;
      width: 100%;
      padding: 8px 14px;
    }
  
    .classe-row {
      margin-bottom: 10px;
      min-height: 52px;
    }
  
    .classe-letter-btn {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      font-size: 13px;
      border-width: 1.5px;
    }
  
    .classe-number {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      font-size: 13px;
      margin-right: 8px;
    }
  
    .classe-lettres {
      gap: 7px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 10px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 12px 18px;
      font-size: 14px;
      width: 100%;
      max-width: 100%;
      min-height: 44px;
    }
  
    .btn-back {
      font-size: 22px;
      min-width: 30px;
      min-height: 30px;
    }
  
    .btn-back ion-icon {
      font-size: 22px;
      width: 22px;
      height: 22px;
    }
  }
  
  /* Très petits téléphones (iPhone SE 2020 - 750x1334) - max-width: 375px */
  @media screen and (max-width: 375px) {
    .classe-page .app-header .app-header-content {
      padding: 10px 12px;
      display: flex !important;
      visibility: visible !important;
      min-height: 44px;
    }
  
    .classe-content {
      padding: 16px 12px 22px 12px;
    }
  
    .classe-logo-container {
      margin-bottom: 16px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 110px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 15px;
      margin-bottom: 16px;
      padding: 0 8px;
      line-height: 1.3;
    }
  
    .classe-container {
      margin-bottom: 12px;
      width: 100%;
      padding: 8px 12px;
    }
  
    .classe-selected-ecole {
      padding: 0 12px;
      font-size: 20px;
    }
  
    .classe-row {
      margin-bottom: 9px;
      min-height: 50px;
    }
  
    .classe-letter-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      font-size: 12px;
      border-width: 1.5px;
    }
  
    .classe-number {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      font-size: 12px;
      margin-right: 8px;
    }
  
    .classe-lettres {
      gap: 6px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 8px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 11px 16px;
      font-size: 14px;
      width: 100%;
      max-width: 100%;
      min-height: 42px;
    }
  
    .btn-back {
      font-size: 20px;
      min-width: 28px;
      min-height: 28px;
    }
  
    .btn-back ion-icon {
      font-size: 20px;
      width: 20px;
      height: 20px;
    }
  }
  
  /* Petits téléphones (iPhone 11/12/13, Pixel 7) - 376px à 480px */
  @media screen and (min-width: 376px) and (max-width: 480px) {
    .classe-page .app-header .app-header-content {
      padding: 12px 16px;
      display: flex !important;
      visibility: visible !important;
      min-height: 48px;
    }
  
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container {
      margin-bottom: 24px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
      padding: 0 16px;
      line-height: 1.4;
    }
  
    .classe-container {
      margin-bottom: 18px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 14px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 14px 22px;
      font-size: 15px;
      width: 100%;
      max-width: 100%;
      min-height: 46px;
    }
  }
  
  
  /* Tous les petits téléphones (max-width: 480px) - Fallback général */
  @media screen and (max-width: 480px) {
    .classe-page .app-header .app-header-content {
      padding: 12px 16px;
      display: flex !important;
      visibility: visible !important;
      min-height: 48px;
    }
  
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
      padding: 0 16px;
      line-height: 1.4;
    }
  
    .classe-container {
      margin-bottom: 18px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 14px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 14px 22px;
      font-size: 15px;
      width: 100%;
      max-width: 100%;
      min-height: 46px;
    }
  }
  
  /* Moyens téléphones (iPhone 12/13 Pro - 1170x2532, Samsung S10 - 1440x3040) - 481px à 768px */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .classe-page .app-header .app-header-content {
      padding: 14px 20px;
      display: flex !important;
      visibility: visible !important;
      min-height: 50px;
    }
  
    .classe-content {
      padding: 30px 22px 38px 22px;
    }
  
    .classe-logo-container {
      margin-bottom: 26px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 160px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 20px;
      margin-bottom: 26px;
      line-height: 1.4;
    }
  
    .classe-container {
      max-width: 520px;
      margin-bottom: 20px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 13px;
      min-height: 64px;
    }
  
    .classe-letter-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 10px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      max-width: 520px;
      margin-top: 16px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 15px 24px;
      font-size: 16px;
      width: 100%;
      min-height: 48px;
    }
  }
  
  /* Grands téléphones / Phablets paysage (iPhone 14 Pro Max - 1290x2796, Samsung S20+ - 1440x3200) - 769px à 1024px paysage */
  @media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .classe-content {
      padding: 22px 26px 30px 26px;
    }
  
    .classe-logo-container {
      margin-bottom: 18px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 18px;
      line-height: 1.4;
    }
  
    .classe-container {
      max-width: 580px;
      margin-bottom: 18px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 11px;
      min-height: 62px;
    }
  
    .classe-letter-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 10px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 14px;
      width: 100%;
      padding: 0;
      max-width: 580px;
    }
  
    .btn-subscribe {
      padding: 14px 24px;
      font-size: 16px;
      width: 100%;
      min-height: 48px;
    }
  }
  
  /* Grands téléphones / Phablets portrait (iPhone 14 Pro Max - 1290x2796, Samsung S20+ - 1440x3200) - 769px à 1024px portrait */
  @media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .classe-content {
      padding: 34px 26px 42px 26px;
    }
  
    .classe-logo-container {
      margin-bottom: 28px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 170px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
      line-height: 1.4;
    }
  
    .classe-container {
      max-width: 560px;
      margin-bottom: 24px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 14px;
      min-height: 66px;
    }
  
    .classe-letter-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 11px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      max-width: 560px;
      margin-top: 18px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 16px 26px;
      font-size: 17px;
      width: 100%;
      min-height: 50px;
    }
  }
  
  /* Très grands écrans (1025px+) */
  @media screen and (min-width: 1025px) {
    .classe-content {
      padding: 44px 36px 52px 36px;
    }
  
    .classe-logo-container {
      margin-bottom: 32px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 180px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 24px;
      margin-bottom: 32px;
      line-height: 1.4;
    }
  
    .classe-container {
      max-width: 580px;
      margin-bottom: 24px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 15px;
      min-height: 70px;
    }
  
    .classe-letter-btn {
      width: 42px;
      height: 42px;
      min-width: 42px;
      min-height: 42px;
      font-size: 16px;
    }
  
    .classe-number {
      width: 42px;
      height: 42px;
      min-width: 42px;
      min-height: 42px;
      font-size: 16px;
      margin-right: 12px;
    }
  
    .classe-lettres {
      gap: 12px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      max-width: 580px;
      margin-top: 18px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 17px 28px;
      font-size: 18px;
      width: 100%;
      min-height: 52px;
    }
  }
  
  /* Orientation paysage pour mobile (max-width: 768px) */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .classe-page .app-header .app-header-content {
      padding: 10px 18px;
      display: flex !important;
      visibility: visible !important;
      min-height: 46px;
    }
  
    .classe-content {
      padding: 18px 22px 26px 22px;
    }
  
    .classe-logo-container {
      margin-bottom: 14px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 130px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 18px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
  
    .classe-container {
      margin-bottom: 14px;
      width: 100%;
      padding: 0;
    }
  
    .classe-row {
      margin-bottom: 10px;
      min-height: 56px;
    }
  
    .classe-letter-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 8px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      margin-top: 12px;
      width: 100%;
      padding: 0;
    }
  
    .btn-subscribe {
      padding: 13px 20px;
      font-size: 15px;
      width: 100%;
      max-width: 100%;
      min-height: 46px;
    }
  }
  
  /* Support pour les très grands écrans (4K et plus) */
  @media screen and (min-width: 1920px) {
    .classe-content {
      padding: 48px 40px 56px 40px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 200px;
      width: 100%;
      height: auto;
    }
  
    .classe-title {
      font-size: 24px;
      margin-bottom: 36px;
      line-height: 1.4;
    }
  
    .classe-container {
      max-width: 600px;
      width: 100%;
      padding: 0;
      margin-bottom: 24px;
    }
  
    .classe-row {
      margin-bottom: 16px;
      min-height: 74px;
    }
  
    .classe-letter-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 16px;
    }
  
    .classe-number {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 16px;
      margin-right: 14px;
    }
  
    .classe-lettres {
      gap: 14px;
      flex-wrap: nowrap;
    }
  
    .classe-continue-container {
      max-width: 600px;
      width: 100%;
      padding: 0;
      margin-top: 20px;
    }
  
    .btn-subscribe {
      padding: 18px 30px;
      font-size: 19px;
      width: 100%;
      min-height: 56px;
    }
  }
  
  /* ============================================
     Optimisations spécifiques par résolution réelle
     ============================================ */
  
  /* iPhone SE (2020) - 750x1334 - Ratio 16:9 */
  @media screen and (max-width: 375px) and (max-height: 667px) {
    .classe-content {
      padding: 16px 12px 22px 12px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 110px;
    }
  
    .classe-title {
      font-size: 15px;
      margin-bottom: 16px;
    }
  
    .classe-row {
      margin-bottom: 9px;
      min-height: 50px;
    }
  
    .classe-letter-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 13px;
    }
  
    .classe-number {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      font-size: 13px;
      margin-right: 9px;
    }
  
    .classe-lettres {
      gap: 6px;
    }
  }
  
  /* iPhone 11/12/13 - 828x1792 - Ratio 19.5:9 */
  @media screen and (min-width: 414px) and (max-width: 480px) and (min-height: 896px) {
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
    }
  }
  
  /* iPhone 12/13 Pro - 1170x2532 - Ratio 19.5:9 */
  @media screen and (min-width: 390px) and (max-width: 480px) and (min-height: 844px) {
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
    }
  }
  
  /* Samsung S10 - 1440x3040 - Ratio 19:9 (Quad HD) */
  @media screen and (min-width: 360px) and (max-width: 480px) and (min-height: 760px) {
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
    }
  }
  
  /* Google Pixel 7 - 1080x2400 - Ratio 20:9 (Full HD+) */
  @media screen and (min-width: 412px) and (max-width: 480px) and (min-height: 915px) {
    .classe-content {
      padding: 24px 20px 32px 20px;
    }
  
    .classe-logo-container .signup-icon {
      max-width: 150px;
    }
  
    .classe-title {
      font-size: 19px;
      margin-bottom: 24px;
    }
  
    .classe-row {
      margin-bottom: 12px;
      min-height: 60px;
    }
  
    .classe-letter-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
    }
  
    .classe-number {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      font-size: 15px;
      margin-right: 10px;
    }
  
    .classe-lettres {
      gap: 9px;
    }
  }
  
  /* Optimisations pour les écrans haute densité (Retina, etc.) */
  @media screen and (-webkit-min-device-pixel-ratio: 2),
         screen and (min-resolution: 192dpi) {
    .classe-letter-btn,
    .classe-number {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  
  /* Prévention des débordements horizontaux */
  @media screen and (max-width: 480px) {
    .classe-row {
      overflow: hidden;
    }
  
    .classe-lettres {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
  
    .classe-lettres::-webkit-scrollbar {
      display: none;
    }
  }
  
  /* Amélioration de l'accessibilité tactile */
  @media (hover: none) and (pointer: coarse) {
    .classe-letter-btn {
      min-width: 38px;
      min-height: 38px;
    }
  
    .classe-number {
      min-width: 38px;
      min-height: 38px;
    }
  }
  
  .country-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 12px;
  }
  
  .country-item:hover,
  .country-item:focus {
    background: rgba(0, 47, 189, 0.05);
  }
  
  .country-item:active {
    background: rgba(0, 47, 189, 0.1);
  }
  
  .country-item-flag {
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 28px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  
  .country-item-name {
    flex: 1;
    font-size: 15px;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    min-width: 0;
  }
  
  .country-item-dial {
    font-size: 14px;
    color: #5f6368;
    line-height: 1.5;
    flex-shrink: 0;
    font-weight: 400;
  }
  
  /* Style de la scrollbar pour le dropdown */
  .country-dropdown-list::-webkit-scrollbar {
    width: 6px;
  }
  
  .country-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .country-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  .country-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  
  /* Responsive pour petits écrans */
  @media screen and (max-width: 480px) {
    .phone-content {
      padding: 24px 20px 40px 20px;
    }
  
    .phone-continue-container {
      margin-top: 24px;
    }
  
    .btn-continue-phone {
      padding: 14px 20px;
      font-size: 15px;
    }
  
    .phone-logo-container {
      margin-bottom: 24px;
    }
  
    .phone-logo-container .signup-icon {
      max-width: 140px;
    }
  
    .phone-page .page-title {
      font-size: 24px;
      margin-bottom: 32px;
    }
  
    .phone-input-group {
      gap: 8px;
    }
  
    .country-dropdown {
      max-height: 250px;
    }
  
    .country-dropdown-list {
      max-height: 250px;
    }
  
    .country-item {
      padding: 10px 14px;
    }
  
    .country-item-flag {
      font-size: 24px;
      width: 32px;
      height: 24px;
    }
  
    .country-item-name {
      font-size: 14px;
    }
  
    .country-item-dial {
      font-size: 12px;
    }
  
    .country-selector {
      padding: 14px 10px;
      min-width: 70px;
    }
  
    .country-flag {
      font-size: 20px;
    }
  
    .phone-input {
      padding: 14px 12px 14px 0;
      font-size: 15px;
    }
  
    .phone-terms {
      font-size: 12px;
    }
  
  }
  
  /* ============================================
     Styles Application - Page Accueil Parent (Light Mode)
     ============================================ */
  
  /* Page principale */
  .app-style-page {
    background-color: #f0f2f5;
    color: #41525d;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Header Application */
  .app-header {
    background-color: #ffffff;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .app-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    height: auto;
    padding: var(--header-padding-v) var(--header-padding-h);
    box-sizing: border-box;
    gap: 12px;
  }
  
  .btn-back-header {
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .btn-back-header:hover {
    opacity: 0.7;
  }
  
  .btn-back-header:active {
    opacity: 0.5;
  }
  
  .btn-back-header ion-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
  }
  
  /* Icônes flèche retour et menu (trois points) en bleu partout */
  ion-icon[name="arrow-back-outline"] {
    color: var(--color-primary, #002FBD);
  }
  ion-icon[name="ellipsis-vertical-outline"] {
    color: var(--color-primary, #002FBD);
  }
  ion-icon[name="notifications-outline"] {
    color: var(--color-primary, #002FBD);
  }
  
  .app-logo-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Logo à gauche pour Parent et Teacher (même avec bouton retour) */
  body.app-style-page:not(.governorat-page) .app-header .app-logo-container {
    justify-content: flex-start;
  }
  
  /* Logo centré pour gouvernorat - centrage absolu même avec bouton retour */
  body.governorat-page .app-header-content {
    position: relative;
  }
  
  body.governorat-page .app-header .app-logo-container {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    pointer-events: none;
  }
  
  body.governorat-page .app-header .app-logo {
    pointer-events: auto;
  }
  
  body.governorat-page .app-header-actions .toggle-searchbox,
  body.governorat-page .app-header-actions .toggle-searchbox ion-icon {
    color: var(--color-primary, #002FBD);
  }
  body.governorat-page .app-header-actions .toggle-searchbox:hover {
    color: var(--color-primary-hover, #00208a);
  }

  /* Logo centré pour page classe */
  body.classe-page .app-header-content {
    position: relative;
  }
  body.classe-page .app-header .app-logo-container {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    pointer-events: none;
  }
  body.classe-page .app-header .app-logo {
    pointer-events: auto;
  }

  /* Logo centré + icône menu bleue (page Abonnement) */
  body.abonnement-page .app-header-content {
    position: relative;
  }
  body.abonnement-page .app-header .app-logo-container {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    pointer-events: none;
  }
  body.abonnement-page .app-header .app-logo {
    pointer-events: auto;
  }
  body.abonnement-page .app-header-actions .header-menu-btn-ellipsis,
  body.abonnement-page .app-header-actions .header-menu-btn-ellipsis ion-icon {
    color: var(--color-primary, #002FBD);
  }
  body.abonnement-page .app-header .subscription-back-btn {
    position: relative;
    z-index: 2;
  }

  /* Logo centré pour page Devoir maison */
  body.devoir-maison-page .app-header-content {
    position: relative;
  }
  body.devoir-maison-page .app-header .app-logo-container {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    pointer-events: none;
  }
  body.devoir-maison-page .app-header .app-logo {
    pointer-events: auto;
  }
  body.devoir-maison-page .app-header .subscription-back-btn {
    position: relative;
    z-index: 2;
  }

  body.abonnement-page .app-main-content.subscription-main {
    background-color: #ffffff;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .subscription-page-title {
    margin: 0;
    padding: var(--page-padding-v) var(--page-padding-h) var(--spacing-md);
    font-size: var(--title-font-size);
    font-weight: 700;
    color: var(--color-text-primary, #050505);
    text-align: left;
  }

  body.login-page .app-header-content {
    position: relative;
  }

  body.login-page .app-header .app-logo-container {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    pointer-events: none;
  }

  body.login-page .app-header .app-logo {
    pointer-events: auto;
  }

  body.login-page .app-header-actions {
    min-width: 40px;
  }
  
  .app-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    max-width: 100%;
  }

  .app-header .app-logo {
    cursor: pointer;
  }
  
  .app-title {
    font-size: 22px;
    font-weight: 600;
    color: #41525d;
    margin: 0;
    flex: 1;
    line-height: 1.2;
  }
  
  .app-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    position: relative;
  }
  
  .header-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .parent-header .app-header-actions {
    gap: 2px;
  }
  
  .app-icon-btn {
    background: none;
    border: none;
    color: #050505;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    min-width: 40px;
    min-height: 40px;
    position: relative;
  }
  
  .app-icon-btn:hover {
    background-color: #f0f2f5;
  }
  
  .app-icon-btn:active {
    background-color: #e4e6eb;
    transform: scale(0.95);
  }
  
  .parent-header .app-icon-btn {
    color: #050505;
  }
  
  /* Bouton menu/paramètres du header : bleu et taille réduite */
  .app-header-actions .app-icon-btn {
    color: var(--color-primary, #002FBD);
    min-width: 32px;
    min-height: 32px;
    font-size: 20px;
    padding: 6px;
  }
  .app-header-actions .app-icon-btn:hover {
    color: var(--color-primary-hover, #00208a);
  }
  .app-header-actions .app-icon-btn ion-icon {
    color: inherit;
  }
  
  /* Menu déroulant du header */
  .header-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: #ffffff;
    border-radius: 3px;
    min-width: 180px;
    z-index: 1000;
    display: none;
    overflow: hidden;
    border: 1px solid #e4e6eb;
  }
  
  .header-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease-out;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .header-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: inherit;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
  }
  
  .header-menu-item:hover {
    background-color: #f0f2f5;
  }
  
  .header-menu-item:active {
    background-color: #e4e6eb;
  }
  
  .header-dropdown-menu a.header-menu-item {
    text-decoration: none;
    color: inherit;
  }
  
  .header-menu-item ion-icon {
    font-size: 20px;
    color: #65676b;
  }
  
  .header-menu-item span {
    flex: 1;
  }
  
  /* Backdrop pour fermer le menu */
  .header-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
  }
  
  .header-menu-backdrop.show {
    display: block;
  }
  
  /* Barre de recherche */
  .app-search-container {
    background-color: #ffffff;
    padding: 8px 16px 12px 16px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .app-search-bar {
    background-color: #f0f2f5;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
  }
  
  .search-icon {
    color: #54656f;
    font-size: 20px;
    flex-shrink: 0;
  }
  
  .app-search-input {
    background: none;
    border: none;
    color: #41525d;
    font-size: 15px;
    flex: 1;
    outline: none;
    padding: 0;
  }
  
  .app-search-input::placeholder {
    color: #8b9ba8;
  }
  
  /* Composant recherche MobileKit (page Gouvernorat – affiché au clic sur l’icône) */
  .search-governorat.search-form,
  #search.search-governorat .search-form {
    display: block;
    width: 100%;
  }
  #search.search-governorat {
    display: block;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
    position: fixed;
    left: 0;
    top: -100px;
    right: 0;
    width: 100%;
    z-index: 1001;
    transition: 0.3s ease-in-out;
  }
  #search.search-governorat.show {
    top: calc(56px + env(safe-area-inset-top, 0px));
    transition: 0.22s ease-in-out;
  }
  #search.search-governorat .searchbox {
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #search.search-governorat .searchbox .form-control {
    height: 56px;
    padding: 0 56px 0 56px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 17px;
    color: #141515;
    width: 100%;
  }
  #search.search-governorat .searchbox .form-control::placeholder {
    color: #8b9ba8;
  }
  #search.search-governorat .searchbox .form-control:focus {
    outline: none;
  }
  #search.search-governorat .searchbox .input-icon {
    font-size: 26px;
    position: absolute;
    left: 8px;
    width: 46px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1a2;
    top: 0;
    pointer-events: none;
  }
  #search.search-governorat .searchbox .close {
    opacity: 1;
    color: #a1a1a2;
    width: 46px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }
  #search.search-governorat .searchbox .close:hover {
    color: #141515;
  }
  #search.search-governorat .searchbox .close ion-icon {
    font-size: 26px;
  }
  
  /* Contenu principal – cohérence globale : même logique que 360px pour toutes les résolutions */
  .app-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--color-bg-primary);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
  }

  /* Tablette (768px+) : main centré avec max-width, mêmes variables qu’à 360px */
  @media (min-width: 769px) {
    .app-main-content {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      padding-left: var(--page-padding-h);
      padding-right: var(--page-padding-h);
    }
    .app-main-content.parametres-main,
    .app-main-content.notification-main-content {
      padding-left: 0;
      padding-right: 0;
    }
    .app-main-content.governorat-content,
    .app-main-content.classe-content {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Tablette paysage / petit desktop (1024px+) */
  @media (min-width: 1025px) {
    .app-main-content {
      max-width: 900px;
      padding-bottom: 80px;
    }
    .app-main-content.governorat-content,
    .app-main-content.classe-content {
      max-width: 100%;
    }
  }

  /* Grand écran (1281px+) */
  @media (min-width: 1281px) {
    .app-main-content {
      max-width: 1200px;
    }
    .app-main-content.governorat-content,
    .app-main-content.classe-content {
      max-width: 100%;
    }
  }
  
  /* Page devoir_maison : pas de background-color sur app-main-content */
  body.devoir-maison-page .app-main-content {
    background-color: transparent;
  }

  /* Page Parent (accueil) : full width, centré verticalement, justify-content flex-start, toutes tailles */
  body.parent-home-page .app-main-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* Pages avec conteneur interne qui gère le padding horizontal (évite double padding) */
  .app-main-content.parametres-main,
  .app-main-content.notification-main-content {
    padding-left: 0;
    padding-right: 0;
  }

  /* Page gouvernorat (délégation, école) : colonne flex, hauteur via body flex */
  .app-main-content.governorat-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background-color: #ffffff;
    padding-bottom: 0;
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  /* Header amélioré style Facebook pour Parent */
  .parent-header {
    border-bottom: 1px solid #e4e6eb;
  }
  
  .app-content-area {
    padding: var(--page-padding-v) var(--page-padding-h);
  }
  
  .welcome-message {
    color: #8b9ba8;
    text-align: center;
    margin-top: 32px;
    font-size: 16px;
  }
  
  /* Liste de chats Application style */
  .app-chat-list {
    background-color: #ffffff;
    margin-bottom: 16px;
  }
  
  .app-chat-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 14px;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  
  .app-chat-item:hover {
    background-color: #f5f6f6;
    padding-left: 18px;
  }
  
  .app-chat-item:active {
    background-color: #e9edef;
    transform: scale(0.998);
  }
  
  .chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
  }
  
  .chat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  
  .chat-name {
    font-size: 16px;
    font-weight: 500;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .chat-time {
    font-size: 13px;
    color: #667781;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .chat-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  
  .chat-message-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .chat-message-sender {
    font-size: 13px;
    font-weight: 600;
    color: #111b21;
    flex-shrink: 0;
  }
  
  .chat-message-text {
    font-size: 14px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .chat-message-text-list {
    font-size: 14px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .chat-message {
    font-size: 14px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  
  .chat-badge {
    background-color: #002FBD;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
  }
  
  .chat-status-icon {
    font-size: 16px;
    color: #667781;
    flex-shrink: 0;
  }
  
  .chat-status-icon.read {
    color: #53bdeb;
  }
  
  .chat-send-icon {
    font-size: 14px;
    color: #002FBD;
    flex-shrink: 0;
  }
  
  .chat-status-sent {
    display: flex;
    align-items: center;
    color: #53bdeb;
    font-size: 16px;
    flex-shrink: 0;
  }
  
  .chat-status-sent ion-icon {
    font-size: 16px;
  }
  
  /* Navigation Footer */
  .app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4e6eb;
    z-index: 100;
    min-height: 56px;
    box-sizing: border-box;
  }
  
  /* Navigation améliorée style Facebook */
  .parent-bottom-nav {
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
  }
  
  .parent-bottom-nav .app-fab-center {
    margin-top: -24px;
    margin-bottom: -24px;
    flex-shrink: 0;
  }
  
  .app-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #65676b;
    text-decoration: none;
    padding: 6px 8px;
    flex: 1;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    border-radius: 3px;
    min-width: 0;
  }
  
  .app-nav-item ion-icon {
    font-size: 24px;
    transition: transform 0.2s ease;
  }
  
  .app-nav-item.active {
    color: #1877f2;
  }
  
  .app-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #1877f2;
    border-radius: 0 0 8px 8px;
  }
  
  .app-nav-item.active ion-icon {
    transform: scale(1.1);
  }
  
  .app-nav-item:hover {
    background-color: #f0f2f5;
  }
  
  .app-nav-item:active {
    transform: scale(0.95);
    background-color: #e4e6eb;
  }
  
  /* Floating Action Button */
  .app-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #002FBD;
    border: none;
    color: white;
    font-size: 28px;
    display: none; /* Masqué par défaut, affiché seulement après abonnement */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
  }
  
  /* FAB au centre du footer */
  .app-fab-center {
    position: relative;
    bottom: auto;
    right: auto;
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin: 0;
    flex-shrink: 0;
    z-index: 101;
  }
  
  .app-fab:hover {
    transform: scale(1.05);
  }
  
  .app-fab:active {
    transform: scale(0.95);
  }
  
  .app-fab-center:hover {
    transform: scale(1.1);
  }
  
  .app-fab-center:active {
    transform: scale(0.9);
  }
  
  /* ============================================
     App Footer + Bottom Menu (style Mobilekit)
     Le menu est dans le footer ; la hauteur du main en est soustraite via flex.
     ============================================ */
  body:has(.app-footer) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  body:has(.app-footer) .app-main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  
  .app-footer {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    z-index: 999;
    background: #ffffff;
    /* Réserve la place du menu (fixed) + encoche / barre système + débordement du FAB */
    /*min-height: calc(
      var(--app-bottom-menu-height) + env(safe-area-inset-bottom, 0px) + 28px
    );*/
    box-sizing: border-box;
    pointer-events: none;
  }
  
  .appBottomMenu {
    min-height: var(--app-bottom-menu-height);
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #E1E1E1;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /*
   * Menu dans le footer : fixed sur le viewport (Android / barre gestes).
   * Le flux flex garde un spacer via .app-footer min-height ; le menu reste visible en bas d’écran.
   */
  .app-footer .appBottomMenu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: auto;
    padding-top: var(--app-bottom-menu-padding-top);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    min-height: calc(
      var(--app-bottom-menu-height) + var(--app-bottom-menu-padding-top) +
        env(safe-area-inset-bottom, 0px)
    );
  }
  
  .appBottomMenu .item {
    font-size: 9px;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
    height: var(--app-bottom-menu-height);
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    color: inherit;
  }
  
  .appBottomMenu .item:before {
    content: '';
    display: block;
    height: 2px;
    border-radius: 0 0 10px 10px;
    background: transparent;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
  }
  
  .appBottomMenu .item .col {
    width: 100%;
    padding: 0 4px;
    text-align: center;
  }
  
  .appBottomMenu .item ion-icon {
    display: block;
    margin: 1px auto 3px auto;
    font-size: 26px;
    line-height: 1em;
    color: #141515;
    transition: none;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  
  .appBottomMenu .item .action-button {
    display: inline-flex;
    width: 50px;
    height: 50px;
    margin-left: -5px;
    margin-right: -5px;
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    background: var(--color-primary);
  }
  
  .appBottomMenu .item .action-button.large {
    width: 60px;
    height: 60px;
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .appBottomMenu .item .action-button ion-icon {
    color: #FFF !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  
  .appBottomMenu .item strong {
    margin-top: 4px;
    display: block;
    color: #141515;
    font-weight: 400;
    transition: none;
  }
  
  .appBottomMenu .item:active {
    opacity: .8;
  }
  
  .appBottomMenu .item.active:before {
    background: transparent;
  }
  
  .appBottomMenu .item.active ion-icon,
  .appBottomMenu .item.active strong {
    color: var(--color-primary) !important;
    font-weight: 500;
  }
  
  .appBottomMenu .item:hover ion-icon,
  .appBottomMenu .item:hover strong {
    color: #141515;
  }
  
  /* ============================================
     Styles spécifiques pour la page Teacher
     ============================================ */
  
  /* Section de bienvenue */
  .teacher-welcome-section {
    padding: 20px 16px;
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 100%);
    margin-bottom: 0;
  }
  
  .teacher-welcome-card {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 3px;
    padding: 24px;
    text-align: center;
    color: white;
  }
  
  .teacher-welcome-icon {
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  
  .teacher-welcome-icon ion-icon {
    font-size: 32px;
    color: white;
  }
  
  .teacher-welcome-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: white;
  }
  
  .teacher-welcome-text {
    font-size: 15px;
    margin: 0;
    opacity: 0.95;
    line-height: 1.5;
  }
  
  /* Section des statistiques */
  .teacher-stats-section {
    display: flex;
    gap: 12px;
    padding: 16px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f2f5;
  }
  
  .teacher-stat-card {
    flex: 1;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 3px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s ease;
  }
  
  .teacher-stat-card:hover {
    transform: translateY(-2px);
  }
  
  .teacher-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .teacher-stat-icon ion-icon {
    font-size: 24px;
    color: white;
  }
  
  .teacher-stat-icon.classes {
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 100%);
  }
  
  .teacher-stat-icon.messages {
    background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
  }
  
  .teacher-stat-icon.students {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
  }
  
  .teacher-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .teacher-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #111b21;
    line-height: 1.2;
  }
  
  .teacher-stat-label {
    font-size: 12px;
    color: #667781;
    font-weight: 500;
  }
  
  /* En-têtes de section */
  .teacher-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 8px 16px;
    background-color: #ffffff;
  }
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111b21;
    margin: 0;
  }
  
  .section-link {
    font-size: 14px;
    color: #002FBD;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
  }
  
  .section-link:hover {
    opacity: 0.8;
  }
  
  .section-link:active {
    opacity: 0.6;
  }
  
  /* Amélioration des avatars pour les classes */
  .app-chat-item .avatar-placeholder {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  
  /* En-tête d'école dans la liste des classes */
  .teacher-ecole-header {
    padding: 16px 16px 8px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e6eb;
    margin-top: 16px;
  }
  
  .teacher-ecole-header:first-child {
    margin-top: 0;
  }
  
  /* ============================================
     Page Parent - Histoires (design moderne)
     ============================================ */
  .app-main-content.parent-home-content {
    min-height: 0;
    overflow-x: hidden;
    padding-bottom: 80px;
  }

  .parent-home-content {
    padding: var(--page-padding-v) var(--page-padding-h) 28px var(--page-padding-h);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .parent-home-content .parent-stories-section {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .parent-home-content .parent-stories-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
    line-height: 1.25;
  }

  .parent-stories-intro {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0 0 24px 0;
    line-height: 1.5;
  }

  /* Cartes modernes */
  .parent-home-content .parent-story-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 20px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .parent-home-content .parent-story-card:last-child {
    margin-bottom: 0;
  }

  .parent-home-content .parent-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 47, 189, 0.08);
    border-color: rgba(0, 47, 189, 0.12);
  }

  .parent-home-content .parent-story-card:active {
    transform: translateY(0);
  }

  .parent-home-content .parent-story-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary, #002FBD);
    background: rgba(0, 47, 189, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .parent-home-content .parent-story-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  .parent-home-content .parent-story-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 14px 0;
    line-height: 1.45;
  }

  .parent-home-content .parent-story-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #002FBD);
  }

  .parent-home-content .parent-story-cta ion-icon {
    font-size: 1.125rem;
    color: var(--color-primary, #002FBD);
  }

  /* Très petits écrans (≤360px) */
  @media (max-width: 360px) {
    .parent-home-content {
      padding: 12px 10px 20px;
    }
    .parent-home-content .parent-stories-heading {
      font-size: 1.2rem;
    }
    .parent-stories-intro {
      font-size: 0.8125rem;
      margin-bottom: 18px;
    }
    .parent-home-content .parent-story-card {
      padding: 14px 12px 12px;
      border-radius: 12px;
      margin-bottom: 10px;
    }
    .parent-home-content .parent-story-badge {
      font-size: 0.625rem;
      padding: 3px 8px;
      margin-bottom: 8px;
    }
    .parent-home-content .parent-story-title {
      font-size: 0.9375rem;
    }
    .parent-home-content .parent-story-desc {
      font-size: 0.75rem;
      margin-bottom: 10px;
    }
    .parent-home-content .parent-story-cta {
      font-size: 0.75rem;
    }
    .parent-home-content .parent-story-cta ion-icon {
      font-size: 1rem;
    }
  }

  /* Mobile (≤480px) */
  @media (max-width: 480px) {
    .parent-home-content {
      padding: 16px 14px 24px;
    }
    .parent-home-content .parent-stories-heading {
      font-size: 1.35rem;
    }
    .parent-home-content .parent-story-card {
      padding: 18px 16px 16px;
      border-radius: 14px;
      margin-bottom: 12px;
    }
    .parent-home-content .parent-story-title {
      font-size: 1rem;
    }
    .parent-home-content .parent-story-desc {
      font-size: 0.8125rem;
    }
  }

  /* Paysage mobile */
  @media (max-width: 768px) and (orientation: landscape) {
    .parent-home-content {
      padding: var(--spacing-md) var(--page-padding-h) 20px var(--page-padding-h);
    }
    .parent-stories-intro {
      margin-bottom: 16px;
    }
    .parent-home-content .parent-story-card {
      padding: 12px 16px 10px;
      margin-bottom: 10px;
    }
    .parent-home-content .parent-story-desc {
      margin-bottom: 8px;
    }
  }

  /* Tablette et plus (≥768px) */
  @media (min-width: 768px) {
    .parent-home-content {
      padding: var(--page-padding-v) var(--page-padding-h) 32px var(--page-padding-h);
    }
    .parent-home-content .parent-stories-section {
      max-width: 600px;
    }
    .parent-home-content .parent-stories-heading {
      font-size: 1.625rem;
    }
    .parent-stories-intro {
      font-size: 1rem;
      margin-bottom: 28px;
    }
    .parent-home-content .parent-story-card {
      padding: 22px 24px 20px;
      margin-bottom: 16px;
    }
    .parent-home-content .parent-story-title {
      font-size: 1.2rem;
    }
    .parent-home-content .parent-story-desc {
      font-size: 0.9375rem;
    }
  }

  /* ============================================
     Styles spécifiques pour la page Parent - Posts Facebook
     ============================================ */
  
  /* Container des posts */
  .parent-posts-container {
    padding: 0 8px 12px 8px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  
  /* Container individuel pour chaque post */
  .parent-post-container {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 16px;
  }
  
  @media (min-width: 768px) {
    .parent-posts-container {
      max-width: 680px;
      margin: 0 auto;
      padding: 0 16px 16px 16px;
    }
  
    .parent-post-container {
      padding-bottom: 20px;
    }
  }
  
  /* Post individuel style Facebook */
  .parent-post {
    background-color: #ffffff;
    border-radius: 3px;
    margin-bottom: 0;
    padding: 12px 16px;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .parent-post:hover {
  }
  
  /* En-tête du post */
  .parent-post-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
  }
  
  .parent-post-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .parent-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
  }
  
  .parent-post-info {
    flex: 1;
    min-width: 0;
  }
  
  .parent-post-author {
    font-size: 15px;
    font-weight: 600;
    color: #050505;
    margin: 0 0 2px 0;
    line-height: 1.2;
  }
  
  .parent-post-meta {
    font-size: 13px;
    color: #65676b;
    margin: 0;
    line-height: 1.2;
  }
  
  .parent-post-menu {
    background: none;
    border: none;
    color: #65676b;
    font-size: 20px;
    padding: 4px;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }
  
  .parent-post-menu:hover {
    background-color: #f0f2f5;
  }
  
  /* Contenu du post */
  .parent-post-content {
    margin-bottom: 12px;
  }
  
  .parent-post-text {
    font-size: 15px;
    color: #050505;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
  }

  .parent-post-caption {
    font-size: 13px;
    color: #65676b;
    margin-top: 4px;
  }

  .parent-post-deadline {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, #002fbd);
    margin: 0 0 10px 0;
    line-height: 1.4;
  }
  
  /* Médias du post (image, vidéo, vocal) - style Mobilekit */
  .parent-post-media {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f2f5;
    max-width: 100%;
  }
  .parent-post-media-image,
  .parent-post-media.parent-post-media-video {
    cursor: pointer;
  }
  .parent-post-media-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    vertical-align: top;
  }
  .parent-post-media-video {
    position: relative;
    width: 100%;
    background: #000;
    max-height: 280px;
  }
  .parent-post-media-video video {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    display: block;
  }
  .parent-post-media-video .parent-post-video-poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1e21;
    color: #fff;
  }
  .parent-post-media-video .parent-post-video-poster ion-icon {
    font-size: 48px;
    opacity: 0.9;
  }
  .parent-post-media-vocal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0f2f5;
    border-radius: 8px;
  }
  .parent-post-media-vocal .parent-post-vocal-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }
  .parent-post-media-vocal .parent-post-vocal-btn ion-icon {
    font-size: 24px;
  }
  .parent-post-media-vocal .parent-post-vocal-info {
    flex: 1;
    min-width: 0;
  }
  .parent-post-media-vocal .parent-post-vocal-label {
    font-size: 14px;
    font-weight: 600;
    color: #050505;
    margin: 0 0 2px 0;
  }
  .parent-post-media-vocal .parent-post-vocal-duration {
    font-size: 13px;
    color: #65676b;
    margin: 0;
  }

  .parent-post-media.parent-post-media-audio {
    padding: 10px 12px;
    background: #e8f0fe;
  }
  .parent-post-media-audio audio {
    display: block;
    width: 100%;
    min-height: 40px;
  }
  
  /* Plein écran image / vidéo (z-index élevé pour passer au-dessus des barres fixes) */
  .media-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .media-fullscreen-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
  .media-fullscreen-overlay .media-fullscreen-content {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .media-fullscreen-overlay .media-fullscreen-content img,
  .media-fullscreen-overlay .media-fullscreen-content video {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
    display: block;
  }
  .media-fullscreen-overlay .media-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.2s ease;
  }
  .media-fullscreen-overlay .media-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  .media-fullscreen-overlay .media-fullscreen-close ion-icon {
    font-size: 28px;
  }
  
  /* Actions du post */
  .parent-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 0 0 0;
    border-top: 1px solid #e4e6eb;
    margin-top: 8px;
  }
  
  .parent-post-action-btn {
    background: none;
    border: none;
    color: #65676b;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
    position: relative;
  }
  
  .parent-post-action-btn ion-icon {
    font-size: 18px;
  }
  
  .parent-post-action-btn:hover {
    background-color: #f0f2f5;
  }
  
  .parent-post-action-btn:active {
    background-color: #e4e6eb;
  }
  
  .ecole-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .ecole-header-icon {
    font-size: 24px;
    color: #002FBD;
    flex-shrink: 0;
  }
  
  .ecole-header-text {
    flex: 1;
    min-width: 0;
  }
  
  .ecole-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #111b21;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .ecole-header-subtitle {
    font-size: 13px;
    color: #667781;
    margin: 0;
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .app-logo {
      height: 28px;
    }
  
    .app-title {
      font-size: 18px;
    }
  
    .app-nav-item {
      font-size: 10px;
      padding: 4px 4px;
      gap: 2px;
    }
  
    .app-nav-item ion-icon {
      font-size: 22px;
    }
  
    .app-nav-item.active::before {
      width: 32px;
      height: 2px;
    }
  
    .parent-bottom-nav {
      padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
      min-height: 52px;
    }
  
    .parent-bottom-nav .app-fab-center {
      width: 44px;
      height: 44px;
      font-size: 22px;
      margin-top: -22px;
      margin-bottom: -22px;
    }
  
    .app-fab {
      width: 52px;
      height: 52px;
      font-size: 26px;
      bottom: 75px;
      right: 16px;
    }
  
    .chat-avatar {
      width: 44px;
      height: 44px;
    }
  
    .avatar-placeholder {
      font-size: 18px;
    }
  
    .chat-name {
      font-size: 15px;
    }
  
    .chat-message {
      font-size: 13px;
    }
  
    .teacher-welcome-section {
      padding: 16px 12px;
    }
  
    .teacher-welcome-card {
      padding: 20px;
    }
  
    .teacher-welcome-icon {
      width: 56px;
      height: 56px;
    }
  
    .teacher-welcome-icon ion-icon {
      font-size: 28px;
    }
  
    .teacher-welcome-title {
      font-size: 20px;
    }
  
    .teacher-welcome-text {
      font-size: 14px;
    }
  
    .parent-posts-container {
      padding: 0 4px 8px 4px;
    }
  
    .parent-post-container {
      padding-bottom: 12px;
    }
  
    .parent-post {
      padding: 10px 12px;
      padding-bottom: 18px;
      margin-bottom: 0;
      border-radius: 0;
    }
  
    .parent-post:first-child {
      border-radius: 8px 8px 0 0;
    }
  
    .parent-post:last-child {
      border-radius: 0 0 8px 8px;
      margin-bottom: 0;
    }
  
    .parent-post-avatar {
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }
  
    .parent-avatar-placeholder {
      font-size: 14px;
    }
  
    .parent-post-author {
      font-size: 14px;
    }
  
    .parent-post-meta {
      font-size: 12px;
    }
  
    .parent-post-text {
      font-size: 14px;
    }
  
    .parent-post-media-image {
      max-height: 260px;
    }
  
    .parent-post-media-video video,
    .parent-post-media-video {
      max-height: 220px;
    }
  
    .parent-post-media-vocal {
      padding: 10px 12px;
    }
  
    .parent-post-media-vocal .parent-post-vocal-btn {
      width: 40px;
      height: 40px;
    }
  
    .parent-post-media-vocal .parent-post-vocal-btn ion-icon {
      font-size: 22px;
    }
  
    .parent-post-action-btn {
      font-size: 13px;
      padding: 6px 2px;
      gap: 4px;
    }
  
    .parent-post-action-btn ion-icon {
      font-size: 16px;
    }
  
    .teacher-stats-section {
      gap: 8px;
      padding: 12px;
    }
  
    .teacher-stat-card {
      padding: 12px;
      gap: 10px;
    }
  
    .teacher-stat-icon {
      width: 40px;
      height: 40px;
    }
  
    .teacher-stat-icon ion-icon {
      font-size: 20px;
    }
  
    .teacher-stat-value {
      font-size: 18px;
    }
  
    .teacher-stat-label {
      font-size: 11px;
    }
  
    .section-title {
      font-size: 16px;
    }
  
    .section-link {
      font-size: 13px;
    }
  }
  
  /* ============================================
     Modal de bienvenue
     ============================================ */
  .welcome-modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12000;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
  }
  
  .welcome-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .welcome-modal-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 12001;
  }
  
  .welcome-modal-dialog {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 12002;
    display: flex;
    justify-content: center;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .welcome-modal.show .welcome-modal-dialog {
    transform: translateY(0);
  }
  
  .welcome-modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    min-height: 350px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: var(--spacing-md);
  }
  
  .welcome-modal-handle {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 0 auto 20px;
    flex-shrink: 0;
  }
  
  .welcome-modal-body {
    padding: 0 var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
    align-items: center;
    text-align: center;
    flex: 1;
    justify-content: center;
  }
  
  .welcome-modal-title {
    font-size: var(--spacing-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.3;
    text-align: center;
  }
  
  .welcome-modal-text {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xl) 0;
    line-height: 1.6;
    text-align: center;
    max-width: 90%;
  }
  
  .welcome-modal-btn {
    width: 100%;
    padding: 14px var(--spacing-xl);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: 3px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-fast);
    margin-top: var(--spacing-lg);
  }
  
  .welcome-modal-btn:hover {
    background-color: var(--color-primary-hover);
  }
  
  .welcome-modal-btn:active {
    transform: scale(0.98);
    background-color: var(--color-primary-active);
  }
  
  /* Responsive pour mobile */
  @media screen and (max-width: 480px) {
    .welcome-modal-content {
      border-radius: 8px 8px 0 0;
      padding-top: 10px;
      max-height: 65vh;
      min-height: 300px;
    }
  
    .welcome-modal-handle {
      width: 36px;
      height: 3px;
      margin-bottom: 18px;
    }
  
    .welcome-modal-body {
      padding: 0 20px 28px 20px;
      gap: 24px;
      text-align: center;
      align-items: center;
    }
  
    .welcome-modal-title {
      font-size: 22px;
      text-align: center;
      margin-bottom: 16px;
    }
  
    .welcome-modal-text {
      font-size: 15px;
      text-align: center;
      max-width: 90%;
      margin-bottom: 20px;
    }
  
    .welcome-modal-btn {
      padding: 12px 20px;
      font-size: 15px;
      margin-top: 16px;
    }
  }
  
  /* ============================================
     Classes utilitaires communes pour modals
     ============================================ */
  .modal-base {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12000;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
  }
  
  .modal-base.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .modal-backdrop-base {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 12001;
  }
  
  /* ============================================
     Modal de confirmation d'abonnement
     ============================================ */
  .subscription-modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12000;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
  }
  
  .subscription-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .subscription-modal-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 12001;
  }
  
  .subscription-modal-content {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 12002;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border-radius: 8px 8px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  
  .subscription-modal.show .subscription-modal-content {
    transform: translateY(0);
  }
  
  .subscription-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    color: #000000;
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 8px 8px 0 0;
  }
  
  .subscription-modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: #000000;
    margin: 0;
    flex: 1;
  }

  .subscription-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color var(--transition-base);
    flex-shrink: 0;
  }
  
  .subscription-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .subscription-modal-close ion-icon {
    font-size: var(--font-size-xl);
    color: #000000;
  }
  
  /* ============================================
     Modal légale (Politique / Conditions) - pleine page
     ============================================ */
  .legal-modal {
    position: fixed;
    inset: 0;
    z-index: 13000;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  
  .legal-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .legal-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 13001;
  }
  
  .legal-modal-content {
    position: fixed;
    inset: 0;
    z-index: 13002;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    width: 100%;
    height: 100%;
    max-height: 100vh;
  }
  
  .legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: var(--color-bg-primary);
  }
  
  .legal-modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    flex: 1;
  }
  
  .legal-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s ease;
  }
  
  .legal-modal-close:hover {
    background-color: var(--color-bg-hover);
  }
  
  .legal-modal-close ion-icon {
    font-size: 24px;
  }
  
  .legal-modal-iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
  }
  
  /* Modal Installer PWA - affichée en bas (Choix_role) */
  .install-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .install-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  .install-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 12001;
  }
  .install-modal-content {
    position: fixed;
    left: var(--spacing-md, 16px);
    right: var(--spacing-md, 16px);
    bottom: var(--spacing-md, 16px);
    z-index: 12002;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 12px;
    padding-right: 44px;
    min-height: 56px;
    max-height: 72px;
    background: var(--color-bg-primary);
    border-radius: 12px;
    flex-wrap: nowrap;
  }
  .install-modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }
  .install-modal-close:hover {
    background-color: var(--color-bg-hover);
  }
  .install-modal-close ion-icon {
    font-size: 18px;
  }
  .install-modal-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .install-modal-icon {
    flex-shrink: 0;
    line-height: 0;
  }
  .install-modal-icon img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
  }
  .install-modal-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    line-height: 1.25;
  }
  .install-modal-text strong {
    font-size: 0.9375rem;
    color: var(--color-text-primary);
  }
  .install-modal-text span {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
  }
  .install-modal-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-primary, #002FBD);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }
  .install-modal-btn:hover {
    opacity: 0.95;
    background: var(--color-primary-hover, #00208a);
  }
  
  /* Liens Politique / Conditions sous les boutons (page Choix rôle) */
  .legal-links-row {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--spacing-xl) 0 0 0;
    padding: 0 var(--spacing-md);
  }
  
  .link-legal-modal {
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .link-legal-modal:hover {
    text-decoration: underline;
  }
  
  .legal-links-sep {
    margin: 0 4px;
    color: var(--color-text-secondary);
  }
  
  .subscription-details {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .subscription-main-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }
  
  .subscription-name-section {
    flex: 1;
  }
  
  .subscription-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
  }
  
  .subscription-validity {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
  }
  
  .subscription-amount-section {
    flex-shrink: 0;
  }
  
  .subscription-amount {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }
  
  .subscription-classes-details {
    display: flex;
    flex-direction: column;
  }
  .subscription-class-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .subscription-class-item .subscription-class-label {
    font-weight: 600;
    color: var(--color-text-primary);
    order: 1;
  }
  .subscription-class-item .subscription-class-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: #002FBD;
    cursor: pointer;
    order: 2;
  }
  
  .subscription-pricing {
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .subscription-pricing-label {
    font-size: var(--spacing-lg);
    font-weight: 600;
    color: var(--color-text-primary);
  }
  
  .subscription-price {
    font-size: var(--spacing-xl);
    font-weight: 700;
    color: var(--color-text-primary);
  }
  
  .subscription-assistant-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .subscription-assistant-row .subscription-class-label {
    order: 1;
    margin-right: auto;
  }
  
  .subscription-assistant-row .subscription-assistant-right {
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  
  .subscription-price-fixed {
    font-size: var(--spacing-lg);
    font-weight: 700;
    color: var(--color-text-primary);
  }
  
  .subscription-actions {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex-shrink: 0;
  }
  
  .subscription-btn-primary,
  .subscription-btn-secondary {
    width: 100%;
    padding: 14px var(--spacing-xl);
    border-radius: 3px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
  }
  
  .subscription-btn-primary {
    border: none;
  }
  
  .subscription-btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
  }
  
  .subscription-btn-primary:hover {
    background-color: var(--color-primary-hover);
  }
  
  .subscription-btn-primary:active {
    background-color: var(--color-primary-active);
    transform: scale(0.98);
  }
  
  .subscription-btn-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }
  
  .subscription-btn-secondary:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  
  .subscription-btn-secondary:active {
    background-color: var(--color-bg-active);
    transform: scale(0.98);
  }
  
  /* Responsive pour mobile */
  @media screen and (max-width: 480px) {
    .subscription-modal-content {
      border-radius: 8px 8px 0 0;
      max-height: 85vh;
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
    }
  
    .subscription-modal-header {
      padding: 18px 20px;
    }
  
    .subscription-modal-title {
      font-size: 18px;
    }
  
    .subscription-modal-close {
      width: 36px;
      height: 36px;
    }
  
    .subscription-modal-close ion-icon {
      font-size: 22px;
    }
  
    .subscription-details {
      padding: 20px;
      gap: 16px;
    }
  
    .subscription-name {
      font-size: 16px;
    }
  
    .subscription-validity {
      font-size: 13px;
    }
  
    .subscription-price {
      font-size: 22px;
    }
  
    .subscription-actions {
      padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0)) 20px;
    }
  
    .subscription-btn-primary,
    .subscription-btn-secondary {
      padding: 12px 20px;
      font-size: 15px;
    }
  }
  
  @media screen and (max-width: 360px) {
    .subscription-modal-header {
      padding: 14px 16px;
    }
    .subscription-details {
      padding: 16px;
    }
    .subscription-actions {
      padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0)) 16px;
    }
    .subscription-btn-primary,
    .subscription-btn-secondary {
      padding: 10px 16px;
      font-size: 14px;
    }
  }
  
  /* ============================================
     Page Chat - Interface unidirectionnelle (Enseignant → Parents)
     Style inspiré de WhatsApp
     ============================================ */
  
  .chat-page {
    display: flex;
    flex-direction: column;
    align-items: end;
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
  }
  
  .chat-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/chat-background.png");
    background-size: cover;
    background-position: top left;
    background-repeat: repeat;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
  }
  
  .chat-page > * {
    position: relative;
    z-index: 1;
  }
  /* Plein écran image/vidéo : au-dessus de tout (header + zone de saisie) */
  .chat-page .media-fullscreen-overlay {
    z-index: 2147483647;
    position: fixed;
  }
  
  /* Header du chat */
  .chat-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
  }
  
  .chat-header-content {
    background-color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    box-sizing: border-box;
  }
  
  .chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #54656f;
    text-decoration: none;
    transition: background-color 0.2s;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  
  .chat-back-btn:hover {
    background-color: #f0f2f5;
  }
  
  .chat-back-btn ion-icon {
    font-size: 24px;
  }
  
  .chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  
  .chat-header-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  
  .chat-header-avatar .avatar-placeholder {
    font-size: 14px;
  }
  
  .chat-header-text {
    flex: 1;
    min-width: 0;
  }
  
  .chat-header-title {
    font-size: 16px;
    font-weight: 500;
    color: #111b21;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .chat-header-subtitle {
    font-size: 13px;
    color: #667781;
    margin: 2px 0 0 0;
  }
  
  .chat-header-menu-btn {
    background: none;
    border: none;
    color: #54656f;
    font-size: 22px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }
  
  .chat-header-menu-btn:hover {
    background-color: #f0f2f5;
  }
  
  /* Zone de messages */
  .chat-messages-container {
    flex: 1;
    min-height: 0; /* permet au flex de rétrécir et au scroll de fonctionner */
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .chat-message-item {
    display: flex;
    width: 100%;
    animation: fadeIn 0.3s ease;
    margin-bottom: 1px;
    box-sizing: border-box;
  }
  
  .chat-message-item.sent {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 8px;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .chat-message-bubble {
    max-width: 65%;
    min-width: 60px;
    padding: 6px 7px 8px 9px;
    border-radius: 3px;
    position: relative;
    word-wrap: break-word;
    box-sizing: border-box;
  }
  
  /* Bulles avec image/vidéo : plus larges pour un bon affichage */
  .chat-message-bubble:has(.chat-message-media) {
    max-width: 92%;
  }
  
  .chat-message-bubble.sent {
    background-color: #002FBD;
    margin-left: auto;
    border-bottom-right-radius: 0;
    position: relative;
  }
  
  
  .chat-message-text {
    font-size: 14.2px;
    line-height: 19px;
    color: #ffffff;
    margin: 0;
    word-break: break-word;
    padding: 0;
    white-space: pre-wrap;
  }
  
  .chat-message-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
    margin-left: 8px;
    float: right;
    clear: both;
  }
  
  .chat-message-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80);
    white-space: nowrap;
    line-height: 1;
  }
  
  .chat-message-status {
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
    margin-left: 2px;
    line-height: 1;
  }
  
  /* Médias dans les bulles du chat (image, vidéo, vocal) */
  .chat-message-media {
    margin-top: 8px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.15);
  }
  .chat-message-media-image,
  .chat-message-media.chat-message-media-video {
    cursor: pointer;
  }
  .chat-message-media-image {
    display: block;
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    min-height: 80px;
    object-fit: cover;
    vertical-align: top;
    border-radius: 6px;
  }
  .chat-message-media-video {
    position: relative;
    width: 100%;
    max-width: 280px;
    min-height: 160px;
    background: #1a1a1a;
    max-height: 200px;
  }
  .chat-message-media-video video {
    width: 100%;
    height: auto;
    min-height: 160px;
    max-height: 200px;
    object-fit: contain;
    display: block;
    vertical-align: top;
  }
  /* Overlay poster : semi-transparent pour laisser voir l’image de la vidéo */
  .chat-message-media-video .chat-message-video-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    background-size: cover;
    background-position: center;
    color: #fff;
    cursor: pointer;
  }
  .chat-message-media-video .chat-message-video-poster ion-icon {
    font-size: 48px;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
  .chat-message-media-video video[poster] {
    position: relative;
    z-index: 1;
  }
  .chat-message-media.chat-message-media-audio {
    max-width: 280px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
  }
  .chat-message-media-audio audio {
    display: block;
    width: 100%;
    min-width: 200px;
    max-width: 260px;
    vertical-align: top;
  }
  .chat-message-media-vocal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
  }
  .chat-message-media-vocal .chat-message-vocal-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #002FBD;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }
  .chat-message-media-vocal .chat-message-vocal-btn ion-icon {
    font-size: 22px;
  }
  .chat-message-media-vocal .chat-message-vocal-info {
    flex: 1;
    min-width: 0;
  }
  .chat-message-media-vocal .chat-message-vocal-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px 0;
  }
  .chat-message-media-vocal .chat-message-vocal-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }
  
  /* Zone de saisie */
  .chat-input-container {
    flex-shrink: 0;
    background-color: #f0f2f5;
    border-top: 1px solid #d4d4d4;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
  }
  
  .chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #ffffff;
    border-radius: 3px;
    padding: 5px 2px 5px 8px;
    min-height: 42px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .chat-attach-btn {
    background: none;
    border: none;
    color: #54656f;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  
  .chat-attach-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .chat-camera-btn {
    background: none;
    border: none;
    color: #54656f;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  
  .chat-camera-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .chat-hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  .chat-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 15px;
    color: #111b21;
    padding: 9px 8px 9px 4px;
    font-family: var(--font-family);
    resize: none;
    max-height: 100px;
    line-height: 20px;
    min-height: 20px;
    box-sizing: border-box;
  }
  
  .chat-input::placeholder {
    color: #999999;
  }
  
  .chat-send-btn {
    background-color: #002FBD;
    border: none;
    color: white;
    font-size: 20px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-right: 2px;
  }
  
  .chat-send-btn:hover {
    background-color: #20ba5a;
    transform: scale(1.05);
  }
  
  .chat-send-btn:active {
    transform: scale(0.95);
  }
  
  .chat-send-btn:disabled {
    background-color: #cbd5e0;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Modal date de devoir maison (page chat) */
  .chat-devoir-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  
  .chat-devoir-modal.show {
    opacity: 1;
    visibility: visible;
  }
  
  .chat-devoir-modal.show .chat-devoir-modal-content {
    transform: translateY(0);
  }
  
  .chat-devoir-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .chat-devoir-modal-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  
  .chat-devoir-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e4e6eb;
  }
  
  .chat-devoir-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111b21;
  }
  
  .chat-devoir-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #54656f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
  }
  
  .chat-devoir-modal-close:hover {
    background: #f0f2f5;
  }
  
  .chat-devoir-modal-body {
    padding: 20px 16px;
  }
  
  .chat-devoir-modal-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #111b21;
    margin-bottom: 10px;
  }
  
  .chat-devoir-date-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    color: #111b21;
    background: #fff;
    box-sizing: border-box;
  }
  
  .chat-devoir-date-input:focus {
    outline: none;
    border-color: #002FBD;
  }
  
  .chat-devoir-modal-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid #e4e6eb;
  }
  
  .chat-devoir-btn-cancel {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #54656f;
    background: #f0f2f5;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .chat-devoir-btn-cancel:hover {
    background: #e4e6eb;
  }
  
  .chat-devoir-btn-send {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #002FBD;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .chat-devoir-btn-send:hover {
    background: #0024a0;
  }
  
  .chat-message-devoir-date {
    display: block;
    font-size: 12px;
    color: #fff;
    opacity: 0.95;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.3);
  }
  
  /* Responsive pour la page chat */
  @media (max-width: 480px) {
  
    .chat-header-avatar {
      width: 36px;
      height: 36px;
    }
  
    .chat-header-title {
      font-size: 15px;
    }
  
    .chat-header-subtitle {
      font-size: 12px;
    }
  
    .chat-messages-container {
      padding: 8px 4px 8px 12px;
      gap: 1px;
    }
  
    .chat-message-item.sent {
      padding-right: 4px;
    }
  
    .chat-message-bubble {
      max-width: 80%;
      padding: 6px 7px 8px 9px;
    }
    .chat-message-bubble:has(.chat-message-media) {
      max-width: 94%;
    }
    .chat-message-media-image {
      max-width: 100%;
      max-height: 200px;
    }
    .chat-message-media-video {
      max-width: 100%;
      min-height: 140px;
    }
    .chat-message-media-video video {
      min-height: 140px;
      max-height: 180px;
    }
    .chat-message-text {
      font-size: 14px;
    }
    .chat-input-container {
      padding: 6px 10px;
      padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
  
    .chat-input-wrapper {
      padding: 6px 10px;
    }
  
    .chat-send-btn {
      width: 32px;
      height: 32px;
      font-size: 18px;
    }
  }
  
  /* ============================================
     Page Abonnement - Liste des abonnements
     ============================================ */
  
  /* Bouton retour dans le header */
  .subscription-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    color: #050505;
    text-decoration: none;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  
  .subscription-back-btn ion-icon {
    font-size: 24px;
  }
  
  .subscription-back-btn:hover {
    background-color: #f0f2f5;
  }
  
  .subscription-back-btn:active {
    background-color: #e4e6eb;
  }
  
  /* Container de la liste */
  .subscription-list-container {
    padding: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .subscription-main #subscriptionListSection {
    margin-top: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .subscription-main #subscriptionListSection .listview {
    margin: 0;
  }

  /* Groupes par école */
  .subscription-by-school {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .subscription-school-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }
  /* En-tête école (structure teacher-ecole-header) */
  .subscription-school-group:first-child .teacher-ecole-header {
    margin-top: 0;
  }
  
  @media (min-width: 768px) {
    .subscription-list-container {
      max-width: 700px;
      margin: 0 auto;
      padding: 0;
      gap: 20px;
    }
    .subscription-page-title {
      max-width: var(--content-max-width, 700px);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--page-padding-h);
      padding-right: var(--page-padding-h);
    }
  }
  
  /* Liste des classes abonnées (même style que listview simple-listview) */
  .subscription-main .subscription-list-container .listview,
  .subscription-main .subscription-list-container .listview.simple-listview {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #E1E1E1;
    color: #141515;
  }
  .subscription-main .subscription-list-container .listview > li,
  .subscription-main .subscription-list-container .listview.simple-listview > li {
    padding: 8px 16px;
    min-height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
  }
  .subscription-main .subscription-list-container .listview > li:after,
  .subscription-main .subscription-list-container .listview.simple-listview > li:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #E1E1E1;
  }
  .subscription-main .subscription-list-container .listview > li:last-child:after,
  .subscription-main .subscription-list-container .listview.simple-listview > li:last-child:after {
    display: none;
  }
  .subscription-main .subscription-list-container .subscription-list-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .subscription-main .subscription-list-container .subscription-list-item-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
  }
  .subscription-main .subscription-list-container .subscription-list-item-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .subscription-main .subscription-list-container .subscription-list-item-content {
    flex: 1;
    min-width: 0;
  }

  .subscription-item-menu-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .subscription-main .subscription-item-menu-btn {
    padding: 8px;
    color: var(--color-primary, #002FBD);
  }

  .subscription-main .subscription-item-menu-btn ion-icon {
    color: var(--color-primary, #002FBD);
  }

  .subscription-item-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid #e4e6eb;
    z-index: 50;
    display: none;
    padding: 4px 0;
  }

  .subscription-item-dropdown.is-open {
    display: block;
  }

  .subscription-item-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
  }

  .subscription-item-dropdown-option:hover,
  .subscription-item-dropdown-option:active {
    background: #f0f2f5;
  }

  .subscription-unsubscribe-btn {
    color: #c62828;
  }

  .subscription-unsubscribe-btn ion-icon {
    color: #c62828;
    font-size: 20px;
  }
  
  /* Carte d'abonnement */
  .subscription-card {
    background-color: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e4e6eb;
    animation: fadeInUp 0.4s ease-out;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .subscription-card:hover {
    transform: translateY(-2px);
  }
  
  .subscription-card:active {
    transform: translateY(0);
  }
  
  /* En-tête de la carte */
  .subscription-card-header {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #e4e6eb;
    gap: 14px;
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  }
  
  .subscription-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  
  .subscription-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 50%, #0052ff 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  .subscription-card-info {
    flex: 1;
    min-width: 0;
  }
  
  .subscription-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #050505;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
  }
  
  .subscription-card-location {
    font-size: 14px;
    color: #65676b;
    margin: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .subscription-card-location::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #65676b;
    margin-right: 2px;
  }
  
  .subscription-card-menu {
    background: none;
    border: none;
    color: #65676b;
    font-size: 20px;
    padding: 4px;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }
  
  .subscription-card-menu:hover {
    background-color: #f0f2f5;
  }
  
  /* Corps de la carte */
  .subscription-card-body {
    padding: 20px;
    background-color: #ffffff;
  }
  
  .subscription-classes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .subscription-class-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  
  .subscription-class-item:hover {
    background: linear-gradient(to right, #f0f2f5 0%, #f8f9fa 100%);
    border-color: #d0d3d8;
    transform: translateX(2px);
  }
  
  .subscription-class-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
  }
  
  .subscription-class-icon {
    font-size: 22px;
    color: #002FBD;
    flex-shrink: 0;
    background: linear-gradient(135deg, #002FBD 0%, #0040e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .subscription-class-name {
    font-size: 15px;
    font-weight: 600;
    color: #050505;
    letter-spacing: -0.1px;
  }
  
  .subscription-class-status {
    flex-shrink: 0;
  }
  
  .subscription-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  
  .subscription-status-badge.active {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #b8dcc2;
  }
  
  /* Pied de la carte */
  .subscription-card-footer {
    padding: 14px 20px;
    border-top: 1px solid #e4e6eb;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
  }
  
  .subscription-card-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  
  .subscription-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #65676b;
  }
  
  .subscription-stat ion-icon {
    font-size: 18px;
    color: #002FBD;
    opacity: 0.7;
  }
  
  .subscription-date {
    font-size: 13px;
    font-weight: 600;
    color: #050505;
    padding: 4px 10px;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid #e4e6eb;
  }
  
  /* État vide */
  .subscription-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 80px;
    text-align: center;
    min-height: 360px;
    animation: fadeIn 0.5s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  
  }
  
  .empty-state-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8ecf7 0%, #dde3f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: none;
  }

  .empty-state-icon ion-icon {
    font-size: 44px;
    color: var(--color-primary, #002FBD);
    opacity: 0.85;
  }

  .empty-state-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #050505);
    margin: 0 0 8px 0;
    letter-spacing: -0.2px;
  }

  .empty-state-text {
    font-size: 15px;
    color: var(--color-text-secondary, #65676b);
    margin: 0 0 24px 0;
    max-width: 300px;
    line-height: 1.5;
  }

  .empty-state-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-primary, #002FBD);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 47, 189, 0.25);
  }
  
  .empty-state-btn:hover {
    background: var(--color-primary-hover, #0024a0);
    transform: translateY(-1px);
  }

  .empty-state-btn:active {
    transform: translateY(0);
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .subscription-back-btn {
      width: 36px;
      height: 36px;
      margin-right: 8px;
    }
  
    .subscription-back-btn ion-icon {
      font-size: 22px;
    }
  
    .subscription-page-title {
      padding: var(--page-padding-v) var(--page-padding-h) var(--spacing-sm);
      font-size: var(--title-font-size-sm);
    }

    .subscription-list-container {
      padding: 0;
      gap: 12px;
    }

    .subscription-main .subscription-list-container .listview > li,
    .subscription-main .subscription-list-container .listview.simple-listview > li {
      padding: 8px 16px;
      min-height: 50px;
    }

    .subscription-card {
      border-radius: 3px;
    }
  
    .subscription-card-header {
      padding: 16px;
      gap: 12px;
    }
  
    .subscription-avatar {
      width: 48px;
      height: 48px;
    }
  
    .subscription-avatar-placeholder {
      font-size: 18px;
    }
  
    .subscription-card-title {
      font-size: 16px;
    }
  
    .subscription-card-location {
      font-size: 13px;
    }
  
    .subscription-card-body {
      padding: 16px;
    }
  
    .subscription-class-item {
      padding-top: 12px;
      padding-bottom: 12px;
    }
  
    .subscription-class-icon {
      font-size: 20px;
    }
  
    .subscription-class-name {
      font-size: 14px;
    }
  
    .subscription-card-footer {
      padding: 12px 16px;
    }
  
    .subscription-empty-state {
      padding: 32px 16px 60px;
      min-height: 320px;
    }

    .empty-state-icon {
      width: 76px;
      height: 76px;
      margin-bottom: 20px;
    }

    .empty-state-icon ion-icon {
      font-size: 38px;
    }

    .empty-state-title {
      font-size: 18px;
    }

    .empty-state-text {
      font-size: 14px;
      max-width: 280px;
      margin-bottom: 20px;
    }

    .empty-state-btn {
      padding: 11px 20px;
      font-size: 14px;
    }
  }
  
  /* ============================================
     Page Assistant IA - Interface ChatGPT
     ============================================ */
  
  /* Page principale — fond type ChatGPT */
  .ai-chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    background-color: #f7f7f8;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0);
  }

  /* Header */
  .ai-chat-header {
    background-color: #f7f7f8;
    border-bottom: 1px solid #ececf1;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
  }

  .ai-chat-page .subscription-section {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  .ai-chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    color: #050505;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  
  .ai-chat-back-btn ion-icon {
    font-size: 24px;
  }
  
  .ai-chat-back-btn:hover {
    background-color: #f0f2f5;
  }
  
  .ai-chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .ai-icon {
    font-size: 24px;
    color: #002FBD;
  }
  
  .ai-chat-title {
    font-size: var(--title-font-size);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
  }
  
  /* Wrapper chat (flex pour que zone saisie reste en bas) */
  .ai-chat-page .ai-chat-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Assistant IA — onglets Chat / Résumé / Image / Audio */
  .ai-studio-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 10px;
    background: #f7f7f8;
    border-bottom: 1px solid #ececf1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }

  .ai-studio-tab {
    flex: 1;
    min-width: 72px;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    background: #f0f2f5;
    color: #41525d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .ai-studio-tab.is-active {
    background: var(--color-primary, #002fbd);
    color: #ffffff;
  }

  .ai-studio-tabs .i18n-ar {
    display: none;
  }

  .ai-studio-tabs .i18n-fr {
    display: inline;
    margin-bottom: 0;
  }

  .ai-chat-toolbar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 12px 8px;
    background: #f7f7f8;
    border-bottom: 1px solid #ececf1;
  }

  .ai-chat-new-conv-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #0d0d0d;
    background: transparent;
    border: 1px solid #d9d9e3;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .ai-chat-new-conv-btn:hover {
    background: #ececf1;
  }

  .ai-chat-new-conv-btn:active {
    opacity: 0.92;
  }

  .ai-chat-new-conv-btn .i18n-ar {
    display: none;
  }

  .ai-chat-new-conv-btn .i18n-fr {
    margin-bottom: 0;
  }

  .ai-studio-panels {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .ai-studio-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .ai-studio-panel.is-visible {
    display: flex;
  }

  .ai-studio-panel[data-panel="summary"],
  .ai-studio-panel[data-panel="image"],
  .ai-studio-panel[data-panel="audio"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f0f2f5;
  }

  .ai-studio-card {
    margin: 12px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    box-sizing: border-box;
  }

  .ai-studio-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #050505;
    margin-bottom: 8px;
  }

  .ai-studio-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    background: #fff;
    color: #050505;
  }

  .ai-studio-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  .ai-studio-select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e4e6eb;
    font-size: 14px;
    background: #fff;
  }

  .ai-studio-primary {
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    background: var(--color-primary, #002fbd);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .ai-studio-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .ai-studio-secondary {
    padding: 12px 18px;
    border: 1px solid var(--color-primary, #002fbd);
    border-radius: 10px;
    background: #fff;
    color: var(--color-primary, #002fbd);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .ai-studio-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .ai-studio-error {
    margin-top: 10px;
    font-size: 14px;
    color: #c62828;
    line-height: 1.4;
  }

  .ai-studio-result {
    margin-top: 12px;
    padding: 14px;
    background: #f7f9fc;
    border-radius: 10px;
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.5;
    color: #050505;
  }

  .ai-studio-image-wrap {
    margin-top: 12px;
  }

  .ai-studio-image-out {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
  }

  .ai-studio-pre {
    margin-top: 10px;
    padding: 12px;
    background: #f7f9fc;
    border-radius: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.45;
    color: #050505;
  }

  .ai-studio-subtitle {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #050505;
  }

  .ai-studio-help {
    font-size: 13px;
    color: #65676b;
    margin: 0 0 10px;
  }

  .ai-studio-file {
    display: block;
    margin: 8px 0 12px;
    font-size: 14px;
  }

  .ai-studio-audio {
    width: 100%;
    margin-top: 12px;
  }

  /* Container de messages — style proche ChatGPT (bandes, centre ~768px) */
  .ai-chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 100px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    background-color: #f7f7f8;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Message de bienvenue — écran d’accueil type ChatGPT */
  .ai-welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: min(12vh, 80px) 20px 48px;
    max-width: 48rem;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .ai-welcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e3e3e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .ai-welcome-icon ion-icon {
    font-size: 28px;
    color: #002fbd;
  }

  .ai-welcome-title {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 600;
    color: #0d0d0d;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
  }

  .ai-welcome-text {
    font-size: 15px;
    color: #6e6e80;
    margin: 0;
    line-height: 1.65;
    max-width: 36rem;
  }

  /* Lignes de messages pleine largeur (colonne centrée ~48rem, type ChatGPT) */
  .ai-message {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 20px max(16px, calc((100% - 48rem) / 2));
    animation: fadeInMessage 0.25s ease-out;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ececf1;
  }

  @keyframes fadeInMessage {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .ai-message.assistant {
    background-color: #f7f7f8;
  }

  /* Ordre DOM : avatar puis contenu — justify-end groupe [bulle][avatar] à droite */
  .ai-message.user {
    background-color: #ffffff;
    justify-content: flex-end;
    gap: 12px;
  }

  .ai-message-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
  }

  .ai-message.user .ai-message-avatar {
    background: #19c37d;
    color: #fff;
    border-radius: 2px;
    font-size: 9px;
    line-height: 1.05;
    text-align: center;
    padding: 2px;
    overflow: hidden;
  }

  .ai-message.assistant .ai-message-avatar {
    background-color: #fff;
    border: 1px solid #e3e3e8;
    color: #0d0d0d;
  }

  .ai-message.assistant .ai-message-avatar ion-icon {
    font-size: 16px;
    color: #002fbd;
  }

  .ai-message-content {
    flex: 1;
    min-width: 0;
  }

  .ai-message.assistant .ai-message-content {
    max-width: calc(48rem - 46px);
  }

  .ai-message.user .ai-message-content {
    flex: 0 1 auto;
    max-width: min(85%, 36rem);
  }

  .ai-message-bubble {
    padding: 0;
    border-radius: 0;
    word-wrap: break-word;
    line-height: 1.75;
    position: relative;
  }

  .ai-message.user .ai-message-bubble {
    background: #f4f4f4;
    color: #0d0d0d;
    border-radius: 1.25rem;
    padding: 10px 16px;
    box-sizing: border-box;
  }

  .ai-message.assistant .ai-message-bubble {
    background: transparent;
    color: #0d0d0d;
    padding: 2px 0 0;
  }

  .ai-message-text {
    font-size: 16px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .ai-message-time {
    font-size: 11px;
    color: #8e8ea0;
    margin-top: 8px;
    padding: 0;
    opacity: 1;
  }

  .ai-message.user .ai-message-time {
    text-align: right;
    color: #8e8ea0;
  }
  
  /* Zone de saisie — compositeur type ChatGPT */
  .ai-chat-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    background-color: #ffffff;
    border-top: 1px solid #ececf1;
    padding: 14px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 100;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  
  /* Au-dessus du appBottomMenu sur la page Assistant IA */
  .ai-chat-page .ai-chat-input-container {
    bottom: calc(
      var(--app-bottom-menu-height) + var(--app-bottom-menu-padding-top) +
        env(safe-area-inset-bottom, 0px)
    );
  }
  
  .ai-chat-page .ai-chat-messages-container {
    padding-bottom: calc(
      92px + var(--app-bottom-menu-height) + var(--app-bottom-menu-padding-top) +
        env(safe-area-inset-bottom, 0px)
    );
  }
  
  .ai-chat-form {
    max-width: 48rem;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Zone de prévisualisation des fichiers */
  .ai-chat-files-preview {
    padding: 8px 16px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
  }
  
  .ai-chat-file-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f0f2f5;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 13px;
    color: #050505;
    max-width: 200px;
  }
  
  .ai-chat-file-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
  }
  
  .ai-chat-file-item-info {
    flex: 1;
    min-width: 0;
  }
  
  .ai-chat-file-item-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  
  .ai-chat-file-item-size {
    font-size: 11px;
    color: #65676b;
  }
  
  .ai-chat-file-item-remove {
    background: none;
    border: none;
    color: #65676b;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  
  .ai-chat-file-item-remove:hover {
    background-color: #e4e6eb;
    color: #050505;
  }
  
  .ai-chat-file-item-remove ion-icon {
    font-size: 14px;
  }
  
  .ai-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 10px 14px;
    border: 1px solid #d9d9e3;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .ai-chat-input-wrapper:focus-within {
    border-color: #b4b4c0;
    box-shadow: 0 0 0 1px rgba(0, 47, 189, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  
  .ai-chat-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 15px;
    color: #050505;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.5;
    padding: 4px 0;
    min-height: 20px;
    unicode-bidi: plaintext;
  }
  
  .ai-chat-input::placeholder {
    color: #65676b;
    opacity: 1;
    line-height: 1.45;
  }
  
  .ai-chat-input:focus {
    outline: none;
  }
  
  /* Bouton d'upload de fichier */
  .ai-chat-file-input {
    display: none;
  }
  
  .ai-chat-file-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    color: #65676b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }
  
  .ai-chat-file-btn:hover {
    background-color: #e4e6eb;
    color: #050505;
  }
  
  .ai-chat-file-btn:active {
    transform: scale(0.95);
  }
  
  .ai-chat-file-btn ion-icon {
    font-size: 20px;
  }
  
  .ai-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary, #002fbd);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
  }

  .ai-chat-send-btn:hover {
    background: #001f8f;
    transform: scale(1.04);
  }
  
  .ai-chat-send-btn:active {
    transform: scale(0.95);
  }
  
  .ai-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  
  .ai-chat-send-btn ion-icon {
    font-size: 20px;
  }
  
  /* Indicateur de frappe */
  .ai-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0 8px;
    align-items: center;
  }

  .ai-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #8e8ea0;
    animation: typingDot 1.4s infinite;
  }
  
  .ai-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .ai-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes typingDot {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.7;
    }
    30% {
      transform: translateY(-10px);
      opacity: 1;
    }
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .ai-chat-messages-container {
      padding: 0 0 90px;
      padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .ai-welcome-message {
      padding: 32px 16px;
    }

    .ai-welcome-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 16px;
    }

    .ai-welcome-icon ion-icon {
      font-size: 28px;
    }

    .ai-welcome-title {
      font-size: 18px;
    }

    .ai-welcome-text {
      font-size: 14px;
    }

    .ai-message {
      padding: 16px 12px;
      padding-left: max(12px, calc((100% - 48rem) / 2));
      padding-right: max(12px, calc((100% - 48rem) / 2));
    }

    .ai-message.user .ai-message-bubble {
      padding: 10px 14px;
    }

    .ai-message-text {
      font-size: 14px;
    }

    .ai-chat-input-container {
      bottom: 0;
      min-height: 68px;
      padding: 12px 12px;
      padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }

    .ai-chat-page .ai-chat-input-container {
      bottom: calc(
        var(--app-bottom-menu-height) + var(--app-bottom-menu-padding-top) +
          env(safe-area-inset-bottom, 0px)
      );
    }

    .ai-chat-page .ai-chat-messages-container {
      padding-bottom: calc(
        92px + var(--app-bottom-menu-height) + var(--app-bottom-menu-padding-top) +
          env(safe-area-inset-bottom, 0px)
      );
    }

    .ai-chat-input {
      font-size: 14px;
    }
  
    .ai-chat-send-btn {
      width: 32px;
      height: 32px;
    }
  
    .ai-chat-send-btn ion-icon {
      font-size: 18px;
    }
  
    .ai-chat-file-btn {
      width: 32px;
      height: 32px;
    }
  
    .ai-chat-file-btn ion-icon {
      font-size: 18px;
    }
  
    .ai-chat-files-preview {
      padding: 6px 12px;
      max-height: 100px;
    }
  
    .ai-chat-file-item {
      max-width: 150px;
      padding: 4px 8px;
    }
  
    .ai-chat-file-item img {
      width: 24px;
      height: 24px;
    }
  
    .ai-chat-file-item-name {
      font-size: 11px;
    }
  
    .ai-chat-file-item-size {
      font-size: 10px;
    }
  }
  
  /* ============================================
     Page Notifications - Design inspiré de Facebook
     ============================================ */
  
  /* Page principale */
  .notification-page {
    background-color: #f0f2f5;
  }
  
  .notification-main-content {
    background-color: #f0f2f5;
    min-height: calc(100vh - 140px);
  }
  
  /* Header */
  .notification-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    color: #050505;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  
  .notification-back-btn ion-icon {
    font-size: 24px;
  }
  
  .notification-back-btn:hover {
    background-color: #e4e6eb;
  }
  
  .notification-page-title {
    font-size: var(--title-font-size);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .notification-page-title .i18n-fr,
  .notification-page-title .i18n-ar {
    display: inline;
    margin-bottom: 0;
  }
  
  /* Container de notifications */
  .notification-list-container {
    padding: var(--spacing-sm) var(--page-padding-h);
    max-width: var(--content-max-width, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  @media (min-width: 768px) {
    .notification-list-container {
      max-width: min(680px, var(--content-max-width, 100%));
      margin: 0 auto;
      padding: var(--spacing-md) var(--page-padding-h);
      gap: var(--spacing-md);
    }
  }
  
  /* Carte de notification style Facebook */
  .notification-card {
    background-color: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #e4e6eb;
    animation: fadeInNotification 0.3s ease-out;
  }
  
  @keyframes fadeInNotification {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .notification-card:hover {
  }
  
  .notification-card.unread {
    background-color: #e7f3ff;
    border-left: 3px solid #1877f2;
  }
  
  /* Contenu de la notification */
  .notification-content {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .notification-content:hover {
    background-color: #f0f2f5;
  }
  
  .notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    background-color: #1877f2;
    color: white;
  }
  
  .notification-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .notification-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e4e6eb;
  }
  
  .notification-icon-wrapper ion-icon {
    font-size: 20px;
    color: #1877f2;
  }
  
  .notification-info {
    flex: 1;
    min-width: 0;
  }
  
  .notification-text {
    font-size: 15px;
    color: #050505;
    margin: 0 0 4px 0;
    line-height: 1.33;
  }
  
  .notification-text strong {
    font-weight: 600;
    color: #050505;
  }
  
  .notification-time {
    font-size: 13px;
    color: #65676b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .notification-time ion-icon {
    font-size: 12px;
  }
  
  .notification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e4e6eb;
  }
  
  .notification-action-btn {
    background: none;
    border: none;
    color: #65676b;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .notification-action-btn:hover {
    background-color: #e4e6eb;
  }
  
  .notification-action-btn.primary {
    background-color: #1877f2;
    color: white;
  }
  
  .notification-action-btn.primary:hover {
    background-color: #166fe5;
  }
  
  .notification-action-btn ion-icon {
    font-size: 16px;
  }
  
  /* Badge de notification non lue */
  .notification-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1877f2;
    flex-shrink: 0;
    margin-left: auto;
  }
  
  /* État vide */
  .notification-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 400px;
  }
  
  .notification-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #e4e6eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }
  
  .notification-empty-icon ion-icon {
    font-size: 40px;
    color: #65676b;
  }
  
  .notification-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #050505;
    margin: 0 0 8px 0;
  }
  
  .notification-empty-text {
    font-size: 15px;
    color: #65676b;
    margin: 0;
    line-height: 1.5;
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .notification-list-container {
      padding: 8px;
      gap: 8px;
    }
  
    .notification-content {
      padding: 10px;
      gap: 10px;
    }
  
    .notification-avatar,
    .notification-icon-wrapper {
      width: 36px;
      height: 36px;
    }
  
    .notification-icon-wrapper ion-icon {
      font-size: 18px;
    }
  
    .notification-text {
      font-size: 14px;
    }
  
    .notification-time {
      font-size: 12px;
    }
  
    .notification-actions {
      flex-wrap: wrap;
    }
  
    .notification-action-btn {
      font-size: 12px;
      padding: 5px 10px;
    }
  
    .notification-empty-state {
      padding: 40px 16px;
      min-height: 300px;
    }
  
    .notification-empty-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 20px;
    }
  
    .notification-empty-icon ion-icon {
      font-size: 32px;
    }
  
    .notification-empty-title {
      font-size: 18px;
    }
  
    .notification-empty-text {
      font-size: 14px;
    }
  }
  
  /* ============================================
     Page Paramètres (style WhatsApp)
     ============================================ */
  .parametres-main {
    background-color: #f0f2f5;
    min-height: calc(100vh - 140px);
    padding-bottom: 80px;
  }
  
  .parametres-page-title {
    font-size: var(--title-font-size);
    font-weight: 700;
    margin: 0;
    color: var(--color-primary, #002fbd);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
  }

  .parametres-page .parametres-page-title .i18n-fr,
  .parametres-page .parametres-page-title .i18n-ar {
    display: inline;
    margin-bottom: 0;
  }

  .parametres-page .parametres-page-title {
    flex: 1;
    min-width: 0;
  }

  /* Libellés FR / AR alignés (gauche / droite) dans chaque ligne */
  .parametres-page .parametres-item-link > span[data-i18n],
  .parametres-page .parametres-logout-btn > span[data-i18n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  .parametres-page .parametres-item-link .i18n-fr,
  .parametres-page .parametres-item-link .i18n-ar,
  .parametres-page .parametres-logout-btn .i18n-fr,
  .parametres-page .parametres-logout-btn .i18n-ar {
    display: inline-block;
    margin-bottom: 0;
    flex: 0 1 auto;
    line-height: 1.35;
  }

  .parametres-page .parametres-item-link .i18n-ar,
  .parametres-page .parametres-logout-btn .i18n-ar {
    text-align: right;
    unicode-bidi: embed;
    margin-left: auto;
    font-weight: 500;
    color: #3a3a3a;
  }

  .parametres-page .parametres-logout-btn .i18n-fr,
  .parametres-page .parametres-logout-btn .i18n-ar {
    color: #d32f2f;
  }
  
  .parametres-list-container {
    padding: var(--spacing-md) var(--page-padding-h);
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .parametres-section {
    margin-bottom: 12px;
  }
  
  .parametres-section .parametres-listview {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e4e6eb;
  }
  
  .parametres-list-item {
    border-bottom: 1px solid #e4e6eb;
  }
  
  .parametres-list-item:last-child {
    border-bottom: none;
  }
  
  .parametres-item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-lg);
    width: 100%;
    background: none;
    border: none;
    color: var(--color-text-primary, #050505);
    font-size: var(--font-size-md);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-base);
  }
  
  .parametres-item-link:hover {
    background-color: #f5f6f8;
  }
  
  .parametres-item-link ion-icon:first-of-type {
    font-size: 22px;
    color: #65676b;
    flex-shrink: 0;
  }
  
  .parametres-item-link span {
    flex: 1;
  }
  
  .parametres-item-arrow {
    font-size: 18px;
    color: #b0b3b8;
  }
  
  .parametres-logout-section .parametres-listview {
    border: none;
  }
  
  .parametres-logout-btn {
    color: #d32f2f !important;
    font-weight: 500;
  }
  
  .parametres-logout-btn ion-icon {
    color: #d32f2f !important;
  }
  
  /* ============================================
     Pages Légales (Conditions & Politique)
     ============================================ */
  
  .legal-page {
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .legal-page .page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 100vh;
  }
  
  .legal-page .main-content {
    flex: 1;
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .legal-content {
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 40px;
    max-width: 800px;
    margin: 0 auto;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .legal-text-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    overflow-x: hidden;
    padding: 20px;
  }
  
  .legal-date {
    font-size: 13px;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
    font-style: italic;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .legal-section {
    margin-bottom: 32px;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .legal-section:last-child {
    margin-bottom: 0;
  }
  
  .legal-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    line-height: 1.4;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .legal-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 20px 0 12px 0;
    line-height: 1.4;
  }
  
  .legal-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .legal-text:last-child {
    margin-bottom: 0;
  }
  
  .legal-list {
    margin: 12px 0;
    padding-left: 24px;
    list-style-type: disc;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .legal-list li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: list-item;
  }
  
  .legal-list li:last-child {
    margin-bottom: 0;
  }
  
  .legal-list li strong {
    font-weight: 600;
    color: var(--color-text-primary);
  }
  
  .legal-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
  }
  
  .legal-link:hover {
    color: #0024a3;
  }
  
  .legal-page .page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .legal-page .page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    flex: 1;
  }
  
  /* Responsive pour pages légales */
  @media screen and (max-width: 480px) {
    .legal-content {
      padding: 16px;
      padding-top: 24px;
      padding-bottom: 30px;
    }
  
    .legal-section {
      margin-bottom: 28px;
    }
  
    .legal-section-title {
      font-size: 18px;
      margin-bottom: 14px;
    }
  
    .legal-subtitle {
      font-size: 15px;
      margin: 16px 0 10px 0;
    }
  
    .legal-text {
      font-size: 14px;
      line-height: 1.6;
    }
  
    .legal-list {
      padding-left: 20px;
    }
  
    .legal-list li {
      font-size: 14px;
      line-height: 1.6;
    }
  
    .legal-date {
      font-size: 12px;
      margin-bottom: 24px;
    }
  
    .legal-text-container {
      padding: 16px;
    }
  
    .legal-page .page-header {
      padding: 10px 16px;
    }
  
    .legal-page .page-title {
      font-size: 18px;
    }
  }
  
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .legal-content {
      padding: 24px;
      padding-top: 32px;
      padding-bottom: 40px;
    }
  
    .legal-text-container {
      padding: 20px;
    }
  }
  
  @media screen and (min-width: 769px) {
    .legal-content {
      padding: 40px;
      padding-top: 50px;
      padding-bottom: 60px;
    }
  
    .legal-text-container {
      padding: 24px;
    }
  
    .legal-section-title {
      font-size: 22px;
    }
  
    .legal-text {
      font-size: 16px;
    }
  
    .legal-list li {
      font-size: 16px;
    }
  }
  
  /* ============================================
     Section d'abonnement (Parent & Teacher)
     ============================================ */
  
  .subscription-section {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Évite min-height ~100vh : sur mobile ça dépasse la zone utile (barre système) et repousse le footer */
    min-height: 0;
    padding: var(--page-padding-v) 0;
    box-sizing: border-box;
  }
  
  .subscription-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
  }
  
  .subscription-title {
    font-size: var(--subscription-hero-title);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
  }
  
  .subscription-text {
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
    max-width: 100%;
  }
  
  .subscription-btn {
    width: 93%;
    max-width: 300px;
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: 3px;
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
  }
  
  .subscription-btn:hover {
    background-color: #0024a3;
    transform: translateY(-2px);
  }
  
  .subscription-btn:active {
    background-color: #001a7a;
    transform: translateY(0);
  }

  /* Boutons subscription-section : fond vert, texte blanc, français / arabe côte à côte */
  .subscription-section .subscription-btn {
    background-color: #00e0a0;
    color: #ffffff;
  }
  .subscription-section .subscription-btn:hover {
    background-color: #00c088;
  }
  .subscription-section .subscription-btn:active {
    background-color: #00a070;
  }
  .subscription-section .subscription-btn .i18n-fr,
  .subscription-section .subscription-btn .i18n-ar {
    display: inline;
    margin-bottom: 0;
  }
  .subscription-section .subscription-btn .i18n-fr::after {
    content: " / ";
  }
  
  /* Responsive section abonnement : utilise les variables (breakpoints standard) */
  @media screen and (max-width: 480px) {
    .subscription-section {
      min-height: 0;
    }
    .subscription-content {
      gap: var(--spacing-lg);
    }
    .subscription-text {
      font-size: var(--font-size-base);
    }
    .subscription-btn {
      padding: var(--spacing-lg) var(--spacing-lg);
      font-size: var(--font-size-base);
      max-width: 100%;
    }
  }
  
  @media screen and (min-width: 769px) {
    .subscription-content {
      gap: var(--spacing-xxl);
    }
    .subscription-text {
      font-size: var(--font-size-lg);
    }
    .subscription-btn {
      padding: var(--spacing-lg) var(--spacing-xxl);
      font-size: var(--font-size-lg);
    }
  }

/* ============================================
   Online / Offline Detection (Mobilekit-style)
   ============================================ */
.toast-box {
  position: fixed;
  left: 0;
  top: -100%;
  right: 0;
  width: 100%;
  z-index: 600;
  min-height: 52px;
  transition: 0.2s all;
  font-size: 14px;
  color: #fff;
  padding: 10px 16px;
  line-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toast-box .in {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 20px;
  width: 100%;
}
.toast-box .in .text {
  width: 100%;
}
.toast-box.toast-top {
  top: -100%;
}
.toast-box.toast-top.show {
  top: 56px;
}
.toast-box.bg-success {
  background: #28a745 !important;
  color: #fff;
}
.toast-box.bg-danger {
  background: #dc3545 !important;
  color: #fff;
}
#offline-toast,
#online-toast {
  color: #fff;
  font-weight: 500;
}
body.app-style-page .toast-box.toast-top.show {
  top: 56px;
}

/* ============================================
   Bilingue FR puis AR l'un en dessous de l'autre
   ============================================ */
.i18n-fr,
.i18n-ar {
  display: block;
}
.i18n-fr {
  margin-bottom: 0.15em;
}
.i18n-ar {
  unicode-bidi: embed;
}
/* Pages gouvernorat, délégation, école : arabe pas gras, français et arabe côte à côte (arabe à droite) */
.governorat-page [data-i18n] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.governorat-page .i18n-fr {
  display: inline;
  margin-bottom: 0;
}
.governorat-page .i18n-ar {
  font-weight: normal;
  display: inline;
  margin-left: 0.5em;
}

/* Page Devoir maison : titre FR et AR alignés, arabe à droite */
.devoir-maison-page .subscription-page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.devoir-maison-page .subscription-page-title .i18n-fr,
.devoir-maison-page .subscription-page-title .i18n-ar {
  display: inline;
  margin-bottom: 0;
}
.devoir-maison-page .subscription-page-title .i18n-ar {
  margin-left: 0.5em;
}

/* Page Abonnement (Mes classes) : titre FR et AR alignés, arabe à droite */
.abonnement-page .subscription-page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.abonnement-page .subscription-page-title .i18n-fr,
.abonnement-page .subscription-page-title .i18n-ar {
  display: inline;
  margin-bottom: 0;
}
.abonnement-page .subscription-page-title .i18n-ar {
  margin-left: 0.5em;
}

/* Page Assistant IA : titre français et arabe côte à côte */
.ai-chat-page .ai-chat-title[data-i18n] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
}
.ai-chat-page .ai-chat-title .i18n-fr,
.ai-chat-page .ai-chat-title .i18n-ar {
  display: inline;
  margin-bottom: 0;
}
/* Menu du bas : français uniquement, pas d'arabe */
.appBottomMenu .col .i18n-fr {
  display: block;
  line-height: 1.25;
}
.appBottomMenu .col .i18n-ar {
  display: none;
}
.appBottomMenu .col strong {
  display: block;
}
/* Items de menu header : 2 lignes */
.header-menu-item .i18n-fr,
.header-menu-item .i18n-ar {
  display: block;
}
@media (max-width: 360px) {
  .i18n-fr {
    margin-bottom: 0.1em;
  }
}

/* ============================================
   Page Vérification enseignant
   ============================================ */
.verification-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  background: #f0f2f5;
}

.verification-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top, 0px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.verification-header {
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-bottom: 12px;
}

.verification-title {
  font-size: var(--title-font-size);
  font-weight: 700;
  color: var(--color-text-primary, #050505);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.3;
}

.verification-text {
  font-size: clamp(14px, 3.5vw, 16px);
  color: #65676b;
  margin: 0;
  line-height: 1.5;
}

.verification-scanner-wrap {
  width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.verification-scanner-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}

.verification-scanner-wrap canvas {
  display: none;
}

.verification-scanner-overlay {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0, 47, 189, 0.6);
  border-radius: 12px;
  pointer-events: none;
  box-sizing: border-box;
}

.verification-scanner-overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
}

.verification-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: clamp(13px, 3.2vw, 15px);
  text-align: center;
  width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  line-height: 1.4;
}
.verification-status .i18n-fr,
.verification-status .i18n-ar {
  display: block;
  text-align: center;
}
.verification-status .i18n-fr {
  margin-bottom: 0.35em;
}
.verification-status .i18n-ar {
  unicode-bidi: embed;
}
.verification-page .verification-title .i18n-fr,
.verification-page .verification-title .i18n-ar,
.verification-page .verification-text .i18n-fr,
.verification-page .verification-text .i18n-ar,
.verification-page .verification-btn .i18n-fr,
.verification-page .verification-btn .i18n-ar,
.verification-page .verification-already-badge .i18n-fr,
.verification-page .verification-already-badge .i18n-ar {
  display: block;
}
.verification-page .verification-title .i18n-ar,
.verification-page .verification-text .i18n-ar,
.verification-page .verification-btn .i18n-ar,
.verification-page .verification-already-badge .i18n-ar {
  unicode-bidi: embed;
  margin-top: 0.25em;
}

.verification-status.waiting { background: #e7f3ff; color: #002FBD; }
.verification-status.success { background: #d4edda; color: #155724; }
.verification-status.error { background: #f8d7da; color: #721c24; }

.verification-btn {
  margin-top: 20px;
  background: var(--color-primary, #002FBD);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  min-height: 48px;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.verification-btn:hover { opacity: 0.95; }
.verification-btn:active { opacity: 0.9; }
.verification-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.verification-already {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  min-height: 120px;
}

.verification-already.visible {
  display: flex;
  flex-direction: column;
}

.verification-already-badge {
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 700;
  color: #155724;
  margin: 0;
  line-height: 1.3;
}

.verification-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.verification-form-wrap.hidden { display: none; }

/* Responsive: très petits écrans */
@media (max-width: 360px) {
  .verification-main {
    padding: 12px;
  }
  .verification-header {
    margin-bottom: 10px;
  }
  .verification-status {
    margin-top: 10px;
    padding: 10px 12px;
  }
  .verification-btn {
    margin-top: 16px;
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Responsive: tablettes et grands écrans */
@media (min-width: 600px) {
  .verification-main {
    padding: 24px;
  }
  .verification-scanner-wrap {
    max-width: 360px;
  }
  .verification-status,
  .verification-btn {
    max-width: 360px;
  }
  .verification-header {
    margin-bottom: 20px;
  }
  .verification-btn {
    margin-top: 24px;
    padding: 16px 32px;
    width: auto;
    max-width: 360px;
  }
}

/* Paysage mobile: limiter la taille du scanner pour garder le reste visible */
@media (max-height: 500px) and (orientation: landscape) {
  .verification-scanner-wrap {
    max-height: 50vh;
    max-width: 50vh;
  }
}