/* ============================================================
   LANTHEAUME.FR — Material 3 Expressive
   Palette : Terracotta chaude · Playfair Display + DM Sans
   ============================================================ */

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

/* ============================================================
   TOKENS M3
   ============================================================ */
:root {
    --md-primary:               #B5470A;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #FFDBC8;
    --md-on-primary-container:  #3A0D00;

    --md-secondary:              #765848;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #FFDBC8;
    --md-on-secondary-container: #2B160A;

    --md-tertiary:               #68607B;
    --md-on-tertiary:            #FFFFFF;
    --md-tertiary-container:     #EEE7FF;
    --md-on-tertiary-container:  #221A34;

    --md-error:              #BA1A1A;
    --md-on-error:           #FFFFFF;
    --md-error-container:    #FFDAD6;
    --md-on-error-container: #410002;

    --md-success:              #2E7D32;
    --md-success-container:    #D4EDDA;
    --md-on-success-container: #0A3D0F;

    --md-warning:              #B45309;
    --md-warning-container:    #FEF3C7;
    --md-on-warning-container: #451A00;

    --md-surface:            #FFF8F6;
    --md-surface-dim:        #EDD8D0;
    --md-surface-variant:    #F4DED6;
    --md-on-surface:         #211208;
    --md-on-surface-variant: #52443D;
    --md-outline:            #85736C;
    --md-outline-variant:    #D7C2BB;

    --md-inverse-surface:    #372319;
    --md-inverse-on-surface: #FFEEE8;

    --md-primary-rgb:             181, 71, 10;
    --md-elev-1: rgba(var(--md-primary-rgb),0.05);
    --md-elev-2: rgba(var(--md-primary-rgb),0.08);
    --md-elev-3: rgba(var(--md-primary-rgb),0.11);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --shape-xs:   4px;
    --shape-sm:   8px;
    --shape-md:   12px;
    --shape-lg:   16px;
    --shape-xl:   28px;
    --shape-full: 9999px;
}

/* ============================================================
   THÈMES M3 — Océan, Forêt, Lavande, Ardoise
   ============================================================ */

[data-theme="ocean"] {
    --md-primary:               #0061A4;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #D1E4FF;
    --md-on-primary-container:  #001D36;
    --md-secondary:              #535F70;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #D7E3F7;
    --md-on-secondary-container: #101C2B;
    --md-tertiary:               #6B5778;
    --md-on-tertiary:            #FFFFFF;
    --md-tertiary-container:     #F2DAFF;
    --md-on-tertiary-container:  #251431;
    --md-surface:            #F8FAFB;
    --md-surface-dim:        #D8DAE0;
    --md-surface-variant:    #DFE2EB;
    --md-on-surface:         #191C20;
    --md-on-surface-variant: #43474E;
    --md-outline:            #73777F;
    --md-outline-variant:    #C3C7CF;
    --md-inverse-surface:    #2E3135;
    --md-inverse-on-surface: #F0F0F7;
    --md-primary-rgb:             0, 97, 164;
    --md-elev-1: rgba(0,97,164,0.05);
    --md-elev-2: rgba(0,97,164,0.08);
    --md-elev-3: rgba(0,97,164,0.11);
}

[data-theme="foret"] {
    --md-primary:               #386A20;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #B7F397;
    --md-on-primary-container:  #042100;
    --md-secondary:              #54634D;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #D7EACD;
    --md-on-secondary-container: #121F0E;
    --md-tertiary:               #386468;
    --md-on-tertiary:            #FFFFFF;
    --md-tertiary-container:     #BCEBEF;
    --md-on-tertiary-container:  #002022;
    --md-surface:            #F8FAF4;
    --md-surface-dim:        #D8DAD2;
    --md-surface-variant:    #DEE5D8;
    --md-on-surface:         #1A1C18;
    --md-on-surface-variant: #424940;
    --md-outline:            #72796F;
    --md-outline-variant:    #C2C9BD;
    --md-inverse-surface:    #2F312C;
    --md-inverse-on-surface: #F1F2EB;
    --md-primary-rgb:             56, 106, 32;
    --md-elev-1: rgba(56,106,32,0.05);
    --md-elev-2: rgba(56,106,32,0.08);
    --md-elev-3: rgba(56,106,32,0.11);
}

[data-theme="lavande"] {
    --md-primary:               #6750A4;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #EADDFF;
    --md-on-primary-container:  #21005D;
    --md-secondary:              #625B71;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #E8DEF8;
    --md-on-secondary-container: #1D192B;
    --md-tertiary:               #7D5260;
    --md-on-tertiary:            #FFFFFF;
    --md-tertiary-container:     #FFD8E4;
    --md-on-tertiary-container:  #31111D;
    --md-surface:            #FFFBFE;
    --md-surface-dim:        #DED8E1;
    --md-surface-variant:    #E7E0EC;
    --md-on-surface:         #1C1B1F;
    --md-on-surface-variant: #49454F;
    --md-outline:            #79747E;
    --md-outline-variant:    #CAC4D0;
    --md-inverse-surface:    #313033;
    --md-inverse-on-surface: #F4EFF4;
    --md-primary-rgb:             103, 80, 164;
    --md-elev-1: rgba(103,80,164,0.05);
    --md-elev-2: rgba(103,80,164,0.08);
    --md-elev-3: rgba(103,80,164,0.11);
}

[data-theme="ardoise"] {
    --md-primary:               #445E91;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #D8E2FF;
    --md-on-primary-container:  #001A41;
    --md-secondary:              #585E71;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #DCE2F9;
    --md-on-secondary-container: #151B2C;
    --md-tertiary:               #74536C;
    --md-on-tertiary:            #FFFFFF;
    --md-tertiary-container:     #FFD7F4;
    --md-on-tertiary-container:  #2B1126;
    --md-surface:            #F9F9FF;
    --md-surface-dim:        #D9D9E4;
    --md-surface-variant:    #E2E2EC;
    --md-on-surface:         #1A1B20;
    --md-on-surface-variant: #45464F;
    --md-outline:            #75767F;
    --md-outline-variant:    #C5C6D0;
    --md-inverse-surface:    #2F3036;
    --md-inverse-on-surface: #F1F0F7;
    --md-primary-rgb:             68, 94, 145;
    --md-elev-1: rgba(68,94,145,0.05);
    --md-elev-2: rgba(68,94,145,0.08);
    --md-elev-3: rgba(68,94,145,0.11);
}

