/* ==========================================================================
   Configurateur « Créer mon site » — habillage du parcours (pas de l'aperçu).

   L'aperçu a sa propre feuille autoporteuse (builder-preview.css), servie dans
   l'iframe. Ici, on est dans la charte du site : on réutilise les jetons de
   style.css (--bg, --fg, --card, --line, --muted…), jamais de couleur en dur.
   ========================================================================== */

/* Hauteur réelle de la barre du site : l'atelier est une mise en page « collée »
   (panneau et scène en position: sticky), elle a besoin de la valeur exacte.
   Mesurée au navigateur : 69,1 px au-dessus de 760 px de large. On arrondit au
   pixel supérieur, sinon le sous-pixel restant fait passer sous la barre tout
   ce qui se cale dessus. */
.page-builder {
  overflow-x: hidden;
  --bd-top: 70px;
  /* Décalage des éléments COLLANTS, distinct de la réserve ci-dessus. La
     réserve arrondit au pixel supérieur (70 pour 69,14 mesurés) ; un élément
     collant posé à cette hauteur laisse donc une fente d'un pixel sous la
     barre, et l'aperçu (un faux site clair) défilait dans cette fente. On
     glisse d'un pixel SOUS la barre : elle est opaque, le recouvrement ne se
     voit pas, la fente ne peut plus s'ouvrir quel que soit l'arrondi. */
  --bd-stick: calc(var(--bd-top) - 1px);
  /* Réserve pour la barre d'action fixe : elle est hors flux, et le pied de
     page est un frère de l'atelier — sans ça, sa dernière ligne restait
     recouverte en fin de défilement, à toutes les largeurs. */
  --bd-bar: 80px;
}
.page-builder .site-footer { padding-bottom: var(--bd-bar); }

/* Sous 760 px, style.css porte la marque et le bouton de thème à 44 px (cibles
   tactiles) : la barre passe à 77 px mesurés. La réserve suit, au même point de
   bascule, sinon les deux changent de taille à deux largeurs différentes.
   Volontairement ici et pas dans la section « Responsive » plus bas : une
   valeur de réserve se relit à côté de la mesure qu'elle transcrit. */
@media (max-width: 760px) {
  .page-builder { --bd-top: 78px; }
}

/* La barre du site est fixe ET dégradée (mask-image) : du contenu qui défile
   dessous transparaît. Sur une page-atelier, elle doit être opaque, sinon le
   haut du panneau de réglages reste lisible à travers. */
.page-builder .topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: none;
  mask-image: none;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ── Écran d'accueil : une seule question ───────────────────────────────── */
.bd-intro { padding: calc(var(--bd-top) + 34px) 22px 90px; }
.bd-intro-in { max-width: 1080px; margin: 0 auto; }
.bd-intro-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 12px 0 0;
}
.bd-intro-lead {
  max-width: 64ch;
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--muted);
}
.bd-intro-q { margin-top: 44px; }
.bd-intro-h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.bd-search { position: relative; display: block; max-width: 480px; }
.bd-search-i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--muted-2); font-size: 17px; pointer-events: none;
}
.bd-search input {
  width: 100%; padding: 13px 16px 13px 42px; min-height: 48px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--card); color: var(--fg);
  font-family: var(--font-body); font-size: 15px;
}
.bd-search input:focus { outline: 2px solid var(--fg); outline-offset: 1px; }

