:root{--encre:#101418;--gris:#f3f4f6;--bleu:#1570ef;--vert:#22c55e;--bord:#e3e6ea;--cyan:#22b8cf}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--encre);background:#fff;display:flex;flex-direction:column}
header{background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:16px}
header .marque{font-weight:800;letter-spacing:.02em}
header .prix{display:flex;align-items:center;gap:14px}
header .prix b{font-size:22px;color:var(--vert)}
header .prix small{display:block;font-size:11px;opacity:.7;font-weight:400;text-align:right}
main{flex:1;display:flex;min-height:0}
.scene{flex:1;position:relative;overflow:hidden;
  background-image:linear-gradient(45deg,#d8dbdf 25%,transparent 25%),linear-gradient(-45deg,#d8dbdf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dbdf 75%),linear-gradient(-45deg,transparent 75%,#d8dbdf 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;background-color:#eceef0}
.scene canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.outils{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:3}
.outils button{width:42px;height:42px;border:0;background:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#3d454d}
/* TOUTES LES ICONES A LA MEME TAILLE. Elles partagent la meme boite (viewBox
   0 0 24 24) mais etaient rendues a 20, 21 ou 24 px selon l'outil : la baguette
   paraissait plus grosse et la corbeille plus petite (signale par l'utilisateur).
   On fixe la taille ici, ce qui vaut aussi pour les icones a venir. */
.outils button svg{width:22px;height:22px;flex:none;display:block}
.outils button:hover{background:var(--gris);color:var(--encre)}
.outils button:disabled{opacity:.3;cursor:default}
.outils hr{border:0;border-top:1px solid var(--bord);margin:4px 6px}
.regle{position:absolute;color:#0f8fa3;font-size:12px;font-weight:600;z-index:2;pointer-events:none}
.regle .trait{position:absolute;background:var(--cyan)}
.regle span{position:absolute;background:var(--cyan);color:#fff;padding:2px 8px;border-radius:4px;white-space:nowrap}
.depot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:4}
.depot .boite{background:#fff;border:2px dashed #b9c2cb;border-radius:14px;padding:38px 46px;text-align:center;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.depot h2{margin:0 0 6px;font-size:19px}
.depot p{margin:0 0 16px;color:#5a636c;font-size:13px}
.depot input{display:none}
.depot label{display:inline-block;background:var(--bleu);color:#fff;padding:11px 22px;border-radius:7px;font-weight:600;cursor:pointer}
.droite{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;z-index:3}
.btn-ia{background:var(--vert);color:#fff;border:0;border-radius:9px;padding:14px 22px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.reduction{background:#fff;border-radius:9px;padding:9px 14px;box-shadow:0 2px 10px rgba(0,0,0,.1);font-size:13px}
.reduction b{font-size:16px}
/* Cartouche blanc : sur le damier de transparence, le texte et le trait orange
   se lisaient mal. Meme pastille que les puces d'information (.reduction). */
.legende{position:absolute;left:14px;bottom:12px;font-size:12px;color:#3d454d;display:flex;align-items:center;gap:8px;z-index:2;
  background:#fff;padding:7px 12px;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
/* le halo blanc du trait ne sert plus a rien sur fond blanc, il le doublait */
.legende i{display:block;width:26px;border-top:1px solid #f97316;box-shadow:none}
.panier{position:absolute;right:14px;bottom:14px;display:flex;align-items:stretch;border-radius:9px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.16);z-index:3}
.panier .p{background:#fff;display:flex;align-items:center;gap:10px;padding:0 18px;font-size:19px;font-weight:700}
.panier .p s{color:#d64545;font-weight:400;font-size:15px}
.panier button{background:var(--vert);color:#fff;border:0;padding:16px 26px;font-size:16px;font-weight:700;cursor:pointer}
footer{background:#fff;border-top:1px solid var(--bord);display:flex;align-items:center;flex-wrap:wrap;gap:0}
.ch{padding:10px 18px;border-right:1px solid var(--bord);min-width:104px}
.ch label{display:block;font-size:12px;color:#5a636c;margin-bottom:3px;line-height:1.3}
/* « marge » TIENT SUR UNE SEULE LIGNE, comme « largeur » et « taille ».
   Avant, son libelle (« marge -6,0 mm — coupe dans le visuel (limite
   atteinte) ») passait sur deux lignes selon la largeur de la fenetre : on
   reservait donc 34 px en permanence pour que la barre ne saute pas, mais ce
   bloc restait plus haut que les autres et c'est lui qui fixait la hauteur de
   toute la barre du bas. Le libelle a ete raccourci (« -6,0 mm · entame le
   visuel · butée ») et on garde `nowrap` comme garantie : si une traduction ou
   une fenetre etroite le debordait un jour, il serait coupe, pas replie. */
.ch[data-o="frontiere"] label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .v{display:flex;align-items:center;gap:5px}
.ch input[type=number]{width:62px;border:0;font-size:17px;font-weight:600;padding:2px 0;color:var(--encre)}
.ch input:focus{outline:0}
.ch .u{color:#5a636c;font-size:13px}
.ch.large{flex:1;min-width:240px;border-right:1px solid var(--bord)}
/* LA BARRE DE MARGE GARDE UNE LARGEUR FIXE. Son bloc, lui, reste souple : avec
   `quantite`, c'est lui qui absorbe la variation de longueur des libelles
   voisins, et la barre du bas est pile pleine a 1440 px — la figer faisait
   passer le dernier groupe a la ligne. 200 px tiennent meme quand le bloc est
   a son minimum (240 px moins 36 px de marge interieure), donc a toute largeur
   de fenetre. Avant, la barre s'etirait et se retrecissait toute seule —
   signale par l'utilisateur. */
@media (min-width:821px){
  .ch[data-o="frontiere"] .piste{width:200px;max-width:100%}
  /* LA BARRE DU BAS RESTE SUR UNE SEULE LIGNE. Elle est pile pleine a 1440 px,
     donc elle se repliait des qu'on retrecissait la fenetre. On interdit le
     repli et on laisse les blocs se comprimer : les libelles passent en points
     de suspension plutot que de forcer la largeur. */
  footer{flex-wrap:nowrap;overflow-x:auto}
  footer > .ch, footer > .ch-groupe{min-width:0}
  footer > .ch-groupe > .ch{min-width:0}
  .ch label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch[data-o="quantite"]{min-width:0}
  .ch[data-o="taille"] input[type=range], .ch-groupe[data-o="taille"] input[type=range]{width:100%;min-width:72px}
}

.ch-groupe{display:flex}
.ch.large input[type=range]{width:100%;accent-color:var(--cyan)}
.ch .choix{display:flex;gap:6px}
.ch .choix button{border:1px solid var(--bord);background:#fff;border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}
.ch .choix button[aria-pressed=true]{border-color:var(--bleu);background:#eaf2fe;color:var(--bleu);font-weight:600}


[hidden]{display:none!important}

.pinceau{position:absolute;border:2px solid #d64545;border-radius:50%;pointer-events:none;z-index:5;
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(255,255,255,.9);transform:translate(-50%,-50%)}
/* DEUX RONDS, demande de l'utilisateur : le grand donne la GROSSEUR de l'outil,
   le petit marque le point exact que touche le centre. Le petit garde la meme
   taille quelle que soit celle du pinceau, sinon il ne sert plus a viser. */
.pinceau::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#d64545;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.95)}
@media (max-width:820px){ .pinceau::after{width:7px;height:7px;margin:-3.5px 0 0 -3.5px} }
.aide-gomme{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#101418;color:#fff;
  padding:8px 16px;border-radius:7px;font-size:13px;z-index:5}
/* OUTIL ACTIF : fuchsia pastel. Le rouge pale d'avant ne se voyait pas, et il
   ne disait rien — le meme rouge sert deja a la gomme et au pinceau. Les
   trois outils qui touchent au masque partagent desormais ce fond. */
#oGomme[aria-pressed=true], #oRepare[aria-pressed=true], #oBaguette[aria-pressed=true]{background:#fbdcef}
.scene.gommant canvas{cursor:none}

.poignee{position:absolute;z-index:6;transform:translateX(-50%);cursor:grab;touch-action:none;
  width:44px;height:52px;display:flex;flex-direction:column;align-items:center}
.poignee:active{cursor:grabbing}
.poignee .rond{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #1570ef;
  box-shadow:0 1px 5px rgba(0,0,0,.2);order:1}
.poignee .tige{width:2px;flex:1;background:#1570ef;order:2}
.poignee .deg{order:0;font-size:11px;font-weight:700;color:#1570ef;background:#fff;border-radius:4px;
  padding:1px 5px;margin-bottom:2px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.scene canvas{cursor:grab;touch-action:none}
.scene.deplacant canvas{cursor:grabbing}
.scene.gommant canvas{cursor:none}

/* iOS S'EMPARE DU GESTE — relevé image par image sur la vidéo de l'utilisateur
   (21:29, de 2,0 s a 3,2 s) : la poignee noircit bien au contact, puis une
   COPIE GRISE s'en detache (glisser-deposer natif du systeme), une LOUPE ovale
   s'ouvre par-dessus le visuel, et la page ne recoit plus aucun `pointermove` —
   la poignee reste sur place quoi que fasse le doigt.
   `touch-action:none` n'y pouvait rien : il n'empeche que le defilement.
   Il faut couper les trois comportements natifs du long appui. Borne au
   tactile : un ordinateur a la souris (`pointer: fine`, largeur > 820) n'est
   jamais concerne. */
@media (max-width:820px), (pointer: coarse){
  /* TOUTE LA SCENE, BOUTONS COMPRIS. J'avais resserre cette regle sur la toile
     et les poignees en croyant qu'elle empechait le clic des boutons — c'etait
     faux : le bouton ne repondait pas parce qu'il SE DEPLACAIT sous le doigt
     (voir le correctif de la puce). Retire des boutons, elle laissait iOS
     demarrer une selection de texte dessus : « c'est comme s'il y avait du
     texte, une zone de copie s'amorce et du coup c'est dur de cliquer ».
     `user-select:none` n'a jamais bloque un clic — c'est au contraire ce qui
     empeche le systeme de confondre un appui avec une selection. */
  .scene, .scene *{
    -webkit-touch-callout:none;-webkit-user-select:none;
    user-select:none;-webkit-user-drag:none}
}

.prises{position:absolute;inset:0;pointer-events:none;z-index:4}
.prises i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;background:#fff;
  border:2px solid #1570ef;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:auto;
  touch-action:none}
.prises i[data-p=nw],.prises i[data-p=se]{cursor:nwse-resize}
.prises i[data-p=ne],.prises i[data-p=sw]{cursor:nesw-resize}
.prises i[data-p=n],.prises i[data-p=s]{cursor:ns-resize;border-radius:6px;width:16px;height:10px;margin:-5px 0 0 -8px}
.prises i[data-p=w],.prises i[data-p=e]{cursor:ew-resize;border-radius:6px;width:10px;height:16px;margin:-8px 0 0 -5px}

.prises i.ramenee{opacity:.7;border-style:dashed}

.piste{position:relative;padding-top:2px}
.piste input[type=range]{position:relative;z-index:2}
.zone-morte{position:absolute;left:0;top:50%;height:6px;margin-top:-2px;border-radius:3px;z-index:1;
  background:repeating-linear-gradient(45deg,#f3c9c9,#f3c9c9 4px,#fbe3e3 4px,#fbe3e3 8px)}
.butee{position:absolute;top:50%;width:11px;height:11px;margin:-4px 0 0 -5px;border-radius:50%;
  background:#d64545;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3);z-index:3;pointer-events:auto}

.qualite{display:flex;align-items:center;gap:8px;white-space:nowrap}
.pastille{display:inline-block;width:13px;height:13px;border-radius:3px;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.pastille.bonne{background:#22c55e}
.pastille.moyenne{background:#e0a020}
.pastille.mauvaise{background:#d64545}

.histo{position:absolute;left:14px;top:14px;z-index:4;background:#fff;border-radius:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.14);padding:5px;display:flex;gap:2px}
.histo button{width:38px;height:38px;border:0;background:none;border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#3d454d}
.histo button:hover:not(:disabled){background:var(--gris);color:var(--encre)}
.histo button:disabled{opacity:.28;cursor:default}
.alerte{display:flex;gap:8px;max-width:330px;white-space:normal;line-height:1.4;align-items:flex-start}
.alerte .pastille{margin-top:2px}

.btn-detour{border:1px solid var(--bord);background:#fff;color:var(--encre);border-radius:9px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.btn-detour[aria-pressed=false]{background:var(--encre);color:#fff;border-color:var(--encre)}

@media (min-width: 821px) { .onglets { display: none } }

/* ============================ Téléphone ============================ */
@media (max-width: 820px) {
  header{padding:8px 12px}
  header .marque{font-size:14px}
  header .prix b{font-size:18px}

  /* les outils passent en barre horizontale, en bas de la scène */
  .outils{left:0;right:0;top:auto;bottom:8px;transform:none;flex-direction:row;
    justify-content:center;margin:0 8px;border-radius:12px;padding:4px;gap:0;overflow-x:auto}
  .outils hr{border:0;border-left:1px solid var(--bord);border-top:0;margin:6px 2px;width:0}
  .outils button{width:40px;height:40px;flex:none}

  .histo{left:8px;top:8px;padding:3px}
  .histo button{width:34px;height:34px}

  .droite{right:8px;top:8px;left:52px;align-items:stretch;gap:5px}
  .btn-ia{padding:10px 12px;font-size:14px}
  .btn-detour{padding:8px 12px;font-size:13px}
  .reduction{padding:7px 10px;font-size:12px}
  .alerte{max-width:none}

  .legende{display:none}
  .panier{left:8px;right:8px;bottom:56px;justify-content:space-between}
  .panier .p{padding:0 12px;font-size:17px}
  .panier button{padding:14px 18px;font-size:15px}

  /* barre du bas : un onglet à la fois */
  footer{flex-direction:column;align-items:stretch}
  .onglets{display:flex;overflow-x:auto;border-bottom:1px solid var(--bord)}
  .onglets button{flex:1 0 auto;border:0;background:none;padding:11px 14px;font-size:13px;
    color:#5a636c;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
  .onglets button[aria-selected=true]{color:var(--bleu);font-weight:600;border-bottom-color:var(--bleu)}
  .ch{border-right:0;border-bottom:0;padding:10px 16px;min-width:0;flex:none}
  /* largeur et hauteur cote a cote, pas l'une sous l'autre */
  .ch-groupe{display:flex;gap:0}
  .ch-groupe .ch{flex:1 1 50%}
  .ch-groupe .ch:first-child{border-right:1px solid var(--bord)}
  .ch-groupe .ch input[type=number]{width:100%}
  footer > .ch:not(.actif), footer > .ch-groupe:not(.actif){display:none}
  .ch.large{min-width:0}
  .ch .v{gap:10px}
  .ch input[type=number]{width:90px;font-size:19px}

  /* La legende d'une puce s'affiche SOUS la rangee, en une phrase, au lieu
     d'elargir le bouton : sans cela la rangee passe a la ligne et le bouton
     se derobe sous le doigt. */
  .legende-bas{position:absolute;left:8px;right:8px;z-index:6;
    background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.16);
    padding:8px 12px;font-size:12.5px;line-height:1.35;color:#3d454d;text-align:center}

  /* poignées plus grosses au doigt */
  .prises i{width:18px;height:18px;margin:-9px 0 0 -9px}
  /* ZONE DE PRISE ELARGIE DE 9 px TOUT AUTOUR, invisible : la poignee garde
     ses 18 px a l'oeil mais se laisse attraper sur 36 px. Au doigt, viser un
     carre de 18 px dont le doigt lui-meme masque le centre, c'est la premiere
     raison pour laquelle « on prend la poignee et rien ne se passe ». */
  .prises i::after{content:'';position:absolute;inset:-9px}
  /* TEMOIN D'ACCROCHE, demande par l'utilisateur : la poignee NOIRCIT tant
     qu'elle est tenue, et redevient blanche des qu'on lache. S'il la touche et
     qu'elle reste blanche, c'est que le doigt n'a pas atteint la poignee. */
  .prises i.tenue{background:#101418;border-color:#101418;
    box-shadow:0 0 0 3px rgba(21,112,239,.35);transform:scale(1.25)}
  .prises i[data-p=n],.prises i[data-p=s]{width:24px;height:16px;margin:-8px 0 0 -12px}
  .prises i[data-p=w],.prises i[data-p=e]{width:16px;height:24px;margin:-12px 0 0 -8px}
  .poignee .rond{width:26px;height:26px}
  .aide-gomme{left:8px;right:8px;transform:none;font-size:12px;text-align:center}
}

.pinceau-taille{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:6;
  background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.16);padding:9px 14px;
  display:flex;align-items:center;gap:10px;font-size:13px;color:#3d454d}
.pinceau-taille input{width:150px;accent-color:#d64545}
@media (max-width:820px){.pinceau-taille{left:8px;right:8px;transform:none;bottom:108px;justify-content:center}}

/* au doigt, le cercle est sous la main : on l'epaissit pour qu'il deborde */
.pinceau.doigt{border-width:3px;border-color:#d64545;
  box-shadow:0 0 0 2px rgba(255,255,255,.95) inset,0 0 0 2px rgba(255,255,255,.95),0 2px 8px rgba(0,0,0,.25)}
@media (max-width:820px){
  .pinceau{border-width:3px}
  .aide-gomme{bottom:auto;top:auto}
}

/* ---- puces : l'information nue, la legende seulement a l'appui ---- */
.puce{display:inline-flex;align-items:center;gap:7px;border:0;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.puce .legende-txt{white-space:nowrap}
.btn-ia.puce .sigle{font-weight:800;letter-spacing:.04em}
/* Detourage IA en cours d'effet : le bouton devient GRIS et une barre ROUGE le
   traverse DE PART EN PART. Il ne lance plus rien, il annule.
   `.puce` dans le selecteur : sans cela la regle verte du bloc telephone,
   ecrite plus bas a specificite egale, l'emporterait. */
.btn-ia.ia-actif, .btn-ia.puce.ia-actif{position:relative;overflow:hidden;
  background:#6b7280;box-shadow:0 2px 10px rgba(0,0,0,.12)}
/* d'un COIN A L'AUTRE : du coin haut droit au coin bas gauche, donc 45 deg,
   et assez longue pour couvrir la diagonale (le debord est rogne par
   `overflow:hidden`). */
.btn-ia.ia-actif::after{content:'';position:absolute;left:-32%;right:-32%;top:50%;height:2.5px;
  margin-top:-1.25px;background:#e23b3b;transform:rotate(-45deg);pointer-events:none}
.btn-detour .ico .cadre{display:none}
.btn-detour[aria-pressed=false] .ico .cadre{display:inline}
header .prix.puce{background:none;color:inherit;padding:0}
header .prix.puce .legende-txt{color:#8b939b;text-decoration:line-through;font-size:13px;font-weight:400}

@media (max-width:820px){
  /* on ne montre que l'essentiel ; la legende se deplie a l'appui et se
     retracte des qu'on leve le doigt */
  .puce .legende-txt{display:none}
  .puce.ouvert .legende-txt{display:inline}
  .droite{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;
    left:auto;right:8px;top:8px;gap:6px}
  .droite .puce{padding:8px 11px;border-radius:9px;background:#fff;color:var(--encre);
    box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:13px}
  .btn-ia.puce{background:var(--vert);color:#fff}
  .btn-detour.puce{background:#fff;color:var(--encre);border:1px solid var(--bord)}
  .btn-detour.puce[aria-pressed=false]{background:var(--encre);color:#fff;border-color:var(--encre)}
  .qualite.puce b,.reduction.puce b{font-size:14px}
  header .prix.puce b{font-size:17px}
  header .prix.puce small{font-size:10px}
}

/* bouton d'impression : icone blanche sur carre vert */
.panier button{display:inline-flex;align-items:center;gap:9px}
.panier button .ico{flex:none}
@media (max-width:820px){
  .panier button{width:56px;height:56px;padding:0;justify-content:center;border-radius:0}
  .panier button.ouvert{width:auto;padding:0 18px}
  .panier .p{flex:1;justify-content:center}
}

.panier .p{gap:10px;color:var(--encre)}   /* sinon la regle .panier button le passe en blanc */
.panier .p .ico{flex:none;color:#3d454d}
.panier .p .legende-txt{display:flex;align-items:center;gap:10px}
@media (max-width:820px){
  /* priorite suffisante pour l'emporter sur .panier .p .legende-txt */
  .panier .p:not(.ouvert) .legende-txt{display:none}
  .panier .p{flex:none;width:56px;padding:0;justify-content:center}
  .panier .p.ouvert{flex:1;width:auto;padding:0 14px;font-size:17px}
}

/* ---- téléphone : tout est en haut, à la même hauteur ---- */
@media (max-width:820px){
  .panier{display:none}                 /* le prix est deja dans l'en-tete */

  .droite{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;
    left:auto;right:8px;top:8px;gap:7px}
  .droite .puce{height:46px;min-width:46px;padding:0 13px;justify-content:center;
    border-radius:12px;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .droite .puce .ico{width:22px;height:22px}

  #btnFichier{order:1;background:var(--vert);color:#fff;border:0}
  #btnIA{order:2}
  #btnDetour{order:3}
  #reduction{order:4}
  #qualite{order:5}
  #alerte{order:6}
  #eff-trait{order:7} #eff-journal{order:8} #eff-bayer{order:9} #eff-diffusion{order:10}

  /* icone seule : carre parfait */
  #btnFichier:not(.ouvert),#btnDetour:not(.ouvert),#qualite:not(.ouvert){width:46px;padding:0}
  /* « Commander » : bouton vert LARGE, juste au-dessus de la barre d'outils.
     Les outils sont a `bottom:8px` et mesurent 52 px, d'ou les 68 px. */
  .scene > #btnFichier, .scene > #btnFichier:not(.ouvert){
    position:absolute;left:8px;right:8px;bottom:68px;z-index:5;width:auto;
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:7px 16px;background:var(--vert);color:#fff;border:0;border-radius:10px;
    font-size:15px;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.18)}
  .scene > #btnFichier .legende-txt{display:flex;white-space:nowrap}

  .histo{padding:4px;border-radius:12px}
  .histo button{width:38px;height:38px}
}

/* miroir vertical : le trapeze plein indique le sens du retournement */
#oMiroirV .haut{fill:currentColor;stroke:none}
#oMiroirV .bas{fill:none;stroke:currentColor;stroke-width:1.7}
#oMiroirV[aria-pressed=true] .haut{fill:none;stroke:currentColor;stroke-width:1.7}
#oMiroirV[aria-pressed=true] .bas{fill:currentColor;stroke:none}

/* miroir horizontal : meme principe, le trapeze plein donne le sens */
#oMiroirH .gauche{fill:currentColor;stroke:none}
#oMiroirH .droite{fill:none;stroke:currentColor;stroke-width:1.7}
#oMiroirH[aria-pressed=true] .gauche{fill:none;stroke:currentColor;stroke-width:1.7}
#oMiroirH[aria-pressed=true] .droite{fill:currentColor;stroke:none}

/* quantité : curseur, comme la frontière */
.ch[data-o=quantite]{flex:0 1 210px;min-width:170px}
.ch[data-o=quantite] input[type=range]{width:100%;accent-color:var(--bleu)}
@media (max-width:820px){ .ch[data-o=quantite]{flex:none;min-width:0} }

.ch[data-o=forme] input[type=range],.ch-groupe[data-o=forme] input[type=range]{width:110px;accent-color:var(--bleu)}
#cContourCouleur{width:34px;height:26px;border:1px solid var(--bord);border-radius:6px;padding:0;background:none}
@media (max-width:820px){
  .ch-groupe[data-o=forme] input[type=range]{width:100%}
  .ch-groupe[data-o=forme] .v{gap:12px}
}


/* poignée de rotation sous le sticker : la tige monte vers lui */
.poignee .tige{order:0}
.poignee .rond{order:1}
.poignee .deg{order:2;margin:2px 0 0}

@media (max-width:820px){
  /* l'historique REJOINT la rangee (centrerRangee() le deplace dans .droite) :
     un seul groupe, ecart unique de 8 px, et l'ensemble est centre par le
     padding-left que pose centrerRangee(). On reste en flex-start pour qu'une
     legende qui s'ouvre pousse toujours vers la DROITE seulement. */
  .droite{left:8px;right:8px;justify-content:flex-start;gap:8px}
  .droite > .histo{position:static;left:auto;top:auto;flex:none;
    padding:4px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  /* le sigle tient dans le carré : icône resserrée, ecart minimal */
  .btn-ia.puce{gap:3px;padding:0 9px}
  .btn-ia.puce .ico{width:15px;height:15px}
  .btn-ia.puce .sigle{font-size:12px}
  .btn-ia.puce:not(.ouvert){width:46px;padding:0}
}

/* ---- voile d'attente pendant la fabrication de la maquette ---- */
#attente{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(16,20,24,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:24px}
#attente[hidden]{display:none!important}
#attente .boite{background:#fff;border-radius:14px;padding:28px 32px;max-width:340px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.32)}
#attente .rouet{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
  border:4px solid #e3e6ea;border-top-color:#1570ef;animation:sm-tourne .9s linear infinite}
#attente .t{margin:0 0 6px;font-weight:700;font-size:16px;color:#101418}
#attente .s{margin:0;font-size:13px;line-height:1.5;color:#5b636c}
@keyframes sm-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#attente .rouet{animation-duration:2.4s}}

/* ---- rangee du haut a gauche (ORDINATEUR) ----
   historique, fond detoure/conserve, qualite de l'image et visuel reduit sur
   une seule ligne. Chaque element garde sa propre pastille blanche : on ne les
   imbrique pas dans celle de l'historique, deux cartes l'une dans l'autre se
   voient. La largeur est bornee pour ne jamais venir sous le bouton IA, qui
   reste en haut a droite ; au-dela, la rangee passe a la ligne.
   Sous 821 px : rien ne change, tout repart dans .droite (cf. placerImpression). */
/* ALIGNEMENT EN HAUT, et c'est volontaire : l'alerte de securite fait 86 px
   quand les autres puces en font 48. Avec `align-items:center`, son apparition
   recentrait toute la ligne et descendait les quatre autres puces de 19 px —
   c'est ce que l'utilisateur voit bouger. Cale en haut, rien ne se deplace. */
.rangee-g{position:absolute;left:14px;top:14px;z-index:4;display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:10px;max-width:calc(100% - 215px)}
.rangee-g > .histo{position:static;left:auto;top:auto}
/* l'alerte de securite est le seul element multiligne : elle se cale en haut
   comme ses voisines et grandit vers le bas, sans rien pousser. */
.rangee-g > .alerte{align-self:flex-start;max-width:330px;text-align:left}
/* saut de ligne dans la rangee : l'alerte de finesse descend sous l'historique */
.rangee-g > .saut{flex:0 0 100%;height:0;margin:0;padding:0}
.rangee-g > .saut + .alerte{margin-top:10px;align-items:flex-start}
.rangee-g > .saut + .alerte .pastille{margin-top:3px}
/* `.puce .legende-txt{white-space:nowrap}` empeche le texte de l'alerte de
   revenir a la ligne : il deborderait de sa pastille. Ici seulement, on autorise
   le retour a la ligne. */
.rangee-g > .alerte .legende-txt{white-space:normal}
@media (max-width:820px){ .rangee-g{display:none} }

/* ---- baguette magique ----
   le bloc de tolerance reprend la pastille de la taille de pinceau (classe
   .pinceau-taille), il herite donc aussi de son placement sur telephone. */
#baguetteTol b{min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
.scene.baguette canvas{cursor:crosshair}

/* Le bandeau d'aide etait a `top:14px`, c'est-a-dire SOUS la nouvelle rangee du
   haut, qu'il recouvrait. Sur ordinateur il passe en bas, juste au-dessus du
   curseur de tolerance (`.pinceau-taille` est a bottom:64px). Le telephone, lui,
   garde exactement son placement d'avant. */
@media (min-width:821px){ .aide-gomme{top:auto;bottom:116px} }

/* PINCEAU « RESTAURER » : meme cercle que la gomme, meme rouge (c'est la
   couleur de son icone), mais en POINTILLE. Il faut pouvoir dire d'un coup
   d'oeil, au milieu d'un trait, si on est en train d'enlever ou de remettre. */
.pinceau.repare{border-style:dashed}

/* CADENAS sur la regle du haut : il fige la TAILLE et la POSITION du visuel.
   La regle entiere est en `pointer-events:none` (elle ne doit jamais voler un
   clic au dessin) — le bouton, lui, les reprend. */
.cadenas{width:26px;height:26px;padding:0;border:0;
  display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;
  background:#fff;color:var(--cyan);box-shadow:0 1px 5px rgba(0,0,0,.18);pointer-events:auto}
.cadenas .ferme{display:none}
.cadenas[aria-pressed="true"]{background:var(--encre);color:#fff}
.cadenas[aria-pressed="true"] .ouvert{display:none}
.cadenas[aria-pressed="true"] .ferme{display:block}
.regle .cadenas{position:absolute;left:0;top:-1px}
/* SUR ORDINATEUR LE CADENAS EST EN BAS, sous la colonne d'outils : en haut de
   la regle il etait colle aux autres icones (demande de l'utilisateur). */
/* a gauche il tombait DERRIERE la colonne d'outils, dont la hauteur suit la
   fenetre (vu en capture) : on le pose a droite de la legende « ligne de coupe »,
   ou la place est libre quelle que soit la taille de l'ecran. */
.scene > .cadenas:not(.zoom-cadenas){position:absolute;left:262px;bottom:16px;top:auto;z-index:6}

/* Cadenas FIXE : il remplace celui de la regle des que la loupe est engagee —
   la regle suit la toile agrandie et passerait sous la rangee du haut, le
   cadenas y deviendrait inattrapable. */
.scene > .zoom-cadenas{position:absolute;left:14px;top:14px;z-index:6;
  background:var(--encre);color:#fff}
@media (max-width:820px){ .scene > .zoom-cadenas{left:8px;top:70px;bottom:auto} }
/* sur ordinateur le cadenas du bas ne disparait jamais : le fixe est inutile */
@media (min-width:821px){ .scene > .zoom-cadenas{display:none!important} }

/* « Commander » : le picto d'imprimante est retire, seul le mot reste. */
.scene > #btnFichier .ico{display:none}

/* Pas de pincement ni de double-appui du NAVIGATEUR sur l'editeur : deux doigts
   sont a nous. `pan-y` laisse le defilement vertical, qui ne sert presque pas
   ici mais qu'on ne coupe pas pour rien. (Cette feuille n'est chargee que sur
   l'editeur : le panier et la commande gardent le zoom.) */
html, body{touch-action:pan-y}

/* Largeur et taille : des curseurs, comme la marge. Le chiffre passe dans le
   libelle, donc la rangee garde sa place et sa hauteur.
   `min-width:0` est INDISPENSABLE : un `input[type=range]` a une largeur
   minimale propre (~129 px chez Chrome) que `width:100%` ne defait pas. Sans
   lui, les deux blocs s'elargissaient, la barre du bas passait sur DEUX lignes
   et le dessin perdait 66 px de hauteur. */
.ch-groupe[data-o="taille"] input[type=range]{width:100%;min-width:0;accent-color:var(--cyan);margin:2px 0 0}
.ch-groupe[data-o="taille"] .ch{min-width:104px}
/* Sur ORDINATEUR, on fixe la largeur des deux blocs : sans cela le curseur
   impose sa largeur propre, le groupe passe de 245 a 332 px, « forme » bascule
   a la ligne et la barre du bas double de hauteur (84 -> 150 px). */
@media (min-width:821px){
  .ch-groupe[data-o="taille"] .ch{width:140px;min-width:0}
  .ch-groupe[data-o="taille"] label{white-space:nowrap}
}

/* Deux lignes grises au-dessus du cadenas : sans elles, personne ne devine que
   c'est lui qui ouvre le zoom. Elles disparaissent une fois le cadenas fermé —
   le geste est alors connu. Telephone seulement : il n'y a pas de loupe ailleurs. */
/* Elle vit dans la SCENE, sur la ligne de la rangee du haut, dans les 71 px
   laisses libres a sa droite (mesure a 390 px : la rangee occupe 71..319).
   Elle etait sous la regle : trop bas, et elle suivait le sticker. */
.scene > .cadenas-aide{position:absolute;right:6px;top:14px;
  font-size:10px;line-height:1.3;font-weight:500;color:#8a929a;text-align:right;
  white-space:nowrap;pointer-events:none;z-index:4}
.scene > .cadenas-aide svg{vertical-align:-1px}
.scene > .cadenas-aide{display:block}
.scene.verrouille > .cadenas-aide{display:none}

/* QUALITE : un gant blanc, pouce en l'air quand l'impression sera nette, pouce
   en bas quand elle ne le sera pas. La pastille de couleur seule ne disait rien
   a qui ne connait pas le code vert/orange/rouge. Le fond garde la nuance :
   vert au-dessus de 250 dpi, orange entre 150 et 250, rouge en dessous. */
#qualite .pastille{width:19px;height:19px;border-radius:5px;display:inline-flex;
  align-items:center;justify-content:center;padding:0}
#qualite .pastille .pouce{display:none}
#qualite .pastille.bonne .haut,
#qualite .pastille.moyenne .haut{display:block}
#qualite .pastille.mauvaise .bas{display:block}

/* Cadenas FERME : on dit le geste, juste sous lui. Elle ne s'affiche que dans
   cet etat — avant, c'est l'autre rappel (« Fermez / pour zoomer ») qui parle,
   et des que la loupe est engagee la regle disparait, donc celle-ci aussi. */
.scene > .zoom-aide{display:none;position:absolute;white-space:nowrap;transform:translateX(-50%);
  font-size:11px;line-height:1.2;font-weight:500;color:#8a929a;pointer-events:none;z-index:4}
.scene.verrouille > .zoom-aide{display:block}
.scene.zoome > .zoom-aide{display:none}

/* LE CADENAS EXISTE AUSSI SUR ORDINATEUR depuis le 2026-10-15 : il y ouvre la
   loupe (molette pour zoomer, Maj + glisser pour promener la vue), ce qui permet
   de gommer et de combler au detail pres. Il etait reserve au telephone jusque-la. */
@media (min-width:821px){
  .scene > .zoom-cadenas{left:14px;top:72px}
  /* a droite, le rappel passait derriere le bouton « Detourage IA » (vu en
     capture) : sur ordinateur on le pose a gauche, sous la rangee du haut. */
  .scene > .cadenas-aide{left:298px;right:auto;top:auto;bottom:20px;text-align:left;max-width:240px;white-space:nowrap}
}

/* ------------------------------------------------------------------
   Resserrement de la barre du bas en fenetre etroite. CE BLOC DOIT RESTER
   EN FIN DE FICHIER : des regles de meme specificite (.ch[data-o=quantite],
   .ch[data-o=forme] input) vivent plus bas et gagnaient par leur position.
   ------------------------------------------------------------------ */
/* En fenetre etroite on resserre les marges interieures plutot que de laisser
   la barre deborder : mesure, cela rend ~90 px, de quoi tenir jusqu'a 900 px. */
@media (min-width:821px) and (max-width:1180px){
  .ch{padding-left:11px;padding-right:11px}
  .ch .choix button{padding:6px 8px}
  .ch[data-o="frontiere"] .piste{width:176px}
}
@media (min-width:821px) and (max-width:1100px){
  /* Sous 1100 px, les blocs ne peuvent plus se comprimer sans que les boutons
     « Brillant » et « Rond » se fassent couper (vu en capture). On les laisse
     donc a leur taille et c'est la barre qui defile horizontalement : une seule
     ligne, et rien de tronque. En dessous de 821 px, la mise en page telephone
     (onglets) prend le relais. */
  footer > .ch, footer > .ch-groupe, footer > .ch-groupe > .ch{flex-shrink:0}
  .ch{padding-left:9px;padding-right:9px}
  .ch .choix{gap:4px}
  .ch .choix button{padding:5px 7px}
  .ch[data-o="frontiere"]{flex:0 0 auto;min-width:0;width:166px}
  .ch[data-o="frontiere"] .piste{width:150px}
  .ch[data-o="quantite"]{flex:0 0 auto;min-width:0;width:150px}
  .ch[data-o=forme] input[type=range],.ch-groupe[data-o=forme] input[type=range]{width:78px}
}

/* ------------------------------------------------------------------
   RANGEE DU HAUT, ORDINATEUR. Demande de l'utilisateur : « avant/arriere »,
   « fond conserve » et « detourage IA » a la MEME HAUTEUR ; la qualite garde
   ses trois etats mais son explication passe en NOIR, sur une seconde ligne.
   Rien de tout cela sous 821 px : la mise en page telephone ne bouge pas.
   ------------------------------------------------------------------ */
@media (min-width:821px){
  .histo, .btn-detour, .btn-ia, .btn-effet, #reduction, #alerte, #qualite{min-height:48px;box-sizing:border-box}
  #reduction, #alerte{display:inline-flex;align-items:center}
  .histo{padding:5px;align-items:center}
  .btn-detour{padding-top:0;padding-bottom:0}
  .btn-ia{padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  /* la qualite : libelle sur une ligne, explication en noir sur la suivante */
  #qualite{align-items:center}
  /* deux lignes serrees, pour que la pastille tienne dans les 48 px comme les autres */
  #qualite{padding-top:7px;padding-bottom:7px}
  #qualite .legende-txt{display:flex;flex-direction:column;align-items:flex-start;
    white-space:nowrap;line-height:1.25}
  #qualite .legende-txt .titre{color:#5a636c;font-size:12px}
  #qualite .legende-txt b{color:#101418;font-size:14px;font-weight:700}
}

/* ------------------------------------------------------------------
   EFFETS D'IMAGE : les boutons se rangent sous « Détourage IA », a la meme
   dimension. Blanc au repos, encre quand l'effet est applique — un seul a la
   fois. Tout le calcul est local, rien n'est envoye.
   ------------------------------------------------------------------ */
.btn-effet{background:#fff;color:var(--encre);border:1px solid var(--bord);border-radius:9px;
  padding:0 18px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;
  gap:9px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.btn-effet[aria-pressed=true]{background:var(--encre);color:#fff;border-color:var(--encre)}
.btn-effet .ico{flex:none}
/* MEME TAILLE POUR TOUS : la colonne s'etire sur son plus large bouton, donc
   « Detourage IA » et les quatre effets ont exactement la meme largeur et la
   meme hauteur. Sans `stretch`, chacun prenait la largeur de son libelle. */
@media (min-width:821px){
  .droite{align-items:stretch}
  .btn-ia, .btn-effet{justify-content:flex-start;text-align:left}
}
@media (max-width:820px){
  .btn-effet{padding:8px 11px;font-size:13px;min-height:0}
  .droite .btn-effet{background:#fff;color:var(--encre);border:1px solid var(--bord)}
  .droite .btn-effet[aria-pressed=true]{background:var(--encre);color:#fff;border-color:var(--encre)}
}

/* Petit bandeau de message : il remplace une boite d'alerte bloquante quand un
   effet ne donne rien. Il reprend la pastille sombre de l'aide a la gomme. */
.scene > .message{top:82px;max-width:min(440px,86%);text-align:center;line-height:1.4;
  font-size:13px;z-index:7;box-shadow:0 4px 18px rgba(0,0,0,.25)}
@media (max-width:820px){ .scene > .message{top:70px;max-width:92%} }