/* =============================================================================
 * val_form — design system « 6ème École de Provence »
 *
 * Direction : joyeux + rassurant + ludique, adapté à des élèves de 11 ans.
 * Palette inspirée du logo (rouge, jaune, bleu) adoucie par des pastels.
 * Fonts self-hostées dans /public/fonts/ (RGPD-friendly, pas de Google Fonts CDN).
 * =========================================================================== */

/* -- 1. Fonts locales -------------------------------------------------------- */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/baloo2-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/public/fonts/baloo2-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/public/fonts/baloo2-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/public/fonts/quicksand-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/quicksand-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/public/fonts/quicksand-600.woff2') format('woff2');
}

/* -- 2. Design tokens -------------------------------------------------------- */
:root {
    --ink:      #2D2D34;
    --ink-soft: #5A5A66;
    --paper:    #FFFBF4;
    --paper-2:  #FFF4DE;
    --bubble:   #FFC4D6;
    --mint:     #A0E7E5;
    --sand:     #FBE7C6;
    --sprout:   #B4F8C8;
    --lilac:    #E0C3FC;

    --accent:   #C8261C;
    --accent-2: #1E5C8E;
    --sunshine: #F8D229;
    --grass:    #2A9D5F;

    --font-display: 'Baloo 2', 'Comic Sans MS', cursive;
    --font-body:    'Quicksand', system-ui, sans-serif;

    --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
    --space-4: 1rem;   --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
    --space-10: 2.5rem; --space-12: 3rem;  --space-16: 4rem;  --space-24: 6rem;

    --radius-sm: .5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 0 rgba(45,45,52,.08);
    --shadow-md: 0 4px 0 rgba(45,45,52,.12), 0 8px 24px rgba(45,45,52,.08);
    --shadow-lg: 0 6px 0 rgba(45,45,52,.15), 0 16px 40px rgba(45,45,52,.12);
    --shadow-stick: 0 4px 0 var(--ink);

    --t-fast: 150ms cubic-bezier(.4,0,.2,1);
    --t:      300ms cubic-bezier(.4,0,.2,1);
    --t-slow: 600ms cubic-bezier(.4,0,.2,1);
    --bounce: cubic-bezier(.34,1.56,.64,1);
}

/* -- 3. Reset léger ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
}
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    line-height: 1.15;
}

/* -- 4. Bulles décoratives en arrière-plan ---------------------------------- */
.bg-bubbles {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--paper);
}
.bg-bubbles::before,
.bg-bubbles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
    animation: float 18s ease-in-out infinite;
}
.bg-bubbles::before {
    width: 380px; height: 380px;
    background: var(--bubble);
    top: -120px; left: -120px;
}
.bg-bubbles::after {
    width: 460px; height: 460px;
    background: var(--mint);
    bottom: -160px; right: -160px;
    animation-delay: -6s;
}
.bg-bubbles .bubble {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: .4;
    animation: float 22s ease-in-out infinite;
}
.bg-bubbles .bubble--sand   { width: 260px; height: 260px; background: var(--sand);   top: 30%; left: 70%; animation-delay: -3s; }
.bg-bubbles .bubble--sprout { width: 220px; height: 220px; background: var(--sprout); top: 65%; left: 5%;  animation-delay: -9s; }
.bg-bubbles .bubble--lilac  { width: 180px; height: 180px; background: var(--lilac);  top: 12%; left: 50%; animation-delay: -14s; }

@keyframes float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.05); }
    66%      { transform: translate(-30px,20px) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .bg-bubbles::before,
    .bg-bubbles::after,
    .bg-bubbles .bubble { animation: none; }
}

/* -- 5. Layout formulaire enfant -------------------------------------------- */
.form-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-16);
    position: relative;
}
.form-shell__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.form-shell__logo {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.form-shell__title-wrap { flex: 1; min-width: 0; }
.form-shell__eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    margin: 0 0 .15rem;
}
.form-shell__title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    line-height: 1.05;
}
.form-shell__title em {
    font-style: normal;
    color: var(--accent-2);
    background: linear-gradient(180deg, transparent 60%, var(--sunshine) 60%);
    padding: 0 .15em;
}

