/* Aveu · l'atelier. Même univers que la page d'accueil (rose poudré, bordeaux, framboise ; Bodoni Moda,
   Jost, Pinyon Script), mêmes gestes que le Studio d'Opuscule : les lettres à gauche, le livre au centre,
   les outils de la page en bas. Les pages du livre ont leurs propres styles (livre.css). */
:root{
  --poudre:#F6E1E1; --the:#F0C9CC; --perle:#FFF7F6; --bordeaux:#4A1D2A; --bordeaux-doux:#7D4A57;
  --framboise:#C2185B; --framboise-fonce:#A8124D; --prune:#3A1426; --filet:rgba(74,29,42,.14); --filet-fort:rgba(74,29,42,.24);
  --survol:rgba(194,24,91,.06); --choisi:rgba(194,24,91,.1);
  --didone:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --plume:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --sans:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* Atelier plein écran : pas de rebond ni de « tirer pour rafraîchir » qui fait sauter la page sur mobile. */
html,body{overscroll-behavior:none}
body{margin:0;background:var(--poudre);color:var(--bordeaux);font:300 16px/1.55 var(--sans)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--framboise);outline-offset:3px;border-radius:6px}
.cap{font:400 11px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bordeaux-doux);margin:0}
.discret{color:var(--bordeaux-doux);font-size:14px;margin:0}
.signature{font-family:var(--plume);font-size:42px;line-height:1;text-decoration:none;color:var(--bordeaux)}
.visuel-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font:400 12px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;padding:17px 28px;border-radius:999px;background:var(--framboise);color:var(--perle);
  cursor:pointer;box-shadow:0 12px 26px -14px rgba(194,24,91,.65);transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.bouton:hover{background:var(--framboise-fonce);transform:translateY(-1px)}