/* ============================================================
   MODE SOMBRE — variantes dark pour chaque thème
   ============================================================ */

/* Terracotta dark */
[data-dark="1"],
[data-dark="1"][data-theme="terracotta"] {
    --md-primary:               #FFB59A;
    --md-on-primary:            #5F1700;
    --md-primary-container:     #872E00;
    --md-on-primary-container:  #FFDBC8;
    --md-secondary:              #E7BDA7;
    --md-on-secondary:           #442A1C;
    --md-secondary-container:    #5D4031;
    --md-on-secondary-container: #FFDBC8;
    --md-surface:            #1A0F0A;
    --md-surface-dim:        #1A0F0A;
    --md-surface-variant:    #2E1F18;
    --md-on-surface:         #F0DDD6;
    --md-on-surface-variant: #D9C2BA;
    --md-outline:            #A48D85;
    --md-outline-variant:    #52443D;
    --md-inverse-surface:    #F0DDD6;
    --md-inverse-on-surface: #372319;
    --md-primary-rgb:             255, 181, 154;
    --md-elev-1: rgba(255,181,154,0.05);
    --md-elev-2: rgba(255,181,154,0.08);
    --md-elev-3: rgba(255,181,154,0.11);
}

[data-dark="1"][data-theme="ocean"] {
    --md-primary:               #A0C9FF;
    --md-on-primary:            #003060;
    --md-primary-container:     #004888;
    --md-on-primary-container:  #D1E4FF;
    --md-secondary:              #BBC7DB;
    --md-on-secondary:           #253141;
    --md-secondary-container:    #3C4858;
    --md-on-secondary-container: #D7E3F7;
    --md-surface:            #0E1317;
    --md-surface-dim:        #0E1317;
    --md-surface-variant:    #1C2530;
    --md-on-surface:         #E2E8F0;
    --md-on-surface-variant: #BBC7D4;
    --md-outline:            #8C96A2;
    --md-outline-variant:    #3A4450;
    --md-primary-rgb:             160, 201, 255;
    --md-elev-1: rgba(160,201,255,0.05);
    --md-elev-2: rgba(160,201,255,0.08);
    --md-elev-3: rgba(160,201,255,0.11);
}

[data-dark="1"][data-theme="foret"] {
    --md-primary:               #9CD67D;
    --md-on-primary:            #0A3800;
    --md-primary-container:     #1F5200;
    --md-on-primary-container:  #B7F397;
    --md-secondary:              #BBCBB3;
    --md-on-secondary:           #273420;
    --md-secondary-container:    #3D4B35;
    --md-on-secondary-container: #D7EACD;
    --md-surface:            #0F130C;
    --md-surface-dim:        #0F130C;
    --md-surface-variant:    #1D2619;
    --md-on-surface:         #E2EBD9;
    --md-on-surface-variant: #BEC8B8;
    --md-outline:            #899082;
    --md-outline-variant:    #37402F;
    --md-primary-rgb:             156, 214, 125;
    --md-elev-1: rgba(156,214,125,0.05);
    --md-elev-2: rgba(156,214,125,0.08);
    --md-elev-3: rgba(156,214,125,0.11);
}

[data-dark="1"][data-theme="lavande"] {
    --md-primary:               #CFBDFF;
    --md-on-primary:            #371E73;
    --md-primary-container:     #4E378B;
    --md-on-primary-container:  #EADDFF;
    --md-secondary:              #CCC2DC;
    --md-on-secondary:           #332D41;
    --md-secondary-container:    #4A4458;
    --md-on-secondary-container: #E8DEF8;
    --md-surface:            #131218;
    --md-surface-dim:        #131218;
    --md-surface-variant:    #211F26;
    --md-on-surface:         #E6E1E5;
    --md-on-surface-variant: #CAC4D0;
    --md-outline:            #938F99;
    --md-outline-variant:    #49454F;
    --md-primary-rgb:             207, 189, 255;
    --md-elev-1: rgba(207,189,255,0.05);
    --md-elev-2: rgba(207,189,255,0.08);
    --md-elev-3: rgba(207,189,255,0.11);
}

[data-dark="1"][data-theme="ardoise"] {
    --md-primary:               #ADC6FF;
    --md-on-primary:            #102F60;
    --md-primary-container:     #2B4678;
    --md-on-primary-container:  #D8E2FF;
    --md-secondary:              #BEC6DC;
    --md-on-secondary:           #283041;
    --md-secondary-container:    #3E4759;
    --md-on-secondary-container: #DCE2F9;
    --md-surface:            #111318;
    --md-surface-dim:        #111318;
    --md-surface-variant:    #1E2128;
    --md-on-surface:         #E3E2E9;
    --md-on-surface-variant: #C5C6D0;
    --md-outline:            #8F909A;
    --md-outline-variant:    #44464F;
    --md-primary-rgb:             173, 198, 255;
    --md-elev-1: rgba(173,198,255,0.05);
    --md-elev-2: rgba(173,198,255,0.08);
    --md-elev-3: rgba(173,198,255,0.11);
}

/* ============================================================
   MATERIAL SYMBOLS — réglages globaux
   ============================================================ */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}

/* Icône remplie (pour état actif : favori, étoile, etc.) */
.material-symbols-rounded.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icône petite (badges, meta) */
.material-symbols-rounded.sm {
    font-size: 16px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Icône grande (placeholders, illustrations) */
.material-symbols-rounded.lg {
    font-size: 40px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: clamp(14px, 2vw, 16px);
    color: var(--md-on-surface);
    background-color: var(--md-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--md-primary);
    text-decoration: none;
    transition: opacity 0.15s;
}

a:hover { opacity: 0.8; }

/* ============================================================
   PAGE D'ACCUEIL
   ============================================================ */

body.page-accueil {
    background: linear-gradient(150deg, #E8956D 0%, #87CEEB 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accueil-container {
    text-align: center;
    padding: clamp(20px, 5vw, 40px);
    max-width: min(520px, 95vw);
    width: 100%;
}

.accueil-container h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2em, 8vw, 3em);
    font-weight: 600;
    color: #3A0D00;
    margin-bottom: clamp(12px, 3vw, 20px);
    letter-spacing: -0.01em;
}

