/* ===================================================================
   COSMIC NUMBERS — IDENTITÉ « NOCTURNE » v3.6.0
   ===================================================================
   Évolution de l'identité cosmique d'origine. Le ciel nocturne et l'or
   sont conservés ; ce qui disparaît, ce sont les effets qui faisaient
   « application » plutôt que « cabinet » : glassmorphisme, halos néon,
   dégradés à trois couleurs sur les titres.
   La profondeur vient désormais de la composition et du silence autour
   des éléments, pas des effets.

   Les noms de variables sont inchangés : toute la feuille suit
   automatiquement la nouvelle palette.
   =================================================================== */

   /* ===================================================================
      VARIABLES COSMIQUES
      =================================================================== */

   :root {
       /* Palette — bleus nuit profonds, or unique comme couleur d'appoint */
       --cosmic-deep: #0C1022;      /* fond général */
       --cosmic-dark: #151B34;      /* surfaces */
       --cosmic-purple: #1D2444;    /* surfaces élevées */
       --cosmic-blue: #2A3157;      /* filets et bordures */
       --cosmic-violet: #6F6DEA;    /* accent secondaire — service vibrations */
       --cosmic-gold: #D8A441;      /* accent principal — service profil */
       --cosmic-silver: #98A0C4;    /* texte secondaire */
       --cosmic-white: #EEF0F8;     /* texte principal, jamais du blanc pur */

       /* Dégradés — deux teintes voisines au maximum, plus de tricolore */
       --gradient-cosmic: linear-gradient(135deg, #8E8CF2 0%, #6F6DEA 100%);
       --gradient-stellar: linear-gradient(135deg, #6F6DEA 0%, #4B49C4 100%);
       --gradient-nebula: linear-gradient(135deg, #2A3157 0%, #1D2444 100%);
       --gradient-aurora: linear-gradient(135deg, #6F6DEA 0%, #4E9BD1 100%);
       --gradient-gold: linear-gradient(135deg, #E8BC66 0%, #D8A441 100%);

       /* Ombres portées plutôt que halos lumineux */
       --glow-cosmic: 0 8px 28px rgba(6, 9, 22, 0.55);
       --glow-stellar: 0 14px 44px rgba(6, 9, 22, 0.6);
       --glow-gold: 0 8px 26px rgba(120, 84, 20, 0.35);

       /* Surfaces — opaques : le glassmorphisme est retiré */
       --glass-cosmic: #151B34;   /* surface courante */
       --glass-border: rgba(185, 190, 220, 0.16);
       --glass-strong: #1D2444;   /* surface elevee */

       /* Typographie */
       --font-display: 'Cormorant Garamond', Georgia, serif;
       --font-body: 'Inter', system-ui, sans-serif;
   }
   
   /* ===================================================================
      RESET ET BASE
      =================================================================== */
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   body {
       font-family: var(--font-body);
       background:
           radial-gradient(120% 80% at 15% -10%, #1B2246 0%, transparent 60%),
           radial-gradient(100% 70% at 88% 0%, #2A1F3E 0%, transparent 55%),
           var(--cosmic-deep);
       background-attachment: fixed;
       color: var(--cosmic-white);
       min-height: 100vh;
       overflow-x: hidden;
       position: relative;
       -webkit-font-smoothing: antialiased;
       line-height: 1.65;
   }
   
   /* ===================================================================
      ANIMATION DES ÉTOILES
      =================================================================== */
   
   #stars, #stars2, #stars3 {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
   }
   
   #stars {
       background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="0.5" fill="white" opacity="0.8"/><circle cx="80" cy="40" r="0.3" fill="white" opacity="0.6"/><circle cx="40" cy="70" r="0.4" fill="white" opacity="0.7"/><circle cx="90" cy="80" r="0.2" fill="white" opacity="0.5"/><circle cx="10" cy="90" r="0.3" fill="white" opacity="0.6"/></svg>') repeat;
       animation: sparkle 50s linear infinite;
   }
   
   #stars2 {
       background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="30" cy="10" r="0.4" fill="rgba(102, 126, 234, 0.8)"/><circle cx="70" cy="60" r="0.3" fill="rgba(139, 92, 246, 0.6)"/><circle cx="10" cy="50" r="0.2" fill="rgba(251, 191, 36, 0.7)"/></svg>') repeat;
       animation: sparkle 100s linear infinite;
   }
   
   #stars3 {
       background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="60" cy="30" r="0.2" fill="rgba(236, 72, 153, 0.5)"/><circle cx="15" cy="70" r="0.3" fill="rgba(59, 130, 246, 0.4)"/></svg>') repeat;
       animation: sparkle 150s linear infinite;
   }
   
   @keyframes sparkle {
       from { transform: translateY(0px); }
       to { transform: translateY(-100vh); }
   }
   
   /* ===================================================================
      CONTAINER PRINCIPAL
      =================================================================== */
   
   .container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 2rem;
       position: relative;
       z-index: 10;
   }
   
   /* ===================================================================
      HEADER COSMIQUE
      =================================================================== */
   
   .cosmic-header {
       text-align: center;
       margin-bottom: 3rem;
       position: relative;
   }
   
   .logo-container {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       margin-bottom: 1rem;
   }
   
   .logo-star {
       width: 60px;
       height: 60px;
       filter: drop-shadow(var(--glow-gold));
       animation: rotate 10s linear infinite;
   }
   
   @keyframes rotate {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
   }
   
   .cosmic-title {
       display: flex;
       flex-direction: column;
       align-items: center;
       font-family: var(--font-display);
       font-size: 4.25rem;
       font-weight: 400;
       line-height: 0.92;
       letter-spacing: 0.01em;
   }
   
   .cosmic-text {
       color: var(--cosmic-white);
   }
   
   .numbers-text {
       color: var(--cosmic-gold);
       font-size: 3.5rem;
       font-style: italic;
       font-weight: 300;
   }
   
   .cosmic-subtitle {
       font-size: 1.2rem;
       color: var(--cosmic-silver);
       font-weight: 300;
       margin-bottom: 1rem;
       opacity: 0.9;
   }
   
   .version-badge {
       display: inline-block;
       padding: 0.5rem 1rem;
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       border-radius: 3px;
       font-size: 0.875rem;
       font-weight: 500;
   }
   
   /* ===================================================================
      SÉLECTEUR DE LANGUE
      =================================================================== */

   .langue-selecteur {
       display: inline-flex;
       gap: 0.25rem;
       margin-top: 1rem;
       padding: 0.25rem;
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       border-radius: 3px;
   }

   .langue-btn {
       padding: 0.4rem 1rem;
       border: none;
       border-radius: 3px;
       background: transparent;
       color: var(--cosmic-silver);
       font-family: inherit;
       font-size: 0.8rem;
       font-weight: 500;
       letter-spacing: 0.5px;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .langue-btn:hover {
       color: var(--cosmic-white);
       background: var(--glass-border);
   }

   .langue-btn.active {
       background: var(--glass-strong);
       color: var(--cosmic-white);
       box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
   }

   .langue-btn:focus-visible {
       outline: 2px solid var(--cosmic-violet);
       outline-offset: 2px;
   }

   /* ===================================================================
      NAVIGATION COSMIQUE
      =================================================================== */
   
   .cosmic-nav {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin-bottom: 3rem;
   }
   
   .nav-btn {
       padding: 1rem 2rem;
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       border-radius: 3px;
       color: var(--cosmic-white);
       font-size: 1rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .nav-btn:hover {
       background: var(--glass-strong);
       border-color: var(--cosmic-violet);
       box-shadow: var(--glow-cosmic);
       transform: translateY(-2px);
   }
   
   .nav-btn.active {
       background: var(--gradient-stellar);
       border-color: transparent;
       box-shadow: var(--glow-stellar);
   }
   
   /* ===================================================================
      SECTIONS
      =================================================================== */
   
   .cosmic-section {
       display: none;
       animation: fadeInUp 0.6s ease forwards;
   }
   
   .cosmic-section.active {
       display: block;
   }
   
   .section-header {
       text-align: center;
       margin-bottom: 2rem;
   }
   
   .section-title {
       font-family: var(--font-display);
       font-size: 2.4rem;
       font-weight: 400;
       color: var(--cosmic-white);
       letter-spacing: 0.01em;
       margin-bottom: 0.5rem;
   }
   
   .section-description {
       font-size: 1.1rem;
       color: var(--cosmic-silver);
       opacity: 0.8;
   }
   
   /* ===================================================================
      FORMULAIRES COSMIQUES
      =================================================================== */
   
   .cosmic-form-container, .compatibility-container {
       display: grid;
       gap: 2rem;
       margin-bottom: 3rem;
   }
   
   .compatibility-container {
       grid-template-columns: 1fr auto 1fr;
       align-items: start;
   }
   
   .cosmic-card {
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       border-radius: 4px;
       padding: 2rem;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }
   
   .cosmic-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: var(--gradient-cosmic);
   }
   
   .cosmic-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--glow-cosmic);
       border-color: var(--cosmic-violet);
   }
   
   .card-header {
       margin-bottom: 1.5rem;
   }
   
   .card-title {
       font-size: 1.5rem;
       font-weight: 600;
       text-align: center;
       background: var(--gradient-gold);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.5rem;
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
   }
   
   .form-group.full-width {
       grid-column: 1 / -1;
   }
   
   .cosmic-label {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.9rem;
       font-weight: 500;
       color: var(--cosmic-silver);
       margin-bottom: 0.5rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .label-icon {
       font-size: 1.1rem;
   }
   
   .cosmic-input {
       width: 100%;
       padding: 1rem;
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       border-radius: 3px;
       color: var(--cosmic-white);
       font-size: 1rem;
       transition: all 0.3s ease;
   }
   
   .cosmic-input:focus {
       outline: none;
       border-color: var(--cosmic-violet);
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
       background: var(--glass-strong);
   }
   
   .cosmic-input::placeholder {
       color: rgba(255, 255, 255, 0.5);
   }
   
   /* ===================================================================
      DIVIDER COSMIQUE
      =================================================================== */
   
   .cosmic-divider {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem;
   }
   
   .divider-icon {
       font-size: 2rem;
       color: var(--cosmic-white);
       animation: pulse 2s infinite;
   }
   
   /* ===================================================================
      BOUTONS COSMIQUES
      =================================================================== */
   
   .cosmic-actions {
       display: flex;
       justify-content: center;
       gap: 1.5rem;
       margin-bottom: 3rem;
   }
   
   .cosmic-btn {
       position: relative;
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 1.05rem 2.2rem;
       border: none;
       border-radius: 3px;
       font-size: 0.95rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s ease;
       text-transform: uppercase;
       letter-spacing: 0.09em;
       overflow: hidden;
   }
   
   .cosmic-btn.primary {
       background: var(--gradient-stellar);
       color: var(--cosmic-white);
       box-shadow: var(--glow-cosmic);
   }
   
   .cosmic-btn.secondary {
       background: var(--glass-cosmic);
       border: 1px solid var(--glass-border);
       color: var(--cosmic-white);
   }
   
   .cosmic-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4);
   }
   
   .btn-shimmer {
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
       transition: left 0.6s;
   }
   
   .cosmic-btn:hover .btn-shimmer {
       left: 100%;
   }
   
   .btn-icon {
       font-size: 1.3rem;
   }
   
   /* ===================================================================
      LOADING COSMIQUE
      =================================================================== */
   
   .cosmic-loading {
       display: none;
       text-align: center;
       margin: 3rem 0;
   }
   
   .cosmic-loading.active {
       display: block;
   }
   
   .loading-stars {
       display: flex;
       justify-content: center;
       gap: 0.5rem;
       margin-bottom: 1rem;
   }
   
   .loading-stars .star {
       width: 12px;
       height: 12px;
       background: var(--gradient-gold);
       border-radius: 50%;
       animation: bounce 1.4s ease-in-out infinite both;
   }
   
   .loading-stars .star:nth-child(1) { animation-delay: -0.32s; }
   .loading-stars .star:nth-child(2) { animation-delay: -0.16s; }
   
   @keyframes bounce {
       0%, 80%, 100% { transform: scale(0); }
       40% { transform: scale(1); }
   }
   
   .loading-text {
       font-size: 1.1rem;
       color: var(--cosmic-silver);
       font-style: italic;
   }
   
   /* ===================================================================
      RÉSULTATS
      =================================================================== */
   
   .results-container {
       display: grid;
       grid-template-columns: 1fr;
       gap: 2rem;
       margin-bottom: 3rem;
   }
   
   .result-card {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.6s ease;
   }
   
   .result-card.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .result-title {
       font-family: var(--font-display);
       font-size: 1.9rem;
       font-weight: 400;
       text-align: center;
       color: var(--cosmic-gold);
       letter-spacing: 0.01em;
   }
   
   .result-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.875rem 0;
       border-bottom: 1px solid var(--glass-border);
       margin-bottom: 0.5rem;
   }
   
   .result-item:last-child {
       border-bottom: none;
       margin-bottom: 0;
   }
   
   .result-label {
       font-weight: 500;
       color: var(--cosmic-silver);
       opacity: 0.9;
   }
   
   .result-value {
       font-weight: 700;
       color: var(--cosmic-white);
       font-size: 1.2rem;
   }
   
   .result-value.highlight {
       background: var(--gradient-gold);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       font-size: 1.4rem;
   }
   
   /* ===================================================================
      TABLE D'INCLUSION
      =================================================================== */
   
   /* ===================================================================
      TABLE D'INCLUSION
      ===================================================================
      Grille compacte plutot qu'un tableau pleine largeur : la table
      d'inclusion est une figure a lire d'un coup d'oeil, pas un tableau
      de donnees a parcourir. Chaque case porte sa frequence et le chiffre
      concerne — auparavant il fallait deviner la correspondance.
      Les etats reprennent exactement les seuils utilises par l'analyse IA.
      =================================================================== */

   .inclusion-grille {
       display: grid;
       grid-template-columns: repeat(3, 76px);
       gap: 4px;
       margin: 1.75rem 0 1.25rem;
   }

   .inclusion-case {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 0.1rem;
       height: 76px;
       border: 1px solid var(--glass-border);
       border-radius: 2px;
       background: rgba(255, 255, 255, 0.02);
       transition: border-color 0.25s ease, background 0.25s ease;
   }

   .case-frequence {
       font-family: var(--font-display);
       font-size: 1.7rem;
       font-weight: 500;
       line-height: 1;
       font-variant-numeric: tabular-nums;
       color: var(--cosmic-white);
   }

   /* Le chiffre concerne reste discret : c'est une etiquette, pas la donnee */
   .case-chiffre {
       font-size: 0.62rem;
       letter-spacing: 0.14em;
       color: var(--cosmic-silver);
       opacity: 0.65;
   }

   .inclusion-case.etat-absent {
       border-color: rgba(196, 99, 143, 0.55);
       background: rgba(196, 99, 143, 0.07);
   }

   .inclusion-case.etat-absent .case-frequence {
       color: #E29CB6;
   }

   .inclusion-case.etat-exces {
       border-color: rgba(216, 164, 65, 0.6);
       background: rgba(216, 164, 65, 0.07);
   }

   .inclusion-case.etat-exces .case-frequence {
       color: var(--cosmic-gold);
   }

   .inclusion-case:hover {
       border-color: var(--cosmic-gold);
   }

   .inclusion-legende {
       display: flex;
       flex-wrap: wrap;
       gap: 1.4rem;
       font-size: 0.76rem;
       color: var(--cosmic-silver);
       margin-bottom: 0.9rem;
   }

   .inclusion-legende span {
       display: inline-flex;
       align-items: center;
       gap: 0.45rem;
   }

   .inclusion-legende .pastille {
       width: 9px;
       height: 9px;
       border-radius: 1px;
       border: 1px solid var(--glass-border);
   }

   .inclusion-legende .pastille.etat-absent {
       border-color: rgba(196, 99, 143, 0.55);
       background: rgba(196, 99, 143, 0.35);
   }

   .inclusion-legende .pastille.etat-exces {
       border-color: rgba(216, 164, 65, 0.6);
       background: rgba(216, 164, 65, 0.4);
   }

   /* Les chiffres manquants etaient dans un encadre rouge pleine largeur,
      qui criait plus fort que la grille elle-meme. */
   .inclusion-manquants {
       font-size: 0.9rem;
       color: var(--cosmic-silver);
       margin: 0;
   }

   .inclusion-manquants strong {
       color: #E29CB6;
       font-weight: 500;
   }

   
   .compatibility-content {
       text-align: center;
       padding: 2rem;
   }
   
   /* ===================================================================
      FOOTER
      =================================================================== */
   
   .cosmic-footer {
       text-align: center;
       margin-top: 4rem;
       padding: 2rem 0;
       border-top: 1px solid var(--glass-border);
       color: var(--cosmic-silver);
       opacity: 0.8;
   }
   
   .footer-version {
       font-size: 0.875rem;
       opacity: 0.6;
       margin-top: 0.5rem;
   }
   
   /* ===================================================================
      ANIMATIONS
      =================================================================== */
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes pulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.05); }
   }
   
   /* ===================================================================
      RESPONSIVE
      =================================================================== */
   
   @media (max-width: 768px) {
       .container {
           padding: 1rem;
       }
       
       .cosmic-title {
           font-size: 2.5rem;
       }
       
       .numbers-text {
           font-size: 2rem;
       }
       
       .compatibility-container {
           grid-template-columns: 1fr;
           gap: 1rem;
       }
       
       .cosmic-divider {
           order: 2;
       }
       
       .form-grid {
           grid-template-columns: 1fr;
       }
       
       .results-container {
           grid-template-columns: 1fr;
       }
       
       .cosmic-actions {
           flex-direction: column;
           align-items: center;
       }
       
       .cosmic-btn {
           width: 100%;
           max-width: 300px;
       }
       
       .cosmic-nav {
           flex-direction: column;
           align-items: center;
       }
       
       .nav-btn {
           width: 100%;
           max-width: 280px;
       }
   }
   
   @media (max-width: 480px) {
       .cosmic-title {
           font-size: 2rem;
       }
       
       .numbers-text {
           font-size: 1.5rem;
       }
       
       .section-title {
           font-size: 2rem;
       }
       
       .cosmic-card {
           padding: 1.5rem;
       }
   }