.step-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--ink);
    position: relative;
    overflow: hidden;
}
.step-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        var(--bubble) 0%, var(--sand) 25%,
        var(--mint) 50%, var(--sprout) 75%,
        var(--lilac) 100%);
}
.step-card__intro {
    color: var(--ink-soft);
    margin: var(--space-2) 0 var(--space-6);
    font-size: 1rem;
}

/* -- 6. Progression --------------------------------------------------------- */
.progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.progress__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    transition: all var(--t) var(--bounce);
}
.progress__dot--active {
    background: var(--accent);
    transform: scale(1.4);
}
.progress__dot--done {
    background: var(--grass);
}
.progress__label {
    margin-left: var(--space-3);
    font-weight: 600;
    color: var(--ink-soft);
    font-size: .92rem;
}

/* -- 7. Champs --------------------------------------------------------------- */
.field {
    margin-bottom: var(--space-6);
}
.field__label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
    color: var(--ink);
}
.field__label .req { color: var(--accent); margin-left: .2em; }
.field__hint {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: -.25rem 0 var(--space-2);
}
.field__error {
    color: var(--accent);
    font-weight: 600;
    font-size: .9rem;
    margin-top: var(--space-2);
    display: flex; align-items: center; gap: var(--space-1);
}
.field__error::before { content: '⚠'; }

.input, .textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: all var(--t-fast);
    box-shadow: var(--shadow-sm);
}
.input:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px rgba(30,92,142,.15), var(--shadow-sm);
}
.textarea { min-height: 140px; resize: vertical; }
.input--invalid, .textarea--invalid {
    border-color: var(--accent);
    background: #FFF5F4;
}
.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 520px) {
    .input-row { grid-template-columns: 1fr; }
}

/* -- 8. Boutons radio « gros et joyeux » ------------------------------------ */
.choice-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0; margin: 0;
}
.choice {
    position: relative;
}
.choice__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice__label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-stick);
    transition: all var(--t-fast) var(--bounce);
}
.choice__label::before {
    content: '';
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--paper);
    transition: all var(--t-fast);
}
.choice__label:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--ink);
}
.choice__input:focus-visible + .choice__label {
    outline: 3px solid var(--accent-2);
    outline-offset: 3px;
}
.choice__input:checked + .choice__label {
    background: var(--sand);
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
}
.choice__input:checked + .choice__label::before {
    background: var(--accent);
    box-shadow: inset 0 0 0 5px white;
}

/* -- 9. Classement (pastilles 1-6 à attribuer aux phrases) ------------------ */
.rank__board {
    max-width: 720px;
    margin-inline: auto;
}

/* Barre des numéros à attribuer — sticky pour rester accessible quand on scroll */
.rank__pool {
    list-style: none;
    padding: var(--space-3) var(--space-2);
    margin: 0 0 var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    align-items: center;
    min-height: 76px;
    background: var(--paper-2);
    border: 2px dashed var(--ink-soft);
    border-radius: var(--radius-lg);
    position: sticky;
    top: var(--space-2);
    z-index: 10;
}
.rank__pool:empty::before {
    content: "✓ tous les numéros sont placés";
    color: var(--grass);
    font-weight: 700;
    font-size: .95rem;
}

/* Liste des phrases (jamais déplacées) */
.rank__phrases {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}
.rank__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-stick);
    min-height: 72px;
}
.rank__text {
    flex: 1;
    line-height: 1.4;
    font-size: 1rem;
}

/* Slot = zone à gauche de chaque phrase qui reçoit une pastille */
.rank__slot {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px dashed var(--ink-soft);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 180ms ease-out,
        border-color 180ms ease-out,
        transform 180ms cubic-bezier(.22, 1, .36, 1);
}
.rank__slot:has(.rank__chip) {
    border: none;
    background: transparent;
}
/* Slot survolé pendant un drag : zone de drop bien visible */
.rank__slot.rank__slot--over {
    background: var(--sprout);
    border-color: var(--grass);
    transform: scale(1.10);
}

