/**
 * MaBelleTable — Direction "Carnet & Tampon"
 *
 * En dev : chargé EN PLUS du CDN Tailwind (config inline dans les layouts)
 * En prod : tailwindcss -i public/css/app.css -o public/css/app.min.css --minify
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ────────────────────────────────────────────────────────────
 * Couche "Carnet & Tampon" — classes opt-in
 * (lignes cahier, marge rouge, scribble actif, divider ondulé)
 * ──────────────────────────────────────────────────────────── */

/* Page "carnet" : lignes horizontales subtiles */
.mbt-lined {
    background-image: linear-gradient(rgba(80, 50, 20, 0.05) 1px, transparent 1px);
    background-size: 100% 28px;
}

/* Souligné manuscrit actif (nav header) */
.active-scribble {
    position: relative;
}
.active-scribble::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 4'><path d='M0 2 Q10 0 20 2 T40 2 T60 2' fill='none' stroke='%23b8472d' stroke-width='1.4' stroke-linecap='round'/></svg>");
    background-repeat: repeat-x;
    background-size: 60px 4px;
}

/* Divider squiggle (séparateur ondulé entre sections) */
.mbt-divider-squiggle {
    height: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'><path d='M0 4 Q12.5 0 25 4 T50 4 T75 4 T100 4' fill='none' stroke='%232a1f12' stroke-width='1.2' stroke-linecap='round' opacity='0.5'/></svg>");
    background-repeat: repeat-x;
    background-size: 100px 8px;
}

/* Aide accessibilité : Kalam et Caveat sont moins lisibles — minimum 14px */
.font-hand,
.font-script {
    font-size: max(14px, 1em);
}

/* ────────────────────────────────────────────────────────────
 * Base : scrollbars + selection en couleurs Carnet
 * ──────────────────────────────────────────────────────────── */
@layer base {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #c9a87c; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #b8472d; }
    ::selection { background-color: #b8472d; color: #faf3e3; }
}