/* ===================================================================
   GESTION CONDITIONELLE DES RÉSULTATS
   =================================================================== */

/* Par défaut, masquer la deuxième carte en mode personnel */
body .results-container #resultatsProfil2 {
    display: none;
}

/* Afficher la deuxième carte uniquement en mode compatibilité */
.cosmic-section[data-mode="compatibility"] ~ .results-container #resultatsProfil2 {
    display: block;
}

/* Styles pour l'identité cosmique */
.cosmic-identity {
    margin-bottom: 1.5rem;
}

.identity-card {
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.identity-card h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.birth-date {
    color: var(--cosmic-silver);
    font-size: 0.9rem;
    opacity: 0.8;
}

.cosmic-numbers {
    margin-top: 1rem;
}

/* ===================================================================
   NOUVELLES SECTIONS NUMÉRIQUES v2.1.0
   =================================================================== */

   .cosmic-section-header {
    margin: 2rem 0 1.5rem 0;
    text-align: center;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cosmic-white);
    margin-bottom: 0.5rem;
}

.section-placeholder {
    color: var(--cosmic-silver);
    font-style: italic;
    opacity: 0.7;
}

/* PYRAMIDE DES 3 NOMBRES */
.pyramide-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pyramide-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.pyramide-item:hover {
    background: var(--glass-strong);
    transform: translateY(-2px);
}