/* Pastille numérotée draggable. La couleur dépend du data-num (fixe par valeur). */
.rank__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
    list-style: none;
    border: 2px solid var(--ink);
    box-shadow:
        0 4px 0 var(--ink),
        0 1px 4px rgba(0,0,0,.08);
}
/* Transitions UNIQUEMENT au repos/hover. Pas sur l'élément en drag pour
   ne JAMAIS interpoler le translate3d() que Sortable applique au curseur.
   sortable-fallback = classe appliquée au clone en mode forceFallback. */
.rank__chip:not(.sortable-chosen):not(.sortable-drag):not(.sortable-ghost):not(.sortable-fallback) {
    transition:
        transform 180ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 180ms cubic-bezier(.22, 1, .36, 1);
}
.rank__chip:not(.sortable-chosen):not(.sortable-drag):not(.sortable-ghost):not(.sortable-fallback):hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 var(--ink),
        0 4px 12px rgba(0,0,0,.15);
}
.rank__chip:focus-visible {
    outline: 3px solid var(--accent-2);
    outline-offset: 3px;
}

/* Couleurs fixes par valeur de pastille (1=rouge, 2=orange, ..., 6=gris) */
.rank__chip[data-num="1"] { background: var(--accent); }
.rank__chip[data-num="2"] { background: #E8643E; }
.rank__chip[data-num="3"] { background: var(--sunshine); color: var(--ink); }
.rank__chip[data-num="4"] { background: var(--grass); }
.rank__chip[data-num="5"] { background: var(--accent-2); }
.rank__chip[data-num="6"] { background: var(--ink-soft); }

/* Drag actif : punch visuel UNIQUEMENT via ombre + halo accent.
   PAS de transition transform du tout (le clone DOIT suivre le curseur frame
   par frame, sans interpolation). PAS de transform CSS non plus, sinon il
   se cumule avec le translate3d() inline appliqué par Sortable.
   sortable-fallback = double sécurité pour le clone en mode forceFallback. */
.rank__chip.sortable-chosen,
.rank__chip.sortable-drag,
.rank__chip.sortable-fallback {
    cursor: grabbing;
    opacity: 1;
    box-shadow:
        0 28px 56px -10px rgba(45, 45, 52, .45),
        0 10px 20px -6px rgba(45, 45, 52, .30),
        0 0 0 4px rgba(255, 255, 255, .85),
        0 0 0 8px var(--accent);
    border-color: var(--accent);
    will-change: transform;
    z-index: 100;
    transition: none;
}

/* Ghost = position d'origine pendant le drag (l'élément reste là, caché-ish) */
.rank__chip.sortable-ghost {
    opacity: .25;
    box-shadow: none;
}

/* Mode clavier : pastille armée pour placement (Entrée pour valider) */
.rank__chip--kbselected {
    transform: scale(1.12) translateY(-3px);
    box-shadow:
        0 0 0 3px var(--accent-2),
        0 12px 24px rgba(45, 45, 52, .25);
}

@media (prefers-reduced-motion: reduce) {
    .rank__chip, .rank__slot { transition: none; }
}

/* Responsive mobile : pastilles légèrement plus petites pour tenir à 6 par ligne */
@media (max-width: 480px) {
    .rank__chip { width: 46px; height: 46px; font-size: 1.35rem; }
    .rank__slot { width: 50px; height: 50px; }
    .rank__pool { gap: var(--space-2); padding: var(--space-2); min-height: 64px; }
}

.rank__hint {
    text-align: center;
    color: var(--ink-soft);
    font-size: .85rem;
    margin: var(--space-3) 0 0;
}
.rank__hint kbd {
    background: var(--paper-2, #f5f5f0);
    border: 1px solid var(--ink-soft);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono, monospace);
    font-size: .8rem;
}

/* -- 10. CTA & navigation --------------------------------------------------- */
.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    cursor: pointer;
    background: white;
    color: var(--ink);
    box-shadow: var(--shadow-stick);
    transition: transform var(--t-fast) var(--bounce), box-shadow var(--t-fast);
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn[data-loading="true"] { opacity: .6; cursor: progress; pointer-events: none; }
.btn--primary {
    background: var(--accent);
    color: white;
    font-size: 1.2rem;
    padding: var(--space-4) var(--space-8);
}
.btn--primary:hover { background: #B01F16; }
.btn--ghost {
    background: transparent;
    border-color: var(--ink-soft);
    color: var(--ink-soft);
    box-shadow: none;
}
.btn--ghost:hover { background: var(--paper-2); transform: none; box-shadow: none; }
.btn--big {
    width: 100%;
    justify-content: center;
    font-size: 1.4rem;
    padding: var(--space-4) var(--space-8);
}
.btn--small {
    font-size: .9rem;
    padding: var(--space-2) var(--space-3);
}
.btn--danger {
    background: white;
    border-color: var(--accent);
    color: var(--accent);
}
.btn--danger:hover { background: #FFE9E7; }

/* -- 11. Mascotte (img PNG ou SVG inline) ---------------------------------- */
.mascot {
    position: relative;
    display: inline-block;
    width: 80px; height: 80px;
    animation: bobbing 4s ease-in-out infinite;
    object-fit: contain;          /* préserve les proportions si <img> non carrée */
    user-select: none;
    -webkit-user-drag: none;      /* empêche le drag natif d'une <img> */
}
.mascot--large { width: 140px; height: 140px; }
@keyframes bobbing {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

/* -- 12. Étapes (transitions) ---------------------------------------------- */
[data-step] {
    display: none;
    animation: stepIn .4s var(--bounce);
}
[data-step].is-active {
    display: block;
}
@keyframes stepIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* -- 13. Encart RGPD -------------------------------------------------------- */
.rgpd-card {
    background: var(--paper-2);
    border: 2px solid var(--sunshine);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-4) 0;
    font-size: .95rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.rgpd-card strong { color: var(--ink); }
.rgpd-card a { color: var(--accent-2); text-decoration: underline; }

.checkbox-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 24px; height: 24px;
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}
.checkbox-row span { font-size: .95rem; line-height: 1.45; }

/* -- 14. Récap final -------------------------------------------------------- */
.recap {
    background: var(--paper-2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.recap__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--space-2);
}
.recap__item { margin-bottom: var(--space-3); }
.recap__item dt {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: .85rem;
    margin-bottom: var(--space-1);
}
.recap__item dd { margin: 0; color: var(--ink); }

/* Classement détaillé : affiche les 6 phrases complètes dans l'ordre choisi */
.recap__ranking {
    list-style: decimal inside;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    counter-reset: rank;
}
.recap__ranking li {
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    line-height: 1.4;
    font-size: .95rem;
}

/* -- 15. Page success ------------------------------------------------------- */
.success {
    text-align: center;
    padding: var(--space-16) var(--space-4);
}
.success__icon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: var(--space-4);
}
.success__title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: var(--space-3);
}
.success__lead {
    font-size: 1.2rem;
    color: var(--ink-soft);
    max-width: 480px;
    margin: 0 auto var(--space-8);
}

/* -- 16. Dashboard (liste + détail) ---------------------------------------- */
/* Règle d'alignement : tout est aligné à gauche dans la zone shell centrée. */
.dash-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-16);
    text-align: left;
}
.dash-header {
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}
.dash-header__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.dash-header__logo {
    /* height + max-height en !important pour résister au preflight Tailwind
       (chargé sur les pages admin) qui applique "height: auto" sur img.
       max-width évite tout débordement sur très petit écran. */
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    max-width: 180px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}
.dash-header__meta {
    flex: 1;
    min-width: 200px;
}
.dash-header__eyebrow {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
}
.dash-header__title {
    margin: 0;
    font-size: 1.4rem;
}
.dash-header__klass {
    font-weight: 500;
    color: var(--ink-soft);
    font-size: 1rem;
}

