/* ================================================================
   MOTRO CRM — refonte.css
   Chargee APRES les styles inline de index.html.

   Le CRM avait deja sa couche « verre » (Linear/Stripe). Cette
   passe ne la remplace pas : elle la met au niveau du reste du
   site, sur quatre points precis.

   1. LA COURBE. --transition-fine utilisait cubic-bezier(.4,0,.2,1)
      — la courbe Material que la doctrine proscrit nommement (elle
      demarre lentement, donc elle retarde l'instant exact ou l'oeil
      regarde). Toutes les transitions du CRM heritent de ce token :
      une ligne corrige tout.

   2. LE NOIR. rgba(17,19,24) vivait dans son coin ; il rejoint la
      rampe unifiee de l'app (#0A0A0C et ses declinaisons).

   3. LE FOCUS. Aucun anneau clavier ; le meme anneau jaune que
      connexion/admin/finder.

   4. LA PRESSION. Aucun bouton du CRM ne repondait au clic ;
      scale(0.97) en 140ms, partout, sauf desactive.
   ================================================================ */

:root {
    /* 1 — courbes fortes, memes valeurs que le reste du site */
    --transition-fine: .18s cubic-bezier(0.23, 1, 0.32, 1);

    /* 2 — le verre rejoint la rampe commune */
    --verre-sombre:      rgba(12, 12, 15, 0.92);
    --verre-sombre-haut: rgba(26, 26, 31, 0.94);
    --bord-fin:          rgba(255, 255, 255, 0.08);

    /* l'ombre profonde devient contact + diffusion, comme ailleurs */
    --ombre-profonde: 0 4px 8px rgba(0,0,0,0.30),
                      0 28px 64px -18px rgba(0,0,0,0.50);
}

/* 3 — Focus : l'anneau unifie, au clavier et dans les champs. */
:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: 2px;
    border-radius: 8px;
}

#app input:focus,
#app select:focus,
#app textarea:focus {
    outline: none;
    border-color: rgba(255, 204, 0, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.25) !important;
}

/* 4 — La pression. Un CRM se clique des centaines de fois par
   jour : le retour doit etre bref (140ms) et subtil (0.97), jamais
   spectaculaire. Les elements desactives ne repondent pas — un
   retour tactile y promettrait une action qui n'arrivera pas. */
#app button:not(:disabled):active,
#app [role="button"]:not([aria-disabled="true"]):active {
    transform: scale(0.97);
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Le verre du panneau client et de la messagerie gagne la
   saturation qui fait la difference entre « flou » et « materiau »
   — les couleurs qui traversent restent vivantes. */
#client-panel,
#compose-fenetre {
    -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
    backdrop-filter: blur(14px) saturate(170%) !important;
}

