/**
 * CMS Source - CSS Reset
 * Modern CSS Reset with accessibility focus
 * @version 1.0.0
 */

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

/* =========================================================================
   REMOVE DEFAULT MARGINS
   ========================================================================= */
* {
    margin: 0;
    padding: 0;
}

/* =========================================================================
   HTML & BODY
   ========================================================================= */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.5;
    font-size: 16px;
    tab-size: 4;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    min-height: 100vh;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================================================
   TYPOGRAPHY
   =========================================================================
   h1/h2/h3 utilisent la police manuscrite Bryndan Write (font-family-heading).
   h4/h5/h6 utilisent Quicksand (font-family-subtitle).

   TEXTE EN COULEURS — jamais noir :
   - Si la section parente définit --heading-color, TOUS les h de la
     section utilisent cette couleur (ex: .community-header → crème).
   - Sinon : échelle de verts normalisée par niveau (--heading-color-h1
     le plus foncé → --heading-color-h6 le plus clair), définie dans
     variables.css.

   TRAIT BLANC ÉPAIS (~3px) :
   On simule un outline de 3px via un nuage de text-shadow en 3 anneaux
   (1px, 2px, 3px) × 8 directions = 20 shadows. Nécessaire car :
   /!\ Pas de -webkit-text-stroke : sur une police manuscrite la bordure
   fusionne les traits de plume → glyphes illisibles.

   H3 reçoit un stroke plus discret (2px) car souvent utilisé comme titre
   de card. H4-H6 (Quicksand) reçoivent un stroke 1px pour ne pas alourdir.

   La synthèse bold est évitée (font-weight: normal) car Bryndan Write
   n'existe qu'en graisse normale.
   ========================================================================= */
h1, h2, h3 {
    font-family: var(--font-family-heading);
    font-weight: normal;
    line-height: var(--line-height-tight);
    text-wrap: balance;
}

/* Couleur par niveau H — le token --heading-color d'une section override tout */
h1 { color: var(--heading-color, var(--heading-color-h1)); }
h2 { color: var(--heading-color, var(--heading-color-h2)); }
h3 { color: var(--heading-color, var(--heading-color-h3)); }
h4 { color: var(--heading-color, var(--heading-color-h4)); }
h5 { color: var(--heading-color, var(--heading-color-h5)); }
h6 { color: var(--heading-color, var(--heading-color-h6)); }

/* Trait blanc épais ~3px : 3 anneaux × 8 directions = nuage de text-shadow.
   On garde le drop-shadow en dernier pour le relief. */
h1, h2 {
    text-shadow:
        /* Anneau 1px */
        -1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0   -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -1px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0    1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        /* Anneau 2px */
        -2px -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0   -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -2px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -2px  2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0    2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px  2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        /* Anneau 3px (cardinaux uniquement, suffisant pour fermer le halo) */
         0   -3px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0    3px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -3px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         3px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        /* Relief */
        var(--heading-drop-shadow);
}

/* H3 : trait 2px (2 anneaux) — plus léger pour les titres de card */
h3 {
    text-shadow:
        -1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0   -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -1px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0    1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -2px -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0   -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px -2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -2px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px  0   0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -2px  2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         0    2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         2px  2px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        var(--heading-drop-shadow);
}

h4, h5, h6 {
    font-family: var(--font-family-subtitle);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-wrap: balance;
    /* Stroke 1px discret sur les subtitles Quicksand */
    text-shadow:
        -1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px -1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
        -1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff)),
         1px  1px 0 var(--heading-stroke-color, var(--heading-stroke, #fff));
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    text-wrap: pretty;
}

/* =========================================================================
   LINKS
   ========================================================================= */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* =========================================================================
   IMAGES & MEDIA
   ========================================================================= */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

img {
    font-style: italic;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
}

/* =========================================================================
   FORMS
   ========================================================================= */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

input, textarea, select {
    background-color: var(--bg-primary);
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Remove default appearance */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Remove spinner for number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* =========================================================================
   LISTS
   ========================================================================= */
ul, ol {
    list-style: none;
}

/* =========================================================================
   TABLES
   ========================================================================= */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* =========================================================================
   QUOTES
   ========================================================================= */
blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
    content: '';
}

/* =========================================================================
   HORIZONTAL RULE
   ========================================================================= */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-6) 0;
}

/* =========================================================================
   CODE
   ========================================================================= */
code, kbd, samp, pre {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

code {
    background-color: var(--bg-tertiary);
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius-sm);
}

pre code {
    background: none;
    padding: 0;
}

/* Accessibility primitives (.skip-link, .sr-only, :focus-visible) sont définies
   dans utilities.css avec les design tokens (--focus-ring-color, --focus-ring-width)
   pour rester cohérentes en light/dark mode. */

/* Hide but keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* =========================================================================
   SELECTION
   ========================================================================= */
::selection {
    background-color: var(--primary);
    color: var(--white);
}

/* =========================================================================
   SCROLLBAR STYLING
   ========================================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--bg-secondary);
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */
@media print {
    *, *::before, *::after {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
    
    pre {
        white-space: pre-wrap !important;
    }
    
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
}