.pyramide-item.importance-1 {
    border-left: 2px solid var(--cosmic-gold);
}

.pyramide-item.importance-2 {
    border-left: 2px solid rgba(216, 164, 65, 0.55);
}

.pyramide-item.importance-3 {
    border-left: 2px solid rgba(216, 164, 65, 0.28);
}

/* L'importance se lit a la taille du nombre, du plus influent au moins */
.importance-1 .pyramide-number { width: 74px; height: 74px; font-size: 2.5rem; }
.importance-2 .pyramide-number { width: 64px; height: 64px; font-size: 2.05rem; }
.importance-3 .pyramide-number { width: 56px; height: 56px; font-size: 1.7rem; }

.pyramide-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(216, 164, 65, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--cosmic-gold);
    flex-shrink: 0;
    line-height: 1;
}

.pyramide-content h5 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
    color: var(--cosmic-white);
}

.pyramide-description {
    font-size: 0.95rem;
    color: var(--cosmic-silver);
    line-height: 1.65;
    max-width: 68ch;
}

/* NOMBRES SECRETS */
.secrets-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.secret-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.secret-item:hover {
    background: var(--glass-strong);
    border-color: rgba(139, 92, 246, 0.5);
}

.secret-number {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(111, 109, 234, 0.5);
    color: #A9A7F4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cosmic-white);
    flex-shrink: 0;
}

