/* L’espace d’écriture (admin du blog) : la coque. Le cadre de l’aperçu a sa propre feuille (cadre.css). */
:root{--papier:#FDF9F1;--creme:#F5EEE3;--encre:#362B24;--brun:#765433;--or:#D68F35;--or2:#E9AC52;--nuit:#29231D;--ligne:#DFCFB8;--gris:#69594C;--erreur:#9B3B2E;--vert:#35602F;--barre:58px;--tiroir:400px}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#e8dece;font:400 15px/1.5 'Jost',sans-serif;color:var(--encre)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--brun);font:500 14px/1 'Jost',sans-serif;cursor:pointer;white-space:nowrap;text-decoration:none}
.b:hover{background:var(--creme)}
.b:focus-visible,.lien:focus-visible,.aide:focus-visible,.article-ligne:focus-visible{outline:3px solid #bd701d;outline-offset:3px}
.b-cadre{border-color:var(--ligne)}
.b-or{background:var(--or2);color:var(--nuit);border-color:var(--or2)}.b-or:hover{background:#f6c37c}
.b-or:disabled{background:var(--creme);border-color:var(--ligne);color:#9a8a78;cursor:not-allowed}
.b-icone{padding:0;width:40px}
.b-icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.b.large{width:100%;min-height:46px;font-size:15px}
.lien{border:0;background:none;padding:4px 0;color:var(--brun);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
.champ{display:block;width:100%;padding:10px 12px;border:1px solid var(--ligne);border-radius:10px;background:#FFFBF5;color:var(--encre);font:400 15px/1.55 'Jost',sans-serif}
.champ:focus,.champ:focus-within{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
textarea.champ{resize:vertical;min-height:64px}
.champ.ar{font:400 24px/2 'Noto Naskh Arabic',serif;direction:rtl;text-align:right;min-height:96px}
.champ.court{display:inline-block;width:9em;padding:3px 8px;border-color:transparent;background:transparent}
.champ.court:hover,.champ.court:focus{border-color:var(--ligne);background:#FFFBF5}
.pastille{display:inline-block;padding:1px 9px;border-radius:10px;background:#E2EBD8;color:var(--vert);font-weight:500;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pastille.attente{background:#FBE7C6;color:#7A4D1D}
.ecran{display:none}
.attente,.attente-sans{margin:40vh auto 0;text-align:center;color:var(--gris)}
.attente{display:none}body[data-ecran="attente"] .attente{display:block}
body[data-ecran="porte"] #ecran-porte{display:grid}
body[data-ecran="liste"] #ecran-liste{display:block}
body[data-ecran="editeur"] #ecran-editeur{display:block}

/* ① la porte */
#ecran-porte{min-height:100%;place-items:center;background:var(--nuit);padding:24px 16px}
.porte-carte{width:100%;max-width:380px;background:var(--papier);border-radius:16px;padding:32px 26px 26px;text-align:center}
.porte-carte img{border-radius:12px}
.porte-carte h1{font:600 26px/1.2 'Fredoka','Jost',sans-serif;color:var(--brun);margin:14px 0 24px}
.porte-pas{display:grid;gap:10px;text-align:left}
.porte-pas label{font-weight:500;font-size:14px;color:var(--gris)}
.champ.code{font-size:26px;letter-spacing:.45em;text-align:center}
.porte-pas .lien{justify-self:center}
.erreur{min-height:1.5em;margin:10px 0 0;color:var(--erreur);font-size:14px}

/* ② mes articles */
.liste-tete{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--papier);border-bottom:1px solid var(--ligne)}
.liste-tete img{border-radius:8px}
.liste-tete h1{flex:1;margin:0;font:600 21px/1.2 'Fredoka','Jost',sans-serif;color:var(--brun)}
.articles{list-style:none;margin:24px auto;padding:0 16px;max-width:760px}
.article-ligne{display:grid;grid-template-columns:104px 1fr auto;gap:16px;align-items:center;width:100%;padding:12px;border:1px solid var(--ligne);border-radius:14px;background:var(--papier);text-align:left;cursor:pointer}
.article-ligne:hover{border-color:var(--or2)}
.vignette{width:104px;height:66px;object-fit:cover;border-radius:8px}
.a-texte b{display:block;font:600 18px/1.3 'Fredoka','Jost',sans-serif;color:var(--encre)}
.a-etat{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:6px;font-size:13px;color:var(--gris)}
.chevron{font-size:26px;color:var(--brun)}

/* ③ l'article */
.barre{position:fixed;top:0;left:0;right:0;height:var(--barre);z-index:30;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--papier);border-bottom:1px solid var(--ligne)}
.retour{padding:0 8px 0 4px;font-size:14px}.retour span[aria-hidden]{font-size:24px;line-height:0}
.barre .titre{flex:1;min-width:0;padding:0 6px}
.barre .titre b{display:block;font:600 17px/1.25 'Fredoka','Jost',sans-serif;color:var(--brun);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etat{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12.5px;white-space:nowrap}
.t-ok,.t-cours,.t-err{display:none}
.barre[data-temoin="ok"] .t-ok{display:inline;color:var(--vert)}
.barre[data-temoin="cours"] .t-cours{display:inline;color:var(--gris)}
.barre[data-temoin="err"] .t-err{display:inline;color:var(--erreur);font-weight:500}
.t-err .lien{font-size:12.5px;color:var(--erreur)}
.vues{display:flex;gap:2px;padding:2px;border:1px solid var(--ligne);border-radius:12px;margin-right:4px}
.vues .b{min-height:34px;width:38px}
.vues .b[aria-pressed="true"]{background:var(--creme);color:var(--nuit)}
.ailleurs{position:fixed;top:var(--barre);left:0;right:0;z-index:29;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;background:#F6DDD5;color:var(--erreur);font-weight:500}
.scene{position:fixed;top:var(--barre);left:0;right:0;bottom:0;transition:right .25s ease}
.cadre{height:100%}
.cadre iframe{display:block;width:100%;height:100%;border:0;background:#fbf6ed}
body.vue-telephone .scene{background:#e8dece;padding:16px 0}
body.vue-telephone .cadre{width:390px;margin:0 auto;border:1px solid var(--ligne);border-radius:24px;overflow:hidden}
body.tiroir-ouvert .scene{right:var(--tiroir)}
body.bloque .scene{pointer-events:none;opacity:.55}
#tiroir{position:fixed;top:var(--barre);right:0;bottom:0;width:var(--tiroir);z-index:25;display:flex;flex-direction:column;background:var(--papier);border-left:1px solid var(--ligne);transform:translateX(100%);transition:transform .25s ease;visibility:hidden}
body.tiroir-ouvert #tiroir{transform:none;visibility:visible}
.poignee{display:none}
.t-tete{display:flex;align-items:center;gap:8px;padding:12px 10px 10px 20px;border-bottom:1px solid var(--ligne)}
.t-tete h2{flex:1;margin:0;font:600 19px/1.3 'Fredoka','Jost',sans-serif;color:var(--brun)}
.t-corps{flex:1;overflow:auto;padding:16px 20px 32px;display:grid;gap:18px;align-content:start}
.ch{display:grid;gap:6px}
.ch-tete{display:flex;align-items:center;gap:6px}
.ch-tete label,.ch-tete .l{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brun)}
.aide{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid var(--ligne);border-radius:50%;background:transparent;color:var(--gris);font:600 11px/1 'Jost',sans-serif;cursor:pointer}
.aide:hover{border-color:var(--or);color:var(--brun)}
.refus{min-height:0;margin:0;color:var(--erreur);font-size:13px}
.verif{display:flex;gap:8px;align-items:baseline;font-size:13.5px;color:var(--vert)}
.verif.ko{color:var(--erreur)}
.lecture{padding:10px 12px;border:1px dashed var(--ligne);border-radius:10px;color:var(--gris);font-size:14px}
.case{display:flex;gap:10px;align-items:center;font-size:14.5px;cursor:pointer}
.case input{width:20px;height:20px;accent-color:var(--or)}
.sous{display:grid;gap:10px;padding:12px;border:1px solid var(--ligne);border-radius:12px}
.outils{display:flex;gap:4px;margin-bottom:-2px}
.outils button{min-width:34px;height:32px;padding:0 8px;border:1px solid var(--ligne);border-radius:8px;background:var(--creme);color:var(--brun);cursor:pointer;font-size:14px}
.outils button:hover{border-color:var(--or)}
.outils .lien-saisie{display:flex;gap:4px;flex:1}
.outils .lien-saisie input{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--or);border-radius:8px;background:#fff;font-size:13px}
.champ.riche{min-height:48px;line-height:1.6}
.champ.riche strong{font-weight:700;color:#211C1A}
.champ.riche a{color:var(--brun);text-underline-offset:3px}
.champ.riche .arabic-word{font-family:'Noto Naskh Arabic',serif;font-size:1.2em}

/* ④ publier */
.voile{position:fixed;inset:0;z-index:40;background:rgba(41,35,29,.45);display:none}
body.feuille-ouverte .voile{display:block}
#feuille{position:fixed;z-index:41;left:50%;top:50%;width:min(480px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;transform:translate(-50%,-50%);padding:24px 24px 20px;border-radius:16px;background:var(--papier);display:none}
body.feuille-ouverte #feuille{display:block}
#feuille h2{margin:0 0 14px;font:600 24px/1.25 'Fredoka','Jost',sans-serif;color:var(--brun)}
#feuille h3{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.f-avant,.f-pendant,.f-ok,.f-ko{display:none}
#feuille[data-temps="avant"] .f-avant,#feuille[data-temps="pendant"] .f-pendant,#feuille[data-temps="ok"] .f-ok,#feuille[data-temps="ko"] .f-ko{display:block}
.changes{margin:0 0 16px;padding-left:20px}
.changes li{margin:3px 0}
.changes .rien{list-style:none;margin-left:-20px;color:var(--gris)}
.regles{margin:0 0 16px;font-size:14.5px}
.regles summary{cursor:pointer;color:var(--vert);font-weight:500}
.regles.ko summary{color:var(--erreur)}
.regles ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.regles li.ko{color:var(--erreur)}
.regles li .lien{margin-left:6px;font-size:13px;color:var(--erreur)}
.relu{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--ligne);border-radius:12px;cursor:pointer}
.relu input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--or)}
.signe{display:flex;align-items:center;gap:4px;margin:8px 0 0 12px;font-size:14px;color:var(--gris)}
.f-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.pas{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:10px}
.pas li{display:flex;gap:10px;align-items:center;color:#9a8a78}
.pas li::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--ligne);flex:none}
.pas li.fait{color:var(--vert)}.pas li.fait::before{background:var(--vert);border-color:var(--vert)}
.pas li.encours{color:var(--encre);font-weight:500}.pas li.encours::before{border-color:var(--or);border-top-color:transparent;animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pas li.encours::before{animation:none}.scene,#tiroir{transition:none}}
.petit{font-size:13.5px;color:var(--gris)}
.f-ko h2{color:var(--erreur)!important}

/* l'infobulle */
.bulle{position:fixed;z-index:60;max-width:260px;padding:9px 12px;border-radius:10px;background:var(--nuit);color:#F5EEE3;font-size:13.5px;line-height:1.45}

/* l’annonce (une erreur de lecture, un échec) */
.annonce{position:fixed;left:50%;bottom:20px;z-index:70;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;background:var(--nuit);color:#F5EEE3;font-size:14px}
.outils .lien-saisie input.refuse{border-color:var(--erreur)}
.vignette:not(img){display:block;background:var(--creme)}

/* téléphone : le tiroir devient une feuille qui monte du bas */
@media (max-width:700px){
  :root{--barre:56px}
  .barre{padding:0 6px;gap:2px}
  .barre .titre b{font-size:15.5px}
  .retour .b-texte,.vues{display:none}
  body.tiroir-ouvert .scene{right:0}
  #tiroir{top:auto;left:0;width:auto;max-height:78%;border-left:0;border-radius:18px 18px 0 0;transform:translateY(100%);box-shadow:0 -1px 0 var(--ligne)}
  .poignee{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--ligne)}
  #feuille{top:auto;bottom:0;left:0;width:100%;max-height:88%;transform:none;border-radius:18px 18px 0 0}
  .article-ligne{grid-template-columns:72px 1fr auto;gap:12px}
  .vignette{width:72px;height:52px}
}