/* nav.css — en-tête commun des pages publiques (accueil, contact, conditions, confidentialité, comment ça marche)
   Ordinateur : logo · liens · langue · thème · connexion · « Créer ma boutique »
   Tablette / téléphone (≤ 900 px) : logo · « Créer ma boutique » · menu ☰ (liens, connexion, langue, thème)
   Tous les sélecteurs sont préfixés par .nav : aucun conflit avec les styles propres à chaque page. */

.nav{ position:sticky; top:0; z-index:60; padding:14px 16px 0; }
.nav .nav-inner{
  max-width:1180px; margin:0 auto; padding:10px 12px 10px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:color-mix(in srgb, var(--bg-elev-1) 88%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line-strong); border-radius:100px; box-shadow:var(--shadow-soft);
}
.nav .brand{ display:flex; align-items:center; flex-shrink:0; border-radius:12px; }
.nav .brand-mark{ width:107px; height:42px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(0,201,242,.30)); background:none; border-radius:0; box-shadow:none; }

.nav .nav-links{ display:flex; align-items:center; gap:28px; }
.nav .nav-links a{ position:relative; font-size:.88rem; font-weight:500; color:var(--ink-dim); transition:color .2s; padding:6px 0; }
.nav .nav-links a::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px; border-radius:2px;
  background:var(--accent-gradient); transform:scaleX(0); transition:transform .25s var(--ease, ease);
}
.nav .nav-links a:hover, .nav .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav .nav-links a:hover::after, .nav .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav .nav-actions{ display:flex; align-items:center; gap:8px; }
.nav .icon-btn, .nav .lang-btn{
  height:40px; border-radius:12px; border:1px solid var(--line); background:var(--bg-elev-1); color:var(--ink-dim);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.nav .icon-btn{ width:40px; padding:0; }
.nav .icon-btn svg{ width:18px; height:18px; }
.nav .lang-btn{ padding:0 14px; font:500 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing:.04em; white-space:nowrap; }
.nav .icon-btn:hover, .nav .lang-btn:hover{ border-color:var(--accent); color:var(--accent-bright); }

.nav .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 20px;
  border-radius:12px; border:1px solid transparent; font-size:.88rem; font-weight:600; line-height:1; white-space:nowrap;
  cursor:pointer; transition:transform .25s var(--ease, ease), background .2s, border-color .2s, box-shadow .25s;
}
.nav .btn-ghost{ color:var(--ink); border-color:var(--line-strong); background:transparent; }
.nav .btn-ghost:hover{ background:var(--bg-elev-2); border-color:var(--accent); }
.nav .btn-solid{ background:var(--action, #087BFF); color:#fff; box-shadow:0 8px 24px -8px rgba(8,123,255,.40); }
.nav .btn-solid:hover{ background:var(--action-dark, #0064DB); transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(8,123,255,.55); }

.nav a:focus-visible, .nav button:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }

/* ---- menu mobile ---- */
.nav .nav-burger{ display:none; color:var(--ink); }
.nav .nav-burger .i-close{ display:none; }
.nav.open .nav-burger .i-open{ display:none; }
.nav.open .nav-burger .i-close{ display:block; }

.nav .nav-menu{
  display:none; max-width:1180px; margin:8px auto 0; padding:8px; gap:2px;
  background:color-mix(in srgb, var(--bg-elev-1) 96%, transparent);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--line-strong); border-radius:20px; box-shadow:var(--shadow-soft);
  max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
}
.nav .nav-menu > a, .nav .nav-menu > button{
  display:flex; align-items:center; width:100%; min-height:48px; padding:0 14px; border-radius:12px;
  font-size:1rem; font-weight:600; color:var(--ink); text-align:start; background:none; border:0; cursor:pointer;
}
.nav .nav-menu > a:hover, .nav .nav-menu > button:hover, .nav .nav-menu > a[aria-current="page"]{ background:var(--bg-elev-2); }
.nav .nav-menu-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; padding-top:10px; border-top:1px solid var(--line); }
.nav .nav-menu-row button{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 12px;
  border-radius:12px; border:1px solid var(--line-strong); background:var(--bg-elev-1); color:var(--ink-dim);
  font-size:.86rem; font-weight:600; cursor:pointer;
}
.nav .nav-menu-row button svg{ width:16px; height:16px; }

@media (max-width:900px){
  .nav .nav-links{ display:none; }
  .nav .nav-burger{ display:inline-flex; }
  .nav.open .nav-menu{ display:grid; animation:navIn .22s var(--ease, ease); }
  /* langue, thème et connexion passent dans le menu */
  .nav .nav-actions .lang-btn, .nav .nav-actions .nav-theme, .nav .nav-actions .nav-login{ display:none; }
}
@media (max-width:600px){
  .nav{ padding:10px 10px 0; }
  .nav .nav-inner{ border-radius:20px; padding:8px 8px 8px 14px; gap:8px; }
  .nav .brand-mark{ width:88px; height:34px; }
  .nav .btn{ padding:0 14px; font-size:.84rem; }
}
@media (max-width:350px){
  .nav .brand-mark{ width:74px; }
  .nav .nav-cta{ padding:0 10px; font-size:.78rem; }
}
@keyframes navIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .nav.open .nav-menu{ animation:none; } }

/* Téléphones : champs en 16 px minimum, sinon iOS zoome sur la page dès qu'on touche un champ */
@media (max-width: 600px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }
}

/* Logo : version foncée sur fond clair, version claire sur fond sombre */
.on-light{ display:none !important; }
html.light .on-light{ display:block !important; }
html.light .on-dark{ display:none !important; }