.bd-metiers { margin-top: 30px; display: flex; flex-direction: column; gap: 30px; }
.bd-fam-h {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-3);
}
.bd-fam-g {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.bd-met {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 13px; align-items: start;
  padding: 16px 18px; min-height: 78px;
  text-align: left;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card); color: var(--fg); cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bd-met:hover {
  border-color: var(--fg); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.bd-met-i { grid-row: span 2; font-size: 22px; color: var(--muted); margin-top: 2px; }
.bd-met b { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; }
.bd-met span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bd-loading {
  margin: 0; padding: 26px 0;
  font-size: 14px; color: var(--muted-3);
}
.bd-intro-note { margin-top: 26px; font-size: 14px; color: var(--muted); }
.bd-intro-note[hidden] { display: none; }
/* Piège documenté du projet : toute règle d'auteur posant un `display` bat le
   `hidden` du navigateur. Ces deux-là n'en ont pas aujourd'hui, la règle les
   met à l'abri du jour où on leur en donnera un. */
.bd-intro[hidden], .bd-loading[hidden] { display: none; }

/* ── Atelier ────────────────────────────────────────────────────────────── */
.bd-work {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : une piste « 1fr » garde un minimum
     automatique égal au min-content de son contenu, ce qui élargit toute la
     page dès qu'un libellé ne se coupe pas (le fameux « grid blowout »). */
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: calc(100vh - var(--bd-top));
  padding-top: var(--bd-top);
  padding-bottom: 76px;
}
.bd-work[hidden] { display: none; }
.bd-switch { display: none; }

.bd-panel {
  border-right: 1px solid var(--line);
  background: var(--paper);
  min-width: 0;
  position: sticky; top: var(--bd-stick);
  height: calc(100vh - var(--bd-top) - 68px);
}
.bd-panel-scroll {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 40px;
}

.bd-metier-cur {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 13px 15px; margin-bottom: 18px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card);
}
.bd-metier-ico { display: inline-flex; font-size: 21px; color: var(--muted); flex: 0 0 auto; }
.bd-metier-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bd-metier-txt b, .bd-metier-txt span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-metier-txt b { font-family: var(--font-display); font-size: 14.5px; }
.btn-sm { padding: 7px 12px !important; font-size: 12px !important; min-height: 36px; }

/* Sections repliables des réglages. */
.bd-group { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 10px; }
.bd-group-h {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; min-height: 56px;
  border: 0; background: transparent; color: var(--fg);
  text-align: left; cursor: pointer; border-radius: 12px;
}
.bd-group-n {
  width: 24px; height: 24px; flex: 0 0 24px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--paper-2); color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.bd-group.is-open .bd-group-n { background: var(--fg); color: var(--bg); }
.bd-group-t {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
.bd-group-s { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--muted); }
.bd-group-x { display: inline-flex; color: var(--muted-2); font-size: 18px; transition: transform .2s ease; }
.bd-group.is-open .bd-group-x { transform: rotate(180deg); }
.bd-group-b { display: none; padding: 0 15px 16px; }
.bd-group.is-open .bd-group-b { display: block; }

.bd-q {
  margin: 18px 0 9px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-3);
}
.bd-group-b > .bd-q:first-child { margin-top: 4px; }
/* La règle du parcours, pas une étiquette de section. Le style ci-dessus est
   taillé pour deux mots (« VOS COULEURS ») : mesuré, la phrase des
   fonctionnalités y tenait sur 4 lignes de capitales espacées, 65 px de haut.
   C'est la seule consigne que le visiteur doit vraiment lire : elle se lit
   comme une phrase. */
.bd-q--regle {
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}

