/* =====================================================================
   WEB 213 — Composants réutilisables
   Verre dépoli, boutons, champs, sélecteurs, alertes.
   ===================================================================== */

/* ------------------------------------------------- Icônes inline (SVG) */
/* Toute icône insérée par icon() est calibrée ici ; les logos sont exclus
   car leur taille est fixée par leur propre classe. */
.btn > svg,
.badge > svg,
.alert > svg,
.benefits li > svg,
.lead > svg,
.trail > svg,
.icon-btn > svg,
.lang-switch__btn > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.badge > svg { width: 15px; height: 15px; }

/* ------------------------------------------------ Logo autonome ------- */
/* Utilisé hors de la colonne d'authentification : pages d'erreur, modules
   en construction. Sans cette règle, le SVG n'a aucune contrainte de taille
   et remplit tout son conteneur. */
.logo-mark {
  display: block;
  height: 88px;
  width: auto;
  margin-inline: auto;
  color: var(--primary);
}

/* ---------------------------------------------------------------- Verre */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), var(--glass-inner);
}

.glass-soft {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------- En-tête */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header .bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--r-full);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand .logo { height: 30px; width: auto; color: var(--text); display: block; }

/* La marque ne doit jamais être écrasée par les boutons voisins. */
.site-header .brand { flex: 0 0 auto; }
.site-header .bar { min-width: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ----------------------------------------------------------- Boutons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 46px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast), background-color var(--t-fast),
              box-shadow var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  box-shadow: 0 10px 26px -10px rgba(30, 143, 213, .85);
}
.btn-primary:hover { --btn-bg: var(--primary-hover); color: var(--on-primary); }

.btn-ghost {
  --btn-fg: var(--text-soft);
  border-color: var(--border);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { --btn-fg: var(--text); border-color: var(--border-strong); }

.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 9px 16px; font-size: .9rem; }

.btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn-label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------- Bouton icône (thème…) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  /* Dans une barre serrée, un bouton icône est un élément flex comme un
     autre : sans cette ligne il se laisse comprimer à 27 px et devient
     impossible à viser au doigt. */
  flex: 0 0 auto;
  width: 42px; height: 42px;
  padding: 0;
  color: var(--text-soft);
  background: var(--glass-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.icon-btn:hover { color: var(--primary); border-color: var(--brand-300); }
.icon-btn svg { width: 20px; height: 20px; }

/* Icônes soleil / lune : une seule visible selon le thème */
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun  { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}

/* ------------------------------------------------ Sélecteur de langue */
.lang-switch { position: relative; }

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-soft);
  background: var(--glass-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
}
.lang-switch__btn:hover { color: var(--primary); border-color: var(--brand-300); }
.lang-switch__btn svg { width: 18px; height: 18px; }
.lang-switch__btn .chev { transition: transform var(--t-fast); width: 14px; }
.lang-switch[data-open="true"] .chev { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 170px;
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.lang-switch[data-open="true"] .lang-switch__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-switch__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: .93rem;
  font-weight: 600;
}
.lang-switch__menu a:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.lang-switch__menu a[aria-current="true"] { color: var(--primary); }
.lang-switch__menu a[aria-current="true"]::after { content: "✓"; }

/* ------------------------------------------------------------ Champs */
.field { margin-bottom: 18px; }

.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
}
.field .req { color: var(--err-500); }

.control { position: relative; display: flex; align-items: center; }

.control .lead {
  position: absolute;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  pointer-events: none;
}
.control .lead svg { width: 19px; height: 19px; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px 14px 44px;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
html[dir="rtl"] .input { padding: 14px 44px 14px 16px; }

.input::placeholder { color: var(--text-muted); opacity: .8; }
.input:hover { border-color: var(--border-strong); }
.input:focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 4px var(--ring);
  background: var(--bg-elevated);
}
/* Champ sans icône en tête : le retrait de 44 px n'a plus de raison d'être. */
.input--plain { padding-inline: 15px !important; }