.accueil-intro {
    font-size: clamp(1.05em, 3.5vw, 1.15em);
    color: #3A0D00;
    opacity: 0.85;
    margin-bottom: clamp(12px, 3vw, 20px);
    line-height: 1.7;
}

.accueil-texte {
    text-align: left;
    background-color: rgba(255,255,255,0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--shape-xl);
    padding: clamp(20px, 5vw, 28px);
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.5);
}

.accueil-texte p {
    margin-bottom: 16px;
    line-height: 1.75;
    color: var(--md-on-surface);
    font-size: clamp(0.9em, 2.5vw, 1em);
}

.accueil-texte p:last-child { margin-bottom: 0; }

.accueil-signature {
    text-align: right;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05em;
    color: var(--md-primary);
    margin-top: 8px;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    padding: clamp(13px, 2.5vw, 15px) clamp(20px, 4vw, 32px);
    font-family: var(--font-body);
    font-size: clamp(1em, 3.5vw, 1.05em);
    font-weight: 500;
    border-radius: var(--shape-full);
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: box-shadow 0.2s, opacity 0.15s;
    letter-spacing: 0.01em;
}

.btn-principal:hover {
    opacity: 0.92;
    box-shadow: 0 3px 12px rgba(var(--md-primary-rgb),0.35);
}

.btn-principal:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

.btn-secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    padding: clamp(8px, 2vw, 10px) clamp(16px, 3vw, 24px);
    font-family: var(--font-body);
    font-size: clamp(0.9em, 2.5vw, 1em);
    font-weight: 500;
    border-radius: var(--shape-full);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.btn-secondaire:hover {
    opacity: 0.88;
    color: var(--md-on-primary-container);
}

.btn-secondaire:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--md-error);
    color: var(--md-on-error);
    border: none;
    padding: clamp(8px, 2vw, 10px) clamp(16px, 3vw, 24px);
    font-family: var(--font-body);
    font-size: clamp(0.95em, 2.5vw, 1em);
    font-weight: 500;
    border-radius: var(--shape-full);
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.2s;
}

.btn-danger:hover {
    opacity: 0.9;
    box-shadow: 0 3px 10px rgba(186,26,26,0.3);
}

/* ============================================================
   FORMULAIRE DE CONNEXION
   ============================================================ */

.login-box {
    background-color: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--shape-xl);
    padding: clamp(24px, 5vw, 32px);
    border: 1px solid rgba(255,255,255,0.6);
    text-align: left;
    animation: fade-up 0.3s ease;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-box h2 {
    font-family: var(--font-display);
    text-align: center;
    color: #3A0D00;
    font-size: clamp(1.3em, 5vw, 1.5em);
    font-weight: 400;
    margin-bottom: 24px;
}

.login-box label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: clamp(0.88em, 3vw, 0.95em);
    color: #5C2A00;
    letter-spacing: 0.02em;
}

.login-box input {
    width: 100%;
    padding: clamp(12px, 2.5vw, 14px) 16px;
    margin-bottom: 16px;
    border: 1.5px solid rgba(90,40,0,0.25);
    border-radius: var(--shape-md);
    font-family: var(--font-body);
    font-size: clamp(1em, 3.5vw, 1.05em);
    background: rgba(255,255,255,0.92);
    color: #1C1B1F;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-box input:focus {
    outline: none;
    border-color: #B5470A;
    box-shadow: 0 0 0 3px rgba(181,71,10,0.15);
}

.login-box a {
    color: #B5470A;
    font-size: clamp(0.92em, 3vw, 0.95em);
}

.erreur {
    background-color: var(--md-error-container);
    color: var(--md-on-error-container);
    padding: 12px 16px;
    border-radius: var(--shape-md);
    margin-bottom: 16px;
    text-align: center;
    font-size: 0.92em;
    font-weight: 500;
}

.message-succes {
    background-color: var(--md-success-container);
    color: var(--md-on-success-container);
    padding: 12px 16px;
    border-radius: var(--shape-md);
    margin-bottom: 16px;
    font-size: 0.92em;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.navbar {
    background-color: var(--md-surface);
    color: var(--md-on-surface);
    padding: 0 clamp(12px, 3vw, 24px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
    border-bottom: 1px solid var(--md-outline-variant);
    min-height: 60px;
}

.nav-gauche a {
    font-family: var(--font-display);
    font-size: clamp(1em, 3vw, 1.2em);
    font-weight: 600;
    color: var(--md-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.nav-gauche a:hover { opacity: 0.8; }

/* Chips de préférence (mode sombre) */
.preference-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    border: 1.5px solid transparent;
    border-radius: var(--shape-full);
    padding: 7px 14px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
}
.preference-chip.actif {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-color: var(--md-primary);
}
.preference-chip .material-symbols-rounded { font-size: 17px; }

.preference-chip:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

/* Barre de recherche navbar */
.nav-recherche {
    flex: 1;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--md-surface-variant);
    border-radius: var(--shape-full);
    padding: 0 14px;
    height: 38px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    margin: 0 12px;
    overflow: hidden;
}

.nav-recherche:focus-within {
    border-color: var(--md-primary);
    background: var(--md-surface);
}

.nav-recherche .material-symbols-rounded {
    color: var(--md-on-surface-variant);
    font-size: 20px;
    flex-shrink: 0;
}

.nav-recherche input {
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.92em;
    color: var(--md-on-surface);
    width: 100%;
    min-width: 0;
}

.nav-recherche input::placeholder { color: var(--md-on-surface-variant); }

@media (max-width: 500px) {
    .nav-recherche { max-width: 130px; margin: 0 8px; }
    .nav-recherche input::placeholder { font-size: 0.85em; }
}

/* Bouton avatar */
.navbar-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--md-outline-variant);
    background: var(--md-primary-container);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.navbar-avatar-btn:hover,
.navbar-avatar-btn.actif {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),0.15);
}

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