/* Toolbar liste : titre à gauche + bouton export à droite */
.dash-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.dash-list-toolbar__title {
    margin: 0;
    font-size: 1.3rem;
    color: var(--accent-2);
}
.dash-list-toolbar__count {
    display: inline-block;
    margin-left: var(--space-2);
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    padding: .15rem .65rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    vertical-align: middle;
}

/* Champ de recherche/filtre instantané (dashboard + admin) */
.dash-search {
    margin-bottom: var(--space-4);
}
.dash-search__label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    margin-bottom: var(--space-2);
}
.dash-search__field {
    position: relative;
    display: flex;
    align-items: center;
}
.dash-search__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-soft);
    pointer-events: none;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}
.dash-search__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-10) 0 var(--space-10);
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: white;
    box-shadow: var(--shadow-sm);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    /* Retire l'icône loupe native du type=search */
    -webkit-appearance: none;
    appearance: none;
}
.dash-search__input::-webkit-search-cancel-button { display: none; }
.dash-search__input:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(30,92,142,.18);
}
.dash-search__clear {
    position: absolute;
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--paper-2);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.dash-search__clear:hover {
    background: var(--ink);
    color: white;
}
/* Padding right du champ uniquement quand le bouton clear est visible */
.dash-search__input:not(:placeholder-shown) { padding-right: calc(var(--space-3) + 36px); }

