/* ============================================================================
   theme.css — charte graphique MaryD
   Chargé après site.css, avant les feuilles de page (passager.css, croisiere.css).
   Ne contient que des propriétés de peinture (couleur, fond, bordure, ombre,
   rayon, transition) : aucune règle ici ne modifie le flux de la page, à
   l'exception de la surface .page-surface, signalée plus bas.
   ========================================================================= */

:root {
    /* Bleus de marque, du plus foncé au plus clair */
    --brand-900: #043b5d;
    --brand-800: #06507c;
    --brand-700: #0a6396;
    --brand-600: #0876bb;
    --brand-500: #2a92cf;
    --brand-400: #529fcf;
    --brand-300: #74c6eb;
    --brand-200: #a1ddf4;
    --brand-100: #d9f0fb;
    --brand-50: #eef8fd;

    /* Accents : dérivés du bleu ou suffisamment contrastés pour du petit texte */
    --accent-success: #0a5c30;
    --accent-success-500: #0f8f4b;
    --accent-warn: #7a4700;
    --accent-danger: #a32013;
    --accent-plum: #7b4b8a;
    --accent-gold: #8a6100;

    /* Rôles de texte */
    --text-strong: #043b5d;
    --text-muted: #456c85;
    --text-on-brand: #ffffff;

    /* Surfaces, du plus clair au plus soutenu. --surface reste le blanc des
       contrôles (champs, boutons, cartes de date) : ce sont eux qui ressortent
       sur les deux niveaux teintés au-dessus. */
    --surface: #ffffff;
    --surface-soft: #f5fbfe;
    --surface-page: #e4f3fb;
    --surface-panel: #cfe9f8;
    --surface-border: rgba(116,198,235,.55);
    --surface-border-strong: rgba(8,118,187,.35);

    /* Rayons */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Ombres */
    --shadow-xs: 0 1px 2px rgba(3,59,93,.08);
    --shadow-sm: 0 2px 8px rgba(3,59,93,.12);
    --shadow-md: 0 8px 24px rgba(3,59,93,.16);
    --shadow-lg: 0 20px 48px rgba(3,59,93,.22);

    --transition: .18s ease;

    --font-body: 'Atkinson Hyperlegible', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-ui: 'Montserrat', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ----- Base ------------------------------------------------------------- */

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    color: var(--text-strong);
    font-family: var(--font-body);
    background: linear-gradient(180deg, #a8ddf2 0%, #74c6eb 45%, #3f9ec9 100%);
    background-repeat: no-repeat;
}

input,
button,
select,
textarea {
    font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.01em;
}

a {
    color: var(--brand-700);
    transition: color var(--transition);
}

a:hover {
    color: var(--brand-900);
}

/* Les boutons enveloppés dans un <a> ne doivent pas hériter du soulignement. */
a:hover .btn,
a:hover button {
    text-decoration: none;
}

/* ----- Focus clavier ---------------------------------------------------- */

:focus-visible {
    outline: 3px solid rgba(8,118,187,.6);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ----- Surface principale ----------------------------------------------- */
/* Seul endroit du fichier qui touche à la mise en page : le contenu passe d'un
   texte posé à même le dégradé bleu à un panneau blanc arrondi. */

/* Teinte uniforme et non dégradée : un dégradé s'étale sur la hauteur de
   l'élément, donc sur une page longue le premier écran tombait dans la portion
   haute, presque blanche. */
.page-surface {
    background-color: var(--surface-page);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.page-surface > main[role="main"] {
    width: 100%;
    min-width: 0;
}

/* Le padding horizontal ne doit jamais descendre sous les 15px du .container :
   les .row le compensent par une marge négative de -15px et déborderaient. */
@media (max-width: 575.98px) {
    .page-surface {
        padding: 1rem 15px;
        border-radius: var(--radius-md);
        margin-top: .5rem;
        margin-bottom: 1rem;
    }
}

/* ----- Navigation ------------------------------------------------------- */

.nav-fond {
    box-shadow: 0 2px 12px rgba(3,59,93,.15);
}

.navbar .nav-link {
    color: var(--brand-900) !important;
    position: relative;
    transition: color var(--transition);
}

.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-700);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after {
    transform: scaleX(1);
}

.navbar .btn-outline-light {
    background: rgba(255,255,255,.65);
    border-color: rgba(255,255,255,.9);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.navbar .btn-outline-light:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ----- Pied de page ----------------------------------------------------- */

.footer {
    background-color: var(--brand-200);
    color: var(--brand-800);
}

.footer.text-muted {
    color: var(--brand-800) !important;
}

.footer a {
    color: var(--brand-800);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer a:hover {
    color: var(--brand-900);
}

/* ----- Boutons ---------------------------------------------------------- */

.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0);
}

.btn-lg {
    border-radius: var(--radius-lg);
}

.btn-primary {
    color: var(--text-on-brand);
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: 0 2px 8px rgba(8,118,187,.3);
}

.btn-primary:hover {
    color: var(--text-on-brand);
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: 0 8px 20px rgba(8,118,187,.35);
}

.btn-primary:focus,
.btn-primary.focus {
    color: var(--text-on-brand);
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: 0 0 0 .2rem rgba(8,118,187,.35);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: var(--text-on-brand);
    background-color: var(--brand-800);
    border-color: var(--brand-800);
}

.btn-secondary {
    color: var(--brand-800);
    background-color: var(--surface);
    border-color: var(--surface-border-strong);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    color: var(--brand-900);
    background-color: var(--brand-50);
    border-color: var(--brand-400);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:focus,
.btn-secondary.focus {
    color: var(--brand-900);
    background-color: var(--brand-50);
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(8,118,187,.25);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    color: var(--brand-900);
    background-color: var(--brand-100);
    border-color: var(--brand-400);
}

.btn-success {
    color: var(--text-on-brand);
    background-color: var(--accent-success-500);
    border-color: var(--accent-success-500);
    box-shadow: 0 2px 8px rgba(15,143,75,.28);
}

.btn-success:hover {
    color: var(--text-on-brand);
    background-color: var(--accent-success);
    border-color: var(--accent-success);
    box-shadow: 0 8px 20px rgba(15,143,75,.32);
}

.btn-success:focus,
.btn-success.focus {
    color: var(--text-on-brand);
    background-color: var(--accent-success);
    border-color: var(--accent-success);
    box-shadow: 0 0 0 .2rem rgba(15,143,75,.35);
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    color: var(--text-on-brand);
    background-color: var(--accent-success);
    border-color: var(--accent-success);
}

/* Action tertiaire (Aide) : variante douce, pour hiérarchiser la page d'accueil. */
.btn-info {
    color: var(--brand-900);
    background-color: var(--brand-200);
    border-color: var(--brand-400);
    box-shadow: var(--shadow-xs);
}

.btn-info:hover {
    color: var(--brand-900);
    background-color: var(--brand-300);
    border-color: var(--brand-400);
    box-shadow: var(--shadow-sm);
}

.btn-info:focus,
.btn-info.focus {
    color: var(--brand-900);
    background-color: var(--brand-300);
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(8,118,187,.25);
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
    color: var(--brand-900);
    background-color: var(--brand-300);
    border-color: var(--brand-400);
}

.btn-outline-primary {
    color: var(--brand-700);
    border-color: var(--brand-400);
    background-color: var(--surface);
}

.btn-outline-primary:hover {
    color: var(--brand-900);
    background-color: var(--brand-50);
    border-color: var(--brand-600);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary.active {
    color: var(--text-on-brand);
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.btn:disabled,
.btn.disabled {
    opacity: .5;
    box-shadow: none;
}

/* ----- Formulaires ------------------------------------------------------ */

.form-control,
.custom-select {
    border-radius: var(--radius-sm);
    border-color: var(--surface-border-strong);
    color: var(--text-strong);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .2rem rgba(8,118,187,.18);
}

.form-control::placeholder {
    color: #8fa8b8;
}

.input-group-text {
    border-radius: var(--radius-sm);
    background-color: var(--brand-50);
    border-color: var(--surface-border-strong);
    color: var(--brand-800);
}

/* ----- Alertes ---------------------------------------------------------- */

.alert {
    border-radius: var(--radius-md);
    border-width: 0 0 0 4px;
    box-shadow: var(--shadow-xs);
}

.alert-warning {
    background-color: #fff6e0;
    border-left-color: #d99a1f;
    color: #6b4a05;
}

.alert-info {
    background-color: var(--brand-50);
    border-left-color: var(--brand-500);
    color: var(--brand-900);
}

.alert-success {
    background-color: #e8f7ee;
    border-left-color: var(--accent-success-500);
    color: var(--accent-success);
}

.alert-danger {
    background-color: #fdecea;
    border-left-color: #d9584b;
    color: var(--accent-danger);
}

/* ----- Fenêtres modales ------------------------------------------------- */

/* Corps teinté et bandeaux un cran plus soutenus : les contrôles internes
   (champs, boutons de tarif) restent blancs et ressortent d'eux-mêmes. */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background-color: var(--surface-page);
}

.modal-header,
.modal-footer {
    border-color: var(--surface-border);
    background-color: var(--surface-panel);
}

.modal-backdrop.show {
    opacity: .6;
}

/* Les utilitaires bg-* de Bootstrap sont en !important : on les réaligne sur la
   palette, mais uniquement dans les modales, pour ne pas détourner les classes
   utilitaires ailleurs. */
.modal-header.bg-light,
.modal-footer.bg-light,
.modal-header.bg-info,
.modal-footer.bg-info {
    background-color: var(--surface-panel) !important;
    color: var(--brand-900);
}

.modal-header.bg-warning,
.modal-footer.bg-warning {
    background-color: #fff3d6 !important;
    color: #6b4a05;
}

/* Sélecteur de langue */
.btnLangue {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--surface-border-strong);
    color: var(--brand-800);
    background-color: var(--surface);
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btnLangue:hover {
    color: var(--brand-900);
    background-color: var(--brand-50);
    border-color: var(--brand-400);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.close {
    color: var(--brand-800);
    text-shadow: none;
    opacity: .65;
    transition: color var(--transition), opacity var(--transition), transform var(--transition);
}

.close:hover {
    color: var(--brand-900);
    transform: rotate(90deg);
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    opacity: 1;
}

/* ----- Rôles de texte --------------------------------------------------- */
/* .text-secondaire était un blanc cassé, lisible sur le dégradé bleu ; il
   devient le gris-bleu discret du panneau blanc. */

.text-secondaire {
    color: var(--text-muted);
}

/* Le gris neutre de Bootstrap passait sous le seuil de contraste une fois posé
   sur la surface teintée. */
.text-muted {
    color: var(--text-muted) !important;
}

.text-primaire {
    color: var(--brand-700);
}

.lib-bleufonce {
    color: var(--brand-900);
}

.montant-promo-libelle {
    color: var(--accent-success);
}

.montant-promo-appliquee {
    color: var(--accent-success);
}

.pickup {
    color: var(--accent-plum);
}

.listpickup {
    color: var(--accent-plum);
}

.tarifopen {
    color: var(--accent-plum);
}

.datestarif {
    color: var(--accent-success);
}

.option-offre {
    color: var(--accent-gold);
}

.nbplace-vert {
    color: var(--accent-success);
}

.nbplace-orange {
    color: var(--accent-warn);
}

.nbplace-rouge {
    color: var(--accent-danger);
}

/* ----- Séparateurs ------------------------------------------------------ */

.border-bottom-header {
    border-bottom-color: var(--brand-300);
}

.border-top-footer {
    border-top-color: var(--brand-300);
}

/* ----- Accessibilité ---------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:not(:disabled):not(.disabled):hover,
    .navbar .btn-outline-light:hover,
    .promo-famille-card:hover,
    .promo-famille-item:hover {
        transform: none;
    }
}