.navbar-avatar-initiale {
    font-family: var(--font-body);
    font-size: 1em;
    font-weight: 600;
    color: var(--md-on-primary-container);
    line-height: 1;
    user-select: none;
}

/* Menu déroulant */
.nav-bonjour {
    font-size: 0.82em;
    color: var(--md-on-surface-variant);
    padding: 12px 16px 8px;
    font-weight: 400;
    border-bottom: 1px solid var(--md-outline-variant);
    margin-bottom: 4px;
}

.nav-droite {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: clamp(12px, 3vw, 24px);
    min-width: 220px;
    background-color: var(--md-surface);
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    z-index: 999;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
    border-radius: var(--shape-lg);
    border: 1px solid var(--md-outline-variant);
}

.nav-droite.nav-ouvert { display: flex; }

.nav-droite a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--shape-sm);
    color: var(--md-on-surface);
    font-size: 0.92em;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s;
}

.nav-droite a:hover {
    background-color: var(--md-elev-2);
    color: var(--md-on-surface);
    opacity: 1;
}

.nav-droite a.nav-actif {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.nav-droite a.nav-actif .material-symbols-rounded {
    color: var(--md-primary);
}

.nav-droite a:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: -3px;
}

.nav-droite a .material-symbols-rounded {
    color: var(--md-on-surface-variant);
    font-size: 20px;
}

.nav-lien-deconnexion {
    margin-top: 4px;
    border-top: 1px solid var(--md-outline-variant) !important;
    padding-top: 10px !important;
    color: var(--md-error) !important;
}

.nav-lien-deconnexion .material-symbols-rounded {
    color: var(--md-error) !important;
}

/* Fermeture au clic extérieur */
.navbar { position: relative; }

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */

.contenu-principal {
    max-width: 1100px;
    margin: clamp(20px, 4vw, 36px) auto;
    padding: 0 clamp(12px, 3vw, 24px);
}

.contenu-principal h1 {
    font-family: var(--font-display);
    color: var(--md-on-surface);
    font-size: clamp(1.4em, 4vw, 2em);
    font-weight: 600;
    margin-bottom: clamp(16px, 3vw, 24px);
    letter-spacing: -0.01em;
}

/* ============================================================
   CARTES
   ============================================================ */

.carte {
    background-color: var(--md-surface);
    border-radius: var(--shape-xl);
    padding: clamp(20px, 4vw, 28px);
    margin-bottom: clamp(16px, 4vw, 24px);
    border: 1px solid var(--md-outline-variant);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.carte h2 {
    font-family: var(--font-display);
    color: var(--md-on-surface);
    font-weight: 400;
    font-size: clamp(1em, 3vw, 1.25em);
    margin-bottom: clamp(16px, 3vw, 20px);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-groupe { margin-bottom: clamp(12px, 2.5vw, 18px); }

.form-groupe label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.88em;
    color: var(--md-on-surface-variant);
    letter-spacing: 0.02em;
}

.form-groupe input,
.form-groupe select,
.form-groupe textarea {
    width: 100%;
    padding: clamp(10px, 2vw, 12px) 16px;
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--shape-md);
    font-size: clamp(0.9em, 2.5vw, 1em);
    font-family: var(--font-body);
    background: var(--md-surface);
    color: var(--md-on-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-groupe input:focus,
.form-groupe select:focus,
.form-groupe textarea:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),0.12);
}

.form-groupe textarea {
    min-height: 80px;
    resize: none;
    overflow: hidden;
}

.filtres-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: clamp(8px, 2vw, 12px);
}

/* ============================================================
   TABLEAU
   ============================================================ */

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.8em, 2vw, 0.92em);
}

.tableau th {
    background-color: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    padding: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px);
    text-align: left;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-size: 0.9em;
}

.tableau th:first-child { border-radius: var(--shape-sm) 0 0 0; }
.tableau th:last-child  { border-radius: 0 var(--shape-sm) 0 0; }

.tableau td {
    padding: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px);
    border-bottom: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
}

.tableau tr:hover td { background-color: var(--md-elev-1); }

@media (max-width: 600px) {
    .tableau th,
    .tableau td { padding: 8px 6px; font-size: 0.8em; }
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--shape-full);
    font-size: 0.82em;
    font-weight: 500;
}

.badge-admin {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}

.badge-utilisateur {
    background-color: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
}

.badge-categorie {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    padding: 3px 10px;
    border-radius: var(--shape-full);
    font-size: 0.82em;
    font-weight: 500;
}

.badge-classique {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    padding: 4px 12px;
    border-radius: var(--shape-full);
    font-size: 0.82em;
    font-weight: 500;
    border: 1px solid rgba(var(--md-primary-rgb),0.2);
}

.badge-classique img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.badge-classique.badge-classique-carte img {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.badge-classique-carte {
    font-size: 0.65em;
    padding: 2px 8px;
    vertical-align: middle;
}

.recette-carte { position: relative; }

.badge-classique-detail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    padding: clamp(8px, 2vw, 12px) clamp(14px, 3vw, 20px);
    border-radius: var(--shape-lg);
    font-size: clamp(0.88em, 2.5vw, 0.95em);
    font-weight: 500;
    margin-bottom: 20px;
    width: fit-content;
    border: 1px solid rgba(var(--md-primary-rgb),0.2);
}

.badge-classique-detail img {
    width: clamp(20px, 4vw, 26px);
    height: clamp(20px, 4vw, 26px);
    object-fit: contain;
}

/* ============================================================
   GRILLE DES RECETTES
   ============================================================ */

.recettes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 45vw), 1fr));
    gap: clamp(12px, 3vw, 20px);
    margin-top: 8px;
}

