/* ==============================================================================
 * PROJET      : Ansible Flotte / Pastebin (Microbin)
 * FICHIER     : paste-theme.css
 * RÔLE        : Habillage typographique « Feuille de livre & Encrage »
 * ============================================================================== */

@font-face {
    font-family: 'libertine';
    src: local('Linux Libertine'), local('Libertinus Serif'), local('Georgia');
}

/* Typographie générale et fond d'écran neutre */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #eee !important;
    color: #3a2a10 !important;
    font-family: "libertine", "Georgia", "Times New Roman", serif !important;
    line-height: 1.55 !important;
    font-size: 20px !important;
    word-wrap: break-word !important;
}

header {
    text-align: center !important;
    margin-bottom: 3.5rem !important;
}

/* Page centrale, aspect feuille de livre / papier vergé */
.container {
    max-width: 860px !important;
    margin: 4.5rem auto !important;
    padding: 4rem 3.2rem !important;
    border: 1px solid #e2d8c3 !important;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.6) inset,
        0 30px 40px rgba(0,0,0,0.07),
        0 10px 15px rgba(0,0,0,0.04) !important;

    /* paper-fibers */
    background-color: #fdf8e7 !important;
    background-image: repeating-linear-gradient(0deg,
        rgba(0,0,0,0.03) 0px,
        rgba(0,0,0,0.03) 1px,
        transparent 1px,
        transparent 4px) !important;
    background-size: 100% 100%, 100% 100%, 100% 8px !important;

    /* effets d’encre sur papier */
    text-shadow:
        0.015em 0.015em 0 rgba(0,0,0,0.35),
        -0.01em 0.01em 0 rgba(0,0,0,0.2),
        0.1px 0.2px 0 rgba(0,0,0,0.4),
        -0.1px -0.1px 0 rgba(0,0,0,0.25) !important;
    letter-spacing: 0.02em !important;
    box-sizing: border-box !important;
}

/* Titre style page de garde */
h1 {
    font-size: 2.9rem !important;
    font-weight: normal !important;
    letter-spacing: 0.025rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
    color: #3a2a10 !important;
}

h1 a {
    padding: .5rem .5rem !important;
    text-decoration: none !important;
    color: #3a2a10 !important;
}

h1 a:hover {
    background: #f3e4cc !important;
}

h1 > span {
    display: block !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.1em !important;
    margin-top: 0.4rem !important;
}

h1 > span > a {
    color: darkred !important;
}

h2 {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    letter-spacing: 0.025em !important;
    margin-top: 1.8rem !important;
    margin-bottom: 0.5rem !important;
    color: #3a2a10 !important;
}

p {
    margin: 0 !important;
    text-indent: 0 !important;
}

/* Intro calligraphique */
.intro {
    font-size: 1.60rem !important;
    max-width: 620px !important;
    margin: 2.5rem auto !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-style: italic !important;
}

.centre {
    margin: 1.0rem 0 0 0 !important;
    text-align: center !important;
}

/* Boutons biseautés parchemin */
button, .bouton, input[type="submit"], input[type="button"], a.bouton {
    display: inline-block !important;
    border: 1px solid #7f715d !important;
    background: linear-gradient(to bottom, #fdf8ec, #f6e9d4) !important;
    padding: 0.7rem 1.3rem !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    color: #6b2a10 !important;
    font-size: 1rem !important;
    font-family: "libertine", "Georgia", "Times New Roman", serif !important;
    letter-spacing: 0.05em !important;
    margin-top: 1.0rem !important;
    margin-bottom: 0.5rem !important;
    cursor: pointer !important;
    border-radius: 2px !important;
}

button:hover, .bouton:hover, input[type="submit"]:hover, input[type="button"]:hover, a.bouton:hover {
    background: #f3e4cc !important;
    color: #3a2a10 !important;
}

/* Formulaires et champs de saisie */
textarea, input[type="text"], input[type="password"], select {
    background-color: #fffef2 !important;
    color: #3a2a10 !important;
    border: 1px solid #dcd0b8 !important;
    border-radius: 2px !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 0.95rem !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus {
    border-color: #7f715d !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* Bas de page */
footer {
    margin-top: 4rem !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    color: darkred !important;
    border-top: none !important;
}

footer p {
    text-indent: 0 !important;
}

footer a {
    text-decoration: none !important;
    color: darkred !important;
    padding: .5rem .5rem !important;
}

footer a:hover {
    background: #f3e4cc !important;
}

footer div {
    display: inline-block !important;
    margin: 0 2rem !important;
}

/* Masquage des éléments inutiles ou exclus */
#nav, .logo, #imLogo, img[src*="logo"],
#privacyDropdown, select[name="privacy"], label[for="privacyDropdown"], label[for="privacy"],
div:has(> #privacyDropdown), div:has(> select[name="privacy"]) {
    display: none !important;
}

/* Pour tablettes et écrans larges : alinéa typographique sur les paragraphes */
@media (min-width: 768px) {
    .container p.paragraphe {
        text-indent: 2em !important;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 18px !important;
    }
    .container {
        padding: 2rem 1.2rem !important;
        margin: 1.5rem auto !important;
    }
}