:root{--paper:#fafbfe;--grid:#dde4f4;--ink:#14213d;--muted:#5b6785;--line:#cfd7ea;--blue:#2b45d9;--blue-soft:#e8ecff;--ok:#14804a;--ok-soft:#e2f5ea;--bad:#d13a2f;--bad-soft:#fdeceb;--margin:#ee7d76}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;padding:40px 16px 64px;color:var(--ink);font:16px/1.55 Figtree,"Segoe UI",system-ui,sans-serif;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
main{max-width:720px;margin:0 auto}
h1,h2,.score,.brand{font-family:"Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.02em;line-height:1.1;margin:0}
.brand{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:19px;margin-bottom:24px}
.brand-logo{display:flex;align-items:center;gap:10px;}
.brand i{width:26px;height:26px;border-radius:7px;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
.sheet{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:32px 36px 32px 68px; margin-bottom: 24px;}
.sheet::before{content:"";position:absolute;left:46px;top:0;bottom:0;border-left:1.5px solid var(--margin)}
h1{font-size:clamp(30px,5.5vw,42px);font-weight:800}
h2{font-size:clamp(22px,4vw,28px);font-weight:600;line-height:1.25}
.lead{color:var(--muted);margin:10px 0 0;max-width:52ch}
.field{margin-top:22px}
.lbl,.field>label{display:block;font-weight:600;margin-bottom:8px}
textarea,select,input[type="text"],input[type="email"],input[type="password"],input[type="file"]{width:100%;font:inherit;color:inherit;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px; transition: border-color .15s;}
textarea{height:170px;resize:vertical}
textarea:focus,select:focus,input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
input[type="file"]{padding: 9px 14px; cursor: pointer;}
input[type="file"]::file-selector-button {background: var(--blue-soft); border: none; padding: 6px 12px; border-radius: 6px; color: var(--blue); font-weight: 600; cursor: pointer; margin-right: 12px; transition: background .15s;}
.hint{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.seg{display:flex;gap:3px;padding:3px;border:1.5px solid var(--line);border-radius:10px;background:#f4f6fc}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:8px 6px;border-radius:7px;font-weight:500;font-size:14px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.seg input:checked+span{background:var(--ink);color:#fff}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:42px;height:42px;border:0;background:#f4f6fc;color:var(--ink);font-size:20px;cursor:pointer}
.stepper output{min-width:52px;text-align:center;font-weight:600}
.btn{font:600 16px Figtree,sans-serif;padding:13px 22px;border-radius:10px;border:1.5px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer; text-decoration: none; display: inline-block; text-align: center;}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.sm{padding: 8px 14px; font-size: 14px;}
#go{width:100%;margin-top:28px;display:flex;justify-content:center;align-items:center;gap:10px}
.spin{display:none;width:16px;height:16px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:r .8s linear infinite}
#go.loading .spin{display:block}
@keyframes r{to{transform:rotate(360deg)}}
.error{margin-top:18px;padding:12px 14px;border-radius:10px;background:var(--bad-soft);border:1.5px solid #f2b8b3;color:#8f1f17}
.meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px;margin-bottom:10px}
.track{height:8px;margin-bottom:26px;background:#eef1fa;border-radius:99px;overflow:hidden}
#bar{height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .4s ease}
#choices{display:grid;gap:10px;margin-top:22px}
.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:500 16px/1.4 Figtree,sans-serif;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;}
.choice.ok{border-color:var(--ok);background:var(--ok-soft)}
.choice.ok .key{background:var(--ok);border-color:var(--ok);color:#fff}
.choice.bad{border-color:var(--bad);background:var(--bad-soft)}
.choice.bad .key{background:var(--bad);border-color:var(--bad);color:#fff}
.key{flex:none;width:28px;height:28px;border:1.5px solid currentColor;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:14px}
.expl{margin-top:18px;padding:14px 16px;border-left:4px solid var(--blue);background:var(--blue-soft);border-radius:0 10px 10px 0}
.expl b{display:block;margin-bottom:2px}
.expl b.ok{color:var(--ok)}
.expl b.bad{color:var(--bad)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.score{font-size:clamp(64px,14vw,96px);font-weight:800;color:var(--blue);margin-top:10px}
#review{margin-top:22px}
.rev{padding:12px 0;border-top:1.5px solid var(--line)}
/* Classes ajoutées pour le Dashboard */
.card-item{border:1.5px solid var(--line); border-radius:10px; padding:16px; margin-top:16px;}
.card-header{display:flex; justify-content:space-between; align-items:center;}
.card-header h3{font-size:18px; margin:0;}
.quiz-link{display:flex; justify-content:space-between; align-items:center; padding:12px; background:#f4f6fc; border-radius:8px; margin-top:10px; text-decoration:none; color:var(--ink); font-weight:500;}
/* Statistiques et Jauges de progression */
/* Statistiques et Jauges de progression (Version Pro) */
.matiere-stats {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line, #eaeaea);
    font-size: 0.85rem;
    color: var(--muted, #666);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.stats-header strong {
    color: var(--text, #111);
    font-weight: 600;
}

.jauge-fond {
    background-color: #f1f3f5;
    border-radius: 4px;
    height: 6px; /* Barre plus fine et élégante */
    width: 100%;
    overflow: hidden;
}

.jauge-remplissage {
    background-color: #F97316; /* Orange moderne unifié */
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 1s ease-in-out;
}

/* Zone de Drag & Drop */
.upload-zone {
    border: 2px dashed var(--line, #eaeaea);
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
    background-color: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

/* Effet quand on passe le fichier par-dessus */
.upload-zone:hover, .upload-zone.dragover {
    border-color: #F97316;
    background-color: #fffaf5;
}

.upload-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--muted, #888);
}

.upload-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--muted, #888);
    margin-top: 4px;
}

/* Barre de progression du fichier */
.progress-container {
    margin-bottom: 16px;
}

.progress-bar-fond {
    background-color: #f1f3f5;
    border-radius: 4px;
    height: 6px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar-remplissage {
    background-color: #F97316;
    height: 100%;
    width: 0%;
    transition: width 0.4s ease;
}