/* ===============================
   POLICE ASTRAEMA
   =============================== */
@font-face{
  font-family: "Astraema";
  src: url("../fonts/Astraema.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Important : evite les debordements "width + padding" */
*, *::before, *::after{ box-sizing: border-box; }

body{
  font-family: system-ui, sans-serif;
  background:#fafafa;
  margin:0;
  padding:0;
}

:root{
  --ctaGrad: linear-gradient(135deg, #172852, #3589b2);
  --ctaShadow: rgba(122, 164, 255, 0.35);
  --ctaShadowHover: rgba(122, 164, 255, 0.40);
}

/* Classe generique CTA (liens <a> ou <button>) */
.button-primary{
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: var(--ctaGrad);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 18px var(--ctaShadow);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.button-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px var(--ctaShadowHover);
  filter: brightness(1.02);
}

/* ===============================
   HEADER
   =============================== */
header{
  width: 100%;
  padding: 8px 40px;
  background: #fff;
  border-bottom: 1px solid #e5e5ee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Logo header — agrandi pour plus de présence */
.logo{ height: 70px; }

/* ===============================
   Compte AU-DESSUS du menu
   -> grille 2 colonnes
   -> 2 lignes : (1) compte, (2) menu
   =============================== */
.headerRight{
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 4px;
  justify-content: end;
  align-items: start;
  min-width: 0;
}

/* Si on veut cacher la zone compte (connexion/inscription) */
.headerRight.noAccount{
  grid-template-rows: auto;
  row-gap: 0;
}
.headerRight.noAccount .headerNav{
  grid-row: 1;
}

/* Menu : ligne 2, 2 colonnes — petites majuscules elegantes (style blog).

   ALIGNEMENT : par la LIGNE D'ÉCRITURE, pas par le milieu des boîtes.
   « Articles » est écrit en Dancing Script à 1,3 rem, les autres en
   petites capitales à 0,82 rem : deux polices, deux tailles, deux
   hauteurs de boîte. En les centrant l'une par rapport à l'autre, les
   lettres ne reposaient pas sur la même ligne — les capitales flottaient
   au-dessus d'« Articles ». `baseline` fait s'asseoir tous les mots sur
   la même ligne, comme sur une feuille réglée : c'est ce que l'œil
   attend, et ça reste juste si une taille change un jour. */
.headerNav{
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: 24px;
  justify-content: flex-end;
}

.headerNav a{
  text-decoration: none;
  color: #607088;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: color 0.15s ease;
}
.headerNav a:hover{ color: #20334f; }

/* Lien actif : couleur dorée + petit trait en dessous */
.headerNav a.active{
  color: #9a7640;
}
.headerNav a.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: #9a7640;
}
/* Les liens du menu ont besoin de position:relative pour le ::after */
.headerNav a{
  position: relative;
}

/* Articles actif : même trait doré */
.navBlog.active{
  color: #7a5c2e !important;
}

/* Articles : ecriture cursive Dancing Script doree, alignee avec le menu */
.navBlog{
  font-family: "Dancing Script", cursive !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em !important;
  color: #9a7640 !important;
  font-style: normal !important;
  line-height: 1 !important;
  /* plus d'align-self : c'est la ligne d'écriture du menu qui commande */
}
.navBlog:hover{
  color: #7a5c2e !important;
}

/* ===== Sous-menu Calcul de theme ===== */
.navDropdown {
  position: relative;
}
.navDropBtn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #607088;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.navDropBtn:hover { color: #20334f; }
/* Dropdown actif quand on est sur une page de calcul */
.navDropBtn.active {
  color: #9a7640;
}
.navDropBtn.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: #9a7640;
}
.navDropArrow { font-size: 9px; }

.navDropMenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e1e4f0;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  min-width: 180px;
  z-index: 100;
  overflow: hidden;
}
.navDropMenu.open { display: block; }
.navDropMenu a {
  display: block;
  padding: 11px 18px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: none;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
.navDropMenu a:hover {
  background: #f5f6fb;
  color: #172852;
}
/* Lien grisé dans le dropdown (fonctionnalité verrouillée) */
.navDropLocked {
  display: block;
  padding: 11px 18px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: none;
  color: #aaa;
  white-space: nowrap;
  cursor: default;
}

/* Zone compte : ligne 1, colonne 2 (au-dessus du menu) */
.headerTop{
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

/* Nom a gauche du bonhomme */
.userMiniName{
  font-size: 11px;
  font-weight: 700;
  color: #172852;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  line-height: 1;
}

/* Bouton compte : rond bleu + icone blanche (un peu plus petit) */
.userMenuBtn{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: #204D89;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(32, 77, 137, 0.18);
  flex: 0 0 auto;
}
.userMenuBtn:hover{ background:#172852; }
.userMenuBtn svg{ display:block; }

/* Dropdown ancre a droite */
.userDropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  margin-left: 0;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 16px));
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e1e4f0;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  padding: 8px;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  display: none;
  z-index: 80;
}
.userDropdown.open{ display:block; }

.userIdentity{
  padding:10px 10px 8px 10px;
  border-bottom:1px solid #edf0fb;
  margin:0 0 6px 0;
}
.userIdentity .name{
  font-size:13px;
  font-weight:700;
  color:#172852;
  line-height:1.2;
  word-break:break-word;
}
.userIdentity .email{
  margin-top:3px;
  font-size:12px;
  color:#6b7280;
  line-height:1.2;
  word-break:break-word;
}

.userDropdown a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#333;
  font-size:13px;
}
.userDropdown a:hover{ background:#f3f5fb; }

/* ===============================
   Badges plan / rôle (header + compte)
   =============================== */

/* Badge dans le dropdown compte (à côté du nom) */
.planBadge{
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  margin-left: 6px;
  line-height: 1.4;
}

/* Mini badge dans le header (à côté du nom court) */
.planBadgeMini{
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  margin-left: 4px;
  line-height: 1.3;
}

/* Couleurs par niveau */
.badgeAdmin{
  background: #2d1b4e;
  color: #fff;
}
.badgePro{
  background: #9a7640;
  color: #fff;
}

/* Deconnectee : remplace l'icone */
.authLinks{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
.authLinks a{
  color:#172852;
  text-decoration:none;
}
.authLinks a:hover{ text-decoration: underline; }
.authLinks .sep{
  color:#8a93a6;
  margin: 0 6px;
  font-weight: 600;
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 980px){
  header{
    padding: 10px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .logo{ height: 70px; }

  /* Le logo est seul sur sa ligne (la zone compte passe en dessous) :
     on lui donne toute la largeur pour qu'il se centre, au lieu de
     rester collé au bord gauche. Le lien qui l'entoure est un
     inline-block posé dans le HTML, d'où le sélecteur sur le premier
     enfant du header — aucune modification du gabarit n'est nécessaire. */
  header > a:first-child{
    width: 100%;
    text-align: center;
  }

  .headerRight{
    margin-top: 6px;
    width: 100%;
    column-gap: 14px;
    row-gap: 6px;
    justify-content: end;
  }

  .headerNav{ column-gap: 14px; }

  /* ── Le menu passe à la ligne quand il ne tient plus ──
     Sans ces trois réglages, le menu ne rétrécissait jamais : .headerRight
     est une grille à colonnes « max-content », donc le menu gardait sa
     largeur naturelle, et comme il est justifié à droite il sortait de
     l'écran PAR LA GAUCHE. « Accueil » disparaissait alors purement et
     simplement — sans même une barre de défilement pour le rattraper.
     Mesuré le 2 septembre : le menu commençait à -47 px en 320 px et à
     -7 px en 360 px, sur toutes les pages du site.
     minmax(0, max-content) autorise les colonnes à rétrécir ; flex-wrap
     fait alors descendre les entrées en trop sur une deuxième ligne.
     Effet : l'en-tête gagne 20 px de haut sur téléphone (120 -> 140).
     Rien ne change au-dessus de 980 px. */
  .headerRight{
    min-width: 0;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
  }
  .headerNav{
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    min-width: 0;
  }

  .headerNav a{ font-size: .72rem; letter-spacing: .12em; }
  .navDropBtn{ font-size: .72rem; letter-spacing: .12em; }
  .navBlog{ font-size: 1.1rem !important; }

  .userMiniName{ max-width: 140px; }
}

/* ===============================
   FOOTER GLOBAL
   =============================== */
/* Footer global — padding vertical augmenté */
.site-footer{
  background: #192a43;
  color: #edf0f4;
  /* padding vertical réduit (54→36) pour un footer plus compact maintenant
     que le logo et les réseaux sont empilés à gauche. */
  padding: 36px 40px;
}
.site-footer-inner{
  display: flex;
  /* Le logo reste à gauche, les 2 autres zones (liens + réseaux) sont poussées
     ensemble à droite via margin-left: auto sur le bloc liens (cf .site-footer-right). */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
/* Pousse le bloc des liens à droite, ce qui regroupe les 2 zones (liens + réseaux)
   à droite tandis que le logo reste seul à gauche. */
.site-footer-right{ margin-left: auto; }
/* Espace dédié entre les liens et les icônes pour aérer le bloc droit.
   margin-top négatif : remonte les icônes de ~3mm (12px) pour qu'elles
   s'alignent visuellement avec la 1ère ligne des liens. */
.site-footer-social{
  margin-left: 8px;
  margin-top: -5.5px;
}
/* Bloc gauche : juste le logo. */
.site-footer-brand{
  display: flex;
  align-items: center;
}
.site-footer-logo{ display: block; height: 60px; width: auto; object-fit: contain; }

/* Bloc droite footer : ne contient plus que les liens en grille 2 colonnes.
   align-items: flex-end pour aligner la grille à droite du conteneur. */
.site-footer-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Réseaux sociaux : colonne verticale alignée précisément face aux lignes de liens.
   - row-gap des liens = 8px, line-height ≈ 17px → ligne à ligne ≈ 25px
   - les icônes font 20px, donc gap = 25 - 20 = 5px pour matcher visuellement. */
.site-footer-social{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Chaque icône occupe la même hauteur qu'une ligne de lien pour un alignement parfait. */
.site-footer-social a{
  display: flex;
  align-items: center;
  height: 25px; /* = row-gap (8px) + hauteur de ligne du texte (~17px) */
}
.site-footer-social a{
  color: rgba(237,240,244,.55);
  transition: color .15s ease;
}
.site-footer-social a:hover{ color: #fff; }

/* Liens du footer : grille 2 colonnes pour aérer la lecture.
   Les 6 liens (À propos, Contact, Mentions, Confidentialité, CGU, Crédits)
   se répartissent automatiquement sur 2 colonnes, 3 lignes.
   Sur mobile : passe en 1 colonne via la media query plus bas. */
.site-footer-nav{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 28px;
  row-gap: 8px;
  justify-content: end;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(237,240,244,.72);
}
/* ═══════════════════════════════════════════════════════════════════
   FOOTER SUR TÉLÉPHONE

   Sur PC : logo à gauche, liens et réseaux poussés ensemble à droite.
   Ce montage tient à `margin-left: auto` et ne marche que si les trois
   blocs ont la place de tenir sur une ligne — ce qui n'est jamais le cas
   sur un téléphone : tout se retrouvait empilé et décalé.

   Sur téléphone, on repart d'une grille explicite :
        ┌─────────────────────────────┐
        │        logo Astraema        │   ← centré, sur sa propre ligne
        ├──────────────────┬──────────┤
        │ liens (1 colonne)│ réseaux  │   ← liens à gauche, icônes à droite
        └──────────────────┴──────────┘
   Rien de ce bloc ne s'applique au-dessus de 768 px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .site-footer{
    padding: 28px 20px;
  }
  .site-footer-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  brand"
      "links  social";
    align-items: start;
    gap: 18px 16px;
  }

  /* Le logo occupe toute la largeur et se centre. */
  .site-footer-brand{
    grid-area: brand;
    justify-content: center;
  }

  /* Les liens : à gauche, sur une seule colonne (« CONFIDENTIALITÉ » en
     capitales espacées ne tient pas à deux colonnes sur 390 px). */
  .site-footer-right{
    grid-area: links;
    margin-left: 0;          /* annule le « pousse à droite » du bureau */
    align-items: flex-start;
    min-width: 0;
  }
  .site-footer-nav{
    grid-template-columns: 1fr;
    justify-content: start;
  }

  /* Les réseaux : à droite, empilés, et calés sur le BAS de la colonne
     de liens — c'est la dernière icône qui s'aligne sur le dernier lien,
     pas la première sur le premier. */
  .site-footer-social{
    grid-area: social;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    justify-self: end;
    align-self: end;
  }
}
.site-footer-nav a{
  color: rgba(237,240,244,.72);
  text-decoration: none;
}
.site-footer-nav a:hover{ color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   LE PETIT « i » DE PRÉSENTATION DE LA PAGE

   Le texte « Ton thème natal », « Transit », etc. vit dans la colonne de
   droite, masquée sur téléphone. Ce bouton le rend accessible là-bas, et
   nulle part ailleurs : sur ordinateur le texte est déjà sous les yeux.
   La mécanique est dans static/js/aide_page.js.
   ═══════════════════════════════════════════════════════════════════ */
.aidePageBtn{ display:none; }

@media (max-width: 768px){
  /* Le titre devient une ligne à deux bouts : le texte à gauche,
     le bouton poussé tout à droite. */
  .aidePageTitre{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .aidePageBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;          /* collé au bord droit du cadre */
    flex:0 0 auto;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid rgba(44,95,153,.35);
    border-radius:50%;
    background:rgba(44,95,153,.06);
    color:#2c5f99;
    font:700 15px/1 Georgia, "Times New Roman", serif;
    cursor:pointer;
  }
  .aidePageBtn:active{ background:rgba(44,95,153,.16); }
}

/* ═══════════════════════════════════════════════════════════════════
   ÉTOILE DES FAVORIS — colonne « Historique » des pages de calcul

   Avant : 16 px, sans surface autour, et un contour vide pour les thèmes
   non favoris — donc difficile à voir et à viser.

   Après : une étoile SIMPLE, sans cadre — c'est la page Compte qui encadre
   ses boutons, pas les colonnes Historique. Ici l'étoile est seule sur sa
   ligne : un cadre en ferait un bouton de plus dans une liste qui n'en a
   pas. Elle est seulement plus grande, avec une zone cliquable invisible
   de 34 px pour ne plus rater la cible. Les dorés et les gris sont
   EXACTEMENT ceux de la page Compte.

   Cette règle était recopiée à l'identique dans theme.css, synastrie.css,
   transit.css et progresse.css. Elle est ici, une seule fois, dans la
   feuille chargée par toutes les pages.
   ═══════════════════════════════════════════════════════════════════ */
#sideBox .starLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 auto;
  text-decoration:none;
  font-size:20px;
  line-height:1;
  color:#C8CEDF;                 /* même gris que la page Compte */
  transition:color .15s ease;
}

/* Déjà en favori : le doré de la page Compte, ni plus vif ni plus sombre. */
#sideBox .starLink.on{ color:#F3D987; }

/* Au survol on passe au doré : on comprend ce que fera le clic. */
#sideBox .starLink:hover{ color:#F3D987; }
#sideBox .starLink:focus-visible{ outline:2px solid #3589b2; outline-offset:1px; }

/* Écrans tactiles : on vise avec un doigt. */
@media (pointer: coarse){
  #sideBox .starLink{ width:40px; height:40px; font-size:22px; }
}


/* ═══════════════════════════════════════════════════════════════════
   RAPPEL « ASPECTS MINEURS ET HARMONIQUES »

   Le petit bloc replié posé au bas des panneaux Vue et Aspects, sur les
   4 pages à roue. Il est fabriqué par static/js/aspects_help_note.js.

   Il n'avait AUCUN style : le mot « Paramètres » sortait donc avec
   l'habillage par défaut du navigateur — un vrai bouton gris encadré, qui
   n'existe nulle part ailleurs sur Astraema. Il ressemble maintenant à un
   lien du site : bleu, souligné, comme « Paramètres appliqués ».
   (C'est techniquement un bouton, et non un lien, pour que la page ne
   remonte pas en haut au clic.)
   ═══════════════════════════════════════════════════════════════════ */
.viewHelp{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #ececf3;
}
.viewHelpSum{
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  color:#607088;
  list-style:none;               /* on remplace la flèche par la nôtre */
}
.viewHelpSum::-webkit-details-marker{ display:none; }
.viewHelpSum::before{
  content:"▸";
  display:inline-block;
  margin-right:6px;
  transition:transform .15s ease;
}
.viewHelp[open] .viewHelpSum::before{ transform:rotate(90deg); }
.viewHelpSum:hover{ color:#172852; }

.viewHelpBody{
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:#666;
}

/* Le mot « Paramètres » : mêmes bleu et soulignement que .appliedParamsBtn,
   le lien déjà présent en haut du même panneau. */
.viewHelpLink{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  color:#2563EB;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.viewHelpLink:hover{ color:#1d4ed8; }
.viewHelpLink:focus-visible{ outline:2px solid #3589b2; outline-offset:2px; }