/* =============================================================================
   Neuro-Calme — Design System (mobile-first)
   Couleurs : Bleu #24344D | Cuivré #B88A78 | Beige #EDE3D9 | Blanc #FFFFFF
   ========================================================================== */

:root{
  --nc-navy:#24344D;     /* Bleu Marine Raffiné */
  --nc-copper:#B88A78;   /* Cuivré Doux (CTA)  */
  --nc-beige:#EDE3D9;    /* Beige Chic         */
  --nc-white:#FFFFFF;    /* Blanc Pur          */

  --radius:18px;
  --shadow-card:0 12px 30px rgba(18,28,45,.08);
  --shadow-hover:0 18px 44px rgba(18,28,45,.12);
  --container:1180px;

  /* Dégradés tokenisés */
  --g-navy-soft:
    radial-gradient(1200px 600px at 0% -10%, rgba(36,52,77,.18), transparent 60%),
    linear-gradient(180deg, var(--nc-white) 0%, #F6F2EE 55%, var(--nc-beige) 100%);
  --g-copper-beige:
    radial-gradient(900px 480px at 95% -10%, rgba(184,138,120,.35), transparent 60%),
    linear-gradient(180deg, var(--nc-white) 0%, #F7F3EF 40%, var(--nc-beige) 100%);
  --g-beige-wave:
    radial-gradient(900px 480px at 15% -10%, rgba(36,52,77,.12), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(184,138,120,.28), transparent 60%),
    linear-gradient(180deg, var(--nc-white), #F6F2EE);
  --g-hero-base:
    radial-gradient(1200px 600px at 0% -10%, rgba(36,52,77,.12), transparent 60%),
    linear-gradient(180deg, var(--nc-white) 0%, #F6F2EE 100%);
}

/* =========================
   Reset & bases typographiques
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",sans-serif;
  color:var(--nc-navy);
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(184,138,120,.22), transparent 60%),
    radial-gradient(800px 400px at 10% 0%, rgba(237,227,217,.60), transparent 60%),
    linear-gradient(180deg,var(--nc-white),#FAF7F4 30%,var(--nc-white) 100%);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.container-narrow{max-width:900px}
.center{text-align:center}

/* =========================
   Utilitaires couleur & dégradés
   ========================= */
.text-navy{color:var(--nc-navy)}
.text-copper{color:var(--nc-copper)}
.text-beige{color:#b09e8e}
.bg-white{background:var(--nc-white)}
.bg-beige{background:var(--nc-beige)}

.g-hero       {background:var(--g-hero-base)}
.g-navy-beige {background:var(--g-navy-soft)}
.g-copper-beige{background:var(--g-copper-beige)}
.g-beige-wave {background:var(--g-beige-wave)}

/* Badges / éléments réutilisables */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;background:#fff;
  border:1px solid rgba(36,52,77,.12);box-shadow:0 8px 20px rgba(18,28,45,.06)
}
.ribbon{
  background:linear-gradient(135deg,var(--nc-copper),#a87667);
  color:#fff;border-radius:18px;padding:14px 16px;display:inline-flex;gap:10px;align-items:center;
  box-shadow:0 10px 28px rgba(184,138,120,.28)
}

/* =========================
   Header & Navigation (mobile-first)
   ========================= */
.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border-bottom:1px solid rgba(36,52,77,.08)
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}
.menu{
  display:none;flex-direction:column;gap:0;
  position:absolute;left:0;right:0;top:60px;background:#fff;
  border-bottom:1px solid rgba(36,52,77,.1);padding:10px 20px
}
.menu a{padding:10px 12px;border-radius:10px;font-weight:500}
.menu a.active{background:rgba(36,52,77,.06)}
.menu .cta{
  background:linear-gradient(135deg,var(--nc-copper),#a87667);
  color:#fff;box-shadow:0 6px 16px rgba(184,138,120,.25)
}
.menu .cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(184,138,120,.35)}
.nav-toggle{
  display:inline-flex;cursor:pointer;border:1px solid rgba(36,52,77,.2);
  padding:8px 12px;border-radius:10px;background:#fff
}
.navchk{display:none}
.navchk:checked ~ .nav-toggle + .menu{display:flex}

/* =========================
   Hero & boutons
   ========================= */
.hero .inner{display:grid;grid-template-columns:1fr;gap:28px;padding:64px 0 34px}
.eyebrow{color:#6F7C91;text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:.86rem}
h1{font-size:clamp(2rem,7vw,3rem);line-height:1.1;margin:.4rem 0 1rem}
.lead{color:#41526A;font-size:clamp(1rem,1.25vw,1.15rem)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border-radius:14px;
  font-weight:600;border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease
}
.btn-primary{
  background:linear-gradient(135deg,var(--nc-copper),#a87667 70%);color:#fff;
  box-shadow:0 14px 28px rgba(184,138,120,.28)
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(184,138,120,.35)}
.btn-outline{background:#fff;border:1.5px solid rgba(36,52,77,.18);color:var(--nc-navy)}
.btn-outline:hover{border-color:rgba(36,52,77,.26);transform:translateY(-1px)}

.hero-art{
  align-self:center;justify-self:center;width:100%;max-width:560px;aspect-ratio:1/1;border-radius:32px;overflow:hidden;
  border:1px solid rgba(36,52,77,.08);box-shadow:0 40px 80px rgba(15,23,42,.12);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(36,52,77,.18), transparent 50%),
    radial-gradient(120% 150% at 85% 15%, rgba(184,138,120,.35), transparent 60%),
    linear-gradient(135deg,#ffffff,#F2EEEA)
}

/* =========================
   Sections, grilles, cartes
   ========================= */
.section{padding:52px 0}
.section h2{font-size:clamp(1.6rem,5.2vw,2.2rem);margin:0 0 10px}
.subtitle{color:#5D6B83;margin-bottom:24px}

.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:1fr}

.card{
  background:#fff;border:1px solid rgba(36,52,77,.08);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px;
  transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.price{font-size:2rem;font-weight:700;color:var(--nc-navy)}
.artwork{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(36,52,77,.06);background:#fff}
.list{margin:0;padding-left:18px}
.list li{margin:.35rem 0}
.fact{
  background:#fff;border:1px solid rgba(36,52,77,.08);border-radius:16px;
  padding:16px 18px;box-shadow:0 10px 24px rgba(18,28,45,.08)
}

/* =========================
   Table comparatif
   ========================= */
.compare{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid rgba(36,52,77,.08);border-radius:14px;overflow:hidden
}
.compare th,.compare td{padding:14px 12px;text-align:center;border-bottom:1px solid rgba(36,52,77,.06)}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{background:linear-gradient(180deg,#fff,#F3EFEB)}

/* =========================
   Vidéo & embeds
   ========================= */
.video{border:1px solid rgba(36,52,77,.08);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
.video video{display:block;width:100%;background:#000}
.video figcaption{padding:10px;font-size:.9rem;color:#556987}
.video-embed{position:relative;padding-top:56.25%;border:1px solid rgba(36,52,77,.08);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =========================
   Breadcrumbs & footer
   ========================= */
.breadcrumbs{font-size:.9rem;opacity:.85;margin-bottom:14px}
.breadcrumbs a{text-decoration:underline}
.footerbar{display:flex;justify-content:center;padding:18px 0;border-top:1px solid rgba(36,52,77,.1)}

/* =========================
   Accessibilité focus
   ========================= */
:focus-visible{
  outline:3px solid rgba(184,138,120,.55);
  outline-offset:2px;
  border-radius:10px
}

/* =========================
   Desktop ≥ 980px
   ========================= */
@media (min-width:980px){
  .hero .inner{grid-template-columns:1.05fr .95fr;padding:80px 0 40px}
  .menu{display:flex;position:static;flex-direction:row;gap:12px;border:none;padding:0}
  .nav-toggle{display:none}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}