/**********************************************************************************
 *                    AR AFFAIRES — ÉCRANS ET COMPOSANTS RICHES
 *
 *  Liste, fiche, timeline, feuilles d'action.
 **********************************************************************************/


/**********************************************************************************
 *                          BARRE DE RECHERCHE
 **********************************************************************************/

.recherche {
    position: relative;
    margin-bottom: 16px;
}

.recherche input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px 12px 46px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--r-rond);
    background: var(--surface);
    font-size: 16px;
}

.recherche input:focus {
    outline: none;
    border-color: var(--terracotta);
}

.recherche .icone {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--texte-faible);
    pointer-events: none;
}


/**********************************************************************************
 *                          LISTE DES AFFAIRES
 **********************************************************************************/

.carte-affaire .ligne-haut {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.carte-affaire .client {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte-affaire .objet {
    font-size: 14px;
    color: var(--texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 9px;
}

.carte-affaire .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--texte-faible);
}

.carte-affaire .montant {
    font-weight: 700;
    color: var(--texte);
}

.carte-affaire .puce-entite {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.carte-affaire .puce-entite::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--couleur-entite, var(--texte-faible));
}

/* Marqueur discret mais net : ce dossier attend une relance */
.carte-affaire.a-relancer {
    border-color: var(--alerte);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--alerte) 7%, var(--surface)) 0%,
        var(--surface) 60%);
}


/**********************************************************************************
 *                          FICHE — EN-TÊTE CLIENT
 **********************************************************************************/

.fiche-tete {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--ombre-s);
}

.fiche-tete .nom {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.fiche-tete .objet {
    margin-top: 4px;
    color: var(--texte-doux);
}

.fiche-tete .lieu {
    margin-top: 2px;
    font-size: 14px;
    color: var(--texte-faible);
}

/* Les quatre gestes du quotidien : appeler, écrire, mailer, y aller */
.actions-contact {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--bordure);
}


/**********************************************************************************
 *                          FICHE — BLOC D'INFORMATIONS
 **********************************************************************************/

.infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    overflow: hidden;
    margin-bottom: 16px;
}

.infos .case {
    background: var(--surface);
    padding: 14px 16px;
}

.infos .cle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-faible);
    margin-bottom: 3px;
}

.infos .valeur {
    font-size: 16px;
    font-weight: 600;
}

.infos .valeur.gros { font-size: 20px; font-weight: 800; }


/**********************************************************************************
 *                              TIMELINE
 **********************************************************************************/

.timeline {
    position: relative;
    padding-left: 30px;
}

/* Le fil vertical qui relie les événements */
.timeline::before {
    content: '';
    position: absolute;
    left: 9px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--bordure);
}

.evenement {
    position: relative;
    padding-bottom: 20px;
}

.evenement::before {
    content: '';
    position: absolute;
    left: -26px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--texte-faible);
}

.evenement[data-type="creation"]::before    { border-color: var(--st-nouvelle); }
.evenement[data-type="appel"]::before       { border-color: var(--st-contactee); }
.evenement[data-type="rdv"]::before         { border-color: var(--st-rdv); }
.evenement[data-type="devis"]::before       { border-color: var(--st-devis); }
.evenement[data-type="affectation"]::before { border-color: var(--terracotta); }
.evenement[data-type="statut"]::before      { border-color: var(--st-gagnee); }

.evenement .resume {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.evenement .signature {
    margin-top: 3px;
    font-size: 13px;
    color: var(--texte-faible);
}

.evenement .detail {
    margin-top: 7px;
    padding: 10px 12px;
    background: var(--surface-douce);
    border-radius: var(--r-s);
    font-size: 14px;
    color: var(--texte-doux);
    white-space: pre-wrap;
}


/**********************************************************************************
 *                       BARRE D'ACTIONS DE LA FICHE
 *
 *  Les six actions du brief, toutes visibles, défilement horizontal.
 *  L'étape suivante est mise en avant : le geste évident doit se voir sans lire.
 **********************************************************************************/

.barre-actions {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--bordure);
    overflow-x: auto;
    scrollbar-width: none;
}

.barre-actions::-webkit-scrollbar { display: none; }

