/* ============================================
   Noctile — style commun
   Identité : clair et chaleureux façon Claude — crème, encre, terracotta.
   Même philosophie affiche/flat/bordures épaisses que ce qu'on construit
   pour nos clients, déclinée dans un univers qui nous est propre.
   ============================================ */

:root{
  --bg: #F7F4EC;
  --bg-panel: #FFFFFF;
  --bg-panel-2: #FBF7EE;
  --ink: #262220;
  --ink-soft: rgba(38,34,32,.68);
  --ink-faint: rgba(38,34,32,.14);
  --accent: #CC7A52;
  --accent-dark: #A8603D;
  --gold: #E8B23D;
  --sage: #6B8F71;
  --border-w: 3px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-hard: 6px 6px 0 var(--accent);
  --shadow-hard-sm: 4px 4px 0 var(--accent);
  --max: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4{
  font-family: "Space Grotesk", "Poppins", sans-serif;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  color: var(--ink);
}
h1{ font-size: clamp(2.5rem, 5.6vw, 4rem); }
h2{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
h3{ font-size: 1.4rem; }

p{ margin: 0 0 1em; color: var(--ink-soft); font-size: 1.05rem; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border: var(--border-w) solid var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
  transform: rotate(-2deg);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: var(--border-w) solid var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow-hard-sm);
}
.btn:hover{ transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--accent); }
.btn:active{ transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--accent); }
.btn-primary{ background: var(--accent); color: #fff; }
.btn-secondary{ background: var(--bg-panel); color: var(--ink); }
.btn-coral{ background: var(--gold); color: var(--ink); }

/* ---------- Header / Nav ---------- */
header.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,244,236,.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-w) solid var(--ink);
}
.nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 18px;
}
.brand{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand .logo-mark{ width: 40px; height: 40px; flex-shrink: 0; }
.brand span{ font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); }

nav.main-nav{ display: flex; align-items: center; gap: 4px; }
nav.main-nav a{
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
}
nav.main-nav a:hover{ color: var(--ink); background: var(--bg-panel-2); }

.nav-toggle{
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 1.3rem;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--ink);
}
@media (max-width: 760px){
  .nav-toggle{ display: block; }
  nav.main-nav{ display: none; width: 100%; order: 3; flex-direction: column; align-items: stretch; padding-top: 10px; }
  nav.main-nav.open{ display: flex; }
  .nav-wrap{ flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.hero{ position: relative; overflow: hidden; padding: 90px 0 90px; }
.hero::before{
  content: "";
  position: absolute;
  top: -140px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,122,82,.14), transparent 70%);
}
.hero-inner{ position: relative; z-index: 2; max-width: 720px; }
.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.page-hero{ padding: 64px 0 56px; border-bottom: var(--border-w) solid var(--ink); background: var(--bg-panel-2); }
.page-hero p{ max-width: 620px; }

/* ---------- Sections ---------- */
section{ padding: 68px 0; }
.section-panel{ background: var(--bg-panel-2); border-top: var(--border-w) solid var(--ink-faint); border-bottom: var(--border-w) solid var(--ink-faint); }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Grid / cards ---------- */
.grid{ display: grid; gap: 26px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-panel);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-hard-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }

.step-card{ position: relative; padding-top: 46px; }
.step-card .step-num{
  position: absolute;
  top: -18px; left: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-w) solid var(--ink);
}

/* ---------- "Pour qui" ---------- */
.audience-card{ text-align: center; }
.audience-card .emoji{ font-size: 2.2rem; margin-bottom: 10px; }

