@import "normalize.css";
@import "public-layout.css";
@import "components/header.css";
@import "components/footer.css";
@import "components/hero.css";
@import "components/about.css";
@import "components/contact-form.css";
@import "components/ressources-page.css";
@import "components/users-page.css";
@import "components/page-404.css";
@import "components/page-legal.css";
@import "components/auth-modal.css";
@import "components/password-input.css";
@import "components/password-strength.css";
@import "public-typography.css";

/* Variables typographie & layout (var() résolus au rendu) */
:root {
    /* Morlaix Communauté Palette */
    --bg:           #FAFAFA;
    --surface:      #F0F0F0;
    --text:         #111111;
    --text-muted:   #222222;
    --text-dim:     #999999;
    --accent:       #005a5a;
    --accent-hover: #008080;
    --border:       #E5E5E5;
    --border-light: #EEEEEE;
    --white:        #FFFFFF;
    --error-bg:        #FFBABA;
    --error-text:      #D8000C;
    --error-hover:     #FFA4A4;
    --success-bg:      #DFF2BF;
    --success-text:    #4F8A10;
    --success-hover:   #B4F298;
    --warning-bg:      #FEEFB3;
    --warning-text:    #9F6000;
    --warning-hover:   #FED7A0;
    --info-bg:         #BDE5F8;
    --info-text:       #31708F;
    --info-hover:      #D5D8F7;
    --borrowed-bg:     #FFE8CC;
    --borrowed-text:   #C45C00;

    /* Viewport & shell public */
    --viewport-h:     100dvh;
    --viewport-w:     100vw;
    --header-h:       64px;
    /* Largeur utile : suit le viewport, plafond relevé sur grands écrans */
    --container-max:  min(92rem, calc(100vw - 2 * var(--page-pad-x, 1rem)));
    --container:      var(--container-max);
    --page-pad-x:     clamp(1rem, 3vw, 2.5rem);
    --section-pad-y:  clamp(3rem, 6vh, 8.75rem);
    --section-pad:    var(--section-pad-y);
    --gap:            clamp(1rem, 2vw, 2rem);
    --card-min:       15rem;
    --content-readable: min(40rem, 100%);
    --content-prose:  min(42rem, 100%);
    /* Colonne de lecture page d'accueil (hero) */
    --home-content-max: min(38rem, calc(100vw - 2 * var(--page-pad-x)));
    /* Section à propos : un peu plus large que le hero */
    --home-about-max: min(44rem, calc(100vw - 2 * var(--page-pad-x)));

    /* Typographie fluide : léger gain sur grands écrans, plafonds modérés */
    --text-xs:      clamp(0.75rem, 0.7rem + 0.08vw, 0.8125rem);
    --text-sm:      clamp(0.8125rem, 0.78rem + 0.1vw, 0.9375rem);
    --text-md:      clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
    --text-base:    clamp(1rem, 0.94rem + 0.14vw, 1.0625rem);
    --text-lg:      clamp(1.0625rem, 0.98rem + 0.18vw, 1.1875rem);
    --text-xl:      clamp(1.1875rem, 1.05rem + 0.28vw, 1.375rem);
    --text-2xl:     clamp(1.3125rem, 1.1rem + 0.4vw, 1.625rem);
    --text-display: clamp(1.75rem, 1.35rem + 1.35vw, 2.875rem);
    --leading-tight: 1.12;
    --leading-snug:  1.35;
    --leading-base:  1.6;
}

/* Écrans larges (ex. 27") : utiliser la largeur disponible */
@media (min-width: 1280px) {
    :root {
        --container-max: min(100rem, calc(100vw - 2 * var(--page-pad-x)));
        --page-pad-x: clamp(1.5rem, 4vw, 3rem);
        --content-readable: min(44rem, 100%);
        --content-prose: min(46rem, 100%);
        --home-content-max: min(40rem, 100%);
        --home-about-max: min(46rem, 100%);
        --card-min: 16.5rem;
        --text-base: clamp(1rem, 0.95rem + 0.16vw, 1.125rem);
        --text-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);
        --text-xl: clamp(1.25rem, 1.1rem + 0.3vw, 1.4375rem);
        --text-2xl: clamp(1.375rem, 1.2rem + 0.42vw, 1.75rem);
        --text-display: clamp(2rem, 1.45rem + 1.45vw, 3.125rem);
    }
}

@media (min-width: 1600px) {
    :root {
        --container-max: min(110rem, calc(100vw - 2 * var(--page-pad-x)));
        --content-readable: min(46rem, 100%);
        --content-prose: min(48rem, 100%);
        --home-content-max: min(42rem, 100%);
        --home-about-max: min(48rem, 100%);
        --card-min: 17.5rem;
        --text-display: clamp(2.125rem, 1.5rem + 1.5vw, 3.25rem);
    }
}

@media (min-width: 1920px) {
    :root {
        --container-max: min(118rem, calc(100vw - 2 * var(--page-pad-x)));
        --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
        --text-display: clamp(2.25rem, 1.55rem + 1.55vw, 3.375rem);
    }
}

@supports not (height: 100dvh) {
    :root {
        --viewport-h: 100vh;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    letter-spacing: -0.02em;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: var(--header-h);
    min-height: var(--viewport-h);
    display: flex;
    flex-direction: column;
}

body.auth-modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-pad-x);
    box-sizing: border-box;
}