:root {
    --sh-nuit: #2b1f3d;
    --sh-prune: #733d95;
    --sh-prune-sombre: #57297a;
    --sh-lilas: #f4eff8;
    --sh-gris-carte: #a6a6ae;
    --sh-gris-champ: #555e6b;
    --sh-blanc: #fff;
    --sh-espace: 1rem;

    --bs-body-color: var(--sh-nuit);
    --bs-body-font-family: "Open Sans", system-ui, Arial, sans-serif;
}

/* --- Base --------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body { line-height: 1.6; }

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--sh-nuit);
}

h2 {
    font-size: 1.6rem;
    margin-bottom: .75rem;
}

.sh-section { padding-block: 2.5rem; }

.sh-intro {
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

/* --- Accessibilité ------------------------------------------------------ */
:focus-visible {
    outline: 3px solid var(--sh-prune);
    outline-offset: 3px;
}

.sh-atouts :focus-visible {
    outline-color: var(--sh-blanc);
}

.sh-evitement {
    position: absolute;
    left: .5rem;
    top: -4rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--sh-nuit);
    color: var(--sh-blanc);
}

.sh-evitement:focus { top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* --- Bouton (surcharge des variables Bootstrap) ------------------------- */
.sh-bouton {
    --bs-btn-color: var(--sh-blanc);
    --bs-btn-bg: var(--sh-prune);
    --bs-btn-border-color: var(--sh-prune);
    --bs-btn-hover-color: var(--sh-blanc);
    --bs-btn-hover-bg: var(--sh-prune-sombre);
    --bs-btn-hover-border-color: var(--sh-prune-sombre);
    --bs-btn-active-color: var(--sh-blanc);
    --bs-btn-active-bg: var(--sh-prune-sombre);
    --bs-btn-active-border-color: var(--sh-prune-sombre);
    --bs-btn-border-radius: .45rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .6rem;
    font-weight: 700;
}

/* --- En-tête / navbar --------------------------------------------------- */
.sh-navbar {
    background: var(--sh-blanc);
    padding-block: .75rem;
    --bs-navbar-color: var(--sh-nuit);
    --bs-navbar-hover-color: var(--sh-prune);
    --bs-navbar-active-color: var(--sh-prune);
}

.sh-logo {
    color: var(--sh-nuit);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.sh-navbar .navbar-toggler { border-color: var(--sh-nuit); }

/* --- Héros -------------------------------------------------------------- */
.sh-hero {
    background: var(--sh-lilas);
    padding-block: 2.5rem;
}

.sh-hero__surtitre {
    margin-bottom: .75rem;
    color: var(--sh-prune);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sh-hero h1 {
    margin-bottom: 1rem;
    font-size: 2.2rem;
    font-weight: 800;
}

.sh-hero__texte {
    max-width: 36rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.sh-hero__infos {
    margin: 1rem 0 0;
    font-size: .9rem;
}

.sh-hero__image {
    width: 100%;
    max-width: 400px;
    border-radius: 1.25rem;
}

/* --- Chiffres clés ------------------------------------------------------ */
.sh-chiffres { padding-block: 2rem 0; }

.sh-chiffres__valeur {
    margin: 0;
    color: var(--sh-prune);
    font-size: 1.35rem;
    font-weight: 800;
}

.sh-chiffres__legende {
    margin: 0;
    font-size: .9rem;
}

/* --- Programme : cartes ------------------------------------------------- */
.sh-carte {
    border: 2px solid var(--sh-gris-carte);
    border-radius: 1rem;
    background: var(--sh-blanc);
}

.sh-carte .card-body { padding: 1.25rem 1.5rem 1.75rem; }

.sh-carte__numero {
    margin-bottom: .5rem;
    color: var(--sh-prune);
    font-size: .85rem;
    font-weight: 700;
}

.sh-carte .card-title {
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

.sh-carte .card-text {
    margin: 0;
    font-size: .92rem;
}

/* --- Atouts : bandeau contrasté ---------------------------------------- */
.sh-atouts {
    padding-block: 2rem 2.5rem;
    background: var(--sh-nuit);
    color: var(--sh-blanc);
}

.sh-atouts h2 {
    margin-bottom: 1.25rem;
    color: var(--sh-blanc);
}

.sh-atouts li { font-weight: 700; }

/* coche décorative, ignorée par les lecteurs d'écran */
.sh-atouts li::before {
    content: "✓ " / "";
}

/* --- Formulaire --------------------------------------------------------- */
.sh-formulaire .form-label {
    font-size: .92rem;
    font-weight: 700;
}

.sh-formulaire .form-control,
.sh-formulaire .form-select {
    padding-block: .6rem;
    border: 2px solid var(--sh-gris-champ);
    border-radius: .45rem;
    color: var(--sh-nuit);
}

.sh-formulaire .form-select { font-size: .875rem; }

.sh-formulaire .form-control:focus,
.sh-formulaire .form-select:focus,
.sh-formulaire .form-check-input:focus {
    border-color: var(--sh-prune);
    box-shadow: 0 0 0 .25rem rgba(115, 61, 149, .35);
}

.sh-formulaire .form-check-input {
    border: 2px solid var(--sh-gris-champ);
    border-radius: .2rem;
}

.sh-formulaire .form-check-input:checked {
    background-color: var(--sh-prune);
    border-color: var(--sh-prune);
}

.sh-formulaire .form-check-label { font-size: .875rem; }

.sh-aide {
    margin-bottom: .75rem;
    font-size: .875rem;
}

.sh-confirmation:not(:empty) {
    padding: .75rem 1rem;
    border-left: 4px solid var(--sh-prune);
    background: var(--sh-lilas);
    font-weight: 600;
}

/* --- Pied de page ------------------------------------------------------- */
.sh-pied {
    padding-block: 1.5rem 2rem;
    background: var(--sh-lilas);
}

.sh-pied__titre {
    margin-bottom: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.sh-pied__liens {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5rem;
    font-size: .875rem;
}

.sh-pied__liens a { color: var(--sh-nuit); }

.sh-pied__liens li + li::before {
    content: "•";
    margin-inline: .4rem;
}

.sh-pied__droits {
    margin: 0;
    font-size: .8rem;
}

/* --- ≥ 768 px ----------------------------------------------------------- */
@media (min-width: 768px) {
    h2 { font-size: 2rem; }
    .sh-chiffres { padding-top: 2.5rem; }
    .sh-chiffres__valeur { font-size: 1.5rem; }
}

/* --- ≥ 992 px (référence maquette : 1440 px) ---------------------------- */
@media (min-width: 992px) {
    .sh-hero { padding-block: 3rem; }
    .sh-hero h1 { font-size: 3.2rem; }
    .sh-hero__texte { font-size: 1.3rem; }
    .sh-navbar .nav-link { padding-inline: .4rem; }
}