/* ---------------------------------------------------------------
   Lumière Cosmétiques — landing page
   Conventional B2B wholesale layout: white page, bordered panels,
   system typeface. Category colours are used only as small markers.
   --------------------------------------------------------------- */

:root{
  --accent:      #c2185b;
  --accent-dark: #9c0f47;
  --accent-tint: #fdf1f6;

  --ink:    #1f2328;
  --body:   #454f59;
  --muted:  #6b7681;

  --bg:     #ffffff;
  --bg-alt: #f5f7f8;
  --bg-head:#eef1f3;
  --line:   #dde2e7;
  --line-2: #c9d1d8;

  --maquillage: #c2185b;
  --soin:       #2e7d61;
  --parfum:     #a9750f;
  --ambiance:   #2a4a8c;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 32px);

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--f);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0; color:var(--ink); font-weight:700; line-height:1.25}
h1{font-size:clamp(1.75rem,3.2vw,2.35rem)}
h2{font-size:clamp(1.35rem,2.2vw,1.75rem)}
h3{font-size:1.05rem}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
section[id]{scroll-margin-top:80px}

.skip{position:absolute; left:-9999px}
.skip:focus{
  left:12px; top:12px; z-index:60; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:var(--radius);
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- buttons -------------------------------------------- */

.btn{
  display:inline-block; text-decoration:none; font-size:.875rem; font-weight:600;
  line-height:1; padding:12px 20px; border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background-color .15s, border-color .15s, color .15s;
}
.btn-solid{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:14px 26px; font-size:.95rem}
.btn-block{width:100%}

/* ---------- top bar -------------------------------------------- */

.topbar{
  position:sticky; top:0; z-index:40;
  background:#fff; border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
.topbar-in{display:flex; align-items:center; gap:clamp(16px,2.5vw,32px); min-height:72px; padding-block:10px}

.wordmark{display:flex; flex-direction:column; text-decoration:none; margin-right:auto}
.wordmark-name{
  font-size:1.35rem; font-weight:700; letter-spacing:.09em; color:var(--accent); line-height:1;
}
.wordmark-sub{font-size:.7rem; color:var(--muted); letter-spacing:.04em; margin-top:4px}

.nav{display:flex; gap:clamp(14px,1.8vw,26px)}
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:600; color:var(--ink);
  padding-block:6px; white-space:nowrap;
}
.nav a:hover{color:var(--accent)}

.topbar-end{display:flex; align-items:center; gap:14px; flex:none}
.topbar-end .btn{white-space:nowrap}
.mail{font-size:.875rem; color:var(--body); text-decoration:none}
.mail:hover{color:var(--accent)}

.lang{display:flex; flex:none; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden}
.lang button{
  appearance:none; background:#fff; border:0; color:var(--muted); cursor:pointer;
  font:inherit; font-size:.75rem; font-weight:700; padding:7px 10px;
}
.lang button[aria-pressed="true"]{background:var(--ink); color:#fff}

/* ---------- hero ------------------------------------------------ */

.hero{background:var(--bg-alt); border-bottom:1px solid var(--line); padding-block:clamp(32px,4vw,52px) 0}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px);
  gap:clamp(24px,3.5vw,48px); align-items:start;
}
.hero-copy .lede{max-width:52ch; margin-top:16px; font-size:1.02rem; color:var(--body)}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}

/* trade price list */
.tarif{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tarif-head{background:var(--bg-head); border-bottom:1px solid var(--line); padding:14px 18px}
.tarif-head h2{font-size:1rem}
.tarif-head p{font-size:.8rem; color:var(--muted); margin-top:3px}

.tarif-table{width:100%; border-collapse:collapse}
.tarif-table th{
  text-align:left; font-size:.75rem; font-weight:600; color:var(--muted);
  padding:10px 12px; border-bottom:1px solid var(--line); background:#fafbfc;
}
.tarif-table td{
  padding:11px 12px; border-bottom:1px solid var(--line); font-size:.875rem; color:var(--body);
}
.tarif-table tr:last-child td{border-bottom:0}
.tarif-table .num{text-align:right; font-weight:700; color:var(--ink); white-space:nowrap}
.tarif-table .ref{
  font-weight:600; color:var(--ink); white-space:nowrap; padding-left:26px; position:relative;
}
.tarif-table .ref::before{
  content:""; position:absolute; left:12px; top:50%; margin-top:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--pig);
}
.tarif-table .pack{color:var(--muted); white-space:nowrap}
.tarif-foot{
  padding:12px 18px; background:#fafbfc; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted);
}

/* service strip */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(28px,3.5vw,44px); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; border-bottom:0;
}
.facts > div{padding:18px 20px; border-left:1px solid var(--line)}
.facts > div:first-child{border-left:0}
.facts dt{font-size:.8rem; color:var(--muted)}
.facts dd{margin:4px 0 0; font-size:1.3rem; font-weight:700; color:var(--ink)}

