/* ==========================================================================
   common.css — style commun des outils WebApps

   Inclusion (depuis code/ ou depuis un sous-dossier) :
     <link rel="stylesheet" href="common.css">      (code/outil.html)
     <link rel="stylesheet" href="../common.css">   (code/outil/index.html)
   Avec common.js (thème) juste derrière, dans le <head> :
     <script src="common.js"></script>   (voir l'en-tête de common.js)

   Règles du jeu :
   - Les couleurs, rayons et polices viennent des variables ci-dessous ;
     une page n'écrit jamais de couleur en dur, elle utilise var(--...).
   - Ce qui est propre à un outil reste dans son <style>, chargé après ce
     fichier (donc prioritaire à spécificité égale).
   - Thème : clair, sombre ou automatique (système). common.js pose
     data-theme="light" ou "dark" sur <html> et le mémorise ; sans attribut,
     le thème suit le système.
   - Pour adapter une taille, surcharger la variable du composant
     (--icon-size, --ring-size, --cb-box…) plutôt que réécrire la règle.
   - Les animations sont courtes et discrètes ; elles sont coupées pour qui
     demande « moins d'animations » (voir la fin du fichier).

   Sommaire : 1 Variables · 2 Base et fond · 3 Barre du haut · 4 Boutons
              5 Champs · 6 Cartes et pastilles · 7 Avancement · 8 Feuille
              9 Toast · 10 Thème, icône d'application, utilitaires · 11 Mouvement
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root{
  color-scheme:light;
  --bg:#f7f5ff;        /* fond de page */
  --card:#ffffff;      /* surfaces surélevées : cartes, feuilles, zone de lecture */
  --card2:#efecfc;     /* surfaces secondaires : champs, boutons, citations, code */
  --fg:#1b1736;        /* texte */
  --mut:#6b6690;       /* texte secondaire */
  --mut2:#b3aed3;      /* éléments discrets : cases vides, bordures d'icônes */
  --line:#e5e1f6;      /* séparateurs et bordures */
  --ac:#5b4bff;        /* accent (violet électrique) */
  --ac2:#e63b97;       /* second accent (rose), pour les dégradés */
  --ac3:#ffb020;       /* troisième accent (soleil), touches ponctuelles */
  --on-ac:#ffffff;     /* texte sur un fond d'accent */
  --ok:#16b86e;
  --on-ok:#ffffff;
  --warn:#f2a20c;
  --err:#e5484d;
  --glass:#f7f5ffd9;   /* fond translucide des barres collantes */
  --shadow:0 1px 2px #2b1f8a14,0 8px 24px #2b1f8a14;
  --ac-soft:color-mix(in srgb,var(--ac) 14%,var(--card));
  --hover:color-mix(in srgb,var(--fg) 7%,transparent);
  --grad:linear-gradient(135deg,var(--ac),var(--ac2));

  --r-s:12px; --r-m:14px; --r-l:20px;
  --spring:cubic-bezier(.34,1.56,.64,1);   /* petit rebond : retours tactiles et apparitions */
  /* Police arrondie du système (Safari/iOS : ui-rounded) ; Nunito si elle est installée ; sinon police système. */
  --f-ui:ui-rounded,"SF Pro Rounded",Nunito,"Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  accent-color:var(--ac);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0f0c22; --card:#1a1633; --card2:#262048; --fg:#f2efff; --mut:#a29ccb; --mut2:#544d78; --line:#2f2858;
    --ac:#8f7dff; --ac2:#ff6fb5; --ac3:#ffc247; --on-ac:#150b33; --ok:#3be28e; --on-ok:#06200f; --warn:#ffc247; --err:#ff7b80;
    --glass:#0f0c22d9; --shadow:0 1px 2px #0007,0 10px 28px #0005;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0c22; --card:#1a1633; --card2:#262048; --fg:#f2efff; --mut:#a29ccb; --mut2:#544d78; --line:#2f2858;
  --ac:#8f7dff; --ac2:#ff6fb5; --ac3:#ffc247; --on-ac:#150b33; --ok:#3be28e; --on-ok:#06200f; --warn:#ffc247; --err:#ff7b80;
  --glass:#0f0c22d9; --shadow:0 1px 2px #0007,0 10px 28px #0005;
}

/* 2. Base et fond --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--f-ui);touch-action:manipulation}
/* Trois halos de couleur très doux, fixes derrière le contenu : de la vie sans bruit. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 42vmax at 6% -8%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 62%),
    radial-gradient(52vmax 38vmax at 104% 2%,color-mix(in srgb,var(--ac2) 11%,transparent),transparent 64%),
    radial-gradient(54vmax 40vmax at 52% 114%,color-mix(in srgb,var(--ac3) 10%,transparent),transparent 62%)}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;font-size:16px;color:inherit}   /* 16 px : évite le zoom automatique sur iOS */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--mut2) transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--mut)}
