@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:        #16233a;
  --ink-soft:   #2a3b5c;
  --paper:      #f6f3ea;
  --paper-dim:  #ece6d4;
  --line:       #d8cfb4;
  --gold:       #b98a2d;
  --gold-soft:  #e4c584;
  --compass:    #7c5cff;
  --success:    #3f7a56;
  --radius:     10px;
  --shadow:     0 8px 24px rgba(22,35,58,0.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:2.4rem; font-weight:700;}
h2{font-size:1.7rem; font-weight:600;}
h3{font-size:1.25rem; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--gold); text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1080px; margin:0 auto; padding:0 24px;}

/* Header */
.site-header{
  background:var(--ink);
  border-bottom:3px solid var(--gold);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.logo{font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:var(--paper);}
.logo span{color:var(--gold-soft); font-weight:400; font-style:italic;}
.main-nav a{
  color:var(--paper); opacity:.85; margin-left:20px; font-size:.95rem; font-weight:500;
}
.main-nav a:hover{opacity:1; text-decoration:none; color:var(--gold-soft);}
.main-nav .btn-link{
  background:var(--gold); color:var(--ink); padding:8px 16px; border-radius:999px; opacity:1;
  font-weight:600;
}
.main-nav .btn-link:hover{background:var(--gold-soft);}

main.container{padding-top:40px; padding-bottom:60px; min-height:60vh;}

/* Footer */
.site-footer{background:var(--ink); color:var(--paper); padding:26px 0; margin-top:40px;}
.site-footer p{margin:0 0 6px; font-size:.9rem; opacity:.85;}
.footer-note{font-style:italic; max-width:640px; opacity:.65 !important;}

/* Hero (landing page) */
.hero{
  display:flex; gap:48px; align-items:center; flex-wrap:wrap;
  padding:40px 0 20px;
}
.hero-text{flex:1 1 420px;}
.hero-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem;
  color:var(--gold); font-weight:700; margin-bottom:14px;
}
.hero-baseline{font-size:1.2rem; color:var(--ink-soft); font-style:italic;}
.hero-visual{flex:1 1 340px; min-width:280px;}

/* Cards */
.card{
  background:#fffdf7; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow); margin-bottom:24px;
}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}

/* Boutons / formulaires */
.btn{
  display:inline-block; background:var(--ink); color:var(--paper); border:none;
  padding:12px 26px; border-radius:999px; font-weight:600; font-size:.95rem; cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn:hover{background:var(--ink-soft); text-decoration:none;}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-soft);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}

form label{display:block; font-weight:600; margin:16px 0 6px; font-size:.92rem;}
form input[type=text], form input[type=email], form input[type=password], form textarea, form select{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:1rem; background:#fffdf7;
}
form textarea{min-height:110px; resize:vertical;}
.champ-erreur{color:#a3372f; font-size:.88rem; margin-top:6px;}
.message-alerte{
  background:#fff3e0; border:1px solid var(--gold-soft); color:#7a4b00;
  padding:14px 18px; border-radius:8px; margin-bottom:20px;
}
.message-succes{
  background:#eef6f0; border:1px solid var(--success); color:var(--success);
  padding:14px 18px; border-radius:8px; margin-bottom:20px;
}

/* Echelle Likert */
.item-question{
  border-bottom:1px dotted var(--line); padding:16px 0;
}
.item-question p{font-weight:500; margin-bottom:10px;}
.echelle{display:flex; gap:8px; flex-wrap:wrap;}
.echelle label{
  display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:400;
  font-size:.78rem; color:var(--ink-soft); cursor:pointer; margin:0;
}
.echelle input{accent-color:var(--gold);}
.dimension-titre{
  margin-top:36px; padding:14px 18px; background:var(--ink); color:var(--paper);
  border-radius:8px;
}
.dimension-titre small{display:block; opacity:.7; font-style:italic; font-weight:400;}

/* Tableau de bord */
.score-global{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.score-chiffre{
  font-family:'Fraunces',serif; font-size:3.6rem; font-weight:700; color:var(--gold);
  line-height:1;
}
.badge-profil{
  display:inline-block; background:var(--paper-dim); border:1px solid var(--line);
  padding:6px 14px; border-radius:999px; font-weight:600; font-size:.85rem;
}
.axes-liste{list-style:none; padding:0; margin:0;}
.axes-liste li{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dotted var(--line);}
.axes-liste .barre{
  background:var(--paper-dim); border-radius:6px; overflow:hidden; height:8px; width:100%;
  margin-top:4px;
}
.axes-liste .barre span{display:block; height:100%; background:var(--gold);}

/* Défis */
.defi-carte{
  border-left:4px solid var(--gold); padding:14px 18px; background:#fffdf7;
  border-radius:0 8px 8px 0; margin-bottom:14px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap;
}
.gain-points{font-weight:700; color:var(--success); white-space:nowrap;}

/* Coach chat */
.chat-fenetre{
  border:1px solid var(--line); border-radius:var(--radius); background:#fffdf7;
  height:420px; overflow-y:auto; padding:20px; margin-bottom:16px;
}
.msg{max-width:75%; padding:10px 16px; border-radius:14px; margin-bottom:12px; line-height:1.4;}
.msg-coach{background:var(--paper-dim); border:1px solid var(--line);}
.msg-user{background:var(--ink); color:var(--paper); margin-left:auto;}

table{width:100%; border-collapse:collapse;}
table th, table td{padding:10px; text-align:left; border-bottom:1px solid var(--line);}

@media (max-width: 640px){
  h1{font-size:1.8rem;}
  .header-inner{flex-direction:column; gap:14px;}
  .main-nav a{margin:0 8px;}
}