/*
 * ANKATA - systeme de design commun a la vitrine, a l'authentification et aux
 * espaces chauffeur et passager. Bootstrap 5 fournit la grille et les
 * composants ; ce fichier porte l'identite (couleurs du logo, typographie,
 * formes arrondies) et les composants propres a Ankata.
 */

:root {
    --ankata-bleu: #1769aa;
    --ankata-bleu-fonce: #0f4f82;
    --ankata-bleu-pale: #eef5fb;
    --ankata-vert: #2e9d57;
    --ankata-encre: #1d2a36;
    --ankata-gris: #6b7785;
    --ankata-trait: #e4e8ec;
    --ankata-fond: #f4f6f8;
    --ankata-ombre: 0 1px 4px rgba(29, 42, 54, .12);
    --ankata-ombre-survol: 0 6px 20px rgba(29, 42, 54, .16);
}

body { font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ankata-encre); background: #fff; }
a { color: var(--ankata-bleu); }
a:hover { color: var(--ankata-bleu-fonce); }
:focus-visible { outline: 3px solid rgba(23, 105, 170, .45); outline-offset: 2px; }
.bg-fond { background: var(--ankata-fond); }
.min-w-0 { min-width: 0; }

/* Marges laterales : Bootstrap ne laisse que 12px, trop serre sur mobile */
.container { padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }
section.py-5 { padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; }