.action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 78px;
    min-height: var(--touche);
    padding: 9px 12px;
    border-radius: var(--r-m);
    background: var(--surface-douce);
    border: 1.5px solid var(--bordure);
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 700;
    transition: transform .12s ease;
}

.action:active { transform: scale(.95); }

.action.suivante {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: #FFF;
    box-shadow: var(--ombre-m);
}

.action.danger { color: var(--erreur); }

.action[disabled] { opacity: .4; }


/**********************************************************************************
 *                        FEUILLE GLISSANTE (bottom sheet)
 *
 *  Trois champs maximum. Au-delà, un artisan sur un chantier renonce.
 **********************************************************************************/

.voile {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(16, 24, 40, .45);
    animation: apparaitre .18s ease;
}

@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

.feuille {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 41;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-radius: var(--r-l) var(--r-l) 0 0;
    box-shadow: var(--ombre-l);
    animation: monter .24s cubic-bezier(.2, .8, .3, 1);
}

@keyframes monter { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* La poignée : signale qu'on peut refermer d'un geste */
.feuille .poignee {
    width: 42px; height: 5px;
    margin: 0 auto 18px;
    border-radius: var(--r-rond);
    background: var(--bordure);
}

.feuille h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 4px;
}

.feuille .intro {
    font-size: 14px;
    color: var(--texte-doux);
    margin-bottom: 20px;
}

.feuille .pied {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.feuille .pied .btn { flex: 1; }

/* Choix rapides : joint / injoignable / à rappeler */
.choix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.choix button {
    min-height: 52px;
    padding: 10px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--r-m);
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
}

.choix button[aria-pressed="true"] {
    border-color: var(--terracotta);
    background: var(--terracotta-clair);
    color: var(--terracotta);
}


/**********************************************************************************
 *                        AFFECTATION — GRILLE D'ENTITÉS
 **********************************************************************************/

.grille-entites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.entite-tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 8px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--r-m);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.entite-tuile .pastille-couleur {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}

.entite-tuile[aria-pressed="true"] {
    border-color: var(--terracotta);
    border-width: 2.5px;
    background: var(--terracotta-clair);
}

.entite-tuile .type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-faible);
}


/**********************************************************************************
 *                          BOÎTE DE RÉCEPTION
 **********************************************************************************/

.carte-lead {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    padding: 16px;
    margin-bottom: 10px;
}

.carte-lead .canal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-faible);
    margin-bottom: 6px;
}

.carte-lead .titre-lead {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.carte-lead .extrait {
    font-size: 14px;
    color: var(--texte-doux);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.etiquette-categorie {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--r-rond);
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-douce);
    color: var(--texte-doux);
}

.etiquette-categorie[data-cat="devis"]       { background: #E7F3EC; color: #0E7A3C; }
.etiquette-categorie[data-cat="sav"]         { background: #FDF0E3; color: #A45B0B; }
.etiquette-categorie[data-cat="demarchage"]  { background: #F0F1F3; color: #6B7684; }
.etiquette-categorie[data-cat="candidature"] { background: #EDEBF7; color: #55499B; }

@media (prefers-color-scheme: dark) {
    .etiquette-categorie[data-cat="devis"]       { background: #16321F; color: #57C287; }
    .etiquette-categorie[data-cat="sav"]         { background: #35271A; color: #E0A45C; }
    .etiquette-categorie[data-cat="demarchage"]  { background: #262B32; color: #9BA6B4; }
    .etiquette-categorie[data-cat="candidature"] { background: #262341; color: #9C8FE0; }
}


/**********************************************************************************
 *                              DIVERS
 **********************************************************************************/

/* Bandeau d'alerte discret : doublon détecté, lecture seule... */
.avertissement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--r-m);
    background: color-mix(in srgb, var(--alerte) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--alerte) 35%, var(--surface));
    font-size: 14px;
}

.avertissement .icone { color: var(--alerte); flex-shrink: 0; }

/* Message éphémère de confirmation */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bas) + 22px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 60;
    max-width: 90vw;
    padding: 13px 20px;
    border-radius: var(--r-rond);
    background: var(--ardoise);
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--ombre-l);
    animation: monter-toast .2s ease;
}

@keyframes monter-toast {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.toast.erreur { background: var(--erreur); }