/* État vide quand la recherche ne donne rien */
.dash-no-results {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--ink-soft);
    font-size: 1rem;
}
.dash-no-results strong { color: var(--accent); }

/* Liste de noms cliquables (dashboard + admin) */
.dash-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.dash-list__row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}
.dash-list__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.dash-list__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--accent-2);
}
.dash-list__name {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}
.dash-list__date {
    color: var(--ink-soft);
    font-size: .9rem;
    white-space: nowrap;
}
.dash-list__delete-form {
    display: flex;
    align-items: stretch;
}
@media (max-width: 480px) {
    .dash-list__item { flex-wrap: wrap; gap: var(--space-2); }
    .dash-list__date { font-size: .8rem; }
}

/* Lien retour à la liste (au-dessus du détail) */
.dash-back {
    margin-bottom: var(--space-4);
}

.dash-empty {
    padding: var(--space-12) var(--space-6);
    color: var(--ink-soft);
    text-align: center;
}
.dash-empty__icon {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 var(--space-3);
}
.dash-empty__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}
.dash-empty__sub {
    margin: 0;
    font-size: .95rem;
}

.answer-card {
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}
.answer-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--paper-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.answer-card__name {
    font-size: 1.6rem;
    color: var(--accent-2);
    margin: 0;
}
.answer-card__date {
    color: var(--ink-soft);
    font-size: .9rem;
}
.answer-card__meta {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--paper-2);
    font-size: .8rem;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.answer-card__meta strong { color: var(--ink); }