@keyframes recette-carte-apparition {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.recettes-grille .recette-carte {
    opacity: 0;
    animation: recette-carte-apparition 0.35s ease forwards;
}

.recettes-grille .recette-carte:nth-child(1)  { animation-delay:  0ms; }
.recettes-grille .recette-carte:nth-child(2)  { animation-delay:  50ms; }
.recettes-grille .recette-carte:nth-child(3)  { animation-delay: 100ms; }
.recettes-grille .recette-carte:nth-child(4)  { animation-delay: 150ms; }
.recettes-grille .recette-carte:nth-child(5)  { animation-delay: 200ms; }
.recettes-grille .recette-carte:nth-child(6)  { animation-delay: 250ms; }
.recettes-grille .recette-carte:nth-child(7)  { animation-delay: 300ms; }
.recettes-grille .recette-carte:nth-child(8)  { animation-delay: 350ms; }
.recettes-grille .recette-carte:nth-child(9)  { animation-delay: 400ms; }
.recettes-grille .recette-carte:nth-child(10) { animation-delay: 440ms; }
.recettes-grille .recette-carte:nth-child(11) { animation-delay: 480ms; }
.recettes-grille .recette-carte:nth-child(12) { animation-delay: 510ms; }
.recettes-grille .recette-carte:nth-child(13) { animation-delay: 540ms; }
.recettes-grille .recette-carte:nth-child(14) { animation-delay: 570ms; }
.recettes-grille .recette-carte:nth-child(15) { animation-delay: 595ms; }
.recettes-grille .recette-carte:nth-child(16) { animation-delay: 615ms; }
.recettes-grille .recette-carte:nth-child(17) { animation-delay: 635ms; }
.recettes-grille .recette-carte:nth-child(18) { animation-delay: 650ms; }
.recettes-grille .recette-carte:nth-child(19) { animation-delay: 665ms; }
.recettes-grille .recette-carte:nth-child(20) { animation-delay: 678ms; }
.recettes-grille .recette-carte:nth-child(21) { animation-delay: 690ms; }
.recettes-grille .recette-carte:nth-child(22) { animation-delay: 700ms; }
.recettes-grille .recette-carte:nth-child(23) { animation-delay: 710ms; }
.recettes-grille .recette-carte:nth-child(24) { animation-delay: 720ms; }
.recettes-grille .recette-carte:nth-child(n+25) { animation-delay: 720ms; }

.recette-carte {
    background-color: var(--md-surface);
    border-radius: var(--shape-xl);
    border: 1px solid var(--md-outline-variant);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.recette-carte:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(var(--md-primary-rgb),0.14);
    border-color: var(--md-outline);
    color: inherit;
    opacity: 1;
}

.recette-carte img {
    width: 100%;
    height: clamp(120px, 20vw, 160px);
    object-fit: cover;
}

.recette-carte-placeholder {
    width: 100%;
    height: clamp(120px, 20vw, 160px);
    background-color: var(--md-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary-container);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--md-surface-variant) 25%,
        var(--md-surface) 50%,
        var(--md-surface-variant) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: var(--shape-md);
}

.recette-carte-skeleton {
    background-color: var(--md-surface);
    border-radius: var(--shape-xl);
    border: 1px solid var(--md-outline-variant);
    overflow: hidden;
    pointer-events: none;
}

.recette-carte-skeleton .sk-image {
    width: 100%;
    height: clamp(120px, 20vw, 160px);
    border-radius: 0;
}

.recette-carte-skeleton .sk-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recette-carte-skeleton .sk-title {
    height: 16px;
    width: 75%;
}

.recette-carte-skeleton .sk-meta {
    height: 11px;
    width: 45%;
}

.recette-carte-skeleton .sk-auteur {
    height: 10px;
    width: 55%;
}

.recette-carte-placeholder .material-symbols-rounded {
    font-size: 40px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.recette-carte-corps {
    padding: clamp(12px, 2.5vw, 16px);
}

.recette-carte-corps h3 {
    font-family: var(--font-display);
    font-size: clamp(0.9em, 2.5vw, 1.05em);
    font-weight: 600;
    color: var(--md-on-surface);
    margin-bottom: 8px;
    line-height: 1.25;
}

.recette-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.82em;
    color: var(--md-on-surface-variant);
}

.recette-temps-total {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82em;
    color: var(--md-on-surface-variant);
    margin-top: 4px;
}

.recette-auteur {
    font-size: 0.82em;
    color: var(--md-on-surface-variant);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--shape-full);
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    color: var(--md-on-surface-variant);
    background: transparent;
    transition: background 0.15s;
}
.pagination-btn:hover {
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
}
.pagination-btn-actif {
    background: var(--md-primary);
    color: var(--md-on-primary);
    pointer-events: none;
}
.pagination-btn-actif:hover {
    background: var(--md-primary);
}
.pagination-btn-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.pagination-ellipsis {
    color: var(--md-on-surface-variant);
    padding: 0 4px;
    line-height: 40px;
}

/* ============================================================
   PAGE DÉTAIL RECETTE
   ============================================================ */

.recette-entete { margin-bottom: clamp(20px, 4vw, 28px); }

.recette-image-principale {
    display: block;
    max-width: 100%;
    max-height: clamp(220px, 40vw, 420px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--shape-xl);
    margin: 0 auto clamp(16px, 3vw, 20px) auto;
}

.recette-entete h1 {
    font-family: var(--font-display);
    color: var(--md-on-surface);
    font-size: clamp(1.5em, 4vw, 2.2em);
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.recette-infos-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 2vw, 10px);
    align-items: center;
    margin-bottom: 16px;
    font-size: clamp(0.82em, 2.5vw, 0.92em);
    color: var(--md-on-surface-variant);
}

.recette-temps {
    display: flex;
    gap: clamp(10px, 3vw, 16px);
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.temps-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--md-primary-container);
    padding: clamp(10px, 2vw, 12px) clamp(14px, 2.5vw, 20px);
    border-radius: var(--shape-lg);
    min-width: clamp(80px, 15vw, 100px);
    flex: 1;
    max-width: 160px;
}

.temps-label {
    font-size: clamp(0.7em, 2vw, 0.78em);
    color: var(--md-on-primary-container);
    opacity: 0.75;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.temps-valeur {
    font-size: clamp(0.9em, 2.5vw, 1.05em);
    font-weight: 600;
    color: var(--md-on-primary-container);
}

.recette-section {
    margin-bottom: clamp(16px, 4vw, 24px);
    padding-top: clamp(16px, 3vw, 20px);
    border-top: 1px solid var(--md-outline-variant);
}

.recette-section h2 {
    font-family: var(--font-display);
    color: var(--md-on-surface);
    font-size: clamp(1em, 3vw, 1.2em);
    font-weight: 400;
    margin-bottom: 14px;
}

.ingredients-liste {
    list-style: none;
    padding: 0;
}

.ingredients-liste li {
    padding: 8px 0 8px 24px;
    border-bottom: 1px solid var(--md-outline-variant);
    position: relative;
    font-size: clamp(0.9em, 2.5vw, 1em);
    color: var(--md-on-surface);
}

.ingredients-liste li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--md-primary);
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.etapes-liste { padding-left: 24px; }

