:root{--ink:#141414;--grey:#6b6b6b;--line:#e3e3e0;--fond:#f6f6f4;--carte:#fff;--ok:#1e8a4c;--err:#d7263d;--garder:#1fb86a;--enlever:#ee3a50}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;overflow:hidden;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--fond);color:var(--ink)}
header{display:flex;align-items:stretch;gap:34px;padding:0 18px;border-bottom:1px solid var(--line);background:#fff}
header h1{margin:0;padding:15px 0;font-size:15px;letter-spacing:.08em;white-space:nowrap}
.onglets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.onglet{position:relative;padding:0 14px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);white-space:nowrap;cursor:pointer}
.onglet:hover{color:var(--ink)}
.onglet.actif{color:var(--ink)}
.onglet.actif::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--ink)}

/* ---------- l'atelier : le grand rectangle, le volet, les ronds ---------- */
.atelier{flex:1;min-height:0;display:flex;gap:12px;padding:12px 12px 10px 14px}
.centre{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.scene{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;touch-action:none;cursor:grab}
.scene.pinceau{cursor:none}
.scene.cible{cursor:crosshair}
.scene.main{cursor:grabbing}
.scene.main .curseur{display:none!important}
.scene canvas{display:block;position:absolute;left:0;top:0}
.scene.vide{cursor:pointer;border:2px dashed #c9c9c5;touch-action:pan-y}
.scene.vide canvas{display:none}
body.survol .scene{border:2px solid var(--ink);background:#fafaf8}
.accueil{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--grey);font-size:14px;cursor:pointer;padding:20px}
.scene.vide .accueil{display:flex}
.accueil svg{width:44px;height:44px;margin-bottom:6px;color:var(--ink)}
.accueil strong{color:var(--ink);font-size:20px}
.accueil kbd{font:inherit;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:#fafaf8}
.curseur{position:absolute;display:none;border:2px solid var(--garder);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.65)}
.travail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;max-width:80%;padding:12px 18px;border-radius:999px;background:rgba(20,20,20,.88);color:#fff;font-size:14px;pointer-events:none}
.attente{flex:none;display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:t .8s linear infinite}
@keyframes t{to{transform:rotate(360deg)}}

/* ---------- sous l'image ---------- */
.commandes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:44px}
.zoom{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}
.zoom button{width:36px;height:36px;border:0;border-radius:50%;background:none;font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.zoom button.mot{width:auto;padding:0 12px;border-radius:999px;font-size:12.5px}
.zoom button:hover:not(:disabled){background:#efefec}
.zoom button:disabled{opacity:.3;cursor:default}
.zoom span{min-width:50px;text-align:center;font-size:12.5px;color:var(--grey)}
.btn{display:inline-block;padding:12px 26px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:#333}
.btn:disabled{opacity:.35;cursor:default}
.btn.second{background:#fff;color:var(--ink)}
.btn.second:hover:not(:disabled){background:#efefec}
.btn.appel{animation:appel .7s ease-in-out 2}
@keyframes appel{50%{transform:scale(1.07)}}
.etat{flex:1 1 220px;min-width:0;font-size:13px;line-height:1.35;color:var(--grey)}
.etat.err{color:var(--err)}

/* ---------- les photos importées ---------- */
.bande{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px}
.vignette{position:relative;flex:none;width:62px;height:62px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}
.vignette img{width:100%;height:100%;object-fit:contain;display:block}
.vignette.choisie{outline:2px solid var(--ink);outline-offset:1px}
.vignette.ajout{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--grey);border-style:dashed}
.vignette.ajout:hover{color:var(--ink);border-color:var(--ink)}
.vignette .retirer{position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);font-size:12px;line-height:1;cursor:pointer}
.vignette .ok{position:absolute;left:3px;bottom:3px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;line-height:16px;text-align:center}
.vignette .role{position:absolute;left:2px;top:2px;display:flex;gap:2px}
.pastille{padding:1px 4px;border-radius:999px;font-size:8px;font-weight:700;background:var(--ink);color:#fff}
.pastille.logo{background:var(--err)}

/* ---------- les petits ronds à droite de l'image ---------- */
.rail{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;scrollbar-width:none;padding:2px 0}
.rail hr{width:26px;margin:2px 0;border:0;border-top:1px solid var(--line)}
.groupe{display:flex;flex-direction:column;align-items:center;gap:8px}
.rond{display:block;padding:0;border:0;background:none;cursor:pointer}
.rond i{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);transition:background .15s,border-color .15s}
.rond svg{width:19px;height:19px}
.rond:hover:not(:disabled) i{border-color:var(--ink)}
.rond:disabled{cursor:default}
.rond:disabled i{opacity:.35}
.rond.eteint i{opacity:.45}
.rond.actif i,.rond.choisi i{background:var(--ink);border-color:var(--ink);color:#fff}
.rond.garder.actif i{background:var(--garder);border-color:var(--garder)}
.rond.enlever.actif i{background:var(--enlever);border-color:var(--enlever)}
.rond b{position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--ok);color:#fff;font-size:10px;line-height:17px;text-align:center;font-style:normal}
.bulle{position:fixed;z-index:30;max-width:250px;padding:6px 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;line-height:1.35;pointer-events:none}

/* ---------- les petites fenêtres des ronds ---------- */
.pop{position:fixed;z-index:20;width:250px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);font-size:13px}
.pop h3{margin:0 0 9px;font-size:13px}
.pop input[type=range]{width:100%;accent-color:var(--ink)}
.pop .valeur{margin-top:5px;color:var(--grey);font-size:12px}
.fonds{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fonds button{padding:9px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.fonds button.actif{border-color:var(--ink);background:var(--ink);color:#fff}
.case{display:flex;gap:9px;align-items:flex-start;padding:7px 0;cursor:pointer;line-height:1.3}
.case input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--ink);flex:none}
.case small{display:block;color:var(--grey);font-size:11.5px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.champs label{display:grid;gap:3px;font-size:12px;color:var(--grey)}
.champs input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;color:var(--ink)}
.depot{display:flex;align-items:center;justify-content:center;min-height:76px;border:2px dashed var(--line);border-radius:12px;color:var(--grey);text-align:center;padding:10px;cursor:pointer}
.depot:hover,.depot.survol{border-color:var(--ink);color:var(--ink)}
.ref img{display:block;max-width:100%;max-height:150px;margin:8px auto 0;border-radius:8px;border:1px solid var(--line)}
.lien{margin-top:6px;width:100%;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.lien:hover:not(:disabled){border-color:var(--ink)}
.lien:disabled{opacity:.4;cursor:default}

/* ---------- le volet des fichiers ---------- */
.volet{flex:none;width:320px;overflow-y:auto;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13px}
.volet h2{margin:0 0 4px;font-size:15px}
.aide{margin:0 0 12px;color:var(--grey);font-size:12.5px;line-height:1.45}
.resultats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.resultat{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/14px 14px}
.resultat img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.resultat a{display:block;padding:6px 7px;background:#fff;border-top:1px solid var(--line);font-size:11px;color:var(--ink);text-decoration:none;word-break:break-all}
.resultat a:hover{text-decoration:underline}
.resultat.controle{grid-column:1/-1;background:#fff}
.resultat.controle img{aspect-ratio:auto}
.bilan{margin-top:12px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#f6f8f4;line-height:1.45}
.bilan.alerte{background:#fdf0f1;border-color:var(--err)}
.bilan b{display:block;margin-bottom:3px}
.bilan ul{margin:6px 0 0 16px;padding:0;color:#a3172b}
.bilan .conseil{margin:6px 0 0;color:var(--grey)}
details{margin-top:12px;font-size:12px;color:var(--grey)}
pre{white-space:pre-wrap;font-size:11px;max-height:200px;overflow:auto;background:#fafaf8;padding:8px;border-radius:8px}

/* ---------- version en ligne ---------- */
html,body{height:100dvh}
.barre{display:flex;align-items:center;gap:26px;padding:0 14px 0 16px;padding-top:env(safe-area-inset-top)}
.marque{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;flex:none}
.marque img{border-radius:8px}
.barre h1{margin:0;padding:0;font-size:18px;letter-spacing:.01em}
.barre .onglets{flex:1;align-self:stretch}
.installer{display:inline-flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 16px 0 12px;border-radius:999px;background:#1fb86a;color:#fff;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 4px 12px rgba(31,184,106,.35)}
.installer svg{width:18px;height:18px}
.installer:hover{filter:brightness(1.06)}
.petit{padding:8px 14px;font-size:11.5px}
.accueil small{margin-top:6px;font-size:12.5px;color:var(--grey)}
.vie-privee{max-width:330px;line-height:1.45}
.vie-privee b{color:var(--ink)}
.bouton-galerie{margin:6px 0 2px;padding:13px 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px}
.sur-tel{display:none}
/* un nom sous chaque outil ; Malin et Précis forment un seul choix */
.rail .rond{display:flex;flex-direction:column;align-items:center;gap:3px}
.rond .nom{font-size:10px;line-height:1;color:var(--grey);white-space:nowrap}
.rond.actif .nom,.rond.choisi .nom{color:var(--ink);font-weight:700}
.rond.eteint .nom{opacity:.55}
.segment{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 3px;border:1px solid var(--line);border-radius:26px;background:#efefec}
.segment .rond i{border-color:transparent;background:transparent}
.segment .rond.choisi i{background:#fff;border-color:var(--ink);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.barre-photo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:-4px}
.historique{display:flex;gap:6px}
.barre-photo .zoom button{width:34px;height:34px;font-size:18px}
.barre-photo .zoom button.mot{height:34px;font-size:12.5px}
.barre-photo .zoom span{min-width:44px}
/* les photos ouvertes : centrées tant qu'elles tiennent, puis défilement vers la droite */
.ligne .bande{justify-content:flex-start}
.bande>:first-child{margin-left:auto}
.bande>:last-child{margin-right:auto}
.barre-photo .rond i{width:36px;height:36px}
.fonds label{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;cursor:pointer;text-align:center}
.fonds label.actif{border-color:var(--ink);background:var(--ink);color:#fff}
.fonds .fond-photo{grid-column:1/-1}
.palette input{width:26px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.ligne{display:flex;align-items:center;gap:12px;min-width:0}
.ligne .bande{flex:1;min-width:0}
.liens{display:flex;gap:10px;flex-wrap:wrap}
.carte-lien{display:flex;align-items:center;gap:11px;flex:0 1 250px;min-height:56px;padding:9px 14px 9px 10px;border-radius:14px;color:#fff;text-decoration:none}
.carte-lien i{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18)}
.carte-lien i svg{width:24px;height:24px}
.carte-lien i img{border-radius:7px}
.carte-lien b{display:block;font-size:14px}
.carte-lien small{display:block;font-size:12px;opacity:.85}
.carte-lien.discord{background:#5865f2}
.carte-lien.appli{background:#1fb86a}
.carte-lien:hover{filter:brightness(1.07)}
.fenetre{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.45)}
.fenetre-boite{position:relative;width:min(420px,100%);padding:24px 22px 20px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.fenetre-boite img{border-radius:14px}
.fenetre-boite h2{margin:10px 0 14px;font-size:18px}
.fenetre-boite ol{margin:0;padding:0 0 0 22px;text-align:left;font-size:14.5px;line-height:1.5}
.fenetre-boite li{margin-bottom:10px}
.fenetre-boite .ic{width:18px;height:18px;vertical-align:-3px;color:#0a84ff}
.fenetre-boite .fermer{position:absolute;right:14px;top:14px;margin:0}
.fi-plus{display:inline-block;margin-top:6px;font-size:13px;color:var(--grey)}
.mesure{position:fixed;z-index:50;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100vw - 28px));padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.2);font-size:13px;line-height:1.45}
.mesure h2{margin:0 0 6px;font-size:14px}
.mesure p{margin:0 0 12px;color:var(--grey)}
.mesure a{color:var(--ink)}
.mesure-choix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mesure-choix .btn{padding:11px 8px;font-size:12px}
.volet h2{display:flex;align-items:center;justify-content:space-between}
.fermer{width:40px;height:40px;margin:-8px -8px -8px 0;border:0;border-radius:50%;background:none;font:inherit;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
.fermer:hover{background:#efefec}
.pied{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--grey)}
.pied a,.pied button{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.conseil-installer{position:fixed;z-index:40;right:14px;bottom:14px;width:min(320px,calc(100vw - 28px));padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);font-size:13px;line-height:1.4}
.conseil-installer p{margin:0 0 9px}
.conseil-installer div{display:flex;gap:8px}

/* les pages de texte */
body.texte{display:block;overflow:auto;height:auto;background:#fff}
.texte main{max-width:720px;margin:0 auto;padding:30px 20px 60px;font-size:15px;line-height:1.6}
.texte h1{font-size:28px;line-height:1.2;margin:0 0 10px}
.texte h2{margin:30px 0 8px;font-size:18px}
.texte li{margin-bottom:6px}
.texte a{color:var(--ink)}
.texte .retour{display:inline-block;margin-bottom:22px;font-size:13px}
.apropos h1{font-size:32px}
.chapo{font-size:17px;line-height:1.55;color:#333}
.appels{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.texte .appels .btn{color:#fff}
.texte .appels .btn.second{color:var(--ink)}
.atouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.atouts div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fafaf8}
.atouts b{display:block;margin-bottom:4px}
.atouts span{display:block;font-size:14px;line-height:1.5;color:#444}
.etapes li{margin-bottom:8px}
.texte details{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.texte summary{font-weight:700;cursor:pointer}
.texte details p{margin:8px 0 0;color:#444}
.petit-pied{margin-top:40px;font-size:13px;color:var(--grey)}

/* Sur téléphone, de haut en bas : nom et Installer · onglets · photo et
   import · bouton principal · outils · zoom et photos · Discord et appli ·
   mentions. La page défile si l'écran est court : la photo garde sa place. */
@media (max-width:760px){
    body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100dvh}
    .barre{display:grid;grid-template-columns:1fr auto;grid-template-areas:"marque installer" "onglets onglets";gap:0 10px;padding:0 12px;padding-top:env(safe-area-inset-top)}
    .marque{grid-area:marque;height:56px}
    .installer{grid-area:installer}
    .barre .onglets{grid-area:onglets;justify-content:space-between;margin:0 -4px;border-top:1px solid var(--line)}
    .onglet{flex:1;min-height:46px;padding:0 6px;font-size:12px;letter-spacing:.06em}
    .onglet.actif::after{left:14%;right:14%}
    .atelier{flex:none;flex-direction:column;gap:10px;padding:10px 10px calc(14px + env(safe-area-inset-bottom))}
    .centre{display:contents}
    /* svh : la hauteur ne bouge pas quand la barre d'adresse de Safari
       apparaît ou disparaît au défilement (sinon l'image se redessinait sans
       cesse et « frisait ») */
    .barre-photo{order:0;margin:0 0 -4px}
    .scene{order:1;flex:none;height:min(58svh,500px);min-height:280px}
    .commandes{order:2;gap:6px 8px;min-height:0;flex-wrap:wrap}
    /* Enregistrer et Redétourer côte à côte, sur une seule ligne */
    .commandes .btn{flex:1 1 0;min-width:0;padding:12px 8px;font-size:11.5px;letter-spacing:.05em;white-space:normal;line-height:1.2;text-align:center}
    .rail{order:3;width:100%;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:4px;overflow-x:auto;padding:2px}
    .rail .rond i{width:38px;height:38px}
    .rail{align-items:flex-start}
    .segment{flex-direction:row;padding:3px 4px;gap:2px;border-radius:24px}
    .segment .rond{min-width:40px}
    .segment .rond i{width:34px;height:34px}
    .rail .rond svg{width:18px;height:18px}
    .ligne{order:4;flex-wrap:wrap}
    .liens{order:5}
    .pied{order:6;justify-content:center}
    .rail hr{display:none}
    .groupe{flex-direction:row;flex-wrap:nowrap;gap:4px}
    .rond{flex:none}
    .barre-photo .rond i{width:40px;height:40px}
    .barre-photo .zoom button{width:38px;height:38px}
    .barre-photo .zoom button.mot{height:38px}
    .btn{padding:12px 20px}
    .etat{flex-basis:100%;font-size:12.5px}
    .carte-lien{flex:1 1 0;min-width:0;gap:9px;padding:9px 10px}
    .carte-lien b{font-size:13.5px;white-space:nowrap}
    .carte-lien small{font-size:11.5px}
    .volet{position:fixed;z-index:25;left:8px;right:8px;bottom:8px;top:calc(8px + env(safe-area-inset-top));width:auto}
    .pop{position:fixed;left:12px;right:12px!important;width:auto;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))}
    .sur-ordi{display:none}
    .sur-tel{display:inline}
    strong.sur-tel{display:block}
    .mesure{bottom:calc(8px + env(safe-area-inset-bottom));width:calc(100vw - 16px)}
    .pied{font-size:11.5px}
}
.appliquer-fond{width:100%;margin-top:10px}