:root{
  /* Fond */
  --bg-page: #FCF7FB; 
  --card-bg: #FFFFFF;
  --box-shadow: 0 8px 24px rgba(11, 43, 77, 0.06);


  /* Texte */
  --text-main: #0B2B4D;
  --text-muted: #6B7280;

  /* Inputs */
  --input-border: #D1D5DB;
  --input-focus: rgba(11, 43, 77, 0.18);
  --placeholder: #9CA3AF;

  /* Bouton */
  --btn-bg: #0B2B4D;
  --btn-text: #FFFFFF; /* tu disais que blanc OK */
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.card{
  background: var(--card-bg);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: var(--box-shadow);
}

.cardTitle{
  text-align: center;
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: 0.2px;
}

.cardSub{
  text-align: center;
  margin: 0 0 8px;
  color: var(--text-muted);
  line-height: 1.45;
}

.form{ margin-top: 20px; }

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  grid-template-areas:
    "prenom nom"
    "date time"
    "lieu  lieu"
    "email email";
}

.prenom{ grid-area: prenom; }
.nom{ grid-area: nom; }
.date{ grid-area: date; }
.time{ grid-area: time; }
.lieu{ grid-area: lieu; }
.email{ grid-area: email; }

.field label{
  display:block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-main);
}

.field input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: #fff;
  outline: none;
  font-size: 14px;
  color: var(--text-main);
}

/* Placeholder bien visible */
.field input::placeholder{
  color: var(--placeholder);
  opacity: 1;
}

.field input:focus{
  border-color: rgba(11,43,77,0.35);
  box-shadow: 0 0 0 3px var(--input-focus);
}

/* Suggestions */
.suggestions{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid rgba(11,43,77,0.18);
  border-radius: 10px;
  overflow: hidden;
  display: none;
  background: #fff;
}

.suggestions.show{ display:block; }

.suggestions li{
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-main);
}

.suggestions li:hover{
  background: rgba(11,43,77,0.06);
}

/* Checkbox */
.checkbox{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 18px;
  font-size: 14px;
  color: var(--text-main);
}

.checkbox input{
  width: 18px;
  height: 18px;
}

.checkbox a{
  color: var(--text-main);
  text-decoration: underline;
}

/* Bouton */
.btnPrimary{
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.btnPrimary:hover{ opacity: 0.95; }

.privacy-note {
  font-size: 0.85rem;
  color: #0b2b4d;
  opacity: 0.75;
  margin-top: 0.75rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}


/* Message global */
.msg{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  display: none;
  font-size: 14px;
}

.msg.show{ display:block; }

.msg.ok{
  background: rgba(11, 43, 77, 0.06);
  border: 1px solid rgba(11, 43, 77, 0.18);
  color: var(--text-main);
}

.msg.error{
  background: rgba(180, 0, 0, 0.06);
  border: 1px solid rgba(180, 0, 0, 0.18);
  color: #7a0000;
}

/* Mobile */
@media (max-width: 800px){
  .grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "prenom"
      "nom"
      "date"
      "time"
      "lieu"
      "email";
  }
}

/* =========================
   SVG wrapper
========================= */
#bodygraph-container svg{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   1) RINGS (ronds des portes)
   default: stroke #000, fill none
   active: fill bordeaux
========================= */
[id^="ring"]{
  stroke: #000000 !important;
  fill: #FFFFFF !important;
}
[id^="ring"].active-gate{
  stroke:#000000; 
  fill: #eadbc8 !important;
}

/* =========================
   2) LABELS (numéros des portes)
   default: noir
   active: blanc
========================= */
[id^="label-"]{
  fill: #000 !important;
  stroke: none !important;
}
[id^="label-"].active-gate{
  fill: #0b2b4d !important;
  stroke: none !important;
}

/* =========================
   3) CHANNEL SEGMENTS (GateX / GateXB)
   default: stroke noir, fill none
   active:
     - is-d : jaune
     - is-p : bleu
     - is-both : pattern déjà dans le SVG (GateXB)
========================= */