.etapes-liste li {
    padding: 8px 0;
    border-bottom: 1px solid var(--md-outline-variant);
    line-height: 1.7;
    font-size: clamp(0.9em, 2.5vw, 1em);
    color: var(--md-on-surface);
}

.etapes-liste li::marker {
    color: var(--md-primary);
    font-weight: 600;
}

.recette-astuce {
    background-color: var(--md-warning-container);
    color: var(--md-on-warning-container);
    padding: clamp(14px, 3vw, 18px);
    border-radius: var(--shape-lg);
    border-left: 4px solid var(--md-warning);
}

.recette-conseil {
    background-color: var(--md-success-container);
    color: var(--md-on-success-container);
    padding: clamp(14px, 3vw, 18px);
    border-radius: var(--shape-lg);
    border-left: 4px solid var(--md-success);
}

.recette-souvenir {
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    padding: clamp(14px, 3vw, 18px);
    border-radius: var(--shape-lg);
    border-left: 4px solid var(--md-secondary);
    font-style: italic;
}

/* ============================================================
   ACTIONS RECETTE
   ============================================================ */

.recette-actions {
    margin-top: clamp(24px, 5vw, 40px);
    padding-top: clamp(16px, 4vw, 24px);
    border-top: 1px solid var(--md-outline-variant);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.actions-groupe-principal,
.actions-groupe-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--shape-full);
    border: 1.5px solid var(--md-outline-variant);
    cursor: pointer;
    font-size: clamp(0.85em, 2vw, 0.92em);
    font-family: var(--font-body);
    font-weight: 500;
    background-color: var(--md-surface);
    color: var(--md-on-surface);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-action:hover {
    background-color: var(--md-elev-2);
    border-color: var(--md-outline);
    color: var(--md-on-surface);
    opacity: 1;
}

.btn-action:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

.btn-action-icone { font-size: 1.05em; line-height: 1; }

.btn-action-modifier {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: transparent;
}

.btn-action-modifier:hover {
    opacity: 0.9;
    color: var(--md-on-primary);
    box-shadow: 0 3px 10px rgba(var(--md-primary-rgb),0.3);
}

.btn-action-supprimer {
    background-color: var(--md-error);
    color: var(--md-on-error);
    border-color: transparent;
}

.btn-action-supprimer:hover {
    opacity: 0.9;
    color: var(--md-on-error);
}

@media (max-width: 700px) {
    .grid-commentaires-notes {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .recette-actions { flex-direction: column; gap: 16px; }

    .actions-groupe-principal,
    .actions-groupe-admin {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .actions-groupe-admin {
        border-top: 1px solid var(--md-outline-variant);
        padding-top: 12px;
    }

    .btn-action {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
        font-size: 1em;
        border-radius: var(--shape-lg);
    }

    .actions-groupe-principal form,
    .actions-groupe-admin form { width: 100%; }
}

/* ============================================================
   BOUTON RETOUR EN HAUT
   ============================================================ */

#btn-top {
    position: fixed;
    bottom: clamp(16px, 4vw, 24px);
    right: clamp(16px, 4vw, 24px);
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    border-radius: var(--shape-lg);
    width: clamp(44px, 8vw, 52px);
    height: clamp(44px, 8vw, 52px);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(var(--md-primary-rgb),0.25);
    z-index: 1000;
    transition: box-shadow 0.2s, transform 0.15s;
}

#btn-top:hover {
    box-shadow: 0 6px 20px rgba(var(--md-primary-rgb),0.35);
    transform: translateY(-2px);
}

/* ============================================================
   TOAST / MESSAGE DE CONFIRMATION
   ============================================================ */

.message-confirmation {
    position: fixed;
    top: clamp(12px, 3vw, 20px);
    right: clamp(12px, 3vw, 20px);
    background-color: var(--md-inverse-surface);
    color: var(--md-inverse-on-surface);
    padding: clamp(12px, 2.5vw, 14px) clamp(18px, 3vw, 24px);
    border-radius: var(--shape-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    z-index: 2000;
    font-size: clamp(0.85em, 2.5vw, 0.92em);
    font-weight: 500;
    animation: glisser-droite 0.3s ease;
    max-width: 90vw;
}

@keyframes glisser-droite {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ============================================================
   DERNIÈRES RECETTES — PAGE D'ACCUEIL
   ============================================================ */

.accueil-dernieres { margin-top: clamp(24px, 5vw, 36px); }

.accueil-dernieres h2 {
    font-size: 0.78em;
    font-weight: 500;
    color: #3A0D00;
    opacity: 0.7;
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.accueil-recettes-grille {
    display: flex;
    gap: clamp(10px, 2vw, 14px);
    justify-content: center;
    flex-wrap: wrap;
}

.accueil-recette-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    width: clamp(90px, 25vw, 120px);
    transition: transform 0.2s;
}

.accueil-recette-carte:hover { transform: translateY(-3px); opacity: 1; }

.accueil-recette-carte img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--shape-lg);
    opacity: 0.92;
    transition: opacity 0.2s;
}

.accueil-recette-carte:hover img { opacity: 1; }

.accueil-recette-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.25);
    border-radius: var(--shape-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3A0D00;
}

.accueil-recette-placeholder .material-symbols-rounded {
    font-size: 32px;
    opacity: 0.5;
}

.accueil-recette-carte span:not(.material-symbols-rounded) {
    font-size: clamp(0.7em, 2vw, 0.78em);
    color: #3A0D00;
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
}