.bd-field { display: block; margin-bottom: 12px; }
.bd-field > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; }
.bd-field > span em { font-style: normal; color: var(--muted-3); font-weight: 400; }
.bd-field input[type="text"],
.bd-field input[type="email"],
.bd-field input[type="tel"],
.bd-field textarea {
  width: 100%; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 14px;
}
.bd-field textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.bd-field input:focus, .bd-field textarea:focus { outline: 2px solid var(--fg); outline-offset: 1px; }
.bd-hint {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 9px; background: var(--paper-2);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.bd-hint .ico { color: var(--muted-2); font-size: 15px; flex: 0 0 auto; margin-top: 1px; }

/* Mise en page : 3 barres qui miment la composition. */
.bd-layouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bd-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg); color: var(--fg); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.bd-card:hover { border-color: var(--fg); }
.bd-card.is-on { border-color: var(--fg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--fg); }
.bd-card b { font-size: 13px; font-family: var(--font-display); }
.bd-card span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.bd-lay-art {
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  height: 40px; padding: 7px 8px; margin-bottom: 4px;
  border-radius: 6px; background: var(--paper-2); overflow: hidden;
}
.bd-lay-art i { display: block; height: 5px; border-radius: 2px; background: var(--muted-2); opacity: .5; }
.bd-lay-art--moderne i:nth-child(1) { width: 45%; }
.bd-lay-art--moderne i:nth-child(2) { width: 80%; }
.bd-lay-art--moderne i:nth-child(3) { width: 62%; }
.bd-lay-art--editorial { flex-direction: row; align-items: stretch; gap: 4px; }
.bd-lay-art--editorial i { width: 33%; height: auto; }
.bd-lay-art--audacieux i { height: 9px; }
.bd-lay-art--audacieux i:nth-child(1) { width: 100%; opacity: .8; }
.bd-lay-art--audacieux i:nth-child(2) { width: 70%; }
.bd-lay-art--audacieux i:nth-child(3) { width: 88%; }
.bd-lay-art--plein-cadre { padding: 0; }
.bd-lay-art--plein-cadre i:nth-child(1) { width: 100%; height: 26px; border-radius: 0; opacity: .65; }
.bd-lay-art--plein-cadre i:nth-child(2) { width: 55%; margin-left: 8px; }
.bd-lay-art--plein-cadre i:nth-child(3) { display: none; }
.bd-lay-art--artisanal i { border-radius: 999px; }
.bd-lay-art--artisanal i:nth-child(1) { width: 58%; }
.bd-lay-art--artisanal i:nth-child(2) { width: 86%; }
.bd-lay-art--artisanal i:nth-child(3) { width: 40%; }

/* Palettes. */
.bd-palettes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.bd-pal {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--bg); color: var(--fg);
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.bd-pal:hover { border-color: var(--fg); }
.bd-pal.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.bd-pal-sw { display: inline-flex; flex: 0 0 auto; }
.bd-pal-sw i {
  width: 15px; height: 22px; display: block;
  border: 1px solid rgba(0,0,0,.12);
}
.bd-pal-sw i:first-child { border-radius: 5px 0 0 5px; }
.bd-pal-sw i:last-child { border-radius: 0 5px 5px 0; }
.bd-custom {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  padding: 12px; border-radius: 9px; background: var(--paper-2);
}
.bd-custom[hidden] { display: none; }
.bd-custom label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.bd-custom input[type="color"] {
  width: 38px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 6px; background: none;
}

/* Polices. */
.bd-fonts { display: flex; flex-direction: column; gap: 7px; }
.bd-font {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--bg); color: var(--fg); cursor: pointer;
}
.bd-font:hover { border-color: var(--fg); }
.bd-font.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.bd-font-h { font-size: 17px; line-height: 1.2; }
.bd-font-b { font-size: 12.5px; color: var(--muted); }
.bd-loading, #bdBarSub, #bdUrl { color: var(--muted); }
.bd-font-n {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3);
}