/* La selection porte la marque, comme partout ailleurs. */
::selection { background: rgba(255, 204, 0, 0.32); color: #111; }

/* ── Replis ────────────────────────────────────────────────────── */

@media (prefers-reduced-transparency: reduce) {
    #client-panel  { background: #F8FAFC !important;
                     -webkit-backdrop-filter: none !important;
                     backdrop-filter: none !important; }
    #compose-fenetre { background: #FFFFFF !important;
                     -webkit-backdrop-filter: none !important;
                     backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    #app button:not(:disabled):active,
    #app [role="button"]:not([aria-disabled="true"]):active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APERÇU DU DOCUMENT — réglages « Entreprise & Légal »
   ───────────────────────────────────────────────────────────────────────────
   L'aperçu rend le PDF RÉEL dans un cadre. Ces styles vivent ici, hors du bloc
   Tailwind chargé depuis un CDN : l'écran de réglages doit rester lisible même
   si le CDN ne répond pas — c'est déjà le parti retenu pour les notifications.
   ═════════════════════════════════════════════════════════════════════════ */

.apercu-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.apercu-titre h3 {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: #1E293B;
    letter-spacing: -.01em;
}
.apercu-titre p {
    margin: .15rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: #5A6879;
}

/* Bascule Devis / Facture : un seul groupe, pas deux boutons indépendants —
   l'état sélectionné doit se lire d'un coup d'œil. */
.apercu-bascule {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: .65rem;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}
.apercu-bascule button {
    padding: .35rem .8rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #5A6879;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.apercu-bascule button:hover { color: #1E293B; }
.apercu-bascule button.actif {
    background: #FFFFFF;
    color: #111111;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 0 0 1px rgba(15, 23, 42, .04);
}
.apercu-bascule button:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: 1px;
}

/* Le cadre garde le rapport d'une page A4 : l'aperçu doit ressembler à une
   feuille, pas à une zone de contenu. */
.apercu-cadre {
    position: relative;
    aspect-ratio: 210 / 297;
    width: 100%;
    border-radius: .9rem;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 28px -18px rgba(15, 23, 42, .35);
}
.apercu-cadre iframe.apercu-pdf {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

/* Rendu en cours : un voile discret plutôt qu'un vide. Le document précédent
   reste visible dessous, ce qui évite le clignotement à chaque frappe. */
.apercu-cadre[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, .55);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.apercu-cadre[aria-busy="true"]::before {
    content: "Mise à jour…";
    position: absolute;
    z-index: 2;
    top: .6rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #111111;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.apercu-panne {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: #5A6879;
    font-size: .8125rem;
    line-height: 1.5;
}
.apercu-panne strong { color: #B42318; font-size: .875rem; }
.apercu-panne-note { color: #94A3B8; font-size: .75rem; }

.apercu-telecharger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    margin-top: .6rem;
    min-height: 44px;
    padding: .6rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: .7rem;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.apercu-telecharger svg { width: 15px; height: 15px; }
.apercu-telecharger:hover { background: #F8FAFC; border-color: #CBD5E1; color: #111; }
.apercu-telecharger:active { transform: translateY(1px); }
.apercu-telecharger:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; }

/* Sur téléphone, l'aperçu passe sous le formulaire : il n'a plus à coller au
   défilement, et une page A4 entière y serait illisible. */
@media (max-width: 1023px) {
    .apercu-cadre { aspect-ratio: 210 / 210; }
    .apercu-entete { flex-direction: column; gap: .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES DE RÉGLAGES — passe de cohérence
   ───────────────────────────────────────────────────────────────────────────
   Surface « Operate » : on lit et on saisit, on ne contemple pas. La
   scanabilité et la constance priment sur l'expression ; la marque vit dans la
   précision des détails, pas dans des ornements.
   ═════════════════════════════════════════════════════════════════════════ */

/* Gris secondaire : #5A6879 et non le slate-500 (#64748B) du reste de l'app.
   Sur les fonds gris clairs employes ici (#EEF2F7, #F1F5F9), slate-500 tombe a
   4,2:1 — sous le seuil AA de 4,5:1 pour du texte courant. #5A6879 tient
   5,1:1 sur ces memes fonds et 5,7:1 sur blanc. Verifie au calcul, pas a l'oeil. */

/* ── Rythme vertical ──────────────────────────────────────────────────────
   Plus d'espace AU-DESSUS d'un titre qu'en dessous : le titre appartient au
   bloc qu'il introduit, pas à celui qu'il termine. Les cartes de réglages
   l'ignoraient, d'où des sections qui se lisaient collées à la précédente. */
.crm-view[data-vue="modele-document"] h3,
.crm-view[data-vue="email-config"] h3,
.crm-view[data-vue="paiement"] h3 {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0F172A;
    margin: 0 0 .25rem;
}
/* La phrase d'intention sous un titre de section : elle explique le POURQUOI,
   le champ dit le QUOI. */
.crm-view[data-vue="modele-document"] h3 + p,
.crm-view[data-vue="email-config"] h3 + p,
.crm-view[data-vue="paiement"] h3 + p {
    margin: 0 0 1.1rem;
    font-size: .75rem;
    line-height: 1.5;
    color: #5A6879;
    max-width: 62ch;                 /* mesure de lecture, pas la largeur du bloc */
}

/* ── Champs ───────────────────────────────────────────────────────────────
   Les libellés étaient au même gris que les aides : deux rôles, une seule
   voix. Le libellé remonte, l'aide reste en retrait. */
.crm-view[data-vue] .lbl {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .005em;
    color: #475569;
}

/* Les données de référence — IBAN, BIC, SIRET, TVA, montants — en chiffres à
   chasse fixe. On les compare et on les recopie : l'alignement des colonnes
   est ce qui rend une erreur de saisie visible. */
.crm-view[data-vue="modele-document"] input[name="iban"],
.crm-view[data-vue="modele-document"] input[name="bic"],
.crm-view[data-vue="modele-document"] input[name="socSiret"],
.crm-view[data-vue="modele-document"] input[name="socTvaIntra"],
.crm-view[data-vue="modele-document"] input[name="socRcs"],
.crm-view[data-vue="modele-document"] input[name="socCapital"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: .01em;
}

/* Sélecteur de couleur : la pastille et son explication étaient alignées au
   petit bonheur. Une rangée, une hauteur, un alignement optique. */
.champ-couleur {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .35rem;
}
.champ-couleur input[type="color"] {
    inline-size: 44px;
    block-size: 36px;
    padding: 2px;
    border: 1px solid #E2E8F0;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.champ-couleur span {
    font-size: .75rem;
    color: #5A6879;
    line-height: 1.35;
}

/* ── Surfaces dessinées par le navigateur ─────────────────────────────────
   Anneau de focus, sélection de texte, curseur et ascenseurs arrivent avec les
   défauts du navigateur, qui n'appartiennent à aucune charte. Les teinter est
   le signal le moins cher qu'une interface a été construite, pas assemblée. */
.crm-view[data-vue] input:focus-visible,
.crm-view[data-vue] select:focus-visible,
.crm-view[data-vue] textarea:focus-visible,
.crm-view[data-vue] button:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: 2px;
    border-radius: .5rem;
}
.crm-view[data-vue] ::selection { background: rgba(255, 204, 0, .32); color: #111; }
.crm-view[data-vue] input, .crm-view[data-vue] textarea { caret-color: #111; }

/* Barre d'onglets des réglages : l'onglet actif portait une ombre portée
   colorée sans décalage — une décoration, pas une profondeur. Un aplat franc
   suffit à dire « ici ». */
.param-tab.actif { box-shadow: 0 1px 2px rgba(15, 23, 42, .18); }
.param-tab:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; }

/* ── Téléphone ────────────────────────────────────────────────────────────
   Les réglages se consultent aussi entre deux rendez-vous. Cibles à 44 px et
   champs à 16 px : sous 16 px, iOS zoome tout seul au focus et l'utilisateur
   perd la page. */
@media (max-width: 767px) {
    .crm-view[data-vue="modele-document"] .grid,
    .crm-view[data-vue="email-config"] .grid {
        grid-template-columns: 1fr !important;
    }
    .crm-view[data-vue] input,
    .crm-view[data-vue] select,
    .crm-view[data-vue] textarea {
        font-size: 16px !important;
        min-height: 44px;
    }
    .param-tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Suppression d'une ligne de devis.
   L'icône faisait 15 px dans un bouton sans dimensions, en slate-300 : une
   cible qu'on rate et qu'on distingue mal du fond. Elle passe à 18 px dans une
   zone de 40 px — le geste est destructif, il doit être atteignable du premier
   coup, mais rester discret tant qu'on ne le vise pas. */
.btn-suppr-ligne {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    /* #94A3B8 ne donnait que 2,56:1 sur blanc — sous le seuil de 3:1 exige des
       composants d'interface (WCAG 1.4.11). #7B8A9E tient 3,52:1 et reste
       discret. */
    color: #7B8A9E;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.btn-suppr-ligne svg { width: 18px; height: 18px; }
.btn-suppr-ligne:hover { background: rgba(214, 69, 69, .10); color: #D64545; }
.btn-suppr-ligne:active { transform: scale(.92); }
.btn-suppr-ligne:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; }

@media (max-width: 767px) {
    /* Au doigt, 40 px ne suffit pas pour une action destructive. */
    .btn-suppr-ligne { width: 44px; height: 44px; }
    .btn-suppr-ligne svg { width: 20px; height: 20px; }
}

/* ── Extension de garantie dans le récapitulatif d'articles ─────────────────
   Même intention que sur le PDF et sur la page publique motro.fr/devis : la
   ligne se REMARQUE sans se détacher de la lecture. Le corps de texte reste
   celui des autres articles ; seuls le fond, les filets et la pastille
   distinguent l'option souscrite.
   Teinte SÉMANTIQUE (rassurance) et non couleur de marque : elle reste juste
   quelle que soit l'entreprise qui exploite le CRM, comme le rouge d'une
   remise. Contraste #067647 sur #DCFAE6 = 5,1:1. */
.ligne-serenite td {
  background: #ECFAF1 !important;   /* doit l'emporter sur le zébrage des lignes */
  border-top: 1px solid #7FD8A6;
  border-bottom: 1px solid #7FD8A6;
}
.tag-serenite {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #DCFAE6;
  color: #067647;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}