/* ============================================================
   EN-TÊTE DE PAGE
   ============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(16px, 3vw, 24px);
}

.page-header-gauche {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.page-header h1 {
    margin-bottom: 0;
}

.page-header-count {
    font-size: 0.88em;
    color: var(--md-on-surface-variant);
    font-weight: 400;
    white-space: nowrap;
}

.filtres-toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--md-surface);
    border: 1.5px solid var(--md-outline-variant);
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.92em;
    font-weight: 500;
    color: var(--md-on-surface);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.filtres-toggle-inline:hover {
    background: var(--md-elev-1);
    border-color: var(--md-primary);
}

.filtres-toggle-inline:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

.filtres-toggle-inline .material-symbols-rounded {
    color: var(--md-primary);
    font-size: 20px;
}

.filtres-toggle-inline .material-symbols-rounded:last-child {
    color: var(--md-on-surface-variant);
    font-size: 18px;
}

/* ============================================================
   FILTRES DÉPLIABLES (filtres-carte + filtres-toggle)
   ============================================================ */

.filtres-carte {
    margin-bottom: clamp(16px, 4vw, 24px);
}

.filtres-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 22px);
    background: var(--md-surface);
    border: none;
    border-radius: var(--shape-xl);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: clamp(0.9em, 2.5vw, 1em);
    font-weight: 500;
    color: var(--md-on-surface);
    transition: background 0.15s;
    text-align: left;
}

.filtres-toggle:hover {
    background: var(--md-elev-1);
}

.filtres-toggle-gauche {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filtres-toggle-gauche .material-symbols-rounded {
    color: var(--md-primary);
    font-size: 22px;
}

.filtres-toggle > .material-symbols-rounded {
    color: var(--md-on-surface-variant);
    font-size: 22px;
    transition: transform 0.2s;
}

.filtres-badge-actifs {
    display: inline-block;
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 0.72em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--shape-full);
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* ============================================================
   FILTRES & RECHERCHE
   ============================================================ */

.filtres-section {
    background: var(--md-surface-variant);
    border-radius: var(--shape-xl);
    padding: clamp(16px, 3vw, 20px);
    margin-bottom: clamp(16px, 3vw, 24px);
}

.filtre-barre-recherche {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--md-surface);
    border-radius: var(--shape-full);
    padding: 10px 18px;
    border: 1.5px solid var(--md-outline-variant);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filtre-barre-recherche:focus-within {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),0.1);
}

.filtre-barre-recherche input {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95em;
    color: var(--md-on-surface);
    flex: 1;
    outline: none;
}

/* ============================================================
   ACCORDÉON
   ============================================================ */

.section-accordeon {
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--shape-lg);
    margin-bottom: 12px;
    overflow: hidden;
}

.accordeon-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--md-surface);
    font-weight: 500;
    color: var(--md-on-surface);
    transition: background 0.15s;
    user-select: none;
}

.accordeon-titre:hover { background: var(--md-elev-1); }

.accordeon-contenu {
    padding: 0 20px 20px;
    background: var(--md-surface);
    border-top: 1px solid var(--md-outline-variant);
}

/* ============================================================
   NOTES PERSONNELLES
   ============================================================ */