.err{color:var(--err)}
.hint{color:var(--mut);font-size:13px;margin:2px 4px 0}

/* 3. Barre du haut -------------------------------------------------------- */
/* <header class="topbar"><div class="topbar-in">…</div></header>
   Une fine ligne de couleur en bas ; l'icône de l'outil (.appicon) se place avant le titre. */
.topbar{position:sticky;top:0;z-index:10;background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,var(--ac),var(--ac2) 55%,var(--ac3))}
.topbar-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.topbar-in .grow{flex:1;min-width:0}
.brand{margin:0;font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.03em;background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--mut);font-size:13px;margin-top:1px}

/* 4. Boutons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--card2);font-weight:600;white-space:nowrap;transition:transform .2s var(--spring),border-color .15s,box-shadow .15s,background-color .15s}
.btn:hover:not(:disabled){border-color:var(--ac);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:scale(.95)}
.btn:disabled{opacity:.4;cursor:default}
/* Le dégradé glisse doucement au survol. */
.btn.primary{background:linear-gradient(110deg,var(--ac) 0%,var(--ac2) 50%,var(--ac) 100%);background-size:200% 100%;background-position:0 0;border-color:transparent;color:var(--on-ac);
  box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 32%,transparent);transition:transform .2s var(--spring),box-shadow .2s,background-position .5s ease}
.btn.primary:hover:not(:disabled){background-position:100% 0;box-shadow:0 6px 18px color-mix(in srgb,var(--ac2) 34%,transparent)}
/* Bouton rond : .iconbtn ou .btn.icon ; taille réglable avec --icon-size */
.iconbtn,.btn.icon{width:var(--icon-size,42px);height:var(--icon-size,42px);padding:0;border:0;border-radius:50%;background:var(--card2);
  font-size:20px;display:inline-grid;place-items:center;flex:none;transition:transform .2s var(--spring),box-shadow .15s,background-color .15s}
.iconbtn:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ac)}
.iconbtn:active,.btn.icon:active{transform:scale(.92)}
.btn.icon:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ac)}
/* Pastille cliquable (filtres, catégories) : <div class="chips"><button class="chip on">…</button></div> */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:var(--card2);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:550;white-space:nowrap;
  transition:transform .2s var(--spring),background-color .15s,box-shadow .15s}
.chip:hover{background:color-mix(in srgb,var(--ac) 13%,var(--card2))}
.chip:active{transform:scale(.93)}
.chip.on{background:var(--grad);color:var(--on-ac);font-weight:700;box-shadow:0 3px 10px color-mix(in srgb,var(--ac) 28%,transparent)}

/* 5. Champs --------------------------------------------------------------- */
.field,input[type=text],input[type=search],input[type=number],select,textarea{width:100%;min-width:0;background:var(--card2);border:1px solid transparent;
  border-radius:var(--r-m);padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.field:focus,input[type=text]:focus,input[type=search]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 4px var(--ac-soft)}
.field::placeholder,input::placeholder,textarea::placeholder{color:var(--mut)}
textarea{resize:vertical;min-height:64px}
textarea[hidden]{display:none}

/* 6. Cartes et pastilles -------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);margin-bottom:12px;padding:12px}
/* Pastille de pourcentage : <span class="pct" style="--c:#2fb872">46%<small>6/13</small></span> */
.pct{display:inline-flex;align-items:baseline;gap:.35em;padding:1px .6em;border-radius:999px;font-size:.8em;font-weight:700;line-height:1.5;
  font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--c,var(--ac)) 68%,var(--fg));
  background:color-mix(in srgb,var(--c,var(--ac)) 16%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--ac)) 38%,transparent)}
.pct small{font-weight:500;font-size:.9em;opacity:.85}

/* 7. Avancement : barre, anneau, case ronde -------------------------------- */
/* <div class="progress" style="--c:…"><i style="width:46%"></i></div> */
.progress{height:5px;border-radius:3px;background:var(--line);margin-top:.45em;overflow:hidden}
.progress i{display:block;height:100%;border-radius:3px;background:var(--c,var(--ac));transition:width .35s var(--spring)}
/* <div class="ring" style="--p:46;--c:…"><span>46%</span></div> ; taille : --ring-size, épaisseur : --ring-w, texte : --ring-fs */
.ring{--p:0;--c:var(--ac);width:var(--ring-size,46px);height:var(--ring-size,46px);border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--line) 0)}
.ring::before{content:"";position:absolute;inset:var(--ring-w,5px);border-radius:50%;background:var(--bg)}
.ring span{position:relative;font-size:var(--ring-fs,12px);font-weight:700;font-variant-numeric:tabular-nums}
/* Case ronde : .cb (vide) · .cb.on (faite) · .cb.part (partielle). --cb-box = zone tactile (le rond en occupe 68 %). */
.cb{--cb-box:38px;position:relative;flex:none;width:var(--cb-box);height:var(--cb-box)}
.cb::before{content:"";position:absolute;inset:16%;border-radius:50%;border:2px solid var(--mut2);transition:background .2s,border-color .2s,transform .25s var(--spring)}
.cb:hover::before{border-color:var(--ac);transform:scale(1.08)}
.cb.on::before{background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent);animation:cb-ring .55s ease-out}
.cb.on::after{content:"";position:absolute;left:42%;top:29%;width:16%;height:32%;border:solid var(--on-ok);
  border-width:0 calc(var(--cb-box) * .065) calc(var(--cb-box) * .065) 0;transform:rotate(45deg);animation:cb-pop .3s var(--spring)}
