/* ==========================================================
   CRÉATION SITE INTERNET — V3
   Calque « outil de design » posé par-dessus la V2 (style.css) :
   barre d'outils, règles graduées, cadres, commentaires épinglés,
   mode Esquisse (wireframe), curseur « Vous », barre d'état.
========================================================== */
:root{--rul:18px;--tbh:56px}

/* ---------- Barre d'outils ---------- */
.tb{background:rgba(250,251,252,.92)}
.tb-in{height:var(--tbh);display:flex;align-items:center;gap:14px;padding:0 16px}
.tb-left{display:flex;align-items:center;gap:14px;min-width:0}
.tb .brand{font-size:22px}
.tb-file{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--line);font-size:13.5px;color:var(--mute);white-space:nowrap}
.tb-file i{font-style:normal;opacity:.45}
.tb-file b{color:var(--ink);font-weight:600}
@media (min-width:861px){
  .tb-tools{margin:0 auto;display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--paper2)}
  .tb-tools a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2);transition:background .2s,color .2s}
  .tb-tools a svg{width:15px;height:15px;flex:none}
  .tb-tools a:hover{background:rgba(255,255,255,.75)}
  .tb-tools a.on{background:#fff;color:var(--blue);box-shadow:0 1px 2px rgba(15,18,34,.14)}
}
.tb-tools a svg{width:15px;height:15px}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.tb-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s}
.tb-toggle svg{width:15px;height:15px;flex:none}
.tb-toggle:hover{background:#fff}
.tb-toggle[aria-pressed="true"]{background:var(--bsoft);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(46,60,255,.3)}
.tb-zoom{padding:0 4px;font-size:13px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.tb .btn{padding:11px 16px;font-size:14.5px}
@media (max-width:1180px){.tb-file,.tb-zoom{display:none}}
@media (max-width:1000px){.tb-toggle span{display:none}.tb-toggle{padding:8px}}
@media (max-width:860px){
  .tb .btn,.tb-toggle{display:none}
  .menu{height:calc(100vh - var(--tbh));height:calc(100dvh - var(--tbh))}
  .menu a{display:flex;align-items:center;gap:12px}
  .menu a svg{width:22px;height:22px;color:var(--blue)}
}

/* ---------- Règles graduées ---------- */
.ruler{display:none;position:relative;overflow:hidden;background:#f4f5f8;color:#878ca0;font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;user-select:none;-webkit-user-select:none}
.rx{height:var(--rul);border-top:1px solid var(--line);background-image:linear-gradient(90deg,rgba(15,18,34,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(15,18,34,.16) 1px,transparent 1px);background-size:100px 100%,10px 5px;background-repeat:repeat-x;background-position:0 0,0 100%}
.ry{position:fixed;left:0;top:0;bottom:0;width:var(--rul);z-index:70;border-right:1px solid var(--line)}
.ry::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--tbh) + var(--rul));background:#f4f5f8;border-bottom:1px solid var(--line);z-index:2}
.rlab{position:absolute;left:0;right:0;top:0;height:calc(100% + 200px);background-image:linear-gradient(rgba(15,18,34,.28) 1px,transparent 1px),linear-gradient(rgba(15,18,34,.16) 1px,transparent 1px);background-size:100% 100px,5px 10px;background-repeat:repeat-y;background-position:0 0,100% 0;will-change:transform}
.rn{position:absolute;line-height:1}
.rx .rn{top:2px}
.ry .rn{left:2px;writing-mode:vertical-rl;transform:rotate(180deg)}
.rmark{position:absolute;display:none;background:var(--blue);z-index:3}
.rx .rmark{top:0;bottom:0;width:1px}
.ry .rmark{left:0;right:0;height:1px}
.has-mouse .rmark{display:block}
.rmark b{position:absolute;background:var(--blue);color:#fff;font-size:9.5px;font-weight:600;padding:1px 4px;border-radius:3px;white-space:nowrap}
.rx .rmark b{left:3px;top:2px}
.ry .rmark b{left:1px;top:3px;writing-mode:vertical-rl;transform:rotate(180deg)}
@media (min-width:1024px) and (pointer:fine){
  .ruler{display:block}
  body{padding-left:var(--rul)}
  html{scroll-padding-top:calc(var(--tbh) + var(--rul) + 10px)}
}

/* ---------- Cadres (sections) ---------- */
[data-frame]{position:relative}
.frame-lbl{position:absolute;top:14px;left:max(24px,calc((100% - 1240px) / 2));z-index:4;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--mute);pointer-events:none}
.frame-lbl svg{width:12px;height:12px}
.frame-lbl em{font-style:normal;font-weight:500;color:var(--blue);font-variant-numeric:tabular-nums}
.on-dark .frame-lbl{color:var(--dmu)}
.on-dark .frame-lbl em{color:var(--blue2)}
@media (max-width:640px){.frame-lbl{left:16px}}

/* ---------- Commentaires épinglés ---------- */
.pin{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:8px;text-align:left}
.pin.r{flex-direction:row-reverse}
.pin-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 4px;background:var(--note);color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 0 0 2px #fff,0 8px 18px -8px rgba(15,18,34,.6);transition:transform .2s}
.pin.r .pin-av{border-radius:50% 50% 4px 50%}
.pin:hover .pin-av,.pin[aria-expanded="true"] .pin-av{transform:scale(1.1)}
.pin-note{display:block;width:max-content;max-width:250px;padding:10px 12px;border-radius:4px 12px 12px 12px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:500;line-height:1.4;box-shadow:0 16px 34px -14px rgba(15,18,34,.5);opacity:0;transform:translateY(4px) scale(.96);transform-origin:0 0;pointer-events:none;transition:opacity .2s,transform .2s}
.pin.r .pin-note{border-radius:12px 4px 12px 12px;transform-origin:100% 0}
.pin-note b{display:block;margin-bottom:3px;font-size:12px;font-weight:600;color:var(--mute)}
.pin:hover .pin-note,.pin:focus-visible .pin-note,.pin[aria-expanded="true"] .pin-note{opacity:1;transform:none}
.pin::after{content:"";position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,216,74,.7);animation:pinPulse 2.6s 1.5s ease-out 2}
.pin.r::after{left:auto;right:0}
@keyframes pinPulse{to{box-shadow:0 0 0 16px rgba(255,216,74,0)}}
.no-notes .pin{display:none}
@media (max-width:860px){.pin{display:none}}

/* ---------- Curseur « Vous » ---------- */
.me{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.me span{display:block;padding:3px 8px;border-radius:2px 99px 99px 99px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(46,60,255,.6)}
.has-mouse .me{opacity:1}
.over-ui .me{opacity:0}

/* ---------- Mode Esquisse (wireframe) ---------- */
html.wire main *:not(dialog,dialog *),html.wire .footer *{background-color:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;color:#4a4f60!important;border-color:rgba(15,18,34,.22)!important;-webkit-text-stroke:0!important}
html.wire body main section,html.wire .footer{background:#fff!important;background-image:radial-gradient(rgba(15,18,34,.11) 1px,transparent 1.3px)!important;background-size:22px 22px!important}
html.wire main :is(.stage .frame,.chip,.note,.pframe,.p-tool,.b-card,.b-prev,.wk,.lui,.layer,.lview,.faq-list details,.cwin,.btn,.kicker,.opts span,.fields input,.fields textarea,.tags span,.chips span,.f-img,.pb,.slot,h1,h2,.lead,.trust li){outline:1.5px dashed rgba(15,18,34,.32)!important;outline-offset:3px}
html.wire main img{filter:grayscale(1);opacity:.16}
html.wire main .mk-ph{opacity:.5}
html.wire main .sel-frame{border-color:var(--blue)!important}
html.wire main :is(.sel-tag,.sel-dim){background:var(--blue)!important;color:#fff!important}
html.wire main .hd{background:#fff!important;border-color:var(--blue)!important}
html.wire main .pin-av{background:var(--note)!important;color:var(--ink)!important}
html.wire main .pin-note{background:#fff!important;box-shadow:0 16px 34px -14px rgba(15,18,34,.5)!important}
html.wire main .frame-lbl em{color:var(--blue)!important}
html.wire main .c-btn{background:transparent!important}
html.wire .f-word{-webkit-text-stroke:1.5px rgba(15,18,34,.3)!important;color:transparent!important}
html.wire .statusbar{background:#f4f5f8!important}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:95;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,20px);transition:opacity .3s,transform .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Barre d'état ---------- */
.footer{padding-bottom:0}
.statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:28px;padding:9px 24px;border-top:1px solid var(--line);background:#f4f5f8;font-size:12.5px;color:var(--mute)}
.statusbar span{display:inline-flex;align-items:center;gap:7px}
.statusbar .ok{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.statusbar span:last-child{margin-left:auto}

@media (prefers-reduced-motion:reduce){.pin::after{animation:none}}