.note-item {
    background: var(--md-surface-variant);
    border-radius: var(--shape-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.note-auteur {
    font-size: 0.82em;
    font-weight: 500;
    color: var(--md-primary);
    margin-bottom: 4px;
}

.note-date {
    font-size: 0.78em;
    color: var(--md-on-surface-variant);
}

.note-texte {
    color: var(--md-on-surface);
    font-size: 0.95em;
    line-height: 1.6;
}

/* ============================================================
   RECETTES SIMILAIRES
   ============================================================ */

.recettes-similaires {
    margin-top: clamp(24px, 5vw, 36px);
    padding-top: clamp(20px, 4vw, 28px);
    border-top: 1px solid var(--md-outline-variant);
}

.recettes-similaires h2 {
    font-family: var(--font-display);
    font-size: clamp(1em, 3vw, 1.15em);
    font-weight: 400;
    color: var(--md-on-surface);
    margin-bottom: 16px;
}

/* ============================================================
   MODE CUISINE
   ============================================================ */

.mode-cuisine-overlay {
    position: fixed;
    inset: 0;
    background: #1A0A04;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    color: #FFF8F6;
    font-family: var(--font-body);
}

.mode-cuisine-header {
    background: rgba(var(--md-primary-rgb),0.15);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mode-cuisine-titre {
    font-family: var(--font-display);
    font-size: 1.1em;
    font-weight: 600;
}

.mode-cuisine-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.2);
}

.mode-cuisine-tab {
    flex: 1;
    padding: 10px;
    border-radius: var(--shape-md);
    border: none;
    background: transparent;
    color: rgba(255,248,246,0.6);
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mode-cuisine-tab.actif {
    background: rgba(var(--md-primary-rgb),0.4);
    color: #FFF8F6;
}

/* ============================================================
   LISTE DE COURSES
   ============================================================ */

.courses-categorie { margin-bottom: 20px; }

.courses-categorie h3 {
    font-family: var(--font-display);
    font-size: 1em;
    font-weight: 400;
    color: var(--md-primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.courses-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.95em;
    color: var(--md-on-surface);
}

.courses-item input[type="checkbox"] {
    accent-color: var(--md-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================================
   FAVORIS
   ============================================================ */

.btn-favori {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--shape-full);
    border: 1.5px solid var(--md-outline-variant);
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
    font-family: var(--font-body);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-favori:hover,
.btn-favori.actif {
    border-color: var(--md-primary);
    color: var(--md-primary);
    background: var(--md-primary-container);
}

.btn-favori:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

.btn-favori.actif .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   BADGE DIFFICULTÉ
   ============================================================ */

.badge-difficulte {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--shape-full);
    font-size: 0.82em;
    font-weight: 500;
    border: 1.5px solid transparent;
}

.badge-difficulte-facile {
    background: #EAF3DE;
    color: #3B6D11;
    border-color: #C0DD97;
}

.badge-difficulte-moyen {
    background: #FAEEDA;
    color: #854F0B;
    border-color: #FAC775;
}

.badge-difficulte-difficile {
    background: #FCEBEB;
    color: #A32D2D;
    border-color: #F7C1C1;
}

/* ============================================================
   STYLES D'IMPRESSION
   ============================================================ */

/* ============================================================
   VIEW TRANSITIONS (M3 Shared Element)
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(root) {
    animation-name: vt-fade-out;
}

::view-transition-new(root) {
    animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

/* Transition spécifique pour la carte recette (liste uniquement) */
.recette-carte[style*="view-transition-name"] {
    will-change: transform;
}

/* ============================================================
   MODE CONDENSÉ (vue compacte liste recettes)
   ============================================================ */
.recettes-grille.vue-condensee {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 40vw), 1fr));
    gap: clamp(8px, 2vw, 12px);
}

.recettes-grille.vue-condensee .recette-carte > img,
.recettes-grille.vue-condensee .recette-carte-placeholder {
    height: clamp(80px, 14vw, 110px);
}

.recettes-grille.vue-condensee .badge-classique img {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0;
}

.recettes-grille.vue-condensee .recette-carte-corps {
    padding: 8px 10px;
}

.recettes-grille.vue-condensee .recette-carte-corps h3 {
    font-size: 0.82em;
    line-height: 1.3;
}

.recettes-grille.vue-condensee .recette-auteur,
.recettes-grille.vue-condensee .recette-temps-total {
    font-size: 0.72em;
}

@media print {
    /* ---- Éléments à masquer ---- */
    .no-print,
    .navbar,
    #btn-top,
    #mode-cuisine,
    .message-confirmation,
    .pagination { display: none !important; }

    /* ---- Base ---- */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    html, body {
        background: white !important;
        color: black !important;
        font-family: Georgia, serif;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

    /* Supprimer les décorations des liens */
    a { color: black !important; text-decoration: none !important; }
    a[href]::after { content: none !important; }

    .contenu-principal {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .carte {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* ---- Galerie photos — première photo flottante ---- */
    /* Carousel multi-photos : afficher seulement la première, cacher le reste */
    #galerie-swipe {
        float: right;
        max-width: 38%;
        border-radius: 4px !important;
        margin: 0 0 8px 12px;
        border: 0.5pt solid #ccc;
        overflow: visible !important;
        touch-action: none !important;
    }

    #galerie-track {
        display: block !important;
        transform: none !important;
        transition: none !important;
    }

    #galerie-track > div:first-child {
        flex: none !important;
        width: auto !important;
    }

    #galerie-track > div:not(:first-child) { display: none !important; }

    #galerie-track img {
        max-width: 100%;
        max-height: 160px;
        width: auto;
        height: auto;
        object-fit: cover;
        display: block;
    }

    #galerie-dots,
    #galerie-swipe button { display: none !important; }

    /* Photo unique (pas de carousel) */
    .recette-entete > div:first-child > div > a > img {
        float: right;
        max-width: 38%;
        max-height: 160px;
        width: auto;
        height: auto;
        object-fit: cover;
        border-radius: 4px;
        margin: 0 0 8px 12px;
        border: 0.5pt solid #ccc;
    }

    /* ---- Titre ---- */
    .recette-entete h1 {
        font-size: 16pt;
        color: black !important;
        margin-bottom: 4pt;
        line-height: 1.3;
    }

    /* ---- Méta (auteur, catégorie…) ---- */
    .recette-infos-meta {
        font-size: 8.5pt;
        margin-bottom: 6pt;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border-bottom: 0.5pt solid #ccc;
        padding-bottom: 4pt;
    }

    .badge, .badge-categorie, .badge-difficulte {
        border: 0.5pt solid #999 !important;
        background: none !important;
        color: black !important;
        padding: 1px 6px;
        font-size: 8pt;
        border-radius: 3px;
    }

    .badge-classique {
        border: 0.5pt solid #ccc !important;
        background: none !important;
        color: black !important;
        padding: 2px 6px;
        font-size: 8pt;
    }

    .badge-classique img { display: none !important; }

    .recette-meta-item { font-size: 8.5pt; color: #444 !important; }

    /* ---- Temps / portions ---- */
    .recette-temps {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8pt;
    }

    .temps-bloc {
        background: none !important;
        border: 0.5pt solid #bbb !important;
        padding: 3px 8px;
        min-width: auto;
        flex: none;
        border-radius: 3px;
    }

    .temps-label { font-size: 7.5pt; color: #666 !important; }
    .temps-valeur { font-size: 9pt; color: black !important; font-weight: bold; }

    .portions-ajusteur { display: none !important; }

    /* ---- Sections ingrédients / étapes ---- */
    .recette-section {
        margin-bottom: 8pt;
        padding-top: 6pt;
        page-break-inside: avoid;
        clear: both;
    }

    .recette-section h2 {
        font-size: 11pt;
        color: black !important;
        border-top: 0.5pt solid #ccc;
        padding-top: 4pt;
        margin-bottom: 4pt;
    }

    .ingredients-liste {
        columns: 2;
        column-gap: 16pt;
        font-size: 9pt;
        padding-left: 14pt;
    }

    .ingredients-liste li {
        padding: 1px 0;
        border-bottom: none !important;
        list-style: disc;
        font-size: inherit;
    }

    .ingredients-liste li::before { display: none !important; }

    .etapes-liste { font-size: 9pt; padding-left: 14pt; }

    .etapes-liste li {
        padding: 3px 0;
        border-bottom: none !important;
        line-height: 1.4;
    }

    .etapes-liste li::before { display: none !important; }

    /* ---- Astuce / conseil ---- */
    .recette-astuce,
    .recette-conseil,
    .recette-souvenir {
        padding: 5pt 8pt;
        font-size: 9pt;
        margin-bottom: 6pt;
        border-radius: 2pt;
        border: 0.5pt solid #ccc !important;
        background: #f9f9f9 !important;
        color: black !important;
    }

    /* ---- Occasion mémorable ---- */
    .occasion-memorable {
        border: 0.5pt solid #ccc !important;
        background: none !important;
        color: black !important;
        padding: 4pt 8pt;
        font-size: 9pt;
        margin-bottom: 6pt;
    }

    /* ---- Icônes ---- */
    .material-symbols-rounded { display: none !important; }

    /* ---- En-tête print : nom du site en haut ---- */
    .contenu-principal::before {
        content: 'lantheaume.fr — Recettes de Famille';
        display: block;
        font-size: 7.5pt;
        color: #888;
        border-bottom: 0.5pt solid #ddd;
        padding-bottom: 4pt;
        margin-bottom: 10pt;
        font-family: Georgia, serif;
    }
}