:root{
  --bleu-900:#122A43;
  --bleu-700:#1B4066;
  --bleu-500:#2C5B87;
  --sable-100:#FBF6EC;
  --sable-200:#F3E9D2;
  --sable-300:#E8D9B5;
  --brun-600:#8A6A46;
  --brun-700:#6E5335;
  --ink:#25201A;
  --muted:#6B6154;
  --white:#FFFFFF;
  --radius:14px;
  --shadow: 0 10px 30px rgba(18,42,67,0.10);
  --danger:#8C3B2E;
  --success:#3B6B4A;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--sable-100);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--bleu-900);
  margin:0 0 .5em 0;
  line-height:1.2;
}
p{margin:0 0 1em 0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);}
.tag{
  display:inline-block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brun-700); background:var(--sable-200); border:1px solid var(--sable-300);
  padding:5px 12px; border-radius:999px; margin-bottom:14px; font-weight:600;
}

/* Header */
header{ position:sticky; top:0; z-index:50; background:rgba(251,246,236,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--sable-300); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1140px; margin:0 auto; }
.brand-mark{ display:inline-block; width:34px;height:34px; background-image:url(/logo-icon.png); background-size:contain; background-repeat:no-repeat; background-position:center; vertical-align:middle; margin-right:8px; }
.logo{ display:flex; align-items:center; font-family:Georgia,serif; font-size:1.5rem; font-weight:700; color:var(--bleu-900); letter-spacing:.02em; }
.logo span{color:var(--brun-600);}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{font-size:.95rem; font-weight:500; color:var(--bleu-700);}
.nav-links a:hover, .nav-links a.active{color:var(--brun-600);}
.nav-cta{ background:var(--bleu-900); color:var(--white); padding:10px 22px; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow:var(--shadow); }
.nav-cta:hover{background:var(--brun-700);}

/* Buttons */
.btn{ padding:13px 26px; border-radius:999px; font-weight:600; font-size:.95rem; display:inline-block; transition:transform .15s ease; border:none; cursor:pointer; font-family:inherit; }
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--bleu-900); color:var(--white); box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--brun-700);}
.btn-ghost{border:1.5px solid var(--bleu-900); color:var(--bleu-900); background:transparent;}
.btn-sm{padding:8px 16px; font-size:.85rem; border-radius:999px;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-success{background:var(--success); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* Hero */
.hero{ position:relative; padding:70px 0 60px; background: radial-gradient(circle at 85% 20%, rgba(138,106,70,0.16), transparent 45%), linear-gradient(180deg, var(--sable-100) 0%, var(--sable-200) 100%); }
.hero h1{font-size:2.4rem; max-width:620px;}
.hero p.lead{font-size:1.1rem; color:var(--muted); max-width:560px;}

/* Sections */
section{padding:70px 0;}
.section-head{max-width:640px; margin:0 auto 40px; text-align:center;}
.section-head p{color:var(--muted);}

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ background:var(--white); border:1px solid var(--sable-300); border-radius:var(--radius); padding:26px 22px; }
.step-num{ width:36px;height:36px;border-radius:50%; background:var(--sable-200); color:var(--brun-700); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-family:Georgia,serif; }
.step h4{font-size:1.05rem; margin-bottom:8px;}
.step p{font-size:.92rem; color:var(--muted); margin:0;}

/* Profile grid */
.profiles-wrap{background:var(--sable-200);}
.profile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.profile-card{ background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--sable-300); box-shadow:var(--shadow); }
.profile-card a{display:block;}
.profile-photo{ height:190px; background:linear-gradient(160deg,var(--bleu-500),var(--brun-600)); position:relative; }
.profile-photo img{width:100%;height:100%;object-fit:cover;}
.profile-info{padding:14px 16px;}
.profile-info h4{font-size:1rem; margin-bottom:2px;}
.profile-info span{font-size:.85rem; color:var(--muted);}
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }

