/* === ESPAGNOL FACILE V3 — cssBase — Mobile First === */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
    --rouge:        #AA151B;
    --rouge-d:      #7F0F14;
    --rouge-l:      #FEE9EA;
    --jaune:        #F1BF00;
    --jaune-l:      #FFFBEA;
    --jaune-m:      #FEF3C7;
    --dark:         #111827;
    --texte:        #1E2533;
    --muted:        #6B7280;
    --bordure:      #E5E7EB;
    --bg:           #F7F8FA;
    --blanc:        #FFFFFF;
    --vert:         #15803D;
    --vert-l:       #DCFCE7;
    --bleu:         #1D4ED8;
    --bleu-l:       #DBEAFE;
    --orange:       #C2410C;
    --orange-l:     #FFF7ED;

    --col-a-voir:   #6B7280;
    --col-encours:  var(--bleu);
    --col-compris:  var(--orange);
    --col-acquis:   var(--vert);

    --ombre:        0 2px 12px rgba(17,24,39,.07);
    --ombre-md:     0 6px 24px rgba(17,24,39,.10);
    --ombre-lg:     0 16px 48px rgba(17,24,39,.13);
    --radius:       14px;
    --radius-sm:    8px;
    --radius-lg:    22px;
    --transition:   180ms ease;

    --font-d: 'Fraunces', Georgia, serif;
    --font-b: 'DM Sans', system-ui, sans-serif;

    /* Tailles tactiles minimum 44px (Apple HIG / WCAG) */
    --tap-min: 44px;
}

*,*::before,*::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
    margin: 0;
    font-family: var(--font-b);
    /* Mobile : 15px, Desktop : 16px */
    font-size: 15px;
    line-height: 1.65;
    color: var(--texte);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Évite le débordement horizontal */
    overflow-x: hidden;
}
@media(min-width:640px){ body { font-size: 16px } }

a { color: inherit; text-decoration: none }
img { max-width: 100%; height: auto; display: block }
button { font-family: var(--font-b); cursor: pointer; border: none; background: none }

h1,h2,h3,h4 {
    font-family: var(--font-d);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark);
    margin: 0 0 .5em;
}
/* Mobile First : taille de base mobile, agrandit sur desktop */
h1 { font-size: 1.75rem; font-weight: 900 }
h2 { font-size: 1.25rem }
h3 { font-size: 1rem }
@media(min-width:640px){
    h1 { font-size: clamp(1.8rem,4vw,2.8rem) }
    h2 { font-size: clamp(1.25rem,2.5vw,1.65rem) }
}

p { margin: 0 0 1em }
strong { font-weight: 600 }

/* Flash */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .875rem; font-weight: 500 }
.flash-success { background: var(--vert-l);   color: var(--vert);    border-left: 3px solid var(--vert) }
.flash-error   { background: var(--rouge-l);  color: var(--rouge-d); border-left: 3px solid var(--rouge) }
.flash-info    { background: var(--bleu-l);   color: var(--bleu);    border-left: 3px solid var(--bleu) }

.muted { color: var(--muted) }
.text-center { text-align: center }