/* ============================================================
   base.css — Variables, reset, typographie, utilitaires
   Police : Fraunces (titres) + DM Sans (corps)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ---- Variables ----------------------------------------- */
:root {
    /* Couleurs */
    --c-bg:           #F5F2ED;
    --c-bg-2:         #EEE9E1;
    --c-surface:      #FFFFFF;
    --c-surface-2:    #F0EDE7;
    --c-primary:      #3B82F6;
    --c-primary-dark: #2563EB;
    --c-primary-lite: #EFF6FF;
    --c-primary-glow: rgba(59, 130, 246, .15);
    --c-accent:       #E07B3A;
    --c-accent-dark:  #B85F22;
    --c-accent-lite:  #FDF0E7;
    --c-accent-glow:  rgba(224, 123, 58, .15);
    --c-danger:       #C0392B;
    --c-danger-lite:  #FDECEA;
    --c-success:      #16A34A;
    --c-success-lite: #DCFCE7;
    --c-warning:      #C97B20;
    --c-warning-lite: #FEF5E4;
    --c-text:         #1C1C1A;
    --c-text-2:       #5A574F;
    --c-text-3:       #98948C;
    --c-border:       #DDD9D1;
    --c-border-2:     #C8C4BB;

    /* Dégradés */
    --grad-primary:   linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --grad-accent:    linear-gradient(135deg, #E07B3A 0%, #B85F22 100%);
    --grad-warm:      linear-gradient(135deg, #F5F2ED 0%, #EEE9E1 100%);
    --grad-card:      linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(245,242,237,.6) 100%);
    --grad-hero:      linear-gradient(135deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%);

    /* Typographie */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    /* Espacements */
    --sp-xs:  0.35rem;
    --sp-sm:  0.65rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2.5rem;
    --sp-2xl: 4rem;

    /* Rayons */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  16px;
    --r-xl:  24px;
    --r-2xl: 32px;
    --r-full: 999px;

    /* Ombres */
    --shadow-xs: 0 1px 2px rgba(28,28,26,.05);
    --shadow-sm: 0 1px 3px rgba(28,28,26,.08), 0 1px 2px rgba(28,28,26,.04);
    --shadow-md: 0 4px 16px rgba(28,28,26,.10), 0 2px 4px rgba(28,28,26,.05);
    --shadow-lg: 0 12px 40px rgba(28,28,26,.12), 0 4px 12px rgba(28,28,26,.06);
    --shadow-primary: 0 8px 24px rgba(59,130,246,.25), 0 2px 6px rgba(59,130,246,.15);
    --shadow-accent:  0 8px 24px rgba(224,123,58,.25), 0 2px 6px rgba(224,123,58,.15);

    /* Transitions */
    --t-fast:   .12s ease;
    --t-normal: .22s ease;
    --t-slow:   .4s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Reset -------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family:      var(--font-body);
    font-size:        1rem;
    font-weight:      400;
    line-height:      1.65;
    color:            var(--c-text);
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(59,130,246,.04) 0%, transparent 60%),
        radial-gradient(ellipse at 100% 100%, rgba(224,123,58,.04) 0%, transparent 60%);
    min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary-dark); }
ul, ol { list-style: none; }

/* ---- Typographie -------------------------------------- */
h1, h2, h3, h4 {
    font-family:    var(--font-display);
    font-weight:    600;
    line-height:    1.2;
    color:          var(--c-text);
    letter-spacing: -.015em;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { max-width: 65ch; }
p + p { margin-top: var(--sp-md); }

small { font-size: .82rem; color: var(--c-text-2); }
strong { font-weight: 600; }

/* ---- Utilitaires -------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--c-text-2); }
.text-small  { font-size: .875rem; }

.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm      { gap: var(--sp-sm); }
.gap-md      { gap: var(--sp-md); }

/* ---- Alertes ------------------------------------------ */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-sm);
    padding:       var(--sp-sm) var(--sp-md);
    border-radius: var(--r-md);
    font-size:     .9rem;
    line-height:   1.5;
    margin-bottom: var(--sp-lg);
    animation:     slideDown .2s ease both;
}

.alert::before {
    font-size:   1rem;
    flex-shrink: 0;
    margin-top:  .1rem;
}

.alert-error {
    background:   var(--c-danger-lite);
    color:        var(--c-danger);
    border:       1px solid rgba(192,57,43,.2);
    border-left:  3px solid var(--c-danger);
}
.alert-error::before { content: '⚠'; }

.alert-success {
    background:   var(--c-success-lite);
    color:        var(--c-primary-dark);
    border:       1px solid rgba(27,107,90,.2);
    border-left:  3px solid var(--c-primary);
}
.alert-success::before { content: '✓'; }

.alert-warning {
    background:   var(--c-warning-lite);
    color:        var(--c-warning);
    border:       1px solid rgba(201,123,32,.2);
    border-left:  3px solid var(--c-warning);
}
.alert-warning::before { content: '!'; font-weight: 600; }

/* ---- Badges ------------------------------------------- */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    border-radius: var(--r-full);
    font-size:     .72rem;
    font-weight:   600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-green  { background: var(--c-primary-lite); color: var(--c-primary-dark); }
.badge-amber  { background: var(--c-accent-lite);  color: var(--c-accent-dark); }
.badge-gray   { background: var(--c-surface-2);    color: var(--c-text-2); }
.badge-red    { background: var(--c-danger-lite);  color: var(--c-danger); }

/* ---- Cards -------------------------------------------- */
.card {
    background:    var(--c-surface);
    border-radius: var(--r-lg);
    border:        1px solid var(--c-border);
    box-shadow:    var(--shadow-sm);
    padding:       var(--sp-xl);
    position:      relative;
    overflow:      hidden;
    transition:    box-shadow var(--t-normal), transform var(--t-normal);
}

.card::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: var(--grad-card);
    opacity:  .5;
    pointer-events: none;
}

.card > * { position: relative; }

.card-sm { padding: var(--sp-lg); }

.card-title {
    font-family:    var(--font-display);
    font-size:      1.05rem;
    font-weight:    600;
    margin-bottom:  var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom:  1px solid var(--c-border);
    color:          var(--c-text);
}

/* ---- Divider ------------------------------------------ */
.divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: var(--sp-lg) 0;
}

/* ---- Avatar ------------------------------------------- */
.avatar {
    width:         40px;
    height:        40px;
    border-radius: var(--r-full);
    background:    var(--grad-primary);
    color:         #fff;
    font-weight:   600;
    font-size:     .85rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    overflow:      hidden;
    box-shadow:    0 2px 8px rgba(27,107,90,.2);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-lg {
    width:     64px;
    height:    64px;
    font-size: 1.35rem;
}

/* ---- Animations --------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes pulse-ring {
    0%   { transform: scale(1);    opacity: .6; }
    100% { transform: scale(1.4);  opacity: 0; }
}

.animate-in {
    animation: fadeIn .35s cubic-bezier(.4, 0, .2, 1) both;
}

/* Stagger pour les enfants directs */
.stagger-children > * {
    opacity: 0;
    animation: slideUp .4s cubic-bezier(.4, 0, .2, 1) both;
}
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .10s; }
.stagger-children > *:nth-child(3) { animation-delay: .15s; }
.stagger-children > *:nth-child(4) { animation-delay: .20s; }
.stagger-children > *:nth-child(5) { animation-delay: .25s; }
.stagger-children > *:nth-child(6) { animation-delay: .30s; }