.secret-content h5 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
    color: var(--cosmic-white);
}

.secret-description {
    font-size: 0.95rem;
    color: var(--cosmic-silver);
    line-height: 1.65;
    max-width: 68ch;
}

/* ANALYSE PROFONDE */
.analyse-container {
    margin-bottom: 1rem;
}

.analyse-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--glass-cosmic);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.analyse-item:hover {
    background: var(--glass-strong);
    border-color: rgba(251, 191, 36, 0.5);
}

.analyse-number {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(216, 164, 65, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--cosmic-gold);
    flex-shrink: 0;
}

.analyse-content h5 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--cosmic-white);
}

.analyse-description {
    font-size: 0.95rem;
    color: var(--cosmic-silver);
    line-height: 1.65;
    max-width: 68ch;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .pyramide-item,
    .secret-item,
    .analyse-item {
        flex-direction: column;
        text-align: center;
    }
    
    .pyramide-number,
    .secret-number,
    .analyse-number {
        align-self: center;
    }
}

/* ===================================================================
   PAGE D'ACCUEIL v2.1.0
   =================================================================== */

/* HERO SECTION */
.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    min-height: 60vh;
}

.hero-content {
    text-align: left;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin-bottom: 1.5rem;
    color: var(--cosmic-white);
    text-wrap: balance;
}

/* L'or ne surligne qu'un fragment du titre : c'est ce qui reste
   de l'ancien degrade, reduit a un accent unique. */
.hero-gradient {
    color: var(--cosmic-gold);
    font-style: italic;
    font-weight: 300;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--cosmic-silver);
    line-height: 1.6;
    margin-bottom: 2rem;
}

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

.cosmic-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(111,109,234,0.16) 0%, transparent 68%);
    border: 1px solid rgba(216, 164, 65, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 60px rgba(111, 109, 234, 0.14);
}

.rotating-numbers {
    animation: rotate 20s linear infinite;
    width: 200px;
    height: 200px;
    position: relative;
}

.rotating-numbers span {
    position: absolute;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--cosmic-gold);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
}

.rotating-numbers span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.rotating-numbers span:nth-child(2) { top: 20%; right: 10%; }
.rotating-numbers span:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); }
.rotating-numbers span:nth-child(4) { bottom: 20%; right: 10%; }
.rotating-numbers span:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); }
.rotating-numbers span:nth-child(6) { bottom: 20%; left: 10%; }
.rotating-numbers span:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); }
.rotating-numbers span:nth-child(8) { top: 20%; left: 10%; }
.rotating-numbers span:nth-child(9) { top: 30%; left: 50%; transform: translateX(-50%); }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* PRESENTATION SECTION */
.presentation-section {
    margin-bottom: 4rem;
}

.presentation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.presentation-card {
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.presentation-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-cosmic);
    border-color: var(--cosmic-violet);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.presentation-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--cosmic-white);
}

.presentation-card p {
    color: var(--cosmic-silver);
    line-height: 1.6;
}

/* BENEFITS SECTION */
.benefits-section {
    margin-bottom: 4rem;
}

.benefits-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--cosmic-white);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(10px);
    background: var(--glass-strong);
}

.benefit-number {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    border-radius: 50%;
    flex-shrink: 0;
}

.benefit-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--cosmic-white);
}

.benefit-content p {
    font-size: 0.9rem;
    color: var(--cosmic-silver);
    line-height: 1.4;
}

/* CTA SECTION */
.cta-section {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-cosmic);
}

.cta-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--cosmic-white);
}

.cta-description {
    font-size: 1.2rem;
    color: var(--cosmic-silver);
    margin-bottom: 2rem;
}

.cta-btn {
    font-size: 1.2rem;
    padding: 1.5rem 3rem;
    transform: scale(1.1);
    margin: 0 auto; /* AJOUT : Centrer le bouton */
    display: block;  /* AJOUT : Comportement block pour centrage */
}

.cta-btn:hover {
    transform: scale(1.15) translateY(-3px);
}

/* ===================================================================
   MASQUER ÉLÉMENTS SUR PAGE D'ACCUEIL
   =================================================================== */

/* Masquer les boutons d'action quand on est sur l'accueil */
#home-section.active ~ .cosmic-actions {
    display: none;
}

/* Masquer les résultats quand on est sur l'accueil */
#home-section.active ~ .results-container {
    display: none;
}

/* Alternative plus spécifique si la première ne fonctionne pas */
body:has(#home-section.active) .cosmic-actions,
body:has(#home-section.active) .results-container {
    display: none;
}

/* ===================================================================
   BOUTONS D'EXPORT v2.1.0
   =================================================================== */

   .export-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--cosmic-silver);
    box-shadow: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.export-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Boutons de partage (copier, PDF, TXT) — aucune règle n'existait, ils
   héritaient donc du rendu natif du navigateur. Même traitement que les
   exports : actions secondaires, en contour. */
