/* ===================================================================
   Céline Laruelle — Coach scolaire
   Palette inspirée du logo : crème / taupe / brun, papillon en ligne fine
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream-bg:#F6EEE1;
  --cream-light:#FBF7EF;
  --cream-shade:#EAE0CF;
  --taupe:#9C8F7E;
  --taupe-soft:#B8AC99;
  --brown-dark:#3E362C;
  --brown-mid:#6B5D4C;
  --ink:#2C2620;
  --gold:#B99A62;
  --ok:#5C7A5C;
  --error:#A5453A;
  --error-bg:#FBEAE7;
  --radius:6px;
  --shadow:0 6px 24px rgba(60,50,35,.10);
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Jost', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream-bg);
  color:var(--brown-dark);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--brown-dark);
  font-weight:500;
  margin:0 0 .5em;
  letter-spacing:.2px;
}
h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:600;}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
a{color:var(--brown-mid); text-decoration:none;}
a:hover{color:var(--gold);}
p{color:var(--brown-mid);}
img{max-width:100%; display:block;}

.container{max-width:1120px; margin:0 auto; padding:0 24px;}
.container-wide{max-width:1440px; margin:0 auto; padding:0 32px;}

/* ---------- Navigation ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,238,225,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cream-shade);
}
.site-nav .container{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.brand{font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--brown-dark);}
.nav-links{display:flex; gap:28px; align-items:center; font-size:.95rem; letter-spacing:.4px; flex-wrap:wrap;}
.nav-links a{color:var(--brown-mid); margin-right:28px;}
.nav-links a:last-of-type{margin-right:0;}
.btn-home{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; color:var(--brown-mid);
  border:1px solid var(--taupe-soft); border-radius:4px;
  padding:6px 16px; transition:.2s;
}
.btn-home:hover{background:var(--brown-dark); color:var(--cream-light); border-color:var(--brown-dark);}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:500;
  padding:12px 28px; border-radius:4px; border:1px solid var(--brown-dark); letter-spacing:.6px; text-transform:uppercase; font-size:.82rem;
  background:var(--brown-dark); color:var(--cream-light); cursor:pointer;
  font-size:.95rem; letter-spacing:.3px; transition:.2s;
}
.btn:hover{background:var(--gold); border-color:var(--gold);}
.btn-outline{background:transparent; color:var(--brown-dark);}
.btn-outline:hover{background:var(--brown-dark); color:var(--cream-light);}
.btn-sm{padding:7px 16px; font-size:.82rem;}
.btn-danger{background:var(--error); border-color:var(--error);}
.btn-danger:hover{background:#8a372e; border-color:#8a372e;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.cta-group{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
@media(max-width:480px){
  .btn{padding:9px 18px; font-size:.72rem; letter-spacing:.4px;}
  .cta-group{gap:8px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:90px 0 70px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; top:-120px; left:-160px;
  width:520px; height:520px; border-radius:50%;
  background:var(--cream-shade); opacity:.45; z-index:0;
}
.hero .container{position:relative; z-index:1;}
.hero-eyebrow{
  text-transform:uppercase; letter-spacing:3px; font-size:.75rem;
  color:var(--gold); margin-bottom:14px; display:block;
}
.hero p.lead{max-width:560px; font-size:1.1rem;}
.butterfly-line{position:absolute; top:20px; right:-10px; width:220px; opacity:.5; z-index:0;}

/* ---------- Accueil "vitrine" ---------- */
.hero-splash{padding:70px 0 60px;}
.hero-splash-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center;}
.hero-xl{font-size:clamp(2.4rem,5.2vw,3.8rem); line-height:1.08;}
.hero-xl em{font-style:normal; font-weight:700; color:var(--gold);}
.hero-photo-wrap{display:flex; justify-content:center;}
.hero-photo{
  width:100%; max-width:340px; aspect-ratio:1/1; object-fit:cover;
  border-radius:50%; border:6px solid var(--cream-light); box-shadow:var(--shadow);
}
@media(max-width:820px){.hero-splash-grid{grid-template-columns:1fr;} .hero-photo-wrap{order:-1;} .hero-photo{max-width:220px;}}

.stat-card{text-align:center; padding:12px;}
.stat-number{display:block; font-family:var(--font-display); font-weight:600; font-size:2.1rem; color:var(--brown-dark); margin-bottom:6px;}
.stat-card p{margin:0; color:var(--brown-mid);}

.card-link{display:block; text-decoration:none; transition:.2s; cursor:pointer;}
.card-link:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(60,50,35,.14);}
.card-link h3{color:var(--brown-dark);}
.card-link p{color:var(--brown-mid);}
.link-arrow{display:inline-block; margin-top:10px; font-size:.85rem; color:var(--gold); font-weight:500;}

.carte-contact{border-top:3px solid var(--gold); align-self:start;}

.livre-card{display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:start;}
.livre-cover{width:100%; border-radius:4px; box-shadow:var(--shadow);}
@media(max-width:600px){.livre-card{grid-template-columns:1fr;} .livre-cover{max-width:200px; margin:0 auto;}}

/* ---------- Sections ---------- */
section{padding:64px 0;}
.section-alt{background:var(--cream-light);}
.divider{
  width:60px; height:1px; background:var(--taupe-soft); margin:24px 0;
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media(max-width:820px){.grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--cream-light); border:1px solid var(--cream-shade);
  border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);
}
.card h3{font-size:1.3rem;}

blockquote{
  font-family:var(--font-display); font-style:italic; font-size:1.4rem;
  color:var(--brown-mid); border-left:2px solid var(--gold); padding-left:24px; margin:0;
}

