/* Palette et styles communs à toutes les pages (y compris login et erreurs) */

/*
 * Polices servies par le site (static/fonts) : un bloc @font-face par police.
 * Le nom donné dans font-family est celui à utiliser ensuite dans le CSS.
 */
@font-face {
    font-family: "Always In The Star";
    src: url("/fonts/always-in-the-star.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "September";
    src: url("/fonts/september.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Claudia Betta";
    src: url("/fonts/ClaudiaBetta.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Histellin";
    src: url("/fonts/Histellin.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Vartigo";
    src: url("/fonts/Vartigo.ttc") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "LALUNA";
    src: url("/fonts/LALUNA.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "NovaQuinta";
    src: url("/fonts/NovaQuinta_PERSONAL_USE_ONLY.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Didot";
    src: local("Didot"), url("/fonts/Didot.ttc") format("collection");
    font-display: swap;
}

/*
 * Didot italique limitée au seul caractère « & » (unicode-range) : placée en tête
 * de --font-heading, elle remplace l'esperluette de la police des titres.
 * size-adjust l'agrandit de 30 % (elle paraît plus petite que TAN_MERINGUE).
 */
@font-face {
    font-family: "Esperluette";
    src: local("Didot Italic"), local("Didot-Italic"), url("/fonts/Didot.ttc") format("collection");
    unicode-range: U+0026;
    size-adjust: 130%;
    font-display: swap;
}

@font-face {
    font-family: "TAN_MERINGUE";
    src: url("/fonts/TAN_MERINGUE.ttf") format("truetype");
    font-display: swap;
}

:root {
    --color-primary: #A12521;
    --color-secondary: #7F8A52;
    --color-accent: #F8B026;
    --color-highlight: #CA4613;
    --color-light: #F7E0A9;

    --color-text: #2b2b2b;
    --color-background: #fffdf8;
    --color-border: #999;

    --font-body: "Lato", Arial, sans-serif;
    /*--font-heading: "Roboto Slab", Georgia, serif;*/
    /*--font-heading: "LALUNA", Georgia, serif;*/
    --font-heading: "Esperluette", "TAN_MERINGUE", Georgia, serif;


    /*--font-script: "Always In The Star", var(--font-heading);*/
    /*--font-script: "September", var(--font-heading);*/
    /*--font-script: "Histellin", var(--font-heading);*/
    --font-script: "Vartigo", "Histellin",var(--font-heading);
    /*--font-script: "Claudia Betta", var(--font-heading);*/
    /*--font-script: "Brush Script MT", var(--font-heading);*/

}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
}

/*
 * Un "\n" dans messages*.properties devient un vrai retour à la ligne.
 * Limité aux éléments de texte : sur un conteneur (body, main, div…), les retours
 * à la ligne de l'indentation HTML deviendraient des lignes vides.
 */
h1, h2, h3, h4, h5, h6,
p, li, label, legend, a, button,
td, th, figcaption, blockquote {
    white-space: pre-line;
}

/* L'attribut hidden l'emporte toujours, même sur un élément en display: flex */
[hidden] {
    display: none !important;
}

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

h1,
h2,
h3 {
    font-family: var(--font-heading);
    /* LALUNA n'existe qu'en graisse normale : sans ça, le navigateur simule un gras
       qui fait apparaître des traits parasites (sur le n et le i notamment) */
    font-weight: normal;
    text-align: center;
    margin: 0.5em 5%;
}

h1 {
    font-size: 2.5em;
    /*font-style: italic;*/
    color: var(--color-primary);
}

h2 {
    font-family: var(--font-script);
    font-size: 2.5em;
    color: var(--color-secondary);
}

h3 {
    color: var(--color-secondary);
}

/*
 * Sous-titre collé au titre (pages index et formulaire). Les marges de h1 et h2
 * se chevauchent : il faut annuler les deux, sinon la plus grande s'applique quand même.
 */
h1:has(+ h2) {
    margin-bottom: 0;
    line-height: 1.2;
}

h1 + h2 {
    margin-top: 0;
    line-height: 1.2;
}

/* Choix de la langue (fragments/layout.html :: lang-switch), aussi utilisé sur la page de connexion */
.lang-switch {
    display: flex;
    gap: 0.3rem;
}

.lang-switch a {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-primary);
    border-radius: 99px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.lang-switch a:hover,
.lang-switch a.active {
    color: white;
    background-color: var(--color-primary);
}