/* Formes & fond. */
.bd-corners, .bd-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bd-modes { grid-template-columns: repeat(2, 1fr); }
.bd-corner, .bd-mode {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; min-height: 72px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--bg); color: var(--fg);
  font-size: 11.5px; cursor: pointer;
}
.bd-corner:hover, .bd-mode:hover { border-color: var(--fg); }
.bd-corner.is-on, .bd-mode.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.bd-corner-art { width: 34px; height: 24px; background: var(--muted-2); opacity: .45; }
.bd-mode-art {
  width: 40px; height: 26px; padding: 4px; border-radius: 5px;
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  border: 1px solid var(--line-strong);
}
.bd-mode-art i { display: block; height: 4px; border-radius: 2px; }
.bd-mode--clair .bd-mode-art { background: #fbfaf7; }
.bd-mode--clair .bd-mode-art i { background: #16150f; opacity: .6; }
.bd-mode--clair .bd-mode-art i:first-child { width: 70%; }
.bd-mode--sombre .bd-mode-art { background: #16150f; }
.bd-mode--sombre .bd-mode-art i { background: #fbfaf7; opacity: .6; }
.bd-mode--sombre .bd-mode-art i:first-child { width: 70%; }

/* Cases à cocher : les fonctionnalités, seule liste du formulaire. */
.bd-checks { display: flex; flex-direction: column; gap: 6px; }
.bd-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; min-height: 48px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg);
  text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.bd-check:hover { border-color: var(--line-strong); background: var(--paper-2); }
.bd-check.is-on { border-color: var(--fg); background: var(--paper-2); }
.bd-check-m {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  display: grid; place-items: center;
  /* La case vide est le contrôle central de la page : sa bordure doit se voir
     (l'ancien --line-strong donnait 1,3:1, quasi invisible). */
  border: 1.5px solid var(--muted-2); border-radius: 6px;
  background: var(--card);
  color: transparent; font-size: 13px;
}
.bd-check.is-on .bd-check-m { background: var(--fg); border-color: var(--fg); color: var(--bg); }
/* Une case masquée l'est vraiment : `display: flex` ci-dessus est une règle
   d'auteur, elle bat le [hidden] du navigateur (piège documenté dans CLAUDE.md
   et déjà traité pour .bd-lockflag). Sans ça, « Paiement en ligne » resterait
   à l'écran tout en étant masquée logiquement. */
.bd-check[hidden] { display: none; }
.bd-check-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bd-check-t b { font-size: 13.5px; font-weight: 600; }
.bd-check-t span { font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Conséquence d'une case sur le menu du site : la règle « les pages suivent les
   fonctionnalités » se lit sur la case qui l'applique, pas seulement en tête de
   liste. Ton mono discret : c'est une note de mécanique, pas de l'argumentaire.
   Sélecteur descendant obligatoire : `.bd-check-t span` juste au-dessus est plus
   spécifique qu'une classe seule et gagnerait la taille et la couleur. */
.bd-check-t .bd-check-eff {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted-3); margin-top: 3px;
}
/* Pas d'opacité : elle se multipliait avec un gris déjà juste et faisait
   tomber la description à 3,6:1. L'état se lit au badge et au fond.
   Sert désormais à la fonctionnalité socle (« Formulaire de contact ») : la
   seule case qui ne se décoche pas, et qui le dit. */
.bd-check.is-locked { cursor: default; background: var(--paper-2); }
.bd-lockflag {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  padding: 3px 8px; border-radius: 999px; background: var(--paper-2);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-3);
}
.bd-lockflag[hidden] { display: none; }
@keyframes bd-flash {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.bd-check.is-flash { animation: bd-flash .28s ease; }

.bd-fgroup { margin-bottom: 18px; }
.bd-fgroup-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.bd-fgroup-h b { font-family: var(--font-display); font-size: 13.5px; }
.bd-fgroup-h span { font-size: 11.5px; color: var(--muted); }

.bd-panel-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}

/* ── Scène d'aperçu ─────────────────────────────────────────────────────── */
.bd-stage {
  position: sticky; top: var(--bd-stick);
  height: calc(100vh - var(--bd-top) - 68px);
  display: flex; flex-direction: column;
  padding: 16px 20px 12px;
  background: var(--paper-2);
  min-width: 0;
}
.bd-stage-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bd-devices { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--card); }
.bd-dev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 40px;
  border: 0; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.bd-dev.is-on { background: var(--fg); color: var(--bg); }
.bd-stage-pages {
  display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0;
  scrollbar-width: thin; padding-bottom: 2px;
  /* Les six puces débordent dès 390 px : sans ce dégradé, les deux dernières
     pages (Réserver, Contact) sont hors champ sans que rien ne l'annonce.
     Même procédé que .admin-nav et .ec-tabs. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
/* Le rail est un tabulateur (role="group" + tabindex sur le gabarit) : un
   conteneur qui défile doit être atteignable au clavier. Reste à ce que son
   anneau de focus SE VOIE : le mask-image ci-dessus efface tout ce qui se peint
   hors de la boîte et fond les 24 px de droite, et mesuré, seule la moitié
   intérieure de l'anneau du navigateur survivait. On retire donc le masque le
   temps du focus clavier — l'anneau devient alors, à lui seul, l'annonce que ça
   défile. Même anneau que les champs du formulaire, deux blocs plus haut. */
.bd-stage-pages:focus-visible {
  -webkit-mask-image: none;
          mask-image: none;
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.bd-spage {
  /* Plancher des micro-actions en grappe (38 px), pas celui d'un bouton isolé. */
  padding: 7px 11px; min-height: 38px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted);
  font-size: 12.5px; cursor: pointer;
}
.bd-spage:hover { border-color: var(--fg); color: var(--fg); }
.bd-spage.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.bd-stage-full {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--card); color: var(--fg);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
}
.bd-stage-full:hover { border-color: var(--fg); }

.bd-frame { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.bd-browser {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 12px 40px rgba(0,0,0,.09);
  transition: max-width .3s ease;
  width: 100%; margin: 0 auto;
}
.bd-frame.is-mobile .bd-browser { max-width: 400px; }
.bd-browser-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.bd-dots { display: inline-flex; gap: 5px; }
.bd-dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); display: block; }
.bd-url {
  flex: 1 1 auto; padding: 4px 12px;
  border-radius: 999px; background: var(--bg);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-browser iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; min-height: 0; }