.answer-card__actions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 2px solid var(--paper-2);
    display: flex;
    justify-content: flex-start;
}
.answer-card__section {
    margin-bottom: var(--space-6);
}
.answer-card__section h3 {
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.answer-card__qa {
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
    border-left: 3px solid var(--sand);
}
.answer-card__q {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: .92rem;
    margin-bottom: var(--space-1);
}
.answer-card__a {
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}
/* -- Dashboard : classement résultat (1 → 6 numérotés colorés) ------------- */
.rank-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rank;
    display: grid;
    gap: var(--space-2);
}
.rank-result-list li {
    counter-increment: rank;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    line-height: 1.4;
}
.rank-result-list li::before {
    content: counter(rank);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.rank-result-list li:nth-child(1)::before { background: var(--accent); }
.rank-result-list li:nth-child(2)::before { background: #E8643E; }
.rank-result-list li:nth-child(3)::before { background: var(--sunshine); color: var(--ink); }
.rank-result-list li:nth-child(4)::before { background: var(--grass); }
.rank-result-list li:nth-child(5)::before { background: var(--accent-2); }
.rank-result-list li:nth-child(6)::before { background: var(--ink-soft); }

/* -- 17. Header / nav admin ------------------------------------------------- */
.topbar {
    background: white;
    border-bottom: 2px solid var(--ink);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 700;
}
.topbar a { color: var(--ink); text-decoration: none; transition: color var(--t-fast); }
.topbar a:hover { color: var(--accent); }
.topbar nav { display: flex; gap: var(--space-4); align-items: center; font-size: .95rem; }
.topbar form { display: inline; }
.topbar button {
    font: inherit; background: none; border: none; cursor: pointer;
    color: var(--ink-soft);
}
.topbar button:hover { color: var(--accent); }

/* -- 18. Flash messages ----------------------------------------------------- */
.flash {
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) auto;
    max-width: 720px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.flash--success { background: #E9FBE4; border-color: var(--grass); }
.flash--error   { background: #FFE9E7; border-color: var(--accent); }
.flash--warning { background: #FFF7DA; border-color: var(--sunshine); }
.flash--info    { background: #E4F2FB; border-color: var(--accent-2); }

/* -- 19. Footer ------------------------------------------------------------- */
.footer {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: .85rem;
    color: var(--ink-soft);
}
.footer a { color: var(--accent-2); }

/* -- 20. Admin (rétro-compat : on garde les classes Tailwind dans l'admin) - */
/* Le runtime Tailwind chargé en local génère le reste à la volée. */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
}

button[data-loading="true"] {
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}

pre.json-view {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* =============================================================================
 * Pages d'erreur (404, 500) — autonomes, ne dépendent pas de Tailwind.
 * Rendues en mode hide_chrome=true → seul app.css est chargé.
 * ========================================================================== */
.card-error {
    max-width: 30rem;
    margin: 4rem auto;
    padding: 2.5rem 2rem;
    background: var(--paper, #ffffff);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    text-align: center;
}

.card-error__code {
    font-size: 3.5rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 0 0 0.5rem;
    line-height: 1;
}

.card-error__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink, #1f2937);
    margin: 0 0 0.75rem;
}

.card-error__message {
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.card-error__button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: var(--accent, #4f46e5);
    color: #ffffff;
    font-weight: 500;
    border-radius: var(--radius-md, 0.5rem);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.card-error__button:hover {
    opacity: 0.9;
}

/* =============================================================================
 * Utilities + classes sémantiques (Phase 5 du refacto — remplace les style=""
 * inline qui traînaient dans les vues).
 * ========================================================================== */

/* --- Helpers d'alignement --------------------------------------------------- */
.u-text-center {
    text-align: center;
}

.u-nowrap {
    white-space: nowrap;
}

.u-mb-md {
    margin-bottom: 1rem;
}

/* --- Accessibilité : contenu visible des lecteurs d'écran uniquement -------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Honeypot : champ caché pour piéger les bots ---------------------------- */
/* Pas display:none (les bots l'ignoreraient) — décalé hors écran. */
.honeypot {
    position: absolute;
    left: -10000px;
}

/* --- Variations du step-card ------------------------------------------------ */
.step-card__heading {
    text-align: center;
    color: var(--accent);
    margin-top: 0.5rem;
}

.step-card__heading--main {
    color: inherit;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.step-card__heading--success {
    color: var(--accent-2);
}

.step-card__sub {
    font-size: 0.95rem;
}

.step-card__number {
    color: var(--accent-2);
}

/* --- Variations de .field --------------------------------------------------- */
.field__error--block {
    margin-bottom: 1rem;
}

/* --- Variations de .form-shell ---------------------------------------------- */
.form-shell--narrow {
    max-width: 760px;
}

/* --- Variations de .actions ------------------------------------------------- */
.actions--center {
    justify-content: center;
}