footer{
  background:var(--brown-dark); color:var(--cream-light);
  padding:36px 0; font-size:.85rem;
}
footer a{color:var(--cream-shade);}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;}

/* ---------- Formulaires ---------- */
.form-box{
  background:var(--cream-light); border:1px solid var(--cream-shade);
  border-radius:var(--radius); padding:32px; max-width:480px; margin:0 auto;
  box-shadow:var(--shadow);
}
label{display:block; font-size:.85rem; color:var(--brown-mid); margin:14px 0 6px;}
.req{color:var(--error);}
.note-obligatoire{font-size:.75rem; color:var(--taupe); margin-top:16px;}
input, select, textarea{
  width:100%; padding:11px 14px; border:1px solid var(--taupe-soft);
  border-radius:8px; background:var(--cream-bg); font-family:var(--font-body);
  font-size:.95rem; color:var(--brown-dark);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:44px;}
.toggle-eye{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:8px;
  color:var(--taupe); display:flex; align-items:center;
}
.toggle-eye:hover{color:var(--brown-dark);}
.toggle-eye svg{width:18px; height:18px;}
.toggle-eye-inline{
  display:inline-flex; align-items:center; vertical-align:middle;
  background:none; border:none; cursor:pointer; padding:4px;
  color:var(--taupe); margin-left:6px;
}
.toggle-eye-inline:hover{color:var(--brown-dark);}
.toggle-eye-inline svg{width:16px; height:16px;}
.field-hint{font-size:.75rem; color:var(--taupe); margin-top:4px;}

.alert{padding:12px 16px; border-radius:8px; font-size:.88rem; margin:16px 0;}
.alert-error{background:var(--error-bg); color:var(--error); border:1px solid #e6c3bd;}
.alert-ok{background:#eaf1ea; color:var(--ok); border:1px solid #c8dcc8;}

/* ---------- Dashboards (admin / super / membre) ---------- */
.app-shell{min-height:100vh; display:flex; flex-direction:column;}
.app-header{
  background:var(--brown-dark); color:var(--cream-light);
  padding:14px 0;
}
.app-header .container, .app-header .container-wide{display:flex; align-items:center; justify-content:space-between; width:100%;}
.app-header .brand{color:var(--cream-light); display:block; line-height:1.2;}
.app-header-left{display:flex; flex-direction:column; gap:4px;}
.app-header-meta{display:flex; align-items:center; gap:12px;}
.app-header-right{display:flex; align-items:center; gap:10px;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); color:#fff; background:none;
}
.icon-btn svg{width:17px; height:17px;}
.icon-btn:hover{background:rgba(255,255,255,.1);}
.app-badge{
  font-size:.7rem; text-transform:uppercase; letter-spacing:1px;
  background:var(--gold); color:var(--brown-dark); padding:3px 10px; border-radius:20px;
}
.version-tag{font-size:.72rem; color:var(--taupe-soft);}

.tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--cream-shade); margin-bottom:24px;}
.tab-btn{
  background:none; border:none; padding:12px 18px; font-family:var(--font-body);
  font-size:.92rem; color:var(--brown-mid); cursor:pointer; border-bottom:2px solid transparent;
}
.tab-btn.active{color:var(--brown-dark); border-bottom-color:var(--gold); font-weight:500;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

table{width:100%; border-collapse:collapse; font-size:.9rem;}
th, td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--cream-shade);}
th{color:var(--taupe); font-weight:500; text-transform:uppercase; font-size:.72rem; letter-spacing:.5px;}
tr:hover td{background:var(--cream-light);}
.table-wrap{overflow-x:auto; background:var(--cream-light); border-radius:var(--radius); border:1px solid var(--cream-shade); padding:8px;}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.pill{display:inline-block; padding:3px 12px; border-radius:20px; font-size:.75rem;}
.pill-attente{background:#f3e6c9; color:#8a6d1f;}
.pill-valide{background:#e3ecd9; color:var(--ok);}
.pill-refuse{background:var(--error-bg); color:var(--error);}
.pill-categorie{background:var(--cream-shade); color:var(--brown-dark); border:1px solid var(--taupe-soft); text-transform:none; font-weight:500;}

.journal-timeline{border-left:2px solid var(--cream-shade); padding-left:18px;}
.journal-entry{position:relative; padding-bottom:18px;}
.journal-entry::before{content:''; position:absolute; left:-23px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--gold);}
.journal-entry-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
.journal-entry p{margin:0; white-space:pre-line;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(44,38,32,.55);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{background:var(--cream-light); border-radius:var(--radius); padding:28px; max-width:520px; width:100%; max-height:88vh; overflow-y:auto;}
.hidden{display:none !important;}

.loader{
  border:2px solid var(--cream-shade); border-top-color:var(--gold);
  border-radius:50%; width:22px; height:22px; animation:spin 0.8s linear infinite;
  display:inline-block; vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg);}}

.small-muted{font-size:.78rem; color:var(--taupe);}
.text-center{text-align:center;}
.mt-24{margin-top:24px;}
.mb-24{margin-bottom:24px;}

.settings-block{
  border-top:1px solid var(--cream-shade); padding-top:16px;
}
.settings-block summary{
  cursor:pointer; font-weight:500; color:var(--brown-mid);
  font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
  list-style:none; user-select:none;
}
.settings-block summary::-webkit-details-marker{display:none;}
.settings-block summary::before{content:'▸ '; color:var(--gold);}
.settings-block[open] summary::before{content:'▾ ';}

@media(max-width:600px){
  .nav-links{gap:14px; font-size:.85rem;}
  .toolbar{flex-direction:column; align-items:flex-start;}
}