/*
 * L'éditeur de Studio : le chrome autour du canevas.
 *
 * Il porte l'identité de namegenerator.company (Mulish, le bleu des liens,
 * des filets de 1 px, des gris chauds) et JAMAIS celle du site qu'on édite :
 * le chrome se fait oublier, le canevas parle. Ces écrans se regardent une
 * heure d'affilée : 1 px partout, pas d'aplat, pas d'ombre lourde.
 */

:root {
  --ink: #353535; --body: #4a4a4a; --muted: #6f6f6f; --line: #e6e7ea; --line-2: #d7d9de;
  --blue: #1160c9; --blue-dark: #0d3f8f; --blue-soft: #e8f0fc; --tint: #f7f8fa; --scene: #eceef2;
  --danger: #b3261e; --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --sans: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.ed { margin: 0; font: 14px/1.45 var(--sans); color: var(--body); background: #fff; display: grid; grid-template-rows: 56px 1fr; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ Barre */

.ed-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; }
.ed-barre__gauche { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ed-logo { font-weight: 800; color: var(--ink); letter-spacing: -0.01em; font-size: 16px; }
.ed-site { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-barre__centre { display: flex; align-items: center; gap: 12px; }
.ed-barre__droite { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ed-page { height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6f6f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; appearance: none; color: var(--ink); font-weight: 600; min-width: 140px; }
.ed-appareils { display: flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.ed-appareils button { width: 36px; height: 32px; border: 0; background: #fff; display: grid; place-items: center; color: var(--muted); }
.ed-appareils button + button { border-left: 1px solid var(--line); }
.ed-appareils button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue); }
.ed-appareils svg, .ed-icone svg { width: 18px; height: 18px; }
.ed-icone { width: 34px; height: 34px; border: 0; border-radius: var(--r-sm); background: transparent; display: grid; place-items: center; color: var(--ink); }
.ed-icone:hover:not(:disabled) { background: var(--tint); }
.ed-icone:disabled { color: #c3c5ca; cursor: default; }
.ed-etat { color: var(--muted); font-size: 13px; min-width: 92px; text-align: right; padding-right: 6px; }
.ed-etat--modifie { color: var(--ink); }
.ed-bouton { height: 34px; padding: 0 16px; border: 1px solid var(--blue); border-radius: var(--r-sm); background: var(--blue); color: #fff; font-weight: 700; }
.ed-bouton:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.ed-bouton--ligne { background: #fff; color: var(--ink); border-color: var(--line-2); }
.ed-bouton--ligne:hover { background: var(--tint); border-color: var(--line-2); }
.ed-bouton--plein { width: 100%; }
.ed-bouton--danger { background: #fff; color: var(--danger); border-color: var(--line-2); }

/* -------------------------------------------------------------- Le corps */

.ed-corps { display: grid; grid-template-columns: 76px 320px 1fr; min-height: 0; }
.ed-rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px 0; gap: 2px; background: #fff; }
.ed-rail button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; margin: 0 8px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ed-rail button svg { width: 22px; height: 22px; }
.ed-rail button:hover { background: var(--tint); color: var(--ink); }
.ed-rail button[aria-current="true"] { background: var(--blue-soft); color: var(--blue); }

.ed-panneau { border-right: 1px solid var(--line); overflow-y: auto; padding: 18px 18px 40px; background: #fff; }
.ed-panneau h2 { margin: 0 0 4px; font-size: 16px; color: var(--ink); font-weight: 800; }
.ed-panneau h3 { margin: 22px 0 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ed-panneau p.ed-aide { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.ed-entete-panneau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ed-retour { border: 0; background: none; color: var(--blue); font-weight: 700; padding: 0; }

.ed-champ { display: grid; gap: 6px; margin-bottom: 14px; }
.ed-champ > span { font-weight: 600; color: var(--ink); font-size: 13px; }
.ed-champ input[type="text"], .ed-champ input[type="url"], .ed-champ input[type="email"], .ed-champ input[type="tel"], .ed-champ select, .ed-champ textarea {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.ed-champ textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
.ed-champ input:focus, .ed-champ select:focus, .ed-champ textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.ed-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ed-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-puce { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ed-puce:hover { border-color: var(--ink); }
.ed-puce[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.ed-tons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.ed-ton { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; padding: 6px; display: grid; gap: 6px; justify-items: center; font-size: 12px; font-weight: 600; }
.ed-ton i { display: block; width: 100%; height: 26px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); }
.ed-ton[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); color: var(--blue); }

.ed-allures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-allure { border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; padding: 0; text-align: left; overflow: hidden; }
.ed-allure__vignette { height: 64px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.ed-allure__vignette b { font-size: 20px; line-height: 1; }
.ed-allure__vignette i { width: 28px; height: 6px; border-radius: 3px; }
.ed-allure__nom { display: block; padding: 8px 10px 9px; border-top: 1px solid var(--line); }
.ed-allure__nom strong { display: block; color: var(--ink); font-size: 13px; }
.ed-allure__nom span { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-allure[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.ed-couleur { display: flex; gap: 8px; align-items: center; }
.ed-couleur input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; }
.ed-couleur input[type="text"] { flex: 1; }

.ed-liste { display: grid; gap: 8px; }
.ed-element { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; background: var(--tint); }
.ed-element__tete { display: flex; align-items: center; gap: 4px; }
.ed-element__tete strong { flex: 1; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-element .ed-champ { margin-bottom: 0; }
.ed-mini { border: 0; background: transparent; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
.ed-mini:hover { background: #fff; color: var(--ink); }
.ed-mini svg { width: 16px; height: 16px; }
.ed-ajout { border: 1px dashed var(--line-2); background: #fff; border-radius: var(--r); padding: 9px; font-weight: 700; color: var(--blue); }

.ed-image { position: relative; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--tint); aspect-ratio: 3 / 2; cursor: crosshair; }
.ed-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-image__point { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); pointer-events: none; }
.ed-image__vide { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.ed-pages { display: grid; gap: 6px; }
.ed-page-ligne { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 4px 4px 10px; }
.ed-page-ligne[aria-current="true"] { border-color: var(--blue); background: var(--blue-soft); }
.ed-page-ligne button.ed-page-nom { flex: 1; border: 0; background: none; text-align: left; padding: 6px 0; font-weight: 700; color: var(--ink); }
.ed-page-ligne small { color: var(--muted); }

.ed-types { display: grid; gap: 8px; }
.ed-type { border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; padding: 0; overflow: hidden; text-align: left; }
.ed-type:hover { border-color: var(--blue); }
.ed-type__vignette { height: 120px; overflow: hidden; position: relative; background: var(--tint); pointer-events: none; }
.ed-type__vignette iframe { width: 1280px; height: 540px; border: 0; transform: scale(0.222); transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.ed-type__nom { display: block; padding: 8px 12px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }
.ed-groupe { margin: 18px 0 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* ------------------------------------------------------------------ Scène */

.ed-scene { background: var(--scene); overflow: hidden; display: flex; justify-content: center; padding: 20px; min-width: 0; }
.ed-cadre { width: 100%; max-width: 1440px; height: 100%; background: #fff; border-radius: var(--r); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px -12px rgba(16, 24, 40, 0.18); overflow: hidden; transition: max-width 220ms ease; }
.ed-cadre[data-appareil="tablette"] { max-width: 834px; }
.ed-cadre[data-appareil="telephone"] { max-width: 390px; border-radius: 28px; }
.ed-canevas { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.ed-conflit {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 110;
  display: flex; align-items: center; gap: 12px; max-width: min(720px, 100% - 32px);
  padding: 12px 12px 12px 16px; border-radius: var(--r); background: #fff4e5; color: #5f3700;
  border: 1px solid #f3c27a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.ed-conflit span { flex: 1; }

/* -------------------------------------------------------------- Le volet */

/* L'atelier de bonjour, par-dessus la scène : le canevas reste visible à
   gauche, et l'on voit ce qu'on édite en fermant. Sur un petit écran, il
   prend toute la largeur. */
.ed-volet { position: fixed; top: 56px; right: 0; bottom: 0; width: min(640px, 100vw); display: grid; grid-template-rows: auto 1fr; background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08); z-index: 50; }
.ed-volet__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ed-volet__titre { color: var(--ink); font-size: 15px; font-weight: 800; }
.ed-volet__corps { position: relative; min-height: 0; }
.ed-volet__cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ed-volet__attente { margin: 24px 16px; color: var(--muted); }
/* Sur un téléphone, la page de l'éditeur déborde l'écran : le volet s'ancre
   au bord GAUCHE, celui qu'on voit, et prend toute la largeur visible. */
@media (max-width: 700px) { .ed-volet { left: 0; right: auto; width: 100vw; } }

.ed-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 100; }

@media (prefers-reduced-motion: reduce) { .ed-cadre { transition: none; } }

/* ----------------------------------------------- La liste des brouillons */
body.ed-accueil { display: block; overflow: auto; background: var(--tint); }
.ed-accueil__corps { max-width: 640px; margin: 64px auto; padding: 0 16px; }
.ed-accueil__corps h1 { margin: 8px 0 20px; font-size: 28px; color: var(--ink); }
.ed-accueil__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ed-accueil__liste a { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-weight: 700; text-decoration: none; }
.ed-accueil__liste a:hover { border-color: var(--blue); color: var(--blue); }
.ed-accueil__etat { float: right; font-weight: 600; color: var(--muted); font-size: 13px; }
.ed-accueil__compte { float: right; margin: -28px 0 0; font-size: 14px; }
.ed-logo a { color: inherit; text-decoration: none; }
.ed-accueil__prix { margin: 0 0 18px; }
.ed-accueil__erreur { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: #fdecea; color: var(--danger); font-weight: 600; }
.ed-accueil__domaine { display: grid; gap: 12px; margin-bottom: 14px; }
.ed-accueil__domaine label > span:first-child { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ed-accueil__champ { display: flex; gap: 6px; }
.ed-accueil__champ input, .ed-accueil__champ select { height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; font-size: 16px; color: var(--ink); }
.ed-accueil__champ input { flex: 1; min-width: 0; }
.ed-accueil__domaine .ed-bouton { justify-self: start; height: 40px; }
.ed-accueil__note { color: var(--muted); font-size: 14px; }
a.ed-bouton { display: inline-flex; align-items: center; text-decoration: none; }