body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #374151;
    background-color: #f9fafb;
}

.navbar { box-shadow: 0 2px 4px rgba(0,0,0,.08); }

.card {
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
}

.card-header {
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    border-radius: .75rem .75rem 0 0 !important;
    padding: .85rem 1.25rem;
}

.table th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom-width: 1px;
}

.x-small { font-size: .72rem; }

.badge { font-weight: 500; }

/* Login page */
body.login-page {
    background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);
}

.login-card {
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    font-size: 1.5rem;
}

/* Dashboard – lignes cliquables */
.tbl-row-link:hover td { background-color: var(--bs-table-hover-bg); }
.tbl-row-link:focus-within td { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* Espacement lettrage titres sections */
.letter-spacing { letter-spacing: .04em; }

/* Badge "à jour" Bootstrap 5.3 subtle */
.bg-success-subtle { background-color: #d1e7dd; }
.border-success-subtle { border-color: #a3cfbb !important; }

/* Frise verticale d'avancement sinistre */
.claim-timeline { position: relative; }
.ct-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    position: relative;
    padding-bottom: 1.35rem;
}
.ct-item:last-child { padding-bottom: 0; }
.ct-item::before {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 2.35rem;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.ct-item:last-child::before { display: none; }
.ct-item.ct-done::before { background: #16a34a; }
.ct-dot {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.ct-done .ct-dot {
    background: #16a34a;
    color: #fff;
    font-size: 1rem;
}
.ct-pending .ct-dot {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    color: #9ca3af;
}
.ct-content { padding-top: .3rem; }
.ct-label { font-size: .875rem; font-weight: 500; }
.ct-done .ct-label { color: #111827; }
.ct-pending .ct-label { color: #9ca3af; }
.ct-date { font-size: .75rem; color: #16a34a; margin-top: .1rem; }

/* form inline dans table */
.d-contents { display: contents; }

/* ================================================================
   PAGE DEVIS — Cartes de branches (BLOC 4)
   ================================================================ */

.branch-card {
    border: 2px solid #e5e7eb;
    border-radius: .75rem;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.branch-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 16px rgba(29, 78, 216, .12) !important;
    transform: translateY(-2px);
}
.branch-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .625rem;
    background: #eff6ff;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.branch-icon--disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ================================================================
   RESPONSIVE — Mobile-first (BLOC 1)
   ================================================================ */

/* Tableaux → cartes empilées sur mobile (< 768 px) */
@media (max-width: 767.98px) {
    .tbl-card-mobile {
        border: none !important;
        background: transparent !important;
    }
    .tbl-card-mobile thead {
        display: none;
    }
    .tbl-card-mobile tbody,
    .tbl-card-mobile tbody tr {
        display: block;
    }
    .tbl-card-mobile tbody tr {
        border: 1px solid #e5e7eb !important;
        border-radius: .75rem;
        margin-bottom: .625rem;
        padding: .5rem .875rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .tbl-card-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .35rem 0;
        border: none !important;
        font-size: .875rem;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    .tbl-card-mobile tbody tr td:last-child {
        border-bottom: none !important;
        padding-top: .5rem;
    }
    .tbl-card-mobile tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .05em;
        flex-shrink: 0;
        margin-right: .75rem;
        min-width: 6rem;
    }
    /* Cellule sans label (boutons d'action) */
    .tbl-card-mobile tbody td[data-label=""]::before {
        display: none;
    }

    /* Une valeur longue — badge, libellé d'état — se replie dans la largeur
       restante plutôt que d'élargir la carte au-delà de l'écran. */
    .tbl-card-mobile tbody td > *:last-child {
        min-width: 0;
        text-align: right;
    }
    .tbl-card-mobile tbody td .badge {
        white-space: normal;
    }
    .tbl-card-mobile tbody td[data-label=""] {
        justify-content: flex-end;
    }

    /* Formulaires : taille ≥ 16px pour éviter le zoom auto sur iOS */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 1rem !important;
    }

    /* Cibles tactiles : 44 px minimum (Apple HIG, WCAG 2.5.5).
       Les variantes « sm » gardent leur typographie réduite mais pas leur
       hauteur : au doigt, un bouton de 34 px se rate une fois sur trois. */
    .btn,
    .btn-sm,
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        min-height: 2.75rem;
    }
    .btn,
    .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Liens de navigation isolés (« Code PIN oublié ? », « Retour à la
       connexion ») : sans surface propre, ils n'offraient que 16 px de haut. */
    .tap-target {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 .25rem;
    }

    /* Barre de navigation : logo et bouton d'ouverture du menu */
    .navbar-brand,
    .navbar-toggler { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }

    /* Badges de statut : lisibles au-delà de 12 px */
    .badge { font-size: .78rem; padding: .34em .6em; }

    /* Alerte restant dû pleine largeur sur dashboard */
    .alert[style*="max-width"] {
        max-width: 100% !important;
    }

    /* Upload forms (sinistre/contrat) : empilement vertical */
    .d-flex.gap-2.flex-wrap.align-items-end {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* Ajustements petits mobiles (< 576 px) */
@media (max-width: 575.98px) {
    main.container,
    main.container-fluid {
        padding-left: .875rem;
        padding-right: .875rem;
        padding-top: 1rem;
    }
    .card-body { padding: .875rem; }
    h2.h4, h2.h5 { font-size: 1.05rem; }
    .navbar-brand img { max-height: 30px; }
    .row.g-4 { --bs-gutter-y: .75rem; }
}

/* ── Composant « pièces » à dépôt direct (§5.4) ──────────────────────────────
   Une carte horizontale par pièce : vignette teintée selon l'état, nom et
   étiquette Obligatoire/Facultatif, fichier déposé, pastille d'état, actions.
   Sans JavaScript, chaque carte montre son champ fichier et son bouton
   « Charger » : rien n'est perdu. `doc-checklist.js` pose `dc-js` sur la
   carte, et c'est alors le libellé « Déposer » qui ouvre le sélecteur. */
.dc-carte{
    --dc-accent:var(--tilki-blue,#0f47f5);--dc-accent-doux:var(--tilki-soft,#edf2ff);
    --dc-encre:var(--tilki-ink,#1d1d1f);--dc-gris:var(--tilki-muted,#6e6e73);
    --dc-trait:var(--tilki-line,#e5e5ea);--dc-neutre:#f0f0f3;
    --dc-ok:#1a7f37;--dc-ok-doux:#e8f5ec;--dc-attente:#a15c00;--dc-attente-doux:#fff4e0;
    --dc-alerte:#c62828;--dc-alerte-doux:#fdecec;
    color:var(--dc-encre);
}
.dc-panneau{background:#fff;border:1px solid var(--dc-trait);border-radius:16px;overflow:hidden}
.dc-entete{padding:18px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--dc-trait)}
.dc-titre{font-size:1.05rem;font-weight:600;margin:0;display:flex;gap:10px;align-items:center}
.dc-titre i{color:var(--dc-accent)}
.dc-jauge{display:flex;align-items:center;gap:12px;min-width:220px}
.dc-jauge-barre{flex:1;height:8px;background:var(--dc-neutre);border-radius:999px;overflow:hidden}
.dc-jauge-barre span{display:block;height:100%;background:var(--dc-accent);border-radius:999px;transition:width .4s}
.dc-jauge-complete .dc-jauge-barre span{background:var(--dc-ok)}
.dc-jauge small{color:var(--dc-gris);white-space:nowrap}
.dc-jauge-complete small{color:var(--dc-ok);font-weight:600}
.dc-groupe{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dc-gris);font-weight:600;margin:16px 4px 8px}
.dc-panneau .dc-liste,.dc-panneau .dc-autres{padding:0 16px}
.dc-panneau .dc-liste{padding-bottom:4px}
.dc-liste{display:flex;flex-direction:column;gap:10px}
.dc-panneau .dc-liste > .dc-groupe:first-child{margin-top:16px}
.dc-vide{color:var(--dc-gris);margin:0;padding:20px;display:flex;gap:8px;align-items:center}

.dc-ligne{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--dc-trait);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s,background-color .15s}
.dc-ligne:hover{border-color:#cdd6f6;box-shadow:0 2px 10px rgba(15,71,245,.06)}
.dc-ligne.dc-survol{border:1.5px dashed var(--dc-accent);background:var(--dc-accent-doux)}
.dc-ligne.dc-occupe{opacity:.75}
.dc-ligne.dc-occupe .dc-cible{pointer-events:none}
.dc-vignette{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;background:var(--dc-neutre);color:var(--dc-gris)}
.dc-ton-ok .dc-vignette{background:var(--dc-ok-doux);color:var(--dc-ok)}
.dc-ton-attente .dc-vignette{background:var(--dc-attente-doux);color:var(--dc-attente)}
.dc-ton-alerte .dc-vignette{background:var(--dc-alerte-doux);color:var(--dc-alerte)}
.dc-nom{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dc-etiquette{font-size:.7rem;font-weight:600;color:var(--dc-gris);background:var(--dc-neutre);padding:2px 8px;border-radius:999px}
.dc-etiquette-obl{color:var(--dc-accent);background:var(--dc-accent-doux)}
.dc-meta{color:var(--dc-gris);font-size:.82rem;margin-top:2px}
.dc-meta i{margin-right:4px}
.dc-meta a{color:var(--dc-accent);text-decoration:none;word-break:break-all}
.dc-meta a:hover{text-decoration:underline}
.dc-progres{height:4px;background:var(--dc-neutre);border-radius:999px;overflow:hidden;margin-top:8px;max-width:240px}
.dc-progres span{display:block;height:100%;width:0;background:var(--dc-accent);transition:width .2s}
.dc-erreur,.dc-succes{font-size:.82rem;margin-top:6px}
.dc-erreur{color:var(--dc-alerte)}
.dc-succes{color:var(--dc-ok)}
.dc-pastille{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;background:var(--dc-neutre);color:var(--dc-gris)}
.dc-pastille > span{display:inline-block}
.dc-pastille > span::first-letter{text-transform:uppercase}
.dc-ton-ok .dc-pastille{background:var(--dc-ok-doux);color:var(--dc-ok)}
.dc-ton-attente .dc-pastille{background:var(--dc-attente-doux);color:var(--dc-attente)}
.dc-ton-alerte .dc-pastille{background:var(--dc-alerte-doux);color:var(--dc-alerte)}
.dc-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.dc-actions .dc-form{display:flex;gap:6px;align-items:center;margin:0}

/* Boutons */
.dc-bouton,.dc-bouton-plein{font-size:.875rem;font-weight:600;border-radius:10px;padding:8px 14px;display:inline-flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;margin:0;border:1px solid var(--dc-trait);background:#fff;color:var(--dc-encre);transition:background-color .15s,color .15s,border-color .15s}
.dc-bouton:hover{border-color:var(--dc-accent);color:var(--dc-accent)}
.dc-bouton-plein{background:var(--dc-accent);border-color:var(--dc-accent);color:#fff}
.dc-bouton-plein:hover{background:#0b3ad0;border-color:#0b3ad0;color:#fff}
.dc-bouton:focus-within,.dc-bouton-plein:focus-within,.dc-bouton-plein:focus-visible{outline:3px solid rgba(15,71,245,.35);outline-offset:2px}
.dc-bouton-icone{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--dc-gris);text-decoration:none}
.dc-bouton-icone:hover{background:var(--dc-neutre);color:var(--dc-encre)}
.dc-validite{display:inline-flex;gap:6px;align-items:center;font-size:.75rem;color:var(--dc-gris);margin:6px 0 0}
.dc-validite span{white-space:nowrap}
.dc-carte .dc-validite input.form-control{width:auto;min-width:0;height:auto;min-height:0;padding:2px 8px;font-size:.78rem;line-height:1.4;border-radius:8px}

/* Sans script : champ fichier et « Charger » visibles. Avec : repliés. */
.dc-js .dc-ligne .dc-fichier,
.dc-js .dc-ligne .dc-envoyer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Autres pièces et ajout libre */
.dc-autres{padding-bottom:16px}
.dc-hors{list-style:none;margin:0 4px 12px;padding:0;font-size:.875rem}
.dc-hors li{display:flex;gap:8px;align-items:baseline;padding:4px 0}
.dc-hors li i{color:var(--dc-gris)}
.dc-hors-vide{color:var(--dc-gris)}
.dc-ajout{border:1.5px dashed var(--dc-trait);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,background-color .15s}
.dc-ajout:hover,.dc-ajout.dc-survol{border-color:var(--dc-accent);background:var(--dc-accent-doux)}
.dc-ajout-intro{display:flex;gap:12px;align-items:center;color:var(--dc-gris)}
.dc-ajout-intro > i{font-size:1.6rem;color:var(--dc-accent)}
.dc-ajout-intro strong{display:block;color:var(--dc-encre)}
.dc-ajout-intro small{display:block}
.dc-ajout-champs{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.dc-champ{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--dc-gris);margin:0;flex:1 1 200px}
.dc-ajout-champs .dc-envoyer{flex:0 0 auto}
.dc-note{color:var(--dc-gris);font-size:.82rem;margin:0;padding:12px 20px;border-top:1px solid var(--dc-trait);display:flex;gap:8px;align-items:center}
.dc-nu .dc-note{border-top:0;padding:12px 0 0}

@media (max-width:640px){
    .dc-ligne{grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
    .dc-statut{grid-column:2}
    .dc-actions{grid-column:1/-1;border-top:1px solid var(--dc-trait);padding-top:10px}
    .dc-actions .dc-form{flex:1;flex-wrap:wrap}
    .dc-actions .dc-cible{flex:1}
    .dc-vignette{width:44px;height:44px}
    .dc-jauge{min-width:0;width:100%}
    .dc-ajout-champs .dc-envoyer{flex:1 1 100%}
    /* 16 px : en dessous, iOS zoome la page au focus. */
    .dc-validite{display:flex;flex-wrap:wrap;max-width:100%}
    .dc-carte .dc-validite input.form-control{font-size:16px;flex:1 1 100%;width:100%}
}

/* Questionnaire médical (COTATION_PHASE_2.md §4 ter) : douze appareils, une
   carte compacte chacun — la page reste lisible au téléphone. */
.fiche-medicale fieldset.card { margin-bottom: .5rem !important; box-shadow: none !important; }
.fiche-medicale fieldset.card > legend.card-header { padding: .4rem .75rem; font-size: .875rem; }
.fiche-medicale fieldset.card > .card-body { padding: .5rem .75rem; }
.fiche-medicale fieldset.card > .card-body > .mb-3:last-child { margin-bottom: 0 !important; }

.bi-tilki-motorcycle::before{content:""!important;display:inline-block;width:1.5em;height:1.2em;background:currentColor;mask:url('/assets/icons/motorcycle.svg') center/contain no-repeat;-webkit-mask:url('/assets/icons/motorcycle.svg') center/contain no-repeat;vertical-align:middle}

/* Bouton « Supprimer » d'une pièce (AM-018, AM-021) : le motif s'ouvre en
   menu flottant, sans prendre la largeur de la ligne (le nom du fichier
   s'écrasait lettre par lettre). */
.dd-supprimer{position:relative}
.dd-supprimer>summary{list-style:none}
.dd-supprimer>summary::-webkit-details-marker{display:none}
.dd-supprimer .dd-form{position:absolute;right:0;top:calc(100% + 4px);z-index:30;width:min(300px,85vw);box-shadow:0 8px 24px rgba(15,23,42,.15)}
@media (max-width:767.98px){.dd-supprimer .dd-form{left:0;right:auto}}