.bd-frame-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5;
}
.bd-frame-note .ico { flex: 0 0 auto; margin-top: 2px; }

/* ── Barre d'action ─────────────────────────────────────────────────────── */
.bd-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* Zone sûre : la page est servie en viewport-fit=cover, donc sans cette
     réserve la barre gestuelle de l'iPhone se pose sur le bouton d'envoi.
     Même geste que .cdc-nav, la barre jumelle du cahier des charges. */
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
.bd-bar-recap { display: flex; flex-direction: column; min-width: 0; }
.bd-bar-recap b { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; }
.bd-bar-recap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Fenêtre de demande ─────────────────────────────────────────────────── */
.bd-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10,10,10,.6);
  overflow-y: auto;
}
.bd-modal[hidden] { display: none; }
.bd-modal-box {
  position: relative;
  width: min(680px, 100%); max-height: 92vh; overflow-y: auto;
  padding: 30px;
  border-radius: 16px;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.bd-modal-x {
  position: absolute; right: 14px; top: 14px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg); color: var(--fg); font-size: 16px; cursor: pointer;
}
.bd-modal-box h2 {
  font-family: var(--font-display); font-size: 24px;
  letter-spacing: -0.025em; margin: 0 34px 0 0;
}
.bd-modal-lead { margin: 10px 0 20px; color: var(--muted); font-size: 14.5px; }
.bd-price-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.bd-price-note .ico { flex: 0 0 auto; margin-top: 2px; color: var(--fg); }
.bd-price-note strong { color: var(--fg); }
.bd-price-note a { color: var(--fg); }
.bd-recap { margin-bottom: 20px; }
.bd-recap summary {
  cursor: pointer; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); font-size: 13.5px; font-weight: 500;
}
.bd-recap dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 12px 0 0; padding: 14px;
  border-radius: 10px; background: var(--paper-2); font-size: 13px;
}
.bd-recap dt { font-weight: 600; color: var(--muted); white-space: nowrap; }
.bd-recap dd { margin: 0; }
.bd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bd-field--wide { grid-column: 1 / -1; }
.bd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bd-rgpd { margin: 12px 0 0; font-size: 12px; color: var(--muted-3); }
.bd-done { text-align: center; padding: 20px 0; }
.bd-done-i {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 12px;
  border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 26px;
}
.bd-done h3 { font-family: var(--font-display); font-size: 21px; margin: 0 0 6px; }
.bd-done p { margin: 0; color: var(--muted); }
body.bd-locked { overflow: hidden; }