.input[aria-invalid="true"] { border-color: var(--err-500); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(225, 73, 63, .18); }
.control.is-valid .input { border-color: var(--ok-500); }

/* Bouton œil du mot de passe / suffixes */
.control .trail {
  position: absolute;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.control .trail:hover { color: var(--primary); }
.control .trail svg { width: 19px; height: 19px; }
.control:has(.trail) .input { padding-inline-end: 52px; }

/* Préfixe pays du téléphone */
.control .prefix {
  position: absolute;
  inset-inline-start: 42px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.control.has-prefix .input { padding-inline-start: 92px; }

.hint {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--text-muted);
}
.hint.error { color: var(--err-500); font-weight: 600; }
.hint.ok    { color: var(--ok-500);  font-weight: 600; }

/* Case à cocher — la vraie cible tactile est l'étiquette entière, d'où la
   hauteur minimale : au doigt, 22 px de carré se ratent une fois sur trois. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 32px;
  padding-block: 4px;
  font-size: .9rem;
  color: var(--text-soft);
  cursor: pointer;
}
.check input {
  appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.check input:checked {
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color: var(--primary);
}
.check input:focus-visible { outline: 3px solid var(--field-focus); outline-offset: 2px; }

/* ------------------------------------------- Jauge de robustesse */
.strength { margin-top: 10px; transition: opacity var(--t-base); }
.strength[data-score="0"] { opacity: 0; }
.strength__bars { display: flex; gap: 5px; }
.strength__bars i {
  flex: 1;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--border);
  transition: background-color var(--t-base);
}
.strength__label {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.strength[data-score="1"] .strength__bars i:nth-child(-n+1) { background: var(--err-500); }
.strength[data-score="2"] .strength__bars i:nth-child(-n+2) { background: var(--warn-500); }
.strength[data-score="3"] .strength__bars i:nth-child(-n+3) { background: var(--brand-400); }
.strength[data-score="4"] .strength__bars i                 { background: var(--ok-500); }
.strength[data-score="1"] .strength__label { color: var(--err-500); }
.strength[data-score="2"] .strength__label { color: var(--warn-500); }
.strength[data-score="3"] .strength__label { color: var(--brand-500); }
.strength[data-score="4"] .strength__label { color: var(--ok-500); }

/* ---------------------------------------------------------- Alertes */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .92rem;
  border-radius: var(--r-md);
  border: 1px solid;
}
.alert svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; }
.alert-success { color: #0B6B46; background: rgba(22, 164, 107, .12); border-color: rgba(22, 164, 107, .34); }
.alert-error   { color: #98261E; background: rgba(225, 73, 63, .12);  border-color: rgba(225, 73, 63, .34); }
.alert-info    { color: var(--brand-800); background: rgba(30, 143, 213, .10); border-color: rgba(30, 143, 213, .30); }
[data-theme="dark"] .alert-success { color: #67E3AE; }
[data-theme="dark"] .alert-error   { color: #FF9E96; }
[data-theme="dark"] .alert-info    { color: var(--brand-200); }

/* ---------------------------------------------------------------------
   Menu du compte connecté (en-tête public et tableau de bord)
   --------------------------------------------------------------------- */
.user-menu { position: relative; }

.user-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px 0 6px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-soft);
  background: var(--glass-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
}
.user-menu__btn:hover { color: var(--text); border-color: var(--border-strong); }
.user-menu__btn .chev { width: 14px; height: 14px; transition: transform var(--t-fast); }
.user-menu[data-open="true"] .chev { transform: rotate(180deg); }

.user-menu__avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 800;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 50%;
}
.user-menu__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 240px;
  padding: 6px;
  z-index: 60;
  /* Un menu doit rester lisible quoi qu'il recouvre. La transparence de
     .glass laissait apparaître le bouton « Ajouter un produit » au travers ;
     on garde le flou et l'ombre, mais sur un fond opaque. */
  background: var(--bg-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.user-menu[data-open="true"] .user-menu__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.user-menu__head {
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.user-menu__head small { display: block; font-size: .74rem; color: var(--text-muted); }
.user-menu__head b { font-size: .86rem; word-break: break-all; }

.user-menu__panel a,
.user-menu__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-align: start;
  color: var(--text-soft);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.user-menu__panel a:hover,
.user-menu__logout:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.user-menu__logout { color: var(--err-500); }
.user-menu__logout:hover { color: var(--err-500); background: rgba(225,73,63,.12); }
.user-menu__panel svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ----------------------------------------------------------- Divers */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--text-muted);
  font-size: .82rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--r-full);
  color: var(--brand-700);
  background: rgba(30, 143, 213, .12);
  border: 1px solid rgba(30, 143, 213, .24);
}
[data-theme="dark"] .badge { color: var(--brand-200); }

/* ---- En-tête sur petit écran ---------------------------------------- */
@media (max-width: 700px) {
  .site-header { padding: 8px 0; }
  .site-header .bar { padding: 8px 10px; gap: 8px; }
  .site-header .brand .logo { height: 25px; }
  .header-actions { gap: 6px; }
  .lang-switch__btn { height: 38px; }
  .icon-btn { width: 38px; height: 38px; }
  .lang-switch__btn { padding: 0 11px; }
}

/* Sous 580 px, « Se connecter » cède la place : le bouton principal et
   le pied de page suffisent à retrouver la connexion. */
.lbl-short { display: none; }

@media (max-width: 580px) {
  .site-header .header-actions > .btn-ghost { display: none; }
  .site-header .header-actions > .btn { padding-inline: 14px; font-size: .86rem; }
  /* Le libellé du bouton principal raccourcit plutôt que de déborder. */
  .lbl-full  { display: none; }
  .lbl-short { display: inline; }
}

.site-footer {
  padding: 28px 0;
  margin-top: 40px;
  font-size: .86rem;
  color: var(--text-muted);
  text-align: center;
}

/* =====================================================================
   Ambiances de couleur — la grille de choix et son aperçu.

   Ces règles vivent ici et non dans `dashboard.css` : le questionnaire de
   création ne charge pas la feuille du tableau de bord. La dernière fois
   qu'un composant partagé est resté du mauvais côté, les pastilles se
   sont affichées en boutons radio nus.
   ===================================================================== */
/* ---------------------------------------------------------------------
   12. Ambiances de couleur
   --------------------------------------------------------------------- */
.pal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.pal { position: relative; cursor: pointer; }
.pal input { position: absolute; opacity: 0; width: 0; height: 0; }

.pal__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pal input:checked + .pal__box {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.pal input:focus-visible + .pal__box { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Trois pastilles qui se chevauchent : on lit l'ambiance d'un coup d'œil,
   sans avoir à imaginer ce que donnera un dégradé décrit par un mot. */
.pal__dots { display: flex; flex: 0 0 auto; }
.pal__dots i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
}
.pal__dots i + i { margin-inline-start: -7px; }

.pal__name { font-size: .86rem; font-weight: 600; }


/* ---- Aperçu de l'ambiance (dernière étape du questionnaire) ----------- */
/* ---------------------------------------------------------------------
   L'aperçu d'ambiance

   Une vraie fiche produit en miniature : le fond de la boutique, la barre
   du haut, la photo, le prix barré, le badge de promotion, les tailles,
   les couleurs, le bouton de commande. On choisit une ambiance en voyant
   ce que le client verra, pas en lisant « rose » sur une pastille.

   Rien n'y porte la marque du vendeur — ni logo, ni nom : on juge une
   couleur, et sa propre enseigne détournerait le regard.
   --------------------------------------------------------------------- */
.pal-preview {
  margin: 18px 0 0;
  padding: 0;
}
.pal-preview__label {
  display: block;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html[dir="rtl"] .pal-preview__label { letter-spacing: 0; }

.pal-preview__frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Le même dégradé que la vraie boutique, à l'échelle de la vignette. */
  background:
    radial-gradient(60% 70% at 12% 8%,  var(--p-bg1, #DCEEFB) 0%, transparent 60%),
    radial-gradient(55% 65% at 88% 22%, var(--p-bg2, #EAF4FC) 0%, transparent 62%),
    radial-gradient(70% 80% at 50% 100%, var(--p-bg3, #F4FAFE) 0%, transparent 70%),
    var(--bg);
  transition: background .35s ease;
}

/* ---- La barre du haut de la boutique ---- */
.pal-preview__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.pal-preview__bar b { font-size: .9rem; }
/* Une enseigne muette : un rond de la couleur d'accent, pas un logo. */
.pal-preview__mark {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--p-accent, #1E8FD5);
  transition: background-color .35s ease;
}

/* ---- La fiche ---- */
.pal-preview__page { display: flex; gap: 16px; padding: 16px; }

.pal-preview__shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  color: var(--p-accent, #1E8FD5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: color .35s ease;
}
.pal-preview__shot svg { width: 34px; height: 34px; opacity: .55; }

.pal-preview__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.pal-preview__info strong { font-size: 1rem; line-height: 1.3; }

.pal-preview__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.pal-preview__price b {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--p-accent, #1E8FD5);
  transition: color .35s ease;
}
.pal-preview__price s { font-size: .86rem; color: var(--text-muted); }
.pal-preview__promo {
  padding: 2px 8px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: var(--err-500, #D92D20);
  border-radius: var(--r-full);
}

.pal-preview__stock {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ok-600, #0B6B46);
}
[data-theme="dark"] .pal-preview__stock { color: #67E3AE; }

/* ---- Tailles et couleurs ---- */
.pal-preview__opts { display: flex; gap: 6px; }

.pal-preview__chip {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding-inline: 7px;
  font-size: .8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .35s ease, color .35s ease;
}
.pal-preview__chip.is-on {
  color: var(--p-accent, #1E8FD5);
  border-color: var(--p-accent, #1E8FD5);
}

.pal-preview__swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 0 0 1.5px var(--border);
  transition: box-shadow .35s ease;
}
.pal-preview__swatch.is-on { box-shadow: 0 0 0 2px var(--p-accent, #1E8FD5); }

.pal-preview__btn {
  align-self: stretch;
  margin-top: 3px;
  padding: 10px 22px;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--p-accent, #1E8FD5);
  border-radius: var(--r-full);
  transition: background-color .35s ease;
}

@media (max-width: 560px) {
  .pal-preview__page { flex-direction: column; }
  .pal-preview__shot { width: 100%; aspect-ratio: 16 / 10; }
}

/* ---- Choix du motif de fond ------------------------------------------ */
/* Une grille de vignettes, comme les ambiances : on choisit un papier
   peint en le voyant, pas en lisant « papier » dans une liste. Chaque
   vignette montre la vraie tuile, à sa taille réelle — un motif se juge
   répété, pas en dessin isolé. */
.pat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.pat { position: relative; cursor: pointer; }
.pat input { position: absolute; opacity: 0; width: 0; height: 0; }

.pat__box {
  /* Les vignettes d'une même ligne gardent la même hauteur, même quand un
     libellé passe sur deux lignes : une grille qui gondole se lit mal. */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pat:hover .pat__box { border-color: var(--brand-300); }
.pat input:checked + .pat__box {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.pat input:focus-visible + .pat__box { outline: 3px solid var(--ring); outline-offset: 2px; }

.pat__tile {
  display: block;
  height: 92px;
  flex: 0 0 92px;
  background-repeat: repeat;
  background-size: 130px 130px;
  background-color: var(--bg-sunken);
}
/* « Aucun motif » : un fond nu, pour que l'absence soit un choix visible
   au même titre que les autres. */
.pat__tile--none {
  background-image:
    linear-gradient(135deg, transparent 47%, var(--border) 47%,
                    var(--border) 53%, transparent 53%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pat__name {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 46px;
  padding: 8px 10px;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid var(--border);
}
.pat input:checked + .pat__box .pat__name { color: var(--primary); }

/* ---- Zone dangereuse -------------------------------------------------- */
/* Le rouge n'est pas décoratif : c'est le seul endroit du site où un clic
   efface des données pour de bon. */
.danger-zone {
  border-color: color-mix(in srgb, var(--err-500, #D92D20) 35%, var(--border));
}
.danger-zone .dash-panel__head h2 { color: var(--err-600, #B42318); }
.danger-list {
  margin: 12px 0 18px;
  padding-inline-start: 20px;
  font-size: .9rem;
  color: var(--text-soft);
}
.danger-list li { margin-bottom: 5px; }

.btn-solid-danger {
  color: #fff;
  background: var(--err-500);
  border-color: var(--err-500);
}
.btn-solid-danger:hover:not(:disabled) { filter: brightness(1.07); }
.btn-solid-danger:disabled,
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Oui / Non -------------------------------------------------------- */
/* Deux boutons côte à côte plutôt que deux ronds : une question fermée se
   répond d'un geste, au doigt comme à la souris. */
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-sunken);
}
.seg__opt { position: relative; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span {
  display: block;
  min-width: 78px;
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg__opt:hover span { color: var(--text); }
.seg__opt input:checked + span {
  color: #fff;
  background: var(--primary);
}
.seg__opt input:focus-visible + span {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* ---- Champ mis en veille ---------------------------------------------- */
/* La question reste à l'écran, grisée : on comprend pourquoi elle ne se
   remplit pas, et elle revient dès que la réponse change. Masquer le champ
   donnerait l'impression qu'il a disparu du formulaire. */
.is-muted {
  opacity: .45;
  filter: grayscale(1);
  pointer-events: none;
  transition: opacity var(--t-fast);
}

/* ---------------------------------------------------------------------
   Pied de page complet

   Ces règles vivaient dans `landing.css`. Le pied de page est pourtant
   posé par la mise en page du site, donc sur toutes les pages — y compris
   le questionnaire de création, qui ne charge pas `landing.css`. Il s'y
   affichait en listes à puces nues, alignées à gauche. Un composant de
   mise en page appartient à la feuille partagée.
   --------------------------------------------------------------------- */
.footer-rich { padding-block: clamp(40px, 6vw, 66px) 26px; border-top: 1px solid var(--border); }

.footer-rich__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 34px;
}
.footer-rich .brand .logo { height: 28px; }
.footer-rich__about p {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: .9rem;
  color: var(--text-muted);
}
.footer-rich h4 {
  margin: 0 0 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html[dir="rtl"] .footer-rich h4 { letter-spacing: 0; }
.footer-rich ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer-rich ul a { font-size: .92rem; color: var(--text-soft); }
.footer-rich ul a:hover { color: var(--primary); }

.footer-rich__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .footer-rich__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-rich__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- Le bandeau collant doit être opaque ------------------------------ */
/* Il est en `position: sticky` : toute la page défile dessous. Au verre des
   cartes (.58 d'opacité), le titre de la page se lisait à travers la barre
   — « Créons votre boutique » s'affichait en travers des boutons. Le
   bandeau garde donc son flou, mais avec un fond à lui. */
.site-header .bar { background: var(--header-bg); }

/* ---- Ce que répond une zone de dépôt ---------------------------------- */
/* Ces règles vivaient dans `dashboard.css`, que le questionnaire de création
   ne charge pas : la phrase s'y affichait en paragraphe nu. Le glisser-déposer
   est partout, son vocabulaire doit l'être aussi.

   Un dépôt réussi parle autant qu'un dépôt raté. « Il ne se passe rien » est
   le pire des messages, y compris quand tout s'est bien passé : sans un mot,
   on ne sait pas si l'image est partie. */
.drop-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.drop-msg svg { width: 16px; height: 16px; flex: 0 0 auto; }
.drop-msg--error { color: var(--err-600, #B42318); }
.drop-msg--ok    { color: var(--ok-600, #0B6B46); font-weight: 600; }
[data-theme="dark"] .drop-msg--ok    { color: #67E3AE; }
[data-theme="dark"] .drop-msg--error { color: #FF9C93; }

/* Un éclair vert au moment où le fichier est pris : le message se lit, le
   cadre se voit du coin de l'œil. */
.is-done { border-color: var(--ok-500, #16A46B) !important; }
@media (prefers-reduced-motion: no-preference) {
  .is-done { animation: dropDone .9s var(--ease); }
  @keyframes dropDone {
    0%   { box-shadow: 0 0 0 0 rgba(22, 164, 107, .45); }
    100% { box-shadow: 0 0 0 10px rgba(22, 164, 107, 0); }
  }
}

/* ---- Une ambiance réservée à un pack supérieur ------------------------ */
/* Elle reste visible, et c'est voulu : on voit ce qu'on n'a pas encore, et
   le cadenas dit pourquoi. Cacher ce qu'on ne peut pas avoir ne donne envie
   de rien. */
.pal--locked { cursor: not-allowed; }
.pal--locked .pal__box { opacity: .55; }
.pal--locked:hover .pal__box { border-color: var(--field-border); }
.pal__lock {
  display: inline-flex;
  margin-inline-start: auto;
  color: var(--text-muted);
}
.pal__lock svg { width: 14px; height: 14px; }

.pal-upsell {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  padding: 11px 14px;
  font-size: .88rem;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: var(--r-md);
}
.pal-upsell svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--primary); }
.pal-upsell a { font-weight: 700; white-space: nowrap; }

/* =====================================================================
   Le dégradé de deux ambiances

   `--grad` vaut la couleur d'accent seule quand la vendeuse n'a pas
   choisi de seconde ambiance : les règles ci-dessous n'ont donc pas
   besoin de savoir s'il y a un dégradé ou non, elles marchent dans les
   deux cas. C'est la classe `has-grad` sur le <body> qui dit qu'il y en
   a un, et elle ne sert qu'aux endroits où un dégradé change la mise en
   page — pas la couleur.
   ===================================================================== */
.has-grad .btn-primary {
  background-image: var(--grad);
  /* L'ombre colorée suit la première couleur du dégradé : une ombre bleue
     sous un bouton rose a l'air d'une erreur d'impression. */
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--primary) 80%, transparent);
}
.has-grad .btn-primary:hover { background-image: var(--grad); filter: brightness(.94); }

/* Le rond de profil, la pastille du logo dans la barre, et la bannière
   sans photo : ce sont les trois endroits où la cliente voit la couleur
   de la boutique en grand. */
.has-grad .shop-brand__logo,
.has-grad .shop-hero__avatar,
.has-grad .dash__shop-logo { background-image: var(--grad); }

/* ---- Les vignettes d'ambiance ------------------------------------- */
/* « Aucune » dans la liste du dégradé : une pastille barrée, pas un trou. */
.pal__dots--none i {
  background: var(--glass-bg-soft);
  border: 1px dashed var(--border-strong);
  position: relative;
  overflow: hidden;
}
.pal__dots--none i::after {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  top: 50%;
  width: calc(100% + 4px);
  height: 1px;
  background: var(--text-muted);
  transform: rotate(-45deg);
}

/* L'aperçu du dégradé, sous les deux grilles : la bande que la cliente
   verra en haut de la boutique. Sans dégradé, elle n'existe pas. */
.grad-preview {
  display: block;
  height: 46px;
  margin-top: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.grad-preview[hidden] { display: none; }

/* Le sous-titre d'un groupe de vignettes, à l'intérieur d'un panneau. */
.set-sublabel {
  display: block;
  margin-bottom: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
}