/* Thème sastipen (2026-11-04) : charte graphique du site Sastipen Sana.
   Remplace le custom.css (vide) de fruity_twentythree, chargé en dernier (<replace> dans config.xml).
   Couleurs de base : css/variations/theme_sastipen.css. Valeurs : templates/jl_spirit/custom/scss/_variables.scss du site. */

/* Polices du site, hébergées avec le thème (aucun appel à Google) : versions variables */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --olh-bg: #F5EBDD;             /* crème, fond général */
    --olh-bg-soft: #FAF4EA;        /* crème clair */
    --olh-text: #3B2A24;           /* brun cacao */
    --olh-text-light: #6B5A52;
    --olh-primary: #A64B2A;        /* terracotta : boutons (texte blanc dessus : 5,7) */
    --olh-primary-light: #EBDDC8;  /* crème foncé */
    --olh-primary-dark: #6B2637;   /* bordeaux : liens, bordures, survol */
    --olh-titles: #6B2637;         /* bordeaux des titres du site */
    --olh-border: #EBDDC8;
    --olh-radius: 18px;
    --olh-shadow: 0 4px 18px rgba(59, 42, 36, .08);
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-font-sans-serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Texte courant : Source Sans 3, quelle que soit la police choisie dans les options du thème */
body,
body[class*="font-"],
body .form-control,
body .form-select,
body .btn,
body .navbar,
body .question-text,
body .ls-answers {
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body {
    background-color: var(--olh-bg) !important;
    color: var(--olh-text) !important;
    line-height: 1.6;
}

/* Titres : Cormorant Garamond bordeaux, comme le site (600 : police fine) */
h1, h2, h3, h4, h5, h6,
.survey-name,
.group-title,
.group-name,
.large-heading {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 600 !important;
    color: var(--olh-titles) !important;
    letter-spacing: 0;
}

@media (max-width: 575px) {
    h1, .survey-name, .group-title, .group-name, .large-heading { font-size: 1.9rem !important; line-height: 1.2; }
}

a { color: var(--olh-primary-dark); }
a:hover, a:focus { color: var(--olh-titles); }

/* Barre du haut : fond du site, logo de Sastipen Sana */
#survey-nav.navbar,
.navbar.fixed-top {
    background-color: var(--olh-bg) !important;
    border-bottom: 1px solid var(--olh-border);
    box-shadow: none;
}
.navbar .logo,
.navbar-brand img {
    max-height: 64px;
    width: auto;
}

/* Barre de progression */
.progress {
    background-color: var(--olh-bg-soft) !important;
    border-radius: 999px;
}
.progress-bar {
    background-color: var(--olh-primary) !important;
    color: #ffffff !important;
    border-radius: 999px;
}

/* Questions : cartes comme sur le site */
.question-container {
    background-color: #ffffff !important;
    border: 1px solid var(--olh-border) !important;
    border-radius: var(--olh-radius) !important;
    box-shadow: var(--olh-shadow);
    padding: 1.25rem 1.5rem !important;
}
@media (max-width: 575px) {
    .question-container { padding: 1rem !important; }
}
.question-title-container,
.question-text {
    color: var(--olh-text) !important;
}
.ls-questionhelp,
.question-help-container,
.ls-question-help {
    color: var(--olh-text-light) !important;
}
.asterisk,
.text-danger.asterisk {
    color: #9E3838 !important;
}

/* Champs de saisie */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"] {
    border: 1px solid var(--olh-border) !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    color: var(--olh-text) !important;
}
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--olh-primary-dark) !important;
    box-shadow: 0 0 0 .2rem rgba(166, 75, 42, .30) !important;
    outline: none;
}

/* Boutons : terracotta, texte blanc (contraste 5,7) ; survol bordeaux */
.btn-primary,
.ls-move-btn.btn-primary,
#ls-button-submit {
    background-color: var(--olh-primary) !important;
    border-color: var(--olh-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    transition: background-color .3s ease, transform .3s ease;
}
.btn-primary:hover,
.btn-primary:focus,
#ls-button-submit:hover,
#ls-button-submit:focus {
    background-color: var(--olh-primary-dark) !important;
    border-color: var(--olh-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}
/* Boutons de réponse (Oui / Non / Sans réponse, Homme / Femme, listes « en boutons ») :
   la règle .btn-primary ci-dessus (!important) écrasait l'état coché → réponse choisie invisible (2026-11-03).
   Non choisi : blanc bordé de bordeaux. Choisi : plein bordeaux, texte blanc. */
.btn-check + .btn-primary {
    background-color: #ffffff !important;
    border: 2px solid var(--olh-primary-dark) !important;
    color: var(--olh-text) !important;
    transform: none !important;
}
.btn-check + .btn-primary:hover {
    background-color: var(--olh-bg-soft) !important;
    color: var(--olh-text) !important;
}
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:hover,
.btn-check:checked + .btn-primary:focus {
    background-color: var(--olh-primary-dark) !important;
    border-color: var(--olh-primary-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .2rem rgba(107, 38, 55, .30) !important;
}
.btn-check:focus-visible + .btn-primary {
    outline: 3px solid var(--olh-titles) !important;
    outline-offset: 2px;
}

.btn-outline-secondary,
.btn-secondary,
.ls-move-previous-btn,
#ls-button-previous {
    background-color: transparent !important;
    border: 2px solid var(--olh-primary-dark) !important;
    color: var(--olh-primary-dark) !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}
.btn-outline-secondary:hover,
.btn-secondary:hover,
#ls-button-previous:hover {
    background-color: var(--olh-bg-soft) !important;
    color: var(--olh-titles) !important;
}

/* Messages d'erreur et d'aide à la saisie */
.ls-em-error,
.text-danger,
.ls-question-mandatory,
.alert-danger {
    color: #9E3838 !important;
}
.alert-danger {
    background-color: #F6E8E6 !important;
    border-color: #E7C4C0 !important;
    border-radius: 12px;
}

/* Page de fin */
.completed-text,
.completed-wrapper {
    color: var(--olh-text);
}

/* Pied de page « Powered by LimeSurvey » plus discret */
.poweredby,
#poweredby {
    opacity: .6;
}