/* ── En-tete ── */
.navbar-ankata { background: #fff; border-bottom: 1px solid var(--ankata-trait); }
.navbar-ankata img { height: 44px; }
.lien-nav { color: var(--ankata-bleu) !important; font-weight: 700; }
.lien-nav:hover { color: var(--ankata-bleu-fonce) !important; }
.btn-compte { border: 0; background: transparent; color: var(--ankata-gris); }
.btn-compte:hover, .btn-compte:focus { color: var(--ankata-bleu); }

/* ── Boutons ── */
.btn-principal, .btn-secondaire, .btn-inverse { border-radius: 999px; font-weight: 700; padding: .6rem 1.5rem; }
.btn-principal.btn-sm, .btn-secondaire.btn-sm { padding: .35rem 1rem; }
.btn-principal { background: var(--ankata-bleu); border: 2px solid var(--ankata-bleu); color: #fff; }
.btn-principal:hover, .btn-principal:focus, .btn-principal:active { background: var(--ankata-bleu-fonce) !important; border-color: var(--ankata-bleu-fonce) !important; color: #fff !important; }
.btn-secondaire { background: #fff; border: 2px solid var(--ankata-trait); color: var(--ankata-bleu); }
.btn-secondaire:hover, .btn-secondaire:focus, .btn-secondaire:active { background: var(--ankata-bleu-pale) !important; border-color: var(--ankata-bleu) !important; color: var(--ankata-bleu-fonce) !important; }
.btn-inverse { background: #fff; border: 0; color: var(--ankata-bleu); }
.btn-inverse:hover { background: #e8f1f9; color: var(--ankata-bleu-fonce); }

/* ── Divers ── */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #dcebf7; color: var(--ankata-bleu); font-weight: 800; font-size: .95rem; }
.avatar-sm { width: 32px; height: 32px; font-size: .8rem; }
.titre-section { font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1.5rem; }
.statut { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.statut-attente { background: #fff4db; color: #8a5a00; }
.statut-acceptee { background: #e3f4ea; color: #1f7a44; }
.statut-refusee { background: #fbe5e3; color: #a3312a; }
.statut-neutre { background: var(--ankata-fond); color: var(--ankata-gris); }
.alert { border-radius: .75rem; }

/* ── Formulaires ── */
.form-label { font-weight: 700; }
.form-control, .form-select { border-radius: .75rem; border-color: #d5dbe1; padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--ankata-bleu); box-shadow: 0 0 0 .2rem rgba(23, 105, 170, .15); }
.form-check-input:checked { background-color: var(--ankata-bleu); border-color: var(--ankata-bleu); }
.btn-afficher-mdp { border: 1px solid #d5dbe1; border-left: 0; border-radius: 0 .75rem .75rem 0; background: #fff; color: var(--ankata-gris); }
.btn-afficher-mdp:hover { color: var(--ankata-bleu); background: #fff; }
.input-group > .form-control:focus + .btn-afficher-mdp { border-color: var(--ankata-bleu); }
.btn-choix { border: 2px solid var(--ankata-trait); border-radius: .75rem; font-weight: 700; color: var(--ankata-encre); background: #fff; }
.btn-check:checked + .btn-choix { border-color: var(--ankata-bleu); background: var(--ankata-bleu-pale); color: var(--ankata-bleu); }
.btn-check:focus-visible + .btn-choix { outline: 3px solid rgba(23, 105, 170, .35); }
.section-form + .section-form { border-top: 1px solid var(--ankata-trait); margin-top: 1.75rem; padding-top: 1.75rem; }
.section-form h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; }
.section-form h2 .num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ankata-bleu-pale); color: var(--ankata-bleu); font-size: .85rem; }
details > summary { cursor: pointer; color: var(--ankata-bleu); font-weight: 700; }

/* ── Barre de recherche ── */
.barre-recherche { display: flex; background: #fff; border-radius: 1rem; box-shadow: 0 8px 28px rgba(29, 42, 54, .18); overflow: hidden; }
.barre-compacte { box-shadow: 0 1px 4px rgba(29, 42, 54, .14); }
.barre-recherche .champ { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; min-height: 58px; border-right: 1px solid var(--ankata-trait); }
.barre-compacte .champ { min-height: 48px; }
.barre-recherche .champ:focus-within { background: #f1f7fc; }
.barre-recherche .champ i { color: var(--ankata-gris); }
.barre-recherche input, .barre-recherche select { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-weight: 700; color: inherit; }
.barre-recherche input::placeholder { color: var(--ankata-gris); font-weight: 600; }
.btn-rechercher { border: 0; background: var(--ankata-bleu); color: #fff; font-weight: 800; padding: 0 2rem; }
.btn-rechercher:hover { background: var(--ankata-bleu-fonce); }
@media (max-width: 767.98px) {
    .barre-recherche { flex-direction: column; }
    .barre-recherche .champ { border-right: 0; border-bottom: 1px solid var(--ankata-trait); flex-basis: auto; }
    .btn-rechercher { min-height: 52px; }
}

/* ── Carte de trajet ── */
.carte-trajet { display: block; background: #fff; border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 1px 4px rgba(29, 42, 54, .16); color: inherit; text-decoration: none; transition: box-shadow .15s ease; }
.carte-trajet:hover, .carte-trajet:focus { box-shadow: var(--ankata-ombre-survol); color: inherit; }
.frise .etape, .frise .duree { display: grid; grid-template-columns: 3.2rem 14px 1fr; column-gap: .75rem; }
.frise .heure { font-weight: 800; }
.frise .point { width: 14px; height: 14px; margin-top: .3rem; border: 3px solid var(--ankata-encre); border-radius: 50%; background: #fff; }
.frise .ville { font-weight: 800; }
.frise .lieu { color: var(--ankata-gris); font-size: .85rem; }
.frise .duree .libelle { font-size: .75rem; color: var(--ankata-gris); align-self: center; }
.frise .duree .trait { width: 3px; min-height: 1.9rem; justify-self: center; background: var(--ankata-encre); }
.carte-trajet .prix { font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.carte-trajet .prix small { font-size: .75rem; font-weight: 700; }
.pied-carte { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--ankata-trait); }

/* ── Authentification ── */
.page-auth { background: var(--ankata-fond); padding-block: clamp(2rem, 6vw, 4rem); }
.carte-auth { max-width: 460px; margin-inline: auto; background: #fff; border-radius: 1.25rem; box-shadow: var(--ankata-ombre); padding: clamp(1.5rem, 5vw, 2.5rem); }
.carte-auth.large { max-width: 640px; }
.carte-auth h1 { font-weight: 800; font-size: clamp(1.5rem, 4vw, 1.9rem); }
.choix-role { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.choix-role input { position: absolute; opacity: 0; pointer-events: none; }
.choix-role label { display: block; height: 100%; padding: 1rem; border: 2px solid var(--ankata-trait); border-radius: 1rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.choix-role label:hover { border-color: #b9d3ea; }
.choix-role input:checked + label { border-color: var(--ankata-bleu); background: var(--ankata-bleu-pale); }
.choix-role input:focus-visible + label { outline: 3px solid rgba(23, 105, 170, .35); }
.choix-role i { font-size: 1.5rem; color: var(--ankata-bleu); }
@media (max-width: 479.98px) { .choix-role { grid-template-columns: 1fr; } }

/* ── Espaces chauffeur et passager ── */
.espace { background: var(--ankata-fond); padding-block: 2rem 3rem; min-height: 70vh; }
.nav-espace { background: #fff; border-radius: 1rem; box-shadow: var(--ankata-ombre); padding: .5rem; }
.nav-espace .nav-link { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: .75rem; color: var(--ankata-encre); font-weight: 700; white-space: nowrap; }
.nav-espace .nav-link i { width: 1.25rem; text-align: center; color: var(--ankata-gris); }
.nav-espace .nav-link:hover { background: var(--ankata-fond); }
.nav-espace .nav-link.active { background: var(--ankata-bleu-pale); color: var(--ankata-bleu); }
.nav-espace .nav-link.active i { color: var(--ankata-bleu); }
.nav-espace .badge { margin-left: auto; }
@media (min-width: 992px) { .nav-espace { position: sticky; top: 88px; } }
@media (max-width: 991.98px) { .nav-espace { overflow-x: auto; } .nav-espace .nav-link { padding: .55rem .8rem; } }

.bloc { background: #fff; border-radius: 1rem; box-shadow: var(--ankata-ombre); padding: clamp(1.25rem, 3vw, 1.75rem); }
.bloc-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.bloc-titre a { font-size: .9rem; text-decoration: none; }

.tuile-stat { height: 100%; background: #fff; border-radius: 1rem; box-shadow: var(--ankata-ombre); padding: 1rem 1.25rem; }
.tuile-stat > i { width: 40px; height: 40px; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; background: var(--ankata-bleu-pale); color: var(--ankata-bleu); }
.tuile-stat .valeur { font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.tuile-stat .libelle { color: var(--ankata-gris); font-size: .9rem; font-weight: 600; }

.etape-onboarding { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 0; }
.etape-onboarding + .etape-onboarding { border-top: 1px solid var(--ankata-trait); }
.etape-onboarding .pastille { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ankata-fond); color: var(--ankata-gris); font-weight: 800; }
.etape-onboarding.faite .pastille { background: var(--ankata-vert); color: #fff; }
.etape-onboarding.faite .titre-etape { color: var(--ankata-gris); text-decoration: line-through; }

.ligne-liste { display: flex; align-items: center; gap: .75rem 1rem; padding: .9rem 0; }
.ligne-liste + .ligne-liste { border-top: 1px solid var(--ankata-trait); }
.date-bloc { width: 3.25rem; flex-shrink: 0; padding: .35rem 0; border-radius: .75rem; background: var(--ankata-bleu-pale); color: var(--ankata-bleu); text-align: center; }
.date-bloc .mois { font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.date-bloc .jour { font-size: 1.35rem; font-weight: 800; line-height: 1; }

.vide { padding: 2rem 1rem; text-align: center; color: var(--ankata-gris); }
.vide > i { display: block; font-size: 2rem; margin-bottom: .75rem; }

.icone-vehicule { width: 72px; height: 72px; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--ankata-bleu-pale); color: var(--ankata-bleu); font-size: 1.75rem; flex-shrink: 0; }
.photo-vehicule { width: 96px; height: 72px; object-fit: cover; border-radius: 1rem; flex-shrink: 0; }

/* ── Carte des lieux ── */
.choix-position { margin-top: -.25rem; margin-bottom: 1rem; }
.carte-position { height: 280px; border-radius: .75rem; border: 1px solid var(--ankata-trait); z-index: 0; }
div.choix-position .carte-position { height: 420px; }
.leaflet-container { font-family: inherit; }

/* ── Pied de page ── */
.pied-site { background: var(--ankata-encre); color: #b9c2cb; }
.pied-site a { color: #dfe5ea; text-decoration: none; }
.pied-site a:hover { color: #fff; text-decoration: underline; }
.pied-site .marque { display: inline-block; background: #fff; border-radius: .75rem; padding: .4rem .6rem; }
.pied-site .marque img { height: 40px; }
.pied-site h2 { color: #fff; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.pied-site ul { list-style: none; padding: 0; margin: 0; }
.pied-site li + li { margin-top: .6rem; }
.pied-site .bas { border-top: 1px solid rgba(255, 255, 255, .12); }
.pied-site .credit a { color: #fff; font-weight: 700; }

/* Compteurs de l'en-tete : messages et notifications non lus */
.icone-compteur { position: relative; font-size: 1.15rem; }
.icone-compteur .compteur { position: absolute; top: 0; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 1rem; background: #dc3545; color: #fff; font-size: .7rem; font-weight: 800; line-height: 1.15rem; text-align: center; }
.menu-notifications { width: min(340px, calc(100vw - 2rem)); overflow: hidden; }
.menu-notifications .dropdown-item { white-space: normal; }
.menu-notifications .dropdown-item.non-lue { background: var(--ankata-bleu-pale); }
.menu-notifications .dropdown-item i { color: var(--ankata-bleu); width: 1.1rem; }