/* Profile detail */
.profile-detail{display:grid; grid-template-columns:1.1fr .9fr; gap:40px;}
.photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.photo-grid img{border-radius:10px; height:220px; width:100%; object-fit:cover; background:var(--sable-300);}
.detail-card{background:var(--white); border:1px solid var(--sable-300); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}
.contact-locked{background:var(--sable-200); border:1px dashed var(--sable-300); border-radius:10px; padding:18px; text-align:center;}
.contact-unlocked{background:#EAF3EC; border:1px solid #BFE0C8; border-radius:10px; padding:18px;}

/* Pricing (reused) */
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:840px; margin:0 auto; }
.price-card{ background:var(--white); border:1px solid var(--sable-300); border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow); }
.price-card.featured{border:2px solid var(--brun-600);}
.price{ font-family:Georgia,serif; font-size:2.4rem; color:var(--bleu-900); margin:14px 0 4px; }
.price span{font-size:1rem; color:var(--muted); font-family:-apple-system,sans-serif;}
.price-list{list-style:none; padding:0; margin:22px 0 26px;}
.price-list li{ padding:9px 0; border-top:1px solid var(--sable-200); font-size:.92rem; display:flex; gap:8px; }
.price-list li::before{content:"✓"; color:var(--brun-600); font-weight:700;}

/* Forms */
.form-card{background:var(--white); border:1px solid var(--sable-300); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); max-width:720px; margin:0 auto;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--bleu-900);}
.form-row .hint{font-size:.8rem; color:var(--muted); margin-top:4px;}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], select, textarea{
  width:100%; padding:11px 14px; border:1px solid var(--sable-300); border-radius:8px; font-size:.95rem; font-family:inherit; background:var(--sable-100);
}
textarea{min-height:100px; resize:vertical;}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.photo-upload-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.photo-slot{ border:2px dashed var(--sable-300); border-radius:10px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; background:var(--sable-100); cursor:pointer; font-size:.75rem; color:var(--muted); text-align:center; padding:6px; }
.photo-slot img{width:100%;height:100%;object-fit:cover;}
.photo-slot input{position:absolute; inset:0; opacity:0; cursor:pointer;}

/* Banners */
.banner{ padding:12px 20px; text-align:center; font-size:.88rem; font-weight:600; }
.banner-demo{ background:#F3E0B8; color:#5C4413; border-bottom:1px solid #E0C384; }
.banner-success{background:#DCEFE1; color:var(--success); border:1px solid #BFE0C8; border-radius:10px; padding:16px; text-align:center;}
.banner-error{background:#F6E1DD; color:var(--danger); border:1px solid #E3B9B1; border-radius:10px; padding:16px; text-align:center;}

/* Admin */
.admin-table{width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.admin-table th, .admin-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--sable-200); font-size:.9rem; vertical-align:top;}
.admin-table th{background:var(--sable-200); color:var(--brun-700); text-transform:uppercase; font-size:.72rem; letter-spacing:.04em;}
.status-pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:700;}
.status-en_attente{background:#F3E0B8; color:#5C4413;}
.status-valide{background:#DCEFE1; color:var(--success);}
.status-refuse{background:#F6E1DD; color:var(--danger);}
.countdown{font-size:.78rem; color:var(--muted);}
.admin-actions{display:flex; gap:8px;}
.admin-photos{display:flex; gap:4px;}
.admin-photos img{width:40px;height:40px;object-fit:cover;border-radius:6px;}

/* Footer */
footer{ background:var(--sable-200); border-top:1px solid var(--sable-300); padding:50px 0 24px; margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:34px; }
.footer-grid h5{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brun-700); margin-bottom:14px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-grid a{font-size:.9rem; color:var(--bleu-700);}
.footer-bottom{ border-top:1px solid var(--sable-300); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--muted); }

@media(max-width:900px){
  .steps, .profile-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid, .profile-detail, .form-grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
}
@media(max-width:560px){
  .steps, .profile-grid{grid-template-columns:1fr;}
  .hero h1{font-size:1.9rem;}
  .footer-grid{grid-template-columns:1fr;}
  .photo-upload-grid{grid-template-columns:repeat(2,1fr);}
}