* {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }

    /* Jetons : voir apple-tokens.css (chargé avant ce fichier) */
     
    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: var(--apple-bg);
      background-image:
        radial-gradient(ellipse 130% 70% at 50% -25%, rgba(41, 151, 255, 0.16), transparent 58%),
        radial-gradient(ellipse 70% 50% at 100% 20%, rgba(255, 255, 255, 0.04), transparent 42%),
        radial-gradient(ellipse 60% 45% at 0% 85%, rgba(41, 151, 255, 0.05), transparent 48%);
      color: var(--apple-text);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.47059;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
     
    /* Section Hero */
    .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
      background: transparent;
      position: relative;
      overflow: hidden;
    }
    
    
    .hero-content {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 1;
    }
    
    
    .hero-title {
      font-size: clamp(2.5rem, 5.5vw, 3.75rem);
      font-weight: 600;
      letter-spacing: -0.045em;
      line-height: 1.05;
      margin-bottom: 1.25rem;
      color: var(--apple-text);
    }
    
    .brand-highlight {
      background: linear-gradient(105deg, #f5f5f7 0%, #f5f5f7 35%, var(--apple-blue) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .hero-description {
      font-size: 1.1875rem;
      line-height: 1.5;
      font-weight: 400;
      color: var(--apple-text-secondary);
      margin-bottom: 2.25rem;
      max-width: 34rem;
      letter-spacing: -0.011em;
    }
    
    .hero-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    
    .cta-button {
      padding: 0.8125rem 1.625rem;
      border-radius: var(--apple-radius-pill);
      font-weight: 500;
      font-size: 1.0625rem;
      letter-spacing: -0.015em;
      border: none;
      cursor: pointer;
      transition: transform var(--apple-duration) var(--apple-ease),
        background-color var(--apple-duration) var(--apple-ease),
        box-shadow var(--apple-duration) var(--apple-ease),
        filter var(--apple-duration) var(--apple-ease);
      text-decoration: none;
      display: inline-block;
    }
    
    .cta-button.primary {
      background: var(--apple-blue-deep);
      color: #fff;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    }
    
    .cta-button.primary:hover {
      transform: scale(1.02);
      filter: brightness(1.08);
    }
    
    .cta-button.secondary {
      background: var(--apple-glass);
      color: var(--apple-text);
      border: 1px solid var(--apple-border-strong);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
    
    .cta-button.secondary:hover {
      background: var(--apple-glass-hover);
      transform: scale(1.02);
    }
    
    .hero-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .floating-cards {
      position: relative;
      width: 300px;
      height: 300px;
    }
    
    .floating-card {
      position: absolute;
      width: 80px;
      height: 80px;
      background: var(--apple-glass);
      border: 1px solid var(--apple-border);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      backdrop-filter: saturate(180%) blur(24px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      animation: float 7s var(--apple-ease) infinite;
    }
    
    .floating-card.card-1 {
      top: 20px;
      left: 20px;
      animation-delay: 0s;
    }
    
    .floating-card.card-2 {
      top: 20px;
      right: 20px;
      animation-delay: 1.5s;
    }
    
    .floating-card.card-3 {
      bottom: 20px;
      left: 20px;
      animation-delay: 3s;
    }
    
    .floating-card.card-4 {
      bottom: 20px;
      right: 20px;
      animation-delay: 4.5s;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.88; }
    }

    @keyframes shimmer {
      0% { background-position: -200px 0; }
      100% { background-position: calc(200px + 100%) 0; }
    }
    
    /* Sections générales */
    .features-section, .tools-section {
      padding: clamp(4rem, 12vw, 7rem) clamp(1.5rem, 4vw, 2.5rem);
      max-width: 1068px;
      margin: 0 auto;
    }
    
    .section-header {
      text-align: center;
      margin-bottom: clamp(2.5rem, 6vw, 4rem);
    }
    
    .section-header h2 {
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1.1;
      color: var(--apple-text);
      margin-bottom: 0.75rem;
    }
    
    .section-header p {
      font-size: 1.1875rem;
      color: var(--apple-text-secondary);
      max-width: 40rem;
      margin: 0 auto;
      letter-spacing: -0.011em;
      line-height: 1.5;
    }
    
    /* Grille des fonctionnalités */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
    }
    
    .feature-card {
      background: var(--apple-glass);
      border: 1px solid var(--apple-border);
      border-radius: var(--apple-radius-card);
      padding: 2.25rem 1.75rem;
      text-align: center;
      transition: transform var(--apple-duration) var(--apple-ease),
        background-color var(--apple-duration) var(--apple-ease),
        border-color var(--apple-duration) var(--apple-ease),
        box-shadow var(--apple-duration) var(--apple-ease);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      backdrop-filter: saturate(180%) blur(24px);
    }
    
    .feature-card:hover {
      transform: translateY(-4px);
      background: var(--apple-glass-hover);
      border-color: var(--apple-border-strong);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    }
    
    .feature-icon {
      font-size: 2.75rem;
      margin-bottom: 1.25rem;
      line-height: 1;
    }
    
    .feature-card h3 {
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--apple-text);
      margin-bottom: 0.5rem;
    }
    
    .feature-card p {
      color: var(--apple-text-secondary);
      line-height: 1.5;
      font-size: 1.0625rem;
      letter-spacing: -0.011em;
    }

    /* Section À propos */
    .about-section {
      padding: clamp(4rem, 12vw, 7rem) clamp(1.5rem, 4vw, 2.5rem);
      background: rgba(255, 255, 255, 0.02);
      border-block: 1px solid rgba(255, 255, 255, 0.06);
    }

    .about-content {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
    }

    .about-text h3 {
      color: var(--apple-text);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      margin-bottom: 0.75rem;
    }

    .about-text p {
      color: var(--apple-text-secondary);
      line-height: 1.5;
      margin-bottom: 1.75rem;
      font-size: 1.0625rem;
      letter-spacing: -0.011em;
    }

    .values-list {
      list-style: none;
      padding: 0;
    }

    .values-list li {
      color: var(--apple-text-secondary);
      margin-bottom: 0.875rem;
      padding-left: 1.5rem;
      position: relative;
      line-height: 1.5;
      font-size: 1.0625rem;
      letter-spacing: -0.011em;
    }

    .values-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--apple-blue);
      font-weight: 600;
    }

    .values-list strong {
      color: var(--apple-text);
      font-weight: 600;
    }

    .about-visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .about-icons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      width: 200px;
      height: 200px;
    }

    .about-icon {
      width: 80px;
      height: 80px;
      background: var(--apple-glass);
      border: 1px solid var(--apple-border);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      animation: pulse 4s var(--apple-ease) infinite;
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }

    .about-icon:nth-child(1) { animation-delay: 0s; }
    .about-icon:nth-child(2) { animation-delay: 0.5s; }
    .about-icon:nth-child(3) { animation-delay: 1s; }
    .about-icon:nth-child(4) { animation-delay: 1.5s; }


    /* Section CTA */
    .cta-section {
      background: rgba(255, 255, 255, 0.03);
      border-block: 1px solid rgba(255, 255, 255, 0.08);
      padding: clamp(4.5rem, 11vw, 7rem) clamp(1.5rem, 4vw, 2.5rem);
      margin: 0;
      position: relative;
      overflow: hidden;
    }

    .cta-content {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
    }

    .cta-content h2 {
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 600;
      letter-spacing: -0.04em;
      color: var(--apple-text);
      margin-bottom: 1rem;
      line-height: 1.1;
    }

    .cta-content p {
      font-size: 1.1875rem;
      color: var(--apple-text-secondary);
      margin-bottom: 2rem;
      line-height: 1.5;
      letter-spacing: -0.011em;
      max-width: 36rem;
    }

    .cta-buttons {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .cta-visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cta-icons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      width: 200px;
      height: 200px;
    }

    .cta-icon {
      width: 80px;
      height: 80px;
      background: var(--apple-glass);
      border: 1px solid var(--apple-border);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      animation: pulse 4s var(--apple-ease) infinite;
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }

    .cta-icon:nth-child(1) { animation-delay: 0s; }
    .cta-icon:nth-child(2) { animation-delay: 0.5s; }
    .cta-icon:nth-child(3) { animation-delay: 1s; }
    .cta-icon:nth-child(4) { animation-delay: 1.5s; }

    
    .hero-subtitle {
      color: var(--apple-text-secondary);
      font-size: 1.1875rem;
      max-width: 40rem;
      margin: 0 auto;
      line-height: 1.5;
      font-weight: 400;
      letter-spacing: -0.011em;
    }
     
    main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.25rem;
      padding: 0;
      max-width: 1068px;
      margin: 0 auto;
      justify-items: center;
      align-items: start;
    }
    
    /* Responsive Design - Mobile First */
    
    /* Tablettes */
    @media (max-width: 1024px) {
      .hero-content {
        gap: 3rem;
      }
      
      .hero-title {
        font-size: 3rem;
      }
      
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
      }
      
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Mobiles */
    @media (max-width: 768px) {
      /* Hero Section */
      .hero-section {
        min-height: 70vh;
        padding: 2rem 1rem;
      }
      
      .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }
      
      .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
      }
      
      .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
      }
      
      .hero-actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }
      
      .cta-button {
        width: 100%;
        max-width: 280px;
      }
      
      .floating-cards {
        width: 200px;
        height: 200px;
      }
      
      .floating-card {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
      }
      
      /* Sections générales */
      .features-section, .tools-section, .about-section {
        padding: 3rem 1rem;
      }
      
      .section-header h2 {
        font-size: 2rem;
        margin-bottom: 0.8rem;
      }
      
      .section-header p {
        font-size: 1rem;
      }
      
      /* Grille des fonctionnalités */
      .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      .feature-card {
        padding: 1.5rem;
      }
      
      /* Section À propos */
      .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }

      .about-icons {
        width: 150px;
        height: 150px;
        gap: 1rem;
      }

      .about-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
      }
      
      /* Grille des cartes */
      main {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1.5rem;
        padding: 0;
      }
      
      .card {
        max-width: 180px;
        min-height: 140px;
        padding: 1.5rem;
      }
      
      /* Section CTA */
      .cta-section {
        padding: 4rem 1rem;
        margin: 2rem 0;
      }

      .cta-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }

      .cta-content h2 {
        font-size: 2.2rem;
      }

      .cta-content p {
        font-size: 1rem;
      }

      .cta-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }

      .cta-icons {
        width: 150px;
        height: 150px;
        gap: 1rem;
      }

      .cta-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
      }
    }

    /* Petits mobiles */
    @media (max-width: 480px) {
      /* Hero Section */
      .hero-section {
        min-height: 60vh;
        padding: 1.5rem 1rem;
      }
      
      .hero-title {
        font-size: 2rem;
      }
      
      .hero-description {
        font-size: 0.9rem;
      }
      
      /* Sections */
      .features-section, .tools-section, .about-section {
        padding: 2rem 1rem;
      }
      
      .section-header h2 {
        font-size: 1.8rem;
      }
      
      .section-header p {
        font-size: 0.9rem;
      }
      
      /* Cartes */
      main {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
      }
      
      .card {
        max-width: 160px;
        min-height: 120px;
        padding: 1.2rem;
      }
      
      .card i {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
      }
      
      .card h3 {
        font-size: 0.9rem;
      }
      
      /* CTA */
      .cta-section {
        padding: 3rem 1rem;
      }

      .cta-content h2 {
        font-size: 1.8rem;
      }

      .cta-content p {
        font-size: 0.9rem;
      }

      .cta-icons {
        width: 120px;
        height: 120px;
        gap: 0.8rem;
      }

      .cta-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
      }
      
      /* About icons */
      .about-icons {
        width: 120px;
        height: 120px;
        gap: 0.8rem;
      }

      .about-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
      }
    }

    @media (min-width: 1400px) {
      .hero-content {
        gap: 6rem;
      }
      
      .hero-title {
        font-size: 4rem;
      }
      
      .hero-description {
        font-size: 1.3rem;
      }
      
      main {
        max-width: 1400px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2.5rem;
      }
      
      .card {
        max-width: 240px;
        min-height: 200px;
        padding: 2.2rem;
      }
      
      .card i {
        font-size: 2.5rem;
      }
      
      .card h3 {
        font-size: 1.1rem;
      }
    }
     
    .card {
      background: var(--apple-glass);
      border-radius: var(--apple-radius-card);
      padding: 2rem;
      width: 100%;
      max-width: 220px;
      min-height: 180px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
      transition: transform var(--apple-duration) var(--apple-ease),
        background-color var(--apple-duration) var(--apple-ease),
        border-color var(--apple-duration) var(--apple-ease),
        box-shadow var(--apple-duration) var(--apple-ease);
      cursor: pointer;
      border: 1px solid var(--apple-border);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      display: flex;
      flex-direction: column;
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      backdrop-filter: saturate(180%) blur(24px);
      justify-content: center;
      align-items: center;
      position: relative;
      will-change: transform, box-shadow;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
     
    .card:hover, .card:focus {
      transform: translateY(-5px) scale(1.015);
      background: var(--apple-glass-hover);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
      border-color: var(--apple-border-strong);
      outline: none;
    }
    
    .card:focus-visible {
      outline: 2px solid var(--apple-blue);
      outline-offset: 3px;
    }
     
    .card i {
      display: block;
      margin-bottom: 0.8rem;
      font-size: 2rem;
      color: var(--apple-blue);
      transition: transform var(--apple-duration) var(--apple-ease),
        color var(--apple-duration) var(--apple-ease);
    }
    
    .card h3 {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: -0.015em;
      color: var(--apple-text);
      word-wrap: break-word;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    
    .card:hover i {
      transform: scale(1.04);
      color: #5ac8fa;
    }
    
    /* Amélioration de l'accessibilité */
    @media (prefers-reduced-motion: reduce) {
      .card, .card i {
        transition: none;
      }
      
      .card:hover, .card:focus {
        transform: none;
      }
      
      .card:hover i {
        transform: none;
      }
    }
    
    /* Mode sombre amélioré */
    @media (prefers-color-scheme: dark) {
      .card {
        background: var(--apple-glass);
        border: 1px solid var(--apple-border);
      }
      
      .card:hover, .card:focus {
        background: var(--apple-glass-hover);
      }
    }
    
    /* Styles pour les cartes personnalisées */
    .card.custom-card {
      border: 1px solid rgba(41, 151, 255, 0.35);
      background: rgba(255, 255, 255, 0.05);
    }
    
    .card.custom-card:hover {
      border-color: rgba(41, 151, 255, 0.55);
      background: rgba(255, 255, 255, 0.08);
    }
    
    /* Styles pour les cartes de dossiers */
    .card.folder-card {
      border: 1px solid rgba(41, 151, 255, 0.35);
      background: rgba(41, 151, 255, 0.08);
      position: relative;
      overflow: hidden;
    }
    
    .card.folder-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(160deg, rgba(41, 151, 255, 0.06), transparent 55%);
      opacity: 0;
      transition: opacity var(--apple-duration) var(--apple-ease);
    }
    
    .card.folder-card:hover {
      border-color: rgba(41, 151, 255, 0.5);
      background: rgba(41, 151, 255, 0.12);
      transform: translateY(-5px) scale(1.015);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(41, 151, 255, 0.2);
    }
    
    .card.folder-card:hover::before {
      opacity: 1;
    }
    
    .card.folder-card i {
      color: var(--apple-blue);
      filter: none;
      position: relative;
      z-index: 1;
    }
    
    .card.folder-card h3 {
      color: var(--apple-text);
      position: relative;
      z-index: 1;
    }
    
    /* Indicateur de contenu du dossier */
    .folder-content-indicator {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(41, 151, 255, 0.85);
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 10px;
      min-width: 18px;
      text-align: center;
      z-index: 2;
    }
    
    /* Animation pour l'ouverture de dossier */
    .card.folder-card:active {
      transform: scale(0.98);
      transition: transform 0.1s ease;
    }
    
    /* Styles pour les cartes de bénéfices */
    .benefit-card {
      background: var(--apple-glass);
      border: 1px solid var(--apple-border);
      border-radius: var(--apple-radius-card);
      padding: 1.75rem;
      text-align: center;
      transition: transform var(--apple-duration) var(--apple-ease),
        background-color var(--apple-duration) var(--apple-ease),
        box-shadow var(--apple-duration) var(--apple-ease);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
    
    .benefit-card:hover {
      transform: translateY(-3px);
      background: var(--apple-glass-hover);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
      border-color: var(--apple-border-strong);
    }
    
    .benefit-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      display: block;
    }
    
    .benefit-card h3 {
      color: var(--apple-text);
      font-size: 1.0625rem;
      margin-bottom: 0.5rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    
    .benefit-card p {
      color: var(--apple-text-secondary);
      font-size: 0.9375rem;
      line-height: 1.45;
      letter-spacing: -0.011em;
    }

    /* Styles pour le modal de création de dossier */
    .create-folder-modal {
      max-width: 500px;
      width: 95%;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-header h3 {
      margin: 0;
      color: #e2e8f0;
      font-size: 1.2rem;
      font-weight: 600;
    }

    .modal-close-btn {
      background: none;
      border: none;
      color: #94a3b8;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .modal-close-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #e2e8f0;
    }

    .create-folder-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group label {
      color: #e2e8f0;
      font-weight: 500;
      font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea {
      padding: 0.8rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      background: rgba(30, 30, 47, 0.8);
      color: #e2e8f0;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: rgba(41, 151, 255, 0.6);
      box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.2);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: #64748b;
    }

    .color-picker-container {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .color-picker-container input[type="color"] {
      width: 50px;
      height: 40px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      padding: 0;
    }

    .color-presets {
      display: flex;
      gap: 0.5rem;
    }

    .color-preset {
      width: 32px;
      height: 32px;
      border: 2px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .color-preset:hover {
      transform: scale(1.1);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .color-preset.active {
      border-color: #e2e8f0;
      transform: scale(1.1);
    }

    .form-actions {
      display: flex;
      gap: 1rem;
      justify-content: flex-end;
      margin-top: 1rem;
    }

    .btn {
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.1);
      color: #94a3b8;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #e2e8f0;
    }

    .btn-primary {
      background: var(--apple-blue-deep);
      color: #fff;
      border-radius: var(--apple-radius-pill);
    }

    .btn-primary:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0, 113, 227, 0.35);
    }
     
    footer {
      text-align: center;
      padding: 2.5rem 1.5rem;
      font-size: 0.875rem;
      letter-spacing: -0.01em;
      color: var(--apple-text-tertiary);
      margin-top: 3rem;
      background: rgba(255, 255, 255, 0.02);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
    }
    
    .bandeau-footer {
      margin-bottom: 1rem;
      font-size: 1rem;
      color: var(--apple-text-secondary);
    }
    
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      align-items: center;
    }
    
    .footer-links a {
      color: var(--apple-text-secondary);
      text-decoration: none;
      transition: color var(--apple-duration) var(--apple-ease);
    }
    
    .footer-links a:hover {
      color: var(--apple-blue);
    }
     
     .loading {
       display: flex;
       justify-content: center;
       padding: 2rem;
     }
     
     .loading-spinner {
       width: 40px;
       height: 40px;
       border: 3px solid rgba(255, 255, 255, 0.12);
       border-radius: 50%;
       border-top-color: var(--apple-blue);
       animation: spin 0.9s var(--apple-ease) infinite;
     }
     
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
     
    /* Tablettes */
    @media (max-width: 768px) {
      main {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1.2rem;
        padding: 1.2rem;
        max-width: 100%;
      }
      
      .card {
        max-width: 180px;
        min-height: 130px;
        padding: 1.3rem;
      }
      
      .card i {
        font-size: 1.8rem;
      }
      
      .card h3 {
        font-size: 0.9rem;
      }
    }
    
    /* Mobiles */
    @media (max-width: 600px) {
      header h1 {
        font-size: 1.8rem;
      }
      
      .hero-subtitle {
        font-size: 1rem;
      }
      
      main {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        padding: 1rem;
      }
      
      .card {
        max-width: 160px;
        min-height: 120px;
        padding: 1.2rem;
      }
      
      .card i {
        font-size: 1.6rem;
        margin-bottom: 0.6rem;
      }
      
      .card h3 {
        font-size: 0.85rem;
      }
    }
    
    /* Petits mobiles */
    @media (max-width: 400px) {
      main {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.8rem;
        padding: 0.8rem;
      }
      
      .card {
        max-width: 140px;
        min-height: 110px;
        padding: 1rem;
      }
      
      .card i {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
      }
      
      .card h3 {
        font-size: 0.8rem;
      }
    }
     
    /* Amélioration pour les appareils tactiles */
    @media (hover: none) and (pointer: coarse) {
      .card {
        min-height: 120px;
        padding: 1.2rem;
        touch-action: manipulation;
      }
      
      .card:active {
        transform: scale(0.95);
        background: #25253d;
        transition: transform 0.1s ease;
      }
      
      .card:hover {
        transform: none;
      }
      
      .card:hover i {
        transform: none;
      }
      
      /* Améliorer les boutons tactiles */
      .cta-button {
        min-height: 44px;
        touch-action: manipulation;
      }
      
      /* Améliorer les interactions tactiles */
      .feature-card:active,
      .about-icon:active,
      .cta-icon:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
      }
      
      /* Désactiver les animations au hover sur mobile */
      .feature-card:hover,
      .about-icon:hover,
      .cta-icon:hover {
        transform: none;
      }
    }
    
    /* Optimisations pour les petits écrans tactiles */
    @media (max-width: 480px) and (hover: none) {
      /* Augmenter la taille des zones tactiles */
      .card {
        min-height: 140px;
        padding: 1.5rem;
      }
      
      .cta-button {
        min-height: 48px;
        font-size: 1rem;
      }
      .hero-actions {
        gap: 1rem;
      }
    }

    .sr-only {
      position: absolute;
      width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
     }
 
     .error-message {
       background: rgba(255, 0, 0, 0.1);
       border: 1px solid rgba(255, 0, 0, 0.2);
       border-radius: 8px;
       padding: 1rem;
       text-align: center;
       color: #ff6b6b;
       margin: 1rem;
     }

     .popup-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--apple-scrim);
       -webkit-backdrop-filter: saturate(180%) blur(16px);
       backdrop-filter: saturate(180%) blur(16px);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 1000;
       padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
       opacity: 0;
       visibility: hidden;
       transition: opacity var(--apple-duration) var(--apple-ease),
         visibility var(--apple-duration) var(--apple-ease);
     }

     .popup-overlay.show {
       opacity: 1;
       visibility: visible;
     }

     .popup-content {
       background: rgba(28, 28, 30, 0.94);
       -webkit-backdrop-filter: saturate(180%) blur(24px);
       backdrop-filter: saturate(180%) blur(24px);
       border-radius: var(--apple-radius-sheet);
       padding: 1.75rem 1.5rem;
       max-width: 400px;
       width: 100%;
       max-height: min(88vh, 640px);
       overflow-y: auto;
       text-align: center;
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
       border: 1px solid var(--apple-border);
     }

     .popup-content h3 {
       color: var(--apple-text);
       margin-bottom: 0.75rem;
       font-size: 1.125rem;
       font-weight: 600;
       letter-spacing: -0.02em;
     }

     .popup-content p {
       margin-bottom: 1.25rem;
       line-height: 1.5;
       color: var(--apple-text-secondary);
       font-size: 0.9375rem;
       letter-spacing: -0.011em;
     }

     .popup-content .warning {
       background: rgba(255, 159, 10, 0.12);
       border: 1px solid rgba(255, 159, 10, 0.35);
       border-radius: 12px;
       padding: 1rem;
       margin: 1rem 0;
       color: #ffb340;
       text-align: left;
       font-size: 0.875rem;
     }

     .popup-btn {
       background: var(--apple-blue-deep);
       color: white;
       border: none;
       padding: 0.65rem 1.35rem;
       border-radius: var(--apple-radius-pill);
       cursor: pointer;
       font-size: 1rem;
       font-weight: 500;
       letter-spacing: -0.015em;
       transition: filter var(--apple-duration-fast) var(--apple-ease),
         transform var(--apple-duration-fast) var(--apple-ease);
     }

     .popup-btn:hover {
       filter: brightness(1.08);
     }

     .popup-btn.cancel {
       background: var(--apple-glass-hover);
       color: var(--apple-text);
       border: 1px solid var(--apple-border-strong);
       margin-left: 0.5rem;
     }

     .popup-btn.cancel:hover {
       filter: brightness(1.12);
     }

     .card:focus-visible {
       outline: 2px solid var(--apple-blue);
       outline-offset: 3px;
     }

     @media (prefers-reduced-motion: reduce) {
       .card:hover, .card:focus {
         transform: none;
       }
       
       .loading-spinner {
         animation: none;
       }
     }

     /* Styles pour l'installation PWA */
     .install-prompt {
       position: fixed;
       bottom: max(1.25rem, env(safe-area-inset-bottom));
       left: 50%;
       transform: translateX(-50%);
       background: rgba(28, 28, 30, 0.92);
       -webkit-backdrop-filter: saturate(180%) blur(24px);
       backdrop-filter: saturate(180%) blur(24px);
       border: 1px solid var(--apple-border);
       border-radius: var(--apple-radius-sheet);
       padding: 1.25rem 1.35rem;
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
       z-index: 1000;
       display: none;
       max-width: calc(100% - 2rem);
       width: 400px;
     }

     .install-prompt.show {
       display: block;
     }

     .install-prompt h4 {
       color: var(--apple-text);
       margin-bottom: 0.35rem;
       font-size: 1.0625rem;
       font-weight: 600;
       letter-spacing: -0.02em;
     }

     .install-prompt p {
       font-size: 0.9375rem;
       margin-bottom: 1rem;
       color: var(--apple-text-secondary);
       line-height: 1.45;
     }

     .install-buttons {
       display: flex;
       gap: 0.5rem;
       justify-content: flex-end;
       flex-wrap: wrap;
     }

     .install-btn {
       background: var(--apple-blue-deep);
       color: white;
       border: none;
       padding: 0.55rem 1.15rem;
       border-radius: var(--apple-radius-pill);
       cursor: pointer;
       font-size: 0.9375rem;
       font-weight: 500;
       min-height: var(--apple-tap-min);
       transition: filter var(--apple-duration-fast) var(--apple-ease);
     }

     .install-btn:hover {
       filter: brightness(1.08);
     }

     .install-btn.cancel {
       background: var(--apple-glass-hover);
       color: var(--apple-text);
       border: 1px solid var(--apple-border-strong);
     }

     .install-btn.cancel:hover {
       filter: brightness(1.1);
     }

     /* Modal pour créer une carte personnalisée */
     .custom-card-modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--apple-scrim);
       -webkit-backdrop-filter: saturate(180%) blur(16px);
       backdrop-filter: saturate(180%) blur(16px);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 2000;
       opacity: 0;
       visibility: hidden;
       transition: opacity var(--apple-duration) var(--apple-ease),
         visibility var(--apple-duration) var(--apple-ease);
     }

     .custom-card-modal.show {
       opacity: 1;
       visibility: visible;
     }

     .custom-card-content {
       background: rgba(28, 28, 30, 0.94);
       -webkit-backdrop-filter: saturate(180%) blur(24px);
       backdrop-filter: saturate(180%) blur(24px);
       border-radius: var(--apple-radius-sheet);
       padding: 1.75rem;
       max-width: 500px;
       width: 90%;
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
       border: 1px solid var(--apple-border);
     }

     .custom-card-content h3 {
       color: var(--apple-text);
       margin-bottom: 1.5rem;
       text-align: center;
       font-size: 1.25rem;
       font-weight: 600;
       letter-spacing: -0.02em;
     }

     .form-group {
       margin-bottom: 1.5rem;
     }

     .form-group label {
       display: block;
       margin-bottom: 0.5rem;
       color: #ccc;
       font-weight: 500;
     }

     .form-group input,
     .form-group select {
       width: 100%;
       padding: 0.8rem;
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 8px;
       background: #2a2a3e;
       color: #eee;
       font-size: 1rem;
       transition: border-color 0.3s ease;
     }

     .form-group input:focus,
     .form-group select:focus {
       outline: none;
       border-color: #5c6bc0;
       box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
     }

     .form-group input::placeholder {
       color: #888;
     }

     .form-actions {
       display: flex;
       gap: 1rem;
       justify-content: flex-end;
       margin-top: 2rem;
     }

     .btn {
       padding: 0.8rem 1.5rem;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       font-size: 1rem;
       transition: all 0.3s ease;
     }

     .btn-primary {
       background: #5c6bc0;
       color: white;
     }

     .btn-primary:hover {
       background: #4a5bb8;
     }

     .btn-secondary {
       background: #666;
       color: white;
     }

     .btn-secondary:hover {
       background: #555;
     }

     .btn-danger {
       background: #ff4757;
       color: white;
     }

     .btn-danger:hover {
       background: #ff3742;
     }

     /* Styles pour les cartes personnalisées */
     .card.custom-card {
       position: relative;
     }

     .card.custom-card .delete-custom-card {
       position: absolute;
       top: 8px;
       left: 8px;
       width: 20px;
       height: 20px;
       background: rgba(255, 71, 87, 0.8);
       border: none;
       border-radius: 50%;
       color: white;
       cursor: pointer;
       font-size: 12px;
       display: none;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
     }

     .card.custom-card:hover .delete-custom-card {
       display: flex;
     }

     .card.custom-card .delete-custom-card:hover {
       background: #ff4757;
       transform: scale(1.1);
     }

     .icon-preview {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 40px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       margin-bottom: 1rem;
       font-size: 1.5rem;
     }

     /* Styles pour la barre de recherche */
     .search-container {
       position: fixed;
       top: 20px;
       left: 20px;
       z-index: 1000;
       display: flex;
       gap: 0.5rem;
       align-items: center;
     }

     .search-input {
       padding: 0.55rem 1.1rem;
       min-height: var(--apple-tap-min);
       border: 1px solid var(--apple-border);
       border-radius: var(--apple-radius-pill);
       background: rgba(28, 28, 30, 0.72);
       color: var(--apple-text);
       font-size: 0.9375rem;
       letter-spacing: -0.011em;
       width: 250px;
       transition: border-color var(--apple-duration) var(--apple-ease),
         box-shadow var(--apple-duration) var(--apple-ease),
         width var(--apple-duration) var(--apple-ease);
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
     }

     .search-input:focus {
       outline: none;
       border-color: rgba(41, 151, 255, 0.55);
       box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.22);
       width: 300px;
     }

     .search-input::placeholder {
       color: var(--apple-text-tertiary);
     }

     .filter-buttons {
       display: flex;
       gap: 0.3rem;
     }


     /* Styles pour les thèmes */
     .theme-toggle {
       position: fixed;
       top: 20px;
       right: 20px;
       background: rgba(28, 28, 30, 0.72);
       color: var(--apple-text);
       border: 1px solid var(--apple-border);
       padding: 0.5rem;
       border-radius: 50%;
       cursor: pointer;
       font-size: 1.15rem;
       z-index: 1000;
       transition: transform var(--apple-duration) var(--apple-ease),
         background-color var(--apple-duration) var(--apple-ease),
         border-color var(--apple-duration) var(--apple-ease);
       width: var(--apple-tap-min);
       height: var(--apple-tap-min);
       min-width: var(--apple-tap-min);
       min-height: var(--apple-tap-min);
       display: flex;
       align-items: center;
       justify-content: center;
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
     }

     .theme-toggle:hover {
       background: rgba(44, 44, 46, 0.85);
       border-color: var(--apple-border-strong);
       transform: scale(1.04);
     }

     /* Thème clair (style Apple clair) */
     body.light-theme {
       background-color: #fbfbfd;
       background-image:
         radial-gradient(ellipse 120% 70% at 50% -20%, rgba(0, 113, 227, 0.08), transparent 55%);
       color: #1d1d1f;
     }

     body.light-theme .card {
       background: rgba(255, 255, 255, 0.82);
       border: 1px solid rgba(0, 0, 0, 0.06);
       color: #1d1d1f;
       box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
     }

     body.light-theme .card:hover {
       background: #ffffff;
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
       border-color: rgba(0, 0, 0, 0.08);
     }

     body.light-theme .card h3 {
       color: #1d1d1f !important;
     }

     body.light-theme .card i {
       color: #0071e3 !important;
     }

     body.light-theme .search-input {
       background: rgba(255, 255, 255, 0.86);
       color: #1d1d1f;
       border-color: rgba(0, 0, 0, 0.08);
     }

     body.light-theme .search-input::placeholder {
       color: #86868b;
     }

     body.light-theme .custom-card-content,
     body.light-theme .popup-content {
       background: #ffffff;
       color: #1d1d1f;
       border-color: rgba(0, 0, 0, 0.08);
     }

     body.light-theme .custom-card-content h3,
     body.light-theme .popup-content h3 {
       color: #0071e3;
     }

     body.light-theme .custom-card-content label,
     body.light-theme .popup-content p {
       color: #1d1d1f;
     }

     body.light-theme .hero-subtitle {
       color: #6e6e73;
     }

     body.light-theme .hero-title,
     body.light-theme .section-header h2,
     body.light-theme .feature-card h3,
     body.light-theme .about-text h3,
     body.light-theme .values-list strong,
     body.light-theme .cta-content h2 {
       color: #1d1d1f;
     }

     body.light-theme .hero-description,
     body.light-theme .section-header p,
     body.light-theme .feature-card p,
     body.light-theme .about-text p,
     body.light-theme .values-list li,
     body.light-theme .cta-content p {
       color: #6e6e73;
     }

     body.light-theme .feature-card,
     body.light-theme .floating-card,
     body.light-theme .about-icon,
     body.light-theme .cta-icon {
       background: rgba(255, 255, 255, 0.72);
       border-color: rgba(0, 0, 0, 0.06);
     }

     body.light-theme .feature-card:hover {
       background: #ffffff;
       border-color: rgba(0, 0, 0, 0.1);
     }

     body.light-theme .brand-highlight {
       background: linear-gradient(105deg, #1d1d1f 0%, #1d1d1f 40%, #0071e3 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
     }

     body.light-theme .about-section,
     body.light-theme .cta-section {
       background: rgba(0, 0, 0, 0.02);
       border-block-color: rgba(0, 0, 0, 0.06);
     }

     body.light-theme .theme-toggle {
       background: rgba(255, 255, 255, 0.9);
       color: #1d1d1f;
       border-color: rgba(0, 0, 0, 0.08);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     }

     /* Styles pour les favoris */
     .favorite-star {
       position: absolute;
       top: 6px;
       right: 6px;
       width: 16px;
       height: 16px;
       background: rgba(0, 0, 0, 0.1);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       font-size: 12px;
       opacity: 0;
       transition: all 0.3s ease;
       z-index: 10;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #666;
     }

     .card:hover .favorite-star {
       opacity: 0.7;
     }

     .favorite-star.favorited {
       opacity: 0.8;
       color: #ffd700;
       background: rgba(255, 215, 0, 0.1);
     }

     .favorite-star:hover {
       transform: scale(1.1);
       opacity: 1;
       background: rgba(0, 0, 0, 0.2);
     }

     .favorite-star.favorited:hover {
       background: rgba(255, 215, 0, 0.2);
     }

     /* Styles pour les catégories */
     .card[data-category] {
       position: relative;
     }

     .card[data-category]::before {
       content: attr(data-category);
       position: absolute;
       top: -8px;
       left: 8px;
       background: rgba(41, 151, 255, 0.92);
       color: white;
       padding: 3px 8px;
       border-radius: 6px;
       font-size: 10px;
       font-weight: 600;
       letter-spacing: 0.02em;
       text-transform: uppercase;
     }

     /* Styles pour le mode focus */
     .focus-mode {
       filter: blur(2px);
       opacity: 0.3;
       transition: all 0.3s ease;
     }

     .focus-mode.focused {
       filter: none;
       opacity: 1;
       transform: scale(1.05);
       z-index: 100;
     }

     /* Styles pour les animations améliorées */
     .card {
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .card:hover {
       transform: translateY(-5px) scale(1.015);
     }

     .card:active {
       transform: translateY(-2px) scale(0.99);
     }

     /* Styles pour les compteurs de notifications */
     .notification-badge {
       position: absolute;
       bottom: 8px;
       right: 8px;
       background: #ff4757;
       color: white;
       padding: 2px 6px;
       border-radius: 10px;
       font-size: 10px;
       font-weight: bold;
       min-width: 16px;
       text-align: center;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     }

     .notification-badge.zero {
       display: none;
     }

     /* Indicateur de long press pour la carte Messages */
     .card[data-link-href="messages"]::after {
       content: "Maintenir pour les conversations récentes";
       position: absolute;
       bottom: -25px;
       left: 50%;
       transform: translateX(-50%);
       background: rgba(0, 0, 0, 0.8);
       color: #aaa;
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 0.7rem;
       white-space: nowrap;
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
       z-index: 1000;
     }

    .card[data-link-href="messages"]:hover::after {
      opacity: 1;
    }

    /* Indicateur de long press pour la carte Profil */
    .card[data-link-href="profil"]::after {
      content: "Maintenir pour les détails du profil";
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: #aaa;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.7rem;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1000;
    }

    .card[data-link-href="profil"]:hover::after {
      opacity: 1;
    }

    /* Indicateur de long press pour la carte Entraide */
    .card[data-link-href="aide"]::after {
      content: "Maintenir pour les détails du chat";
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: #aaa;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.7rem;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1000;
    }

    .card[data-link-href="aide"]:hover::after {
      opacity: 1;
    }

     /* Styles pour le menu contextuel des conversations */
     .conversation-menu {
       position: fixed;
       background: rgba(28, 28, 30, 0.94);
       border: 1px solid var(--apple-border);
       border-radius: var(--apple-radius-sheet);
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
       z-index: 2000;
       max-width: 300px;
       min-width: 250px;
       opacity: 0;
       visibility: hidden;
       transform: scale(0.96) translateY(-6px);
       transition: opacity var(--apple-duration) var(--apple-ease),
         visibility var(--apple-duration) var(--apple-ease),
         transform var(--apple-duration) var(--apple-ease-out);
       -webkit-backdrop-filter: saturate(180%) blur(24px);
       backdrop-filter: saturate(180%) blur(24px);
     }

     .conversation-menu.show {
       opacity: 1;
       visibility: visible;
       transform: scale(1) translateY(0);
     }

     .conversation-menu-header {
       padding: 12px 16px;
       border-bottom: 1px solid var(--apple-border);
       background: rgba(255, 255, 255, 0.04);
       border-radius: var(--apple-radius-sheet) var(--apple-radius-sheet) 0 0;
     }

     .conversation-menu-header h4 {
       margin: 0;
       color: var(--apple-text);
       font-size: 0.9rem;
       font-weight: 600;
       letter-spacing: -0.015em;
       display: flex;
       align-items: center;
       gap: 8px;
     }

     .conversation-menu-list {
       max-height: 300px;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: #5c6bc0 #1e1e2f;
     }

     .conversation-menu-list::-webkit-scrollbar {
       width: 6px;
     }

     .conversation-menu-list::-webkit-scrollbar-track {
       background: #1e1e2f;
     }

     .conversation-menu-list::-webkit-scrollbar-thumb {
       background-color: #5c6bc0;
       border-radius: 3px;
     }

     .conversation-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       cursor: pointer;
       transition: all 0.2s ease;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .conversation-item:last-child {
       border-bottom: none;
     }

     .conversation-item:hover {
       background: rgba(92, 107, 192, 0.1);
       transform: translateX(5px);
     }

     .conversation-avatar {
       width: 32px;
       height: 32px;
       background: linear-gradient(135deg, #5c6bc0, #6c5ce7);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 0.8rem;
       font-weight: 600;
       flex-shrink: 0;
       object-fit: cover;
       border: 2px solid #4c82ff;
     }

     .conversation-info {
       flex: 1;
       min-width: 0;
     }

     .conversation-name {
       font-size: 0.9rem;
       font-weight: 500;
       color: #eee;
       margin: 0 0 2px 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .conversation-last-message {
       font-size: 0.75rem;
       color: #aaa;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .conversation-time {
       font-size: 0.7rem;
       color: #666;
       margin-left: auto;
       flex-shrink: 0;
     }

     .conversation-menu-footer {
       padding: 8px 16px;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       background: rgba(0, 0, 0, 0.1);
       border-radius: 0 0 12px 12px;
       text-align: center;
     }

     .conversation-menu-footer button {
       background: none;
       border: none;
       color: var(--apple-blue);
       font-size: 0.8rem;
       cursor: pointer;
       padding: 0.5rem 0.75rem;
       min-height: 36px;
       border-radius: 8px;
       transition: background-color var(--apple-duration-fast) var(--apple-ease);
     }

     .conversation-menu-footer button:hover {
       background: rgba(41, 151, 255, 0.12);
     }

    /* Styles pour le menu contextuel du profil */
    .profile-menu {
      position: fixed;
      background: rgba(28, 28, 30, 0.94);
      border: 1px solid var(--apple-border);
      border-radius: var(--apple-radius-sheet);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
      z-index: 2000;
      max-width: 320px;
      min-width: 280px;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.96) translateY(-6px);
      transition: opacity var(--apple-duration) var(--apple-ease),
        visibility var(--apple-duration) var(--apple-ease),
        transform var(--apple-duration) var(--apple-ease-out);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      backdrop-filter: saturate(180%) blur(24px);
    }

    .profile-menu.show {
      opacity: 1;
      visibility: visible;
      transform: scale(1) translateY(0);
    }

    .profile-menu-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--apple-border);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--apple-radius-sheet) var(--apple-radius-sheet) 0 0;
    }

    .profile-menu-header h4 {
      margin: 0;
      color: var(--apple-text);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .profile-menu-list {
      max-height: 400px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #4c82ff #1e1e2f;
    }

    .profile-menu-list::-webkit-scrollbar {
      width: 6px;
    }

    .profile-menu-list::-webkit-scrollbar-track {
      background: #1e1e2f;
    }

    .profile-menu-list::-webkit-scrollbar-thumb {
      background-color: #4c82ff;
      border-radius: 3px;
    }

    .profile-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .profile-item:last-child {
      border-bottom: none;
    }

    .profile-item:hover {
      background: rgba(76, 130, 255, 0.1);
      transform: translateX(5px);
    }

    .profile-avatar {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #4c82ff, #6c5ce7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .profile-info {
      flex: 1;
      min-width: 0;
    }

    .profile-name {
      color: #fff;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 2px;
    }

    .profile-email {
      color: #94a3b8;
      font-size: 0.8rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .profile-stats {
      display: flex;
      gap: 16px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .profile-stat {
      text-align: center;
      flex: 1;
    }

    .profile-stat-value {
      color: #4c82ff;
      font-size: 1.2rem;
      font-weight: 700;
      display: block;
    }

    .profile-stat-label {
      color: #94a3b8;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .profile-menu-footer {
      padding: 8px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0 0 12px 12px;
      text-align: center;
    }

    .profile-menu-footer button {
      background: none;
      border: none;
      color: #4c82ff;
      font-size: 0.8rem;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .profile-menu-footer button:hover {
      background: rgba(76, 130, 255, 0.1);
    }

    /* Styles pour le menu contextuel de l'entraide */
    .aide-menu {
      position: fixed;
      background: #1e1e2f;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      z-index: 2000;
      max-width: 350px;
      min-width: 300px;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.9) translateY(-10px);
      transition: all 0.3s ease;
    }

    .aide-menu.show {
      opacity: 1;
      visibility: visible;
      transform: scale(1) translateY(0);
    }

    .aide-menu-header {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 170, 255, 0.1);
      border-radius: 12px 12px 0 0;
    }

    .aide-menu-header h4 {
      margin: 0;
      color: #00aaff;
      font-size: 0.9rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .aide-menu-list {
      max-height: 400px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #00aaff #1e1e2f;
    }

    .aide-menu-list::-webkit-scrollbar {
      width: 6px;
    }

    .aide-menu-list::-webkit-scrollbar-track {
      background: #1e1e2f;
    }

    .aide-menu-list::-webkit-scrollbar-thumb {
      background-color: #00aaff;
      border-radius: 3px;
    }

    .aide-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .aide-item:last-child {
      border-bottom: none;
    }

    .aide-item:hover {
      background: rgba(0, 170, 255, 0.1);
      transform: translateX(5px);
    }

    .aide-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #00aaff, #0088cc);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .aide-info {
      flex: 1;
      min-width: 0;
    }

    .aide-title {
      color: #fff;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 2px;
    }

    .aide-description {
      color: #94a3b8;
      font-size: 0.8rem;
      line-height: 1.3;
    }

    .aide-stats {
      display: flex;
      gap: 16px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .aide-stat {
      text-align: center;
      flex: 1;
    }

    .aide-stat-value {
      color: #00aaff;
      font-size: 1.2rem;
      font-weight: 700;
      display: block;
    }

    .aide-stat-label {
      color: #94a3b8;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .aide-menu-footer {
      padding: 8px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0 0 12px 12px;
      text-align: center;
    }

    .aide-menu-footer button {
      background: none;
      border: none;
      color: #00aaff;
      font-size: 0.8rem;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .aide-menu-footer button:hover {
      background: rgba(0, 170, 255, 0.1);
    }

    /* Styles pour le menu des statistiques des publications */
    .feed-stats-menu {
      position: fixed;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid rgba(51, 65, 85, 0.3);
      border-radius: 10px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(76, 130, 255, 0.05);
       -webkit-backdrop-filter: blur(16px);
       backdrop-filter: blur(16px);
       z-index: 10001;
       min-width: 300px;
       max-width: 340px;
       opacity: 0;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
     }

     .feed-stats-menu.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
     }

     .feed-stats-menu-header {
       padding: 12px 16px 10px;
       border-bottom: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(30, 41, 59, 0.4);
       border-radius: 10px 10px 0 0;
     }

     .feed-stats-menu-header h4 {
       margin: 0;
       color: #cbd5e1;
       font-size: 0.85rem;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .feed-stats-menu-list {
       max-height: 300px;
       overflow-y: auto;
       padding: 6px;
       scrollbar-width: thin;
       scrollbar-color: rgba(76, 130, 255, 0.3) transparent;
     }

     .feed-stats-menu-list::-webkit-scrollbar {
       width: 4px;
     }

     .feed-stats-menu-list::-webkit-scrollbar-track {
       background: transparent;
     }

     .feed-stats-menu-list::-webkit-scrollbar-thumb {
       background-color: rgba(76, 130, 255, 0.3);
       border-radius: 2px;
     }

     .feed-stats-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       margin-bottom: 4px;
       background: rgba(30, 41, 59, 0.2);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.2s ease;
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
     }

     .feed-stats-item:hover {
       background: rgba(59, 130, 246, 0.08);
       border-color: rgba(59, 130, 246, 0.2);
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
     }

     .feed-stats-content {
       flex: 1;
       min-width: 0;
     }

     .feed-stats-title {
       font-size: 0.8rem;
       font-weight: 400;
       color: #e2e8f0;
       margin: 0 0 3px 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .feed-stats-metrics {
       display: flex;
       gap: 10px;
       font-size: 0.7rem;
       color: #94a3b8;
     }

     .feed-stats-metric {
       display: flex;
       align-items: center;
       gap: 3px;
     }

     .feed-stats-metric i {
       width: 11px;
       height: 11px;
       opacity: 0.6;
     }

     .feed-stats-metric.likes {
       color: #f87171;
     }

     .feed-stats-metric.comments {
       color: #60a5fa;
     }

     .feed-stats-metric.views {
       color: #34d399;
     }

     .feed-stats-time {
       font-size: 0.65rem;
       color: #64748b;
       margin-top: 1px;
       white-space: nowrap;
     }

     .feed-stats-menu-footer {
       padding: 8px 16px;
       border-top: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(15, 23, 42, 0.3);
       border-radius: 0 0 10px 10px;
     }

     .feed-stats-menu-footer button {
       background: rgba(76, 130, 255, 0.1);
       color: #94a3b8;
       border: 1px solid rgba(76, 130, 255, 0.2);
       border-radius: 6px;
       padding: 6px 12px;
       font-size: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
       width: 100%;
     }

     .feed-stats-menu-footer button:hover {
       background: rgba(76, 130, 255, 0.15);
       color: #cbd5e1;
       border-color: rgba(76, 130, 255, 0.3);
     }

     /* Styles pour le menu des prix d'abonnement */
     .subscription-pricing-menu {
       position: fixed;
       background: rgba(15, 23, 42, 0.95);
       border: 1px solid rgba(51, 65, 85, 0.3);
       border-radius: 10px;
       box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(76, 130, 255, 0.05);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       z-index: 10001;
       min-width: 300px;
       max-width: 340px;
       opacity: 0;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
     }

     .subscription-pricing-menu.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
     }

     .subscription-pricing-menu-header {
       padding: 12px 16px 10px;
       border-bottom: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(30, 41, 59, 0.4);
       border-radius: 10px 10px 0 0;
     }

     .subscription-pricing-menu-header h4 {
       margin: 0;
       color: #cbd5e1;
       font-size: 0.85rem;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .subscription-pricing-menu-list {
       max-height: 300px;
       overflow-y: auto;
       padding: 6px;
       scrollbar-width: thin;
       scrollbar-color: rgba(76, 130, 255, 0.3) transparent;
     }

     .subscription-pricing-menu-list::-webkit-scrollbar {
       width: 4px;
     }

     .subscription-pricing-menu-list::-webkit-scrollbar-track {
       background: transparent;
     }

     .subscription-pricing-menu-list::-webkit-scrollbar-thumb {
       background-color: rgba(76, 130, 255, 0.3);
       border-radius: 2px;
     }

     .subscription-pricing-item {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding: 12px;
       margin-bottom: 6px;
       background: rgba(30, 41, 59, 0.2);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.2s ease;
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
     }

     .subscription-pricing-item:hover {
       background: rgba(59, 130, 246, 0.08);
       border-color: rgba(59, 130, 246, 0.2);
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
     }

     .subscription-pricing-item.pro {
       border-color: rgba(255, 215, 79, 0.3);
       background: rgba(255, 215, 79, 0.05);
     }

     .subscription-pricing-item.pro:hover {
       border-color: rgba(255, 215, 79, 0.5);
       background: rgba(255, 215, 79, 0.1);
     }

     .subscription-pricing-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .subscription-pricing-name {
       font-size: 0.9rem;
       font-weight: 500;
       color: #e2e8f0;
       margin: 0;
     }

     .subscription-pricing-badge {
       background: rgba(255, 215, 79, 0.2);
       color: #ffd54f;
       padding: 2px 6px;
       border-radius: 4px;
       font-size: 0.65rem;
       font-weight: 500;
     }

     .subscription-pricing-price {
       font-size: 1.1rem;
       font-weight: 600;
       color: #4c82ff;
       margin: 0;
     }

     .subscription-pricing-features {
       display: flex;
       flex-direction: column;
       gap: 3px;
     }

     .subscription-pricing-feature {
       font-size: 0.75rem;
       color: #94a3b8;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .subscription-pricing-feature i {
       width: 10px;
       height: 10px;
       color: #34d399;
     }

     .subscription-pricing-menu-footer {
       padding: 8px 16px;
       border-top: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(15, 23, 42, 0.3);
       border-radius: 0 0 10px 10px;
     }

     .subscription-pricing-menu-footer button {
       background: rgba(76, 130, 255, 0.1);
       color: #94a3b8;
       border: 1px solid rgba(76, 130, 255, 0.2);
       border-radius: 6px;
       padding: 6px 12px;
       font-size: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
       width: 100%;
     }

     .subscription-pricing-menu-footer button:hover {
       background: rgba(76, 130, 255, 0.15);
       color: #cbd5e1;
       border-color: rgba(76, 130, 255, 0.3);
     }

     /* Styles pour le menu de connexion/inscription */
     .auth-menu {
       position: fixed;
       background: rgba(15, 23, 42, 0.95);
       border: 1px solid rgba(51, 65, 85, 0.3);
       border-radius: 10px;
       box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(76, 130, 255, 0.05);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       z-index: 10001;
       min-width: 320px;
       max-width: 380px;
       opacity: 0;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
     }

     .auth-menu.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
     }

     .auth-menu-header {
       padding: 12px 16px 10px;
       border-bottom: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(30, 41, 59, 0.4);
       border-radius: 10px 10px 0 0;
     }

     .auth-menu-header h4 {
       margin: 0;
       color: #cbd5e1;
       font-size: 0.85rem;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .auth-menu-list {
       max-height: 400px;
       overflow-y: auto;
       padding: 8px;
       scrollbar-width: thin;
       scrollbar-color: rgba(76, 130, 255, 0.3) transparent;
     }

     .auth-menu-list::-webkit-scrollbar {
       width: 4px;
     }

     .auth-menu-list::-webkit-scrollbar-track {
       background: transparent;
     }

     .auth-menu-list::-webkit-scrollbar-thumb {
       background-color: rgba(76, 130, 255, 0.3);
       border-radius: 2px;
     }

     .auth-option {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding: 14px;
       margin-bottom: 8px;
       background: rgba(30, 41, 59, 0.2);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.2s ease;
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
     }

     .auth-option:hover {
       background: rgba(59, 130, 246, 0.08);
       border-color: rgba(59, 130, 246, 0.2);
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
     }

     .auth-option.primary {
       border-color: rgba(76, 130, 255, 0.4);
       background: rgba(76, 130, 255, 0.05);
     }

     .auth-option.primary:hover {
       border-color: rgba(76, 130, 255, 0.6);
       background: rgba(76, 130, 255, 0.1);
     }

     .auth-option-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .auth-option-title {
       font-size: 0.9rem;
       font-weight: 500;
       color: #e2e8f0;
       margin: 0;
     }

     .auth-option-badge {
       background: rgba(76, 130, 255, 0.2);
       color: #4c82ff;
       padding: 2px 6px;
       border-radius: 4px;
       font-size: 0.65rem;
       font-weight: 500;
     }

     .auth-option-description {
       font-size: 0.75rem;
       color: #94a3b8;
       margin: 0;
       line-height: 1.4;
     }

     .auth-benefits {
       display: flex;
       flex-direction: column;
       gap: 4px;
       margin-top: 6px;
     }

     .auth-benefit {
       font-size: 0.7rem;
       color: #94a3b8;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .auth-benefit i {
       width: 10px;
       height: 10px;
       color: #34d399;
     }

     .auth-menu-footer {
       padding: 8px 16px;
       border-top: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(15, 23, 42, 0.3);
       border-radius: 0 0 10px 10px;
     }

     .auth-menu-footer button {
       background: rgba(76, 130, 255, 0.1);
       color: #94a3b8;
       border: 1px solid rgba(76, 130, 255, 0.2);
       border-radius: 6px;
       padding: 6px 12px;
       font-size: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
       width: 100%;
     }

     .auth-menu-footer button:hover {
       background: rgba(76, 130, 255, 0.15);
       color: #cbd5e1;
       border-color: rgba(76, 130, 255, 0.3);
     }

     /* Styles pour le menu du dashboard */
     .dashboard-menu {
       position: fixed;
       background: rgba(15, 23, 42, 0.95);
       border: 1px solid rgba(51, 65, 85, 0.3);
       border-radius: 10px;
       box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(76, 130, 255, 0.05);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       z-index: 10001;
       min-width: 320px;
       max-width: 380px;
       opacity: 0;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
     }

     .dashboard-menu.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
     }

     .dashboard-menu-header {
       padding: 12px 16px 10px;
       border-bottom: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(30, 41, 59, 0.4);
       border-radius: 10px 10px 0 0;
     }

     .dashboard-menu-header h4 {
       margin: 0;
       color: #cbd5e1;
       font-size: 0.85rem;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .dashboard-menu-list {
       max-height: 400px;
       overflow-y: auto;
       padding: 8px;
       scrollbar-width: thin;
       scrollbar-color: rgba(76, 130, 255, 0.3) transparent;
     }

     .dashboard-menu-list::-webkit-scrollbar {
       width: 4px;
     }

     .dashboard-menu-list::-webkit-scrollbar-track {
       background: transparent;
     }

     .dashboard-menu-list::-webkit-scrollbar-thumb {
       background-color: rgba(76, 130, 255, 0.3);
       border-radius: 2px;
     }

     .dashboard-option {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding: 14px;
       margin-bottom: 8px;
       background: rgba(30, 41, 59, 0.2);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.2s ease;
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
     }

     .dashboard-option:hover {
       background: rgba(59, 130, 246, 0.08);
       border-color: rgba(59, 130, 246, 0.2);
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
     }

     .dashboard-option.primary {
       border-color: rgba(76, 130, 255, 0.4);
       background: rgba(76, 130, 255, 0.05);
     }

     .dashboard-option.primary:hover {
       border-color: rgba(76, 130, 255, 0.6);
       background: rgba(76, 130, 255, 0.1);
     }

     .dashboard-option-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .dashboard-option-title {
       font-size: 0.9rem;
       font-weight: 500;
       color: #e2e8f0;
       margin: 0;
     }

     .dashboard-option-badge {
       background: rgba(76, 130, 255, 0.2);
       color: #4c82ff;
       padding: 2px 6px;
       border-radius: 4px;
       font-size: 0.65rem;
       font-weight: 500;
     }

     .dashboard-option-description {
       font-size: 0.75rem;
       color: #94a3b8;
       margin: 0;
       line-height: 1.4;
     }

     .dashboard-features {
       display: flex;
       flex-direction: column;
       gap: 4px;
       margin-top: 6px;
     }

     .dashboard-feature {
       font-size: 0.7rem;
       color: #94a3b8;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .dashboard-feature i {
       width: 10px;
       height: 10px;
       color: #34d399;
     }

     .dashboard-menu-footer {
       padding: 8px 16px;
       border-top: 1px solid rgba(51, 65, 85, 0.2);
       background: rgba(15, 23, 42, 0.3);
       border-radius: 0 0 10px 10px;
     }

     .dashboard-menu-footer button {
       background: rgba(76, 130, 255, 0.1);
       color: #94a3b8;
       border: 1px solid rgba(76, 130, 255, 0.2);
       border-radius: 6px;
       padding: 6px 12px;
       font-size: 0.75rem;
       cursor: pointer;
       transition: all 0.2s ease;
       width: 100%;
     }

     .dashboard-menu-footer button:hover {
       background: rgba(76, 130, 255, 0.15);
       color: #cbd5e1;
     }

     /* --- Customization Panel Styles --- */
     .customization-panel {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: rgba(28, 28, 30, 0.96);
       -webkit-backdrop-filter: saturate(180%) blur(40px);
       backdrop-filter: saturate(180%) blur(40px);
       border: 1px solid var(--apple-border);
       border-radius: var(--apple-radius-sheet);
       padding: 0;
       width: min(95%, 800px);
       max-width: 800px;
       max-height: min(90vh, 900px);
       overflow: hidden;
       z-index: 1001;
       opacity: 0;
       visibility: hidden;
       transition: opacity var(--apple-duration) var(--apple-ease),
         visibility var(--apple-duration) var(--apple-ease),
         transform var(--apple-duration) var(--apple-ease);
       box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55);
     }

     .customization-panel.show {
       opacity: 1;
       visibility: visible;
     }

     .customization-header {
       background: rgba(255, 255, 255, 0.06);
       color: var(--apple-text);
       padding: 1rem 1.25rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--apple-border);
     }

     .customization-header h3 {
       margin: 0;
       font-size: 1.125rem;
       font-weight: 600;
       letter-spacing: -0.02em;
     }

     .customization-content {
       padding: 0;
       max-height: calc(90vh - 72px);
       overflow-y: auto;
     }

     .customization-tabs {
       display: flex;
       background: rgba(0, 0, 0, 0.25);
       border-bottom: 1px solid var(--apple-border);
     }

     .tab-btn {
       flex: 1;
       padding: 0.85rem 1rem;
       min-height: var(--apple-tap-min);
       background: none;
       border: none;
       color: var(--apple-text-secondary);
       cursor: pointer;
       transition: color var(--apple-duration-fast) var(--apple-ease),
         background-color var(--apple-duration-fast) var(--apple-ease);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       font-size: 0.875rem;
       font-weight: 500;
       letter-spacing: -0.011em;
     }

     .tab-btn:hover {
       background: rgba(255, 255, 255, 0.06);
       color: var(--apple-text);
     }

     .tab-btn.active {
       background: rgba(41, 151, 255, 0.12);
       color: var(--apple-blue);
       border-bottom: 2px solid var(--apple-blue);
     }

     .customization-tab {
       display: none;
       padding: 20px;
     }

     .customization-tab.active {
       display: block;
     }

     .tab-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 1px solid rgba(51, 65, 85, 0.3);
     }

     .tab-header h4 {
       margin: 0;
       color: #e2e8f0;
       font-size: 1.1rem;
       font-weight: 600;
     }

     .action-btn {
       padding: 8px 16px;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       font-size: 0.85rem;
       font-weight: 500;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .action-btn.primary {
       background: rgba(59, 130, 246, 0.2);
       color: #3b82f6;
       border: 1px solid rgba(59, 130, 246, 0.3);
     }

     .action-btn.primary:hover {
       background: rgba(59, 130, 246, 0.3);
       transform: translateY(-1px);
     }

     .action-btn.secondary {
       background: rgba(51, 65, 85, 0.2);
       color: #94a3b8;
       border: 1px solid rgba(51, 65, 85, 0.3);
     }

     .action-btn.secondary:hover {
       background: rgba(51, 65, 85, 0.3);
       color: #e2e8f0;
     }

     .folders-list,
     .custom-cards-list,
     .longpress-config-list {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }

     .folder-item,
     .custom-card-item,
     .longpress-config-item {
       background: rgba(30, 41, 59, 0.3);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 12px;
       padding: 15px;
       transition: all 0.3s ease;
     }

     .folder-item:hover,
     .custom-card-item:hover,
     .longpress-config-item:hover {
       background: rgba(30, 41, 59, 0.5);
       border-color: rgba(59, 130, 246, 0.3);
       transform: translateY(-2px);
     }

     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 10px;
     }

     .item-title {
       color: #e2e8f0;
       font-weight: 600;
       font-size: 1rem;
     }

     .item-actions {
       display: flex;
       gap: 8px;
     }

     .item-action-btn {
       padding: 4px 8px;
       background: rgba(51, 65, 85, 0.3);
       border: 1px solid rgba(51, 65, 85, 0.5);
       border-radius: 6px;
       color: #94a3b8;
       cursor: pointer;
       font-size: 0.8rem;
       transition: all 0.3s ease;
     }

     .item-action-btn:hover {
       background: rgba(59, 130, 246, 0.2);
       color: #3b82f6;
       border-color: rgba(59, 130, 246, 0.3);
     }

     .item-description {
       color: #94a3b8;
       font-size: 0.85rem;
       margin-bottom: 8px;
     }

     .item-meta {
       display: flex;
       gap: 15px;
       font-size: 0.8rem;
       color: #64748b;
     }

     .meta-item {
       display: flex;
       align-items: center;
       gap: 4px;
       border-color: rgba(76, 130, 255, 0.3);
     }

     /* --- Styles pour les dossiers visuels --- */
     .card.folder-card {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
       border: 2px solid rgba(59, 130, 246, 0.3);
       position: relative;
       overflow: visible;
     }

     .card.folder-card:hover {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
       border-color: rgba(59, 130, 246, 0.5);
       transform: translateY(-2px) scale(1.02);
     }

     .folder-preview {
       position: absolute;
       top: 8px;
       right: 8px;
       display: flex;
       flex-wrap: wrap;
       gap: 2px;
       max-width: 60px;
       max-height: 40px;
       overflow: hidden;
     }

     .folder-preview-item {
       width: 12px;
       height: 12px;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 2px;
       border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .folder-card-count {
       position: absolute;
       bottom: 8px;
       right: 8px;
       background: rgba(59, 130, 246, 0.8);
       color: white;
       font-size: 0.7rem;
       padding: 2px 6px;
       border-radius: 10px;
       font-weight: 600;
     }

     .folder-icon {
       color: #3b82f6;
       filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
     }

     /* Animation pour l'ouverture de dossier */
    .folder-expanded {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      background: linear-gradient(135deg, #1e1e2f, #25253d);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 20px;
      padding: 20px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      z-index: 1002;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    }

    .folder-expanded.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

     .folder-expanded-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 1px solid rgba(59, 130, 246, 0.2);
     }

     .folder-expanded-title {
       color: #e2e8f0;
       font-size: 1.2rem;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
     }

     .folder-expanded-close {
       background: none;
       border: none;
       color: #94a3b8;
       cursor: pointer;
       padding: 5px;
       border-radius: 6px;
       transition: all 0.3s ease;
     }

     .folder-expanded-close:hover {
       background: rgba(59, 130, 246, 0.1);
       color: #3b82f6;
     }

     .folder-cards-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 15px;
       padding: 10px 0;
     }

     .folder-card-item {
       background: rgba(30, 41, 59, 0.3);
       border: 1px solid rgba(51, 65, 85, 0.2);
       border-radius: 12px;
       padding: 15px;
       text-align: center;
       transition: all 0.3s ease;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .folder-card-item:hover {
       background: rgba(30, 41, 59, 0.5);
       border-color: rgba(59, 130, 246, 0.3);
       transform: translateY(-2px);
     }

     .folder-card-item-icon {
       width: 32px;
       height: 32px;
       margin: 0 auto 8px;
       color: #3b82f6;
     }

     .folder-card-item-label {
       color: #e2e8f0;
       font-size: 0.8rem;
       font-weight: 500;
       margin: 0;
     }

     .empty-folder {
       text-align: center;
       padding: 40px 20px;
       color: #94a3b8;
     }

     .empty-folder i {
       width: 48px;
       height: 48px;
       margin-bottom: 16px;
       opacity: 0.5;
     }

     /* Animations pour les notifications */
     @keyframes slideIn {
       from {
         transform: translateX(100%);
         opacity: 0;
       }
       to {
         transform: translateX(0);
         opacity: 1;
       }
     }

     @keyframes slideOut {
       from {
         transform: translateX(0);
         opacity: 1;
       }
       to {
         transform: translateX(100%);
         opacity: 0;
       }
     }

     /* Styles pour les raccourcis clavier */
     .keyboard-shortcuts {
       position: fixed;
       bottom: 20px;
       left: 20px;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       padding: 1rem;
       border-radius: 8px;
       font-size: 0.8rem;
       z-index: 1000;
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s ease;
     }

     .keyboard-shortcuts.show {
       opacity: 1;
       visibility: visible;
     }

     .keyboard-shortcuts h4 {
       margin-bottom: 0.5rem;
       color: #ffd54f;
     }

     .keyboard-shortcuts kbd {
       background: #333;
       padding: 2px 6px;
       border-radius: 4px;
       font-family: monospace;
     }

     /* Animation fadeIn */
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(10px); }
       to { opacity: 1; transform: translateY(0); }
     }

     /* Responsive pour mobile */
     @media (max-width: 768px) {
       .search-container {
         position: relative;
         top: auto;
         left: auto;
         margin: 1rem;
         flex-direction: column;
         align-items: stretch;
       }

       .search-input {
         width: 100%;
         margin-bottom: 0.5rem;
       }

       .filter-buttons {
         justify-content: center;
         flex-wrap: wrap;
       }

       .theme-toggle {
         top: 20px;
         right: 20px;
         width: 35px;
         height: 35px;
         font-size: 0.9rem;
       }

       .keyboard-shortcuts {
         bottom: 100px;
         left: 10px;
         right: 10px;
       }
     }

     /* Responsive pour très petits écrans */
     @media (max-width: 480px) {
       .theme-toggle {
         top: 20px;
         right: 20px;
         width: 32px;
         height: 32px;
         font-size: 0.8rem;
       }

       .search-container {
         margin: 0.5rem;
       }

       .search-input {
         font-size: 0.8rem;
         padding: 0.5rem 0.8rem;
       }

       .filter-btn {
         font-size: 0.7rem;
         padding: 0.4rem 0.6rem;
       }
     }

     /* Styles pour le bouton de présentation */
     .presentation-toggle {
       position: fixed;
       top: 50%;
       right: 20px;
       transform: translateY(-50%);
       background: rgba(28, 28, 30, 0.88);
       color: var(--apple-text);
       border: 1px solid var(--apple-border);
       padding: 0;
       border-radius: 50%;
       cursor: pointer;
       font-size: 1.2rem;
       z-index: 1000;
       box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
       transition: transform var(--apple-duration) var(--apple-ease),
         background-color var(--apple-duration) var(--apple-ease),
         border-color var(--apple-duration) var(--apple-ease),
         box-shadow var(--apple-duration) var(--apple-ease);
       width: 48px;
       height: 48px;
       min-width: var(--apple-tap-min);
       min-height: var(--apple-tap-min);
       display: flex;
       align-items: center;
       justify-content: center;
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
     }

     .presentation-toggle:hover {
       background: rgba(44, 44, 46, 0.95);
       border-color: var(--apple-border-strong);
       transform: translateY(-50%) scale(1.04);
       box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
     }

     .presentation-toggle:active {
       transform: translateY(-50%) scale(0.97);
     }

     /* Styles pour le panneau de présentation */
     .presentation-panel {
       position: fixed;
       top: 0;
       right: 0;
       width: 100%;
       max-width: 500px;
       height: 100vh;
       height: 100dvh;
       background: rgba(0, 0, 0, 0.92);
       -webkit-backdrop-filter: saturate(180%) blur(40px);
       backdrop-filter: saturate(180%) blur(40px);
       z-index: 2000;
       transition: transform var(--apple-duration) var(--apple-ease-out);
       transform: translateX(100%);
       overflow-y: auto;
       box-shadow: -24px 0 80px rgba(0, 0, 0, 0.45);
       border-left: 1px solid var(--apple-border);
       padding-top: env(safe-area-inset-top);
       padding-bottom: env(safe-area-inset-bottom);
     }

     .presentation-panel.show {
       transform: translateX(0);
     }

     .presentation-content {
       padding: 2rem;
       height: 100%;
       display: flex;
       flex-direction: column;
     }

     .presentation-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .presentation-header h2 {
       color: var(--apple-text);
       font-size: 1.5rem;
       margin: 0;
       font-weight: 600;
       letter-spacing: -0.03em;
       background: linear-gradient(105deg, var(--apple-text) 0%, var(--apple-text) 40%, var(--apple-blue) 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
     }

     .close-presentation {
       background: var(--apple-glass-hover);
       color: var(--apple-text);
       border: 1px solid var(--apple-border);
       padding: 0;
       border-radius: 50%;
       cursor: pointer;
       font-size: 1rem;
       width: var(--apple-tap-min);
       height: var(--apple-tap-min);
       min-width: var(--apple-tap-min);
       min-height: var(--apple-tap-min);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background-color var(--apple-duration-fast) var(--apple-ease),
         transform var(--apple-duration-fast) var(--apple-ease);
     }

     .close-presentation:hover {
       background: rgba(255, 255, 255, 0.12);
       transform: scale(1.04);
     }

     .benefits-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 1.5rem;
       flex: 1;
       margin-bottom: 2rem;
     }

     .benefit-card {
       background: var(--apple-glass);
       border: 1px solid var(--apple-border);
       border-radius: var(--apple-radius-card);
       padding: 1.5rem;
       transition: transform var(--apple-duration) var(--apple-ease),
         background-color var(--apple-duration) var(--apple-ease),
         box-shadow var(--apple-duration) var(--apple-ease);
       animation: slideInRight 0.6s var(--apple-ease);
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
     }

     .benefit-card:hover {
       background: var(--apple-glass-hover);
       transform: translateY(-4px);
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
       border-color: var(--apple-border-strong);
     }

     .benefit-card:nth-child(1) { animation-delay: 0.1s; }
     .benefit-card:nth-child(2) { animation-delay: 0.2s; }
     .benefit-card:nth-child(3) { animation-delay: 0.3s; }
     .benefit-card:nth-child(4) { animation-delay: 0.4s; }
     .benefit-card:nth-child(5) { animation-delay: 0.5s; }
     .benefit-card:nth-child(6) { animation-delay: 0.6s; }

     @keyframes slideInRight {
       from {
         opacity: 0;
         transform: translateX(50px);
       }
       to {
         opacity: 1;
         transform: translateX(0);
       }
     }

     .benefit-icon {
       font-size: 2rem;
       margin-bottom: 1rem;
       display: block;
     }

     .benefit-card h3 {
       color: var(--apple-text);
       margin-bottom: 0.8rem;
       font-size: 1.2rem;
       font-weight: 600;
       letter-spacing: -0.02em;
     }

     .benefit-card p {
       color: var(--apple-text-secondary);
       line-height: 1.5;
       margin: 0;
       font-size: 0.95rem;
       letter-spacing: -0.011em;
     }

     .presentation-footer {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 2rem;
     }

     .testimonial-quote {
       background: rgba(255, 255, 255, 0.04);
       border-left: 3px solid var(--apple-blue);
       padding: 1.5rem;
       border-radius: 8px;
       margin-bottom: 1.5rem;
       font-style: italic;
     }

     .testimonial-quote p {
       color: #eee;
       margin: 0;
       font-size: 1rem;
       line-height: 1.6;
     }

     .cta-section {
       text-align: center;
     }

     .cta-text {
       color: var(--apple-text-secondary);
       margin-bottom: 1rem;
       font-size: 1rem;
     }

     /* Liens CTA dans le panneau présentation uniquement (évite d’écraser .cta-button global) */
     .presentation-panel .cta-button {
       display: inline-block;
       background: var(--apple-blue-deep);
       color: #fff;
       text-decoration: none;
       padding: 0.65rem 1.5rem;
       border-radius: var(--apple-radius-pill);
       font-weight: 500;
       letter-spacing: -0.015em;
       transition: filter var(--apple-duration-fast) var(--apple-ease),
         transform var(--apple-duration-fast) var(--apple-ease);
       box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35);
     }

     .presentation-panel .cta-button:hover {
       filter: brightness(1.08);
       transform: scale(1.02);
     }

     /* Responsive pour le panneau de présentation */
     @media (max-width: 768px) {
       .presentation-panel {
         max-width: 100%;
       }

       .presentation-toggle {
         right: max(12px, env(safe-area-inset-right));
         width: 48px;
         height: 48px;
         min-width: var(--apple-tap-min);
         min-height: var(--apple-tap-min);
         font-size: 1rem;
       }

       .presentation-content {
         padding: 1.5rem;
       }

       .benefits-grid {
         gap: 1rem;
       }

       .benefit-card {
         padding: 1rem;
       }
     }

     @media (max-width: 480px) {
       .presentation-toggle {
         right: 10px;
         width: 45px;
         height: 45px;
         font-size: 0.9rem;
       }

       .presentation-content {
         padding: 1rem;
       }

       .presentation-header h2 {
         font-size: 1.3rem;
       }
     }

     /* Styles pour la gestion des cartes (utilisateurs Pro) */
     .card-management-content {
       flex: 1;
       display: flex;
       flex-direction: column;
     }

     .management-header {
       text-align: center;
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .management-header h3 {
       color: #ffd54f;
       margin-bottom: 0.5rem;
       font-size: 1.3rem;
     }

     .management-header p {
       color: #ccc;
       font-size: 0.9rem;
       margin: 0;
     }

     .hidden-cards-section,
     .visible-cards-section {
       margin-bottom: 1.5rem;
     }

     .hidden-cards-section h4,
     .visible-cards-section h4 {
       color: #5c6bc0;
       margin-bottom: 1rem;
       font-size: 1rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
     }

     .hidden-cards-list,
     .visible-cards-list {
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       padding: 1rem;
       min-height: 100px;
       max-height: 200px;
       overflow-y: auto;
     }

     .no-hidden-cards {
       color: #666;
       text-align: center;
       font-style: italic;
       margin: 0;
       padding: 2rem 0;
     }

     .card-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0.8rem;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 6px;
       margin-bottom: 0.5rem;
       transition: all 0.3s ease;
     }

     .card-item:last-child {
       margin-bottom: 0;
     }

     .card-item:hover {
       background: rgba(255, 255, 255, 0.08);
       transform: translateX(5px);
     }

     .card-info {
       display: flex;
       align-items: center;
       gap: 0.8rem;
       flex: 1;
     }

     .card-icon {
       font-size: 1.2rem;
       width: 24px;
       text-align: center;
     }

     .card-label {
       color: #eee;
       font-weight: 500;
       font-size: 0.9rem;
     }

     .card-actions {
       display: flex;
       gap: 0.5rem;
     }

     .card-action-btn {
       background: none;
       border: 1px solid rgba(255, 255, 255, 0.2);
       color: #ccc;
       padding: 0.3rem 0.6rem;
       border-radius: 4px;
       cursor: pointer;
       font-size: 0.8rem;
       transition: all 0.3s ease;
     }

     .card-action-btn:hover {
       background: rgba(255, 255, 255, 0.1);
       color: #fff;
     }

     .card-action-btn.hide {
       background: #ff4757;
       border-color: #ff4757;
       color: white;
     }

     .card-action-btn.show {
       background: #4caf50;
       border-color: #4caf50;
       color: white;
     }

     .card-action-btn.hide:hover {
       background: #ff3742;
     }

     .card-action-btn.show:hover {
       background: #45a049;
     }

     .management-actions {
       display: flex;
       gap: 1rem;
       justify-content: center;
       margin-top: auto;
       padding-top: 1.5rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
     }

     .action-btn {
       padding: 0.8rem 1.5rem;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       font-weight: 600;
       transition: all 0.3s ease;
       font-size: 0.9rem;
     }

     .action-btn.primary {
       background: linear-gradient(90deg, #5c6bc0, #6c5ce7);
       color: white;
     }

     .action-btn.primary:hover {
       background: linear-gradient(90deg, #4a5bb8, #5a4fcf);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }

     .action-btn.secondary {
       background: #666;
       color: white;
     }

     .action-btn.secondary:hover {
       background: #555;
       transform: translateY(-2px);
     }

     /* Animation pour les cartes masquées/visibles */
     .card-item.hidden {
       opacity: 0.6;
       background: rgba(255, 71, 87, 0.1);
       border-color: rgba(255, 71, 87, 0.3);
     }

     .card-item.visible {
       opacity: 1;
       background: rgba(76, 175, 80, 0.1);
       border-color: rgba(76, 175, 80, 0.3);
     }

     /* Responsive pour la gestion des cartes */
     @media (max-width: 768px) {
       .card-item {
         flex-direction: column;
         align-items: stretch;
         gap: 0.5rem;
       }

       .card-info {
         justify-content: center;
       }

       .card-actions {
         justify-content: center;
       }

       .management-actions {
         flex-direction: column;
       }

       .action-btn {
         width: 100%;
       }
     }

    /* Page d'accueil centrée sur les cartes */
    body.index-cards-focus {
      min-height: 100vh;
    }

    body.index-cards-focus .tools-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 4.75rem 1.25rem 1.5rem;
      box-sizing: border-box;
    }

    body.index-cards-focus .section-header--cards-focus {
      margin-bottom: 1.25rem;
      text-align: center;
    }

    body.index-cards-focus .index-focus-title {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      letter-spacing: -0.045em;
      line-height: 1.1;
      color: var(--apple-text);
      margin: 0 0 0.35rem;
    }

    body.index-cards-focus .index-focus-subtitle {
      font-size: 1.0625rem;
      color: var(--apple-text-secondary);
      letter-spacing: -0.011em;
      margin: 0;
    }

    body.index-cards-focus main#cardContainer {
      flex: 1;
      width: 100%;
      min-height: 42vh;
      align-content: start;
    }

    footer.index-footer-minimal {
      margin-top: auto;
      padding: 0.75rem 1rem 1.25rem;
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
      background: transparent;
      border-top: none;
    }

    footer.index-footer-minimal .footer-links {
      font-size: 0.8125rem;
      color: var(--apple-text-tertiary);
      gap: 0.35rem;
    }

    footer.index-footer-minimal .footer-links a {
      color: var(--apple-text-secondary);
    }

    footer.index-footer-minimal .footer-links a:hover {
      color: var(--apple-blue);
    }

    body.light-theme.index-cards-focus .index-focus-title {
      color: #1d1d1f;
    }

    body.light-theme.index-cards-focus .index-focus-subtitle {
      color: #6e6e73;
    }

    /* Menus contextuels (index) — alignés sur les surfaces Apple */
    body.index-cards-focus .aide-menu,
    body.index-cards-focus .feed-stats-menu,
    body.index-cards-focus .subscription-pricing-menu,
    body.index-cards-focus .auth-menu,
    body.index-cards-focus .dashboard-menu {
      background: rgba(28, 28, 30, 0.94);
      border: 1px solid var(--apple-border);
      border-radius: var(--apple-radius-sheet);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      backdrop-filter: saturate(180%) blur(24px);
    }

    body.index-cards-focus .aide-menu-header,
    body.index-cards-focus .feed-stats-menu-header,
    body.index-cards-focus .subscription-pricing-menu-header,
    body.index-cards-focus .auth-menu-header,
    body.index-cards-focus .dashboard-menu-header {
      background: rgba(255, 255, 255, 0.04);
      border-bottom-color: var(--apple-border);
    }

    body.index-cards-focus .aide-menu-header h4,
    body.index-cards-focus .feed-stats-menu-header h4,
    body.index-cards-focus .subscription-pricing-menu-header h4,
    body.index-cards-focus .auth-menu-header h4,
    body.index-cards-focus .dashboard-menu-header h4 {
      color: var(--apple-text);
      font-weight: 600;
    }

    body.light-theme.index-cards-focus .popup-overlay {
      background: rgba(0, 0, 0, 0.35);
    }

    body.light-theme.index-cards-focus .aide-menu,
    body.light-theme.index-cards-focus .feed-stats-menu,
    body.light-theme.index-cards-focus .subscription-pricing-menu,
    body.light-theme.index-cards-focus .auth-menu,
    body.light-theme.index-cards-focus .dashboard-menu {
      background: rgba(255, 255, 255, 0.94);
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
    }