:root{
  --bg:#FBF7EF; --paper:#FFFFFF; --ink:#221C15; --ink-soft:#6E6355;
  --accent:#E2672A; --accent-dark:#A63F17; --teal:#16403E; --teal-light:#2C6360;
  --gold:#E8A93D; --peach:#F7E4CE; --line:#E9DDC7; --warn:#FCE9B5; --warn-ink:#7A5B00;
}
html{scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans', sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; animation:pageFade .45s ease;}
@keyframes pageFade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){body{animation:none;}}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.015em; margin:0;}
a{color:inherit;}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){.wrap{padding:0 18px;}}
.todo{background:var(--warn); color:var(--warn-ink); font-weight:600; font-size:0.9em; padding:1px 7px; border-radius:3px;}
::selection{background:var(--accent); color:#fff;}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.fade-in{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) both;}
.fade-in.d1{animation-delay:.08s;} .fade-in.d2{animation-delay:.16s;} .fade-in.d3{animation-delay:.24s;}
@media (prefers-reduced-motion: reduce){.fade-in{animation:none;}}

/* ---------- En-tête (identique sur toutes les pages) ---------- */
.site-header{padding:48px 0 36px; text-align:center;}
.logo{display:inline-flex; align-items:center; gap:12px; font-family:'Fraunces', serif; font-size:34px; font-weight:700; letter-spacing:0.01em; text-decoration:none; color:var(--ink);}
.logo img{height:50px; width:auto; display:block;}
.tabnav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;}
.tabnav .rule{flex:1; max-width:60px; height:1px; background:var(--line);}
.tabnav .pills{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px; box-shadow:0 1px 2px rgba(34,28,21,0.04);}
.tab-btn{
  font-size:13.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  padding:13px 22px; border-radius:999px; border:none; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background .2s, color .2s; text-decoration:none; display:inline-block;
}
.tab-btn.active{background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(226,103,42,0.35);}
.tab-btn:not(.active):hover{background:var(--peach); color:var(--ink);}
.tab-btn.tab-account{background:var(--teal); color:#fff;}
.tab-btn.tab-account:hover{background:var(--teal-light); color:#fff;}
@media (max-width:760px){.tabnav .rule{display:none;}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:transform .15s, background .15s, box-shadow .15s;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(226,103,42,0.3);}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-outline:hover{background:var(--paper);}

/* ---------- Titres de section ---------- */
section{padding:56px 0;}
.page-title{text-align:center; margin-bottom:8px;}
.page-title .eyebrow{
  display:block; text-align:center; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-dark); font-weight:700; margin-bottom:10px;
}
.page-title h2{font-size:clamp(28px,3.8vw,38px); font-style:italic; color:var(--accent-dark);}
.page-sub{text-align:center; color:var(--ink-soft); font-size:15px; max-width:560px; margin:14px auto 0;}
.section-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- Pied de page (identique sur toutes les pages) ---------- */
footer{padding:30px 0; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); text-align:center;}
footer p{margin:4px 0;}

/* ---------- Messages d'alerte (formulaires) ---------- */
.alert{max-width:480px; margin:0 auto 20px; padding:12px 18px; border-radius:8px; font-size:13.5px; text-align:center;}
.alert-error{background:#FCE4E1; color:#A63F17; border:1px solid #F1D9D2;}
.alert-success{background:#DCEBDD; color:#2C6360; border:1px solid #C5DDC7;}