/* === Design tokens === */
:root {
    --ex-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ex-mono: 'JetBrains Mono', monospace;
    --ex-green-900: #78350f; --ex-green-800: #92400e; --ex-green-700: #b45309;
    --ex-green-600: #d97706; --ex-green-500: #f59e0b; --ex-green-400: #ffbb09;
    --ex-green-300: #fcd34d; --ex-green-200: #fde68a; --ex-green-100: #fef3c7; --ex-green-50: #fffbeb;
    --ex-stone-900: #1c1917; --ex-stone-800: #292524; --ex-stone-700: #3d3836; --ex-stone-600: #4a4543;
    --ex-stone-500: #6b6560; --ex-stone-400: #a8a29e; --ex-stone-300: #d6d3d1; --ex-stone-200: #e7e5e4;
    --ex-stone-100: #f5f5f4; --ex-stone-50: #fafaf9;
    --ex-accent: #ff9100; --ex-red: #fe5c5c;
    --ex-link: #335e89; --ex-link-hover: #1e3a5f;
    --ex-link-action: #b45309; --ex-link-action-hover: #92400e;
    --ex-surface: #ffffff; --ex-bg: #fdf6ec;
    --ex-shadow-sm: 0 1px 2px rgba(28,25,23,0.05); --ex-shadow-md: 0 4px 12px rgba(28,25,23,0.08);
    --ex-ease: cubic-bezier(0.25,0.46,0.45,0.94);
}
@media (prefers-color-scheme: dark) {
    :root {
        --ex-surface: #1a1a1a; --ex-bg: #111; --ex-stone-50: #1e1e1e; --ex-stone-100: #252525;
        --ex-stone-200: #3a3a3a; --ex-stone-300: #555; --ex-stone-400: #777; --ex-stone-500: #999;
        --ex-stone-600: #bbb; --ex-stone-700: #ddd; --ex-stone-800: #ececec; --ex-stone-900: #f8f8f8;
        --ex-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --ex-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
        --ex-link: #9fc7ef; --ex-link-hover: #c4ddf5;
        --ex-link-action: var(--ex-green-300); --ex-link-action-hover: var(--ex-green-200);
    }
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }

/* === Container === */
.fv5 { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: var(--ex-font); color: var(--ex-stone-800); -webkit-font-smoothing: antialiased; }

/* === Links === */
.fv5 a { color: var(--ex-link); text-decoration: underline; text-decoration-color: rgba(51,94,137,0.3); text-underline-offset: 2px; font-weight: 500; transition: color 0.15s, text-decoration-color 0.15s; }
.fv5 a:hover { color: var(--ex-link-hover); text-decoration-color: var(--ex-link-hover); }
.fv5 a.contactMairieButton { color: var(--ex-link-action); text-decoration-color: transparent; }
.fv5 a.contactMairieButton:hover { color: var(--ex-link-action-hover); text-decoration-color: var(--ex-link-action-hover); }

/* === Breadcrumb === */
.fv5 .breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ex-stone-500); margin-bottom: 1.5rem; flex-wrap: wrap; }
.fv5 .breadcrumb a { color: var(--ex-link); text-decoration: none; }
.fv5 .breadcrumb a:hover { color: var(--ex-link-hover); text-decoration: underline; }
.fv5 .breadcrumb .sep { color: var(--ex-stone-300); font-size: 0.7em; }
.fv5 .breadcrumb span:last-child { color: var(--ex-stone-700); font-weight: 500; }

/* === Buttons === */
.fv5 .btn, .fv5 a.btn { padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.15s var(--ex-ease); font-size: 0.85rem; border: 1px solid var(--ex-accent); text-decoration: none; display: inline-flex; align-items: center; font-family: var(--ex-font); }
.fv5 .btn-p { background: var(--ex-green-400); color: #1c1917; border-color: var(--ex-green-400); }
.fv5 .btn-p:hover { background: var(--ex-accent); border-color: var(--ex-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,187,9,0.2) }
.fv5 .btn-o { background: var(--ex-surface); color: var(--ex-stone-700); border-color: var(--ex-stone-300); }
.fv5 .btn-o:hover { background: var(--ex-stone-100); border-color: var(--ex-accent); color: var(--ex-stone-800); }
.fv5 a.button { font-size:0.8rem; text-decoration: none; border-width: 1px; color: #002b11; background-color: #91fdac; padding: 0.55rem 0.5rem;}
.fv5 a.button:hover { text-decoration: none; border-width: 1px; color: var(--main-color-black-2)}
.fv5 a.button.secondary { color: #00212b; background-color: #91d5fd; padding: 0.55rem 0.5rem;}
.fv5 a.button.secondary:hover { color: var(--main-color-black-2)}

/* === Details / Summary === */
.fv5 details summary { cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--ex-stone-600); padding: 0.4rem 0; list-style: none; }
.fv5 details summary::-webkit-details-marker { display: none; }
.fv5 details summary::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--ex-stone-100); color: var(--ex-stone-500); font-size: 0.8rem; margin-right: 0.4rem; transition: all 0.15s; }
/*.fv5 details[open] summary::before { content: '-'; background: var(--ex-green-100); color: var(--ex-green-700); }*/
.fv5 details summary:hover { color: var(--ex-green-700); }
.fv5 details[open] summary { margin-bottom: 0.5rem; }
.fv5 details[open] > div, .fv5 details[open] > p, .fv5 details[open] > ul { border-left: 3px solid var(--ex-green-300); padding-left: 0.75rem; margin-left: 0.25rem; }

/* === Text content pages === */
.fv5 .text-content { max-width: 52rem; background: var(--ex-surface); border: 1px solid var(--ex-stone-200); border-radius: 14px; padding: 2rem 2.5rem; box-shadow: var(--ex-shadow-sm); }
.fv5 .text-content h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; }
.fv5 .text-content h2 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ex-green-700); margin: 2rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ex-stone-100); }
.fv5 .text-content h3 { font-size: 0.82rem; font-weight: 600; color: var(--ex-stone-600); margin: 1.5rem 0 0.5rem; }
.fv5 .text-content p { font-size: 0.92rem; color: var(--ex-stone-700); line-height: 1.85; margin: 0.6rem 0; }
.fv5 .text-content a { text-underline-offset: 3px; }
.fv5 .text-content strong { color: var(--ex-stone-800); }
@media (max-width: 640px) { .fv5 .text-content { padding: 1.25rem 1rem; border-radius: 10px; } }