.cb.part::before{border-color:var(--ac)}
.cb.part::after{content:"";position:absolute;left:34%;top:calc(50% - var(--cb-box) * .0325);width:32%;height:calc(var(--cb-box) * .065);border-radius:2px;background:var(--ac)}
@keyframes cb-pop{from{transform:rotate(45deg) scale(.2)}to{transform:rotate(45deg) scale(1)}}
@keyframes cb-ring{to{box-shadow:0 0 0 9px transparent}}

/* 8. Feuille (dialog en bas d'écran, centrée sur grand écran) --------------- */
/* <dialog class="sheet"><div class="inner"><div class="grab"></div>…</div></dialog> */
dialog.sheet{border:0;padding:0;background:var(--card);color:var(--fg);width:100%;max-width:560px;margin:auto auto 0;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px #0006}
dialog.sheet::backdrop{background:#150b3399;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog.sheet[open]{animation:sheet-up .34s var(--spring)}
dialog.sheet[open]::backdrop{animation:fade-in .22s ease-out}
dialog.sheet .inner{padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px))}
.grab{width:40px;height:4px;border-radius:2px;background:var(--mut2);margin:6px auto 10px}
.item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 8px;border-radius:var(--r-m);font-size:16px;transition:background-color .15s,transform .2s var(--spring)}
.item:hover{background:var(--hover)}
.item:active{background:var(--card2);transform:scale(.98)}
.item .ic{width:28px;text-align:center;font-size:20px}
.item .ic svg{width:22px;height:22px;display:inline-block;vertical-align:middle}
.item .sw{margin-left:auto;font-size:13px;color:var(--mut)}
.sheet h2{margin:4px 8px 8px;font-size:17px;font-weight:750}
.sheet p{margin:0 8px 10px;color:var(--mut);font-size:13.5px}
.sheet .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:flex-end;align-items:center}
@media (min-width:700px){dialog.sheet{margin:auto;border-radius:24px}dialog.sheet[open]{animation-name:sheet-pop}}
@keyframes sheet-up{from{transform:translateY(48px);opacity:0}}
@keyframes sheet-pop{from{transform:scale(.93) translateY(8px);opacity:0}}
@keyframes fade-in{from{opacity:0}}

/* 9. Toast ---------------------------------------------------------------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;max-width:min(560px,calc(100vw - 32px));
  padding:11px 16px;border-radius:var(--r-m);background:var(--fg);color:var(--bg);font-size:13px;font-weight:600;line-height:1.45;box-shadow:0 8px 28px #00000045;
  animation:toast-in .35s var(--spring)}
.toast.err{background:var(--err);color:#fff}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.96)}}

/* 10. Thème, icône d'application, utilitaires ------------------------------ */
/* Bouton de thème (auto → clair → sombre) : <button class="iconbtn themebtn" data-theme-toggle></button>
   common.js y dessine l'icône du mode courant. Dans une feuille, voir .item avec [data-theme-icon] et [data-theme-name]. */
.themebtn{color:var(--mut)}
.themebtn:hover{color:var(--ac)}
.themebtn svg,[data-theme-icon] svg{width:20px;height:20px;display:block;animation:theme-in .5s var(--spring)}
.item [data-theme-icon] svg{display:inline-block}
@keyframes theme-in{from{transform:rotate(-110deg) scale(.4);opacity:0}}
/* Icône de l'outil dans la barre du haut : <a class="appicon" href="./" data-home><img src="icons/outil.svg" alt=""></a>
   (le lien ramène à l'index ; build.py --standalone retire le lien, qui n'aurait pas de cible). */
.appicon{flex:none;width:36px;height:36px;display:block;border-radius:11px;transition:transform .25s var(--spring),filter .2s}
.appicon img{display:block;width:100%;height:100%}
a.appicon[href]:hover{transform:rotate(-8deg) scale(1.1);filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--ac) 35%,transparent))}
a.appicon[href]:active{transform:scale(.92)}
/* Petit flottement pour les états vides : <b class="bob">🌱</b> */
.bob{display:inline-block;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(-3deg)}}

/* 11. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}