.share-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--cosmic-silver);
    box-shadow: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.share-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.share-btn:hover {
    border-color: var(--cosmic-gold);
    color: var(--cosmic-gold);
    transform: translateY(-2px);
}

.export-btn:hover {
    border-color: var(--cosmic-gold);
    color: var(--cosmic-gold);
    transform: translateY(-2px);
}

/* Animation d'apparition différée */
.export-btn:nth-of-type(3) {
    transition-delay: 0.1s;
}

.export-btn:nth-of-type(4) {
    transition-delay: 0.2s;
}

/* Responsive pour les boutons d'export */
@media (max-width: 768px) {
    .cosmic-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .export-btn {
        font-size: 0.9rem;
        padding: 1rem 1.5rem;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .cosmic-circle {
        width: 200px;
        height: 200px;
    }
    
    .rotating-numbers {
        width: 150px;
        height: 150px;
    }
    
    .rotating-numbers span {
        font-size: 1.5rem;
        width: 30px;
        height: 30px;
    }
    
    .presentation-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .benefit-item {
        flex-direction: column;
        text-align: center;
    }
}

/* ===================================================================
   THÈME COSMIQUE IA - v2.1.0
   =================================================================== */

/* Bouton de génération du thème cosmique IA */
.ai-theme-btn {
    background: var(--gradient-gold);
    color: #1A1405;
    font-weight: 600;
    box-shadow: var(--glow-gold);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    position: relative;
}

.ai-theme-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-theme-btn:hover {
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6);
    transform: translateY(-5px) scale(1.02);
}

.ai-theme-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(0);
}

/* Card du thème cosmique */
.theme-cosmique-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    margin-top: 2rem;
}

.theme-cosmique-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.theme-cosmique-card::before {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
}

/* Badge IA */
.ai-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #c4b5fd;
    margin-top: 0.5rem;
}

/* Gradient cosmique pour le titre */
.cosmic-gradient {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Contenu du thème généré */
.theme-content {
    padding: 2rem;
    line-height: 1.8;
}

/* Titres dans le contenu */
.theme-content .theme-h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    color: var(--cosmic-white);
}

.theme-content .theme-h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 2.4rem 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--cosmic-white);
    text-transform: none;
}

.theme-content .theme-h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 1.9rem 0 0.6rem 0;
    color: var(--cosmic-gold);
}

/* Niveau 4 : blocs imbriqués sous un sous-titre (un chiffre absent, par
   exemple). Volontairement plus sobre que le h3 pour marquer la hiérarchie. */
.theme-content .theme-h4 {
    font-size: 1.08rem;
    font-weight: 600;
    margin: 1.1rem 0 0.5rem 0;
    color: var(--cosmic-gold);
    letter-spacing: 0.3px;
}

/* Paragraphes */
.theme-content .theme-paragraph {
    margin-bottom: 1.15rem;
    color: var(--cosmic-silver);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 72ch;
}

/* Listes */
.theme-content .theme-list {
    max-width: 72ch;
    margin: 1rem 0;
    padding-left: 2rem;
}

.theme-content .theme-list li {
    margin-bottom: 0.75rem;
    color: var(--cosmic-silver);
    line-height: 1.6;
}

.theme-content .theme-list li::marker {
    color: var(--cosmic-violet);
}

/* Mise en forme du texte */
.theme-content strong {
    color: var(--cosmic-white);
    font-weight: 600;
}

.theme-content em {
    color: var(--cosmic-gold);
    font-style: italic;
}

/* Emojis cosmiques */
.theme-content .cosmic-emoji {
    display: inline-block;
    font-size: 1.2em;
    margin: 0 0.2em;
    animation: pulse 2s infinite;
}

/* Tableaux dans le contenu */
.theme-content table,
.theme-content .theme-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--glass-cosmic);
    border-radius: 3px;
    overflow: hidden;
}

.theme-content table th,
.theme-content table td,
.theme-content .theme-table th,
.theme-content .theme-table td {
    padding: 1rem;
    text-align: left;
    border: 1px solid var(--glass-border);
}

.theme-content table th,
.theme-content .theme-table th {
    background: rgba(139, 92, 246, 0.3);
    font-weight: 600;
    color: var(--cosmic-white);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.theme-content table td,
.theme-content .theme-table td {
    color: var(--cosmic-silver);
    font-size: 0.95rem;
}

.theme-content table tbody tr:hover,
.theme-content .theme-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.1);
    transition: background 0.3s ease;
}

.theme-content table thead,
.theme-content .theme-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Citations */
.theme-content blockquote {
    border-left: 4px solid var(--cosmic-violet);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--cosmic-silver);
    background: rgba(139, 92, 246, 0.05);
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 0 12px 12px 0;
}

/* Séparateurs */
.theme-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cosmic-violet), transparent);
    margin: 2rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .theme-content {
        padding: 1.5rem;
    }
    
    .theme-content .theme-h1 {
        font-size: 1.6rem;
    }
    
    .theme-content .theme-h2 {
        font-size: 1.4rem;
    }
    
    .theme-content .theme-h3 {
        font-size: 1.2rem;
    }
    
    .ai-theme-btn {
        font-size: 0.95rem;
        padding: 1rem 1.75rem;
    }
}

/* ===================================================================
   ANALYSE DE COUPLE IA - v2.1.0
   =================================================================== */

/* Bouton d'analyse de couple */
.couple-ai-btn {
    background: linear-gradient(135deg, #C4638F 0%, #6F6DEA 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(21, 27, 52, 0.7);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    position: relative;
}

.couple-ai-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.couple-ai-btn:hover {
    box-shadow: 0 15px 40px rgba(196, 99, 143, 0.35);
    transform: translateY(-5px) scale(1.02);
}

.couple-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(0);
}

