/* =============================================================================
   COMPTE, TARIFS ET MODALES
   =============================================================================
   Tout ce que compte.js dessine : le bouton de connexion et son menu, les
   cartes d'offres, le dialogue de connexion, le bandeau de retour de paiement.

   Ces règles vivaient dans style.css, que les pages de contenu ne chargent
   pas. Résultat : la barre y était dépourvue de zone compte, et un visiteur
   venu d'une recherche ne trouvait pas par où entrer. Les charger ici plutôt
   que de les recopier évite que les deux versions divergent.

   Les pages de contenu n'affichent qu'une partie de ces éléments — pas de
   grille de tarifs, pas de liste d'analyses. Le fichier reste entier :
   découper au plus juste demanderait de suivre à la main quelle page dessine
   quoi, pour économiser deux kilo-octets.
   ============================================================================= */

.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 ------------------------------------------------------ */




/* La barre de navigation, y compris son repli mobile, vit dans barre.css :
   elle est partagée avec les pages de contenu, qui ne chargent pas ce
   fichier. Voir le commentaire en tête de barre.css. */

/* =============================================================================
   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;
}

/* Le lien de récupération se place sous le champ mot de passe, aligné à
   droite : c'est là que l'œil le cherche, et il ne concurrence pas le
   bouton principal. */
.lien-oubli {
    font: inherit;
    font-size: 0.82rem;
    align-self: flex-end;
    margin-top: -0.4rem;
    background: none;
    border: none;
    color: var(--cosmic-silver);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.lien-oubli:hover { color: var(--cosmic-gold); }

/* Langue et compte, réunis à droite de la barre. Le sélecteur était
   auparavant dans l'en-tête de la page d'accueil : il disparaissait donc
   dès qu'on naviguait ailleurs. */







/* aria-pressed porte déjà l'état : on s'appuie dessus plutôt que d'ajouter
   une classe que le JavaScript devrait maintenir en parallèle. */


@media (max-width: 860px) {
}

/* Achat et retour de paiement */

.bloc-achat { display: flex; flex-direction: column; gap: 0.5rem; }

/* Le code d'accès reste possible mais passe au second plan : l'achat est le
   chemin principal, le code l'exception. */
.formulaire-promo { border-top: 1px solid var(--cosmic-blue); padding-top: 1rem; margin-top: 0.3rem; }

.bandeau-paiement {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: min(560px, calc(100vw - 2rem));
    padding: 0.9rem 3rem 0.9rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--cosmic-blue);
    background: var(--cosmic-dark);
    color: var(--cosmic-white);
    font-size: 0.92rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.bandeau-paiement.succes { border-color: var(--cosmic-gold); }

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

/* Solde d'analyses : discret quand il reste de la marge, visible quand il
   n'en reste plus. */
.solde-analyses { font-size: 0.85rem; color: var(--cosmic-silver); margin: 0; }
.solde-analyses.epuise { color: var(--cosmic-gold); }

/* Choix de l'année, sur la seule offre vendue à l'année. Il est placé haut
   dans la carte, avant le solde : celui-ci se rapporte à l'année choisie, et
   le lire sans savoir de laquelle il s'agit était toute la confusion. */
.annee-tarif {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 0.4rem;
    font-size: 0.85rem;
    color: var(--cosmic-silver);
}

.annee-tarif select {
    padding: 0.3rem 0.5rem;
    background: var(--cosmic-deep, #0C1022);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: var(--cosmic-white);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Sans cette règle, le navigateur peint les options en blanc sur blanc : le
   menu reste invisible jusqu'au survol. C'est le même défaut que celui du
   sélecteur d'année de la carte cosmique. */
.annee-tarif select option {
    background: #0C1022;
    color: #EEF0F8;
}


/* ==========================================================================
   CHOIX DU CONTENU D'UN PDF
   --------------------------------------------------------------------------
   Deux options, chacune avec son intitulé et ce qu'elle recouvre. Le détail
   n'est pas décoratif : « rapport complet » ne dit pas à lui seul ce qu'on
   obtient, et personne ne télécharge à l'aveugle un document qu'il compte
   garder.
   ========================================================================== */

.choix-pdf {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.choix-pdf-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 0.9rem 1.1rem;
    text-align: left;
    background: transparent;
    border: 1px solid var(--glass-border);
    box-shadow: none;
    cursor: pointer;
}

.choix-pdf-option:hover,
.choix-pdf-option:focus-visible {
    border-color: var(--cosmic-gold);
    transform: translateY(-1px);
}

.choix-pdf-titre {
    font-size: 0.95rem;
    color: var(--cosmic-white);
    letter-spacing: normal;
    text-transform: none;
}

.choix-pdf-detail {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--cosmic-silver);
    text-transform: none;
    letter-spacing: normal;
}

/* La case d'anonymat vaut pour l'une comme pour l'autre des deux options :
   elle est donc sous elles, et non dans l'une d'elles. */
.choix-pdf-anonyme {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--glass-border);
    cursor: pointer;
}

.choix-pdf-anonyme input {
    margin-top: 0.2rem;
    accent-color: var(--cosmic-gold);
    flex-shrink: 0;
}

.choix-pdf-anonyme > span {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}


/* ==========================================================================
   HISTORIQUE DES ANALYSES
   --------------------------------------------------------------------------
   Chaque entrée est un bouton pleine largeur. La liste servait à constater
   qu'une analyse existait, sans jamais permettre de la relire — ce qui n'est
   pas un historique mais un relevé.
   ========================================================================== */

.liste-analyses { list-style: none; margin: 0; padding: 0; }

.entree-analyse {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.8rem 0.2rem;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.entree-analyse:hover,
.entree-analyse:focus-visible {
    color: var(--cosmic-gold);
    padding-left: 0.6rem;
}

.entree-titre { font-size: 0.95rem; color: var(--cosmic-white); }
.entree-analyse:hover .entree-titre { color: inherit; }
.entree-detail { font-size: 0.78rem; color: var(--cosmic-silver); }

/* La lecture d'une analyse tient sur plusieurs pages : la boîte est plus
   large que celle d'un formulaire, et défile. */
.modale-lecture {
    max-width: 760px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}

.lecture-analyse {
    overflow-y: auto;
    padding-right: 0.6rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cosmic-silver);
}

.lecture-analyse h1, .lecture-analyse h2, .lecture-analyse h3 { color: var(--cosmic-white); }
.lecture-analyse table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.lecture-analyse th, .lecture-analyse td {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--glass-border);
    text-align: left;
}