/* ---------- generic sections ------------------------------------ */

.section{padding-block:clamp(40px,5vw,68px)}
.section-dark{background:var(--bg-alt); border-block:1px solid var(--line)}
.section-paper2{background:#fff}

.section-head{max-width:70ch}
.section-lede{margin-top:12px; max-width:68ch; color:var(--body)}

/* ---------- categories ------------------------------------------ */

.fam-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px;
}
.fam{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--pig);
  border-radius:var(--radius); padding:20px;
}
.fam h3{color:var(--ink)}
.fam p{margin-top:10px; font-size:.9rem; color:var(--body)}
.fam-brands{
  margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line);
  font-size:.8rem !important; color:var(--muted) !important;
}

/* ---------- brand directory -------------------------------------- */

.legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px; font-size:.8rem; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:7px}
.legend li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--pig)}

.brandwall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  margin-top:18px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
}
.brandwall li{
  display:flex; align-items:center; gap:9px; padding:13px 14px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.9rem; font-weight:600; color:var(--ink);
}
.brandwall li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--pig); flex:none}

/* ---------- ordering + terms ------------------------------------- */

.two-col{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,3.5vw,48px); align-items:start}

.steps{margin-top:24px; display:grid; gap:18px}
.steps li{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
}
.step-n{
  grid-row:1 / span 2; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.9rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps p{font-size:.9rem; color:var(--body)}

.terms{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.terms h3{background:var(--bg-head); border-bottom:1px solid var(--line); padding:14px 20px; font-size:1rem}
.terms dl{padding:4px 20px 20px}
.terms dt{margin-top:16px; font-size:.78rem; font-weight:700; color:var(--muted); text-transform:none}
.terms dd{margin:3px 0 0; font-size:.9rem; color:var(--body)}

/* ---------- showrooms -------------------------------------------- */

.shops{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:26px}
.shop{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.shop h3{padding-bottom:12px; border-bottom:1px solid var(--line)}
.shop-area{margin-top:14px; font-size:.92rem; color:var(--body)}
.shop-note{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted)}
.hours{margin-top:14px; border-collapse:collapse; width:100%; max-width:330px}
.hours th{text-align:left; font-weight:400; font-size:.875rem; color:var(--muted); padding:5px 14px 5px 0}
.hours td{font-size:.875rem; color:var(--ink); padding:5px 0}

/* ---------- account form ----------------------------------------- */

.form-copy .section-lede{margin-top:14px}
.form-alt{margin-top:18px; font-size:.9rem; color:var(--muted); max-width:46ch}

.form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.field{display:flex; flex-direction:column; margin-bottom:14px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:5px}
.field input,.field select{
  font:inherit; font-size:.92rem; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:var(--radius); padding:10px 12px; width:100%;
}
.field input:hover,.field select:hover{border-color:var(--muted)}
.field input[aria-invalid="true"]{border-color:var(--accent); background:var(--accent-tint)}
.form .btn{margin-top:4px}
.form-status{margin-top:12px; font-size:.875rem; min-height:1.4em; color:var(--soin); font-weight:600}
.form-status[data-state="error"]{color:var(--accent)}

/* ---------- footer ------------------------------------------------ */

.footer{background:var(--bg-alt); border-top:1px solid var(--line); padding-top:clamp(28px,3.5vw,44px)}
.footer-in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,48px);
  align-items:start; padding-bottom:26px;
}
.footer-mark{font-size:1.2rem; font-weight:700; letter-spacing:.09em; color:var(--accent)}
.footer-legal{margin-top:10px; font-size:.85rem; color:var(--muted); max-width:52ch}
.footer-contact{margin-top:12px; font-size:.875rem; color:var(--body)}
.footer-contact a{color:var(--accent); text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
.footer-nav{display:grid; gap:8px; justify-items:start}
.footer-nav a{text-decoration:none; font-size:.875rem; color:var(--body)}
.footer-nav a:hover{color:var(--accent)}
.footer-demo{
  border-top:1px solid var(--line);
  padding-block:14px calc(18px + env(safe-area-inset-bottom,0px));
  font-size:.78rem; color:var(--muted);
}

/* ---------- responsive --------------------------------------------- */

@media (max-width:1180px){
  .mail{display:none}
}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .fam-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .nav{display:none}
}

@media (max-width:760px){
  .brandwall{grid-template-columns:repeat(2,1fr)}
  .brandwall li{font-size:.85rem; padding:12px 10px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts > div:nth-child(odd){border-left:0}
  .facts > div:nth-child(n+3){border-top:1px solid var(--line)}
  .shops{grid-template-columns:1fr}
  .topbar-in .btn{display:none}
  .footer-in{grid-template-columns:1fr}
}

@media (max-width:540px){
  .fam-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr; gap:0}
  .tarif-table .pack, .tarif-table th:nth-child(3){display:none}
  .hero-cta .btn{flex:1 1 100%; text-align:center}
}