.bouton:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.bouton.petit{padding:12px 20px;font-size:11px}
.bouton.doux{background:var(--perle);color:var(--bordeaux);box-shadow:0 0 0 1px var(--filet-fort)}
.bouton.doux:hover{background:#fff}
.lien{color:var(--bordeaux);text-decoration:underline;text-decoration-color:var(--filet-fort);text-underline-offset:3px;font-size:14px}
.lien:hover{color:var(--framboise);text-decoration-color:currentColor}
.jauge{height:6px;border-radius:3px;background:rgba(74,29,42,.1);overflow:hidden}
.jauge i{display:block;height:100%;width:100%;background:var(--framboise);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s var(--ease)}
.jauge.fine{height:4px}
.jauge.trop i{background:#B3261E}

/* ================= Accueil ================= */
.accueil{min-height:100vh;min-height:100dvh;background:radial-gradient(60% 50% at 80% 10%,rgba(255,247,246,.85),transparent 70%),linear-gradient(180deg,var(--poudre),#F3D6D8)}
.accueil-tete{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px max(20px,env(safe-area-inset-left)) 10px}
.etapes{display:flex;gap:18px;font-size:12.5px;letter-spacing:.04em;color:var(--bordeaux-doux)}
.etapes [aria-current="step"]{color:var(--framboise);font-weight:400}
.etapes button{color:var(--bordeaux);text-decoration:underline;text-decoration-color:var(--filet-fort);text-underline-offset:3px}
.accueil-corps{width:min(780px,100% - 32px);margin:40px auto 64px}
.etape{display:flex;flex-direction:column;gap:22px}
.etape h1,.etape h2[id^="t-"]{font-family:var(--didone);font-weight:400;font-size:clamp(34px,6vw,56px);line-height:1.04;margin:0;text-wrap:balance}
.etape h1 em,.etape h2[id^="t-"] em{color:var(--framboise)}
.chapo{margin:0;font-size:17px;color:var(--bordeaux-doux);max-width:36em}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.carte{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px 20px 22px;border-radius:18px;background:var(--perle);
  box-shadow:0 0 0 1px var(--filet);transition:box-shadow .2s,transform .2s}
.carte:hover{box-shadow:0 0 0 1px var(--filet-fort),0 16px 30px -22px rgba(74,29,42,.45);transform:translateY(-1px)}
.carte[aria-pressed="true"]{box-shadow:0 0 0 2px var(--framboise),0 16px 30px -22px rgba(194,24,91,.55)}
.carte b{font:400 23px/1.15 var(--didone)}
.carte[aria-pressed="true"] b{color:var(--framboise)}
.carte span{font-size:14.5px;line-height:1.45;color:var(--bordeaux-doux)}
.carte .gros{font:400 30px/1 var(--didone);color:var(--bordeaux);margin-top:10px}
.carte small{font-size:12.5px;color:var(--bordeaux-doux)}
.pied-etape{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}

.depot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 18px;border-radius:22px;border:1.5px dashed var(--filet-fort);
  background:rgba(255,247,246,.7);text-align:center;transition:border-color .2s,background .2s}
.depot.survol,body.survol .depot{border-color:var(--framboise);background:var(--perle)}
@media (hover:none){.depot .ordi{display:none}}
.message{border-radius:16px;background:var(--perle);padding:18px 20px;box-shadow:0 0 0 1px var(--filet);border-left:4px solid var(--framboise)}
.message h2{font:400 22px/1.2 var(--didone);margin:0 0 6px}
.message p{margin:0 0 10px;color:var(--bordeaux-doux)}
.message ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.message li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--poudre)}
.message code{font:400 13px ui-monospace,Menlo,monospace;word-break:break-all}
.message .erreur{color:#9B1C31}
.traitement{border-radius:18px;background:var(--perle);padding:22px 22px 18px;box-shadow:0 0 0 1px var(--filet);display:flex;flex-direction:column;gap:10px}
.traitement-titre{font:400 24px/1.2 var(--didone);margin:0}
.deja{border-radius:16px;background:var(--perle);padding:16px 18px;box-shadow:0 0 0 1px var(--filet);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.deja b{font:400 20px/1.2 var(--didone)}
.guides{display:flex;flex-direction:column;gap:10px}
.aide{margin:18px 0 0}.aide .lien{font-size:inherit}
.guide{border-radius:18px;background:var(--perle);box-shadow:0 0 0 1px var(--filet);overflow:hidden}
.guide summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:16px 50px 16px 20px;position:relative}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:1.3px solid var(--bordeaux-doux);
  border-bottom:1.3px solid var(--bordeaux-doux);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.guide[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.guide summary b{font:400 22px/1.2 var(--didone)}
.guide summary span{font-size:14px;color:var(--bordeaux-doux)}
.guide-corps{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px}
.guide-corps ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.guide-corps p{margin:0}
.guide-corps strong{font-weight:500}
.note{font-size:14.5px;color:var(--bordeaux-doux);background:var(--poudre);border-radius:12px;padding:10px 14px}
.technique summary{cursor:pointer;font-size:13.5px;color:var(--bordeaux-doux)}
.technique p{font-size:13.5px;color:var(--bordeaux-doux);margin-top:6px}
textarea{width:100%;min-height:180px;resize:vertical;border:0;border-radius:14px;padding:14px 16px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet-fort);
  font:400 16px/1.5 var(--sans)}
textarea:focus,.champs input:focus,.champs select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--framboise)}
.champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.champs label,.champs fieldset{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--bordeaux-doux);min-width:0}
.champs input,.champs select{height:46px;border:0;border-radius:12px;padding:0 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet-fort);
  font:400 16px var(--sans);color:var(--bordeaux);min-width:0;width:100%}
.champs small{font-size:12.5px}
.champs.larges{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
/* Même rythme que « Pour qui ? » : étiquette, 5 px, champ de 46 px — les deux champs s'alignent en haut. */
.bloc-periode{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--bordeaux-doux);min-width:0}
.periode{display:flex;align-items:center;gap:8px;min-width:0}
.periode label{flex:1 1 0;min-width:0;display:block}
.periode select{width:100%}
@media (max-width:700px){.cartes{grid-template-columns:minmax(0,1fr)}.champs,.champs.larges{grid-template-columns:minmax(0,1fr)}
  .accueil-corps{margin-top:18px}.etapes{gap:10px;font-size:11.5px}.signature{font-size:36px}}