/* Base pour TOUS les segments Gate */
[id^="Gate"] :not [id^="GateConnect"] {
  stroke: #000 !important;
  fill: none !important;
  opacity: 1;
}

/* On cache toutes les versions B par défaut */
[id^="Gate"][id$="B"]{
  opacity: 0;
}

/* Active = visible */
.active-channel{
  opacity: 1 !important;
}

/* GateX coloré selon état */
[id^="Gate"].active-channel.is-d{
  fill: #e9c46a !important;
}
[id^="Gate"].active-channel.is-p{
  fill: #0b2b4d !important;
}

/* BOTH = uniquement GateXB (pattern déjà défini en fill dans le SVG)
   => on ne met PAS de fill ici pour ne pas écraser le pattern */
[id^="Gate"][id$="B"].active-channel.is-both{
   opacity: 1 !important;
}

/* Optionnel : rendre les connecteurs un poil plus “présents” quand actifs */
#GateSpan.active-channel,
#GateConnect10.active-channel,
#GateConnect34.active-channel{
  stroke-width: 2.5px;
}

/* =========================
   4) CENTRES
   default: stroke noir, fill none
   defined: fill chakra
========================= */

/* Tous les fills/traits de centres */
[id^="stroke-"]{ stroke: #000 !important; }
[id^="fill-"]{ fill: #FFFFFF !important; }

/* Couleurs chakra (quand le groupe centre reçoit .defined-center)
   -> ton JS met .defined-center sur #Head/#Ajna/etc */
#Head.defined-center   #fill-Head{ fill: #eadbc8 !important; }
#Ajna.defined-center   #fill-Ajna{ fill: #eadbc8 !important; }
#Throat.defined-center #fill-Throat{ fill: #eadbc8 !important; }
#G.defined-center      #fill-G{ fill: #eadbc8 !important; }
#Ego.defined-center    #fill-Ego{ fill: #eadbc8 !important; }
#SolarPlexus.defined-center #fill-SolarPlexus{ fill: #eadbc8 !important; }
#Sacral.defined-center #fill-Sacral{ fill: #eadbc8 !important; }
#Spleen.defined-center #fill-Spleen{ fill: #eadbc8 !important; }
#Root.defined-center   #fill-Root{ fill: #eadbc8!important; }

/* =========================
   5) Texte latéral + variables
========================= */
#nom-prenom,
#naissance,
#type,
#strategie,
#autorite,
#definition,
#profil,
#signature,
#non-soi,
#croixincarnation,
#digestion,
#motivation,
#perspective,
#sens,
#sens-design,
#environnement,
#gates,
#channels{
 font-size: 20px !important
}

[id$="-color"],
[id$="-tone"]{
  fill: #000 !important;
}

/* Variables : cacher le côté non actif */
.hidden{ display: none !important; }

/* =========================
   6) Planètes : Sun-p / Sun-d (texte)
========================= */
[id$="-p"]{ fill: #0b2b4d !important; }
[id$="-d"]{ fill: #e9c46a !important; }

/* Zone actions sous le bodygraphe */
.actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Boutons plus discrets */
[id="downloadPdf"], [id="resetForm"]{
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #000;
}

/* Primaire discret */
[id="downloadPdf"]{
  background: #0b2b4d;
  color: #fff;
}

/* Secondaire discret */
[id="resetForm"]{
  background: transparent;
  color: #0b2b4d;
}

/* Version “petite” si besoin */
.btnSmall{
  padding: 9px 12px;
  font-size: 13px;
}

#pdfLogoWrap {
  display: none;
}

#pdf-footer {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 16px;
}

#pdf-mode #pdfLogoWrap {
  display: block;
  position: absolute;
  right:  24px;
  bottom: 24px;
}

.pdf-mode pdfLogo {
  width: 120px;
  max-width: 120px;
  height: auto;
  opacity:1;
  pointer-events: none;
}