/* ---------- Fenêtre façon macOS (motif réutilisable) ---------- */
.mac-window{
  border: var(--border-w) solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  background: var(--bg-panel);
}
.mac-window .mac-bar{
  background: var(--bg-panel-2);
  border-bottom: 2px solid var(--ink-faint);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mac-window .mac-bar .dot{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.mac-window .mac-bar .dot.red{ background: #FF5F57; }
.mac-window .mac-bar .dot.yellow{ background: #FEBC2E; }
.mac-window .mac-bar .dot.green{ background: #28C840; }
.mac-window .mac-bar .mac-title{
  margin-left: auto; margin-right: auto;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  transform: translateX(-14px);
}
.mac-window .mac-body{ padding: 28px; }
.mac-window.tight .mac-body{ padding: 0; }

/* Maquette factice de la page MJB dans l'étude de cas */
.case-mock-body{ padding: 28px 22px 34px; }
.case-mock-body .fake-h{ background:#2F6B4F; height:22px; width:70%; border-radius:6px; margin-bottom:10px; }
.case-mock-body .fake-p{ background:#e7ddc7; height:10px; border-radius:4px; margin-bottom:8px; }
.case-mock-body .fake-p:nth-child(3){ width:88%; }
.case-mock-body .fake-p:nth-child(4){ width:65%; }
.case-mock-body .fake-btn{ margin-top:16px; background:#E2683C; height:30px; width:120px; border-radius:999px; }

/* ---------- Tarifs ---------- */
.price-highlight{
  border: var(--border-w) solid var(--accent);
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-hard);
}
.price-highlight-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.price-tag{
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--accent-dark);
  white-space: nowrap;
}
.price-tag small{ font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.price-list{ list-style: none; padding: 0; margin: 0; }
.price-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--ink);
}
.price-mini-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 560px){ .price-mini-grid{ grid-template-columns: 1fr; } }
.price-chip{
  background: var(--bg-panel-2);
  border: 2px solid var(--ink-faint);
  border-radius: 14px;
  padding: 16px 18px;
}
.price-chip .amount{ font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-weight: 700; font-size: 1.5rem; color: var(--accent-dark); }
.price-chip .label{ font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.price-chip .example{ font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }

.price-arrow{
  display: flex;
  justify-content: center;
  margin: 4px 0 22px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--accent);
}
.price-section-head{ text-align: center; margin: 8px 0 22px; }
.price-section-head h3{ margin-bottom: 4px; }

.price-note{
  background: var(--bg-panel-2);
  border-left: var(--border-w) solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  font-size: .95rem;
}

/* ---------- Étude de cas ---------- */
.case-study{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px){ .case-study{ grid-template-columns: 1fr; } }
.case-tags{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.case-tag{
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid var(--ink-faint);
  color: var(--ink-soft);
}

/* ---------- Formulaire multi-étapes ---------- */
.wizard{ padding: 40px; }
@media (max-width: 640px){ .wizard{ padding: 24px; } }

.wizard-progress{ margin-bottom: 34px; }
.wizard-progress-bar{
  height: 10px;
  background: var(--bg-panel-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.wizard-progress-fill{
  height: 100%;
  background: var(--accent);
  width: 16.6%;
  transition: width .25s ease;
}
.wizard-progress-label{
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 10px;
  font-family: "Space Grotesk", sans-serif;
}

.wizard-step{ display: none; }
.wizard-step.active{ display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

.wizard-step h2{ margin-bottom: 6px; }
.wizard-step .step-intro{ margin-bottom: 28px; }

.field{ margin-bottom: 22px; }
.field-label-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.field label{ display: block; font-weight: 700; font-size: .95rem; color: var(--ink); }
.field .hint{ display:block; font-weight: 400; font-size:.85rem; color: var(--ink-soft); margin-top: 3px; }

.info-btn{
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #fff;
  color: var(--accent-dark);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.info-btn:hover{ background: var(--accent); color: #fff; }
.info-panel{
  display: none;
  background: var(--bg-panel-2);
  border-left: var(--border-w) solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  margin: -4px 0 14px;
  font-size: .92rem;
  color: var(--ink-soft);
}
.info-panel.open{ display: block; }

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 2px solid var(--ink-faint);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23262220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.field input::placeholder,
.field textarea::placeholder{ color: rgba(38,34,32,.35); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline: none; border-color: var(--accent); }
.field textarea{ resize: vertical; min-height: 100px; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }

.choice-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px){ .choice-grid{ grid-template-columns: 1fr; } }
.choice-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--ink-faint);
  border-radius: 12px;
  cursor: pointer;
  font-size: .95rem;
  transition: border-color .15s ease, background .15s ease;
}
.choice-chip:hover{ border-color: var(--accent); }
.choice-chip input{ width: auto; accent-color: var(--accent); }
.choice-chip.checked{ border-color: var(--accent); background: rgba(204,122,82,.08); }

.wizard-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid var(--ink-faint);
}
.wizard-nav .btn[disabled]{ opacity: .35; cursor: not-allowed; }
.wizard-nav .btn[disabled]:hover{ transform:none; box-shadow: var(--shadow-hard-sm); }

.recap-box{ display: none; }
.recap-box.active{ display: block; animation: fadeIn .3s ease; }
.recap-list{ list-style: none; padding: 0; margin: 0; }
.recap-list li{
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-faint);
}
.recap-list .q{ font-weight: 700; font-size: .85rem; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.recap-list .a{ color: var(--ink); font-size: 1rem; }
.recap-list .a.empty{ color: rgba(38,34,32,.4); font-style: italic; }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--bg-panel-2);
  border-top: var(--border-w) solid var(--ink);
  padding: 48px 0 28px;
  margin-top: 40px;
}
footer.site-footer p{ color: var(--ink-soft); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink-faint);
  padding-top: 20px;
  margin-top: 20px;
}

.text-center{ text-align: center; }

/* ---------- Grille d'options façon "Apple System Settings" ----------
   Volontairement différente du reste (pas de bordure épaisse ni de shadow-hard) :
   cartes plates, gris neutre, icône/titre/sous-titre — pour une zone d'options
   qui se veut plus "utilitaire" que le reste du site. */
.apple-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.apple-card{
  background: #F4F4F3;
  border-radius: 18px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apple-card .apple-icon{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  background: #fff;
  border-radius: 11px;
  margin-bottom: 2px;
}
.apple-card .apple-title{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.apple-card .apple-sub{
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---------- Vérificateur de nom de domaine ---------- */
.domain-check-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.domain-check-row input[type="text"]{
  flex: 1 1 220px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 2px solid var(--ink-faint);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
}
.domain-check-row input[type="text"]:focus{ outline: none; border-color: var(--accent); }
.domain-check-row select{
  padding: 13px 34px 13px 15px;
  border-radius: 10px;
  border: 2px solid var(--ink-faint);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: .95rem;
  background: var(--bg);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23262220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
#domain-check-result{ font-size: .98rem; }
#domain-check-result.available{ color: var(--accent-dark); font-weight: 700; }
#domain-check-result.taken{ color: var(--ink-soft); font-weight: 600; }
#domain-check-result.unsure{ color: var(--ink-soft); font-style: italic; }

/* ---------- Sélecteur de langue (menu déroulant, header) ---------- */
.lang-dd {
  position: relative;
  margin-left: 12px;
}
.lang-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  border-radius: 9px;
}
.lang-dd-btn:hover { background: var(--bg-panel-2); }
.lang-dd-caret { font-size: .6rem; transform: translateY(1px); }
.lang-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-hard);
  padding: 6px;
  z-index: 60;
}
.lang-dd.open .lang-dd-menu { display: block; }
.lang-dd-menu a {
  display: block;
  padding: 8px 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}
.lang-dd-menu a:hover { background: var(--bg-panel-2); }
.lang-dd-menu a.active {
  background: var(--ink);
  color: var(--bg);
}


/* ============================================================
   Sélecteur visuel de couleurs (champ de type « palette »)
   ============================================================ */
.pw{ margin-top:10px; }
.pw h5{ font-family:"Space Grotesk",sans-serif; font-size:.86rem; margin:0 0 8px; }

/* classement vertical des couleurs retenues */
.pw-list{ background:var(--bg-panel-2); border:2px dashed var(--ink-faint);
  border-radius:var(--radius-sm); padding:12px; display:flex; flex-direction:column; gap:8px; }
.pw-empty{ color:var(--ink-soft); font-size:.88rem; padding:4px 2px; }
.pw-row{ display:flex; align-items:center; gap:11px; background:var(--bg-panel);
  border:2px solid var(--ink); border-radius:12px; padding:9px 11px; }
.pw-row .rk{ width:25px; height:25px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.76rem; flex:none;
  font-family:"Space Grotesk",sans-serif; }
.pw-row .sw{ width:42px; height:42px; border-radius:9px; border:2px solid rgba(0,0,0,.22); flex:none; }
.pw-row .mt{ flex:1; min-width:0; line-height:1.25; }
.pw-row .mt b{ display:block; font-size:.85rem; font-family:"Space Grotesk",sans-serif; }
.pw-row .mt span{ font-size:.71rem; color:var(--ink-soft); display:block; }
.pw-row .mt code{ font-size:.69rem; color:var(--ink-soft); }
.pw-row .pr{ width:104px; flex:none; }
.pw-row .pr .tk{ height:8px; background:var(--ink-faint); border-radius:20px; overflow:hidden; }
.pw-row .pr .fl{ height:100%; border-radius:20px; transition:width .4s cubic-bezier(.16,1,.3,1); }
.pw-row .pr small{ font-size:.66rem; color:var(--ink-soft); display:block; margin-top:3px; }
.pw-row .ct{ display:flex; flex-direction:column; gap:3px; flex:none; }
.pw-row .ct button{ border:none; background:var(--ink-faint); width:23px; height:19px;
  border-radius:5px; cursor:pointer; font-size:.64rem; line-height:1; color:var(--ink); }
.pw-row .ct button:hover:not([disabled]){ background:var(--ink); color:#fff; }
.pw-row .ct button[disabled]{ opacity:.28; cursor:default; }
.pw-row .ct button.rm:hover{ background:#C0392B; color:#fff; }
@media (max-width:600px){ .pw-row .pr{ display:none; } }

.pw-mix{ margin-top:11px; }
.pw-mix .bar{ display:flex; height:34px; border-radius:10px; overflow:hidden; border:2px solid var(--ink); }
.pw-mix .bar div{ display:grid; place-items:center; font-size:.7rem; font-weight:700;
  transition:width .4s cubic-bezier(.16,1,.3,1); }
.pw-mix .lb{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--ink-soft); margin-bottom:6px; font-family:"Space Grotesk",sans-serif; }

/* message d'état — jamais de limite silencieuse */
.pw-msg{ display:none; margin-top:10px; font-size:.85rem; padding:9px 12px; border-radius:10px;
  border:2px solid var(--ink); background:var(--bg-panel); line-height:1.45; }
.pw-msg.on{ display:block; }
.pw-msg.full{ background:#FFF6E5; border-color:var(--gold); }

/* sources */
.pw-src{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:700px){ .pw-src{ grid-template-columns:1fr; } }
.pw-src.off{ opacity:.42; pointer-events:none; }
.pw-drop{ border:2px dashed var(--ink-faint); border-radius:var(--radius-sm); padding:16px;
  text-align:center; cursor:pointer; background:var(--bg-panel-2); transition:.2s; }
.pw-drop:hover,.pw-drop.over{ border-color:var(--accent); background:var(--bg-panel); }
.pw-drop b{ display:block; font-family:"Space Grotesk",sans-serif; font-size:.88rem; margin-bottom:3px; }
.pw-drop span{ font-size:.78rem; color:var(--ink-soft); }
.pw-found{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.pw-found button{ width:32px; height:32px; border-radius:8px; border:2px solid var(--ink); cursor:pointer; }
.pw-found button:hover{ transform:translateY(-2px); }
.pw-presets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:7px; }
.pw-presets button{ border:2px solid var(--ink); border-radius:9px; cursor:pointer; padding:0;
  overflow:hidden; background:var(--bg-panel); font:inherit; }
.pw-presets button:hover{ transform:translateY(-2px); }
.pw-presets button .sq{ height:28px; display:block; }
.pw-presets button .nm{ font-size:.66rem; padding:3px 4px; border-top:1.5px solid var(--ink);
  font-weight:600; font-family:"Space Grotesk",sans-serif; }
.pw-manual{ display:flex; gap:8px; align-items:center; margin-top:9px; flex-wrap:wrap; }
.pw-manual input[type=color]{ width:48px; height:38px; padding:3px; border:2px solid var(--ink);
  border-radius:9px; background:var(--bg-panel); cursor:pointer; }
.pw-manual input[type=text]{ width:104px; padding:8px 10px; border:2px solid var(--ink);
  border-radius:9px; font-size:.85rem; }
.pw-manual button{ background:var(--ink); color:var(--bg); border:none; border-radius:30px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer;
  font-family:"Space Grotesk",sans-serif; }
.pw-manual button:hover{ background:var(--accent-dark); }

/* variantes */
.pw-vwrap{ margin-top:18px; }
.pw-variants{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:11px; }
.pw-v{ border:2px solid var(--ink); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  background:var(--bg-panel); padding:0; font:inherit; text-align:left; transition:.18s; }
.pw-v:hover{ transform:translateY(-3px); box-shadow:4px 4px 0 var(--ink); }
.pw-v.on{ box-shadow:4px 4px 0 var(--gold); }
.pw-v .mini{ height:86px; padding:8px; }
.pw-v .mini .b1{ height:8px; border-radius:3px; width:54%; margin-bottom:6px; }
.pw-v .mini .l{ height:4px; border-radius:3px; margin-bottom:4px; opacity:.32; }
.pw-v .mini .bt{ height:13px; width:40px; border-radius:20px; margin-top:7px; }
.pw-v .nm{ padding:7px 9px; border-top:2px solid var(--ink); }
.pw-v .nm b{ display:block; font-size:.78rem; font-family:"Space Grotesk",sans-serif; }
.pw-v .nm span{ font-size:.67rem; color:var(--ink-soft); }

.pw-legend{ margin-top:14px; background:var(--bg-panel-2); border:1px solid var(--ink-faint);
  border-radius:var(--radius-sm); padding:12px; display:none; }
.pw-legend.on{ display:block; }
.pw-legend .lb{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--ink-soft); margin-bottom:8px; font-family:"Space Grotesk",sans-serif; }
.pw-legend .rw{ display:flex; align-items:center; gap:9px; font-size:.83rem; margin-bottom:6px; }
.pw-legend .rw i{ width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(0,0,0,.2); flex:none; }
.pw-legend .rw code{ font-size:.7rem; color:var(--ink-soft); }
.pw-legend .rw span{ color:var(--ink-soft); }