/* ============================================================
   Portail HQ — habillage aux couleurs de L'effet Futé
   Palette officielle : bleu #2C2C6B (dominant), saumon #F77562,
   vert #23A97D, jaune #F6BB3F, noir de marque #161615.
   Typographie : Lexend (titres), Montserrat (texte courant).
   ============================================================ */

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fute-bleu: #2C2C6B;
    --fute-bleu-fonce: #232357;
    --fute-saumon: #F77562;
    --fute-vert: #23A97D;
    --fute-jaune: #F6BB3F;
    --fute-noir: #161615;
    --fute-fond: #f6f7fb;

    --bs-body-font-family: 'Montserrat', Arial, sans-serif;
    --bs-body-color: #161615;
    --bs-link-color: #2C2C6B;
    --bs-link-hover-color: #232357;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--fute-noir);
    background-color: var(--fute-fond);
}

h1, h2, h3, h4, h5, h6, legend {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    color: var(--fute-bleu);
}

.sous-titre {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 300;
    color: var(--fute-bleu);
}

a { color: var(--fute-bleu); }
a:hover { color: var(--fute-bleu-fonce); }

/* --- Barre de navigation (fond bleu officiel → logo blanc) --- */
.navbar-fute {
    background-color: var(--fute-bleu);
}
.navbar-fute .brand-app {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
}
.navbar-fute .brand-sep { opacity: .45; }
.navbar-fute .nav-link { color: rgba(255, 255, 255, .85); }
.navbar-fute .nav-link:hover,
.navbar-fute .nav-link:focus { color: #fff; }
.navbar-fute .nav-link.disabled { color: rgba(255, 255, 255, .38); }

/* --- Boutons --- */
.btn-primary {
    --bs-btn-bg: var(--fute-bleu);
    --bs-btn-border-color: var(--fute-bleu);
    --bs-btn-hover-bg: var(--fute-bleu-fonce);
    --bs-btn-hover-border-color: var(--fute-bleu-fonce);
    --bs-btn-active-bg: var(--fute-bleu-fonce);
    --bs-btn-active-border-color: var(--fute-bleu-fonce);
    --bs-btn-disabled-bg: var(--fute-bleu);
    --bs-btn-disabled-border-color: var(--fute-bleu);
}
.btn-outline-primary {
    --bs-btn-color: var(--fute-bleu);
    --bs-btn-border-color: var(--fute-bleu);
    --bs-btn-hover-bg: var(--fute-bleu);
    --bs-btn-hover-border-color: var(--fute-bleu);
    --bs-btn-active-bg: var(--fute-bleu);
    --bs-btn-active-border-color: var(--fute-bleu);
}

/* --- Badges aux couleurs de marque --- */
.badge-bleu-fute { background-color: var(--fute-bleu); color: #fff; }
.badge-vert-fute { background-color: var(--fute-vert); color: #fff; }
.badge-jaune-fute { background-color: var(--fute-jaune); color: var(--fute-noir); }
.badge-saumon-fute { background-color: var(--fute-saumon); color: #fff; }

/* --- Alertes aux couleurs de marque --- */
.alert-succes-fute {
    background-color: #e4f5ee;
    border: 1px solid var(--fute-vert);
    color: #14634a;
}
.alert-info-fute {
    background-color: #ececf5;
    border: 1px solid var(--fute-bleu);
    color: var(--fute-bleu);
}
.alert-jaune-fute {
    background-color: #fdf3dc;
    border: 1px solid var(--fute-jaune);
    color: #6b4d0c;
}
.alert-jaune-fute code {
    color: var(--fute-noir);
    background: #fff;
    border: 1px solid var(--fute-jaune);
    border-radius: .3rem;
    padding: .1rem .45rem;
}

/* --- Formulaires : anneau de focus à la marque --- */
.form-control:focus,
.form-check-input:focus {
    border-color: var(--fute-bleu);
    box-shadow: 0 0 0 .25rem rgba(44, 44, 107, .18);
}
.form-check-input:checked {
    background-color: var(--fute-bleu);
    border-color: var(--fute-bleu);
}

/* --- Tableaux --- */
.table thead th {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: var(--fute-bleu);
    white-space: nowrap;
}

/* --- Page de connexion : fond bleu officiel --- */
.page-invite {
    background-color: var(--fute-bleu);
}
.texte-sur-bleu { color: rgba(255, 255, 255, .75); }

/* --- Accueil --- */
.etiquette-carte {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fute-bleu);
}
.itineraire li {
    padding: .35rem 0;
    color: var(--fute-noir);
}
.chiffre-socle {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    color: var(--fute-bleu);
}

/* --- Vue Backlog --- */
.alert-saumon-fute {
    background-color: #fdecea;
    border: 1px solid var(--fute-saumon);
    color: #96352a;
}
.bandeau-zone {
    border-left: .35rem solid var(--fute-saumon);
    padding-left: .6rem;
}
.bandeau-epique {
    background-color: var(--fute-bleu);
    color: #fff;
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    font-size: .95rem;
}
.id-eb {
    color: var(--fute-bleu);
    background-color: #ececf5;
    border-radius: .3rem;
    padding: .1rem .4rem;
    white-space: nowrap;
}
.table-backlog tbody tr[data-bs-toggle] { cursor: pointer; }
.table-backlog .ligne-fiche:hover { background-color: transparent; }
.fiche-eb {
    background-color: #fafafe;
    border-top: 1px solid #e3e4ef;
    border-bottom: 2px solid var(--fute-bleu);
}
.barre-fute { background-color: var(--fute-bleu); }
.compteur-charge { border-left: .35rem solid var(--fute-vert) !important; }

/* --- Timeline du sprint en cours --- */
.timeline-jours {
    display: grid;
    grid-template-columns: repeat(var(--nb-jours, 5), minmax(0, 1fr));
}
.timeline-jour {
    border-right: 1px solid #e3e4ef;
    padding: .65rem .6rem;
    min-height: 5.5rem;
}
.timeline-jour:last-child { border-right: 0; }
.timeline-jour-entete {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: .78rem;
    color: var(--fute-bleu);
    margin-bottom: .4rem;
    white-space: nowrap;
}
.jour-actif { background-color: #fdf3dc55; box-shadow: inset 0 3px 0 var(--fute-saumon); }
.jour-passe .timeline-rencontre { opacity: .6; }
.timeline-rencontre {
    background-color: #ececf5;
    border-left: 3px solid var(--fute-bleu);
    border-radius: .3rem;
    font-size: .74rem;
    padding: .25rem .4rem;
    margin-bottom: .3rem;
}
@media (max-width: 767px) {
    .timeline-jours { grid-template-columns: 1fr; }
    .timeline-jour { border-right: 0; border-bottom: 1px solid #e3e4ef; min-height: auto; }
}

.titre-section-fiche {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fute-bleu);
    margin-bottom: .35rem;
}
.itineraire li .bi-circle { color: #b9bccc; }
.itineraire li.fait .bi-check-circle-fill { color: var(--fute-vert); }