:root{--navy:#212731;--red:#aa1917;--sage:#b9c4aa;--paper:#f4f1ec;--paper-2:#ebe6de;--line:rgba(33,39,49,.13);--muted:#6b6e74;--ok:#3d7a4f;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Montserrat",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--navy);font:400 14px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:3px;font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,opacity .2s;white-space:nowrap}
.btn--sm{height:34px;padding:0 14px;font-size:11px}
.btn--red{background:var(--red);color:#fff}.btn--red:hover:not(:disabled){background:#c41f1c}
.btn--dark{background:var(--navy);color:#fff}.btn--dark:hover{background:#343c4a}
.btn--line{border:1px solid var(--line);background:#fff}.btn--line:hover{border-color:var(--navy)}
.btn--ghost{color:var(--muted)}.btn--ghost:hover{color:var(--navy)}
.btn:disabled{opacity:.45;cursor:default}
.danger{color:var(--red)!important}
.x{width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1}
.x:hover{background:var(--paper)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--navy) radial-gradient(ellipse at 70% 30%,rgba(185,196,170,.18),transparent 60%)}
.login__box{width:min(380px,100%);background:#fff;padding:40px 34px;border-radius:4px;display:grid;gap:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.login__box img{width:170px}
.login__box h1{font:400 30px/1.1 var(--serif)}
.login__box label{display:grid;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.login__box input{height:44px;border:1px solid var(--line);border-radius:3px;padding:0 12px;font-size:15px;letter-spacing:0;text-transform:none}
.login__err{margin:0;color:var(--red);font-size:13px;min-height:1em}
.login__back{font-size:12px;color:var(--muted);text-decoration:none}

/* shell */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--navy);color:#fff;padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side__logo img{width:150px;margin:0 8px 30px}
.side__nav{display:grid;gap:2px;flex:1;align-content:start;overflow-y:auto}
.side__nav p{margin:18px 10px 6px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.side__nav button,.side__nav a{display:block;text-align:left;padding:10px 12px;border-radius:3px;color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px}
.side__nav button:hover,.side__nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side__nav button.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
.side__live{color:#f1d9cf!important}
.side__out{padding:10px 12px;text-align:left;color:rgba(255,255,255,.5);font-size:12.5px}
.side__out:hover{color:#fff}
.main{min-width:0}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 32px;background:rgba(244,241,236,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top h1{font:400 32px/1 var(--serif)}
.top__act{display:flex;align-items:center;gap:10px}
.top__state{font-size:12.5px;color:var(--muted)}
.top__state.dirty{color:#b06a00}
.view{padding:28px 32px 80px;max-width:1300px}

/* éléments communs */
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.kpi b{display:block;font:300 46px/1 var(--serif)}
.kpi span{font-size:12px;color:var(--muted)}
.intro{color:var(--muted);max-width:720px;margin:0 0 22px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.toolbar input,.toolbar select{height:40px;border:1px solid var(--line);border-radius:3px;padding:0 12px;background:#fff;min-width:220px}
.toolbar .sp{flex:1}
label{display:grid;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--navy)}
label input,label select,label textarea{border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;background:#fff;width:100%}
label textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(170,25,23,.35);border-color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chk{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;margin-top:16px}
.chk input{width:auto}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0;text-transform:none;letter-spacing:0;font-weight:400}
.count{font-size:11px;color:var(--muted);text-align:right;text-transform:none;letter-spacing:0;font-weight:400}
.ibtn{width:32px;height:32px;border-radius:3px;border:1px solid var(--line);background:#fff;display:inline-grid;place-items:center;font-size:14px;color:var(--muted)}
.ibtn:hover{border-color:var(--navy);color:var(--navy)}
.ibtn.danger:hover{border-color:var(--red)}
.ibtn:disabled{opacity:.35}

/* décors */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px}
.dcard{text-align:left;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative}
.dcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(33,39,49,.5)}
.dcard img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--paper-2)}
.dcard div{padding:10px 12px}
.dcard b{font:400 22px/1 var(--serif);display:block}
.dcard span{font-size:12px;font-weight:500;display:block;margin-top:3px}
.dcard small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dcard.hid img{opacity:.35}
.badge{position:absolute;top:8px;left:8px;background:var(--navy);color:#fff;font-size:10px;padding:4px 8px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase}
.dcard .order{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.dcard:hover .order{opacity:1}
.order .ibtn{width:28px;height:28px}

/* listes éditables */
.rows{display:grid;gap:12px}
.row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px}
.row__f{display:grid;gap:12px}
.row__a{display:flex;gap:6px}
.coll-row .fans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.coll-row .fans label{font-size:10px}
.coll-row h3{font:400 24px/1 var(--serif);display:flex;gap:10px;align-items:baseline}
.coll-row h3 small{font:400 12px var(--sans);color:var(--muted)}

/* animation d'accueil */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.pick button{position:relative;border-radius:3px;overflow:hidden;border:2px solid transparent;text-align:left;background:#fff}
.pick img{width:100%;aspect-ratio:3/5;object-fit:cover;display:block}
.pick span{display:block;font-size:10.5px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick button.on{border-color:var(--red)}
.pick i{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:600 11px/24px var(--sans);text-align:center;font-style:normal}

/* seo */
.serp{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 20px;max-width:640px;font-family:Arial,sans-serif}
.serp small{color:#202124;font-size:12px}
.serp b{display:block;color:#1a0dab;font-size:19px;font-weight:400;margin:4px 0}
.serp p{margin:0;color:#4d5156;font-size:13.5px;line-height:1.5}

/* historique */
.hist{display:grid;gap:8px}
.hist div{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px 16px}

/* panneau latéral */
.panel{position:fixed;inset:0;z-index:50}
.panel__bg{position:absolute;inset:0;background:rgba(21,25,32,.5)}
.panel__box{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;display:flex;flex-direction:column;animation:pin .35s cubic-bezier(.22,.8,.2,1)}
@keyframes pin{from{transform:translateX(100%)}}
.panel__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.panel__head h2{font:400 30px/1 var(--serif)}
.panel__body{flex:1;overflow-y:auto;padding:24px}
.panel__foot{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}
.dimg{display:grid;grid-template-columns:120px 1fr;gap:6px 18px;align-items:start;margin-bottom:22px}
.dimg img{grid-row:span 3;width:120px;aspect-ratio:3/5;object-fit:cover;background:var(--paper-2);border-radius:3px}
.dimg .btn{justify-self:start}
.dimg.loading img{opacity:.4}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--navy);color:#fff;padding:12px 18px;border-radius:3px;font-size:13px;transition:all .3s;pointer-events:none;z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--red)}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{min-width:0}
  .side{position:static;height:auto}
  .side__nav{grid-auto-flow:column;overflow-x:auto;grid-auto-columns:max-content}
  .side__nav p,.side__logo{display:none}
  .top,.view{padding-left:16px;padding-right:16px}
  .grid2,.coll-row .fans{grid-template-columns:1fr 1fr}
}
.hmode.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

/* demandes & e-mails */
.msgs{display:grid;gap:14px;max-width:960px}
.msg{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.msg header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.msg header div{display:flex;gap:8px;flex-wrap:wrap}
.msg time{font-size:12px;color:var(--muted)}
.tag,.st{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;background:var(--paper);font-weight:500}
.st--ok{background:#e3efe6;color:var(--ok)}.st--bad{background:#f7e0df;color:var(--red)}.st--warn{background:#f7ecd9;color:#9a6200}
.msg h3{font:400 24px/1.1 var(--serif);margin-bottom:6px}
.msg h3 small{font:400 13px var(--sans);color:var(--muted)}
.msg__c{margin:0 0 8px;font-size:13px}.msg__c a{color:var(--red)}
.msg__d{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.msg__m{margin:0;background:var(--paper);padding:12px 14px;border-radius:3px;white-space:pre-wrap;font-size:13.5px}
.msg__e{margin:10px 0 0;font-size:12.5px;color:var(--red)}
.msg footer{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.res{margin:0;padding:12px 14px;border-radius:3px;font-size:13.5px}
.res--ok{background:#e3efe6;color:var(--ok)}.res--bad{background:#f7e0df;color:var(--red)}

/* menu, liens, supports */
.sub{font:400 26px/1 var(--serif);margin:28px 0 14px}
.lnk{display:grid;gap:6px}
.lnk select,.lnk input{border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;background:#fff;width:100%}
.swatch{width:32px;height:32px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
input:disabled{background:var(--paper);color:var(--muted)}
.grid2>label{align-content:start}

/* mot de passe */
.login__links{display:flex;justify-content:space-between;align-items:center;gap:10px}
.login__forgot{font-size:12px;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.login__txt{margin:0;font-size:13.5px;color:var(--muted)}
.pw{position:relative;display:block}
.pw input{padding-right:44px}
.pw__eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;opacity:.55;font-size:15px}
.pw__eye:hover{opacity:1}
.meter{height:4px;background:var(--paper-2);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;width:0;transition:width .3s,background .3s}
code{background:var(--paper);padding:2px 6px;border-radius:3px;font-size:12.5px;user-select:all}
#fStep1{display:grid;gap:14px}

/* fiche décor */
.hexrow{display:grid;grid-template-columns:48px 1fr;gap:8px}
.hexrow input[type=color]{height:42px;padding:3px;cursor:pointer}
.hexrow input:not([type=color]){font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
.fsec{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.fsec__t{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.fsec__t span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.supchk{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.supchk label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:3px;padding:8px 12px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;cursor:pointer}
.supchk label:has(input:checked){border-color:var(--navy);background:var(--paper)}
.supchk input{width:auto}
.supchk.off{opacity:.45;pointer-events:none}
.rel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.rel span{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:3px;padding:4px 6px 4px 4px;font-size:12px}
.rel img{width:24px;height:34px;object-fit:cover;border-radius:2px}
.rel button{width:22px;height:22px;border-radius:50%;color:var(--muted)}
.rel button:hover{background:#fff;color:var(--red)}
.relsel{height:40px;border:1px solid var(--line);border-radius:3px;padding:0 10px;background:#fff;width:100%}
.ffields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.fopt{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.fopt .chk{margin:0}
.fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px;align-items:start}
@media (max-width:1180px){.fiche{grid-template-columns:minmax(0,1fr)}}
/* aperçu de la fiche (reprend le style du site) */
.fprev{position:sticky;top:90px;display:grid;grid-template-columns:42% 58%;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(33,39,49,.5)}
.fprev__m{position:relative;background:var(--paper-2) center/cover;min-height:440px}
.fprev__m em{position:absolute;left:10px;bottom:10px;font:500 8.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:5px 8px;font-style:normal}
.fprev__i{padding:22px 20px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fprev__e{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
.fprev__c{font:300 40px/1 var(--serif);margin:0}
.fprev__n{font:500 15px var(--sans);margin:4px 0 14px}
.fprev dl{margin:0 0 14px;border-top:1px solid var(--line)}
.fprev dl div{display:grid;grid-template-columns:86px 1fr;gap:6px;padding:7px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.fprev dt{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.fprev dd{margin:0;min-width:0}
.fprev__b{display:block;text-align:center;font:500 9.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:11px;margin-bottom:6px}
.fprev__b--d{background:var(--navy);color:#fff}.fprev__b--l{border:1px solid var(--line)}
.fprev__s{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.fprev__g{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.fprev__g i{width:22px;height:30px;background:var(--paper-2) center/cover}
.fprev__nav{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.fprev .off{opacity:.25;text-decoration:line-through}