@media (max-width:460px){.etapes .long{display:none}}

/* ================= L'atelier ================= */
.app{display:grid;grid-template-columns:310px minmax(0,1fr);height:100vh;height:100dvh;background:var(--poudre)}
.cote{background:var(--perle);border-right:1px solid var(--filet);display:flex;flex-direction:column;min-height:0}
.marque{display:flex;align-items:baseline;gap:10px;padding:12px 20px 6px}
.marque .signature{font-size:36px}
.volume{display:flex;gap:14px;align-items:center;margin:4px 14px 8px;padding:12px;border-radius:14px;background:var(--poudre)}
.volume-texte{display:flex;flex-direction:column;min-width:0;font-size:13px;color:var(--bordeaux-doux);line-height:1.4}
.volume-texte b{font:400 18px/1.2 var(--didone);color:var(--bordeaux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.volume-texte a,.volume-texte button{color:var(--framboise);text-decoration:none;font-size:13px}
/* Petit livre : 1re de couverture, dos, tranche assortie (repris de la page d'accueil) */
.mini-livre{--c:#7A2E3E;--t:#F8E1E4;--tranche:#E8A1B4;position:relative;flex:none;width:44px;height:62px;
  transform:perspective(600px) rotateY(-24deg);transform-style:preserve-3d;margin:0 4px 0 2px}
.mini-livre .face{position:absolute;inset:0;background:var(--c);color:var(--t);border-radius:1px 3px 3px 1px;display:grid;place-items:center;
  box-shadow:inset 3px 0 5px -3px rgba(0,0,0,.3),0 8px 14px -8px rgba(74,29,42,.6);font:italic 400 13px/1 Cormorant,Georgia,serif}
.mini-livre .dos{position:absolute;top:0;left:0;width:7px;height:100%;background:color-mix(in srgb,var(--c) 78%,#000);transform-origin:left;transform:rotateY(90deg)}
.mini-livre .tranche{position:absolute;top:1px;right:0;width:6px;height:calc(100% - 2px);transform-origin:right;transform:rotateY(-90deg);background:var(--tranche)}
.compteur{margin:0 20px 10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--bordeaux-doux)}
.compteur.trop{color:#9B1C31}
.vues{display:flex;margin:0 14px 8px;padding:3px;border-radius:12px;background:var(--poudre);gap:2px}
.vues button{flex:1;height:32px;border-radius:9px;font-size:12.5px;color:var(--bordeaux-doux);white-space:nowrap;padding:0 4px}
.vues button[aria-pressed="true"]{background:var(--perle);color:var(--bordeaux);box-shadow:0 1px 2px rgba(74,29,42,.12),0 0 0 1px var(--filet)}
.vues span{color:var(--framboise);font-size:11.5px}
.cherche{margin:0 14px 6px;height:36px;border:0;border-radius:10px;padding:0 12px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet);font-size:15px}
.toc{overflow:auto;padding:0 8px 12px;flex:1;min-height:0;scrollbar-width:thin}
.toc h3{margin:14px 12px 4px;font:400 10.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--framboise)}
.toc .vide{padding:18px 14px;font-size:14px;color:var(--bordeaux-doux)}
.ligne{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;
  padding:8px 10px 9px;border-radius:10px;transition:background .12s;cursor:pointer}
.ligne:hover{background:var(--survol)}
.ligne[aria-current="true"]{background:var(--choisi)}
.ligne .st{margin-top:2px}
.ligne>span{min-width:0}
.ligne .t{display:block;font-size:14px;font-weight:400;color:var(--bordeaux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne .s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--bordeaux-doux);font-size:12px;line-height:1.5}
.ligne .act{opacity:0;align-self:center;font-size:11.5px;color:var(--bordeaux-doux);padding:3px 8px;border-radius:7px;background:var(--perle);
  box-shadow:0 0 0 1px var(--filet-fort);transition:opacity .12s}
.ligne:hover .act,.ligne:focus-within .act,.ligne[aria-current="true"] .act{opacity:1}
.ligne .act:hover{color:var(--framboise)}
.ligne.dehors .t{color:var(--bordeaux-doux)}
.ligne.dehors .act{opacity:1;color:var(--framboise);box-shadow:0 0 0 1px rgba(194,24,91,.4)}
.ligne .pg-n{color:var(--bordeaux-doux);font-size:11px;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:none){.ligne .act{opacity:1}}
.risque{display:inline-block;width:7px;height:7px;border-radius:4px;background:#E0782E}
.pastille{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:10px;font-size:11px;letter-spacing:.02em;
  background:rgba(194,24,91,.1);color:var(--framboise);transition:background .15s}
.pastille.travail{background:rgba(74,29,42,.08);color:var(--bordeaux)}
button.pastille:hover{background:rgba(194,24,91,.18)}
button.pastille.travail:hover{background:rgba(74,29,42,.15)}
.souvenir{letter-spacing:1px;color:var(--framboise);font-size:10px}
.cote-pied{border-top:1px solid var(--filet);padding:10px 20px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--bordeaux-doux)}
.cote-pied p{margin:0;display:flex;gap:7px;align-items:center}

.centre{display:grid;grid-template-rows:56px minmax(0,1fr) auto;min-width:0;min-height:0}
.barre{display:flex;align-items:center;gap:14px;padding:0 14px 0 20px;border-bottom:1px solid var(--filet);background:rgba(246,225,225,.92);min-width:0}
.icone{width:34px;height:34px;border-radius:9px;display:none;place-items:center;flex:none}
.icone:hover{background:var(--survol)}
.icone.montre{display:grid}
.fil{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;font-size:14px}
.fil span{color:var(--bordeaux-doux);flex:none;font-size:12.5px}
.fil b{font:400 17px/1.2 var(--didone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-pages{color:var(--bordeaux-doux);font-size:12.5px;font-variant-numeric:tabular-nums;flex:none}
.progres{display:flex;align-items:center;gap:8px;color:var(--bordeaux-doux);font-size:12.5px;flex:none}
.progres .jauge{width:64px}

.scene{position:relative;display:grid;place-items:center;overflow:hidden;min-height:0;
  background:radial-gradient(70% 70% at 50% 45%,#FBEDEC,var(--poudre) 70%)}
.nav{position:absolute;top:50%;translate:0 -50%;width:42px;height:66px;border-radius:12px;display:grid;place-items:center;color:var(--bordeaux-doux);z-index:2;
  transition:background .15s,color .15s,opacity .2s}
.nav:hover{background:rgba(74,29,42,.06);color:var(--bordeaux)}
.nav:disabled{opacity:0;pointer-events:none}
.nav.prec{left:10px}.nav.suiv{right:10px}
.vue{position:absolute;inset:0;overflow:auto;display:grid;overscroll-behavior:contain;scrollbar-width:thin}
.cadre{position:relative;margin:auto}
.scene.zoome .vue{cursor:grab}
.scene.zoome .vue.tire{cursor:grabbing;user-select:none}
.zoom{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;padding:3px;border-radius:999px;
  background:var(--perle);box-shadow:0 0 0 1px var(--filet),0 8px 18px -10px rgba(74,29,42,.45)}
.zoom button{height:32px;min-width:32px;border-radius:999px;display:grid;place-items:center;color:var(--bordeaux);transition:background .15s}
.zoom button:hover:not(:disabled){background:rgba(74,29,42,.07)}
.zoom button:disabled{opacity:.3;cursor:default}
.zoom .niveau{min-width:52px;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.planche{position:absolute;left:0;top:0;display:flex;transform-origin:0 0;transform:scale(var(--s,1));
  box-shadow:0 1px 1px rgba(74,29,42,.05),0 6px 12px -4px rgba(74,29,42,.1),0 34px 60px -24px rgba(74,29,42,.4);border-radius:2px}
.planche.seule{box-shadow:none}
.planche.seule .pg:not(.vide){box-shadow:0 1px 1px rgba(74,29,42,.05),0 6px 12px -4px rgba(74,29,42,.1),0 34px 60px -24px rgba(74,29,42,.4)}
.planche .pg.vide{visibility:hidden}
.planche .pg.gauche::after,.planche .pg.droite::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}
.planche .pg.gauche::after{right:0;background:linear-gradient(to left,rgba(74,29,42,.07),transparent)}
.planche .pg.droite::after{left:0;background:linear-gradient(to right,rgba(74,29,42,.06),transparent)}
.planche .pg.couv::after{display:none}
.planche .pg.couv{box-shadow:inset 4px 0 6px -4px rgba(0,0,0,.3)}
.composition{position:absolute;bottom:14px;left:50%;translate:-50% 0;margin:0;font-size:12.5px;color:var(--bordeaux-doux);background:var(--perle);
  padding:6px 12px;border-radius:999px;box-shadow:0 0 0 1px var(--filet)}

.dock{display:flex;align-items:center;gap:10px 12px;padding:10px 16px 12px 20px;border-top:1px solid var(--filet);background:var(--perle);flex-wrap:wrap;min-width:0;
  padding-bottom:max(12px,env(safe-area-inset-bottom));font-size:13.5px}
.dock .info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--bordeaux-doux);flex:1 1 260px;min-width:0}
.dock .info b{color:var(--bordeaux);font-weight:400}
.puce{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--poudre);color:var(--bordeaux);font-size:12.5px}
button.puce:hover{background:var(--the)}
.puce .croix{opacity:.6;font-size:14px;line-height:1}
.outil{height:34px;padding:0 13px;border-radius:10px;display:inline-flex;align-items:center;gap:7px;background:var(--perle);font-size:13px;
  box-shadow:0 0 0 1px var(--filet-fort);white-space:nowrap}
.outil:hover{background:#fff}
.outil[aria-pressed="true"]{color:var(--framboise);box-shadow:0 0 0 1.5px var(--framboise);background:#fff}
.outil:disabled{opacity:.45;cursor:default}
.outils-couv{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.outils-couv label{display:flex;align-items:center;gap:7px;color:var(--bordeaux-doux);font-size:13px;min-width:0}
.outils-couv input,.outils-couv select,.objet-champ input{height:34px;border:0;border-radius:10px;padding:0 10px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet-fort);
  font:400 14px var(--sans);color:var(--bordeaux);min-width:0}
.outils-couv input{width:130px}
.outils-couv select{max-width:240px}
.outils-couv input:focus,.outils-couv select:focus,.objet-champ input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--framboise)}
.teintes{display:flex;gap:6px}
.teintes button{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative}
.teintes button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--perle),0 0 0 3.5px var(--framboise)}
.objet-champ{display:flex;align-items:center;gap:7px;color:var(--bordeaux-doux);font-size:13px;min-width:0;flex:1 1 220px}
.objet-champ input{flex:1;min-width:0}
.echanges{position:absolute;right:16px;bottom:calc(100% + 8px);width:min(420px,calc(100vw - 32px));max-height:min(60vh,460px);overflow:auto;background:var(--perle);
  border-radius:16px;box-shadow:0 0 0 1px var(--filet),0 24px 50px -20px rgba(74,29,42,.45);padding:14px 16px;z-index:12}
.echanges h4{margin:0 0 4px;font:400 18px/1.2 var(--didone)}
.echanges p.discret{font-size:12.5px;margin-bottom:8px}
.echanges ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.echanges li{padding:10px 12px;border-radius:12px;background:var(--poudre);display:flex;flex-direction:column;gap:6px}
.echanges q{font-style:italic;color:#23395B;font-size:13.5px;quotes:"« " " »"}
.echanges .choix{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--bordeaux-doux)}
.echanges label{display:flex;gap:6px;align-items:center;cursor:pointer}
.echanges input{accent-color:var(--framboise);width:16px;height:16px;margin:0}
.dock-droite{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.relue[aria-pressed="true"]{background:var(--framboise);color:var(--perle);box-shadow:none}
.dock-wrap{position:relative;display:contents}
kbd{font:400 11px/1 var(--sans);color:var(--bordeaux-doux);background:#fff;border:1px solid var(--filet-fort);border-bottom-width:2px;border-radius:4px;padding:2px 5px}
.raccourcis{display:flex;gap:10px;color:var(--bordeaux-doux);font-size:11.5px}
.raccourcis span{display:inline-flex;gap:4px;align-items:center}

.panneau{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--perle);z-index:30;display:flex;flex-direction:column;
  box-shadow:-1px 0 0 var(--filet),-24px 0 60px -20px rgba(74,29,42,.35);animation:glisse .35s var(--ease)}
@keyframes glisse{from{translate:24px 0;opacity:0}}
.panneau-tete{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 14px 22px;border-bottom:1px solid var(--filet)}
.panneau-tete b{display:block;font:400 21px/1.2 var(--didone)}
.panneau-tete span{font-size:13px;color:var(--bordeaux-doux)}
.panneau-corps{overflow:auto;padding:18px 22px 28px;display:flex;flex-direction:column;gap:18px}
.panneau h4{margin:0 0 8px;font:400 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--framboise)}
.panneau p{margin:0;color:var(--bordeaux-doux);font-size:14.5px}
.verifs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
.verifs li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.pt{width:14px;height:14px;border-radius:7px;margin-top:4px;box-shadow:inset 0 0 0 1.5px var(--filet-fort)}
.pt.ok{background:var(--framboise);box-shadow:none}
.pt.non{background:#E0782E;box-shadow:none}
.panneau .bouton{width:100%}

.toast{position:fixed;left:50%;bottom:92px;translate:-50% 12px;opacity:0;pointer-events:none;background:var(--prune);color:var(--perle);
  font-size:13.5px;padding:10px 16px;border-radius:12px;transition:opacity .2s,translate .3s var(--ease);z-index:40;max-width:min(560px,92vw);
  display:flex;gap:14px;align-items:center}
.toast.on{opacity:1;translate:-50% 0;pointer-events:auto}
.toast button{color:#F6A9C4;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr)}
  .cote{position:fixed;inset:0 auto 0 0;width:min(340px,90vw);z-index:20;translate:-100% 0;transition:translate .35s var(--ease);
    box-shadow:0 20px 60px rgba(74,29,42,.3)}
  .app.ouvert .cote{translate:0 0}
  .app::after{content:"";position:fixed;inset:0;z-index:19;background:rgba(58,20,38,.28);opacity:0;pointer-events:none;transition:opacity .3s}
  .app.ouvert::after{opacity:1;pointer-events:auto}
  .icone{display:grid}
  .info-pages,.raccourcis{display:none}
}
@media (max-width:640px){
  .barre{gap:8px;padding:0 10px}
  .fil span,.progres .jauge{display:none}
  /* Mobile : flèches toujours visibles, en bas à gauche (le zoom est en bas à droite) ; indispensables une fois zoomé. */
  .nav{top:auto;bottom:10px;translate:none;width:44px;height:44px;border-radius:999px;background:var(--perle);color:var(--bordeaux);
    box-shadow:0 0 0 1px var(--filet),0 8px 18px -10px rgba(74,29,42,.45);z-index:3}
  .nav.prec{left:10px}.nav.suiv{left:60px;right:auto}
  .nav:disabled{opacity:.3}
  .zoom{right:10px;bottom:10px}
  .dock{padding:10px 12px;gap:8px}
  .dock .info{flex-basis:100%}
  .dock-droite{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:2px}
  .dock-droite::-webkit-scrollbar{display:none}
  .dock-droite>*{flex:none}
  .objet-champ{flex-basis:100%}
  .outils-couv input{width:110px}
  .toast{bottom:120px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Prix livré de chaque formule (paliers du Worker : 29 / 35 / 39 €) */
.carte .prix-formule{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--filet);font-family:"Bodoni Moda",Georgia,serif;font-size:17px;color:var(--framboise)}