/* ── Petite note flottante ──────────────────────────────────────────────── */
.bd-note {
  position: fixed; left: 50%; bottom: 84px; z-index: 95;
  display: flex; align-items: center; gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.bd-note.is-on { opacity: 1; transform: translate(-50%, 0); }
.bd-note .bd-ico { flex: 0 0 auto; font-size: 16px; }

/* ══════════════════════════ Responsive ═════════════════════════════════ */
@media (max-width: 1080px) {
  .bd-work { grid-template-columns: minmax(300px, 360px) 1fr; }
  .bd-layouts, .bd-palettes { grid-template-columns: 1fr; }
}

/* Sous 900 px, les deux colonnes ne tiennent plus : on bascule entre
   « Mes choix » et « L'aperçu » par un sélecteur, plutôt que d'empiler un
   panneau de 2 mètres au-dessus d'un aperçu qu'on ne verrait jamais. */
@media (max-width: 900px) {
  .bd-work {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .bd-switch {
    display: flex; gap: 4px;
    position: sticky; top: var(--bd-stick); z-index: 25;
    padding: 10px 16px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .bd-switch-b {
    flex: 1 1 50%; padding: 10px; min-height: 44px;
    border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--bg); color: var(--muted);
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .bd-switch-b.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .bd-panel {
    position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .bd-panel-scroll { height: auto; overflow: visible; padding: 16px 16px 30px; }
  .bd-stage {
    position: static; height: auto; padding: 16px;
  }
  .bd-browser { height: 70vh; }
  .bd-work.show-view .bd-panel { display: none; }
  .bd-work:not(.show-view) .bd-stage { display: none; }
}

@media (max-width: 620px) {
  /* La barre du site est fixe : l'écran d'accueil doit toujours démarrer SOUS
     elle. Un padding nu (32px) écrasait le calc de la règle de base, donc la
     réserve : l'accroche « Gratuit · sans inscription · 2 minutes » repassait
     derrière la barre, invisible sur tout téléphone. Ce qu'on redéfinit ici,
     c'est la respiration voulue en plus, jamais la réserve. */
  .bd-intro { padding: calc(var(--bd-top) + 32px) 18px 60px; }
  .bd-fam-g { grid-template-columns: 1fr; }
  .bd-corners { grid-template-columns: repeat(3, 1fr); }
  .bd-form-grid { grid-template-columns: 1fr; }
  .bd-modal-box { padding: 22px; }
  .bd-bar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .bd-bar-recap b { font-size: 13.5px; }
  .bd-bar .btn-lg { padding: 11px 16px; font-size: 13.5px; min-height: 44px; }
  .bd-stage-bar { gap: 8px; }
  .bd-dev span { display: none; }
  .bd-recap dl { grid-template-columns: 1fr; gap: 2px; }
  .bd-recap dt { margin-top: 8px; }
}

/* Aucun champ sous 16 px : en dessous, iOS zoome tout seul au premier tap et
   ne revient pas. Ici c'est le pire endroit possible pour ça : l'atelier fait
   la promesse « regardez votre site se construire », et le zoom cassait le
   cadrage de l'aperçu à chaque saisie (nom, slogan, ville, coordonnées).
   Mesuré avant correction : recherche 15 px, champs de réglage 14 px. */
@media (max-width: 760px) {
  .bd-search input,
  .bd-field input[type="text"],
  .bd-field input[type="email"],
  .bd-field input[type="tel"],
  .bd-field textarea,
  .bd-field select { font-size: 16px; }
}


/* ── Mouvement réduit ────────────────────────────────────────────────────
   Même traitement que la feuille de l'aperçu : sous `reduce`, plus aucune
   transition ni animation, et surtout plus de secousse horizontale. */
@media (prefers-reduced-motion: reduce) {
  .page-builder *,
  .page-builder *::before,
  .page-builder *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .bd-check.is-flash { animation: none; }
}

/* ── Contexte tactile : le survol ne colle pas ────────────────────────────
   En fin de fichier, l'ordre tranche à spécificité égale. Le :not(.is-on)
   est indispensable : sans lui, la tuile qu'on vient de choisir perdrait son
   liseré de sélection au moment même du tap qui la sélectionne. */
@media (hover: none) {
  .bd-met:hover { border-color: var(--line-strong); transform: none; box-shadow: none; }
  .bd-card:not(.is-on):hover { border-color: var(--line-strong); }
  .bd-pal:not(.is-on):hover { border-color: var(--line-strong); }
  .bd-font:not(.is-on):hover { border-color: var(--line-strong); }
  .bd-corner:not(.is-on):hover, .bd-mode:not(.is-on):hover { border-color: var(--line-strong); }
  .bd-check:not(.is-on):hover { border-color: var(--line); background: var(--bg); }
  .bd-spage:not(.is-on):hover { border-color: var(--line); color: var(--muted); }
  .bd-stage-full:hover { border-color: var(--line-strong); }
}