/* Card de l'analyse de couple */
.analyse-couple-card {
    grid-column: 1 / -1;
    background: linear-gradient(160deg, #151B34 0%, #1D2444 100%);
    border: 1px solid rgba(196, 99, 143, 0.35);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    margin-top: 2rem;
}

.analyse-couple-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.analyse-couple-card::before {
    background: linear-gradient(90deg, #C4638F 0%, #6F6DEA 100%);
}

/* ===================================================================
   SERVICE 2 — VIBRATIONS ANNUELLES
   Palette distincte (turquoise/indigo) pour différencier visuellement
   les deux offres : le portrait intemporel et l'analyse de l'année.
   =================================================================== */

.vibrations-ai-btn {
    background: linear-gradient(135deg, #6F6DEA 0%, #4B49C4 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(21, 27, 52, 0.7);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    position: relative;
}

.vibrations-ai-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.vibrations-ai-btn:hover {
    box-shadow: 0 15px 40px rgba(111, 109, 234, 0.35);
    transform: translateY(-5px) scale(1.02);
}

.vibrations-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(0);
}

.vibrations-annuelles-card {
    grid-column: 1 / -1;
    background: linear-gradient(160deg, #151B34 0%, #1D2444 100%);
    border: 1px solid rgba(111, 109, 234, 0.35);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    margin-top: 2rem;
}

.vibrations-annuelles-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.vibrations-annuelles-card::before {
    background: linear-gradient(90deg, #6F6DEA 0%, #4B49C4 100%);
}

.vibrations-gradient {
    background: linear-gradient(135deg, #9C9AF5 0%, #6F6DEA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient pour le titre de couple */
.couple-gradient {
    background: linear-gradient(135deg, #E8BC66 0%, #C4638F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Jauges de score dans l'analyse */
.theme-content .score-gauge {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cosmic-gold);
    background: rgba(251, 191, 36, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
    margin: 0.5rem 0;
}

/* Responsive pour l'analyse de couple */
@media (max-width: 768px) {
    .couple-ai-btn,
    .vibrations-ai-btn {
        font-size: 0.95rem;
        padding: 1rem 1.75rem;
    }
}

/* ===================================================================
   BOUTONS EMAIL - v2.1.0
   =================================================================== */

/* Boutons d'envoi par email */
.email-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    position: relative;
}

.email-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.email-btn:hover {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
    transform: translateY(-5px) scale(1.02);
}

.email-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(0);
}

/* Animation d'apparition échelonnée pour tous les boutons */
.cosmic-actions .email-btn:nth-of-type(1) {
    transition-delay: 0.5s;
}

.cosmic-actions .email-btn:nth-of-type(2) {
    transition-delay: 0.6s;
}

/* Responsive pour les boutons email */
@media (max-width: 768px) {
    .email-btn {
        font-size: 0.95rem;
        padding: 1rem 1.75rem;
    }
    
    .cosmic-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 600px;
        margin: 0 auto 3rem;
    }
    
    .cosmic-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================================================
   AMÉLIORATION BOUTONS D'EXPORT v3.1.1
   =================================================================== */

/* Conteneur des boutons avec grille flexible */
.cosmic-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* Style unifié pour tous les boutons */
.cosmic-btn,
.export-btn,
.ai-theme-btn,
.couple-ai-btn,
.vibrations-ai-btn,
.email-btn {
    min-width: 250px;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    min-height: 60px;
}

/* Texte des boutons - permet le retour à la ligne */
.btn-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Icônes des boutons */
.btn-icon {
    flex-shrink: 0;
    font-size: 1.3rem;
}

/* Responsive boutons */
@media (max-width: 1024px) {
    .cosmic-actions {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    
    .cosmic-btn,
    .export-btn,
    .ai-theme-btn,
    .couple-ai-btn,
.vibrations-ai-btn,
    .email-btn {
        min-width: 220px;
        padding: 0.9rem 1.25rem;
        font-size: 0.9rem;
        min-height: 58px;
    }
}

@media (max-width: 768px) {
    .cosmic-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .cosmic-btn,
    .export-btn,
    .ai-theme-btn,
    .couple-ai-btn,
.vibrations-ai-btn,
    .email-btn {
        min-width: unset;
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        min-height: 56px;
    }
    
    .btn-text {
        font-size: 0.85rem;
    }
    
    .btn-icon {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .cosmic-actions {
        grid-template-columns: 1fr;
    }
    
    .cosmic-btn,
    .export-btn,
    .ai-theme-btn,
    .couple-ai-btn,
.vibrations-ai-btn,
    .email-btn {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        min-height: 60px;
    }
}

/* ===================================================================
   AMÉLIORATION RENDU PDF v3.1.1
   =================================================================== */

/* Styles spécifiques pour l'impression PDF — thème cosmique sombre */
@media print {
    body {
        background: #0a0a1a !important;
        color: #e5e7eb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cosmic-card,
    .theme-cosmique-card,
    .analyse-couple-card {
        background: #1a1a3e !important;
        border: 1px solid rgba(99, 102, 241, 0.3) !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Titres — couleurs solides pour PDF (pas de gradient clip) */
    .theme-h1 {
        color: #a5b4fc !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #a5b4fc !important;
        text-shadow: none !important;
        font-size: 1.8rem !important;
        margin: 2rem 0 1rem 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .theme-h2 {
        color: #67e8f9 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #67e8f9 !important;
        text-shadow: none !important;
        font-size: 1.5rem !important;
        margin: 2rem 0 1rem 0 !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid rgba(103, 232, 249, 0.2) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .theme-h3 {
        color: #fbbf24 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #fbbf24 !important;
        text-shadow: none !important;
        font-size: 1.2rem !important;
        margin: 1.5rem 0 0.75rem 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cosmic-title,
    .section-title,
    .card-title {
        color: #a5b4fc !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Texte — espacement et lisibilité */
    .theme-paragraph {
        color: #d1d5db !important;
        margin-bottom: 1rem !important;
        line-height: 1.7 !important;
        font-size: 0.95rem !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cosmic-subtitle,
    .section-description,
    .result-label,
    .pyramide-description,
    .secret-description,
    .analyse-description {
        color: #d1d5db !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Listes — espacement entre items */
    .theme-list {
        margin: 1rem 0 !important;
        padding-left: 1.5rem !important;
    }

    .theme-list li {
        color: #d1d5db !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Gras et italique */
    .theme-content strong {
        color: #e5e7eb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .theme-content em {
        color: #fbbf24 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .result-value,
    .pyramide-number,
    .secret-number,
    .analyse-number {
        color: #a5b4fc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Tableaux */
    .theme-table {
        border-collapse: collapse !important;
        width: 100% !important;
        margin: 1rem 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .theme-table th {
        background: rgba(99, 102, 241, 0.2) !important;
        color: #a5b4fc !important;
        border: 1px solid rgba(99, 102, 241, 0.3) !important;
        padding: 0.5rem !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .theme-table td {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #e5e7eb !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        padding: 0.5rem !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .inclusion-case {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(99, 102, 241, 0.3) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .case-frequence { color: #e5e7eb !important; }
    .case-chiffre { color: #9ca3af !important; }

    #stars, #stars2, #stars3 {
        display: none !important;
    }
}

/* ===================================================================
   VIBRATIONS COSMIQUES - v3.2.0
   =================================================================== */

/* Vignettes "Aujourd'hui" */
.vibrations-vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.vignette-date,
.vignette-vibration,
.vignette-chance {
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.vignette-date::before,
.vignette-vibration::before,
.vignette-chance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-aurora);
}

.vignette-date:hover,
.vignette-vibration:hover,
.vignette-chance:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-cosmic);
    border-color: var(--cosmic-violet);
}

/* Vignette Date */
.vignette-date {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vignette-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.vignette-content {
    flex: 1;
}

.vignette-label {
    font-size: 0.75rem;
    color: var(--cosmic-silver);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.vignette-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cosmic-white);
}

/* Vignette Vibration */
.vignette-vibration {
    text-align: center;
}

.vignette-header {
    font-size: 0.75rem;
    color: var(--cosmic-silver);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.vignette-nombre {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 2.5rem;
    font-weight: 700;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.vignette-vibration:hover .vignette-nombre {
    transform: scale(1.1) rotate(5deg);
}

/* Vignette Chance */
.vignette-chance {
    display: flex;
    align-items: center;
    gap: 1rem;
    grid-column: 1 / -1;
}

.vignette-jours {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cosmic-gold);
}

/* Contrôles des vibrations modifiés */
.vibrations-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
}

.annee-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selector-icon {
    font-size: 1.2rem;
}

.annee-selector label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cosmic-silver);
}

.annee-selector select {
    padding: 0.75rem 1.25rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--cosmic-white);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.annee-selector select:hover {
    border-color: var(--cosmic-violet);
    background: var(--glass-strong);
}

.annee-selector select:focus {
    outline: none;
    border-color: var(--cosmic-violet);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.annee-selector select option {
    background: var(--cosmic-dark);
    color: var(--cosmic-white);
    padding: 0.5rem;
}

/* Mode Cartes - Vignettes uniquement */
.vibrations-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    perspective: 1000px;
}

.carte-mois {
    position: relative;
    height: 220px;
    cursor: pointer;
    perspective: 1000px;
}

.carte-mois.actuel::after {
    content: 'En cours';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--gradient-gold);
    color: var(--cosmic-dark);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
    z-index: 10;
    pointer-events: none;
}

.carte-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

.carte-mois:hover .carte-inner {
    transform: rotateY(180deg);
}

.carte-front,
.carte-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 3px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
}

.carte-front {
    background: var(--glass-cosmic);
}

.carte-back {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    transform: rotateY(180deg);
}

.carte-header {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1rem;
    color: var(--cosmic-silver);
    text-align: center;
}

.carte-mois.actuel .carte-header {
    color: var(--cosmic-gold);
}

.carte-nombre {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.carte-mois:hover .carte-front .carte-nombre {
    transform: scale(1.1) rotate(5deg);
}

/* Couleurs par nombre */
/* Les neuf vibrations suivent une rampe tonale du bleu nuit vers l'or.
   Chaque nombre reste identifiable d'un coup d'oeil, mais aucun ne sort
   de la palette : l'arc-en-ciel precedent appartenait au registre
   « application ». */
.nombre-1 { background: #3B4478; color: var(--cosmic-white); }
.nombre-2 { background: #4B4FA0; color: var(--cosmic-white); }
.nombre-3 { background: #5F62C4; color: var(--cosmic-white); }
.nombre-4 { background: #7A6FCE; color: var(--cosmic-white); }
.nombre-5 { background: #9578C9; color: var(--cosmic-white); }
.nombre-6 { background: #AE84BC; color: #17102A; }
.nombre-7 { background: #C0929F; color: #1F1116; }
.nombre-8 { background: #CE9C7C; color: #1F1408; }
.nombre-9 { background: #D8A441; color: #1A1405; }

.carte-signification {
    font-size: 0.85rem;
    color: var(--cosmic-white);
    line-height: 1.5;
    text-align: center;
    padding: 0.5rem;
}

/* Animations */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.vibrations-section {
    animation: slideInFromBottom 0.6s ease forwards;
}

.carte-mois {
    animation: fadeIn 0.4s ease forwards;
}

/* Délais d'animation échelonnés */
.carte-mois:nth-child(1) { animation-delay: 0.05s; }
.carte-mois:nth-child(2) { animation-delay: 0.1s; }
.carte-mois:nth-child(3) { animation-delay: 0.15s; }
.carte-mois:nth-child(4) { animation-delay: 0.2s; }
.carte-mois:nth-child(5) { animation-delay: 0.25s; }
.carte-mois:nth-child(6) { animation-delay: 0.3s; }
.carte-mois:nth-child(7) { animation-delay: 0.35s; }
.carte-mois:nth-child(8) { animation-delay: 0.4s; }
.carte-mois:nth-child(9) { animation-delay: 0.45s; }
.carte-mois:nth-child(10) { animation-delay: 0.5s; }
.carte-mois:nth-child(11) { animation-delay: 0.55s; }
.carte-mois:nth-child(12) { animation-delay: 0.6s; }

/* Responsive */
@media (max-width: 1024px) {
    .vibrations-cartes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .vibrations-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .annee-selector {
        justify-content: center;
    }
    
    .vibrations-cartes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .vibrations-cartes {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .carte-mois {
        height: 200px;
    }
    
    .carte-nombre {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .carte-header {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .carte-signification {
        font-size: 0.75rem;
    }
}

/* ===================================================================
   MAILLAGE VERS LES PAGES DE CONTENU
   ===================================================================
   Sans lien depuis l'accueil, les pages de contenu resteraient
   orphelines : les moteurs les exploreraient mal, voire pas du tout.
   =================================================================== */

.ressources-section {
    margin: 3rem auto 0;
    max-width: 760px;
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--glass-cosmic);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}

.ressources-titre {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--cosmic-white);
    margin-bottom: 0.5rem;
}

.ressources-intro {
    color: var(--cosmic-silver);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.ressources-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ressources-liens a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--cosmic-silver);
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.ressources-liens a:hover,
.ressources-liens a:focus-visible {
    border-color: var(--cosmic-gold);
    color: var(--cosmic-gold);
}

.ressources-pivot {
    color: var(--cosmic-gold);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

.ressources-pivot:hover { text-decoration: underline; }

/* =============================================================================
   BARRE DE NAVIGATION DU SITE
   =============================================================================
   L'ancienne navigation par onglets ne couvrait que les trois vues de
   l'outil. Cette barre est le menu du site : services, tarifs, contenu
   éditorial et compte, présents partout.
   ========================================================================== */

.barre-site {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 1.5rem;
    background: rgba(12, 16, 34, 0.94);
    border-bottom: 1px solid var(--cosmic-blue);
}

.marque-site {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--cosmic-white);
    text-decoration: none;
    white-space: nowrap;
}
.marque-site em { color: var(--cosmic-gold); font-style: normal; }

.liens-site { display: flex; gap: 0.4rem; margin-left: auto; }

.lien-site {
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--cosmic-silver);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.lien-site:hover { color: var(--cosmic-white); }

/* L'onglet actif se signale par un trait, pas par un fond : la barre reste
   discrète et ne concurrence pas le contenu. */
.lien-site.active {
    color: var(--cosmic-white);
    border-bottom-color: var(--cosmic-gold);
}

.zone-compte { display: flex; align-items: center; }

.bouton-compte {
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--cosmic-white);
    background: transparent;
    border: 1px solid var(--cosmic-blue);
    border-radius: 6px;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s;
}
.bouton-compte:hover { border-color: var(--cosmic-violet); }

/* ---- Menu du compte ---------------------------------------------------- */
/* <details> plutôt qu'un menu en JavaScript : l'ouverture, la fermeture et
   l'accès au clavier sont assurés par le navigateur. */

.menu-compte { position: relative; }

.menu-compte summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--cosmic-white);
    border: 1px solid var(--cosmic-blue);
    border-radius: 6px;
    padding: 0.4rem 0.95rem;
}
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte summary::after { content: ' ▾'; color: var(--cosmic-silver); }

.menu-deroulant {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 200px;
    background: var(--cosmic-dark);
    border: 1px solid var(--cosmic-blue);
    border-radius: 8px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}

.menu-deroulant button,
.menu-deroulant a {
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--cosmic-silver);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
}
.menu-deroulant button:hover,
.menu-deroulant a:hover { background: var(--cosmic-purple); color: var(--cosmic-white); }

/* ---- Menu compact ------------------------------------------------------ */

.bascule-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    margin-left: auto;
}
.bascule-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cosmic-silver);
}

@media (max-width: 860px) {
    .bascule-menu { display: flex; }

    .liens-site {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--cosmic-dark);
        border-bottom: 1px solid var(--cosmic-blue);
        padding: 0.5rem;
        margin: 0;
    }
    .liens-site.ouvert { display: flex; }
    .lien-site { text-align: left; border-bottom: none; border-left: 2px solid transparent; }
    .lien-site.active { border-left-color: var(--cosmic-gold); border-bottom-color: transparent; }
    .barre-site { flex-wrap: wrap; gap: 0.8rem; }
}

/* =============================================================================
   TARIFS
   ========================================================================== */

.entete-section { text-align: center; margin-bottom: 2.5rem; }
.entete-section h2 { font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; margin: 0 0 0.5rem; }
.entete-section p { color: var(--cosmic-silver); max-width: 60ch; margin: 0 auto; }

.grille-offres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    max-width: 820px;
    margin: 0 auto;
}

.carte-offre {
    background: var(--glass-cosmic);
    border: 1px solid var(--cosmic-blue);
    border-radius: 14px;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.carte-offre.acquise { border-color: var(--cosmic-gold); }

.carte-offre h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.prix { margin: 0; display: flex; align-items: baseline; gap: 0.3rem; }
.prix .montant { font-family: var(--font-display); font-size: 2.6rem; color: var(--cosmic-gold); }
.prix .periode { color: var(--cosmic-silver); font-size: 0.9rem; }

.resume-offre { color: var(--cosmic-silver); font-size: 0.94rem; margin: 0; flex-grow: 1; }
.acquise-mention { color: var(--cosmic-gold); font-size: 0.9rem; margin: 0; }

.formulaire-promo { display: flex; flex-direction: column; gap: 0.7rem; }
.formulaire-promo .champ { display: flex; flex-direction: column; gap: 0.3rem; }
.formulaire-promo .champ span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cosmic-silver); }
.formulaire-promo input {
    font: inherit;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--cosmic-blue);
    background: rgba(255, 255, 255, 0.04);
    color: var(--cosmic-white);
    text-transform: uppercase;
}
.message-promo { color: #E0684F; font-size: 0.85rem; margin: 0; }

.mes-analyses { max-width: 820px; margin: 3rem auto 0; }
.liste-analyses { list-style: none; padding: 0; }
.liste-analyses li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--cosmic-blue);
    color: var(--cosmic-silver);
    font-size: 0.92rem;
}
.aide-compte { color: var(--cosmic-silver); font-size: 0.92rem; }

/* =============================================================================
   DIALOGUE DE COMPTE
   ========================================================================== */

.voile-modale {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(6, 9, 20, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modale {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--cosmic-dark);
    border: 1px solid var(--cosmic-blue);
    border-radius: 14px;
    padding: 2rem;
}

.modale-titre { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; margin: 0 0 1.2rem; }
.modale-message { color: var(--cosmic-gold); font-size: 0.88rem; margin: 0 0 1rem; }
.modale-aide { color: var(--cosmic-silver); font-size: 0.8rem; margin: -0.3rem 0 0; }

.fermer-modale {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--cosmic-silver);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.formulaire-compte { display: flex; flex-direction: column; gap: 1rem; }
.formulaire-compte .champ { display: flex; flex-direction: column; gap: 0.3rem; }
.formulaire-compte .champ span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cosmic-silver); }
.formulaire-compte input {
    font: inherit;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    border: 1px solid var(--cosmic-blue);
    background: rgba(255, 255, 255, 0.04);
    color: var(--cosmic-white);
}
.formulaire-compte input:focus { outline: none; border-color: var(--cosmic-violet); }

.bouton-principal {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 1.2rem;
    border-radius: 6px;
    border: 1px solid var(--cosmic-gold);
    background: transparent;
    color: var(--cosmic-gold);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bouton-principal:hover { background: var(--cosmic-gold); color: var(--cosmic-deep); }
.bouton-principal:disabled { opacity: 0.5; cursor: default; }

.lien-modale {
    font: inherit;
    font-size: 0.85rem;
    background: none;
    border: none;
    color: var(--cosmic-silver);
    text-decoration: underline;
    cursor: pointer;
}