.lecture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--glass-border);
}

.lecture-actions .cosmic-btn { flex: 1 1 auto; opacity: 1; transform: none; }

/* ==========================================================================
   RAPPORT D'EXEMPLE
   --------------------------------------------------------------------------
   « Je reçois quoi, exactement ? » est la question que se pose tout visiteur
   devant un prix, et rien sur la page n'y répondait. L'extrait s'ouvre en
   modale plutôt que sur une page à part : on ne quitte pas la carte du
   service qu'on est en train d'évaluer.
   ========================================================================== */

.lien-exemple {
    align-self: flex-start;
    padding: 0;
    margin: -0.2rem 0 0.2rem;
    background: none;
    border: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
    color: var(--cosmic-silver);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.lien-exemple:hover { color: var(--cosmic-gold); border-bottom-color: var(--cosmic-gold); }

.modale-exemple { max-width: 680px; width: 100%; }

.exemple-chapeau { font-size: 0.85rem; }

/* Le texte est long : c'est lui qui défile, pas la modale entière — sinon le
   bouton de téléchargement part hors de l'écran, et l'extrait devient une
   impasse. */
.exemple-corps {
    max-height: 52vh;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    margin: 0.8rem 0 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.6;
}

.exemple-corps h2, .exemple-corps h3 { color: var(--cosmic-gold); }
.exemple-corps table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.exemple-corps th, .exemple-corps td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    font-size: 0.82rem;
}
.exemple-corps em { color: var(--cosmic-silver); }

.exemple-brut { white-space: pre-wrap; font-family: inherit; margin: 0; }

.exemple-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* Le bouton de repli d'une modale : présent, lisible, mais qui ne dispute
   pas l'attention à l'action principale. */
.bouton-secondaire {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 1.2rem;
    border-radius: 6px;
    border: 1px solid var(--cosmic-blue);
    background: transparent;
    color: var(--cosmic-silver);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.bouton-secondaire:hover { border-color: var(--cosmic-silver); color: var(--cosmic-white); }