/* ==========================================================================
   appcards.css — les listes de l'espace client : /policies, /quotes,
   /claims, /notifications.

   Reprend le vocabulaire visuel du tableau de bord (mods/homec.php) : carte
   blanche, rangee cliquable, pastille d'etat. Les composants de base
   (.form-card, .form-card__title, .form-card__subtitle) viennent de
   travel-flow.css, que ces pages chargent aussi.

   Regle daltonisme (Remi) : une pastille d'etat porte TOUJOURS son libelle.
   La teinte ne fait que doubler le texte, elle ne dit rien seule.
   ========================================================================== */

/* La marge haute degage le header, qui est en position absolue au-dessus de
   la page (69px, 74px sous 768px). */
.appsec { max-width: 980px; margin: 0 auto; padding: 74px 20px 70px; }
.appsec__head { margin-bottom: 24px; }
.appsec__title {
    font-family: var(--tg-heading-font-family);
    font-size: 32px; font-weight: 700; color: var(--tg-theme-primary-800);
    margin: 0 0 6px;
}
.appsec__sub {
    font-family: var(--tg-body-font-family); font-size: 14px;
    color: var(--tg-theme-primary-300); margin: 0;
}

/* ─── Groupe (un titre, un compteur, une liste) ─────────────────────────── */
.agroup { margin-bottom: 30px; }
.agroup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.agroup__head .material-icons { color: var(--tg-theme-secondary-500); font-size: 22px; }
.agroup__title {
    font-family: var(--tg-heading-font-family); font-size: 18px; font-weight: 700;
    color: var(--tg-theme-primary-800);
}
.agroup__count {
    font-family: var(--tg-body-font-family); font-size: 12px; font-weight: 700;
    background: var(--tg-theme-primary-50, #ecf6fa); color: var(--tg-theme-primary-500);
    border-radius: 20px; padding: 2px 10px;
}
.agroup__note {
    font-family: var(--tg-body-font-family); font-size: 12.5px;
    color: var(--tg-theme-primary-300); margin: -6px 0 12px;
}
.alist { display: flex; flex-direction: column; gap: 12px; }

/* ─── Rangee ────────────────────────────────────────────────────────────── */
.arow {
    display: flex; align-items: center; gap: 16px;
    background: var(--tg-color-white-default, #fff);
    border: 2px solid #e8e4ee; border-radius: 14px; padding: 16px 18px;
    text-decoration: none; color: inherit;
}
a.arow:hover { border-color: #cfc9db; box-shadow: 0 6px 18px rgba(14,16,75,.07); }
.arow__ico {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #111;
}
.arow__ico .material-icons { font-size: 24px; color: #fff; }
.arow__main { flex: 1; min-width: 0; }
.arow__kind {
    font-family: var(--tg-body-font-family); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px;
}
.arow__name {
    font-family: var(--tg-heading-font-family); font-size: 15.5px; font-weight: 700;
    color: var(--tg-theme-primary-800); word-break: break-word;
}
.arow__meta {
    font-family: var(--tg-body-font-family); font-size: 12.5px;
    color: var(--tg-theme-primary-300); margin-top: 3px;
}
.arow__text {
    font-family: var(--tg-body-font-family); font-size: 13.5px;
    color: var(--tg-body-color); margin-top: 6px; line-height: 1.5;
}
.arow__right {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    margin-left: auto; text-align: right;
}
.arow__price {
    font-family: var(--tg-heading-font-family); font-size: 17px; font-weight: 800;
    color: var(--tg-theme-primary-800); white-space: nowrap;
}
.arow__chev { color: #cfcbe0; }

/* ─── Pastilles d'etat : la teinte double le libelle, jamais l'inverse ─── */
.abadge {
    display: inline-block; padding: 4px 11px; border-radius: 20px;
    font-family: var(--tg-body-font-family); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.abadge--ok   { background: #e8f5e9; color: #1b5e20; }
.abadge--warn { background: #fff3e0; color: #bf360c; }
.abadge--info { background: #ecf6fa; color: #191d88; }
.abadge--off  { background: #f3f2f6; color: #5a5670; }

/* ─── Boutons d'action d'une rangee ─────────────────────────────────────── */
.abtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 9px; border: 2px solid #111;
    background: #111; color: #fff; cursor: pointer; text-decoration: none;
    font-family: var(--tg-heading-font-family); font-size: 12.5px; font-weight: 700;
    white-space: nowrap;
}
.abtn:hover { background: #fff; color: #111; }
.abtn .material-icons { font-size: 16px; }
.abtn--ghost { background: #fff; color: #111; border-color: #d8d4de; }
.abtn--ghost:hover { border-color: #111; background: #fff; color: #111; }

/* ─── Vide ──────────────────────────────────────────────────────────────── */
.aempty {
    text-align: center; padding: 34px 22px; background: #fff;
    border: 1px dashed #e0dce6; border-radius: 14px;
}
.aempty .material-icons { font-size: 34px; color: #cfcbe0; }
.aempty__title {
    font-family: var(--tg-heading-font-family); font-size: 16px; font-weight: 700;
    color: var(--tg-theme-primary-800); margin: 8px 0 4px;
}
.aempty__text {
    font-family: var(--tg-body-font-family); font-size: 13.5px;
    color: var(--tg-theme-primary-300); margin-bottom: 16px;
}

/* ─── Raccourcis produits (page /quotes) ────────────────────────────────── */
.achips { display: flex; flex-wrap: wrap; gap: 10px; }
.achip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 30px; border: 2px solid #e8e4ee;
    background: #fff; text-decoration: none;
    font-family: var(--tg-body-font-family); font-size: 13.5px; font-weight: 600;
    color: var(--tg-theme-primary-800);
}
.achip:hover { border-color: #111; color: var(--tg-theme-primary-800); }
.achip .material-icons { font-size: 18px; color: var(--tg-theme-secondary-500); }

/* ─── Etapes d'un sinistre (reprise du tableau de bord) ────────────────── */
.asteps { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.astep {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--tg-body-font-family); font-size: 11px; color: #9a94a6;
}
.astep__dot {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ddd8e6;
    display: flex; align-items: center; justify-content: center;
}
.astep__dot .material-icons { font-size: 10px; color: #fff; }
.astep.is-done .astep__dot { background: #111; border-color: #111; }
.astep.is-done, .astep.is-now { color: var(--tg-theme-primary-800); font-weight: 700; }
.astep.is-now .astep__dot { border-color: #111; border-width: 3px; }

/* ─── Notifications ────────────────────────────────────────────────────── */
.anew {
    width: 9px; height: 9px; border-radius: 50%; background: var(--tg-theme-primary-500);
    flex-shrink: 0;
}

/* ─── Categories produit (memes teintes que le tableau de bord) ────────── */
.cat-health { background: #4caf50; } .cat-health-text { color: #2e7d32; }
.cat-motor  { background: #2196f3; } .cat-motor-text  { color: #1565c0; }
.cat-travel { background: #ff9800; } .cat-travel-text { color: #b35b00; }
.cat-home   { background: #795548; } .cat-home-text   { color: #5d4037; }
.cat-fleet  { background: #455a64; } .cat-fleet-text  { color: #37474f; }
.cat-property { background: #6d4c41; } .cat-property-text { color: #5d4037; }
.cat-liability { background: #5e35b1; } .cat-liability-text { color: #4527a0; }
.cat-expat  { background: #9c27b0; } .cat-expat-text  { color: #7b1fa2; }

@media (max-width: 991.98px) {
    .appsec { padding: 70px 16px 40px; }
}
@media (max-width: 767.98px) {
    .appsec { padding: 70px 14px 30px; }
    .appsec__title { font-size: 26px; }
    .arow { flex-wrap: wrap; }
    /* Le bloc de droite passe sur sa propre ligne, et il doit pouvoir se
       replier lui aussi : pastille + prix + bouton ne tiennent pas cote a
       cote sur 412px, le bouton sortait de la carte (vu par Remi sur
       /quotes le 2026-09-07). Le bouton prend donc toute la largeur, en
       dessous — c'est aussi une cible tactile correcte. */
    .arow__right {
        width: 100%; margin-left: 0; flex-wrap: wrap; flex-shrink: 1;
        gap: 10px; justify-content: space-between; text-align: left;
    }
    .arow__right .abtn { width: 100%; justify-content: center; order: 3; }
    .arow__ico { width: 40px; height: 40px; }
    .abadge { white-space: normal; }
}