/* CRM AXION — feuille de style unique, sans dépendance externe */
:root {
    --bleu: #1565c0;
    --bleu-fonce: #0d3c78;
    --bleu-clair: #e8f1fc;
    --texte: #1b1f24;
    --texte-2: #5b6470;
    --bord: #dde2e8;
    --fond: #f4f6f9;
    --carte: #ffffff;
    --vert: #1e7e34;
    --vert-clair: #e6f4ea;
    --orange: #b45309;
    --orange-clair: #fff4e0;
    --rouge: #b42318;
    --rouge-clair: #fdecea;
    --gris-clair: #eef0f3;
    --arrondi: 1;                 /* forme des coins : 0.35 nets, 1 doux, 1.8 arrondis */
    --pilule: 999px;
    --rayon: calc(8px * var(--arrondi));
    --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    /* Palette (apparence) : --bleu = couleur principale de la palette choisie */
    --sur-bleu: #ffffff;          /* texte posé sur la couleur principale */
    --sur-vert: #ffffff;
    --sur-rouge: #ffffff;
    --surface-2: #fafbfc;         /* en-têtes de tableaux, encadrés discrets */
    --survol: #f6f8fb;            /* ligne survolée */
    --champ-bord: #c9d0d9;        /* bordure des champs de saisie */
    --texte-3: #8a939e;           /* indications, textes désactivés */
    --surligne: #fff1a8;          /* mots trouvés par la recherche */
    --note: #fff6d6;              /* notes, secrets révélés */
    --violet: #3730a3;
    --violet-clair: #e0e7ff;
    --mauve: #6b21a8;
    --mauve-clair: #f3e8ff;
    --toast: #1b1f24;
    --ombre-forte: 0 18px 48px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
    /* En-tête (barre du haut et menu) */
    --entete: var(--carte);
    --entete-texte: var(--texte);
    --entete-texte-2: var(--texte-2);
    --entete-bord: var(--bord);
    --entete-separateur: var(--gris-clair);
    --entete-survol: var(--gris-clair);
    --entete-actif: var(--bleu-clair);
    --entete-actif-texte: var(--bleu-fonce);
    --entete-champ: var(--fond);
    --entete-bouton: var(--carte);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Téléphone et tablette : la page reste dans la largeur de l'écran. Rien ne dépasse sur les côtés (menus, halo d'Axia…),
   donc après un zoom on ne glisse plus vers une zone vide et on revient facilement à la taille d'origine.
   « clip » ne crée pas de zone de défilement : l'en-tête figé (sticky) continue de fonctionner. */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* Pas de zoom au double-toucher (il décalait la page) ; le zoom à deux doigts reste possible */
html { touch-action: manipulation; }
@media (max-width: 760px) {
    /* iPhone : un champ de moins de 16 px déclenche un zoom automatique qui décale la page */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
    img, video, canvas, iframe, svg { max-width: 100%; }
    pre, code { overflow-wrap: anywhere; }
}
body {
    margin: 0;
    font-family: var(--police, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
}
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--texte-2); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.pre { white-space: pre-line; }

/* --- En-tête et navigation --- */
.topbar {
    background: var(--entete);
    color: var(--entete-texte);
    border-bottom: 1px solid var(--entete-bord);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Rangée du haut : logo, phrase d'accueil, compte */
.topbar-haut { min-height: 76px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--entete-texte); letter-spacing: .02em; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 60px; width: auto; display: block; }
.brand picture { display: block; }
.brand small { font-weight: 400; color: var(--texte-2); }
.accueil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: var(--entete-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accueil > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.accueil strong { font-weight: 700; letter-spacing: .02em; }
.accueil-emoji { font-size: 1.5rem; line-height: 1; animation: coucou 1.6s ease-in-out 1; transform-origin: 70% 80%; display: inline-block; }
@keyframes coucou { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(14deg); } 30%, 60% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .accueil-emoji { animation: none; } }
/* Rangée du bas : menu */
.topbar-menu { min-height: 46px; border-top: 1px solid var(--entete-separateur); }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0; padding: 0 4px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav > :first-child { margin-left: auto; } /* centré, et défilable sans couper le début si trop étroit */
.nav > :last-child { margin-right: auto; }
.nav a {
    padding: 8px 12px;
    border-radius: calc(6px * var(--arrondi));
    color: var(--entete-texte-2);
    white-space: nowrap;
    font-weight: 500;
}
.nav a:hover { background: var(--entete-survol); text-decoration: none; color: var(--entete-texte); }
.nav a.actif { background: var(--entete-actif); color: var(--entete-actif-texte); }
.topbar .btn { background: var(--entete-bouton); color: var(--entete-texte); border-color: var(--entete-bord); }
.topbar .btn-icone.actif { background: var(--entete-actif); border-color: var(--bleu); color: var(--entete-actif-texte); }
.user-menu { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.user-menu form { margin: 0; }

.btn-icone { padding-left: 10px; padding-right: 10px; }
.btn-icone.actif { background: var(--bleu-clair); border-color: var(--bleu); }
@media (max-width: 1100px) {
    .nav a { padding: 8px 8px; font-size: .93rem; }
}
@media (max-width: 760px) {
    .topbar-haut { min-height: 60px; gap: 10px; }
    .brand img { height: 44px; }
    .accueil { font-size: .92rem; gap: 6px; }
    .accueil-emoji { font-size: 1.2rem; }
    .masque-etroit { display: none; }
    .nav { margin-left: -16px; padding: 0 12px; }
}
@media (max-width: 480px) {
    .accueil > span:last-child { display: none; } /* téléphone : l'emoji seul */
}

/* --- Recherche globale (en-tête, Ctrl+K) --- */
.accueil { flex: 0 1 auto; }
/* Ordinateur : la phrase d'accueil passe sur deux lignes plutôt que de couper le prénom */
@media (min-width: 1001px) {
    .accueil { flex: 1 1 0; min-width: 0; white-space: normal; } /* la phrase prend la place restante */
    .accueil > span:last-child { display: block; line-height: 1.25; max-height: 2.5em; overflow: hidden; text-overflow: clip; }
    .accueil strong { white-space: nowrap; }
    .topbar-haut .recherche-globale { flex: 0 1 clamp(200px, calc(100vw - 1110px), 332px); min-width: 200px; } /* se resserre sur les écrans moins larges */
}
/* Largeur de la phrase calculée (app.js) : elle épouse son texte, sur une ou deux lignes, et la recherche prend le reste, sans trou */
@media (min-width: 1100px) {
    .topbar-haut.accueil-mesure .accueil { flex: 0 0 auto; }
    .topbar-haut.accueil-mesure .accueil.accueil-1l { white-space: nowrap; }
    .topbar-haut.accueil-mesure .recherche-globale { flex: 1 1 var(--recherche-min, 320px); min-width: var(--recherche-min, 320px); max-width: 560px; }
}
@media (min-width: 1001px) and (max-width: 1099px) {
    .accueil > span:last-child { display: none; } /* trop étroit : l'emoji seul, comme sur tablette */
}
/* Phrase d'accueil sur une ligne (app.js) : la barre se resserre par étapes, la recherche reste toujours entière */
@media (min-width: 1001px) {
    .topbar-haut.rg-compacte .rg-raccourci { display: none; }
    .topbar-haut.rg-compacte .recherche-globale input[type="search"] { padding-right: 14px; }
    .topbar-haut.boutons-icones .masque-etroit { display: none; }
    .topbar-haut.accueil-petit .accueil { font-size: .92rem; }
}
@media (min-width: 1001px) and (max-width: 1439px) {
    .accueil > span:last-child { line-height: 1.18; max-height: 3.54em; } /* dernier recours : trois lignes plutôt que coupée */
}
@media (min-width: 1001px) and (max-width: 1279px) {
    .accueil { font-size: .92rem; }
    .accueil > span:last-child { line-height: 1.18; max-height: 3.54em; }
}
.user-menu { margin-left: auto; }
.recherche-globale { position: relative; flex: 1 1 340px; max-width: 560px; min-width: 220px; margin: 0; }
.recherche-globale input[type="search"] {
    width: 100%; height: 42px; padding: 0 64px 0 40px; border: 1px solid var(--bord); border-radius: var(--pilule);
    background: var(--entete-champ); font-size: .95rem; color: var(--entete-texte); transition: border-color .15s, box-shadow .15s, background .15s;
}
.recherche-globale input[type="search"]::placeholder { color: var(--entete-texte-2); opacity: .85; }
.recherche-globale input[type="search"]:hover { border-color: var(--champ-bord); }
.recherche-globale input[type="search"]:focus { outline: none; background: var(--carte); color: var(--texte); border-color: var(--bleu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bleu) 16%, transparent); }
.recherche-globale input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.rg-loupe { position: absolute; left: 14px; top: 12px; color: var(--entete-texte-2); pointer-events: none; transition: color .15s; }
.recherche-globale:focus-within .rg-loupe { color: var(--bleu); }
.rg-roue { position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; border: 2.2px solid var(--bleu-clair); border-top-color: var(--bleu); border-radius: 50%; display: none; animation: rg-tourne .7s linear infinite; }
.rg-charge .rg-roue { display: block; }
.rg-charge .rg-loupe { visibility: hidden; }
@keyframes rg-tourne { to { transform: rotate(360deg); } }
.rg-raccourci {
    position: absolute; right: 12px; top: 10px; font: 600 .72rem/1 system-ui, sans-serif; color: var(--texte-2);
    border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: calc(6px * var(--arrondi)); padding: 4px 6px; background: var(--carte); pointer-events: none;
}
.recherche-globale:focus-within .rg-raccourci { display: none; }

.rg-panneau {
    position: absolute; left: 0; top: calc(100% + 8px); width: max(100%, 640px); max-width: calc(100vw - 24px);
    max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain; background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
    border-radius: calc(14px * var(--arrondi)); box-shadow: var(--ombre-forte); z-index: 50;
    animation: rg-apparition .14s ease-out;
}
@keyframes rg-apparition { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rg-panneau { animation: none; } .rg-roue { animation-duration: 2s; } }
.rg-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--gris-clair); font-size: .8rem; position: sticky; top: 0; background: var(--carte); z-index: 1; }
.rg-compris { color: var(--texte-2); font-weight: 600; }
.rg-puce { background: var(--bleu-clair); color: var(--bleu-fonce); border-radius: var(--pilule); padding: 2px 9px; font-weight: 600; }
.rg-stats { margin-left: auto; color: var(--texte-2); }
.rg-groupe { padding: 6px 6px 4px; }
.rg-groupe + .rg-groupe { border-top: 1px solid var(--gris-clair); }
.rg-groupe-titre { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.rg-nb { background: var(--gris-clair); border-radius: var(--pilule); padding: 1px 8px; font-weight: 600; letter-spacing: 0; }
.rg-voir, .rg-effacer { font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--bleu); background: none; border: 0; cursor: pointer; padding: 0; }
.rg-item {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: calc(10px * var(--arrondi)); cursor: pointer; color: var(--texte);
    border-left: 3px solid transparent;
}
.rg-item.actif { background: var(--bleu-clair); border-left-color: var(--bleu); }
.rg-icone { flex: none; width: 34px; height: 34px; border-radius: calc(9px * var(--arrondi)); display: grid; place-items: center; background: var(--gris-clair); font-size: 1.05rem; }
.rg-item.actif .rg-icone { background: var(--carte); }
.rg-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rg-titre { font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-sous { font-size: .8rem; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-item mark, .rg-page mark { background: var(--surligne); color: inherit; border-radius: calc(3px * var(--arrondi)); padding: 0 1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--surligne) 70%, #c9a200) inset; }
.rg-droite { flex: none; display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.rg-meta { color: var(--texte); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rg-actions { display: none; gap: 4px; flex: none; }
.rg-item.actif .rg-actions, .rg-item:hover .rg-actions { display: flex; }
.rg-action { width: 30px; height: 30px; display: grid; place-items: center; border-radius: calc(8px * var(--arrondi)); background: var(--carte); border: 1px solid var(--bord); font-size: .9rem; }
.rg-action:hover { border-color: var(--bleu); text-decoration: none; transform: translateY(-1px); }
.rg-entree { flex: none; color: var(--bleu); font-weight: 700; opacity: 0; width: 14px; }
.rg-item.actif .rg-entree { opacity: 1; }
.rg-puces-choix { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 6px; }
.rg-choix { border: 1px solid var(--bord); background: var(--carte); border-radius: var(--pilule); padding: 4px 12px; font-size: .84rem; cursor: pointer; color: var(--texte); }
.rg-choix:hover { border-color: var(--bleu); color: var(--bleu-fonce); background: var(--bleu-clair); }
.rg-exemple::before { content: "→ "; color: var(--texte-2); }
.rg-astuce { margin: 2px 8px 6px; font-size: .78rem; color: var(--texte-2); }
.rg-vide { text-align: center; padding: 26px 24px; color: var(--texte-2); }
.rg-vide strong { color: var(--texte); display: block; margin-bottom: 4px; }
.rg-vide p { margin: 0; font-size: .85rem; }
.rg-vide-icone { font-size: 1.8rem; margin-bottom: 6px; }
.rg-pied { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--gris-clair); font-size: .76rem; color: var(--texte-2); background: var(--surface-2); position: sticky; bottom: 0; border-radius: 0 0 calc(14px * var(--arrondi)) calc(14px * var(--arrondi)); }
.rg-touches kbd, .rg-page kbd { font: 600 .7rem/1 system-ui, sans-serif; border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: calc(4px * var(--arrondi)); padding: 2px 5px; background: var(--carte); margin: 0 1px; }
.rg-tout { font-weight: 600; }
@media (max-width: 1000px) {
    .accueil > span:last-child { display: none; } /* la place va à la recherche */
}
@media (max-width: 760px) {
    .topbar-haut { flex-wrap: wrap; padding-bottom: 10px; }
    .recherche-globale { order: 3; flex: 1 1 100%; max-width: none; }
    .rg-panneau { width: 100%; max-width: none; max-height: 70vh; }
    .rg-raccourci, .rg-touches, .rg-meta, .rg-entree { display: none; }
    .rg-item { flex-wrap: wrap; row-gap: 6px; }
    .rg-item:hover .rg-actions { display: none; }
    .rg-item.actif .rg-actions { display: flex; flex-basis: 100%; padding-left: 46px; }
    .rg-action { width: 38px; height: 34px; }
    .rg-page .rg-actions { flex-basis: 100%; padding-left: 46px; }
}

/* Page complète des résultats */
.rg-page-grille { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.rg-sommaire { position: sticky; top: calc(var(--haut-colle, 123px) + 16px); display: flex; flex-direction: column; gap: 2px; }
.rg-sommaire a { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: calc(8px * var(--arrondi)); color: var(--texte); font-size: .9rem; }
.rg-sommaire a:hover { background: var(--carte); text-decoration: none; }
.rg-page-groupe { padding: 6px; margin-bottom: 16px; scroll-margin-top: 140px; }
.rg-page-groupe h2 { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; margin: 0; }
.rg-page-item { color: var(--texte); }
.rg-page-item:hover { text-decoration: none; }
.rg-page-ligne { cursor: default; }
.rg-page-ligne:hover { background: var(--bleu-clair); border-left-color: var(--bleu); }
.rg-page .rg-actions { display: flex; }
@media (max-width: 860px) { .rg-page-grille { grid-template-columns: 1fr; } .rg-sommaire { position: static; flex-direction: row; flex-wrap: wrap; } }


/* --- Droits d'accès (fiche utilisateur) --- */
.droits { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.droits-tete { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.droits-tete h2 { margin-bottom: 4px; }
.droits-tete p { margin: 0; max-width: 560px; }
.droits-modeles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.droits-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.droits-groupe { border: 1px solid var(--bord); border-radius: calc(10px * var(--arrondi)); padding: 8px 10px 10px; margin: 0; min-width: 0; }
.droits-groupe legend { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); padding: 0 6px; }
.droit { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: calc(8px * var(--arrondi)); cursor: pointer; font-weight: 400; }
.droit:hover { background: var(--fond); }
.droit input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.droit:has(input:checked) { background: var(--bleu-clair); }
.droit-icone { font-size: 1.1rem; line-height: 1.3; flex: none; }
.droit strong { display: block; font-weight: 600; }
.droit .small { display: block; line-height: 1.35; }
.droits-admin-note { display: none; }
.droits-perso[hidden] { display: none !important; }
.droits.est-admin .droits-admin-note { display: block; }
.droits.est-admin .droits-note-perso, .droits.est-admin.est-perso .droits-note-admin { display: none; }
.droits.est-admin.est-perso .droits-note-perso { display: block; }
.droits.est-admin .droits-tech-note, .droits.est-admin .droits-grille { display: none; }
@media (max-width: 760px) { .droits-grille { grid-template-columns: 1fr; } }

/* --- Mise en page --- */
.container { max-width: 1440px; /* même surface que la Messagerie et l'en-tête, sur toutes les pages */ margin: 0 auto; padding: 20px 16px 48px; }
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-head .sous-titre { color: var(--texte-2); margin-top: 2px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2; }
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .col-span-2 { grid-column: auto; }
}

.card {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 16px;
    min-width: 0;
}
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }

.stat .label { color: var(--texte-2); font-size: .85rem; }
.stat .valeur { font-size: 1.5rem; font-weight: 700; margin-top: 2px; }

dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.infos dt { color: var(--texte-2); }
dl.infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: calc(6px * var(--arrondi));
    border: 1px solid var(--bord);
    background: var(--carte);
    color: var(--texte);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}
.btn:hover { background: var(--gris-clair); text-decoration: none; }
.btn-primaire { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.btn-primaire:hover { background: var(--bleu-fonce); }
.btn-succes { background: var(--vert); border-color: var(--vert); color: var(--sur-vert); }
.btn-succes:hover { background: color-mix(in srgb, var(--vert) 85%, #000); }
.btn-danger { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 30%, var(--carte)); }
.btn-danger:hover { background: var(--rouge-clair); }
.btn-lien { border: 0; background: none; color: var(--bleu); padding: 0; }
.btn-lien:hover { background: none; text-decoration: underline; }
.btn-grand { padding: 12px 18px; font-size: 1rem; }
.btn-bloc { width: 100%; }

/* --- Formulaires --- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .plein { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.champ label, label.label { display: block; font-weight: 500; margin-bottom: 4px; }
.champ .aide { font-size: .82rem; color: var(--texte-2); margin-top: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=time], input[type=tel], input[type=search], input[type=url], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--champ-bord);
    border-radius: calc(6px * var(--arrondi));
    background: var(--carte);
    color: var(--texte);
    font: inherit;
    color: inherit;
    min-height: 38px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--bleu) 28%, transparent); border-color: var(--bleu); }
.case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.case input { width: 18px; height: 18px; }
.erreur-champ { color: var(--rouge); font-size: .85rem; margin-top: 3px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtres input[type=search] { flex: 1 1 220px; width: auto; }
.filtres select { width: auto; flex: 0 1 200px; }

/* --- Tableaux --- */
.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-2); font-weight: 600; background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.montant, th.montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--survol); }
.vide { text-align: center; color: var(--texte-2); padding: 28px 12px; }

/* Tableaux en cartes sur mobile */
@media (max-width: 640px) {
    table.responsive thead { display: none; }
    table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
    table.responsive tr { border-bottom: 1px solid var(--bord); padding: 8px 0; }
    table.responsive td { border: 0; padding: 2px 0; text-align: left; }
    table.responsive td.montant { text-align: left; }
    table.responsive td[data-label]::before { content: attr(data-label) " : "; color: var(--texte-2); font-size: .85rem; }
}

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pilule);
    font-size: .78rem;
    font-weight: 600;
    background: var(--gris-clair);
    color: var(--texte-2);
    white-space: nowrap;
}
.badge-bleu { background: var(--bleu-clair); color: var(--bleu-fonce); }
.badge-vert { background: var(--vert-clair); color: var(--vert); }
.badge-orange { background: var(--orange-clair); color: var(--orange); }
.badge-rouge { background: var(--rouge-clair); color: var(--rouge); }

/* --- Messages --- */
.alerte { padding: 10px 14px; border-radius: calc(6px * var(--arrondi)); margin-bottom: 16px; border: 1px solid; }
.alerte-succes { background: var(--vert-clair); border-color: color-mix(in srgb, var(--vert) 28%, var(--carte)); color: color-mix(in srgb, var(--vert) 75%, var(--texte)); }
.alerte-erreur { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 28%, var(--carte)); color: color-mix(in srgb, var(--rouge) 75%, var(--texte)); }
.alerte-info { background: var(--bleu-clair); border-color: color-mix(in srgb, var(--bleu) 25%, var(--carte)); color: var(--bleu-fonce); }
.alerte-attention { background: var(--orange-clair); border-color: color-mix(in srgb, var(--orange) 30%, var(--carte)); color: var(--orange); }
.creneau-alerte { margin: 0; font-weight: 600; }
.ag-formulaire .creneau-alerte { margin: 4px 0 10px; }
.alerte ul { margin: 4px 0 0; padding-left: 18px; }
.alerte-fermable { position: relative; padding-right: 38px; }
.stock-note { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: calc(8px * var(--arrondi));
    background: var(--orange-clair); border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--carte)); color: var(--texte); white-space: pre-line; }
.stock-note strong { color: var(--orange); white-space: nowrap; }
.stock-note span { flex: 1 1 260px; }
.stock-note-cellule { max-width: 260px; font-size: .86rem; color: var(--texte-2, var(--texte)); overflow-wrap: anywhere; }
.signe-champ { display: flex; align-items: stretch; gap: 4px; width: 100%; min-width: 0; }
.signe-champ > input { flex: 1 1 auto; min-width: 0; }
.signe-bascule { flex: none; min-width: 40px; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); background: var(--fond); color: var(--texte); font: inherit; font-weight: 700; cursor: pointer; }
.alerte-fermer { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent;
    color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: .55; }
.alerte-fermer:hover, .alerte-fermer:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.alerte-sortie { opacity: 0; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important;
    transition: height .35s ease, opacity .3s ease, margin .35s ease, padding .35s ease; }

/* --- Liste d'interventions (cartes) --- */
.liste-items { display: flex; flex-direction: column; }
.item { display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.item:last-child { border-bottom: 0; }
.item .titre { font-weight: 600; }

/* --- Éditeur de lignes --- */
.lignes-table td { padding: 6px 4px; vertical-align: middle; }
.lignes-table input, .lignes-table select { min-height: 34px; padding: 6px 8px; }
.lignes-table .col-designation { min-width: 260px; }
.lignes-table .col-qte { width: 90px; }
.lignes-table .col-unite { width: 100px; }
.lignes-table .col-prix { width: 120px; }
.lignes-table .col-tva { width: 90px; }
.lignes-table .col-remise { width: 80px; }
.lignes-table textarea.designation { min-height: 34px; resize: none; overflow: hidden; padding: 6px 8px; line-height: 1.4; }
.lignes-table .col-total { width: 110px; }
.lignes-table .col-suppr { width: 40px; text-align: center; }
.lignes-table .total-ligne { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.btn-suppr-ligne { border: 0; background: none; color: var(--rouge); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px 8px; }
.totaux { margin-left: auto; width: min(320px, 100%); margin-top: 12px; }
.totaux div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; }
.totaux .ttc { border-top: 2px solid var(--texte); font-weight: 700; font-size: 1.05rem; margin-top: 4px; padding-top: 6px; }
@media (max-width: 760px) {
    .lignes-table thead { display: none; }
    .lignes-table, .lignes-table tbody { display: block; }
    .lignes-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        padding: 10px 0;
        border-bottom: 1px solid var(--bord);
    }
    .lignes-table td { display: block; border: 0; padding: 0; width: auto !important; min-width: 0 !important; }
    .lignes-table td.col-designation { grid-column: 1 / -1; }
    .lignes-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--texte-2); }
}

/* --- Photos --- */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo { position: relative; border-radius: calc(6px * var(--arrondi)); overflow: hidden; border: 1px solid var(--bord); background: var(--gris-clair); }
.photo img { display: block; width: 100%; height: 130px; object-fit: cover; }
.photo .legende { font-size: .8rem; padding: 4px 6px; color: var(--texte-2); }
.photo form { position: absolute; top: 4px; right: 4px; margin: 0; }
.photo form button { background: rgba(255, 255, 255, .92); border: 0; border-radius: calc(4px * var(--arrondi)); color: var(--rouge); cursor: pointer; padding: 2px 7px; font-size: 1rem; }

/* --- Signature --- */
.signature-zone { border: 2px dashed #9aa6b5; border-radius: calc(8px * var(--arrondi)); background: #fff; touch-action: none; position: relative; }
.signature-zone canvas { display: block; width: 100%; height: 220px; cursor: crosshair; }
.signature-zone .indication { position: absolute; bottom: 8px; left: 12px; color: #6b7480; font-size: .85rem; pointer-events: none; }
.signature-image { max-width: 320px; width: 100%; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); background: #fff; }

/* --- Pagination --- */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 6px 11px; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); background: var(--carte); color: var(--texte); }
.pagination .courant { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.pagination .desactive { color: var(--texte-3); }

/* --- Connexion --- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.carte-connexion { width: 100%; max-width: 380px; }
.carte-connexion .brand { justify-content: center; margin-bottom: 20px; font-size: 1.3rem; }
.carte-connexion .brand img { height: 48px; background: var(--logo-fond, transparent); padding: var(--logo-marge, 0); border-radius: calc(8px * var(--arrondi)); box-sizing: content-box; }

details > summary { cursor: pointer; font-weight: 500; color: var(--bleu); }
details[open] > summary { margin-bottom: 12px; }

/* --- Import MEG --- */
.etapes { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.etape { padding: 4px 12px; border-radius: var(--pilule); background: var(--gris-clair); color: var(--texte-2); font-size: .85rem; font-weight: 500; }
.etape.active { background: var(--bleu); color: var(--sur-bleu); }
.etape.faite { background: var(--vert-clair); color: var(--vert); }
select.non-trouve { border-color: var(--rouge); background: var(--rouge-clair); }
.badge-meg { background: var(--mauve-clair); color: var(--mauve); }

/* --- Actions commerciales --- */
.btn-petit { padding: 4px 10px; font-size: .85rem; }
.rouge { color: var(--rouge); }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 16px; overflow-x: auto; }
.onglets a { padding: 9px 14px; color: var(--texte-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actif { color: var(--bleu-fonce); border-bottom-color: var(--bleu); }
.compteur { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--pilule); background: var(--rouge); color: var(--sur-rouge); font-size: .75rem; font-weight: 700; text-align: center; line-height: 20px; margin-left: 4px; }
.nav a .compteur { margin-left: 6px; }
.groupe-todo h2 { margin-bottom: 4px; }
.groupe-todo + .groupe-todo { margin-top: 16px; }
.todo, .suggestion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.suggestion { padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.card.suggestion + .card.suggestion { margin-top: 10px; }
.todo:last-child { border-bottom: 0; }
.todo-icone, .histo-icone { font-size: 1.3rem; line-height: 1.4; width: 28px; text-align: center; flex-shrink: 0; }
.todo-corps, .histo-corps { flex: 1; min-width: 0; }
.todo-titre { font-weight: 600; }
.todo-titre a { color: var(--texte); }
.todo-meta { font-size: .87rem; color: var(--texte-2); margin-top: 2px; overflow-wrap: anywhere; }
.todo-date { font-weight: 600; color: var(--texte); }
.todo-date.rouge { color: var(--rouge); }
.todo-desc { font-size: .87rem; margin-top: 4px; color: var(--texte-2); }
.todo-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.todo-actions form { margin: 0; }
.todo-haute { box-shadow: inset 3px 0 0 var(--rouge); padding-left: 10px; }
.todo-retard .todo-titre a { color: var(--rouge); }
.todo-terminer { margin-top: 8px; }
.todo-terminer > summary { list-style: none; display: inline-flex; }
.todo-terminer > summary::-webkit-details-marker { display: none; }
.todo-terminer[open] > summary { margin-bottom: 10px; }
.todo-terminer form { background: var(--surface-2); border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); padding: 12px; }
fieldset.suite { border: 1px dashed var(--champ-bord); border-radius: calc(6px * var(--arrondi)); padding: 8px 12px 12px; margin: 12px 0 0; }
fieldset.suite legend { padding: 0 6px; font-weight: 500; }
.choix-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.choix-types-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choix-types-grille .choix-type { display: flex; min-width: 0; }
.choix-type input { position: absolute; opacity: 0; pointer-events: none; }
.choix-type span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid var(--bord); border-radius: var(--pilule); cursor: pointer; font-size: .9rem; background: var(--carte); text-align: center; line-height: 1.25; transition: border-color .15s, background .15s; }
.choix-type span:hover { border-color: var(--bleu-clair, var(--bleu)); background: color-mix(in srgb, var(--bleu) 5%, var(--carte)); }
.choix-type input:checked + span:hover { background: var(--bleu); }
@media (max-width: 1100px) { .choix-types-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .choix-types-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choix-types-grille .choix-type span { font-size: .85rem; padding: 7px 8px; } }
.choix-type input:checked + span { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.choix-type input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--bleu) 45%, transparent); }
.histo { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.histo:last-child { border-bottom: 0; }
.histo-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.histo-tete a { color: var(--texte); }
.histo-cr { margin-top: 6px; padding: 8px 10px; background: var(--surface-2); border-left: 3px solid var(--bleu-clair); border-radius: calc(4px * var(--arrondi)); font-size: .92rem; }
@media (max-width: 640px) {
    .todo, .suggestion { flex-wrap: wrap; }
    .todo-actions { width: 100%; justify-content: flex-start; padding-left: 40px; }
}

/* Catalogue : valeurs calculées (TTC, marge) */
.valeur-calculee { padding: 8px 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.marge-negative { color: var(--rouge); }
.totaux .marge-doc { border-top: 1px dashed var(--bord); margin-top: 6px; padding-top: 6px; color: var(--texte-2); font-weight: 600; }
a.card.stat { color: inherit; text-decoration: none; transition: border-color .15s; }
a.card.stat:hover { border-color: var(--bleu); }
.stat .detail { font-size: .8rem; color: var(--texte-2); margin-top: 4px; }
.stat-marge { background: var(--vert-clair); }
/* Détail de la marge */
.marge-facture summary { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; cursor: pointer; list-style: none; }
.marge-facture summary::-webkit-details-marker { display: none; }
.marge-facture summary::before { content: '▸'; color: var(--texte-2); }
.marge-facture[open] summary::before { content: '▾'; }
.marge-facture .mf-num { min-width: 150px; }
.marge-facture .mf-client { flex: 1; min-width: 180px; color: var(--texte-2); }
.marge-facture .mf-val { font-variant-numeric: tabular-nums; min-width: 120px; text-align: right; }
.marge-facture summary { color: var(--texte); }
.badge-violet { background: var(--violet-clair); color: var(--violet); }
/* Pièces jointes */
.piece-jointe { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.piece-jointe .pj-icone { font-size: 1.4rem; }
.piece-jointe .pj-nom { flex: 1; min-width: 200px; word-break: break-word; }
.piece-jointe[hidden] { display: none; }
.pj-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.pj-filtre { border: 1px solid var(--bord); background: transparent; color: inherit; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.pj-filtre span { color: var(--texte-2); margin-left: 2px; }
.pj-filtre.actif { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.pj-filtre.actif span { color: rgba(255,255,255,.8); }
.pj-ajout { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
/* Tickets : journal de suivi */
.suivi-ticket { padding: 10px 0 10px 12px; border-left: 3px solid var(--bord); margin-bottom: 8px; }
.suivi-ticket.suivi-appel { border-left-color: var(--bleu); }
.suivi-ticket.suivi-email { border-left-color: var(--mauve); }
.suivi-ticket.suivi-statut { border-left-color: var(--vert); }
.suivi-ticket .pre { margin-top: 3px; }
/* En-tête : place pour tous les menus */
.topbar-inner { max-width: 1440px; }
.nav a { padding: 8px 10px; }
/* Zone de dépôt des pièces jointes (glisser-déposer, coller une capture) */
.zone-depot { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; text-align: center;
    padding: 18px; border: 2px dashed var(--bord); border-radius: var(--rayon); background: var(--fond); transition: background .15s, border-color .15s; }
.zone-depot.survol { border-color: var(--bleu); background: var(--bleu-clair); }
.zone-depot.envoi { opacity: .6; pointer-events: none; }

/* Lecture d'un e-mail joint */
.email-fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.email-fichier { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); background: var(--fond); max-width: 100%; overflow-wrap: anywhere; }
.email-fichier.inactif { color: var(--texte-2); }
.email-corps { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bord); line-height: 1.5; overflow-wrap: anywhere; }


/* E-mails de confirmation des interventions et rendez-vous */
.courriels-rdv { display: flex; flex-direction: column; gap: 8px; }
.courriel-rdv { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.courriel-rdv:last-child { border-bottom: 0; }
.courriel-rdv strong { min-width: 150px; }

/* Équipements */
.mono, code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
code { background: var(--fond); padding: 1px 5px; border-radius: calc(4px * var(--arrondi)); font-size: .9em; }
.ligne-equipement { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.ligne-equipement:last-child { border-bottom: 0; }
.ligne-equipement a { flex: 1; min-width: 180px; }
#resultats-equipements.chargement { opacity: .55; transition: opacity .15s; }
.saisie-parc input, .saisie-parc select { min-width: 0; width: 100%; }
.saisie-parc td { vertical-align: top; }
.saisie-parc td:first-child { width: 28px; padding-top: 12px; }
@media (min-width: 900px) { .saisie-parc input[name$="[numero_serie]"] { min-width: 150px; } }

/* Sauvegardes */
.actions-sauvegarde { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; }
.actions-sauvegarde form { display: inline; }
.restauration[open] { flex-basis: 100%; }
.restauration form { display: flex !important; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--rouge-clair); background: color-mix(in srgb, var(--rouge-clair) 40%, var(--carte)); border-radius: calc(6px * var(--arrondi)); text-align: left; }
.restauration summary { list-style: none; }
.restauration summary::-webkit-details-marker { display: none; }
.planif { display: grid; grid-template-columns: auto auto minmax(300px, 1fr); gap: 16px 28px; align-items: start; }
@media (max-width: 900px) { .planif { grid-template-columns: 1fr; } }
.jours-planif { display: flex; gap: 4px; flex-wrap: wrap; }
.jours-planif .jour input { position: absolute; opacity: 0; pointer-events: none; }
.jours-planif .jour span { display: inline-block; padding: 7px 10px; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); cursor: pointer; user-select: none; font-size: .9rem; }
.jours-planif .jour input:checked + span { background: var(--bleu-clair); border-color: var(--bleu); color: var(--bleu-fonce); font-weight: 600; }
.jours-planif .jour input:focus-visible + span { outline: 2px solid var(--bleu); }
.heures-planif { display: flex; gap: 6px; flex-wrap: wrap; }
.heures-planif input { width: 110px; }
/* Conservation des sauvegardes */
.conservation { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-clair); }
.conservation h3 { margin: 0 0 10px; }
.conserv-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; }
.conserv-carte { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon); }
.conserv-inactive { opacity: .7; }
.conserv-titre { font-weight: 700; }
.conserv-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 400; font-size: .92rem; margin: 0; }
.conserv-ligne input { width: 70px; padding: 5px 8px; text-align: center; font-weight: 600; }
.conserv-num { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; flex: none; }
.c1 { background: var(--bleu); } .c2 { background: color-mix(in srgb, var(--bleu) 65%, var(--carte)); } .c3 { background: color-mix(in srgb, var(--bleu) 38%, var(--carte)); }
.conserv-num.c3 { color: var(--bleu-fonce); }
.frise { display: flex; height: 22px; border-radius: calc(6px * var(--arrondi)); overflow: hidden; margin-top: 2px; }
.frise span { display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; min-width: 0; transition: flex-grow .3s ease; }
.frise span.c3 { color: var(--bleu-fonce); }
.conserv-resume { font-size: .85rem; color: var(--texte-2); }
.conserv-resume strong { color: var(--texte); }
@media (max-width: 900px) { .conserv-grille { grid-template-columns: 1fr; } }

/* Emplacement des sauvegardes et explorateur de dossiers */
.emplacement-actuel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.emplacement-chemin { font-size: .95rem; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); word-break: break-all; }
.emplacement-disque { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jauge { width: 140px; height: 8px; background: var(--gris-clair); border-radius: var(--pilule); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--bleu); }
.jauge i.plein { background: var(--rouge); }
.explorateur { margin-top: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon); }
.explorateur-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.explorateur-raccourcis button { font-size: .84rem; }
.explorateur-raccourcis .lecteur small { color: var(--texte-2); margin-left: 4px; font-weight: 400; }
.explorateur-barre { display: flex; gap: 6px; align-items: center; }
.explorateur-barre input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.explorateur-liste { margin: 8px 0; max-height: 280px; overflow-y: auto; background: var(--carte); border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); }
.explorateur-liste button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--gris-clair); background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.explorateur-liste button:hover, .explorateur-liste button:focus-visible { background: var(--bleu-clair); outline: none; }
.explorateur-liste p { margin: 0; padding: 12px; }
.explorateur-nouveau { display: flex; gap: 6px; }
.explorateur-nouveau input { flex: 1; }
.explorateur-pied { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 12px; }
.explorateur-pied .actions { margin-left: auto; }
code.copiable { display: inline-block; margin-top: 4px; user-select: all; white-space: normal; word-break: break-all; }

/* Coffre-fort */
.coffre-etat { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); }
.coffre-etat.ouvert { border-left: 4px solid var(--vert); }
.coffre-etat.ferme { border-left: 4px solid var(--orange); }
.coffre-etat .actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.coffre-etat .actions form { display: inline; }
.coffre-etat input[type=password] { min-width: 260px; }
.coffre-element { display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.coffre-element:last-of-type { border-bottom: 0; }
@media (max-width: 900px) { .coffre-element { grid-template-columns: 1fr; } }
.coffre-nom .badge { margin-left: 6px; }
.coffre-champs { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.coffre-champ { display: inline-flex; gap: 6px; align-items: center; }
.coffre-champ code.revele { background: var(--note); }
.coffre-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.coffre-actions form { display: inline; }
.coffre-notes { grid-column: 1 / -1; margin: 0; padding: 10px 12px; background: var(--note); border-radius: calc(6px * var(--arrondi)); white-space: pre-wrap; font-size: .9rem; }
.coffre-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--toast); color: #fff; padding: 10px 16px; border-radius: calc(8px * var(--arrondi)); font-size: .9rem; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.coffre-groupe { padding: 8px 0; border-bottom: 1px solid var(--bord); }
.coffre-groupe-titre { margin-bottom: 4px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce { display: inline-block; padding: 6px 10px; border: 1px solid var(--bord); border-radius: var(--pilule); font-size: .88rem; background: var(--carte); color: var(--texte); }
.puce:hover { border-color: var(--bleu); text-decoration: none; }
.puce.actif { background: var(--bleu-clair); border-color: var(--bleu); color: var(--bleu-fonce); }
.mdp-saisie { display: flex; gap: 6px; align-items: center; }
.mdp-saisie input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; }

/* Propositions commerciales */
.choix-solutions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.choix-solution { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-left: 4px solid var(--accent, var(--bleu)); border-radius: var(--rayon); background: var(--carte); cursor: pointer; font-weight: 400; }
.choix-solution:hover { background: var(--bleu-clair); }
.choix-solution input { width: 18px; height: 18px; flex: none; }
.choix-solution:has(input:checked) { background: var(--bleu-clair); border-color: var(--bleu); border-left-color: var(--accent, var(--bleu)); }
.choix-solution.detectee .small { color: var(--vert); }
.choix-logo { width: 84px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: calc(4px * var(--arrondi)); }
.choix-logo img { max-width: 84px; max-height: 44px; }
.choix-initiale { width: 34px; height: 34px; border-radius: 50%; background: var(--accent, var(--bleu)); color: var(--sur-bleu); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.choix-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.logo-solution { max-width: 170px; max-height: 64px; display: block; }
.logo-solution.grand { max-width: 260px; max-height: 90px; padding: 8px; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
tr.inactif td { opacity: .55; }
.proposition-prete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Tableau de bord commercial : graphiques sans bibliothèque */
.legende { font-size: .85rem; color: var(--texte-2); }
.graphe-mois { display: flex; align-items: flex-end; gap: 6px; height: 240px; padding-top: 18px; }
.graphe-col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.graphe-barres { flex: 1; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--bord); }
.barre { flex: 1; border-radius: calc(3px * var(--arrondi)) calc(3px * var(--arrondi)) 0 0; position: relative; min-height: 0; }
.barre-facture { background: var(--bleu-fonce); }
.barre-signe { background: color-mix(in srgb, var(--bleu) 50%, var(--carte)); }
.barre span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--texte-2); white-space: nowrap; margin-bottom: 2px; }
.graphe-label { text-align: center; font-size: .75rem; margin-top: 4px; line-height: 1.2; }
.barre-h { margin-bottom: 10px; }
.barre-h-titre { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; margin-bottom: 3px; }
.barre-h-fond { background: var(--gris-clair); border-radius: calc(4px * var(--arrondi)); height: 10px; overflow: hidden; }
.barre-h-fond div { height: 100%; border-radius: calc(4px * var(--arrondi)); }
@media (max-width: 700px) { .graphe-mois { gap: 2px; } .barre span { display: none; } }

/* Double authentification */
.titre-verification { font-size: 1.15rem; text-align: center; margin: 0 0 4px; }
.onglets-mfa { justify-content: center; margin-bottom: 14px; }
.saisie-code { font-size: 1.6rem; letter-spacing: 6px; text-align: center; font-family: Consolas, "Courier New", monospace; width: 100%; }
.lien-bouton { background: none; border: 0; color: var(--bleu); cursor: pointer; padding: 0; }
.lien-bouton:hover { text-decoration: underline; }
.qr-mfa { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#qr-mfa { width: 170px; height: 170px; background: #fff; padding: 4px; border: 1px solid var(--bord); border-radius: var(--rayon); }
#qr-mfa svg { width: 100%; height: 100%; }
.cle-mfa { display: block; font-size: 1rem; letter-spacing: 1px; margin-top: 4px; word-break: break-all; }
.etapes-mfa { margin: 0 0 10px; padding-left: 18px; }
.codes-secours { border: 2px solid var(--orange); background: var(--orange-clair); }
.grille-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.grille-codes code { font-size: 1.05rem; padding: 6px 10px; background: var(--carte); border-radius: calc(6px * var(--arrondi)); text-align: center; }
.ligne-appareil { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.ligne-journal { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--gris-clair); }
@media print { .topbar, .page-head, .card:not(.codes-secours), .actions { display: none !important; } }
.droits-resume { display: inline-flex; gap: 3px; flex-wrap: wrap; font-size: 1rem; }

/* --- Apparence : palettes de couleurs --- */
.palette-transition, .palette-transition *, .palette-transition *::before { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important; }
@media (prefers-reduced-motion: reduce) { .palette-transition, .palette-transition * { transition: none !important; } }
.palettes-famille { margin-bottom: 26px; }
.palettes-famille h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.palettes-explication { font-size: .85rem; font-weight: 400; color: var(--texte-2); }
.palettes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.palette {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; cursor: pointer;
    background: var(--carte); border: 1px solid var(--bord); border-radius: calc(14px * var(--arrondi)); box-shadow: var(--ombre);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.palette:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.palette input { position: absolute; opacity: 0; pointer-events: none; }
.palette:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--bleu) 45%, transparent); outline-offset: 2px; }
.palette.active { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu), var(--ombre-forte); }
.palette-infos { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px; }
.palette-infos strong { font-size: 1rem; }
.palette-coche { display: none; font-size: .75rem; font-weight: 700; color: var(--sur-bleu); background: var(--bleu); border-radius: var(--pilule); padding: 2px 9px; }
.palette.active .palette-coche { display: inline-block; animation: coche-pop .35s ease; }
@keyframes coche-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.palette-ambiance { font-size: .82rem; color: var(--texte-2); line-height: 1.4; padding: 0 2px; min-height: 2.3em; }
.nuancier { display: flex; gap: 0; padding: 0 2px; }
.nuancier i { width: 26px; height: 14px; border: 1px solid rgba(0, 0, 0, .08); }
.nuancier i:first-child { border-radius: calc(7px * var(--arrondi)) 0 0 calc(7px * var(--arrondi)); }
.nuancier i:last-child { border-radius: 0 calc(7px * var(--arrondi)) calc(7px * var(--arrondi)) 0; }

/* Miniature du CRM */
.maquette {
    display: flex; flex-direction: column; height: 150px; border-radius: calc(9px * var(--arrondi)); overflow: hidden; background: var(--fond);
    border: 1px solid var(--bord); font-size: 0; user-select: none;
}
.mq-entete { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; background: var(--entete); }
.mq-entete img { height: 20px; width: auto; }
.mq-logo { width: 22px; height: 14px; border-radius: calc(3px * var(--arrondi)); background: var(--bleu); }
.mq-salut { width: 46px; height: 5px; border-radius: calc(3px * var(--arrondi)); background: var(--entete-texte); opacity: .75; }
.mq-recherche { flex: 1; height: 12px; border-radius: var(--pilule); background: var(--entete-champ); border: 1px solid var(--bord); max-width: 90px; margin-left: 4px; }
.mq-boutons { display: flex; gap: 3px; margin-left: auto; }
.mq-boutons i { width: 12px; height: 12px; border-radius: calc(3px * var(--arrondi)); background: var(--entete-bouton, var(--carte)); border: 1px solid var(--entete-separateur); }
.mq-menu { display: flex; justify-content: center; gap: 5px; height: 17px; align-items: center; background: var(--entete); border-top: 1px solid var(--entete-separateur); border-bottom: 1px solid var(--bord); }
.mq-menu i { width: 22px; height: 5px; border-radius: calc(3px * var(--arrondi)); background: var(--entete-texte-2); opacity: .55; }
.mq-menu i.actif { width: 30px; height: 10px; background: var(--entete-actif); opacity: 1; box-shadow: inset 0 0 0 3px var(--entete-actif), inset 0 0 0 20px color-mix(in srgb, var(--entete-actif-texte) 25%, var(--entete-actif)); }
.mq-corps { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 8px 10px; }
.mq-titre { width: 70px; height: 7px; border-radius: calc(3px * var(--arrondi)); background: var(--texte); opacity: .85; }
.mq-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mq-carte { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--carte); border: 1px solid var(--bord); border-radius: calc(5px * var(--arrondi)); }
.mq-carte b { width: 60%; height: 4px; border-radius: calc(2px * var(--arrondi)); background: var(--texte-2); opacity: .7; }
.mq-carte em { width: 80%; height: 8px; border-radius: calc(3px * var(--arrondi)); background: var(--texte); }
.mq-carte:nth-child(2) em { background: var(--bleu); }
.mq-bas { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.mq-bouton { width: 46px; height: 13px; border-radius: calc(4px * var(--arrondi)); background: var(--bleu); }
.mq-badge { width: 24px; height: 9px; border-radius: var(--pilule); }
.mq-badge.v { background: var(--vert-clair); box-shadow: inset 0 0 0 2px var(--vert-clair), inset 0 0 0 20px color-mix(in srgb, var(--vert) 35%, var(--vert-clair)); }
.mq-badge.o { background: color-mix(in srgb, var(--orange) 40%, var(--orange-clair)); }
.mq-badge.r { background: color-mix(in srgb, var(--rouge) 40%, var(--rouge-clair)); }
/* Automatique : jour et nuit côte à côte, en diagonale */
.maquettes-duo { position: relative; display: block; height: 150px; }
.maquettes-duo > span { position: absolute; inset: 0; }
.duo-nuit { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.duo-nuit::after { content: ""; }
.toast-palette {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--toast); color: #fff;
    padding: 10px 18px; border-radius: var(--pilule); font-size: .92rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: toast-monte .3s ease;
}
@keyframes toast-monte { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- Densité d'affichage (menu « 🎨 Apparence ») --- */
html[data-densite="compact"] body { font-size: 14px; line-height: 1.42; }
html[data-densite="compact"] .container { padding: 14px 14px 36px; }
html[data-densite="compact"] .page-head { margin-bottom: 10px; }
html[data-densite="compact"] .grid { gap: 10px; }
html[data-densite="compact"] .card { padding: 11px 12px; }
html[data-densite="compact"] .card + .card { margin-top: 10px; }
html[data-densite="compact"] .card-head { margin-bottom: 8px; }
html[data-densite="compact"] th, html[data-densite="compact"] td { padding: 5px 8px; }
html[data-densite="compact"] .item { padding: 6px 0; }
html[data-densite="compact"] .btn { padding: 5px 11px; }
html[data-densite="compact"] input, html[data-densite="compact"] select, html[data-densite="compact"] textarea { padding: 5px 8px; }
html[data-densite="compact"] .form-grid { gap: 10px 14px; }
html[data-densite="compact"] .topbar-haut { min-height: 62px; }
html[data-densite="compact"] .brand img { height: 48px; }
html[data-densite="compact"] .topbar-menu { min-height: 40px; }
html[data-densite="compact"] .nav a { padding: 6px 10px; }
html[data-densite="compact"] .stat .valeur { font-size: 1.3rem; }

html[data-densite="aere"] body { font-size: 16px; line-height: 1.6; }
html[data-densite="aere"] .container { padding: 28px 20px 60px; }
html[data-densite="aere"] .page-head { margin-bottom: 22px; }
html[data-densite="aere"] .grid { gap: 22px; }
html[data-densite="aere"] .card { padding: 22px 24px; }
html[data-densite="aere"] .card + .card { margin-top: 22px; }
html[data-densite="aere"] .card-head { margin-bottom: 16px; }
html[data-densite="aere"] th, html[data-densite="aere"] td { padding: 13px 12px; }
html[data-densite="aere"] .item { padding: 14px 0; }
html[data-densite="aere"] .btn { padding: 10px 18px; }
html[data-densite="aere"] input, html[data-densite="aere"] select, html[data-densite="aere"] textarea { padding: 10px 12px; }
html[data-densite="aere"] .form-grid { gap: 18px 20px; }
html[data-densite="aere"] .nav a { padding: 9px 14px; }
html[data-densite="aere"] .stat .valeur { font-size: 1.65rem; }

/* Options de la page Apparence (police, densité, coins) : mêmes cartes que les palettes */
.option {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; cursor: pointer;
    background: var(--carte); border: 1px solid var(--bord); border-radius: calc(14px * var(--arrondi)); box-shadow: var(--ombre);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.option:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.option input, .radio-cache { position: absolute; opacity: 0; pointer-events: none; }
.option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--bleu) 45%, transparent); outline-offset: 2px; }
.option.active { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu), var(--ombre-forte); }
.option.active .palette-coche { display: inline-block; animation: coche-pop .35s ease; }
.options-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.options-3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ancre { position: relative; top: -140px; }
.apparence-onglets { position: sticky; top: calc(var(--haut-colle, 123px) + 1px); z-index: 5; background: var(--fond); margin: -6px 0 18px; }
.palettes-famille, .sur-mesure { scroll-margin-top: 190px; }
/* Police */
.op-aa { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--bleu); }
.op-exemple { font-size: .92rem; color: var(--texte); }
/* Densité : schéma */
.schema-densite { display: flex; flex-direction: column; justify-content: center; height: 86px; padding: 0 14px; background: var(--fond); border-radius: calc(8px * var(--arrondi)); border: 1px solid var(--bord); }
.schema-densite i { display: block; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--texte) 22%, var(--carte)); }
.schema-densite i:nth-child(odd) { width: 80%; } .schema-densite i:nth-child(even) { width: 60%; }
.schema-compact { gap: 4px; } .schema-compact i { height: 7px; }
.schema-standard { gap: 9px; }
.schema-aere { gap: 13px; } .schema-aere i { height: 9px; } .schema-aere i:nth-child(4) { display: none; }
/* Coins : schéma */
.schema-coins { display: flex; align-items: center; justify-content: center; gap: 14px; height: 86px; background: var(--fond); border-radius: calc(8px * var(--arrondi)); border: 1px solid var(--bord); }
.sc-carte { display: flex; flex-direction: column; gap: 8px; width: 96px; padding: 10px; background: var(--carte); border: 1px solid var(--bord); border-radius: calc(10px * var(--m)); box-shadow: var(--ombre); }
.sc-badge { width: 42px; height: 12px; border-radius: var(--p); background: var(--bleu-clair); }
.sc-ligne { width: 70px; height: 7px; border-radius: calc(3px * var(--m)); background: color-mix(in srgb, var(--texte) 22%, var(--carte)); }
.sc-bouton { width: 58px; height: 26px; border-radius: calc(7px * var(--m)); background: var(--bleu); }
/* Palette sur mesure */
.sur-mesure { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: center; margin-bottom: 26px; position: relative; }
.sur-mesure.active { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu), var(--ombre-forte); }
.sur-mesure.active h2 .palette-coche { display: inline-block; vertical-align: middle; margin-left: 6px; }
.sm-reglages { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sm-reglages h2 { margin: 0; }
.sm-reglages p { margin: 0; }
.sm-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sm-couleur { position: relative; width: 52px; height: 42px; border-radius: calc(8px * var(--arrondi)); overflow: hidden; border: 1px solid var(--champ-bord); cursor: pointer; flex: none; }
.sm-couleur input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: 0; padding: 0; cursor: pointer; }
input.sm-hex { width: 110px; font-family: ui-monospace, Consolas, monospace; text-transform: lowercase; }
.sm-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-couleur { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--carte); box-shadow: 0 0 0 1px var(--bord); cursor: pointer; padding: 0; transition: transform .15s; }
.pastille-couleur:hover { transform: scale(1.18); }
.pastille-couleur.choisie { box-shadow: 0 0 0 2px var(--texte); }
.sm-choix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-libelle { width: 70px; font-weight: 600; font-size: .9rem; }
.segment { display: inline-flex; padding: 3px; background: var(--gris-clair); border-radius: calc(9px * var(--arrondi)); gap: 2px; }
.segment label { position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: 6px 14px; border-radius: calc(7px * var(--arrondi)); font-size: .88rem; font-weight: 500; color: var(--texte-2); }
.segment input:checked + span { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); }
.segment input:focus-visible + span { outline: 2px solid var(--bleu); }
.sm-ajuste { color: var(--texte-2); }
.sm-reglages .btn-primaire { align-self: flex-start; }
.sm-apercu { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sm-apercu .maquette { width: 100%; height: 200px; box-shadow: var(--ombre-forte); }
.sm-apercu .maquette .mq-entete { height: 38px; }
.sm-apercu .maquette .mq-entete img { height: 26px; }
@media (max-width: 860px) { .sur-mesure { grid-template-columns: 1fr; } .apparence-onglets { top: 0; position: static; } }
html[data-densite] .grid > .card + .card { margin-top: 0; }

/* --- Paramètres --- */
.parametres { margin-bottom: 18px; }
.parametres-titre { font-size: 1.45rem; font-weight: 700; margin-bottom: 8px; }
.parametres-onglets { margin-bottom: 0; flex-wrap: wrap; overflow-x: visible; }
.parametres-onglets { gap: 0; }
.parametres-onglets a { padding: 9px 9px; }
.parametres + .page-head h1 { font-size: 1.15rem; }

/* --- Journal d'activité --- */
.journal-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.journal-filtres select, .journal-filtres input[type=search] { width: auto; min-width: 170px; }
.journal-filtres input[type=search] { flex: 1; min-width: 200px; }
.journal-dates { display: inline-flex; align-items: center; gap: 6px; }
.journal-dates input { width: 140px; }
.journal-synthese { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.journal-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.journal-categories .puce { text-decoration: none; }
.journal-categories .puce b { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--texte-2); font-weight: 600; }
.journal-categories .puce.actif { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.journal-categories .puce.actif b { color: inherit; }
.journal-categories .puce-alerte { border-color: color-mix(in srgb, var(--rouge) 45%, var(--carte)); color: var(--rouge); }
.journal-activite { margin: 0; padding: 8px 10px 6px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); min-width: 220px; }
.journal-activite figcaption { font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
.journal-axe { display: flex; justify-content: space-between; font-size: .7rem; color: var(--texte-2); margin-top: 2px; }
.journal-barres { display: flex; align-items: flex-end; gap: 3px; height: 40px; padding: 0; border-bottom: 1px solid var(--bord); }
.journal-barres span { display: block; flex: 1 1 0; min-width: 4px; max-width: 14px; height: var(--h); background: color-mix(in srgb, var(--bleu) 70%, var(--carte)); border-radius: calc(2px * var(--arrondi)); }
.journal-barres span.zero { background: var(--bord); height: 3px; }
.journal-barres span.aujourdhui { background: var(--bleu); }
.journal { padding: 4px 0; }
.journal-jour { position: sticky; top: calc(var(--haut-colle, 123px) - 1px); z-index: 1; padding: 8px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); background: var(--surface-2); border-bottom: 1px solid var(--bord); }
.journal-ligne { display: grid; grid-template-columns: 64px 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 16px; border-bottom: 1px solid var(--gris-clair); border-left: 3px solid transparent; }
.journal-ligne:hover { background: var(--survol); }
.journal-ligne.grave { border-left-color: var(--rouge); background: color-mix(in srgb, var(--rouge-clair) 45%, var(--carte)); }
.journal-heure { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--texte-2); padding-top: 4px; }
.journal-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--bleu-clair); color: var(--bleu-fonce); text-transform: uppercase; }
.cat-connexions .journal-avatar { background: var(--vert-clair); color: var(--vert); }
.cat-alertes .journal-avatar { background: var(--rouge-clair); color: var(--rouge); }
.cat-taches .journal-avatar, .cat-emails .journal-avatar { background: var(--violet-clair); color: var(--violet); }
.journal-texte { font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; padding-top: 3px; }
.journal-icone { margin-right: 4px; }
.journal-details { list-style: none; margin: 4px 0 2px; padding: 6px 10px; background: var(--surface-2); border-radius: calc(6px * var(--arrondi)); font-size: .84rem; }
.journal-details li + li { margin-top: 2px; }
.journal-details del { color: var(--rouge); text-decoration-thickness: 1px; }
.journal-details ins { color: var(--vert); text-decoration: none; font-weight: 600; }
.journal-meta { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--texte-3); padding-top: 4px; white-space: nowrap; }
.journal-meta a { text-decoration: none; }
.journal-pagination { margin-top: 14px; justify-content: center; }
@media (max-width: 760px) {
    .journal-ligne { grid-template-columns: 30px minmax(0, 1fr); }
    .journal-heure { grid-column: 1 / -1; padding: 0; }
    .journal-meta { grid-column: 2; }
    .journal-jour { top: 0; }
}

/* ===== Protection des connexions (anti force brute) ===== */
.blocage-connexion { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: calc(10px * var(--arrondi));
    background: var(--orange-clair); color: var(--texte); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.blocage-connexion strong { color: var(--orange); }
.blocage-connexion p { margin: 4px 0 0; font-size: .92rem; }
.blocage-connexion b[data-compte-a-rebours] { font-variant-numeric: tabular-nums; }
.blocage-connexion.fini { background: var(--vert-clair); border-color: color-mix(in srgb, var(--vert) 35%, transparent); }
.blocage-connexion.fini strong { color: var(--vert); }
.blocage-icone { font-size: 1.7rem; line-height: 1; }
.carte-connexion button[disabled] { opacity: .55; cursor: not-allowed; }
.valeur-ip { font-size: 1.15rem !important; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.actions-ligne { text-align: right; white-space: nowrap; }
.protection-reglages h3 { font-size: 1rem; margin: 0 0 10px; }
.protection-regle { padding: 14px 16px; border: 1px solid var(--bord); border-radius: calc(10px * var(--arrondi)); background: var(--surface-2); }
.protection-regle > * + * { margin-top: 10px; }
.protection-regle select { width: auto; padding: 5px 8px; }
.protection-paliers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .82rem; color: var(--texte-2); }
.protection-paliers .palier { padding: 2px 8px; border-radius: var(--pilule); background: var(--orange-clair); color: var(--orange); font-weight: 600; }
.protection-paliers .palier.verrou { background: var(--rouge-clair); color: var(--rouge); }
.protection-liste-blanche { margin-top: 16px; }
.protection-liste-blanche textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.protection-top { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.protection-top > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.protection-top form { margin: 0; }
.protection-bannir { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.protection-bannir input { flex: 1 1 160px; }
.protection-evenement { display: grid; grid-template-columns: 80px minmax(170px, auto) minmax(120px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--bord); }
.protection-evenement:last-child, .protection-top:last-of-type { border-bottom: 0; }
@media (max-width: 760px) {
    .protection-evenement { grid-template-columns: 70px minmax(0, 1fr); }
    .protection-evenement > :nth-child(n+3) { grid-column: 2; }
}

/* ===== Identité visuelle : logo principal et logo du client ===== */
.brand-separateur { width: 1px; align-self: stretch; margin: 10px 6px; background: var(--entete-texte); opacity: .28; }
.brand .brand-client img, .brand img.brand-client { height: 44px; max-width: 180px; object-fit: contain; }
.carte-connexion .brand { justify-content: center; }
.carte-connexion .brand-separateur { margin: 6px 4px; background: var(--texte); align-self: stretch; }
.carte-connexion .brand img.brand-client { height: 40px; background: var(--logo-fond, transparent); padding: var(--logo-marge, 0); border-radius: calc(8px * var(--arrondi)); box-sizing: content-box; }
.identite .grid { align-items: start; }
.identite-carte h3 { margin: 0; font-size: 1.02rem; }
.identite-role { margin: 0 0 12px; }
.identite-apercus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.identite-fond { margin: 0; border-radius: calc(10px * var(--arrondi)); padding: 14px 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--bord); }
.identite-fond img { height: 64px; max-width: 100%; object-fit: contain; }
.identite-fond figcaption { font-size: .75rem; opacity: .75; }
.identite-fond-clair { background: #ffffff; color: #475569; }
.identite-fond-fonce { background: #13294b; color: #e2e8f0; border-color: #13294b; }
.identite-depot { margin-top: 12px; }
.depot-zone { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--champ-bord); border-radius: calc(10px * var(--arrondi));
    background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; font-weight: 400; }
.depot-zone:hover, .depot-zone.survol { border-color: var(--bleu); background: var(--bleu-clair); }
.depot-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot-texte { flex: 1; font-size: .9rem; line-height: 1.45; }
.depot-apercu { height: 48px; max-width: 160px; object-fit: contain; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; padding: 4px; }
.identite-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.identite-plus { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 10px; }
.identite-plus summary { cursor: pointer; font-size: .9rem; color: var(--texte-2); }
.identite-plus form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.identite-plus .champ { flex: 1 1 100%; margin: 0; }
.identite-clair label { flex: 1 1 100%; }
.identite-clair input[type=file] { flex: 1; min-width: 0; font-size: .85rem; }
@media (max-width: 560px) { .identite-apercus { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .topbar .brand-separateur, .topbar .brand-client { display: none; } }
.identite-nom { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.identite-nom-champ { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.identite-nom-champ label { font-weight: 600; }
.onglet-apercu { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 360px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--bord);
    border-bottom: 0; border-radius: 10px 10px 0 0; font-size: .82rem; color: var(--texte-2); margin-bottom: 1px; }
.onglet-titre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onglet-titre b { color: var(--texte); font-weight: 600; }
.onglet-favicon { color: var(--bleu); }
.connexion-nom { text-align: center; margin: -6px 0 16px; font-size: .9rem; letter-spacing: .04em; color: var(--texte-2); font-weight: 600; }

/* ===== Paramètres → Entreprise ===== */
.entreprise-page { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.entreprise-groupe { border: 1px solid var(--bord); margin: 0 0 16px; padding: 16px 18px 6px; min-width: 0; }
.entreprise-groupe legend { font-weight: 700; padding: 0 6px; margin-left: -6px; font-size: 1rem; }
.entreprise-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.entreprise-champs .champ { margin-bottom: 10px; min-width: 0; }
.entreprise-champs .champ-large { grid-column: 1 / -1; }
.entreprise-champs label .badge { margin-left: 6px; font-size: .7rem; vertical-align: 1px; }
.champ-ligne { display: flex; gap: 8px; }
.champ-ligne input { flex: 1; min-width: 0; }
.champ-siret input, .champ-iban input, .champ-bic input, .champ-naf input, .champ-tva_intracom input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
input.invalide { border-color: var(--rouge); }
.obligatoire { color: var(--rouge); }
.controle { font-size: .8rem; margin-top: 3px; }
.controle.ok { color: var(--vert); }
.controle.ko { color: var(--rouge); }
.entreprise-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.entreprise-apercu { position: sticky; top: 16px; }
.apercu-titre { font-weight: 600; margin-bottom: 8px; }
.apercu-feuille { background: #fff; color: #1f2937; border-radius: 6px; box-shadow: var(--ombre-forte, 0 6px 24px rgba(0,0,0,.12)); padding: 22px 20px 14px; font-size: 9.5px; line-height: 1.45;
    aspect-ratio: 1 / 1.25; display: flex; flex-direction: column; border: 1px solid #e5e7eb; font-family: "DejaVu Sans", Arial, sans-serif; }
.apercu-entete { display: flex; justify-content: space-between; gap: 12px; }
.apercu-gauche { min-width: 0; overflow-wrap: anywhere; }
.apercu-logo { max-height: 42px; max-width: 150px; display: block; margin-bottom: 6px; }
.apercu-droite { text-align: right; flex: none; }
.apercu-doc { font-size: 15px; font-weight: 700; color: #1565c0; letter-spacing: .05em; }
.apercu-lignes { flex: 1; display: flex; flex-direction: column; gap: 7px; margin: 22px 0; }
.apercu-lignes i { display: block; height: 7px; border-radius: 3px; background: #eef1f5; }
.apercu-lignes i:first-child { background: #dbe7f7; height: 11px; }
.apercu-lignes i.court { width: 45%; align-self: flex-end; }
.apercu-pied { text-align: center; color: #6b7280; font-size: 7.5px; border-top: 1px solid #e5e7eb; padding-top: 6px; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .entreprise-page { grid-template-columns: minmax(0, 1fr); }
    .entreprise-apercu { position: static; max-width: 460px; }
}
@media (max-width: 600px) { .entreprise-champs { grid-template-columns: minmax(0, 1fr); } }

/* ===== Fiche client : annuaire officiel des entreprises ===== */
.annuaire { border: 1px solid color-mix(in srgb, var(--bleu) 35%, var(--bord)); background: linear-gradient(180deg, color-mix(in srgb, var(--bleu-clair) 55%, var(--carte)), var(--carte) 70%); }
.annuaire-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.annuaire-tete h2 { margin: 0; }
.annuaire-aide { margin: 6px 0 12px; }
.annuaire-champ { position: relative; }
.annuaire-champ input[type=search] { width: 100%; padding: 12px 14px 12px 42px; font-size: 1.02rem; border: 2px solid var(--bleu); border-radius: calc(10px * var(--arrondi)); background: var(--carte); }
.annuaire-champ input[type=search]:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bleu) 18%, transparent); }
.annuaire-loupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bleu); pointer-events: none; }
.annuaire-champ .rg-roue { left: 14px; top: 50%; margin-top: -9px; }
.annuaire-champ.rg-charge .annuaire-loupe { display: none; }
.annuaire-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto; background: var(--carte); border: 1px solid var(--bord);
    border-radius: calc(10px * var(--arrondi)); box-shadow: var(--ombre-forte, 0 10px 30px rgba(0,0,0,.15)); animation: rg-apparition .15s ease-out; }
.annuaire-option { padding: 10px 14px; border-bottom: 1px solid var(--bord); cursor: pointer; line-height: 1.5; }
.annuaire-option:last-child { border-bottom: 0; }
.annuaire-option:hover, .annuaire-option.actif { background: var(--survol, var(--bleu-clair)); }
.annuaire-option strong { text-transform: uppercase; letter-spacing: .01em; }
.annuaire-siret { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.annuaire-option .badge { font-size: .7rem; margin-left: 4px; }
.annuaire-vide { padding: 14px; color: var(--texte-2); }
.annuaire-fiche { margin-top: 12px; }
.annuaire-resultat { padding: 12px 14px; border-radius: calc(10px * var(--arrondi)); background: var(--vert-clair); border: 1px solid color-mix(in srgb, var(--vert) 30%, transparent); display: grid; gap: 6px; }
.annuaire-resultat.ferme { background: var(--orange-clair); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.annuaire-titre strong { text-transform: uppercase; }
.annuaire-alerte { color: var(--orange); font-weight: 500; font-size: .9rem; }
.annuaire-bilan { color: var(--texte-2); }
.annuaire-note { margin-top: 6px; font-size: .85rem; color: var(--vert); }
.rempli-auto { animation: rempli-auto 2.4s ease-out; border-color: var(--vert) !important; }
@keyframes rempli-auto { 0% { background: color-mix(in srgb, var(--vert) 28%, var(--carte)); } 100% { background: var(--carte); } }
@media (prefers-reduced-motion: reduce) { .rempli-auto { animation: none; } }

/* Articles : numérotation automatique des codes */
.code-ligne { display: flex; gap: 8px; }
.code-ligne input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.code-aide:empty { display: none; }
.code-racines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.code-racines .puce { cursor: pointer; font-size: .8rem; padding: 3px 9px; }
.code-racines .puce b { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }

/* Familles d'articles */
.majuscules { text-transform: uppercase; }
.familles-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.familles-ligne .champ { margin: 0; }
.familles-nouvelle h2 { margin-top: 0; }
.familles-table code { font-size: .9rem; }
.famille-edition > td { background: var(--surface-2); }
.famille-panneau { display: grid; gap: 12px; padding: 4px 0; }
.famille-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.famille-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 500; }
.famille-plein { grid-column: 1 / -1; }
.famille-suppression { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--bord); padding-top: 10px; }
.famille-suppression select { width: auto; margin-left: 6px; }
.majuscules::placeholder { text-transform: none; }
.famille-creation { margin-top: 8px; padding: 12px; border: 1px dashed var(--bleu); border-radius: var(--rayon); background: var(--surface-2); display: grid; gap: 10px; }
.famille-creation-champs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.famille-creation-champs label { display: grid; gap: 4px; font-size: .85rem; font-weight: 500; }
.famille-creation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.famille-creation-actions .erreur-champ { flex: 1; margin: 0; }
@media (max-width: 760px) {
    .familles-ligne, .famille-creation-champs, .famille-form { grid-template-columns: minmax(0, 1fr); }
}

/* Proposition commerciale : lignes modifiables */
.proposition-lignes > .card:first-child { margin-top: 16px; }
.proposition-enregistrer { margin-top: 12px; display: grid; gap: 6px; }
.proposition-enregistrer .case { align-items: flex-start; }
.proposition-enregistrer .case input { margin-top: 3px; flex: none; }
.proposition-modifie { margin: 0; color: var(--bleu); }
.choix-solution.pulse { animation: solution-pulse .9s ease-out; }
@keyframes solution-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bleu) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .choix-solution.pulse { animation: none; } }

/* Récapitulatif en tête des listes Devis et Factures */
.recap a.card.stat.actif { border-color: var(--bleu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bleu) 30%, transparent); }
.recap a.card.stat.actif .label::after { content: ' · filtre actif'; color: var(--bleu); font-weight: 600; }
.recap .stat-alerte { border-color: color-mix(in srgb, var(--rouge) 45%, var(--bord)); }
.recap-jauge { height: 5px; border-radius: 3px; background: var(--gris-clair); margin-top: 8px; overflow: hidden; }
.recap-jauge i { display: block; height: 100%; background: var(--vert); border-radius: 3px; }

/* ===== Assistance à distance (DWService) ===== */
.form-bouton { display: inline; margin: 0; }
.assistance-etapes { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.assistance-etapes li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pilule); background: var(--carte); border: 1px solid var(--bord); color: var(--texte-2); font-size: .9rem; }
.assistance-etapes li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gris-clair); font-weight: 700; font-size: .8rem; }
.assistance-etapes li.actif { border-color: var(--bleu); color: var(--texte); font-weight: 600; }
.assistance-etapes li.actif span { background: var(--bleu); color: var(--sur-bleu, #fff); }
.assistance-etapes li.fait { color: var(--vert); }
.assistance-etapes li.fait span { background: var(--vert); color: #fff; }
.assistance-grille { align-items: start; }
.assistance-grille h2 { margin-top: 0; }
.assistance-script { background: var(--surface-2); border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 14px; }
.assistance-script ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.assistance-envoi { display: grid; gap: 6px; }
.assistance-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.assistance-codes .champ { margin-bottom: 12px; }
.code-dw { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; letter-spacing: .08em; padding: 10px 12px; }
.assistance-chrono { float: right; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; color: var(--orange); font-weight: 600; }
.assistance-identifiants { display: grid; gap: 8px; margin: 6px 0 14px; }
.assistance-identifiants > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--rayon); }
.assistance-identifiants code { font-size: 1.2rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.assistance-direct { border-color: color-mix(in srgb, var(--orange) 45%, var(--bord)); }
.assistance-fin { display: grid; gap: 6px; margin: 10px 0 12px; }
.assistance-cr { padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon); margin-bottom: 10px; }
.assistance-nouvelle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.assistance-nouvelle select { flex: 1 1 260px; width: auto; }

/* ===== Devis : ventes et abonnements séparés ===== */
.partie-web .partie-entete td { background: color-mix(in srgb, var(--bleu) 10%, var(--carte)); color: var(--bleu-fonce); border-top: 2px solid var(--bleu); padding-top: 8px; padding-bottom: 8px; }
.partie-mois .partie-entete td, .partie-an .partie-entete td { background: color-mix(in srgb, var(--vert) 12%, var(--carte)); color: var(--vert); border-top-color: var(--vert); }
.partie-web .partie-total td { font-weight: 500; border-bottom: 0; }
.partie-web + .partie-web .partie-entete td { border-top-width: 2px; }
.montant-mixte { display: grid; gap: 2px; font-size: 1.15rem; }
.montant-mois, .montant-mois strong { color: var(--vert); }
/* Éditeur de lignes : abonnements repérés et sous-totaux */
.lignes-table tr.ligne-recurrente td { background: color-mix(in srgb, var(--vert) 7%, transparent); }
.lignes-table tr.ligne-recurrente .total-ligne::after { content: ' ' attr(data-recurrence); }
.lignes-table tr.ligne-recurrente td.col-total { color: var(--vert); }
.repartition-saisie { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 14px; padding: 12px; border: 1px dashed var(--vert); border-radius: var(--rayon); }
.repartition-saisie .rep-bloc { display: grid; gap: 2px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--rayon); min-width: 170px; }
.repartition-saisie .rep-bloc span { font-size: .82rem; color: var(--texte-2); }
.repartition-saisie .rep-bloc strong { font-size: 1.15rem; }
.repartition-saisie .rep-bloc small { color: var(--texte-2); font-size: .75rem; }
.repartition-saisie [hidden], .repartition-saisie[hidden] { display: none !important; }
.repartition-saisie .rep-mois strong { color: var(--vert); }
.rep-engagement { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.rep-engagement input { width: 80px; }
.repartition-saisie p { flex: 1 1 100%; margin: 0; }

/* ---------- Contrat : catalogue des solutions ---------- */
.catalogue-solutions { padding: 0; overflow: hidden; }
.catalogue-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none; }
.catalogue-entete::-webkit-details-marker { display: none; }
.catalogue-entete > span:first-child { display: grid; gap: 2px; }
.catalogue-entete::after { content: '▾'; color: var(--texte-2); transition: transform .2s; }
.catalogue-solutions:not([open]) .catalogue-entete::after { transform: rotate(-90deg); }
.catalogue-resume { margin-left: auto; color: var(--texte-2); }
.catalogue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0 18px 16px; }
.solution-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px 14px 12px;
    background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-top: 4px solid var(--c); border-radius: var(--rayon);
    cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; min-height: 150px; }
.solution-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.solution-carte:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent); outline-offset: 2px; }
.solution-carte[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), var(--ombre); background: color-mix(in srgb, var(--c) 7%, var(--carte)); }
.solution-logo { height: 40px; display: flex; align-items: center; }
.solution-logo img { max-height: 40px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 4px; }
.solution-initiale { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 1.2rem; }
.solution-titre { font-weight: 650; line-height: 1.25; }
.solution-accroche { font-size: .8rem; color: var(--texte-2); line-height: 1.35; flex: 1; }
.solution-pied { display: flex; gap: 6px; flex-wrap: wrap; }
.solution-badge { font-size: .72rem; padding: 2px 8px; border-radius: var(--pilule); background: color-mix(in srgb, var(--c) 14%, var(--carte)); color: var(--texte); white-space: nowrap; }
.solution-badge-vide { background: var(--gris-clair); color: var(--texte-2); }
.solution-badge-actifs { background: var(--vert-clair); color: var(--vert); }
.solution-coche { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: .8rem;
    display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s; }
.solution-carte[aria-checked="true"] .solution-coche { opacity: 1; transform: scale(1); }

.solution-panneau { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 20px; margin: 0 18px 18px; padding: 16px;
    border-radius: var(--rayon); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--bord)); border-left: 4px solid var(--c);
    background: color-mix(in srgb, var(--c) 5%, var(--carte)); }
.solution-panneau-nouveau { animation: panneau-entree .25s ease-out; }
.solution-panneaux { display: grid; gap: 0; }
.catalogue-vide { margin: 0 18px 16px; }
.solution-principale { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: var(--pilule); background: var(--c); color: #fff; vertical-align: middle; margin-left: 4px; }
.solution-perimetre summary { cursor: pointer; font-size: .85rem; color: var(--texte-2); margin-bottom: 6px; }
.solutions-choisies { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; align-items: center; }
.solution-puce { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--pilule); font-size: .85rem;
    border: 1px solid color-mix(in srgb, var(--c) 45%, var(--bord)); background: color-mix(in srgb, var(--c) 10%, var(--carte)); }
.solution-puce small { color: var(--texte-2); }
@keyframes panneau-entree { from { opacity: 0; transform: translateY(-4px); } }
.solution-panneau-titre { font-weight: 700; font-size: 1.05rem; color: var(--c); filter: saturate(1.1); }
.solution-tarif { font-size: .85rem; margin: 4px 0 8px; font-weight: 600; }
.solution-points { margin: 0 0 10px; padding-left: 18px; font-size: .85rem; color: var(--texte-2); }
.solution-points li { margin: 2px 0; }
.solution-articles-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.abonnement { display: grid; grid-template-columns: 1fr auto 64px auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--rayon);
    background: var(--carte); border: 1px solid var(--bord); margin-bottom: 6px; transition: border-color .15s, background .15s; }
.abonnement-nom { display: grid; gap: 1px; min-width: 0; }
.abonnement-nom strong { font-weight: 600; overflow-wrap: anywhere; }
.abonnement-prix { text-align: right; white-space: nowrap; }
.abonnement-annuel { display: block; }
.abonnement-qte { width: 64px; text-align: center; }
.abonnement-present { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 6%, var(--carte)); }
.abonnement-present .abonnement-ajouter { color: var(--vert); border-color: var(--vert); }
@keyframes ligne-flash { from { background: color-mix(in srgb, var(--vert) 22%, transparent); } }
.lignes-table tr.ligne-flash td { animation: ligne-flash 1.2s ease-out; }
@media (max-width: 760px) {
    .solution-panneau { grid-template-columns: 1fr; }
    .catalogue-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .abonnement { grid-template-columns: 1fr 64px auto; }
    .abonnement-prix { grid-column: 1 / -1; text-align: left; order: -1; }
    .abonnement-nom { order: -2; grid-column: 1 / -1; }
}

/* ---------- Éditeur de lignes : prix d'achat (interne) et marge ---------- */
.lignes-table .col-achat { width: 110px; }
.lignes-table .col-achat input { background: var(--note); border-style: dashed; }
.lignes-table .col-achat input.achat-perte { border-color: var(--rouge); background: var(--rouge-clair); color: var(--rouge); }
.totaux .marge-saisie { display: contents; }
.totaux .marge-saisie > div:first-child { color: var(--texte-2); }
.totaux .marge-alerte { justify-content: flex-end; color: var(--orange); }
.partie-engagement-web { font-weight: 600; font-size: .85rem; }
.recap-web { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; justify-content: flex-end; }
.recap-web-bloc { display: grid; gap: 2px; min-width: 180px; padding: 10px 14px; border-radius: var(--rayon); border: 1px solid var(--bord); border-top: 3px solid var(--bleu); background: var(--surface-2); }
.recap-web-bloc.mois { border-top-color: var(--vert); }

/* ---------- Export à la carte ---------- */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu[open] > summary { background: var(--bleu-clair); border-color: var(--bleu); }
.export-panneau { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: min(560px, calc(100vw - 32px)); max-height: min(75vh, 640px); overflow: auto;
    background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 16px; text-align: left; font-weight: normal; }
.export-section + .export-section { border-top: 1px solid var(--bord); margin-top: 12px; padding-top: 12px; }
.export-titre { font-weight: 650; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.export-raccourcis { font-weight: normal; }
.export-section > .case { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.export-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; }
.export-colonnes fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 3px; }
.export-colonnes legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); margin-bottom: 4px; font-weight: 600; }
.export-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.export-fermer { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--texte-2); cursor: pointer; padding: 4px 8px; }
.export-fermer:hover { color: var(--texte); }
.export-panneau .export-section:first-of-type .export-titre { padding-right: 28px; }
th.col-export, td.col-export { width: 34px; text-align: center; }
@media (max-width: 760px) {
    .export-panneau { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 78vh; }
    td.col-export { text-align: left; }
}
.export-panneau .case input { flex-shrink: 0; }

/* ---------- Bons de livraison ---------- */
.alerte-attention { background: var(--orange-clair); border-color: color-mix(in srgb, var(--orange) 30%, var(--carte)); color: color-mix(in srgb, var(--orange) 80%, var(--texte)); }
.livraison-aide { margin: 0 0 12px; }
.livraison-compteur { font-size: .85rem; padding: 3px 10px; border-radius: var(--pilule); background: var(--gris-clair); color: var(--texte-2); }
.livraison-compteur.complet { background: var(--vert-clair); color: var(--vert); }
.livraison-lignes { display: grid; gap: 10px; }
.bl-ligne { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; background: var(--carte); transition: opacity .15s, background .15s; }
.bl-ligne.bl-ignoree { opacity: .5; background: var(--surface-2); }
.bl-ligne.bl-ignoree .bl-series { display: none; }
.bl-ligne-tete { display: flex; gap: 12px; align-items: center; }
.bl-livrer input { width: 20px; height: 20px; }
.bl-designation { flex: 1; min-width: 0; }
.bl-designation textarea { width: 100%; resize: vertical; }
.bl-reliquat { color: var(--texte-2); margin-top: 2px; }
.bl-quantite { display: grid; grid-template-columns: auto; gap: 2px; text-align: right; }
.bl-quantite input { width: 96px; text-align: right; }
.bl-series:empty { display: none; }
.bl-series { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bord); }
.bl-series-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bl-outils { display: flex; gap: 6px; }
.bl-series-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
.bl-serie { display: flex; align-items: center; gap: 6px; }
.bl-serie span { min-width: 22px; text-align: right; font-size: .75rem; color: var(--texte-3); }
.bl-serie input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.bl-serie input:not(:placeholder-shown):valid { background: color-mix(in srgb, var(--vert) 5%, var(--carte)); }
.bl-serie input.serie-double { border-color: var(--rouge); background: var(--rouge-clair); }
.bl-serie input.serie-connue { border-color: var(--orange); background: var(--orange-clair); }
.bl-alertes { display: grid; gap: 2px; margin-top: 6px; }
.bl-alertes .alerte-double { color: var(--rouge); }
.bl-alertes .alerte-connue { color: var(--orange); }
.livraison-ajout { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.livraison-ajout select { flex: 1; min-width: 220px; }
.bl-signal { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--toast); color: #fff; padding: 10px 16px; border-radius: var(--pilule);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; font-size: .9rem; }
.bl-signal.visible { opacity: 1; transform: translate(-50%, 0); }
dialog.scanner, dialog.coller-series { border: 0; border-radius: var(--rayon); padding: 16px; width: min(520px, calc(100vw - 32px)); background: var(--carte); color: var(--texte); box-shadow: var(--ombre-forte); }
dialog.scanner::backdrop, dialog.coller-series::backdrop { background: rgba(10, 16, 24, .55); }
.scanner-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
dialog.scanner video { width: 100%; border-radius: var(--rayon); background: #000; max-height: 60vh; object-fit: cover; }
.scanner-cible { position: relative; margin: -40% auto 0; width: 70%; height: 30%; min-height: 80px; border: 3px solid rgba(255, 255, 255, .85); border-radius: 12px; pointer-events: none; transform: translateY(-50%); }
dialog.coller-series textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bl-cartes { margin-bottom: 0; }
.bl-jauge-chiffre { font-size: 1.1rem; margin: 6px 0; }
.bl-jauge-chiffre strong { font-size: 1.6rem; }
.bl-jauge { display: flex; height: 8px; border-radius: var(--pilule); background: var(--gris-clair); overflow: hidden; }
.bl-jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), color-mix(in srgb, var(--vert) 70%, var(--bleu))); transition: width .3s; }
.bl-jauge span.bl-jauge-prepare { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--orange) 55%, transparent) 0 6px, color-mix(in srgb, var(--orange) 30%, transparent) 6px 12px); }
.bl-avancement { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.bl-legende-prepare { color: var(--orange); }
.bl-jauge-fine { height: 5px; margin-top: 6px; max-width: 320px; }
.serie-puce { display: inline-block; font-size: .8rem; padding: 1px 7px; margin: 2px 4px 2px 0; border-radius: 6px; background: var(--gris-clair); border: 1px solid var(--bord); }
.serie-puce-alerte { background: var(--orange-clair); border-color: var(--orange); }
.bl-parc { margin: 0 0 6px; padding-left: 18px; columns: 2 280px; }
.bl-parc li { margin: 3px 0; break-inside: avoid; }
.bl-sans-signature { margin-top: 10px; text-align: right; }
.bl-devis-liste { display: grid; gap: 8px; }
.bl-devis { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.bl-devis-infos { min-width: 0; flex: 1; }
.bl-liste { margin: 10px 0 0; padding-left: 18px; }
.bl-liste li { margin: 4px 0; }
.bl-devis-suivi .bl-jauge { margin-top: 4px; }
@media (max-width: 760px) {
    .bl-ligne-tete { flex-wrap: wrap; }
    .bl-quantite { text-align: left; }
    .bl-series-grille { grid-template-columns: 1fr; }
    .bl-devis { flex-direction: column; align-items: stretch; }
}

/* ---------- Signature électronique : suivi sur la fiche devis / contrat ---------- */
.signature-suivi .sig-demande { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.signature-suivi .sig-demande:last-child { border-bottom: 0; padding-bottom: 0; }
.signature-suivi .sig-annulee, .signature-suivi .sig-expiree { opacity: .65; }
.signature-suivi .sig-entete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.signature-suivi .sig-etapes { margin-top: 4px; }
.signature-suivi .sig-ok { color: var(--vert); }
.signature-suivi .sig-lien { margin-top: 6px; }
.signature-suivi .sig-lien input { width: 100%; font-size: .8rem; color: var(--texte-2); background: var(--gris-clair); }
.signature-suivi .sig-actions { margin-top: 8px; flex-wrap: wrap; }

/* ---------- Signature électronique : page publique du signataire ---------- */
body.sig-public { background: var(--fond); }
.sig-barre { background: var(--carte); border-bottom: 1px solid var(--bord); }
.sig-barre-in { max-width: 860px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sig-logo { height: 52px; width: auto; }
.sig-barre-titre { font-weight: 600; color: var(--bleu); white-space: nowrap; }
.sig-page { max-width: 860px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sig-page h1 { font-size: 1.35rem; margin: 2px 0; }
.sig-resume-titre { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sig-resume .label-doc { color: var(--texte-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.sig-montant { text-align: right; }
.sig-montant strong { display: block; font-size: 1.4rem; color: var(--bleu-fonce); }
.sig-montant span { color: var(--texte-2); font-size: .85rem; }
.sig-resume-infos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord); color: var(--texte-2); }
.sig-etape-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.02rem; margin: 4px 0 10px; }
.sig-formulaire .sig-etape-titre:not(:first-of-type) { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); }
.sig-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); color: var(--sur-bleu); font-size: .85rem; flex: none; }
.sig-pdf { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--gris-clair); margin-bottom: 10px; }
.sig-code { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sig-code-saisie { max-width: 200px; font-size: 1.25rem !important; letter-spacing: 4px; text-align: center; }
.sig-info { margin-top: 8px; color: var(--vert); font-size: .9rem; }
.sig-accepte { align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.sig-accepte input { margin-top: 3px; }
.sig-zone canvas { height: 200px; }
.sig-boutons { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sig-valider { font-size: 1.05rem; padding-left: 22px; padding-right: 22px; }
.sig-legal { margin: 14px 0 0; line-height: 1.45; }
.sig-contact { text-align: center; margin: 4px 0 20px; }
.sig-etat { text-align: center; padding: 28px 20px; }
.sig-etat-icone { font-size: 2.6rem; }
.sig-etat p { max-width: 560px; margin: 8px auto; }
.sig-etat .btn { margin-top: 10px; }
.sig-etat-ok h1 { color: var(--vert); }
@media (max-width: 640px) {
    .sig-pdf { display: none; }
    .sig-lecture .btn { width: 100%; justify-content: center; }
    .sig-barre-titre { font-size: .85rem; }
    .sig-logo { height: 34px; }
    .sig-valider, .sig-code .btn { width: 100%; justify-content: center; }
    .sig-code-saisie { max-width: none; width: 100%; }
    .sig-montant { text-align: left; }
}

/* ---------- Paramètres › Numérotation et Remise à zéro ---------- */
.chrono-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chrono-prefixe { font-family: ui-monospace, Consolas, monospace; color: var(--texte-2); }
.chrono-saisie { width: 96px !important; font-family: ui-monospace, Consolas, monospace; }
.chrono-trou { color: var(--orange); margin-top: 3px; }
.raz-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.raz-carte { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; box-shadow: var(--ombre); }
.raz-carte input { margin-top: 3px; flex: none; }
.raz-carte:hover { border-color: var(--rouge); }
.raz-carte.raz-coche { border-color: var(--rouge); background: var(--rouge-clair); }
.raz-carte.raz-inclus { opacity: .85; }
.raz-icone { font-size: 1.3rem; line-height: 1; }
.raz-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.raz-alerte { color: var(--orange); }
.raz-entraine-par { color: var(--rouge); font-weight: 600; }
.raz-nombre { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.raz-coche .raz-nombre { color: var(--rouge); }
.puce.actif { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }

/* ---------- Aperçu au survol ---------- */
[data-apercu*="/apercu/"] { cursor: zoom-in; }
.apercu-bulle { position: fixed; z-index: 1000; top: 0; left: 0; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: 0 18px 50px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .12); padding: 8px; max-width: calc(100vw - 20px);
    opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.apercu-bulle.visible { opacity: 1; transform: none; pointer-events: auto; }
.apercu-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 6px; font-size: .82rem; }
.apercu-titre { font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.apercu-nav[hidden] { display: none; }
.apercu-nav { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-2); white-space: nowrap; }
.apercu-corps { border-radius: calc(var(--rayon) - 3px); overflow: auto; background: var(--gris-clair); max-width: calc(100vw - 38px); max-height: calc(100vh - 72px); overscroll-behavior: contain; }
.apercu-agrandi .apercu-corps { cursor: zoom-out; }
.apercu-pdf, .apercu-image { cursor: zoom-in; }
.apercu-outils { display: inline-flex; align-items: center; gap: 10px; }
.apercu-zoom { display: inline-flex; align-items: center; gap: 2px; }
.apercu-zoom button, .apercu-nav button { border: 1px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 6px; min-width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 1rem; padding: 0 4px; }
.apercu-zoom button:hover, .apercu-nav button:hover { border-color: var(--bleu); color: var(--bleu); }
.apercu-zoom .apercu-zoom-val { font-size: .74rem; min-width: 46px; color: var(--texte-2); }
.apercu-pdf canvas { display: block; background: #fff; }
.apercu-image img { display: block; }
.apercu-attente, .apercu-message { width: 300px; padding: 40px 16px; text-align: center; color: var(--texte-2); font-size: .9rem; }
.apercu-roue { display: block; width: 26px; height: 26px; margin: 0 auto 10px; border: 3px solid var(--bord); border-top-color: var(--bleu); border-radius: 50%; animation: apercu-tourne .8s linear infinite; }
@keyframes apercu-tourne { to { transform: rotate(360deg); } }
.apercu-vide { width: 320px; padding: 34px 16px; text-align: center; color: var(--texte-2); background: var(--carte); }

/* Diapositives PowerPoint redessinées */
.apercu-diapos { width: min(560px, calc(100vw - 40px)); background: #fff; }
.pptx-diapo { position: relative; width: 100%; overflow: hidden; container-type: inline-size; font-family: Calibri, "Segoe UI", Arial, sans-serif; color: #1b1f24; }
.pptx-forme, .pptx-image, .pptx-trait, .pptx-tableau { position: absolute; box-sizing: border-box; }
.pptx-image { object-fit: contain; }
.pptx-trait { overflow: visible; }
.pptx-texte { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.pptx-texte p, .pptx-tableau p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pptx-puce { display: inline-block; min-width: 1.2em; }
.pptx-tableau { border-collapse: collapse; table-layout: fixed; }
.pptx-tableau td { padding: 0 .55cqw; vertical-align: middle; overflow: hidden; }

/* Fiche équipement */
.apercu-fiche { background: var(--carte); }
.apercu-equipement { width: 340px; padding: 12px 14px; font-size: .86rem; }
.apeq-entete { display: flex; gap: 10px; align-items: center; }
.apeq-icone { font-size: 1.9rem; line-height: 1; }
.apeq-nom { font-weight: 700; font-size: 1rem; }
.apeq-type { color: var(--texte-2); font-size: .8rem; }
.apeq-statut-en_service { color: var(--vert); }
.apeq-statut-sav { color: var(--orange); }
.apeq-statut-retire { color: var(--rouge); }
.apeq-serie { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; background: var(--gris-clair); border-radius: 6px; }
.apeq-serie span { color: var(--texte-2); font-size: .78rem; }
.apeq-serie code { font-size: .92rem; font-weight: 600; background: none; }
.apeq-infos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.apeq-infos dt { color: var(--texte-2); }
.apeq-infos dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.apeq-garantie { margin-top: 12px; padding: 9px 10px; border-radius: 6px; border-left: 4px solid var(--bord); background: var(--gris-clair); }
.apeq-garantie-sous_garantie { border-left-color: var(--vert); background: var(--vert-clair); }
.apeq-garantie-bientot { border-left-color: var(--orange); background: var(--orange-clair); }
.apeq-garantie-expiree { border-left-color: var(--rouge); background: var(--rouge-clair); }
.apeq-garantie-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2); }
.apeq-garantie-texte { font-weight: 600; }
.apeq-barre { margin-top: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.apeq-barre span { display: block; height: 100%; background: currentColor; }
.apeq-garantie-sous_garantie .apeq-barre span { background: var(--vert); }
.apeq-garantie-bientot .apeq-barre span { background: var(--orange); }
.apeq-garantie-expiree .apeq-barre span { background: var(--rouge); }
.apeq-barre-legende { display: flex; justify-content: space-between; font-size: .72rem; color: var(--texte-2); margin-top: 2px; }
.apeq-notes { margin-top: 10px; font-size: .8rem; color: var(--texte-2); white-space: pre-line; }

/* Fiches d'aperçu : ticket, client, article */
.apercu-carte { width: 360px; padding: 12px 14px; font-size: .86rem; background: var(--carte); }
.apc-entete { display: flex; gap: 10px; align-items: center; }
.apc-icone { font-size: 1.8rem; line-height: 1; }
.apc-nom { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.apc-sous { color: var(--texte-2); font-size: .8rem; }
.apc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.apc-bloc { margin-top: 10px; padding: 8px 10px; background: var(--gris-clair); border-radius: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.apc-bloc-ok { background: var(--vert-clair); }
.apc-bloc-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2); margin-bottom: 2px; white-space: normal; }
.apc-suivi { margin-top: 6px; font-size: .8rem; border-left: 2px solid var(--bord); padding-left: 8px; }
.apc-chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.apc-chiffres div { background: var(--gris-clair); border-radius: 6px; padding: 7px 9px; }
.apc-chiffres strong { display: block; font-size: 1.05rem; }
.apc-chiffres span { color: var(--texte-2); font-size: .74rem; }

.apc-texte { font-family: ui-monospace, Consolas, monospace; font-size: .74rem; max-height: 320px; overflow: auto; }

/* ---------- 🎨 Apparence › Aperçu au survol ---------- */
.options-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ar h3 { font-size: .95rem; margin: 18px 0 8px; color: var(--texte); }
.ar-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ar-interrupteur { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.ar-interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ar-glissiere { position: relative; width: 52px; height: 30px; flex: none; border-radius: 999px; background: var(--bord); transition: background .2s; }
.ar-glissiere::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.ar-interrupteur input:checked + .ar-glissiere { background: var(--vert); }
.ar-interrupteur input:checked + .ar-glissiere::after { transform: translateX(22px); }
.ar-interrupteur input:focus-visible + .ar-glissiere { outline: 3px solid color-mix(in srgb, var(--bleu) 40%, transparent); outline-offset: 2px; }
.ar-libelle { display: flex; flex-direction: column; }
.ar-libelle strong { font-size: 1.02rem; }
.ar-etat { font-size: .82rem; color: var(--texte-2); }
.ar-essai { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 2px dashed var(--bleu); border-radius: var(--rayon); color: var(--bleu); font-weight: 600; background: var(--bleu-clair); }
.ar-details { transition: opacity .2s; }
.ar-off .ar-details { opacity: .5; }
.ar-chrono { display: block; height: 8px; margin: 4px 0 10px; border-radius: 4px; background: var(--gris-clair); overflow: hidden; }
.ar-chrono span { display: block; height: 100%; width: 0; background: var(--bleu); border-radius: 4px; }
.option:hover .ar-chrono span, .option.active .ar-chrono span { animation: ar-remplir var(--d) linear forwards; }
@keyframes ar-remplir { to { width: 100%; } }
.ar-feuille { display: flex; align-items: center; justify-content: center; height: 70px; margin-bottom: 6px; background: var(--gris-clair); border-radius: 6px; overflow: hidden; }
.ar-feuille span { display: flex; flex-direction: column; gap: 4px; width: calc(22px * var(--z)); padding: calc(4px * var(--z)); height: calc(30px * var(--z)); background: #fff; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.ar-feuille i { display: block; height: calc(3px * var(--z)); background: var(--bleu); border-radius: 2px; opacity: .55; }
.ar-feuille i:nth-child(2) { width: 70%; } .ar-feuille i:nth-child(3) { width: 85%; } .ar-feuille i:nth-child(4) { width: 50%; }
.ar-groupe-icone { font-size: 1.6rem; display: block; margin-bottom: 4px; }
.ar-groupe input[type=checkbox] { position: absolute; opacity: 0; }
.ar-astuces { margin-top: 12px; line-height: 1.7; }

/* Bouton ⏸ de la bulle et message de désactivation */
.apercu-pause { border: 1px solid var(--bord); background: var(--carte); color: var(--texte-2); border-radius: 6px; min-width: 26px; height: 24px; cursor: pointer; font-size: .8rem; }
.apercu-pause:hover { border-color: var(--rouge); color: var(--rouge); }
.apercu-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1001; background: #1b1f24; color: #fff; padding: 10px 16px;
    border-radius: 999px; font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: ar-entree .25s ease; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.apercu-toast span { color: #9cc3ff; font-weight: 600; }
.apercu-toast a { color: #7ee2a8; font-weight: 600; margin-left: 4px; }
.apercu-toast.sortie { opacity: 0; transition: opacity .5s; }
@keyframes ar-entree { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Tableau de bord personnalisable ---------- */
.tb-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tb-periodes { display: inline-flex; align-items: center; gap: 4px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--pilule); padding: 3px 4px 3px 12px; }
.tb-periode { border: 0; background: transparent; color: var(--texte-2); padding: 5px 12px; border-radius: var(--pilule); font: inherit; font-size: .86rem; cursor: pointer; }
.tb-periode:hover { color: var(--texte); }
.tb-periode.actif { background: var(--bleu); color: var(--sur-bleu); font-weight: 600; }
.tb-personnaliser { margin-left: auto; }
.tb-edition-barre { display: none; }
.tb-edition .tb-personnaliser, .tb-edition .tb-periodes { display: none; }
.tb-edition .tb-edition-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--bleu-clair);
    border: 1px dashed var(--bleu); border-radius: var(--rayon); position: sticky; top: 8px; z-index: 50; box-shadow: var(--ombre); }
.tb-edition-titre { font-weight: 700; color: var(--bleu-fonce); }
.tb-aide { flex: 1; min-width: 200px; }

.tb-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tb-widget { position: relative; grid-column: span 1; display: flex; flex-direction: column; min-width: 0; transition: opacity .18s, transform .18s; }
.tb-widget[data-tb-largeur="2"] { grid-column: span 2; }
.tb-widget[data-tb-largeur="4"] { grid-column: 1 / -1; }
.tb-contenu { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tb-contenu > .card, .tb-contenu > .tb-postit { flex: 1; margin: 0; }
.tb-vide { grid-column: 1 / -1; text-align: center; padding: 30px; }
@media (max-width: 1000px) {
    .tb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-widget[data-tb-largeur="2"], .tb-widget[data-tb-largeur="4"] { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .tb-grille { grid-template-columns: minmax(0, 1fr); } .tb-widget { grid-column: 1 / -1 !important; } }

/* Mode personnalisation */
.tb-outils { display: none; align-items: center; gap: 6px; padding: 5px 6px; margin-bottom: 4px; background: var(--carte); border: 1px solid var(--bleu);
    border-radius: calc(var(--rayon) - 2px); font-size: .78rem; box-shadow: var(--ombre); }
.tb-edition .tb-outils { display: flex; }
.tb-edition .tb-widget { outline: 2px dashed color-mix(in srgb, var(--bleu) 45%, transparent); outline-offset: 3px; border-radius: var(--rayon); }
.tb-edition .tb-contenu { pointer-events: none; user-select: none; opacity: .92; }
.tb-edition .tb-contenu .tb-reglage { pointer-events: auto; }
.tb-poignee { cursor: grab; font-size: 1rem; padding: 0 4px; color: var(--bleu); user-select: none; }
.tb-poignee:active { cursor: grabbing; }
.tb-outils-nom { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-largeurs { display: inline-flex; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
.tb-largeurs button { border: 0; background: var(--carte); color: var(--texte-2); min-width: 24px; height: 22px; cursor: pointer; font: inherit; font-size: .78rem; }
.tb-largeurs button + button { border-left: 1px solid var(--bord); }
.tb-largeurs button.actif { background: var(--bleu); color: var(--sur-bleu); font-weight: 700; }
.tb-masquer { border: 1px solid var(--bord); background: var(--carte); border-radius: 6px; height: 22px; cursor: pointer; }
.tb-masquer:hover { border-color: var(--rouge); }
.tb-glisse { opacity: .35; }
.tb-sortie { opacity: 0; transform: scale(.96); }
.tb-reglage { display: none; border: 1px dashed var(--bord); border-radius: 6px; margin: 10px 0 0; padding: 6px 10px; }
.tb-edition .tb-reglage { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tb-reglage legend { padding: 0 4px; color: var(--texte-2); }

/* Bibliothèque */
.tb-biblio { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; background: var(--fond); color: var(--texte); }
.tb-biblio::backdrop { background: rgba(16, 24, 40, .45); }
.tb-biblio-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 1.05rem; }
.tb-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.tb-modeles > .small { grid-column: 1 / -1; }
.tb-modele { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px; border: 1px solid var(--bord);
    border-radius: var(--rayon); background: var(--carte); color: var(--texte); cursor: pointer; font: inherit; }
.tb-modele:hover { border-color: var(--bleu); box-shadow: var(--ombre); }
.tb-modele span { font-size: 1.4rem; }
.tb-modele small { color: var(--texte-2); font-size: .74rem; line-height: 1.3; }
.tb-biblio-cat { margin: 14px 0 6px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-2); }
.tb-biblio-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tb-biblio-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border: 1px solid var(--bord); border-radius: var(--rayon);
    background: var(--carte); color: var(--texte); cursor: pointer; font: inherit; }
.tb-biblio-item:hover:not(:disabled) { border-color: var(--bleu); box-shadow: var(--ombre); }
.tb-biblio-item:disabled { opacity: .55; cursor: default; }
.tb-biblio-item strong { display: block; font-size: .88rem; }
.tb-biblio-item small { display: block; color: var(--texte-2); font-size: .74rem; line-height: 1.3; }
.tb-biblio-icone { font-size: 1.4rem; }
.tb-biblio-etat { margin-left: auto; font-size: .74rem; color: var(--bleu); white-space: nowrap; font-weight: 600; }

/* Objectif */
.tb-jauge { max-width: 260px; margin: 0 auto; }
.tb-jauge-arc { transition: stroke-dasharray .8s ease; }
.tb-jauge-pc { font-size: 26px; font-weight: 800; fill: var(--texte); }
.tb-jauge-sous { font-size: 9.5px; fill: var(--texte-2); }
.tb-objectif-texte { text-align: center; margin: 4px 0 0; }
.tb-objectif-form { margin-top: 8px; }
.tb-objectif-saisie { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tb-objectif-saisie input { max-width: 140px; }

/* CA sur 12 mois */
.tb-barres { width: 100%; height: auto; display: block; }
.tb-barre-ca { fill: color-mix(in srgb, var(--bleu) 30%, transparent); }
.tb-barre-courante { fill: color-mix(in srgb, var(--bleu) 55%, transparent); }
.tb-barre-marge { fill: var(--vert); }
.tb-barre-mois { font-size: 9px; fill: var(--texte-2); }
.tb-legende-ca { color: color-mix(in srgb, var(--bleu) 45%, transparent); }
.tb-legende-marge { color: var(--vert); }

/* Top clients */
.tb-top { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 4px; border-radius: 6px; color: inherit; text-decoration: none;
    background: linear-gradient(90deg, var(--bleu-clair) var(--p), transparent var(--p)); }
.tb-top:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--bleu); }
.tb-top-rang { width: 26px; text-align: center; font-weight: 700; color: var(--texte-2); }
.tb-top-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tb-top-ca { font-weight: 700; white-space: nowrap; }

/* Agenda */
.tb-jour { font-weight: 700; font-size: .84rem; margin: 10px 0 4px; }
.tb-jour:first-of-type { margin-top: 0; }
.tb-rdv { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-left: 3px solid var(--bleu); background: var(--gris-clair); border-radius: 0 6px 6px 0; margin-bottom: 5px; color: inherit; }
.tb-rdv:hover { text-decoration: none; background: var(--bleu-clair); }
.tb-rdv-heure { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; }
.tb-rdv-texte { display: flex; flex-direction: column; min-width: 0; }
.tb-rdv-texte strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rien { margin: 0 0 4px; }

/* Post-it et raccourcis */
.tb-postit { display: flex; flex-direction: column; background: #fff6b8; border-radius: 4px 4px 18px 4px; padding: 10px 12px; box-shadow: 0 6px 14px rgba(120, 100, 0, .18); transform: rotate(-.6deg); min-height: 160px; }
.tb-postit-tete { font-weight: 700; color: #6b5a00; display: flex; justify-content: space-between; font-size: .88rem; }
.tb-postit-etat { font-weight: 400; font-size: .74rem; opacity: .75; }
.tb-postit textarea { flex: 1; width: 100%; min-height: 110px; border: 0 !important; background: transparent !important; resize: none; font: inherit; color: #3d3400; padding: 6px 0 0; box-shadow: none !important; outline: none; }
.tb-raccourcis-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-raccourci { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); font-weight: 600; }
.tb-raccourci:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; box-shadow: var(--ombre); }

/* ---------- Paiement par carte (SumUp) ---------- */
.pay-grille { align-items: start; }
.pay-saisie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-saisie input { max-width: 180px; font-size: 1.25rem !important; font-weight: 700; }
.pay-pourcent { color: var(--texte-2); font-size: .9rem; }
.pay-montant-fixe { font-size: 2rem; font-weight: 800; color: var(--bleu-fonce); }
.pay-canaux { display: grid; gap: 8px; }
.pay-canal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); cursor: pointer; font-weight: 400; }
.pay-canal:hover { background: var(--bleu-clair); }
.pay-canal:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: inset 3px 0 0 var(--bleu); }
.pay-canal input { width: 18px; height: 18px; flex: none; }
.pay-canal-icone { font-size: 1.6rem; line-height: 1; }
.pay-canal strong { display: block; }
.pay-canal small { display: block; color: var(--texte-2); font-size: .82rem; }
.pay-canal .pay-lecteur { color: var(--vert); }
.pay-canal-off { opacity: .55; cursor: not-allowed; }
.pay-canal-off:hover { background: var(--carte); }
.pay-lien { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord); }
.pay-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0; }
.pay-lancer { font-size: 1.05rem; padding-left: 22px; padding-right: 22px; }
.pay-historique { margin-top: 16px; }
.pay-suivi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .pay-suivi { grid-template-columns: 1fr; } }
.pay-principal { text-align: center; padding: 24px 20px; }
.pay-montant { font-size: 2.6rem; font-weight: 800; color: var(--bleu-fonce); line-height: 1.1; }
.pay-qr-bloc { margin-top: 14px; }
.pay-qr { width: min(300px, 80vw); aspect-ratio: 1; margin: 0 auto; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 6px; display: grid; place-items: center; }
.pay-qr svg { width: 100%; height: 100%; display: block; }
.pay-qr-expire { opacity: .25; filter: grayscale(1); }
.pay-consigne { margin: 12px 0 4px; font-weight: 500; }
.pay-boutons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.pay-etat { margin-top: 18px; }
.pay-etat h2 { margin: 6px 0; }
.pay-etat p { margin: 6px auto; max-width: 560px; }
.pay-etat-icone { font-size: 2.6rem; }
.pay-etat-ok h2 { color: var(--vert); }
.pay-etat-ko h2 { color: var(--rouge); }
.pay-terminal { font-size: 3rem; animation: pay-pulse 1.4s ease-in-out infinite; }
@keyframes pay-pulse { 50% { transform: scale(1.12); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .pay-terminal { animation: none; } }
.pay-lien-copie { display: flex; gap: 6px; max-width: 560px; margin: 10px auto 0; }
.pay-lien-copie input { flex: 1; min-width: 0; font-size: .85rem; }
.pay-page .pay-carte { text-align: center; padding: 26px 20px; }
.pay-bouton { font-size: 1.15rem; padding: 14px 28px; }
.pay-moyens { margin-top: 10px; }
.pay-securite { max-width: 520px; margin: 12px auto 0; }
.sumup-etapes { align-items: start; }
.sumup-etape-tete { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; flex-wrap: wrap; }
.sumup-ok { border-top: 3px solid var(--vert); }
.sumup-liste { padding-left: 18px; margin: 6px 0; }
.sumup-liste li { margin-bottom: 4px; }
.sumup-env { background: var(--gris-clair); padding: 6px 8px; border-radius: 6px; font-size: .8rem; margin: 4px 0; white-space: pre-wrap; }
.sumup-appairage { display: grid; gap: 6px; margin-top: 8px; }
.sumup-code { font-size: 1.15rem !important; letter-spacing: 3px; text-transform: uppercase; }
.sumup-lecteur { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.pay-suivi > .card { margin-top: 0; }
.sumup-activation { margin-bottom: 16px; }
.sumup-activation.sumup-off { border-left: 4px solid var(--orange); }
.sumup-etapes-off { opacity: .55; }

/* ---------- Prélèvements SEPA ---------- */
.mandat-ligne { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.mandat-ligne:last-child { border-bottom: 0; }
.sepa-vide { text-align: center; padding: 28px 20px; }
.sepa-vide p { max-width: 560px; margin: 8px auto 14px; }
.sepa-iban { font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.iban-ok { color: var(--vert) !important; font-weight: 600; }
.iban-ko { color: var(--orange) !important; }
.sepa-remise-pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bord); }
.sepa-remise-pied .champ input { max-width: 200px; }
.sepa-total { font-size: 1.05rem; }
.sepa-actions { white-space: nowrap; }
.sepa-actions form { display: inline-block; margin-left: 4px; }
.sepa-import { margin-top: 16px; }
.sepa-import-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sepa-rejet { display: inline-block; margin-left: 6px; text-align: left; }
.sepa-rejet summary { cursor: pointer; list-style: none; }
.sepa-rejet form { display: flex; gap: 6px; margin-top: 6px; }
.sepa-rejet select { max-width: 260px; font-size: .85rem; }
.sepa-remise-nouvelle { background: var(--bleu-clair); }
.sepa-etapes ol { margin: 6px 0 0; padding-left: 20px; }
.onglets + .card, .onglets + form.card { margin-top: 0; }
.sumup-identifiants { display: grid; gap: 10px; }
.sumup-identifiants .btn { justify-self: start; }
.sumup-options { border: 1px dashed var(--bord); border-radius: var(--rayon); padding: 6px 10px; }
.sumup-options summary { cursor: pointer; color: var(--bleu); }
.sumup-options[open] { display: grid; gap: 10px; padding-bottom: 10px; }
.sumup-cle { font-family: ui-monospace, Consolas, monospace; }

/* ---------- Menu contextuel (clic droit / appui long sur un devis, une facture, un client…) ---------- */
.menu-ctx {
    position: fixed; z-index: 1000; min-width: 250px; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 16px);
    overflow-y: auto; padding: 6px; background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
    border-radius: var(--rayon); box-shadow: var(--ombre-forte); font-size: 14px; outline: none;
    animation: menu-ctx-entree .12s ease-out;
}
@keyframes menu-ctx-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-ctx-tete { padding: 6px 10px 8px; border-bottom: 1px solid var(--gris-clair); margin-bottom: 4px; }
.menu-ctx-tete strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-ctx-tete span { display: block; font-size: 12px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-ctx-tete span:empty { display: none; }
.menu-ctx-item {
    display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: calc(6px * var(--arrondi)); background: none;
    color: var(--texte); font: inherit; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.menu-ctx-item:hover, .menu-ctx-item:focus-visible { background: var(--bleu-clair); color: var(--bleu-fonce); text-decoration: none; outline: none; }
.menu-ctx-primaire { font-weight: 600; color: var(--bleu); }
.menu-ctx-danger { color: var(--rouge); }
.menu-ctx-danger:hover, .menu-ctx-danger:focus-visible { background: var(--rouge-clair); color: var(--rouge); }
.menu-ctx-sep { height: 1px; margin: 4px 6px; background: var(--gris-clair); }
.menu-ctx-info { padding: 7px 10px; color: var(--texte-2); font-size: 13px; }
.menu-ctx-chargement::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--bord); border-top-color: var(--bleu); border-radius: 50%; animation: menu-ctx-tourne .7s linear infinite;
}
@keyframes menu-ctx-tourne { to { transform: rotate(360deg); } }
.menu-ctx-pied { margin-top: 4px; padding: 6px 10px 2px; border-top: 1px solid var(--gris-clair); font-size: 11px; color: var(--texte-3); }
tr.menu-ctx-ligne > td { background: var(--bleu-clair); }
tbody tr a { -webkit-touch-callout: none; }
@media (hover: none) { .menu-ctx-pied { display: none; } .menu-ctx-item { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .menu-ctx { animation: none; } }
.menu-ctx-off, .menu-ctx-off:hover { color: var(--texte-3); background: none; cursor: not-allowed; }

/* ---------- Sauvegardes : barre de progression sous « Sauvegarder maintenant » ---------- */
.sv-lancer { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sv-progression { width: min(420px, 100%); padding: 10px 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.sv-progression[hidden] { display: none; }
.sv-progression-tete { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.sv-progression-tete span { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bleu); }
.sv-barre { position: relative; height: 10px; overflow: hidden; background: var(--gris-clair); border-radius: var(--pilule); }
.sv-barre span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bleu); border-radius: inherit; transition: width .6s ease; }
.sv-barre span::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); background-size: 50% 100%; background-repeat: no-repeat;
    animation: sv-reflet 1.4s linear infinite;
}
@keyframes sv-reflet { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.sv-progression-pied { margin-top: 6px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.sv-fini .sv-barre span { background: var(--vert); }
.sv-fini .sv-progression-tete span { color: var(--vert); }
.sv-fini .sv-barre span::after, .sv-erreur .sv-barre span::after { animation: none; background: none; }
.sv-erreur .sv-barre span { background: var(--rouge); }
.sv-erreur .sv-progression-tete span { color: var(--rouge); }
@media (max-width: 760px) { .sv-lancer { align-items: stretch; width: 100%; } .sv-progression { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sv-barre span { transition: none; } .sv-barre span::after { animation: none; } }

/* ---------- Confirmation (data-confirm) : fenêtre du CRM au lieu de celle du navigateur ---------- */
.confirm-crm {
    width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid var(--bord); border-radius: calc(var(--rayon) * 1.5);
    background: var(--carte); color: var(--texte); box-shadow: var(--ombre-forte); text-align: center;
}
.confirm-crm[open] { animation: confirm-entree .16s ease-out; }
.confirm-crm::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
/* Grandes fenêtres (lecture en grand, rédaction) : voile simple, sans flou de tout l'écran (carte graphique ménagée) */
.confirm-crm.mx-fenetre::backdrop, .confirm-crm.mx-redaction::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: none; }
/* Fenêtre ouverte : les animations de la page derrière (Axia, pastilles, roues) sont en pause */
html.crm-modale body :not(dialog, dialog *), html.crm-modale body :not(dialog, dialog *)::before, html.crm-modale body :not(dialog, dialog *)::after { animation-play-state: paused !important; }
@keyframes confirm-entree { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.confirm-icone {
    width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 24px;
    border-radius: 50%; background: var(--bleu-clair);
}
.confirm-danger .confirm-icone { background: var(--rouge-clair); }
.confirm-crm h2 { margin: 0 0 8px; font-size: 18px; }
.confirm-message { margin: 0 0 20px; color: var(--texte-2); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.confirm-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.confirm-actions .btn { min-width: 120px; justify-content: center; }
.btn-danger-plein { background: var(--rouge); border-color: var(--rouge); color: var(--sur-rouge); }
.btn-danger-plein:hover { background: color-mix(in srgb, var(--rouge) 85%, #000); border-color: color-mix(in srgb, var(--rouge) 85%, #000); color: var(--sur-rouge); }
@media (prefers-reduced-motion: reduce) { .confirm-crm[open] { animation: none; } }

/* ---------- Coffre-fort hébergé sur le NAS : connexion à Vaultwarden ---------- */
.coffre-connexion { margin-bottom: 16px; }
.coffre-connexion h2 { margin-top: 0; }
.coffre-demarrage .menu-ctx-chargement { display: inline; padding: 0; }
.coffre-autre-compte { margin-top: 10px; }
.coffre-autre-compte summary { cursor: pointer; }
.coffre-autre-compte form { margin-top: 10px; }

/* ---------- Adresse publique du CRM (Paramètres › Entreprise, SumUp) ---------- */
.adresse-publique-carte { margin-bottom: 16px; }
.adresse-publique-carte h2 { margin-top: 0; }
.adresse-publique .champ-ligne { display: flex; gap: 8px; align-items: center; }
.adresse-publique .champ-ligne input { flex: 1; min-width: 0; }

/* ---------- Téléphonie : numéros cliquables (Speek…) ---------- */
a.tel-lien { white-space: nowrap; }
/* Pictogramme d'appel : un seul combiné rouge, net (dessiné, pas d'émoji) */
a.tel-lien::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 5px; vertical-align: -.16em; background: var(--rouge);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Numéro dans une ligne d'infos : bleu (cliquable), sans gras ni fond */
.todo-meta a.tel-lien, .todo-meta a.todo-tel { color: var(--bleu); font-weight: inherit; background: none; }
.todo-meta a.tel-lien:hover, .todo-meta a.todo-tel:hover { text-decoration: underline; }
.tel-protocoles { border: 0; padding: 0; margin: 0; }
.tel-protocoles .choix-type { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.tel-bulle {
    position: fixed; z-index: 900; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 14px; background: var(--toast); color: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-forte);
    font-size: 14px; animation: menu-ctx-entree .15s ease-out;
}
.tel-bulle .btn { background: #fff; color: var(--texte); border-color: transparent; }
.tel-bulle .tel-fermer { background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.tel-bulle.sortie { opacity: 0; transition: opacity .4s; }
.tel-poste { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 8px 0; }
.tel-poste .btn { justify-content: center; }
@media (max-width: 760px) { .tel-poste { grid-template-columns: 1fr; } }
.tel-bulle .tel-aide { background: none; border: 0; color: #fff; opacity: .8; text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }
.tel-poste-actions { flex-direction: column; align-items: stretch; }

/* ---------- Bouton « ← Retour » (toutes les pages sauf listes et accueil) ---------- */
.retour-barre { margin: 0 0 10px; }
.btn-retour { gap: 4px; }
@media print { .retour-barre { display: none; } }

/* ---------- Logo agrandi dans l'en-tête (Apparence › Logos › Taille) : déborde sous l'en-tête, en onglet ---------- */
:root { --logo-h: 60px; --entete-h: 123px; }
html[data-densite="compact"] { --entete-h: 103px; }
.topbar .brand > picture:not(.brand-client) img { height: var(--logo-h); }
html[data-densite="compact"]:not(.logo-deborde) .topbar .brand > picture:not(.brand-client) img { height: 48px; }
html.logo-deborde .topbar-haut .brand { align-self: flex-start; margin-top: 8px; height: 60px; position: relative; z-index: 12; }
html.logo-deborde .topbar .brand > picture:not(.brand-client) {
    align-self: flex-start; background: var(--entete); padding: 0 12px 10px; margin: 0 -12px;
    border-radius: 0 0 calc(14px * var(--arrondi)) calc(14px * var(--arrondi));
    box-shadow: 0 8px 14px -10px rgba(16, 24, 40, .45);
}
html.logo-deborde main.container { padding-top: max(20px, calc(var(--logo-h) + 30px - var(--entete-h))); }
@media (max-width: 760px) {
    html.logo-deborde .topbar-haut .brand { align-self: center; margin-top: 0; height: auto; }
    html.logo-deborde .topbar .brand > picture:not(.brand-client) { background: none; padding: 0; margin: 0; box-shadow: none; }
    .topbar .brand > picture:not(.brand-client) img { height: 44px; }
    html.logo-deborde main.container { padding-top: 20px; }
}
.identite-taille { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); }
.identite-taille label { font-weight: 600; display: block; margin-bottom: 6px; }
.identite-taille-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.identite-taille-ligne input[type=range] { flex: 1; min-width: 140px; accent-color: var(--bleu); }
/* Logo agrandi : marge identique à gauche et à droite du menu, qui reste centré sans passer sous le logo
   (largeur mesurée par app.js ; valeur approchée sans script) */
html.logo-deborde .topbar-menu { padding-left: var(--nav-pl, 16px); }
html.nav-serre .nav a { padding-left: 8px; padding-right: 8px; }
html.nav-serre-2 .nav { gap: 0; }
html.nav-serre-2 .nav a { padding-left: 5px; padding-right: 5px; font-size: .9rem; }
@media (max-width: 760px) { html.logo-deborde .topbar-menu { padding-left: 16px; } }

/* Paramètres › Fonctionnalités */
.fonction-socle { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.fonction-icone { font-size: 26px; }
.fonction-groupe { margin: 22px 0 10px; font-size: 1.05rem; }
.fonctions { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.fonctions > .card, html[data-densite] .fonctions > .card { margin: 0; }
.fonctions > .fonction { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; margin: 0; border-left: 4px solid var(--vert); transition: opacity .15s; }
.fonction.fonction-off { border-left-color: var(--bord); }
.fonction.fonction-off .ar-libelle { opacity: .7; }
.fonction.fonction-bloquee { border-left-color: var(--orange); }
.fonction-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fonction-reglages { margin-left: auto; }
/* Fiche client envoyée par e-mail : rubriques du PDF */
.fiche-rubriques { margin: 0 0 4px 26px; display: flex; flex-direction: column; gap: 2px; }
.fiche-rubriques.fiche-off { opacity: .45; pointer-events: none; }
/* Numérotation : fenêtre « Format des numéros » */
.confirm-crm.chrono-dialogue { width: min(620px, calc(100vw - 32px)); text-align: left; }
.confirm-crm.stock-mouvement-dialogue { width: min(620px, calc(100vw - 24px)); text-align: left; position: fixed; max-height: calc(100dvh - 24px); overflow-y: auto; }
.chrono-apercu { margin-top: 14px; padding: 10px 12px; border-radius: var(--rayon); background: var(--bleu-clair); font-size: 15px; }
.chrono-apercu strong { font-family: ui-monospace, Consolas, monospace; letter-spacing: .3px; }

/* Apparence → Logos : les trois logos côte à côte dans un seul cadre, boutons alignés en bas */
.identite-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--carte); border: 1px solid var(--bord);
    border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.identite-grille > .identite-carte { display: flex; flex-direction: column; padding: 16px 18px; min-width: 0; }
.identite-grille > .identite-carte + .identite-carte { border-left: 1px solid var(--bord); }
.identite-grille .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.identite-grille .identite-role { min-height: 3.9em; }
.identite-grille .identite-apercus { flex: 0 0 auto; }
.identite-grille .identite-fond { min-height: 108px; justify-content: center; }
.identite-grille .identite-depot { margin-top: auto; padding-top: 12px; }
.identite-grille .identite-taille { margin-bottom: 0; position: relative; }
.identite-grille .identite-taille label { padding-right: 110px; }
.identite-grille .identite-taille button { position: absolute; top: 8px; right: 10px; }
.identite-grille .identite-depot { order: 10; }
.identite-grille .identite-plus { order: 5; margin: 12px 0 0; }
.identite-grille .identite-actions { flex-wrap: nowrap; }
.identite-grille .identite-actions .case { white-space: nowrap; }
.identite-fond-vide { border-style: dashed; color: var(--texte-2); background: var(--surface-2); }
.identite-fond-vide span { font-size: 2rem; opacity: .45; line-height: 64px; }
@media (max-width: 1150px) {
    .identite-grille { grid-template-columns: 1fr; }
    .identite-grille > .identite-carte + .identite-carte { border-left: 0; border-top: 1px solid var(--bord); }
    .identite-grille .identite-role { min-height: 0; }
}

/* Apparence → Logo documents : un seul aperçu, sur papier blanc */
.identite-apercus.identite-apercus-document { grid-template-columns: 1fr; }
.identite-fond-papier { box-shadow: inset 0 0 0 1px var(--bordure, #e2e8f0); }

/* ==========================================================================================================
   Axia — orbe lumineuse en bas à droite, bulles, panneau de discussion
   Couleurs selon l'humeur : calme (bleu), réflexion (violet), alerte (orange), joie (vert), sommeil (nuit), perplexe (ambre)
   ========================================================================================================== */
.axia { --a1: #38bdf8; --a2: #4f46e5; --a3: #a5f3fc; --ox: 0px; --oy: 0px; --taille-orbe: 62px;
    position: fixed; right: 22px; bottom: 22px; z-index: 900; font-size: .92rem; }
.axia[data-humeur="reflexion"] { --a1: #c084fc; --a2: #6d28d9; --a3: #f5d0fe; }
.axia[data-humeur="alerte"] { --a1: #fb923c; --a2: #e11d48; --a3: #fde68a; }
.axia[data-humeur="joie"] { --a1: #34d399; --a2: #0891b2; --a3: #d9f99d; }
.axia[data-humeur="sommeil"] { --a1: #818cf8; --a2: #1e1b4b; --a3: #c7d2fe; }
.axia[data-humeur="perplexe"] { --a1: #fbbf24; --a2: #7c3aed; --a3: #fef3c7; }
.axia:not(.axia-pret) { visibility: hidden; }
@media print { .axia { display: none !important; } }

/* ---- L'orbe */
.axia-orbe { position: relative; width: var(--taille-orbe); height: var(--taille-orbe); border: 0; padding: 0; border-radius: 50%; background: none;
    cursor: pointer; display: block; margin-left: auto; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); animation: axia-flotte 6s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent; }
.axia-orbe:hover { transform: scale(1.08); }
.axia-orbe:active { transform: scale(.94); }
.axia-orbe:focus-visible { outline: 3px solid var(--a1); outline-offset: 4px; }
.axia-halo { position: absolute; inset: -9px; border-radius: 50%; z-index: 0; filter: blur(9px); opacity: .85;
    background: conic-gradient(from 0deg, transparent 0 10%, var(--a1) 22%, transparent 38%, var(--a3) 55%, transparent 70%, var(--a2) 85%, transparent 95%);
    animation: axia-tourne 7s linear infinite; transition: opacity .4s; }
.axia-sphere { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1;
    background: radial-gradient(circle at 32% 28%, var(--a3) 0%, var(--a1) 38%, var(--a2) 100%);
    box-shadow: inset -6px -9px 18px rgba(0, 0, 0, .28), inset 5px 6px 14px rgba(255, 255, 255, .35), 0 6px 22px -4px var(--a2), 0 0 26px -2px var(--a1);
    animation: axia-respire 4.2s ease-in-out infinite; transition: background .8s, box-shadow .8s; }
.axia-remous { position: absolute; inset: -30%; border-radius: 50%; mix-blend-mode: soft-light; opacity: .75;
    background: conic-gradient(from 90deg, rgba(255, 255, 255, .55), transparent 25%, rgba(255, 255, 255, .25) 45%, transparent 60%, rgba(255, 255, 255, .45) 80%, transparent);
    animation: axia-tourne 9s linear infinite reverse; }
.axia-reflet { position: absolute; left: 18%; top: 12%; width: 34%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(2px); transform: rotate(-25deg); }
.axia-visage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transform: translate(var(--ox), var(--oy)); transition: transform .35s ease-out; }
.axia-yeux { display: flex; gap: 11px; }
.axia-yeux i { width: 7px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); animation: axia-cligne 5.5s infinite; transform-origin: center; transition: height .3s, border-radius .3s; }
.axia-yeux i:nth-child(2) { animation-delay: .06s; }
.axia-bouche { width: 12px; height: 6px; border: 2px solid rgba(255, 255, 255, .9); border-top: 0; border-radius: 0 0 12px 12px; opacity: 0; transition: opacity .3s, transform .3s; }
.axia-orbe:hover .axia-yeux i { height: 12px; }
.axia-orbe:hover .axia-bouche, .axia[data-humeur="joie"] .axia-bouche { opacity: 1; }
.axia[data-humeur="perplexe"] .axia-bouche { opacity: 1; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; }
.axia[data-humeur="perplexe"] .axia-visage { transform: translate(var(--ox), var(--oy)) rotate(-12deg); }
.axia[data-humeur="sommeil"] .axia-yeux i { height: 2px; border-radius: 2px; animation: none; box-shadow: none; }
.axia[data-humeur="sommeil"] .axia-orbe { animation-duration: 10s; }
.axia[data-humeur="sommeil"] .axia-sphere { animation-duration: 7s; filter: saturate(.75) brightness(.9); }
.axia[data-humeur="sommeil"] .axia-halo { opacity: .35; animation-duration: 18s; }
.axia[data-humeur="reflexion"] .axia-halo { animation-duration: 1.6s; opacity: 1; }
.axia[data-humeur="reflexion"] .axia-remous { animation-duration: 2.2s; }
.axia[data-humeur="reflexion"] .axia-sphere { animation: axia-pense 1.1s ease-in-out infinite; }
.axia[data-humeur="reflexion"] .axia-yeux i { animation: axia-regarde 1.6s ease-in-out infinite; }
.axia[data-humeur="alerte"] .axia-orbe { animation: axia-sautille 2.6s ease-in-out infinite; }
.axia[data-humeur="alerte"] .axia-halo { animation-duration: 3s; opacity: 1; }

/* Étincelles (joie, réflexion, après une action réussie) */
.axia-etincelles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.axia-etincelles i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--a3);
    box-shadow: 0 0 8px 2px var(--a1); opacity: 0; }
.axia[data-humeur="joie"] .axia-etincelles i, .axia[data-humeur="reflexion"] .axia-etincelles i { animation: axia-orbite 3.2s linear infinite; opacity: 1; }
.axia-etincelles i:nth-child(2) { animation-delay: -.8s !important; width: 4px; height: 4px; }
.axia-etincelles i:nth-child(3) { animation-delay: -1.6s !important; }
.axia-etincelles i:nth-child(4) { animation-delay: -2.4s !important; width: 3px; height: 3px; }
.axia-petille .axia-etincelles i { animation: axia-gerbe 1.1s ease-out forwards !important; opacity: 1; }
.axia-petille .axia-etincelles i:nth-child(1) { --dx: -38px; --dy: -34px; }
.axia-petille .axia-etincelles i:nth-child(2) { --dx: 36px; --dy: -40px; }
.axia-petille .axia-etincelles i:nth-child(3) { --dx: -30px; --dy: 30px; }
.axia-petille .axia-etincelles i:nth-child(4) { --dx: 40px; --dy: 22px; }

/* Zzz (sommeil) */
.axia-zzz { position: absolute; right: -4px; top: -14px; pointer-events: none; z-index: 2; display: none; }
.axia[data-humeur="sommeil"] .axia-zzz { display: block; }
.axia-zzz i { position: absolute; font: 700 11px/1 system-ui, sans-serif; color: var(--a1); opacity: 0; animation: axia-zzz 3.6s ease-in infinite; }
.axia-zzz i:nth-child(2) { animation-delay: 1.2s; font-size: 13px; }
.axia-zzz i:nth-child(3) { animation-delay: 2.4s; font-size: 15px; }

.axia-badge { position: absolute; top: -3px; right: -3px; z-index: 3; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
    background: #ef4444; color: #fff; font: 700 .72rem/21px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--fond, #fff), 0 2px 6px rgba(0, 0, 0, .25);
    animation: axia-pouls 2s ease-in-out infinite; }
.axia-coucou .axia-orbe { animation: axia-coucou .9s cubic-bezier(.34, 1.56, .64, 1); }
.axia-pirouette .axia-orbe { animation: axia-pirouette 1.1s cubic-bezier(.34, 1.56, .64, 1); }
.axia-ouvert .axia-orbe { transform: scale(.86); }
.axia-ouvert .axia-badge { display: none; }

/* ---- Bulle */
.axia-bulle { position: absolute; right: 8px; bottom: calc(var(--taille-orbe) + 16px); width: max-content; max-width: min(300px, calc(100vw - 48px));
    padding: 11px 30px 11px 14px; border-radius: 16px 16px 4px 16px; background: var(--carte); color: var(--texte); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--a1) 45%, transparent); box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .35), 0 0 0 4px color-mix(in srgb, var(--a1) 12%, transparent);
    font-size: .88rem; line-height: 1.4; animation: axia-bulle-entre .45s cubic-bezier(.34, 1.56, .64, 1); transform-origin: bottom right; }
.axia-bulle::after { content: ""; position: absolute; right: 18px; bottom: -7px; width: 12px; height: 12px; background: var(--carte);
    border-right: 1px solid color-mix(in srgb, var(--a1) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--a1) 45%, transparent); transform: rotate(45deg); }
.axia-bulle-reprise { animation: none; } /* bulle reprise d'une page à l'autre : déjà ouverte, pas de nouvelle entrée */
.axia-bulle-sort { animation: axia-bulle-sort .25s ease-in forwards; }
.axia-bulle-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--texte-2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 4px; }

/* ---- Panneau */
.axia-panneau { position: absolute; right: 0; bottom: calc(var(--taille-orbe) + 14px); width: 400px; height: min(620px, calc(100vh - 120px));
    display: flex; flex-direction: column; background: var(--carte); color: var(--texte); border-radius: 20px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--a1) 35%, var(--bord, #e2e8f0));
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45), 0 0 0 1px rgba(255, 255, 255, .05), 0 0 40px -10px var(--a1);
    animation: axia-panneau-entre .35s cubic-bezier(.34, 1.4, .64, 1); transform-origin: bottom right; }
.axia-panneau[hidden] { display: none; }
.axia-tete { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; color: #fff;
    background: linear-gradient(135deg, var(--a2), color-mix(in srgb, var(--a1) 80%, var(--a2))); transition: background .8s; }
.axia-mini { position: relative; width: 38px; height: 38px; flex: none; }
.axia-mini .axia-sphere { box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .5); }
.axia-mini .axia-yeux { gap: 7px; }
.axia-mini .axia-yeux i { width: 4px; height: 7px; }
.axia-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.axia-titre strong { font-size: 1.08rem; letter-spacing: .01em; }
.axia-statut { font-size: .78rem; opacity: .9; }
.axia-statut::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 6px; box-shadow: 0 0 6px #4ade80; vertical-align: 1px; }
.axia-tete-actions { display: flex; gap: 2px; }
.axia-icone { border: 0; background: transparent; color: inherit; cursor: pointer; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: .95rem; }
.axia-tete .axia-icone:hover { background: rgba(255, 255, 255, .18); }
.axia-onglets { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--bord, #e2e8f0); background: var(--surface-2); }
.axia-onglets button { flex: 1; border: 0; background: none; color: var(--texte-2); font: inherit; font-size: .84rem; font-weight: 600; padding: 8px 4px 9px; cursor: pointer;
    border-bottom: 2.5px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap; }
.axia-onglets button:hover { color: var(--texte); background: color-mix(in srgb, var(--a1) 8%, transparent); }
.axia-onglets button.actif { color: var(--texte); border-bottom-color: var(--a2); }
.axia-compte { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .7rem; line-height: 18px; margin-left: 3px; }
.axia-compte-doux { background: color-mix(in srgb, var(--a1) 25%, var(--surface-2)); color: var(--texte); }
.axia-vue { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.axia-vue[hidden] { display: none; }
.axia-vue[data-vue="valider"], .axia-vue[data-vue="programme"] { overflow-y: auto; padding: 12px; gap: 10px; }

/* Discussion */
.axia-fil { flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--a1) 7%, transparent), transparent 55%); }
.axia-msg { max-width: 88%; display: flex; flex-direction: column; }
.axia-msg-moi { align-self: flex-end; align-items: flex-end; }
.axia-msg-axia { align-self: flex-start; }
.axia-msg-corps { padding: 9px 12px; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.axia-msg-moi .axia-msg-corps { background: var(--bleu); color: var(--sur-bleu, #fff); border-bottom-right-radius: 5px; }
.axia-msg-axia .axia-msg-corps { background: var(--surface-2); border: 1px solid var(--bord, #e2e8f0); border-bottom-left-radius: 5px; }
.axia-msg-auto .axia-msg-corps { border-left: 3px solid var(--a1); }
.axia-msg-pied { font-size: .7rem; color: var(--texte-2); margin: 3px 6px 0; }
.axia-msg-nouveau { animation: axia-msg-entre .3s ease-out; }
.axia-ecrit .axia-msg-corps { display: flex; gap: 4px; padding: 12px 14px; }
.axia-ecrit span { width: 7px; height: 7px; border-radius: 50%; background: var(--a2); animation: axia-points 1.2s infinite ease-in-out; }
.axia-ecrit span:nth-child(2) { animation-delay: .15s; }
.axia-ecrit span:nth-child(3) { animation-delay: .3s; }
.axia-carte { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 8px 10px; border-radius: 11px; background: var(--carte);
    border: 1px solid var(--bord, #e2e8f0); color: var(--texte); text-decoration: none; transition: border-color .2s, transform .15s; }
a.axia-carte:hover { border-color: var(--a1); transform: translateX(2px); }
.axia-carte-icone { font-size: 1.15rem; flex: none; }
.axia-carte-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.axia-carte-texte b { font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axia-carte-texte small { color: var(--texte-2); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axia-carte-action { flex: none; border: 1px solid var(--a2); background: none; color: var(--a2); border-radius: 8px; font-size: .74rem; font-weight: 600; padding: 3px 8px; cursor: pointer; }
.axia-carte-action:hover { background: var(--a2); color: #fff; }
.axia-boutons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.axia-puces { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 4px; scrollbar-width: none; }
.axia-puces::-webkit-scrollbar { display: none; }
.axia-puce { flex: none; border: 1px solid color-mix(in srgb, var(--a1) 45%, var(--bord, #e2e8f0)); background: color-mix(in srgb, var(--a1) 7%, var(--carte));
    color: var(--texte); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s; }
.axia-puce:hover { background: color-mix(in srgb, var(--a1) 18%, var(--carte)); transform: translateY(-1px); }
.axia-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--bord, #e2e8f0); }
.axia-saisie textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--bord, #cbd5e1);
    background: var(--surface-2); color: var(--texte); font: inherit; line-height: 1.35; }
.axia-saisie textarea:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 25%, transparent); }
.axia-envoyer { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 1rem;
    background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 4px 12px -3px var(--a2); transition: transform .15s; }
.axia-envoyer:hover { transform: scale(1.08) rotate(-8deg); }

/* À valider */
.axia-intro, .axia-astuce { margin: 0; color: var(--texte-2); font-size: .8rem; }
.axia-vide { text-align: center; color: var(--texte-2); padding: 24px 8px; margin: 0; }
.axia-prop { border: 1px solid var(--bord, #e2e8f0); border-radius: 13px; padding: 10px 12px; background: var(--carte); }
.axia-prop-attente { border-color: color-mix(in srgb, var(--a1) 55%, var(--bord, #e2e8f0)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 10%, transparent); }
.axia-prop-tete { display: flex; gap: 8px; align-items: baseline; }
.axia-prop-tete b { font-size: .88rem; }
.axia-prop-detail { margin: 4px 0 0; font-size: .8rem; color: var(--texte-2); white-space: pre-line; }
.axia-prop-detail:empty { display: none; }
.axia-prop-pied { display: block; margin-top: 4px; font-size: .72rem; color: var(--texte-2); }
.axia-prop-executee, .axia-prop-refusee { opacity: .72; }

/* Programmé */
.axia-programmer { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 13px; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--a1) 50%, var(--bord, #e2e8f0)); }
.axia-programmer input, .axia-programmer select { font: inherit; font-size: .84rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bord, #cbd5e1); background: var(--carte); color: var(--texte); min-width: 0; }
.axia-programmer-ligne { display: flex; gap: 6px; flex-wrap: wrap; }
.axia-programmer-ligne input { flex: 1 1 150px; }
.axia-programmer-ligne select { flex: 1 1 120px; }
.axia-tache { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--bord, #e2e8f0); background: var(--carte); }
.axia-tache-off { opacity: .55; }
.axia-tache-icone { font-size: 1.2rem; flex: none; }
.axia-tache-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.axia-tache-texte b { font-size: .86rem; font-weight: 600; }
.axia-tache-texte small { font-size: .74rem; color: var(--texte-2); }
.axia-tache-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.axia-tache-actions .axia-icone { width: 28px; height: 28px; font-size: .8rem; color: var(--texte-2); }
.axia-tache-actions .axia-icone:hover { background: var(--surface-2); color: var(--texte); }
.axia-inter { position: relative; width: 34px; height: 20px; flex: none; cursor: pointer; }
.axia-inter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.axia-inter span { position: absolute; inset: 0; border-radius: 10px; background: #cbd5e1; transition: background .2s; }
.axia-inter span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.axia-inter input:checked + span { background: var(--a2); }
.axia-inter input:checked + span::after { transform: translateX(14px); }
.axia-inter input:focus-visible + span { outline: 2px solid var(--a1); outline-offset: 2px; }

/* ---- Animations */
@keyframes axia-tourne { to { transform: rotate(360deg); } }
@keyframes axia-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes axia-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes axia-pense { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.18); } }
@keyframes axia-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes axia-regarde { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes axia-sautille { 0%, 70%, 100% { translate: 0 0; } 76% { translate: 0 -10px; } 82% { translate: 0 0; } 88% { translate: 0 -5px; } 94% { translate: 0 0; } }
@keyframes axia-orbite { from { transform: rotate(0deg) translateX(40px) rotate(0deg) scale(.8); } 50% { transform: rotate(180deg) translateX(42px) rotate(-180deg) scale(1.2); } to { transform: rotate(360deg) translateX(40px) rotate(-360deg) scale(.8); } }
@keyframes axia-gerbe { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; } }
@keyframes axia-zzz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -26px); opacity: 0; } }
@keyframes axia-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes axia-coucou { 0% { transform: scale(1); } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.95) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes axia-pirouette { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes axia-bulle-entre { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes axia-bulle-sort { to { opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes axia-panneau-entre { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes axia-msg-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes axia-points { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    /* Seulement si Axia suit le réglage de l'appareil (data-sobre, Paramètres › Axia › 🎬 Vie) */
    .axia[data-sobre] *, .axia[data-sobre] .axia-orbe, .axia[data-sobre] .axia-bulle, .axia[data-sobre] .axia-panneau { animation: none !important; transition: none !important; }
}
@media (max-width: 560px) {
    /* Téléphone : orbe discrète (taille choisie ignorée) et panneau sur toute la largeur de l'écran */
    .axia { right: 12px; bottom: 12px; --taille-orbe: 46px !important; }
    /* Panneau ouvert : Axia revient à sa place (un déplacement « translate » restreindrait le panneau à la largeur de l'orbe) */
    .axia.axia-ouvert { translate: none !important; transition: none !important; }
    .axia-panneau { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--taille-orbe) + 20px); width: auto; max-width: none;
        height: min(76dvh, calc(100dvh - 96px)); border-radius: 18px; }
    .axia-tete { padding: 10px 10px 9px 12px; gap: 10px; }
    .axia-mini { width: 32px; height: 32px; }
    .axia-onglets { padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
    .axia-onglets::-webkit-scrollbar { display: none; }
    .axia-onglets button { flex: 1 0 auto; font-size: .8rem; padding: 7px 8px 8px; white-space: nowrap; }
    .axia-msg { max-width: 92%; }
    .axia-saisie { padding: 8px 10px 10px; }
    .axia-saisie textarea { font-size: 16px; } /* évite le zoom automatique d'iOS */
    .axia-bulle { max-width: calc(100vw - 40px); }
    .axia-zzz, .axia-etincelles { display: none; }
}

/* Paramètres › Axia */
.axia-hero { display: flex; align-items: center; gap: 26px; padding: 22px 26px; margin-bottom: 18px;
    background: radial-gradient(circle at 0 50%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 45%), var(--carte); }
.axia-hero h1 { margin: 0 0 6px; }
.axia-hero p { margin: 0 0 10px; max-width: 760px; }
.axia-hero-chiffres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.axia.axia-demo { position: relative; right: auto; bottom: auto; z-index: auto; flex: none; --taille-orbe: 92px; visibility: visible; }
.axia-demo .axia-orbe { cursor: default; }
.axia-demo .axia-yeux { gap: 15px; }
.axia-demo .axia-yeux i { width: 10px; height: 15px; }
.axia-demo .axia-bouche { width: 18px; height: 9px; }
.axia-reglages { align-items: start; }
.axia-reglages-pied { grid-column: 1 / -1; display: flex; gap: 10px; }
.axia-conso { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.axia-conso-barre { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--bord, #e2e8f0); overflow: hidden; }
.axia-conso-barre span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #4f46e5); border-radius: 4px; }
.axia-conso-barre span.alerte { background: linear-gradient(90deg, #fb923c, #e11d48); }
.axia-routines { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.axia-routines > .card { margin: 0; }
.axia-routine { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.axia-routine-off { opacity: .72; }
.axia-routine-tete { display: flex; gap: 12px; align-items: flex-start; }
.axia-routine-icone { font-size: 1.6rem; line-height: 1; flex: none; }
.axia-routine-titre { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.axia-routine-champs { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: .85rem; color: var(--texte-2); }
.axia-routine-champs label { display: flex; align-items: center; gap: 6px; }
.axia-routine-champs select, .axia-routine-champs input { font-size: .85rem; padding: 4px 6px; }
.axia-routine-champs .axia-nombre, .axia-routine-champs input[name="jour"] { width: 64px; }
.axia-routine-champs [hidden] { display: none; }
.axia-routine-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bord, #e2e8f0); }
.axia-routine-boutons { display: flex; gap: 6px; margin-left: auto; }
@media (max-width: 560px) { .axia-hero { flex-direction: column; text-align: center; } .axia-routines { grid-template-columns: 1fr; } }
.axia-persos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.axia-perso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bord, #e2e8f0); border-radius: var(--rayon); cursor: pointer; transition: border-color .2s, background .2s; }
.axia-perso:has(input:checked) { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 7%, var(--carte)); }
.axia-perso input { margin-top: 3px; accent-color: var(--bleu); }
.axia-perso span { display: flex; flex-direction: column; gap: 2px; }
.axia-perso small { color: var(--texte-2); font-size: .78rem; }
@media (max-width: 560px) { .axia-persos { grid-template-columns: 1fr; } }

/* Axia : danse du code secret */
@keyframes axia-danse { 0%, 100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-14px) rotate(-12deg); } 30% { transform: translateY(0) rotate(10deg) scale(1.08); }
    45% { transform: translateY(-18px) rotate(-8deg); } 60% { transform: translateY(0) rotate(360deg); } 80% { transform: translateY(-8px) rotate(372deg) scale(1.1); } }
.axia.axia-fete .axia-orbe { animation: axia-danse 1.4s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .axia[data-sobre].axia-fete .axia-orbe { animation: none; } }

/* --- En-tête des pages figé (Apparence › En-tête figé) : titre et boutons d'action restent sous le menu ---
   --haut-topbar : hauteur réelle du menu ; --haut-colle : menu + en-tête de page figé (pour les autres éléments collants). */
html.entete-fige .page-head {
    position: sticky; top: var(--haut-topbar, var(--entete-h)); z-index: 9;
    background: var(--fond); padding: 6px 0 10px; margin-top: -6px;
    box-shadow: 0 0 0 100vmax var(--fond); clip-path: inset(0 -100vmax);
}
html.entete-fige .page-head.est-colle::after {
    content: ''; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--bord);
}
@media (min-width: 761px) {
    html.entete-fige.logo-deborde .page-head.est-colle { padding-left: var(--nav-pl, 0); }
}
@media (max-width: 760px) {
    /* Téléphone : boutons sur une ligne qui défile, pour ne pas manger l'écran */
    html.entete-fige .page-head .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    html.entete-fige .page-head .actions::-webkit-scrollbar { display: none; }
    html.entete-fige .page-head .actions > * { flex: none; }
    /* Tableau de bord : une ligne de boutons qui défile au doigt, centrée quand tout tient, sinon depuis le premier
       bouton (aucun bouton coupé). Hauteur identique figée ou non : changer la hauteur de l'en-tête quand il se fige
       le faisait se décoller aussitôt et bloquait le défilement de la page. */
    html.entete-fige .page-head .barre-actions { justify-content: flex-start; justify-content: safe center; gap: 6px; }
    .barre-actions .btn, .barre-actions > details > summary.btn { min-height: 36px; padding: 6px 11px; font-size: .9rem; }
}
@media print { html.entete-fige .page-head { position: static; box-shadow: none; clip-path: none; } }
/* Téléphone : seule la barre des menus reste visible en haut (le reste de l'en-tête défile avec la page) et le titre de la page
   ne reste plus figé, pour laisser l'écran au contenu. L'ordinateur n'est pas concerné. */
@media (max-width: 760px) {
    .topbar { top: calc(-1 * var(--haut-masque, 0px)); }
    html.entete-fige .page-head { position: static; margin-top: 0; padding: 0; box-shadow: none; clip-path: none; background: none; }
    html.entete-fige .page-head.est-colle::after { content: none; }
}

/* Bouton « Supprimer » remonté en haut de page, à la suite des autres actions */
.page-head .actions form[data-vers-haut] { margin: 0; }

/* --- Axia : guide d'utilisation (onglet Aide, mise en forme des réponses) et visite guidée --- */
.axia-onglets { gap: 2px; padding: 8px 6px 0; }
.axia-onglets button { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: .78rem; padding: 8px 2px 9px; overflow: hidden; text-overflow: ellipsis; }
.axia-onglets .axia-compte { margin-left: 2px; }
.axia-vue[data-vue="aide"] { overflow: hidden; }
.axia-aide-tete { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--bord, #e2e8f0); }
.axia-aide-filtre { width: 100%; box-sizing: border-box; }
.axia-aide-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; }
.axia-aide-rubrique { border-bottom: 1px solid var(--bord, #e2e8f0); }
.axia-aide-rubrique[hidden] { display: none; }
.axia-aide-rubrique summary { cursor: pointer; padding: 9px 4px; font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 8px; list-style: none; }
.axia-aide-rubrique summary::-webkit-details-marker { display: none; }
.axia-aide-rubrique summary::after { content: '›'; margin-left: auto; color: var(--texte-2); transition: transform .15s; }
.axia-aide-rubrique[open] summary::after { transform: rotate(90deg); }
.axia-aide-nb { font-size: .72rem; font-weight: 600; color: var(--texte-2); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.axia-aide-sujet { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--texte); font: inherit; font-size: .84rem; padding: 6px 8px 6px 14px; border-radius: 8px; cursor: pointer; }
.axia-aide-sujet:hover, .axia-aide-sujet:focus-visible { background: color-mix(in srgb, var(--a1) 12%, transparent); outline: none; }
.axia-aide-sujet[hidden] { display: none; }
.axia-aide-rubrique > .axia-aide-sujet:last-child { margin-bottom: 8px; }
.axia-etape { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
.axia-etape > b { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem;
    color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); margin-top: 1px; }
.axia-li { position: relative; padding-left: 14px; margin: 3px 0; }
.axia-li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--a2); }
.axia-astuce-msg { margin-top: 6px; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, #facc15 16%, transparent); font-size: .86em; }
.axia-espace { height: 6px; }
.axia-msg-corps code { font-size: .85em; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }

.axia-guide-anneau { position: fixed; z-index: 9998; pointer-events: none; border-radius: 12px; border: 3px solid #38bdf8;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .38), 0 0 22px 4px rgba(56, 189, 248, .75);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; animation: axia-guide-pulse 1.6s ease-in-out infinite; }
@keyframes axia-guide-pulse { 50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .38), 0 0 34px 10px rgba(79, 70, 229, .65); } }
.axia-guide-carte { position: fixed; z-index: 9999; width: min(340px, calc(100vw - 24px)); background: var(--carte); color: var(--texte);
    border-radius: 16px; padding: 12px 14px; border: 1px solid rgba(56, 189, 248, .55);
    box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .5), 0 0 30px -8px #38bdf8; animation: axia-panneau-entre .3s cubic-bezier(.34, 1.4, .64, 1); }
.axia-guide-tete { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.axia-guide-orbe { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a5f3fc, #38bdf8 45%, #4f46e5); box-shadow: 0 0 10px #38bdf8; }
.axia-guide-num { color: var(--texte-2); font-size: .76rem; }
.axia-guide-x { margin-left: auto; border: 0; background: none; color: var(--texte-2); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px; }
.axia-guide-x:hover { background: var(--surface-2); }
.axia-guide-texte { margin: 8px 0 10px; line-height: 1.45; font-size: .92rem; }
.axia-guide-note { margin-top: 6px; font-size: .8rem; color: var(--texte-2); }
.axia-guide-pied { display: flex; justify-content: flex-end; gap: 8px; }
.axia-guide-pied [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .axia-guide-anneau, .axia-guide-carte { animation: none; transition: none; } }
@media print { .axia-guide-anneau, .axia-guide-carte { display: none; } }

/* Modèles de devis : menu de la liste des devis, cartes de Paramètres › Modèles, choix sur le formulaire */
.modeles-menu .compteur { margin-left: 4px; }
.modeles-panneau { width: min(440px, calc(100vw - 32px)); padding: 14px; }
.modeles-filtre { width: 100%; margin-bottom: 8px; }
.modele-choix { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--rayon); color: var(--texte); text-decoration: none; border: 1px solid transparent; }
.modele-choix:hover, .modele-choix:focus-visible { background: var(--bleu-clair); border-color: var(--bleu); text-decoration: none; }
.modele-choix[hidden] { display: none; }
.modeles-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 8px; font-size: .88rem; }
/* Menu 🏢 : raccourcis sobres (texte normal, sans couleur de lien), en grille régulière */
.menu-raccourcis { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-evenly; gap: 2px 6px; }
.menu-raccourcis a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: calc(7px * var(--arrondi)); color: var(--texte); text-decoration: none; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.menu-raccourcis a span { flex: none; width: 1.3em; text-align: center; }
.menu-raccourcis a:hover, .menu-raccourcis a:focus-visible { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.menu-raccourcis a:only-child, .menu-raccourcis a:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
.modele-carte { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.modele-infos { flex: 1 1 320px; min-width: 0; display: grid; gap: 3px; }
.modele-nom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 1.02rem; }
.modele-depart { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modele-depart select { min-width: 240px; max-width: 100%; }
.enregistrer-modele .case { display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 640px) { .modele-depart select { min-width: 0; width: 100%; } .modele-carte .actions { width: 100%; } }
.export-menu { vertical-align: middle; }
.export-menu > summary.btn { margin: 0; }
.export-panneau.panneau-flottant { z-index: 60; }
.chrono-dialogue .confirm-actions { margin-top: 16px; }

/* Commandes : suivi d'avancement par étapes (frise comme dans la proposition commerciale) */
.frise-etapes { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.frise-etapes li { display: grid; justify-items: center; text-align: center; gap: 4px; position: relative; color: var(--texte-2); }
.frise-etapes li::before { content: ''; position: absolute; top: 21px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 4px; border-radius: 2px; background: var(--bord); }
.frise-etapes li:first-child::before { display: none; }
.frise-etapes li.faite::before, .frise-etapes li.courante::before { background: var(--bleu); }
.frise-rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; background: var(--fond); border: 2px solid var(--bord); color: var(--texte-2); }
.frise-etapes li.faite .frise-rond { background: #0d2b5c; border-color: #0d2b5c; color: #fff; }
.frise-etapes li.courante .frise-rond { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 0 0 5px var(--bleu-clair); }
.frise-etapes li strong { color: var(--texte); font-size: .95rem; }
.frise-etapes li.courante strong { color: var(--bleu); }
.frise-etapes li .small { line-height: 1.3; }
.suivi-passer { margin-top: 12px; }
.suivi-passer > summary { list-style: none; display: inline-flex; cursor: pointer; }
.suivi-passer > summary::-webkit-details-marker { display: none; }
.suivi-form { margin-top: 12px; padding: 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.suivi-historique { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bord); display: grid; gap: 8px; }
@media (max-width: 760px) {
    .frise-etapes { grid-template-columns: 1fr; gap: 10px; }
    .frise-etapes li { grid-template-columns: 44px 1fr; justify-items: start; text-align: left; column-gap: 10px; }
    .frise-etapes li .frise-rond { grid-row: span 2; }
    .frise-etapes li::before { display: none; }
}

.pay-prestataires { display: grid; gap: 8px; }
.pay-paypal { background: #ffc439; border-color: #ffc439; color: #111; }
.pay-paypal:hover { background: #f2b71f; border-color: #f2b71f; color: #111; }
.paiements-section { margin: 22px 0 10px; font-size: 1.1rem; scroll-margin-top: calc(var(--haut-colle, 120px) + 10px); }

/* ---------- Plusieurs entreprises (🏢) ---------- */
.societe-bouton { gap: 6px; }
.societe-libelle { font-size: .82rem; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--societe, var(--bleu)); padding-left: 6px; }
.societes-panneau { width: min(360px, calc(100vw - 32px)); padding: 14px; }
.societes-panneau form { margin: 0; }
.societe-choix { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--rayon); border: 1px solid transparent; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.societe-choix > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
button.societe-choix:hover, button.societe-choix:focus-visible { background: var(--bleu-clair); border-color: var(--bleu); }
.societe-choix.actif { background: var(--surface-2, var(--gris-clair)); cursor: default; }
.societe-pastille { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--societe, var(--bleu)); color: #fff; font-weight: 700; }
.societes-liste { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.societe-carte { border-top: 4px solid var(--societe, var(--bleu)); display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.societe-carte.societe-courante { box-shadow: 0 0 0 2px color-mix(in srgb, var(--societe, var(--bleu)) 35%, transparent); }
.societe-tete { display: flex; gap: 10px; align-items: center; }
.societe-infos { display: flex; flex-wrap: wrap; gap: 6px; }
.societe-nom { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.societes-utilisateurs { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 8px 0; }
.societes-utilisateurs .case { display: flex; gap: 8px; align-items: flex-start; }

/* ---------- Support CRM (🆘) ---------- */
.support-types { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.support-type { display: flex; gap: 12px; align-items: center; color: var(--texte); text-decoration: none; transition: border-color .15s, background .15s; }
.support-type:hover, .support-type:focus-visible { border-color: var(--bleu); background: var(--bleu-clair); text-decoration: none; }
.support-type > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.support-type-icone { font-size: 1.7rem; }
.support-choix-type { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.support-choix-type legend { font-weight: 600; margin-bottom: 6px; }
.support-type-choix { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; cursor: pointer; }
.support-type-choix > span { display: flex; flex-direction: column; }
.support-type-choix:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); }
.support-fil { display: grid; gap: 10px; }
.support-message { max-width: 80%; padding: 10px 12px; border-radius: var(--rayon); border: 1px solid var(--bord); }
.support-message-client { justify-self: end; background: var(--bleu-clair); border-color: color-mix(in srgb, var(--bleu) 30%, var(--carte)); }
.support-message-support { justify-self: start; background: var(--surface-2, var(--gris-clair)); }
.support-cle-valeur { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.support-cle-valeur code { font-size: 1rem; padding: 6px 10px; background: var(--carte); border-radius: var(--rayon); word-break: break-all; }
.support-recus { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 760px) { .support-message { max-width: 100%; } }
.support-types > .card { margin: 0; }
.societe-dialogue form > .champ, .societe-dialogue form > fieldset, .societe-dialogue form > p { margin: 0 0 12px; }
.societe-dialogue form > h2 { margin-bottom: 14px; }

/* ---------- Espace clients (pages publiques) ---------- */
.portail .sig-barre-in { flex-wrap: wrap; }
.portail-compte { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.portail-compte form { margin: 0; }
.portail-menu { max-width: 860px; margin: 0 auto; padding: 0 16px; border-bottom: 0; }
.portail-page h1 { margin: 0; }
.portail-titre { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.portail-connexion { max-width: 460px; width: 100%; margin: 24px auto; }
.portail-form { display: grid; gap: 14px; margin-top: 12px; }
.portail-code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-family: Consolas, monospace; }
.btn-lien { background: none; border: 0; color: var(--bleu); padding: 0; cursor: pointer; font: inherit; }
.portail-tuiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.portail-tuiles > .card { margin: 0; }
.portail-tuile { display: flex; flex-direction: column; gap: 4px; color: var(--texte); text-decoration: none; transition: border-color .15s, background .15s; }
.portail-tuile:hover, .portail-tuile:focus-visible { border-color: var(--bleu); background: var(--bleu-clair); text-decoration: none; }
.portail-tuile-icone { font-size: 1.8rem; }
.portail-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.portail-ligne:last-child { border-bottom: 0; }
.portail-commande + .portail-commande { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--bord); }
.portail-message { background: var(--bleu-clair); border-radius: var(--rayon); padding: 10px 14px; margin: 8px 0 0; }
.portail-comptes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.portail-comptes form { margin: 0; }
.portail-historique { margin-top: 8px; }
.portail-historique > div { margin: 6px 0; }
.espace-rubriques { display: grid; gap: 8px; }
.espace-rubriques .case { display: flex; gap: 8px; align-items: flex-start; }
.bulle-portail { margin-left: 6px; text-decoration: none; cursor: help; }
.bulle-portail:hover { text-decoration: none; filter: brightness(.96); }

/* ---------- Marges : acomptes et déductions ---------- */
.info-bulle { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: var(--bleu-clair); color: var(--bleu); font-size: .72rem; font-weight: 700; cursor: help; vertical-align: middle; }
.marge-facture .mf-acompte { min-width: 0; flex: 1; text-align: right; }
tr.ligne-deduction-acompte td { background: color-mix(in srgb, var(--bleu) 5%, var(--carte)); font-style: italic; }

/* ---------- Widget : avancement des commandes ---------- */
.avancement-etapes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.avancement-etape { font-size: .82rem; padding: 4px 10px; border-radius: var(--pilule); background: var(--bleu-clair); color: var(--texte); }
.avancement-etape strong { color: var(--bleu); margin-left: 2px; }
.avancement-etape.vide { background: var(--gris-clair); color: var(--texte-2); }
.avancement-etape.vide strong { color: var(--texte-2); }
.mini-frise { display: inline-flex; gap: 3px; align-items: center; }
.mini-frise span { width: 16px; height: 6px; border-radius: 3px; background: var(--bord); }
.mini-frise span.faite { background: #0d2b5c; }
.mini-frise span.courante { background: var(--bleu); box-shadow: 0 0 0 2px var(--bleu-clair); }
.support-pieces { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.support-piece { font-size: .82rem; padding: 3px 9px; border-radius: var(--pilule); background: var(--carte); border: 1px solid var(--bord); color: var(--texte); text-decoration: none; }
a.support-piece:hover { border-color: var(--bleu); color: var(--bleu); }
.label-champ { display: block; font-weight: 500; margin-bottom: 6px; }
.support-depot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 2px dashed var(--bord); border-radius: var(--rayon); padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.support-depot:hover, .support-depot.survol { border-color: var(--bleu); background: var(--bleu-clair); }
.support-piece button { border: 0; background: none; color: var(--texte-2); cursor: pointer; padding: 0 0 0 4px; font-size: 1rem; line-height: 1; }

/* Restauration : barre de progression en panneau flottant (la page reste bloquée jusqu'à la fin) */
.sv-progression.sv-flottant { position: fixed; z-index: 1200; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); padding: 18px 20px; box-shadow: var(--ombre-forte); }
body.sv-restauration-en-cours::after { content: ''; position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.sv-progression.sv-flottant::before { content: '♻️ Restauration du CRM — ne fermez pas la page'; display: block; font-weight: 650; margin-bottom: 10px; }

/* ---------- Tableau de bord : menu « ⚡ Accès rapide » ---------- */
.acces-panneau { width: min(420px, calc(100vw - 32px)); padding: 14px; }
.acces-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.acces-lien { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--rayon); border: 1px solid transparent; color: var(--texte); text-decoration: none; font-size: .92rem; }
.acces-lien:hover, .acces-lien:focus-visible { background: var(--bleu-clair); border-color: var(--bleu); text-decoration: none; }
.acces-groupe { border: 0; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.acces-groupe legend { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); font-weight: 600; margin-bottom: 4px; }
.acces-groupe .case { display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.acces-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 760px) { .acces-liste, .acces-groupe { grid-template-columns: 1fr; } }

/* ==========================================================================================================
   Axia : avatars (Personnalisation › ✨ Mon assistante) et petits gestes de vie (Paramètres › Axia › 🎬 Vie)
   Les avatars sont des dessins CSS originaux posés sur l'orbe ; le halo garde les couleurs de l'humeur.
   ========================================================================================================== */
.axia-oreilles, .axia-antenne, .axia-masque, .axia-bec, .axia-joues, .axia-moustaches, .axia-bas, .axia-pensee { display: none; }
.axia-oreilles i, .axia-masque i, .axia-joues i, .axia-moustaches i, .axia-bas i, .axia-pensee i { position: absolute; display: block; }
.axia-oreilles, .axia-bas, .axia-antenne, .axia-pensee { position: absolute; inset: 0; pointer-events: none; }
.axia-oreilles { z-index: 0; }
.axia-bas { z-index: 1; }
.axia-antenne { z-index: 0; }
.axia-masque, .axia-joues, .axia-moustaches { position: absolute; inset: 0; pointer-events: none; }
.axia-masque { z-index: 0; }
.axia-visage { z-index: 1; }

/* Réflexion : petites bulles de pensée, pour tous les avatars */
.axia-pensee { z-index: 3; }
.axia[data-humeur="reflexion"] .axia-pensee { display: block; }
.axia-pensee i { width: 7px; height: 7px; border-radius: 50%; background: var(--a3); box-shadow: 0 0 6px var(--a1); right: -6px; top: -4px; opacity: 0; animation: axia-pensee 1.8s ease-in-out infinite; }
.axia-pensee i:nth-child(2) { width: 9px; height: 9px; right: -14px; top: -14px; animation-delay: .3s; }
.axia-pensee i:nth-child(3) { width: 12px; height: 12px; right: -24px; top: -28px; animation-delay: .6s; }

/* Yeux « dessinés » pour les animaux */
[data-avatar="chat"] .axia-yeux i, [data-avatar="renard"] .axia-yeux i, [data-avatar="chouette"] .axia-yeux i,
[data-avatar="panda"] .axia-yeux i, [data-avatar="fantome"] .axia-yeux i {
    background: #1f2937; box-shadow: inset 1.5px 1.5px 0 0 rgba(255, 255, 255, .85); }
[data-avatar="chat"] .axia-bouche, [data-avatar="renard"] .axia-bouche, [data-avatar="panda"] .axia-bouche { border-color: #1f2937; opacity: .8; width: 9px; height: 4px; }
[data-avatar="chat"] .axia-reflet, [data-avatar="renard"] .axia-reflet, [data-avatar="panda"] .axia-reflet, [data-avatar="chouette"] .axia-reflet { opacity: .4; }
[data-avatar]:not([data-avatar="orbe"]):not([data-avatar="goutte"]) .axia-remous { opacity: .25; }

/* 🐱 Minou */
[data-avatar="chat"] .axia-sphere { background: radial-gradient(circle at 32% 28%, #fef3c7 0%, #fbbf24 32%, #d97706 78%, #92400e 100%); }
[data-avatar="chat"] .axia-oreilles, [data-avatar="renard"] .axia-oreilles { display: block; }
[data-avatar="chat"] .axia-oreilles i, [data-avatar="renard"] .axia-oreilles i {
    top: -15%; width: 38%; height: 42%; clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(to bottom, #f9a8d4 0 30%, #d97706 30%); transform-origin: 50% 100%; }
[data-avatar="chat"] .axia-oreilles i:first-child, [data-avatar="renard"] .axia-oreilles i:first-child { left: 4%; transform: rotate(-16deg); animation: axia-oreille 7s ease-in-out infinite; }
[data-avatar="chat"] .axia-oreilles i:last-child, [data-avatar="renard"] .axia-oreilles i:last-child { right: 4%; transform: rotate(16deg); }
[data-avatar="chat"] .axia-moustaches { display: block; z-index: 2; }
[data-avatar="chat"] .axia-moustaches i { top: 60%; width: 28%; height: 5px; border-top: 1.5px solid rgba(255, 255, 255, .9); border-bottom: 1.5px solid rgba(255, 255, 255, .9); }
[data-avatar="chat"] .axia-moustaches i:first-child { left: 2%; transform: rotate(6deg); }
[data-avatar="chat"] .axia-moustaches i:last-child { right: 2%; transform: rotate(-6deg); }
[data-avatar="chat"] .axia-bec, [data-avatar="renard"] .axia-bec, [data-avatar="panda"] .axia-bec {
    display: block; width: 7px; height: 5px; border-radius: 50% 50% 60% 60%; background: #1f2937; margin-top: -1px; }
[data-avatar="chat"] .axia-bec { background: #f472b6; }

/* 🦊 Renard */
[data-avatar="renard"] .axia-sphere { background: radial-gradient(circle at 32% 28%, #fed7aa 0%, #fb923c 34%, #ea580c 72%, #9a3412 100%); }
[data-avatar="renard"] .axia-oreilles i { width: 34%; height: 50%; top: -22%; background: linear-gradient(to bottom, #1f2937 0 22%, #ea580c 22%); }
[data-avatar="renard"] .axia-joues { display: block; z-index: 0; }
[data-avatar="renard"] .axia-joues i { bottom: -6%; width: 54%; height: 46%; border-radius: 50%; background: #fff7ed; }
[data-avatar="renard"] .axia-joues i:first-child { left: -4%; }
[data-avatar="renard"] .axia-joues i:last-child { right: -4%; }

/* 🦉 Chouette */
[data-avatar="chouette"] .axia-sphere { background: radial-gradient(circle at 32% 28%, #e7d3b0 0%, #a47148 40%, #6b4226 100%); }
[data-avatar="chouette"] .axia-masque { display: block; }
[data-avatar="chouette"] .axia-masque i { top: 22%; width: 40%; height: 40%; border-radius: 50%; background: #fef9ec; box-shadow: 0 0 0 2px #f59e0b; }
[data-avatar="chouette"] .axia-masque i:first-child { left: 9%; }
[data-avatar="chouette"] .axia-masque i:last-child { right: 9%; }
[data-avatar="chouette"] .axia-yeux { gap: calc(var(--taille-orbe) * .3); margin-top: -2px; }
[data-avatar="chouette"] .axia-yeux i { width: 9px; height: 9px; }
[data-avatar="chouette"] .axia-bec { display: block; width: 8px; height: 8px; background: #f59e0b; clip-path: polygon(0 0, 100% 0, 50% 100%); margin-top: -3px; }
[data-avatar="chouette"] .axia-bouche { display: none; }
[data-avatar="chouette"] .axia-oreilles { display: block; }
[data-avatar="chouette"] .axia-oreilles i { top: -10%; width: 24%; height: 30%; background: #6b4226; clip-path: polygon(0 0, 100% 100%, 0 100%); }
[data-avatar="chouette"] .axia-oreilles i:first-child { left: 10%; transform: rotate(-8deg); }
[data-avatar="chouette"] .axia-oreilles i:last-child { right: 10%; transform: scaleX(-1) rotate(-8deg); }

/* 🐼 Panda */
[data-avatar="panda"] .axia-sphere { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f1f5f9 50%, #94a3b8 100%); }
[data-avatar="panda"] .axia-oreilles { display: block; }
[data-avatar="panda"] .axia-oreilles i { top: -8%; width: 34%; height: 34%; border-radius: 50%; background: #1f2937; }
[data-avatar="panda"] .axia-oreilles i:first-child { left: -2%; }
[data-avatar="panda"] .axia-oreilles i:last-child { right: -2%; }
[data-avatar="panda"] .axia-masque { display: block; }
[data-avatar="panda"] .axia-masque i { top: 30%; width: 28%; height: 34%; border-radius: 50%; background: #1f2937; }
[data-avatar="panda"] .axia-masque i:first-child { left: 18%; transform: rotate(28deg); }
[data-avatar="panda"] .axia-masque i:last-child { right: 18%; transform: rotate(-28deg); }
[data-avatar="panda"] .axia-yeux i { background: #fff; box-shadow: none; width: 6px; height: 7px; }

/* 🤖 Robotine */
[data-avatar="robot"] .axia-sphere, [data-avatar="robot"] .axia-halo { border-radius: 28%; }
[data-avatar="robot"] .axia-sphere { background: linear-gradient(160deg, #f1f5f9 0%, #94a3b8 55%, #475569 100%); }
[data-avatar="robot"] .axia-yeux { gap: 9px; padding: 4px 6px; border-radius: 6px; background: #0f172a; }
[data-avatar="robot"] .axia-yeux i { width: 8px; height: 6px; border-radius: 2px; background: var(--a1); box-shadow: 0 0 8px var(--a1); }
[data-avatar="robot"] .axia-bouche { opacity: 1; width: 16px; height: 4px; border: 0; border-radius: 2px;
    background: repeating-linear-gradient(90deg, #334155 0 2px, transparent 2px 4px); }
[data-avatar="robot"] .axia-antenne { display: block; }
[data-avatar="robot"] .axia-antenne::before { content: ""; position: absolute; left: 50%; top: -18%; width: 3px; height: 22%; margin-left: -1.5px; background: #64748b; }
[data-avatar="robot"] .axia-antenne i { position: absolute; left: 50%; top: -28%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: var(--a1); box-shadow: 0 0 10px var(--a1); animation: axia-voyant 2.4s ease-in-out infinite; }
.axia[data-humeur="reflexion"][data-avatar="robot"] .axia-antenne i { animation-duration: .5s; }
[data-avatar="robot"] .axia-reflet { border-radius: 30%; }

/* 👻 Petit fantôme */
[data-avatar="fantome"] .axia-sphere { border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f5f3ff 45%, #c4b5fd 100%); opacity: .95; }
[data-avatar="fantome"] .axia-bas { display: block; }
[data-avatar="fantome"] .axia-bas i { bottom: -9%; width: 34%; height: 24%; border-radius: 50%; background: #ddd6fe; }
[data-avatar="fantome"] .axia-bas i:nth-child(1) { left: 0; }
[data-avatar="fantome"] .axia-bas i:nth-child(2) { left: 33%; background: #d8ccfd; animation: axia-vague 1.6s ease-in-out infinite; }
[data-avatar="fantome"] .axia-bas i:nth-child(3) { right: 0; }
[data-avatar="fantome"] .axia-bouche { opacity: 1; width: 7px; height: 8px; border: 2px solid #1f2937; border-radius: 50%; }
[data-avatar="fantome"] .axia-joues { display: block; z-index: 2; }
[data-avatar="fantome"] .axia-joues i { top: 56%; width: 16%; height: 10%; border-radius: 50%; background: rgba(244, 114, 182, .55); }
[data-avatar="fantome"] .axia-joues i:first-child { left: 14%; }
[data-avatar="fantome"] .axia-joues i:last-child { right: 14%; }
.axia[data-avatar="fantome"] .axia-orbe { animation: axia-fantome 5s ease-in-out infinite; }

/* 💧 Goutte */
[data-avatar="goutte"] .axia-sphere { border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; animation: axia-respire 4.2s ease-in-out infinite, axia-arc 14s linear infinite; }
[data-avatar="goutte"] .axia-antenne { display: block; }
[data-avatar="goutte"] .axia-antenne i { position: absolute; left: 50%; top: -20%; width: 46%; height: 46%; margin-left: -23%;
    background: var(--a1); clip-path: polygon(50% 0, 92% 100%, 8% 100%); animation: axia-arc 14s linear infinite; }

/* Mini avatar de l'en-tête du panneau */
[data-avatar="robot"] .axia-mini .axia-sphere { border-radius: 28%; }
[data-avatar="fantome"] .axia-mini .axia-sphere { border-radius: 50% 50% 22% 22%; }

/* Aperçus (Paramètres, Personnalisation) */
.axia-apercu { --a1: #38bdf8; --a2: #4f46e5; --a3: #a5f3fc; --ox: 0px; --oy: 0px; --taille-orbe: 58px;
    position: relative; display: block; width: var(--taille-orbe); height: var(--taille-orbe); margin: 14px auto 6px; }
.axia-apercu .axia-yeux { gap: 10px; }
.axia-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.axia-avatar-choix { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px 10px; border: 1.5px solid var(--bord);
    border-radius: 14px; cursor: pointer; text-align: center; background: var(--carte); transition: border-color .2s, box-shadow .2s, transform .2s; }
.axia-avatar-choix:hover { transform: translateY(-2px); border-color: var(--bleu); }
.axia-avatar-choix:hover .axia-apercu { animation: axia-hop 1s cubic-bezier(.34, 1.56, .64, 1); }
.axia-avatar-choix input { position: absolute; opacity: 0; pointer-events: none; }
.axia-avatar-choix:has(input:checked) { border-color: var(--bleu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 22%, transparent); }
.axia-avatar-choix:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--bleu); color: #fff; font: 700 12px/20px system-ui, sans-serif; }
.axia-avatar-choix:has(input:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 2px; }
.axia-avatar-choix strong { font-size: .88rem; }
.axia-avatar-choix .small { line-height: 1.25; }
.axia-vie-cases { display: grid; gap: 8px; margin-top: 10px; }
.axia-perso-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }

/* Vivacité */
.axia[data-vivacite="calme"] .axia-orbe { animation-duration: 10s; }
.axia[data-vivacite="calme"] .axia-halo { animation-duration: 14s; }
.axia[data-vivacite="vivant"] .axia-orbe { animation-duration: 3.6s; }
.axia[data-vivacite="vivant"] .axia-halo { animation-duration: 4.5s; }

/* Gestes au repos et réveil */
.axia-hop .axia-orbe { animation: axia-hop 1s cubic-bezier(.34, 1.56, .64, 1); }
.axia-penche .axia-orbe { animation: axia-penche 1.3s ease-in-out; }
.axia-tournoie .axia-orbe { animation: axia-pirouette 1.2s cubic-bezier(.34, 1.56, .64, 1); }
.axia-etire .axia-orbe { animation: axia-etire 1.2s ease-in-out; }
.axia-saute .axia-orbe { animation: axia-saute 1.2s cubic-bezier(.34, 1.56, .64, 1); }
.axia-reveil .axia-orbe { animation: axia-reveil 1.1s cubic-bezier(.34, 1.56, .64, 1); }
.axia-clin .axia-yeux i:first-child { animation: axia-clin .9s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .axia[data-sobre] :is(.axia-orbe, .axia-halo, .axia-sphere, .axia-remous, .axia-antenne i, .axia-oreilles i, .axia-bas i) { animation: none !important; }
}

@keyframes axia-pensee { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.6); } 40%, 70% { opacity: 1; transform: none; } }
@keyframes axia-oreille { 0%, 88%, 100% { transform: rotate(-16deg); } 92% { transform: rotate(-30deg); } 96% { transform: rotate(-10deg); } }
@keyframes axia-voyant { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes axia-vague { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes axia-fantome { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: -2px -6px; rotate: -4deg; } 50% { translate: 0 -9px; rotate: 0deg; } 75% { translate: 2px -5px; rotate: 4deg; } }
@keyframes axia-arc { to { filter: hue-rotate(360deg); } }
@keyframes axia-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-12px) scale(1.05, .95); } 60% { transform: translateY(0) scale(1.08, .92); } 80% { transform: translateY(-3px); } }
@keyframes axia-penche { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } }
@keyframes axia-etire { 0%, 100% { transform: scale(1); } 40% { transform: scale(.9, 1.16); } 70% { transform: scale(1.1, .9); } }
@keyframes axia-saute { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-22px) rotate(-180deg); } 70% { transform: translateY(0) rotate(-360deg) scale(1.1, .9); } }
@keyframes axia-reveil { 0% { transform: scale(.9); } 40% { transform: scale(1.2) rotate(8deg); } 70% { transform: scale(.96) rotate(-6deg); } 100% { transform: none; } }
@keyframes axia-clin { 0%, 100% { transform: scaleY(1); } 30%, 60% { transform: scaleY(.1); } }

/* ==========================================================================================================
   🛰️ Super console : CRM hébergés et CRM installés chez les clients
   ========================================================================================================== */
.console-filtre { min-width: 230px; }
.console-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.console-chiffre { padding: 6px 12px; border-radius: 999px; background: var(--carte); border: 1px solid var(--bord); font-size: .88rem; color: var(--texte-2); }
.console-chiffre strong { color: var(--texte); }
.console-ok strong { color: var(--vert); }
.console-alerte { background: var(--orange-clair); border-color: var(--orange); }
.console-alerte strong { color: var(--orange); }
.console-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 10px; }
.console-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.console-carte { border-top: 4px solid var(--societe, var(--bleu)); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.console-carte.console-courante { box-shadow: 0 0 0 2px color-mix(in srgb, var(--societe, var(--bleu)) 35%, transparent); }
.console-installe { --societe: var(--vert); }
.console-installe.console-eteint { --societe: #94a3b8; }
.console-installe.console-a-surveiller { --societe: var(--orange); }
.console-tete { display: flex; gap: 10px; align-items: center; }
.console-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.console-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-url { color: var(--texte-2); overflow-wrap: anywhere; margin-top: -4px; }
.console-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 0; }
.console-stats div { background: var(--fond); border-radius: 8px; padding: 6px 9px; }
.console-stats dt { font-size: .72rem; color: var(--texte-2); }
.console-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.console-alertes { list-style: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--orange-clair); color: #9a3412; font-size: .84rem; display: grid; gap: 2px; }
.console-carte .actions { margin-top: auto; flex-wrap: wrap; flex-grow: 0; align-content: flex-end; }
.console-voyant { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px color-mix(in srgb, #94a3b8 25%, transparent); }
.console-voyant-ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: console-pouls 2.4s ease-in-out infinite; }
@keyframes console-pouls { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .08); } }
.console-vide ol li { line-height: 1.45; }
.console-bandeau { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--rayon, 10px);
    background: linear-gradient(90deg, #312e81, #1e40af); color: #fff; font-weight: 500; }
.console-bandeau span { flex: 1; }
.console-bandeau .btn { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.societes-panneau .societe-choix:disabled { opacity: .6; cursor: not-allowed; }
.societes-panneau .console-voyant { margin: 0 10px 0 10px; }
.console-carte[hidden] { display: none; }
.page-head .actions .console-filtre { width: auto; flex: 0 1 260px; }
.console-carte .btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
/* Apparence : sections sur une ou deux lignes, jamais de barre de défilement */
.apparence-onglets { flex-wrap: wrap; overflow: visible; row-gap: 0; justify-content: center; }
.apparence-onglets a { padding: 9px 11px; }
.console-bandeau { gap: 10px 14px; }
.console-bandeau-icone { font-size: 1.3rem; }
.console-bandeau-texte { display: flex; flex-direction: column; line-height: 1.35; }
.console-bandeau-detail { font-size: .82rem; font-weight: 400; opacity: .85; }
.console-bandeau form { margin: 0; }
.console-bandeau .console-bandeau-quitter { background: #fff; color: #1e3a8a; border-color: #fff; font-weight: 600; }
.console-bandeau > span { flex: none; }
.console-bandeau > .console-bandeau-texte { flex: 1; min-width: 220px; text-align: left; }
.console-bandeau-texte span { flex: none; }
.apparence-onglets { justify-content: flex-start; gap: 0 2px; }
.apparence-onglets a { padding: 9px 8px; font-size: .95rem; }

/* ==========================================================================================================
   ⚙️ Paramètres : menu rangé en familles de même largeur, centré, sans vide
   ========================================================================================================== */
.parametres-menu { display: grid; grid-template-columns: repeat(var(--familles, 4), minmax(0, 1fr)); gap: 0;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.parametres-famille { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 14px; }
.parametres-famille + .parametres-famille { border-left: 1px solid var(--bord); }
.parametres-famille-titre { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2);
    padding: 0 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--bord); display: flex; gap: 6px; align-items: center; }
.parametres-famille a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--texte); font-weight: 500;
    font-size: .93rem; line-height: 1.25; text-decoration: none; transition: background .15s, color .15s; position: relative; }
.parametres-famille a:hover { background: var(--fond); text-decoration: none; }
.parametres-famille a.actif { background: color-mix(in srgb, var(--bleu) 11%, var(--carte)); color: var(--bleu-fonce); font-weight: 600; }
.parametres-famille a.actif::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--bleu); }
.parametres-lien-icone { width: 20px; text-align: center; flex: none; }
.parametres-lien-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parametres-famille .compteur { margin-left: auto; }
.parametres-titre { text-align: left; }
@media (max-width: 1100px) {
    .parametres-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .parametres-famille:nth-child(odd) { border-left: 0; }
    .parametres-famille:nth-child(n+3) { border-top: 1px solid var(--bord); }
    /* 5e famille seule sur sa rangée : pleine largeur, ses réglages sur 2 colonnes (aucun vide) */
    .parametres-famille:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    .parametres-famille:last-child:nth-child(odd) .parametres-famille-titre { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .parametres-menu { grid-template-columns: 1fr; }
    .parametres-famille:last-child:nth-child(odd) { display: flex; }
    .parametres-famille + .parametres-famille { border-left: 0; border-top: 1px solid var(--bord); }
}
/* Fonctionnalités : 8 menus sur 2 rangées de 4, options sur 3 colonnes pleines */
@media (min-width: 1100px) { .fonctions-menus, .fonctions-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fonctions-connexions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Barre d'actions centrée (tableau de bord) : titre centré au-dessus, boutons groupés au centre de la page */
.page-head.page-head-centree { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.page-head-centree > div:first-child { width: 100%; }
.barre-actions { justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; }
.barre-actions .btn, .barre-actions > details > summary.btn { min-height: 38px; }
.axia-vie-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.axia-vie-cases .case { display: flex; align-items: flex-start; gap: 10px; }
.axia-vie-cases .case input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
@media (max-width: 760px) { .axia-vie-cases { grid-template-columns: 1fr; } }

/* ---- Axia : vie avancée (Paramètres › Axia › 🎬 Vie) */
.axia { transition: translate 2.6s cubic-bezier(.45, .05, .35, 1); }
.axia-orbe { rotate: var(--penche, 0deg); }
.axia-curieuse .axia-orbe { transition: transform .25s, rotate .35s cubic-bezier(.34, 1.56, .64, 1); }
.axia-marche .axia-orbe { animation: axia-marche .45s ease-in-out infinite; }
.axia-marche .axia-yeux i { transform: translateX(-2px); }
.axia-retour .axia-yeux i { transform: translateX(2px); }
.axia-salto .axia-orbe { animation: axia-salto 1.35s cubic-bezier(.34, 1.3, .64, 1); }
.axia-toupie .axia-orbe { animation: axia-toupie 1.45s cubic-bezier(.45, .05, .35, 1); }
.axia-danse .axia-orbe { animation: axia-danse 2.5s ease-in-out; }
.axia-gelee .axia-orbe { animation: axia-gelee 1.1s ease-in-out; }
.axia-cache .axia-orbe { animation: axia-cache 2.1s cubic-bezier(.34, 1.56, .64, 1); }
.axia-rebonds .axia-orbe { animation: axia-rebonds 1.8s cubic-bezier(.3, .7, .4, 1); }
/* Mimiques */
[data-mimique="coeur"] .axia-yeux i, [data-mimique="etoiles"] .axia-yeux i { background: none !important; box-shadow: none !important; animation: none !important;
    width: auto; height: auto; font-style: normal; display: grid; place-items: center; }
[data-mimique="coeur"] .axia-yeux i::before { content: "♥"; color: #f43f5e; font: 700 12px/1 system-ui, sans-serif; text-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: axia-pouls .7s ease-in-out infinite; display: block; }
[data-mimique="etoiles"] .axia-yeux i::before { content: "★"; color: #facc15; font: 700 12px/1 system-ui, sans-serif; text-shadow: 0 0 6px rgba(250, 204, 21, .8); animation: axia-tourne 1.6s linear infinite; display: block; }
[data-mimique="surprise"] .axia-yeux i { height: 9px; width: 9px; border-radius: 50%; animation: none; }
[data-mimique="surprise"] .axia-bouche { opacity: 1; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; color: #fff; }
[data-mimique="clin"] .axia-yeux i:first-child { transform: scaleY(.12); }
/* Confettis */
.axia-confettis { position: fixed; z-index: 1300; width: 0; height: 0; pointer-events: none; }
.axia-confettis i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: axia-confetti 1.8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes axia-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--rot)); } }
@keyframes axia-marche { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
@keyframes axia-salto { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(4px) scale(1.12, .86); } 55% { transform: translateY(-46px) rotate(-200deg); } 85% { transform: translateY(0) rotate(-360deg) scale(1.12, .88); } 100% { transform: translateY(0) rotate(-360deg); } }
@keyframes axia-toupie { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(540deg) scale(.82); } 100% { transform: rotate(1080deg) scale(1); } }
@keyframes axia-danse { 0%, 100% { transform: none; } 12% { transform: translateX(-10px) rotate(-14deg); } 25% { transform: translateX(10px) rotate(14deg) translateY(-6px); } 37% { transform: translateX(-10px) rotate(-14deg); } 50% { transform: translateY(-14px) rotate(0) scale(1.1); } 62% { transform: translateX(10px) rotate(16deg); } 75% { transform: translateX(-8px) rotate(-12deg) translateY(-4px); } 88% { transform: scale(1.12, .9); } }
@keyframes axia-gelee { 0%, 100% { transform: scale(1, 1); } 20% { transform: scale(1.25, .75); } 40% { transform: scale(.8, 1.2); } 60% { transform: scale(1.12, .9); } 80% { transform: scale(.96, 1.04); } }
@keyframes axia-cache { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(0) rotate(-90deg); opacity: 0; } 60% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: scale(1); } }
@keyframes axia-rebonds { 0% { transform: translateY(0); } 15% { transform: translateY(-34px); } 30% { transform: translateY(0) scale(1.15, .85); } 45% { transform: translateY(-18px); } 60% { transform: translateY(0) scale(1.08, .92); } 72% { transform: translateY(-7px); } 85%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .axia[data-sobre] { transition: none; } }
/* Fenêtres de confirmation : pictogramme au trait dans un disque teinté */
.confirm-icone { color: var(--bleu); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bleu) 8%, transparent); }
.confirm-icone svg { display: block; }
.confirm-danger .confirm-icone { color: var(--rouge); box-shadow: 0 0 0 6px color-mix(in srgb, var(--rouge) 8%, transparent); }
.console-fin { text-align: center; }
.console-fin h1 { margin: 4px 0 6px; font-size: 1.3rem; }

/* Apparence : sections centrées */
.apparence-onglets { justify-content: center; }
/* Axia › 🎬 Vie : sur toute la largeur de la page, réglages en 4 colonnes, avatars sur une rangée */
.axia-vie-reglages { grid-column: 1 / -1; }
@media (min-width: 1000px) {
    .axia-vie-reglages .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .axia-vie-reglages .axia-vie-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .axia-vie-reglages .axia-avatars { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* 🔑 Robustesse du mot de passe */
.mdp-force { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.mdp-jauge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mdp-jauge i { height: 6px; border-radius: 3px; background: var(--bord); transition: background .25s; }
.mdp-niveau { font-size: .8rem; font-weight: 600; color: var(--texte-2); min-width: 92px; text-align: right; }
.mdp-regles { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--texte-2); }
.mdp-regles li::before { content: "○"; margin-right: 5px; color: var(--texte-2); }
.mdp-regles li.ok { color: var(--vert); }
.mdp-regles li.ok::before { content: "✓"; color: var(--vert); font-weight: 700; }
.mdp-force[data-niveau="0"] .mdp-jauge i:nth-child(-n+1) { background: var(--rouge); }
.mdp-force[data-niveau="1"] .mdp-jauge i:nth-child(-n+1) { background: #f97316; }
.mdp-force[data-niveau="2"] .mdp-jauge i:nth-child(-n+2) { background: #eab308; }
.mdp-force[data-niveau="3"] .mdp-jauge i:nth-child(-n+3) { background: #22c55e; }
.mdp-force[data-niveau="4"] .mdp-jauge i { background: var(--vert); }
.mdp-force[data-niveau="0"] .mdp-niveau { color: var(--rouge); }
.mdp-force[data-niveau="3"] .mdp-niveau, .mdp-force[data-niveau="4"] .mdp-niveau { color: var(--vert); }
.mdp-carte.mdp-a-changer { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent); }
@media (min-width: 900px) { .mdp-champs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.mdp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.mdp-options .case { display: flex; align-items: flex-start; gap: 10px; }
.mdp-options .case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }

/* ==========================================================================================================
   ⚡ Workflows
   ========================================================================================================== */
.wf-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 10px; }
.wf-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wf-modeles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .wf-liste, .wf-modeles { grid-template-columns: 1fr; } }
@media (min-width: 1001px) and (max-width: 1180px) { .wf-modeles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wf-carte, .wf-modele { margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--bleu); }
.wf-carte.wf-pause { border-top-color: var(--bord); }
.wf-carte.wf-pause .wf-frise, .wf-carte.wf-pause .wf-nom { opacity: .65; }
.wf-modele { border-top-color: color-mix(in srgb, var(--bleu) 45%, var(--bord)); }
.wf-modele.wf-indisponible { opacity: .6; }
.wf-tete { display: flex; align-items: center; gap: 12px; }
.wf-icone { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--bleu-clair); }
.wf-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wf-description { margin: 0; }
.wf-conditions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--texte-2); }
.wf-frise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wf-frise li { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: 999px; background: var(--fond); font-size: .8rem; overflow: hidden; }
.wf-frise li + li::before { content: none; }
.wf-delai { background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 700; padding: 3px 8px; white-space: nowrap; }
.wf-action { padding: 3px 9px; white-space: nowrap; }
.wf-pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bord); }
.wf-pied-centre { justify-content: center; }
.wf-pied form { margin: 0; }
.wf-boutons { margin-left: auto; display: inline-flex; gap: 6px; }
.wf-interrupteur { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 4px; font: inherit; color: var(--texte-2); }
.wf-interrupteur span { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--bord); transition: background .2s; }
.wf-interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.wf-interrupteur.actif span { background: var(--vert); }
.wf-interrupteur.actif span::after { transform: translateX(18px); }
.wf-interrupteur em { font-style: normal; font-size: .8rem; font-weight: 600; }
.wf-interrupteur.actif em { color: var(--vert); }
.wf-vide { display: flex; gap: 14px; align-items: center; }
.wf-vide-icone { font-size: 30px; }
.wf-ligne { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bord); font-size: .88rem; align-items: baseline; }
.wf-ligne:last-child { border-bottom: 0; }
.wf-ligne-quand { flex: none; width: 82px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
/* Formulaire */
.wf-etapes-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; align-items: stretch; }
.wf-etapes-grille > .card { margin: 0; }
@media (max-width: 860px) { .wf-etapes-grille { grid-template-columns: 1fr; } }
.wf-bloc h2 { display: flex; align-items: center; gap: 10px; }
.wf-pastille { width: 28px; height: 28px; border-radius: 50%; background: var(--bleu); color: #fff; display: inline-grid; place-items: center; font-size: .9rem; flex: none; }
.wf-parametre { display: flex; align-items: center; gap: 10px; }
.wf-parametre input { max-width: 110px; }
.wf-etapes { display: grid; gap: 12px; counter-reset: etape; }
.wf-etape { margin: 0; border-left: 4px solid var(--bleu); background: var(--surface-2, var(--carte)); }
.wf-etape-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wf-etape-numero { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bleu); color: var(--bleu); font-weight: 700; display: grid; place-items: center; font-size: .85rem; flex: none; }
.wf-etape-quand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-etape-quand .wf-delai-champ { width: 80px; }
.wf-etape-quand select { width: auto; }
.label-discret { font-weight: 600; color: var(--texte-2); margin: 0; }
.wf-action-choix { flex: 1; min-width: 220px; max-width: 320px; font-weight: 600; }
.wf-etape-retirer { margin-left: auto; }
.wf-etape-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 12px; }
.wf-etape-champs .champ { margin: 0; }
.wf-etape-champs .champ-large { grid-column: span 2; }
.wf-etape-champs .champ-plein { grid-column: 1 / -1; }
.wf-etape-champs [hidden] { display: none !important; }
@media (max-width: 860px) { .wf-etape-champs { grid-template-columns: 1fr; } .wf-etape-champs .champ-large { grid-column: auto; } }
.wf-ajouter { display: flex; justify-content: center; margin: 14px 0 6px; }
.wf-variables { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding-top: 10px; border-top: 1px dashed var(--bord); margin-top: 10px; }
.wf-variable { border: 1px solid var(--bord); background: var(--fond); border-radius: 6px; padding: 2px 7px; font: 600 .78rem/1.4 ui-monospace, Consolas, monospace; color: var(--bleu-fonce); cursor: pointer; }
.wf-variable:hover { background: var(--bleu-clair); }
.wf-validation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
[data-wf-parametre][hidden], [data-wf-condition][hidden] { display: none !important; }
.parametres-famille a.parametres-option-off { color: var(--texte-2); opacity: .6; }
.parametres-famille a.parametres-option-off::after { content: "option"; margin-left: auto; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); border: 1px solid var(--bord); border-radius: 999px; padding: 0 6px; }
.wf-liste > .card, .wf-modeles > .card { margin: 0 !important; }
.wf-ligne-quand { width: 96px; white-space: nowrap; }
.wf-etape-champs .champ-sujet { grid-column: span 3; }
.wf-etape:has([data-wf-action] option[value="email_client"]:checked) .champ-sujet { grid-column: 1 / -1; }
@media (max-width: 860px) { .wf-etape-champs .champ-sujet { grid-column: auto; } }
@media (min-width: 900px) { .mdp-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wf-explication { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bleu-clair); color: var(--bleu-fonce); }

/* 🧭 Boutons d'itinéraire (fiche client, intervention) : grands et faciles à toucher sur téléphone */
.itineraires { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.itineraire { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; border: 1px solid var(--bord);
    background: var(--carte); color: var(--texte); font-size: .85rem; font-weight: 600; text-decoration: none; min-height: 34px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.itineraire:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--ombre); }
.itineraire svg { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; color: #fff; }
.itineraire svg[hidden], .itineraire img[hidden] { display: none; }
.itineraire-logo { flex: none; width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.itineraire-waze svg { background: #1fb8e6; }
.itineraire-google svg { background: #34a853; }
.itineraire-apple svg { background: #6b7280; }
.itineraire-waze:hover { border-color: #1fb8e6; }
.itineraire-google:hover { border-color: #34a853; }
.itineraire-apple:hover { border-color: #6b7280; }
dl.infos dd.infos-pleine { grid-column: 2; }
dl.infos dd.infos-pleine .itineraires { margin-top: 0; }
@media (max-width: 700px) {
    dl.infos dd.infos-pleine { grid-column: 1 / -1; }
    .itineraires { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 6px; width: 100%; }
    .itineraires .itineraire { flex: 1 1 auto; }
    .itineraire { justify-content: center; gap: 5px; padding: 5px 4px; border-radius: 12px; font-size: .76rem; min-height: 38px; text-align: center; white-space: nowrap; min-width: 0; }
    .itineraire span { overflow: hidden; text-overflow: ellipsis; }
    .itineraire svg { width: 22px; height: 22px; padding: 3px; }
    .itineraire-logo { width: 20px; height: 20px; border-radius: 5px; }
}
/* 🌤️ Météo du tableau de bord */
.meteo { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--carte); border: 1px solid var(--bord);
    font-size: .88rem; color: var(--texte); vertical-align: middle; }
.meteo[hidden] { display: none; }
.meteo-icone { font-size: 1.05rem; }
.meteo strong { font-variant-numeric: tabular-nums; }
.meteo-detail { color: var(--texte-2); }
@media (max-width: 700px) { .meteo { display: flex; width: max-content; margin: 6px auto 0; } .meteo-detail .meteo-plus { display: none; } }
.pratique-carte { margin-bottom: 16px; }
.pratique-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.pratique-grille fieldset { border: 0; padding: 0; margin: 0; }
.pratique-cases { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0; }
@media (max-width: 760px) { .pratique-grille { grid-template-columns: 1fr; } }

/* ---- Téléphone (≤ 760 px) : en-tête en lignes centrées — logo, message d'accueil avec le prénom, boutons, recherche.
   Uniquement dans cette media query : l'affichage sur ordinateur ne change pas. */
@media (max-width: 760px) {
    .topbar-haut { justify-content: center; row-gap: 8px; padding-top: 8px; }
    .topbar-haut .brand { order: 0; flex: 1 1 100%; justify-content: center; }
    .topbar-haut .accueil { order: 1; flex: 1 1 100%; justify-content: center; text-align: center; white-space: normal; font-size: .98rem; }
    .topbar-haut .accueil > span:last-child { display: inline; overflow: visible; }
    .topbar-haut .user-menu { order: 2; flex: 1 1 100%; justify-content: center; margin-left: 0; }
    .topbar-haut .recherche-globale { order: 3; }
}

.axia-vie-systeme { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bord); }
.axia-vie-systeme input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }

.axia-vie-conversation { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bord); }
.axia-vie-sous-titre { font-weight: 600; margin-bottom: 8px; }
.axia-vie-cases.axia-vie-cases-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .axia-vie-cases.axia-vie-cases-2 { grid-template-columns: 1fr; } }

/* ==========================================================================================================
   🧾 Facturation électronique : carte de la facture, contrôles, cycle de vie, factures reçues, e-reporting
   ========================================================================================================== */
.fe-carte { margin-top: 16px; }
.fe-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fe-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 28px; }
.fe-sous-titre { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); margin: 4px 0 8px; display: flex; gap: 8px; align-items: center; }
.fe-sous-titre:not(:first-child) { margin-top: 16px; }
.fe-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.fe-controles li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.fe-puce { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
    background: var(--fond); color: var(--texte-2); }
.fe-controles li.ok .fe-puce { background: var(--vert-clair); color: var(--vert); }
.fe-controles li.ko .fe-puce { background: var(--rouge-clair); color: var(--rouge); }
.fe-controles li.info .fe-puce { background: var(--bleu-clair); color: var(--bleu-fonce); }
.fe-controles li.ko strong { color: var(--rouge); }
.fe-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-cycle { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.fe-cycle li { display: flex; gap: 10px; align-items: flex-start; position: relative; padding: 0 0 10px; font-size: .9rem; }
.fe-cycle li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--bord); }
.fe-cycle-icone { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fond); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.fe-cycle li.succes .fe-cycle-icone { background: var(--vert-clair); }
.fe-cycle li.danger .fe-cycle-icone { background: var(--rouge-clair); }
.fe-cycle li.alerte .fe-cycle-icone { background: var(--orange-clair); }
.fe-cycle li.info .fe-cycle-icone { background: var(--bleu-clair); }
.fe-echeances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fe-echeance { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; background: var(--carte); text-align: center; }
.fe-echeance .fe-date { font-size: 1.25rem; font-weight: 700; margin: 2px 0; }
.fe-echeance.fait { border-color: color-mix(in srgb, var(--vert) 35%, var(--bord)); background: color-mix(in srgb, var(--vert) 6%, var(--carte)); }
.fe-echeance.proche { border-color: color-mix(in srgb, var(--orange) 40%, var(--bord)); background: color-mix(in srgb, var(--orange) 6%, var(--carte)); }
.fe-diagnostic { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fe-diagnostic li { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.fe-periode-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fe-periode-type { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fe-periode-type .fe-chiffres { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; }
.fe-statuts-acheteur { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
@media (max-width: 900px) {
    .fe-grille, .fe-periode-types { grid-template-columns: 1fr; }
    .fe-echeances { grid-template-columns: 1fr; }
    .fe-badges { justify-content: flex-start; }
}
.fe-motif { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bord); }
.fe-import { display: inline-flex; margin: 0; }
.fe-import label.btn { cursor: pointer; margin: 0; }
.fe-periode-type .fe-boutons { justify-content: center; margin-top: auto; }
.fe-periode-type > .small:last-child { text-align: center; }
/* Facture électronique : volet repliable (titre et bulles toujours visibles) */
details.fe-carte { padding-top: 0; padding-bottom: 0; }
details.fe-carte[open] { padding-bottom: 16px; }
.fe-resume { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; user-select: none; }
.fe-resume::-webkit-details-marker { display: none; }
.fe-resume h2 { margin: 0; font-size: 1.1rem; flex: 1; color: var(--texte); }
.fe-chevron { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--texte-2); transition: transform .15s; }
.fe-chevron::before { content: "›"; font-size: 1.35rem; line-height: 1; margin-top: -2px; }
details.fe-carte[open] .fe-chevron { transform: rotate(90deg); }
.fe-resume:hover h2 { color: var(--bleu-fonce); }
details.fe-carte[open] .fe-resume { margin-bottom: 4px; border-bottom: 1px solid var(--bord); }
@media (max-width: 900px) { .fe-resume { flex-wrap: wrap; } .fe-resume .fe-badges { width: 100%; padding-left: 28px; } }
.fe-case-texte { font-weight: 400; }

/* ==========================================================================================================
   🎈 Axia, côté récré : tenues, succès, mini-jeux, réactions, vague d'énergie
   ========================================================================================================== */
/* ---- Tenues (dessin SVG posé sur l'avatar, repère 0-100) */
.axia-tenue { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.axia-tenue:empty { display: none; }
.axia-tenue svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .3)); }
.axia-tenue .t-penche { transform-box: fill-box; transform-origin: 50% 100%; animation: axia-tenue-penche 4.5s ease-in-out infinite; }
.axia-tenue .t-flotte { animation: axia-tenue-flotte 2.6s ease-in-out infinite; }
.axia[data-tenue="ete"] .axia-yeux, .axia[data-tenue="pirate"] .axia-yeux i:nth-child(2) { visibility: hidden; }
@keyframes axia-tenue-penche { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes axia-tenue-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- Succès débloqué : annonce en haut de l'écran, façon jeu vidéo */
.axia-trophee { position: fixed; right: 22px; bottom: 110px; z-index: 2000; display: flex; align-items: center; gap: 14px; width: max-content; min-width: min(320px, calc(100vw - 24px));
    max-width: min(400px, calc(100vw - 24px)); transform-origin: bottom right; padding: 12px 20px 12px 14px; border-radius: 16px; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #1e1b4b, #312e81 55%, #4338ca); border: 2px solid #fbbf24;
    box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .55), 0 0 0 4px rgba(251, 191, 36, .18), 0 0 30px -4px rgba(251, 191, 36, .6);
    animation: axia-trophee-entre .6s cubic-bezier(.34, 1.56, .64, 1); }
.axia-trophee::before { content: ""; position: absolute; right: 26px; bottom: -8px; width: 14px; height: 14px; background: #4338ca;
    border-right: 2px solid #fbbf24; border-bottom: 2px solid #fbbf24; transform: rotate(45deg); }
.axia-trophee::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 250% 100%; animation: axia-trophee-reflet 1.6s .4s ease-in-out; }
.axia-trophee-icone { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem;
    background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 55%, #b45309); box-shadow: inset 0 -4px 8px rgba(120, 53, 15, .35), 0 0 16px rgba(251, 191, 36, .7);
    animation: axia-trophee-icone .9s .2s cubic-bezier(.34, 1.56, .64, 1); }
.axia-trophee-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.axia-trophee-texte small { color: #fde68a; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }
.axia-trophee-texte b { font-size: 1.05rem; }
.axia-trophee-texte span { font-size: .84rem; opacity: .85; }
.axia-trophee-sort { animation: axia-trophee-sort .45s ease-in forwards; }
@keyframes axia-trophee-entre { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes axia-trophee-sort { to { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes axia-trophee-reflet { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes axia-trophee-icone { 0% { transform: scale(0) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } }

/* ---- Onglet 🎈 Récré */
.axia-vue[data-vue="recre"] { overflow-y: auto; }
.axia-recre { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.axia-recre-bloc { border: 1px solid var(--bord); border-radius: 14px; padding: 10px 12px; background: var(--carte); }
.axia-recre-titre { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.axia-recre-score { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--a2); background: color-mix(in srgb, var(--a1) 14%, transparent); border-radius: 999px; padding: 1px 9px; }
.axia-recre-texte { margin: -2px 0 8px; font-size: .85rem; color: var(--texte-2); }
.axia-recre-tenues { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.axia-recre-puce { border: 1px solid var(--bord); background: var(--fond); color: var(--texte); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: .76rem; cursor: pointer; }
.axia-recre-puce:hover { border-color: var(--a1); }
.axia-recre-puce.actif { background: color-mix(in srgb, var(--a1) 18%, var(--carte)); border-color: var(--a1); font-weight: 600; }
.axia-recre-jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.axia-recre-jeu { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond);
    color: var(--texte); font: inherit; cursor: pointer; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s; }
.axia-recre-jeu:last-child:nth-child(odd) { grid-column: 1 / -1; }
.axia-recre-jeu:hover { transform: translateY(-2px); border-color: var(--a1); box-shadow: 0 6px 16px -8px var(--a2); }
.axia-recre-jeu-icone { font-size: 1.35rem; line-height: 1.2; }
.axia-recre-jeu b { font-size: .84rem; }
.axia-recre-jeu small { font-size: .72rem; color: var(--texte-2); }
.axia-recre-barre { height: 8px; border-radius: 99px; background: var(--fond); overflow: hidden; margin-bottom: 4px; }
.axia-recre-barre i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, var(--a1)); transition: width .6s; }
.axia-recre-famille { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); margin: 10px 0 6px; }
.axia-recre-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.axia-recre-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 10px; border: 1px dashed var(--bord); text-align: center;
    filter: grayscale(1); opacity: .55; cursor: help; }
.axia-recre-badge.obtenu { filter: none; opacity: 1; border-style: solid; border-color: color-mix(in srgb, #fbbf24 55%, var(--bord)); background: color-mix(in srgb, #fbbf24 9%, var(--carte)); }
.axia-recre-badge-icone { font-size: 1.25rem; line-height: 1.2; }
.axia-recre-badge-nom { font-size: .68rem; font-weight: 600; line-height: 1.2; }

/* ---- Mini-jeux */
.axia-jeu { display: flex; flex-direction: column; gap: 10px; }
.axia-jeu-haut { display: flex; align-items: center; gap: 10px; }
.axia-jeu-haut b { flex: 1; text-align: center; margin-right: 58px; }
.axia-jeu-retour { border: 1px solid var(--bord); background: var(--fond); color: var(--texte); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.axia-jeu-aire { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 8px; }
.axia-jeu-message { margin: 0; text-align: center; font-weight: 600; min-height: 1.4em; }
.axia-jeu-message.gagne { color: var(--vert); }
.axia-jeu-message.perdu { color: var(--a2); }
.axia-jeu-rejouer { margin-top: 2px; }
.axia-morpion { display: grid; grid-template-columns: repeat(3, 66px); gap: 6px; }
.axia-morpion.attente { pointer-events: none; }
.axia-morpion-case { width: 66px; height: 66px; border-radius: 12px; border: 1px solid var(--bord); background: var(--fond); font-size: 1.8rem; cursor: pointer; transition: background .15s; }
.axia-morpion-case:not(:disabled):hover { background: color-mix(in srgb, var(--a1) 12%, var(--fond)); }
.axia-morpion-case.pose { animation: axia-pose .3s cubic-bezier(.34, 1.56, .64, 1); }
.axia-morpion-case.gagnante { background: color-mix(in srgb, #fbbf24 30%, var(--carte)); border-color: #f59e0b; }
.axia-morpion-case:disabled { cursor: default; color: inherit; }
@keyframes axia-pose { from { transform: scale(.6); } to { transform: scale(1); } }
.axia-pfc-duel { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; justify-items: center; column-gap: 14px; }
.axia-pfc-duel small { grid-row: 1; font-size: .75rem; color: var(--texte-2); }
.axia-pfc-duel small:first-child { grid-column: 1; } .axia-pfc-duel small:last-child { grid-column: 3; }
.axia-pfc-main { grid-row: 2; font-size: 2.6rem; line-height: 1; }
.axia-pfc-duel b { grid-row: 2; grid-column: 2; color: var(--texte-2); }
.axia-pfc-duel .axia-pfc-main:nth-of-type(1) { grid-column: 1; } .axia-pfc-duel .axia-pfc-main:nth-of-type(2) { grid-column: 3; }
.axia-pfc-duel.secoue .axia-pfc-main { animation: axia-pfc-secoue .3s ease-in-out 3; }
@keyframes axia-pfc-secoue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.axia-pfc-choix { display: flex; gap: 10px; justify-content: center; }
.axia-pfc-bouton { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--bord); background: var(--fond); font-size: 1.7rem; cursor: pointer; transition: transform .15s; }
.axia-pfc-bouton:not(:disabled):hover { transform: scale(1.1); border-color: var(--a1); }
.axia-pfc-score { margin: 0; font-size: .85rem; color: var(--texte-2); }
.axia-nombre { display: flex; gap: 8px; justify-content: center; }
.axia-nombre input { width: 96px; text-align: center; font-size: 1.05rem; }
.axia-nombre-histo { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.axia-nombre-histo span { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--fond); border: 1px solid var(--bord); }
.axia-nombre-histo .juste { background: var(--vert-clair); color: var(--vert); border-color: currentColor; font-weight: 700; }
.axia-quiz { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.axia-quiz-reponse { border: 1px solid var(--bord); background: var(--fond); color: var(--texte); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .86rem; cursor: pointer; text-align: center; }
.axia-quiz-reponse:not(:disabled):hover { border-color: var(--a1); }
.axia-quiz-reponse.juste { background: var(--vert-clair); border-color: var(--vert); color: var(--vert); font-weight: 600; }
.axia-quiz-reponse.faux { background: var(--rouge-clair); border-color: var(--rouge); color: var(--rouge); }
.axia-quiz-reponse:disabled { cursor: default; }
.axia-quiz-explication { margin: 0; font-size: .82rem; color: var(--texte-2); text-align: center; }
.axia-piece { width: 74px; height: 74px; position: relative; transform-style: preserve-3d; }
.axia-piece span { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; color: #78350f;
    background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 55%, #b45309); box-shadow: inset 0 0 0 4px rgba(120, 53, 15, .25); backface-visibility: hidden; }
.axia-piece .axia-piece-pile { transform: rotateY(180deg); }
.axia-piece.tourne-face { animation: axia-piece-face 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }
.axia-piece.tourne-pile { animation: axia-piece-pile 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes axia-piece-face { 0% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-40px) rotateY(900deg); } 100% { transform: translateY(0) rotateY(1800deg); } }
@keyframes axia-piece-pile { 0% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-40px) rotateY(990deg); } 100% { transform: translateY(0) rotateY(1980deg); } }
.axia-pile-bouton { min-width: 84px; justify-content: center; }

/* ---- Réactions : pièces qui tombent, émojis qui s'envolent, soupir */
.axia-pieces { position: fixed; inset: 0; pointer-events: none; z-index: 1500; }
.axia-pieces i { position: absolute; width: 22px; height: 22px; border-radius: 50%; font: 800 12px/22px system-ui, sans-serif; font-style: normal; text-align: center;
    color: #78350f; background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 55%, #b45309); box-shadow: 0 2px 4px rgba(120, 53, 15, .4);
    animation: axia-piece-tombe 1.5s cubic-bezier(.45, 0, .8, .6) forwards; opacity: 0; }
@keyframes axia-piece-tombe { 0% { opacity: 1; transform: translateY(0) rotateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--chute)) rotateY(var(--tour)) scale(.7); } }
.axia-emoji-vol { position: fixed; z-index: 1500; pointer-events: none; font-size: 1.5rem; transform: translate(-50%, 0); opacity: 0; animation: axia-emoji-vol 1.5s ease-out forwards; }
@keyframes axia-emoji-vol { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -18px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.axia-soupir .axia-orbe { animation: axia-soupir 1.7s ease-in-out; }
@keyframes axia-soupir { 0%, 100% { transform: none; } 30% { transform: translateY(4px) scale(1.06, .88); } 55% { transform: translateY(2px) scale(1.04, .92) rotate(-6deg); } 80% { transform: scale(.98, 1.02); } }

/* ---- ⚡ Vague d'énergie (code secret) */
.axia.axia-kame { transition: translate 1s cubic-bezier(.5, 0, .2, 1) !important; z-index: 2100; }
.axia-kame .axia-bulle { display: none; }
.axia-kame-charge .axia-orbe { animation: kame-tremble .09s linear infinite; }
.axia-kame-charge .axia-halo { opacity: 1; animation-duration: .6s; inset: -16px; }
.axia-kame-tir .axia-orbe { animation: kame-recul .35s ease-out forwards; }
@keyframes kame-tremble { 0% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, 1px); } 50% { transform: translate(1.5px, -1px); } 75% { transform: translate(-1px, -1.5px); } 100% { transform: translate(0, 0); } }
@keyframes kame-recul { from { transform: translateX(0); } to { transform: translateX(-10px) scale(1.06); } }
.kame-scene { position: fixed; inset: 0; z-index: 2050; pointer-events: none; overflow: hidden; }
.kame-voile { position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
    background: radial-gradient(ellipse at 15% 46%, rgba(30, 27, 75, .1), rgba(15, 23, 42, .5)); }
.kame-scene.charge .kame-voile, .kame-scene.tir .kame-voile { opacity: 1; }
.kame-scene.fin .kame-voile { opacity: 0; transition-duration: .6s; }
.kame-cri { position: absolute; transform: translate(0, -100%); font: 900 italic 1.35rem/1 system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; color: #fff;
    padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(30, 27, 75, .88), rgba(67, 56, 202, .88)); border: 1.5px solid #67e8f9;
    text-shadow: 0 0 8px #38bdf8; box-shadow: 0 0 18px -2px #38bdf8; }
.kame-cri:empty { display: none; }
.kame-cri.pop { animation: kame-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.kame-cri.feu { font-size: 2rem; color: #fef9c3; text-shadow: 0 0 12px #38bdf8, 0 0 30px #a5f3fc; animation: kame-pop .3s cubic-bezier(.34, 1.56, .64, 1), kame-cri-tremble .08s linear .3s 12; }
@keyframes kame-cri-tremble { 0%, 100% { transform: translate(0, -100%); } 33% { transform: translate(-2px, calc(-100% + 2px)); } 66% { transform: translate(2px, calc(-100% - 2px)); } }
@keyframes kame-pop { from { transform: translate(0, -100%) scale(.4); opacity: 0; } to { transform: translate(0, -100%) scale(1); opacity: 1; } }
.kame-boule { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, #e0f2fe 26%, #67e8f9 40%, #38bdf8 55%, rgba(79, 70, 229, .55) 70%, transparent 74%);
    box-shadow: 0 0 30px 12px rgba(56, 189, 248, .75), 0 0 70px 26px rgba(79, 70, 229, .45);
    transform: scale(.05); animation: kame-boule 2.3s cubic-bezier(.3, 0, .2, 1) forwards, kame-palpite .18s ease-in-out infinite alternate; }
@keyframes kame-boule { to { transform: scale(1); } }
@keyframes kame-palpite { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.kame-scene.tir .kame-boule { animation: kame-boule-tir .4s ease-out forwards; }
@keyframes kame-boule-tir { from { transform: scale(1); } to { transform: scale(1.5); opacity: .9; } }
.kame-particule { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #e0f2fe; box-shadow: 0 0 8px 3px #38bdf8; opacity: 0;
    animation: kame-aspire .6s ease-in infinite; }
@keyframes kame-aspire { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
.kame-scene.tir .kame-particule { display: none; }
.kame-rayon { position: absolute; transform-origin: left center; transform: scaleX(0); animation: kame-jaillit .38s cubic-bezier(.2, .9, .3, 1) forwards; }
.kame-rayon > span { position: absolute; left: 0; right: 0; top: 50%; border-radius: 0 999px 999px 0; transform: translateY(-50%); }
.kame-halo { height: 170%; background: linear-gradient(180deg, transparent, rgba(79, 70, 229, .55) 30%, rgba(56, 189, 248, .8) 50%, rgba(79, 70, 229, .55) 70%, transparent);
    filter: blur(14px); animation: kame-ondule .12s ease-in-out infinite alternate; }
.kame-flux { height: 100%; background: linear-gradient(180deg, #4f46e5 0%, #38bdf8 22%, #a5f3fc 42%, #fff 50%, #a5f3fc 58%, #38bdf8 78%, #4f46e5 100%);
    box-shadow: 0 0 26px 8px rgba(56, 189, 248, .8), 0 0 60px 18px rgba(79, 70, 229, .5); }
.kame-flux::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .3; mix-blend-mode: soft-light;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 23px, rgba(255, 255, 255, 0) 46px); animation: kame-file .25s linear infinite; }
.kame-coeur { height: 34%; background: linear-gradient(180deg, #e0f2fe, #fff 40%, #fff 60%, #e0f2fe); filter: blur(1.5px); animation: kame-ondule .09s ease-in-out infinite alternate; }
.kame-tete { left: auto !important; right: -30px !important; width: 140px; height: 190%; border-radius: 50% !important;
    background: radial-gradient(ellipse at 40% 50%, #fff 0 22%, #a5f3fc 38%, rgba(56, 189, 248, .7) 55%, transparent 70%); filter: blur(2px); }
@keyframes kame-jaillit { to { transform: scaleX(1); } }
@keyframes kame-ondule { from { transform: translateY(-50%) scaleY(.88); } to { transform: translateY(-50%) scaleY(1.08); } }
@keyframes kame-file { to { background-position: 46px 0; } }
.kame-scene.fin .kame-rayon { animation: kame-eteint .5s ease-in forwards; transform: scaleX(1); }
@keyframes kame-eteint { to { transform: scaleX(1) scaleY(0); opacity: 0; } }
.kame-onde { position: absolute; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid rgba(165, 243, 252, .9); box-shadow: 0 0 18px #38bdf8;
    opacity: 0; animation: kame-onde .9s ease-out forwards; }
@keyframes kame-onde { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(5.5); } }
.kame-impact { position: absolute; right: -90px; width: 260px; height: 260px; margin-top: -130px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #fff 0 15%, rgba(165, 243, 252, .9) 30%, rgba(56, 189, 248, .5) 50%, transparent 70%);
    animation: kame-impact 1.6s .3s ease-out forwards; }
@keyframes kame-impact { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1); } 60% { opacity: .9; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4); } }
.kame-eclair { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 46%, rgba(224, 242, 254, .85), rgba(56, 189, 248, .25) 60%, transparent);
    opacity: 0; animation: kame-eclair .45s ease-out; }
@keyframes kame-eclair { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.kame-secousse main.container { animation: kame-secousse .1s linear infinite; }
@keyframes kame-secousse { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -3px); } 100% { transform: translate(0, 0); } }
@media (max-width: 560px) { .kame-cri { font-size: 1.15rem; } .kame-cri.feu { font-size: 1.7rem; } .axia-morpion { grid-template-columns: repeat(3, 60px); } .axia-morpion-case { width: 60px; height: 60px; } }

/* Onglets d'Axia : pictogramme au-dessus du libellé (5 onglets lisibles, même sur téléphone) */
.axia-onglets { gap: 2px; padding: 6px 6px 0; }
.axia-onglets button { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 6px;
    font-size: .74rem; white-space: nowrap; overflow: visible; text-overflow: clip; }
.axia-onglet-icone { font-size: 1.05rem; line-height: 1.2; }
.axia-onglets .axia-compte { position: absolute; top: 2px; left: calc(50% + 8px); margin: 0; min-width: 16px; line-height: 16px; font-size: .64rem; }

/* ======================================================================================= 📬 Messagerie */
.container-large { max-width: 1440px; }
.compteur-bleu { background: var(--bleu); color: var(--sur-bleu); }
.mx-tete h1 { margin: 0; }
.mx-onglets { margin-bottom: 14px; overflow-y: hidden; }
.mx > * { min-height: 0; }
main:has(> .mx) { padding-bottom: 12px; }
.mx-liste { overflow: hidden; }
.mx-messages { overscroll-behavior: contain; }
.mx-lecture { container-type: inline-size; overscroll-behavior: contain; }
.mx-plus { display: flex; justify-content: center; padding: 12px; }
.mx-plus.mx-chargement .btn { opacity: .6; pointer-events: none; }
.mx-recuperation { margin: 0 10px 8px; padding: 6px 10px; border-radius: var(--rayon); background: var(--bleu-clair); color: var(--bleu-fonce); font-size: .8rem; text-align: center; }
.mx-recuperation .mx-tourne { animation: mx-tourne 1s linear infinite; }
@container (max-width: 880px) { .mx-barre .mx-libelle:not(.mx-libelle-garde) { display: none; } }
.mx-alerte-boutons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; }
.mx-alerte-boutons form { margin: 0; }
.mx-alerte { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mx-tourne { display: inline-block; }
form.en-cours .mx-tourne, .mx-synchro-en-cours .mx-tourne { animation: mx-tourne 1s linear infinite; }
/* Barre de progression sous « Synchroniser » : largeur du bouton, sans décaler la rangée de l'en-tête */
form[data-mx-synchro] { position: relative; }
.mx-synchro-barre { position: absolute; left: 4px; right: 4px; top: calc(100% + 5px); height: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bleu) 14%, transparent); pointer-events: none; }
.mx-synchro-barre[hidden] { display: none; }
.mx-synchro-barre > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bleu), color-mix(in srgb, var(--bleu) 70%, #fff)); transition: width .25s ease-out; position: relative; overflow: hidden; }
.mx-synchro-en-cours .mx-synchro-barre > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: mx-synchro-reflet 1.1s linear infinite; }
@keyframes mx-synchro-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.mx-synchro-barre.mx-synchro-fin > span { background: var(--vert, #1e7e34); }
.mx-synchro-barre.mx-synchro-erreur > span { background: var(--rouge); }
.mx-synchro-barre.mx-synchro-fin, .mx-synchro-barre.mx-synchro-erreur { animation: mx-synchro-sortie .45s ease .65s forwards; }
@keyframes mx-synchro-sortie { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-synchro-en-cours .mx-synchro-barre > span::after { animation: none; } }
/* En-tête figé sur téléphone : la rangée de boutons défile et rognerait la barre → barre posée dans le bas du bouton */
@media (max-width: 760px) {
    html.entete-fige .page-head .actions .mx-synchro-barre { top: auto; bottom: 4px; left: 10px; right: 10px; height: 3px; }
}
@keyframes mx-tourne { to { transform: rotate(360deg); } }
.mx-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--bleu)); flex: none; }

/* Trois volets : dossiers · liste · lecture */
.mx {
    display: grid; grid-template-columns: 220px minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100vh - 250px); min-height: 440px;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden;
}
.mx-dossiers { background: var(--surface-2); border-right: 1px solid var(--bord); overflow-y: auto; padding: 10px 8px; }
.mx-compte { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px; font-size: .78rem; font-weight: 650; color: var(--texte-2); text-transform: none; }
.mx-compte:not(:first-child) { margin-top: 10px; border-top: 1px solid var(--bord); padding-top: 12px; }
.mx-compte-adresse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-dossier { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: calc(6px * var(--arrondi)); color: var(--texte); font-size: .9rem; }
.mx-dossier:hover { background: var(--survol); text-decoration: none; }
.mx-dossier.actif { background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 600; }
.mx-sous-dossier { padding-left: 26px; font-size: .86rem; }
.mx-dossier-icone { width: 20px; text-align: center; flex: none; }
.mx-dossier-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-nb { font-size: .74rem; font-weight: 700; color: var(--bleu-fonce); background: color-mix(in srgb, var(--bleu) 14%, var(--carte)); border-radius: var(--pilule); padding: 0 7px; line-height: 18px; }
.mx-dossiers-vide { padding: 4px 10px; }
/* 🙈 Dossiers masqués : rappel discret sous les dossiers du compte, et fenêtre « Dossiers affichés » */
.mx-dossiers-masques { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 2px; padding: 5px 8px; border: 0; background: none; border-radius: calc(6px * var(--arrondi));
    font: inherit; font-size: .78rem; color: var(--texte-3); cursor: pointer; text-align: left; }
.mx-dossiers-masques:hover { background: var(--survol); color: var(--texte-2); }
.mx-dossiers-masques[hidden] { display: none; }
.mx-dossiers-dialogue { width: min(480px, calc(100vw - 32px)); }
.mx-dossiers-dialogue h2 { text-align: center; }
.mx-dossiers-adresse { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font-weight: 600; color: var(--texte-2); overflow-wrap: anywhere; }
.mx-dossiers-intro { text-align: center; margin: 0 0 12px; }
.mx-dossiers-choix { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 440px); overflow-y: auto; padding: 6px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); }
.mx-dossier-choix { display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-align: left; border-radius: calc(6px * var(--arrondi)); cursor: pointer; font-size: .9rem; }
.mx-dossier-choix:hover { background: var(--survol); }
.mx-dossier-choix input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--bleu); }
.mx-dossier-choix-sous { padding-left: 34px; font-size: .86rem; }
.mx-dossier-choix-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.mx-dossier-choix:has(input:not(:checked)) { color: var(--texte-3); }
.mx-dossier-choix:has(input:not(:checked)) .mx-dossier-icone { filter: grayscale(1); opacity: .55; }
.mx-dossier-suggestion { font-size: .74rem; color: var(--orange, #b45309); text-decoration: none; }
.mx-dossier-fixe { cursor: default; }
.mx-dossier-toujours { flex: none; font-size: .74rem; color: var(--texte-3); }
.mx-dossiers-outils { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; color: var(--texte-3); }

.mx-liste { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--bord); }
.mx-recherche { position: relative; margin: 10px 10px 6px; }
.mx-recherche svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--texte-3); }
.mx-recherche input { width: 100%; padding-left: 32px; border-radius: var(--pilule); background: var(--fond); }
.mx-filtres { display: flex; gap: 4px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.mx-filtre { white-space: nowrap; font-size: .76rem; padding: 3px 8px; border-radius: var(--pilule); border: 1px solid var(--bord); color: var(--texte-2); background: var(--carte); }
.mx-filtre:hover { text-decoration: none; border-color: var(--bleu); color: var(--bleu-fonce); }
.mx-filtre.actif { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.mx-liste-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); font-weight: 650; font-size: .9rem; background: var(--surface-2); }
.mx-messages { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mx-ligne { display: flex; gap: 10px; padding: 10px 12px 10px 10px; border-bottom: 1px solid var(--gris-clair); color: var(--texte); border-left: 3px solid transparent; }
.mx-ligne:hover { background: var(--survol); text-decoration: none; }
.mx-ligne.actif { background: var(--bleu-clair); border-left-color: var(--bleu); }
.mx-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    color: hsl(var(--h, 210) 55% 30%); background: hsl(var(--h, 210) 70% 90%); }
.mx-avatar-grand { width: 42px; height: 42px; font-size: .92rem; }
.mx-ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mx-ligne-haut { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mx-de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.mx-date { flex: none; font-size: .74rem; color: var(--texte-3); }
.mx-objet, .mx-extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-objet { font-size: .86rem; }
.mx-extrait { font-size: .8rem; color: var(--texte-3); }
.mx-non-lu .mx-de, .mx-non-lu .mx-objet { font-weight: 700; }
.mx-non-lu .mx-date { color: var(--bleu); font-weight: 650; }
.mx-non-lu { border-left-color: var(--bleu); }
.mx-client { align-self: flex-start; margin-top: 3px; font-size: .72rem; padding: 0 8px; line-height: 18px; border-radius: var(--pilule); background: var(--vert-clair); color: var(--vert); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-etoile { font-size: .78rem; }
.mx-liste-vide { text-align: center; color: var(--texte-2); padding: 48px 16px; }
.mx-liste-vide span { display: block; font-size: 2rem; margin-bottom: 6px; }
.mx-pages { padding: 8px; border-top: 1px solid var(--bord); }
.mx-pages nav { justify-content: center; }

.mx-lecture { min-width: 0; overflow-y: auto; }
.mx-lecture-vide { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--texte-2); padding: 24px; }
.mx-lecture-vide p { margin: 2px 0; }
.mx-lecture-vide-icone { font-size: 2.6rem; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--fond); margin-bottom: 10px; }
.mx-message { padding: 0 20px 20px; }
.mx-barre { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; background: var(--carte); border-bottom: 1px solid var(--gris-clair); }
.mx-barre-groupe { display: flex; gap: 4px; flex-wrap: wrap; }
.mx-barre-groupe form { margin: 0; }
.mx-barre .btn { min-height: 32px; }
.mx-menu-creer { margin-left: auto; }
.mx-retour-liste { display: none; }
.mx-suivi-actif { background: #fff6d6; border-color: #e8c34a; }
.mx-menu-panneau { width: 270px; padding: 10px; }
.mx-menu-creer .mx-menu-panneau { width: 300px; }
.mx-menu-panneau form { margin: 0; }
.mx-menu-choix { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: calc(6px * var(--arrondi)); color: var(--texte); cursor: pointer; font: inherit; }
.mx-menu-choix:hover { background: var(--survol); text-decoration: none; }
.mx-sujet { font-size: 1.25rem; margin: 16px 0 12px; line-height: 1.3; overflow-wrap: anywhere; }
.mx-entete { display: flex; align-items: flex-start; gap: 12px; }
.mx-entete-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mx-date-longue { flex: none; text-align: right; }
.mx-lien-client { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 8px 12px; border-radius: var(--rayon);
    background: var(--surface-2); border: 1px dashed var(--bord); font-size: .9rem; }
.mx-lien-actif { background: color-mix(in srgb, var(--vert) 7%, var(--carte)); border: 1px solid color-mix(in srgb, var(--vert) 25%, var(--carte)); }
.mx-lier { margin: 0; }
.mx-lier select { max-width: 240px; padding: 4px 8px; font-size: .85rem; }
.mx-images { margin: 0 0 10px; padding: 7px 12px; border-radius: var(--rayon); background: var(--note); font-size: .86rem; }
.mx-cadre { display: block; width: 100%; min-height: 80px; border: 0; background: #fff; border-radius: calc(6px * var(--arrondi)); }
.mx-pieces { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--gris-clair); }
.mx-pieces-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mx-piece { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 12px 7px 9px; border: 1px solid var(--bord); border-radius: var(--rayon); color: var(--texte); background: var(--carte); }
.mx-piece:hover { border-color: var(--bleu); text-decoration: none; background: var(--survol); }
.mx-piece-icone { font-size: 1.3rem; display: inline-flex; flex: none; line-height: 0; }
.mx-piece-svg { display: block; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .12)); }
.mx-piece-texte { display: flex; flex-direction: column; min-width: 0; }
.mx-piece-nom { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rédaction */
.confirm-crm.mx-redaction { width: min(1120px, calc(100vw - 32px)); max-width: none; height: min(880px, calc(100vh - 40px)); max-height: none; text-align: left; padding: 0; overflow: hidden; }
.confirm-crm.mx-redaction.mx-redaction-pleine { width: calc(100vw - 16px); height: calc(100vh - 16px); }
.mx-redaction form { display: flex; flex-direction: column; height: 100%; }
.mx-agrandir { position: absolute; top: 8px; right: 46px; border: 0; background: none; font-size: 1.15rem; line-height: 1; color: var(--texte-2); cursor: pointer; padding: 6px 8px; border-radius: calc(6px * var(--arrondi)); }
.mx-agrandir:hover { color: var(--texte); background: var(--survol); }
.mx-redaction-tete { position: relative; padding: 14px 48px 10px 20px; border-bottom: 1px solid var(--gris-clair); }
.mx-redaction-tete h2 { margin: 0; font-size: 1.08rem; }
.mx-redaction-tete .export-fermer { top: 8px; right: 10px; }
.mx-champs { padding: 4px 20px; }
.mx-champ { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--gris-clair); padding: 4px 0; font-weight: 400; margin: 0; }
.mx-champ > span { flex: none; width: 44px; color: var(--texte-2); font-size: .88rem; }
.mx-champ input, .mx-champ select { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 8px 2px; }
.mx-champ input:focus, .mx-champ select:focus { outline: none; box-shadow: none; }
.mx-editeur { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 20px 0; }
.mx-editeur .ed { flex: 1; min-height: 0; }
.mx-editeur .ed-zone { flex: 1; min-height: 0; max-height: none; }
/* Réponse : ma rédaction en haut, le message d'origine dessous, dans un seul défilement (comme Outlook) */
.mx-editeur .ed-defile { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; border-radius: 0 0 var(--rayon) var(--rayon); }
.mx-editeur .ed-defile .ed-zone { flex: 1 0 auto; min-height: 140px; overflow: visible; }
.mx-editeur .ed-defile.ed-avec-citation .ed-zone { flex: 0 0 auto; padding-bottom: 6px; }
.mx-citation { flex: none; margin: 0 16px 14px; padding-top: 12px; border-top: 1px solid var(--bord); }
.mx-citation-entete { font-size: .86rem; line-height: 1.55; color: var(--texte); padding: 0 2px 10px; overflow-wrap: anywhere; }
.mx-citation-entete b { font-weight: 600; }
.mx-citation-cadre { min-height: 60px; }
.mx-outils { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 8px 0 6px; }
.mx-outils > button { border: 1px solid transparent; background: none; border-radius: calc(6px * var(--arrondi)); min-width: 32px; height: 30px; cursor: pointer; color: var(--texte); font-size: .9rem; }
.mx-outils > button:hover { background: var(--survol); border-color: var(--bord); }
.mx-outils-sep { width: 1px; height: 20px; background: var(--bord); margin: 0 6px; }
.mx-lien-saisie { display: inline-flex; gap: 4px; margin-left: 6px; }
.mx-lien-saisie input { width: 220px; padding: 4px 8px; font-size: .85rem; }
.mx-zone { flex: 1; min-height: 240px; max-height: 46vh; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--champ-bord); border-radius: var(--rayon); background: var(--carte); line-height: 1.55; outline: none; }
.mx-zone:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 15%, transparent); }
.mx-zone .mx-signature { color: var(--texte-2); }
.mx-redaction-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px 16px; }
.mx-joints { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.mx-joint { font-size: .78rem; padding: 2px 9px; border-radius: var(--pilule); background: var(--fond); border: 1px solid var(--bord); }
.mx-redaction-boutons { display: flex; gap: 8px; margin-left: auto; }
.mx-redaction-boutons .btn { min-width: 110px; justify-content: center; }
.mx-redaction-erreur { margin: 0 20px 16px; padding: 10px 14px; border-radius: calc(6px * var(--arrondi)); border: 1px solid; background: var(--rouge-clair); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 30%, var(--carte)); }
.mx-champ[hidden], .mx-lien-saisie[hidden], .mx-redaction-erreur[hidden], .ag-detail [hidden], .ag-formulaire [hidden] { display: none !important; }
.mx-menu-creer[open] > summary { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--sur-bleu); }
.mx-toast { z-index: 80; }

/* Accueil / connexion des comptes */
.mx-connecter { max-width: 920px; margin: 8px auto 0; text-align: center; padding: 28px 24px; }
.mx-connecter-icone { font-size: 2.4rem; width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 8px; border-radius: 50%; background: var(--bleu-clair); }
.mx-connecter h2 { margin: 6px 0 6px; }
.mx-connecter > p { max-width: 560px; margin: 0 auto 18px; }
.mx-fournisseurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin: 0 auto; }
.mx-fournisseur { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); box-shadow: var(--ombre); transition: transform .12s, border-color .12s; }
a.mx-fournisseur:hover { text-decoration: none; border-color: var(--bleu); transform: translateY(-1px); }
.mx-fournisseur > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mx-fournisseur-off { opacity: .65; box-shadow: none; background: var(--surface-2); }
.mx-fournisseur-logo { flex: none; width: 38px; height: 38px; border-radius: calc(9px * var(--arrondi)); display: inline-grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff; }
.mx-fournisseur-microsoft .mx-fournisseur-logo, .mx-fournisseur-logo.mx-fournisseur-microsoft { background: linear-gradient(135deg, #0a64c2, #2b88d8); }
.mx-fournisseur-google .mx-fournisseur-logo, .mx-fournisseur-logo.mx-fournisseur-google { background: linear-gradient(135deg, #d93025, #f29900); }
h2 .mx-fournisseur-logo { width: 28px; height: 28px; font-size: .85rem; vertical-align: -6px; margin-right: 4px; }
.mx-promesses { list-style: none; padding: 0; margin: 20px auto 0; max-width: 600px; text-align: left; display: grid; gap: 8px; }
.mx-promesses li { display: flex; gap: 10px; font-size: .88rem; color: var(--texte-2); }
.mx-comptes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
.mx-comptes .card + .card { margin-top: 0; }
.mx-compte-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mx-compte-titre { flex: 1; min-width: 0; }
.mx-compte-titre h2 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.mx-interrupteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mx-interrupteur { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; font-weight: 400; margin: 0; }
.mx-interrupteur > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mx-interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.mx-interrupteur-piste { flex: none; position: relative; width: 36px; height: 20px; margin-top: 1px; border-radius: 10px; background: var(--champ-bord); transition: background .15s; }
.mx-interrupteur-piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.mx-interrupteur input:checked + .mx-interrupteur-piste { background: var(--bleu); }
.mx-interrupteur input:checked + .mx-interrupteur-piste::after { transform: translateX(16px); }
.mx-interrupteur input:focus-visible + .mx-interrupteur-piste { outline: 2px solid var(--bleu); outline-offset: 2px; }
.mx-agenda-options { border: 1px solid var(--gris-clair); border-radius: var(--rayon); padding: 8px 12px 10px; margin: 0 0 12px; }
.mx-agenda-options[disabled] { opacity: .5; }
.mx-agenda-options legend { padding: 0 4px; }
.mx-agenda-options p { margin: 8px 0 0; }
.mx-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.mx-sens-retour { margin: 10px 0 6px; }
.mx-cases.mx-cases-seule { grid-template-columns: minmax(0, 1fr); }
.mx-sens-alerte { margin: 8px 0 0; padding: 6px 10px; border-radius: calc(6px * var(--arrondi)); background: var(--orange-clair); color: var(--orange); font-weight: 600; }
.ag-sens-unique { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--orange-clair); color: var(--orange); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ag-sens-unique:hover { text-decoration: underline; }
.mx-compte-boutons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mx-retour { text-align: center; }
.mx-retour-icone { font-size: 2.4rem; }
.mx-retour h1 { font-size: 1.3rem; margin: 6px 0 8px; }

/* Paramètres › Messagerie */
.mx-etats { margin-bottom: 16px; }
.mx-uri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-uri code { flex: 1; min-width: 0; padding: 8px 12px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); overflow-wrap: anywhere; font-size: .88rem; }
.mx-avance { margin-top: 10px; }
.mx-applis { margin: 16px 0; }
.mx-applis .card + .card { margin-top: 0; }
.mx-applis h2 { display: flex; align-items: center; gap: 6px; }
.mx-guide { margin-top: 12px; padding: 8px 12px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--gris-clair); }
.mx-guide summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.mx-guide ol { margin: 10px 0 4px; padding-left: 20px; font-size: .88rem; line-height: 1.55; display: grid; gap: 4px; }
.mx-radios { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.mx-radios legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.mx-frequence { padding: 9px 12px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }
.mx-enregistrer { display: flex; justify-content: center; margin-top: 14px; }
.mx-ancienne { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mx-ancienne form { margin: 0; }
#ancienne-synchro, .mx-retour-uri { margin-bottom: 16px; }

/* ======================================================================================= 📅 Agenda */
.ag { --ag-rdv: #1565c0; --ag-action: #0f766e; --ag-intervention: #c2410c; --ag-echeance: #b42318; --ag-perso: #6b21a8; }
.ag-rdv { --ag-c: var(--ag-rdv); }
.ag-action { --ag-c: var(--ag-action); }
.ag-intervention { --ag-c: var(--ag-intervention); }
.ag-echeance { --ag-c: var(--ag-echeance); }
.ag-perso { --ag-c: var(--ag-perso); }
.ag-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-nav .btn-icone { font-size: 1.2rem; line-height: 1; padding-top: 5px; padding-bottom: 7px; }
.ag-titre { margin: 0 0 0 8px; font-size: 1.2rem; }
.ag-vues { display: inline-flex; border: 1px solid var(--bord); border-radius: var(--pilule); padding: 3px; background: var(--carte); }
.ag-vues a { padding: 5px 14px; border-radius: var(--pilule); color: var(--texte-2); font-size: .9rem; font-weight: 500; }
.ag-vues a:hover { text-decoration: none; color: var(--texte); }
.ag-vues a.actif { background: var(--bleu); color: var(--sur-bleu); }
.ag-infos { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ag-calques { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-calque { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82rem; padding: 3px 11px; border-radius: var(--pilule); border: 1px solid var(--bord); background: var(--carte); color: var(--texte); cursor: pointer; }
.ag-calque[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.ag-calque[data-vide] { color: var(--texte-3); }
.ag-couleurs-bouton { padding: 3px 9px; }
.ag-couleurs { width: min(460px, calc(100vw - 32px)); }
.ag-couleurs-liste { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ag-couleur-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 28px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: calc(8px * var(--arrondi)); border: 1px solid transparent; }
.ag-couleur-ligne.actif { border-color: var(--bord); background: var(--fond); }
.ag-couleur-nom { font-weight: 600; cursor: pointer; text-align: left; }
.ag-couleur-apercu { font-size: .78rem; font-weight: 600; padding: 3px 8px; border-left: 3px solid var(--ag-c); border-radius: calc(5px * var(--arrondi));
    background: color-mix(in srgb, var(--ag-c) 13%, var(--carte)); color: color-mix(in srgb, var(--ag-c) 75%, var(--texte)); white-space: nowrap; }
.ag-couleur-ligne input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--bord); border-radius: calc(6px * var(--arrondi)); background: var(--carte); cursor: pointer; }
.ag-couleurs-nuancier { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ag-nuance { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--carte); box-shadow: 0 0 0 1px var(--bord); cursor: pointer; padding: 0; }
.ag-nuance:hover, .ag-nuance:focus-visible { box-shadow: 0 0 0 2px var(--texte); }
.ag-couleurs-aide { text-align: center; margin: 8px 0 0; }
.ag-couleurs .confirm-actions { margin-top: 16px; }
.ag-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--ag-c); }
.ag-source { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--texte-2); }
.ag-synchro { margin: 0; display: inline; }
.ag-masque-rdv [data-calque="rdv"], .ag-masque-action [data-calque="action"], .ag-masque-intervention [data-calque="intervention"],
.ag-masque-echeance [data-calque="echeance"], .ag-masque-perso [data-calque="perso"] { display: none !important; }

.ag-grille { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.ag-ligne, .ag-corps { display: grid; grid-template-columns: 56px repeat(var(--jours), minmax(0, 1fr)); }
.ag-entete { border-bottom: 1px solid var(--bord); background: var(--surface-2); }
.ag-coin { display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.ag-jour-tete { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; color: var(--texte-2); font-size: .78rem; border-left: 1px solid var(--gris-clair); }
.ag-jour-tete strong { font-size: 1.15rem; color: var(--texte); line-height: 1.2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.ag-jour-tete:hover { text-decoration: none; background: var(--survol); }
.ag-jour-tete.ag-aujourdhui { color: var(--bleu-fonce); font-weight: 600; }
.ag-jour-tete.ag-aujourdhui strong { background: var(--bleu); color: var(--sur-bleu); }
.ag-journees { border-bottom: 1px solid var(--bord); min-height: 30px; }
.ag-journee-cellule { border-left: 1px solid var(--gris-clair); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.ag-corps { position: relative; height: calc(100vh - 360px); min-height: 440px; overflow-y: auto; }
.ag-heures { grid-column: 1; }
.ag-heure { height: var(--heure); font-size: .7rem; color: var(--texte-3); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.ag-heure:first-child { visibility: hidden; }
.ag-colonne { position: relative; border-left: 1px solid var(--gris-clair); height: calc(24 * var(--heure)); cursor: cell;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--heure) - 1px), var(--gris-clair) calc(var(--heure) - 1px), var(--gris-clair) var(--heure)); }
.ag-colonne.ag-aujourdhui { background-color: color-mix(in srgb, var(--bleu) 3%, transparent); }
.ag-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; text-align: left; font: inherit; font-size: .76rem; line-height: 1.25;
    padding: 3px 6px; margin-left: 2px; border: 0; border-left: 3px solid var(--ag-c); border-radius: calc(5px * var(--arrondi)); cursor: pointer;
    background: color-mix(in srgb, var(--ag-c) 13%, var(--carte)); color: color-mix(in srgb, var(--ag-c) 75%, var(--texte)); box-shadow: 0 0 0 1px var(--carte); }
.ag-ev:hover { background: color-mix(in srgb, var(--ag-c) 22%, var(--carte)); z-index: 3; }
.ag-ev-poignee { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.ag-ev-poignee::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--ag-c); opacity: 0; transition: opacity .15s; }
.ag-ev:hover .ag-ev-poignee::after, .ag-etirement .ag-ev-poignee::after { opacity: .55; }
.ag-etirement { z-index: 5; box-shadow: 0 0 0 2px var(--ag-c), 0 6px 16px rgba(0,0,0,.15); cursor: ns-resize; }
.ag-enregistrement { opacity: .65; }
@media (hover: none) { .ag-ev-poignee { height: 14px; } .ag-ev-poignee::after { opacity: .45; } }
.ag-ev-heure { font-weight: 700; font-size: .7rem; }
.ag-ev-titre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ag-ev-client { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ag-court { flex-direction: row; gap: 4px; align-items: center; white-space: nowrap; }
.ag-court .ag-ev-titre { -webkit-line-clamp: 1; }
.ag-court .ag-ev-client { display: none; }
.ag-fait { opacity: .6; }
.ag-fait .ag-ev-titre, .ag-puce.ag-fait { text-decoration: line-through; }
.ag-maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); z-index: 4; pointer-events: none; }
.ag-maintenant::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
.ag-puce { display: block; width: 100%; text-align: left; font: inherit; font-size: .74rem; font-weight: 600; padding: 2px 6px; border: 0; border-radius: calc(4px * var(--arrondi)); cursor: pointer;
    background: color-mix(in srgb, var(--ag-c) 14%, var(--carte)); color: color-mix(in srgb, var(--ag-c) 75%, var(--texte)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-puce:hover { background: color-mix(in srgb, var(--ag-c) 24%, var(--carte)); }
.ag-puce-heure { font-weight: 700; margin-right: 2px; }
.ag-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.ag-mois-tete { padding: 7px; text-align: center; font-size: .78rem; color: var(--texte-2); background: var(--surface-2); border-bottom: 1px solid var(--bord); }
.ag-case { min-height: 112px; padding: 4px; border-right: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: cell; }
.ag-case:nth-child(7n) { border-right: 0; }
.ag-hors-mois { background: var(--surface-2); }
.ag-hors-mois .ag-case-num { color: var(--texte-3); }
.ag-case-num { align-self: flex-start; font-size: .82rem; font-weight: 600; color: var(--texte); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.ag-case-num:hover { background: var(--survol); text-decoration: none; }
.ag-aujourdhui .ag-case-num { background: var(--bleu); color: var(--sur-bleu); }
.ag-plus { font-size: .74rem; padding: 0 6px; color: var(--texte-2); }
.ag-liste { display: none; }

.confirm-crm.ag-detail, .confirm-crm.ag-formulaire { width: min(480px, calc(100vw - 24px)); text-align: left; position: fixed; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.ag-detail-calque { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ag-c); margin-bottom: 4px; }
.ag-detail h2 { margin: 0 28px 10px 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.ag-detail-infos { margin: 0 0 12px; display: grid; gap: 6px; }
.ag-detail-infos > div { display: flex; gap: 10px; }
.ag-detail-infos dt { flex: none; width: 22px; }
.ag-detail-infos dd { margin: 0; color: var(--texte-2); white-space: pre-line; overflow-wrap: anywhere; }
.ag-lier { display: grid; gap: 4px; margin: 0 0 6px; }
.ag-detail .confirm-actions form { margin: 0; }
.ag-formulaire h2 { margin: 0 28px 12px 0; font-size: 1.1rem; }
.ag-formulaire form > .champ, .ag-formulaire .ag-form-dates .champ { margin-bottom: 10px; }
.ag-formulaire .case { margin: 2px 0 12px; }
.ag-form-dates { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.ag-form-entete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ag-form-entete:has([data-ag-type-champ]:not([hidden])) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ag-form-dates.ag-journee-entiere { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
    .mx { grid-template-columns: 190px minmax(260px, 320px) minmax(0, 1fr); }
    .mx-libelle { display: none; }
}
@media (max-width: 860px) {
    .mx { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    /* Dossiers : sélecteur « compte · dossier ▾ » qui déroule la liste, rangée par compte, juste en dessous */
    .mx-dossiers { display: none; }
    .mx.mx-choix-ouvert .mx-dossiers, .mx.mx-sans-dossiers.mx-choix-ouvert .mx-dossiers { display: block; position: fixed; z-index: 60; left: 12px; right: 12px; top: var(--deroule-haut, 160px);
        max-height: var(--deroule-max, 70vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; background: var(--carte); border: 0; border-radius: 16px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, .28); animation: deroule-entree .2s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; }
    .mx-compte { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 10px 8px 6px; font-size: .86rem; font-weight: 700; color: var(--texte); }
    .mx-compte:not(:first-child) { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--bord); }
    .mx-compte .mx-pastille { width: 12px; height: 12px; }
    .mx-compte-adresse { flex: 1 1 auto; min-width: 0; }
    .mx-compte-service { display: inline-block; margin-left: auto; flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; color: var(--texte-2); padding: 1px 8px; border-radius: 999px; background: var(--fond); }
    .mx-dossier { min-height: 44px; padding: 0 12px 0 14px; font-size: .95rem; border-radius: 10px; }
    .mx-sous-dossier { padding-left: 34px; }
    .mx-choix-dossier { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "compte fleche" "nom fleche"; align-items: center; gap: 2px 10px; width: 100%;
        margin: 0 0 10px; padding: 9px 14px; border: 1px solid var(--bord); border-radius: calc(12px * var(--arrondi, 1)); background: var(--carte); color: var(--texte); font: inherit; text-align: left; cursor: pointer;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
    .mx-choix-compte { grid-area: compte; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mx-choix-nom { grid-area: nom; display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: 1rem; overflow: hidden; white-space: nowrap; }
    .mx-choix-fleche { grid-area: fleche; font-size: .85rem; color: var(--texte-2); transition: transform .15s; }
    .mx-choix-ouvert .mx-choix-fleche { transform: rotate(180deg); }
    .mx-choix-voile { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(10, 16, 32, .35); }
    .mx-choix-voile[hidden] { display: none; }
    .mx-liste { border-right: 0; }
    .mx-messages { max-height: none; }
    .mx-lecture { display: none; }
    /* Message ouvert : plein écran par-dessus la liste (comme Mail sur iPhone) ; la liste reste en place dessous,
       au même endroit, et réapparaît sans délai au retour (flèche ← ou geste retour) */
    .mx-lecture-ouverte .mx-lecture { display: block; position: fixed; inset: 0; z-index: 2550; background: var(--carte); border: 0; border-radius: 0;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: mx-lecture-entree .18s ease-out; }
    .mx-lecture-ouverte .mx-lecture .mx-barre { position: sticky; top: 0; z-index: 3; background: var(--carte); }
    .mx-retour-liste { display: inline-flex; }
    .mx-message { padding: 0 12px 16px; }
    .mx-barre { position: static; }
    .mx-entete { flex-wrap: wrap; }
    .mx-date-longue { width: 100%; text-align: left; order: 3; padding-left: 54px; }
    .mx-lier select { max-width: 100%; }
    .mx-comptes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .ag-grille { display: none; }
    .ag-liste { display: grid; gap: 10px; }
    .ag-liste-jour { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; }
    .ag-liste-jour.ag-aujourdhui { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
    .ag-liste-jour h3 { margin: 0 0 6px; font-size: .95rem; }
    .ag-liste-ev { display: flex; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 7px 8px; margin-bottom: 4px; border: 0; border-left: 3px solid var(--ag-c);
        border-radius: calc(5px * var(--arrondi)); background: color-mix(in srgb, var(--ag-c) 9%, var(--carte)); color: var(--texte); cursor: pointer; }
    .ag-liste-heure { flex: none; width: 54px; font-weight: 700; font-size: .82rem; color: color-mix(in srgb, var(--ag-c) 80%, var(--texte)); }
    .ag-liste-titre { min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
    .ag-liste-rien { margin: 0 0 4px; }
    .ag-case { min-height: 64px; padding: 2px; }
    .ag-puce { font-size: 0; height: 6px; padding: 0; border-radius: 3px; background: var(--ag-c); }
    .ag-plus { font-size: .66rem; }
    .ag-titre { width: 100%; margin: 6px 0 0; order: 5; }
    .ag-form-dates { grid-template-columns: 1fr 1fr; }
    .ag-form-entete:has([data-ag-type-champ]:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
    .ag-form-dates .champ:first-child { grid-column: 1 / -1; }
    .mx-interrupteurs, .mx-cases, .mx-fournisseurs { grid-template-columns: minmax(0, 1fr); }
    .mx-redaction-boutons { width: 100%; }
    .mx-redaction-boutons .btn { flex: 1; }
}

/* ---------- Éditeur de texte riche (rédaction des e-mails, signature) ---------- */
.ed { position: relative; display: flex; flex-direction: column; border: 1px solid var(--champ-bord); border-radius: var(--rayon); background: var(--carte); }
.ed:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 14%, transparent); }
.ed-outils { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 6px 8px; border-bottom: 1px solid var(--gris-clair); background: var(--surface-2); border-radius: var(--rayon) var(--rayon) 0 0; }
.ed-groupe { display: inline-flex; align-items: center; gap: 1px; padding-right: 6px; border-right: 1px solid var(--bord); }
.ed-groupe-fin { border-right: 0; padding-right: 0; }
.ed-outils button, .ed-bouton, .ed-couleur { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; background: none; border-radius: calc(6px * var(--arrondi));
    cursor: pointer; color: var(--texte); font: inherit; font-size: .9rem; margin: 0; }
.ed-outils button:hover, .ed-bouton:hover, .ed-couleur:hover { background: var(--survol); border-color: var(--bord); }
.ed-outils select { height: 30px; padding: 0 24px 0 8px; font-size: .84rem; border-radius: calc(6px * var(--arrondi)); width: auto; }
.ed-outils select[data-ed-police] { max-width: 150px; }
.ed-couleur { position: relative; grid-auto-flow: row; gap: 0; line-height: 1; padding-top: 3px; }
.ed-couleur input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ed-a { font-weight: 700; font-size: .92rem; }
.ed-barre-couleur { display: block; width: 18px; height: 4px; border-radius: 2px; margin-top: 1px; }
.ed-align { display: block; width: 15px; height: 12px; background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) var(--x2, 0) 5px / 60% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat; }
.ed-centre { --x2: 50%; }
.ed-droite { --x2: 100%; }
.ed-lien-saisie { display: inline-flex; gap: 4px; }
.ed-lien-saisie input { width: 240px; height: 30px; padding: 4px 8px; font-size: .85rem; }
.ed-emojis { position: absolute; z-index: 5; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(9, 34px); gap: 2px; padding: 8px;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.ed-emojis button { font-size: 1.15rem; }
.ed-zone { min-height: 220px; overflow-y: auto; padding: 14px 16px; line-height: 1.5; outline: none; font-family: "Segoe UI", Aptos, Calibri, Arial, sans-serif; font-size: 14.5px; color: var(--texte); overflow-wrap: anywhere; }
.ed-zone img { max-width: 100%; height: auto; cursor: pointer; }
.ed-zone img.ed-image-active { outline: 2px solid var(--bleu); outline-offset: 2px; }
.ed-zone blockquote { margin: 6px 0 6px 6px; padding-left: 12px; border-left: 3px solid var(--bord); color: var(--texte-2); }
.ed-zone hr { border: 0; border-top: 1px solid var(--bord); margin: 10px 0; }
.ed-zone .mx-signature { color: inherit; }
.ed-image-barre { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 6px 8px; border-top: 1px solid var(--gris-clair); background: var(--surface-2); border-radius: 0 0 var(--rayon) var(--rayon); }
.ed-image-barre button { font: inherit; font-size: .8rem; padding: 3px 10px; border: 1px solid var(--bord); border-radius: var(--pilule); background: var(--carte); cursor: pointer; }
.ed-image-barre button:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.ed [hidden] { display: none !important; }
.mx-signature-champ .ed-zone { max-height: 340px; }
.mx-signature-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mx-signature-titre { font-weight: 600; }
.mx-signature-tete .case { margin: 0; }
.mx-case-images { margin: 4px 0 0; }
@media (max-width: 760px) {
    .confirm-crm.mx-redaction { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .ed-groupe { border-right: 0; padding-right: 0; }
    .ed-outils select[data-ed-police] { max-width: 110px; }
    .ed-emojis { grid-template-columns: repeat(6, 34px); }
}

/* ---------- Liste déroulante avec recherche (clients…) ---------- */
.choix-recherche { position: relative; min-width: 220px; }
.choix-recherche input { width: 100%; padding-right: 30px; }
.choix-recherche-vider { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--texte-3); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
.choix-recherche-vider:hover { color: var(--rouge); }
.choix-recherche-liste { position: fixed; z-index: 2700; left: 0; top: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
    background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.choix-recherche-liste li { padding: 7px 10px; border-radius: calc(5px * var(--arrondi)); cursor: pointer; font-size: .88rem; }
.choix-recherche-liste li:hover, .choix-recherche-liste li.actif { background: var(--bleu-clair); color: var(--bleu-fonce); }
.choix-recherche-liste li[aria-selected="true"] { font-weight: 600; }
.choix-recherche-liste .choix-recherche-rien { color: var(--texte-3); cursor: default; }
.champ .choix-recherche, .form-grid .choix-recherche { width: 100%; }
.col-designation .choix-recherche { width: 100%; min-width: 0; margin-bottom: 4px; }
.filtres .choix-recherche { width: auto; flex: 0 1 200px; min-width: 180px; }
.choix-recherche input:required:placeholder-shown { background-image: none; }
.mx-lier .choix-recherche { width: 280px; }
.mx-lier .choix-recherche input { padding-top: 5px; padding-bottom: 5px; font-size: .86rem; }
.ag-lier .choix-recherche, .ag-formulaire .choix-recherche { width: 100%; }

/* ---------- Affichage : volets de lecture ---------- */
.mx-affichage-panneau { width: 330px; }
.mx-volets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mx-volet-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); cursor: pointer; font: inherit; font-size: .84rem; }
.mx-volet-choix:hover { border-color: var(--bleu); }
.mx-volet-choix.actif { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 600; }
.mx-ico { position: relative; width: 46px; height: 32px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .85; }
.mx-ico i { position: absolute; background: currentColor; opacity: .35; }
.mx-ico i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 10px; }
.mx-ico-droite i:nth-child(2) { left: 12px; top: 3px; bottom: 3px; width: 12px; opacity: .55; }
.mx-ico-droite i:nth-child(3) { left: 26px; top: 3px; bottom: 3px; right: 3px; opacity: .2; }
.mx-ico-bas i:nth-child(2) { left: 12px; top: 3px; right: 3px; height: 11px; opacity: .55; }
.mx-ico-bas i:nth-child(3) { left: 12px; top: 16px; right: 3px; bottom: 3px; opacity: .2; }
.mx-ico-masque i:nth-child(2) { left: 12px; top: 3px; right: 3px; bottom: 3px; opacity: .55; }
.mx-ico-masque i:nth-child(3) { display: none; }
.mx-affichage-case { margin: 0 0 4px; }

@media (min-width: 861px) {
    .mx { position: relative; grid-template-areas: "d l r"; grid-template-columns: var(--mx-dossiers, 220px) var(--mx-liste, 380px) minmax(0, 1fr); }
    .mx-dossiers { grid-area: d; }
    .mx-liste { grid-area: l; }
    .mx-lecture { grid-area: r; }
    .mx-separateur { grid-area: none; }
    .mx.mx-sans-dossiers { grid-template-areas: "l r"; grid-template-columns: var(--mx-liste, 400px) minmax(0, 1fr); }
    .mx.mx-volet-bas { grid-template-areas: "d l" "d r"; grid-template-columns: var(--mx-dossiers, 220px) minmax(0, 1fr); grid-template-rows: var(--mx-haut, 52%) minmax(0, 1fr); }
    .mx.mx-volet-bas.mx-sans-dossiers { grid-template-areas: "l" "r"; grid-template-columns: minmax(0, 1fr); }
    .mx.mx-volet-bas .mx-liste { border-right: 0; border-bottom: 1px solid var(--bord); }
    .mx.mx-volet-masque { grid-template-areas: "d l"; grid-template-columns: var(--mx-dossiers, 220px) minmax(0, 1fr); }
    .mx.mx-volet-masque.mx-sans-dossiers { grid-template-areas: "l"; grid-template-columns: minmax(0, 1fr); }
    .mx.mx-volet-masque .mx-lecture { display: none; }
    .mx.mx-volet-masque .mx-liste, .mx.mx-sans-dossiers.mx-volet-masque .mx-liste { border-right: 0; }
    .mx.mx-sans-dossiers .mx-dossiers { display: none; }
}
.mx-separateur { position: absolute; z-index: 4; cursor: col-resize; touch-action: none; }
.mx-separateur::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.mx-separateur-horizontal { cursor: row-resize; }
.mx-separateur-horizontal::after { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 2px; }
.mx-separateur:hover::after, .mx-separateur.glisse::after { background: var(--bleu); }
body.mx-redimension { user-select: none; cursor: col-resize; }
body.mx-redimension iframe { pointer-events: none; }

/* ---------- Actions rapides au survol ---------- */
.mx-li { position: relative; }
.mx-rapides { position: absolute; right: 10px; bottom: 8px; display: none; gap: 2px; padding: 2px; border-radius: var(--pilule); background: var(--carte); box-shadow: 0 1px 4px rgba(16, 24, 40, .16); }
.mx-li:hover .mx-rapides, .mx-li:focus-within .mx-rapides { display: inline-flex; }
.mx-rapides button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: .9rem; display: grid; place-items: center; }
.mx-rapides button:hover { background: var(--bleu-clair); }
.mx-rapides .mx-rapide-actif { background: #fff6d6; }
.mx-ligne.mx-ligne-menu { background: var(--bleu-clair); }

/* ---------- Menu du clic droit ---------- */
.mx-ctx { position: fixed; z-index: 90; min-width: 250px; padding: 5px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.mx-ctx[hidden] { display: none; }
.mx-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: calc(5px * var(--arrondi)); cursor: pointer; font: inherit; font-size: .9rem; color: var(--texte); text-align: left; }
.mx-ctx-item:hover, .mx-ctx-item:focus-visible { background: var(--survol); outline: none; }
.mx-ctx-ico { width: 20px; text-align: center; flex: none; }
.mx-ctx-texte { flex: 1; }
.mx-ctx-fleche { color: var(--texte-3); }
.mx-ctx-danger { color: var(--rouge); }
.mx-ctx-sep { height: 1px; margin: 4px 6px; background: var(--gris-clair); }
.mx-ctx-groupe { position: relative; }
.mx-ctx-sous { position: absolute; left: calc(100% - 4px); top: -6px; display: none; max-height: 60vh; overflow-y: auto; }
.mx-ctx-groupe:hover > .mx-ctx-sous, .mx-ctx-groupe.ouvert > .mx-ctx-sous { display: block; }
.mx-ctx-gauche .mx-ctx-sous { left: auto; right: calc(100% - 4px); }
.mx-ctx-rien { padding: 7px 10px; color: var(--texte-3); font-size: .86rem; }

/* ---------- Lecture en grand ---------- */
.confirm-crm.mx-fenetre { width: min(1120px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100vh - 40px)); max-height: none; padding: 0; text-align: left; overflow: hidden; }
.confirm-crm.mx-fenetre.mx-fenetre-pleine { width: calc(100vw - 16px); height: calc(100vh - 16px); }
.mx-fenetre[open] { display: flex; flex-direction: column; }
.mx-fenetre-tete { position: relative; flex: none; height: 6px; }
.mx-fenetre-tete .export-fermer { top: 8px; right: 10px; z-index: 5; }
.mx-fenetre-tete .mx-agrandir { top: 8px; z-index: 5; }
.mx-fenetre-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; }
.mx-fenetre .mx-message { padding: 0 14px 16px; }
.mx-fenetre .mx-barre { padding-right: 96px; }
.mx-fenetre .mx-retour-liste { display: none !important; }

/* ---------- Réponses automatiques, règles ---------- */
.mx-auto-bandeau .mx-alerte-boutons { width: auto; }
.mx-auto-bandeau form { margin: 0; }
.ag-form-options { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 2px 0 12px; }
.ag-form-options .case { margin: 0; }
.mx-regles-compte + .mx-regles-compte { margin-top: 16px; }
.mx-regles-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mx-regles-tete h2 { margin: 0; font-size: 1.05rem; }
.mx-regles-liste { display: grid; gap: 8px; }
.mx-regle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }
.mx-regle.mx-regle-off { opacity: .6; }
.mx-regle-nom { font-weight: 600; }
.mx-regle-detail { font-size: .84rem; color: var(--texte-2); margin-top: 2px; }
.mx-regle-detail b { color: var(--texte); font-weight: 600; }
.mx-regle-boutons { display: flex; gap: 6px; align-items: center; }
.mx-regle-boutons form { margin: 0; }
.mx-regles-vide { text-align: center; color: var(--texte-2); padding: 16px; border: 1px dashed var(--bord); border-radius: var(--rayon); }
.mx-regle-form { display: grid; gap: 12px; }
.mx-regle-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mx-regle-bloc { padding: 12px 14px; border: 1px solid var(--gris-clair); border-radius: var(--rayon); background: var(--surface-2); }
.mx-regle-bloc h3 { margin: 0 0 10px; font-size: .95rem; }
.mx-regle-bloc .champ { margin-bottom: 10px; }
.mx-auto-etats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.mx-auto-etat { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--bord); border-radius: var(--pilule); cursor: pointer; font-weight: 500; margin: 0; }
.mx-auto-etat:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); }
.mx-auto-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-attenue { opacity: .5; }
.mx-rapides-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mx-rapides-choix .case { padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); margin: 0; }
.mx-rapides-choix .case:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); }
.mx-centre { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mx-sommaire { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.mx-sommaire a { padding: 6px 14px; border: 1px solid var(--bord); border-radius: var(--pilule); background: var(--carte); color: var(--texte); font-size: .9rem; }
.mx-sommaire a:hover { border-color: var(--bleu); color: var(--bleu-fonce); text-decoration: none; }
@media (max-width: 760px) {
    .mx-regle-blocs, .mx-auto-dates, .mx-rapides-choix { grid-template-columns: minmax(0, 1fr); }
    .mx-regle { grid-template-columns: minmax(0, 1fr); }
    .mx-lier .choix-recherche { width: 100%; }
}
@media (max-width: 860px) { .mx-affichage { display: none; } .mx-rapides { display: none !important; } }
/* Rédaction : accusés, pièces glissées-déposées */
.mx-accuses { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.mx-accuses .case { margin: 0; }
.mx-joint { display: inline-flex; align-items: center; gap: 4px; }
.mx-joint-retirer { border: 0; background: none; color: var(--texte-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.mx-joint-retirer:hover { color: var(--rouge); }
.mx-redaction form { position: relative; }
.mx-depot-zone { display: none; position: absolute; inset: 10px; z-index: 20; border: 3px dashed var(--bleu); border-radius: var(--rayon);
    background: color-mix(in srgb, var(--bleu-clair) 88%, transparent); align-items: center; justify-content: center; pointer-events: none; }
.mx-depot-zone span { font-size: 1.15rem; font-weight: 600; color: var(--bleu-fonce); }
.mx-redaction.mx-depot .mx-depot-zone { display: flex; }
.mx-signature-position { display: inline-flex; gap: 4px; align-items: center; }
.mx-signature-position .case { margin: 0; padding: 3px 10px; border: 1px solid var(--bord); border-radius: var(--pilule); font-size: .82rem; }
.mx-signature-position .case:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); }
.mx-signature-position input { width: 14px; height: 14px; }
.mx-signature-pied { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mx-options-envoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .mx-options-envoi { grid-template-columns: minmax(0, 1fr); } }
/* Rédaction : Joindre et accusés sous l'objet, boutons centrés en bas */
.mx-options-message { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 20px 0; }
.mx-options-message .mx-joints { flex: 1; min-width: 0; }
.mx-redaction-pied { justify-content: center; }
.mx-redaction-pied .mx-redaction-boutons { margin-left: 0; }

/* 📬 Axia : notification des nouveaux e-mails */
.axia-tete .axia-notif-mails:not(.actif) { opacity: .65; }
.axia-bulle.axia-bulle-lien { cursor: pointer; }

/* 📬 Pastille de la Messagerie mise à jour en arrière-plan */
.compteur-pulse { animation: compteur-pulse .9s ease-out 2; }
@keyframes compteur-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* @ Autres messageries (IMAP / SMTP) */
button.mx-fournisseur { font: inherit; cursor: pointer; width: 100%; }
button.mx-fournisseur:hover, button.mx-fournisseur[aria-expanded="true"] { border-color: var(--bleu); transform: translateY(-1px); }
.mx-fournisseur-imap .mx-fournisseur-logo, .mx-fournisseur-logo.mx-fournisseur-imap { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.mx-imap-panneau { max-width: 760px; margin: 20px auto 0; padding: 18px 20px 20px; text-align: left; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2, var(--carte)); }
.mx-imap-panneau > h3 { margin: 0 0 4px; text-align: center; }
.mx-imap-panneau > p { text-align: center; margin: 0 auto 14px; max-width: 560px; }
.mx-imap-compte { max-width: none; margin: 14px 0 0; }
.mx-imap-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.mx-imap-mdp { position: relative; display: block; }
.mx-imap-mdp input { width: 100%; padding-right: 40px; }
.mx-imap-mdp button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 6px; }
.mx-imap-resultat { margin: 12px 0 4px; padding: 10px 14px; border-radius: var(--rayon); background: var(--bleu-clair); color: var(--texte); font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mx-imap-resultat.mx-imap-ok { background: rgba(22, 163, 74, .1); }
.mx-imap-resultat.mx-imap-oauth { background: rgba(234, 179, 8, .14); }
.mx-imap-serveurs-trouves, .mx-imap-conseil { flex-basis: 100%; }
.mx-imap-serveurs-trouves { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; color: var(--texte-2); }
.mx-imap-avance { margin-top: 12px; }
.mx-imap-avance > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: 4px 0; }
.mx-imap-serveurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 10px; }
.mx-imap-serveurs fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px 12px 10px; margin: 0; min-width: 0; }
.mx-imap-serveurs legend { font-size: .85rem; font-weight: 600; padding: 0 4px; }
.mx-imap-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; }
.mx-imap-ligne .mx-imap-securite { grid-column: 1 / -1; }
.mx-imap-cases { display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: .88rem; }
.mx-imap-erreur { margin: 12px 0 0; }
.mx-imap-boutons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mx-interrupteur-off { opacity: .55; cursor: default; }
.mx-interrupteur-off .mx-interrupteur-piste { background: var(--gris-clair); }
@media (max-width: 860px) {
    .mx-fournisseurs { grid-template-columns: minmax(0, 1fr); }
    .mx-imap-serveurs { grid-template-columns: minmax(0, 1fr); }
    .mx-imap-panneau { padding: 14px 12px 16px; }
}

/* 📬 Largeur réglable de la colonne des dossiers */
.mx-separateur-dossiers { position: absolute; z-index: 4; top: 0; height: 100%; width: 8px; cursor: col-resize; touch-action: none; }
.mx-separateur-dossiers::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.mx-separateur-dossiers:hover::after, .mx-separateur-dossiers.glisse::after { background: var(--bleu); }

/* ✨ Axia fluide pendant le défilement : couches dédiées, mélange limité à la sphère, animations en pause pendant le défilement */
.axia-orbe, .axia-halo, .axia-remous { will-change: transform; }
.axia-sphere { isolation: isolate; }
.axia-defile .axia-orbe, .axia-defile .axia-orbe * { animation-play-state: paused !important; }

/* 🍥 Multi-clonage (code secret « kagebunshin ») */
.bunshin-scene { position: fixed; inset: 0; pointer-events: none; z-index: 2040; }
.axia.axia-clone { position: fixed; right: auto; bottom: auto; z-index: 2040; pointer-events: none; animation: bunshin-arrive .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.axia-clone .axia-orbe { cursor: default; animation: bunshin-saut 1.1s ease-in-out var(--retard, 0s) infinite; }
.axia-clone.axia-clone-part { animation: bunshin-part .22s ease-in forwards; }
.axia-signe .axia-orbe { animation: bunshin-signe .9s ease-in-out; }
@keyframes bunshin-arrive { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bunshin-saut { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(calc(var(--sens, 1) * 10deg)); } 60% { transform: translateY(0) scale(1.06, .94); } }
@keyframes bunshin-part { to { transform: scale(.3); opacity: 0; } }
@keyframes bunshin-signe { 0% { transform: none; } 20% { transform: scale(.9) rotate(-8deg); } 40% { transform: scale(1.12) rotate(6deg); } 60% { transform: scale(.95) rotate(-4deg); } 100% { transform: scale(1.04); } }
.bunshin-fumee { position: fixed; z-index: 2045; width: 0; height: 0; pointer-events: none; }
.bunshin-fumee i { position: absolute; left: calc(-22px * var(--t, 1)); top: calc(-22px * var(--t, 1)); width: calc(44px * var(--t, 1)); height: calc(44px * var(--t, 1)); border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 38% 32%, #fff 0%, #f1f5f9 38%, #cbd5e1 62%, rgba(148, 163, 184, .7) 68%, rgba(148, 163, 184, 0) 72%); animation: bunshin-fumee 1s ease-out forwards; will-change: transform, opacity; }
@keyframes bunshin-fumee { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 45% { opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(calc(var(--s, 1) * 1.7)); opacity: 0; } }
.bunshin-pouf { position: absolute; left: 0; top: calc(-26px - 14px * var(--t, 1)); transform: translateX(-50%); font: 900 italic calc(12px + 3px * var(--t, 1))/1 system-ui, sans-serif; color: #475569; letter-spacing: .06em; text-shadow: 0 1px 0 #fff; white-space: nowrap; opacity: 0; animation: bunshin-pouf .8s ease-out forwards; }
@keyframes bunshin-pouf { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -14px) scale(1); } }

/* 📐 Rangées de boutons d'action alignées (5 boutons et plus, ordinateur) : même largeur, rangées équilibrées, dernière rangée centrée */
.actions.actions-grille { flex: 1 1 100%; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; }
.actions.actions-grille > * { flex: 0 0 calc((100% - (var(--colonnes, 5) - 1) * 8px) / var(--colonnes, 5)); min-width: 0; display: flex; }
.actions.actions-grille > .btn, .actions.actions-grille > * > .btn, .actions.actions-grille > details > summary.btn {
    width: 100%; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions.actions-grille > form, .actions.actions-grille > details { display: flex; }
.actions.actions-grille > form > .btn { flex: 1; }
.actions.actions-grille > details > summary.btn { display: flex; align-items: center; }
/* Suppression, annulation : toujours en fin de rangée */
.actions.actions-grille > .btn-danger, .actions.actions-grille > :has(> .btn-danger) { order: 10; }

/* ✍️ Correcteur d'orthographe et de grammaire */
::highlight(crm-orthographe) { text-decoration: underline wavy #dc2626; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
::highlight(crm-grammaire) { text-decoration: underline wavy #ea8a00; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
::highlight(crm-typographie) { text-decoration: underline dotted #ea8a00; text-decoration-thickness: 2px; text-underline-offset: 3px; }
::highlight(crm-style) { text-decoration: underline dotted #2563eb; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.correcteur-pastille { position: absolute; z-index: 2200; height: 24px; min-width: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte);
    color: var(--texte-2); font: 600 12px/22px system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s; }
.correcteur-pastille.cr-fautes { background: #fff4e5; border-color: #f5b041; color: #9a4d00; }
.correcteur-pastille.cr-ok { background: #e8f7ee; border-color: #86d3a4; color: #13703c; padding: 0 7px; }
.correcteur-pastille.cr-verif { color: var(--bleu); animation: cr-tourne 1s linear infinite; padding: 0; width: 24px; }
.correcteur-pastille.cr-erreur { opacity: .75; }
.correcteur-pastille.cr-attente:hover, .correcteur-pastille.cr-fautes:hover { filter: brightness(.97); border-color: var(--bleu); }
@keyframes cr-tourne { to { transform: rotate(360deg); } }
.correcteur-panneau { position: absolute; z-index: 2201; max-height: min(430px, 70vh); display: flex; flex-direction: column; background: var(--carte); color: var(--texte);
    border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .35); font-size: .88rem; text-align: left; }
.correcteur-panneau .cr-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.correcteur-panneau .cr-fermer { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--texte-2); padding: 0 4px; }
.correcteur-panneau .cr-liste { overflow-y: auto; padding: 4px 0; }
.correcteur-panneau .cr-item { padding: 9px 12px; border-left: 3px solid transparent; }
.correcteur-panneau .cr-item + .cr-item { border-top: 1px solid var(--gris-clair); }
.correcteur-panneau .cr-item.cr-orthographe { border-left-color: #dc2626; }
.correcteur-panneau .cr-item.cr-grammaire, .correcteur-panneau .cr-item.cr-typographie { border-left-color: #ea8a00; }
.correcteur-panneau .cr-item.cr-style { border-left-color: #2563eb; }
.correcteur-panneau .cr-item.cr-focus { background: var(--survol); }
.correcteur-panneau .cr-nature { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); }
.correcteur-panneau .cr-contexte { margin: 3px 0 2px; color: var(--texte-2); overflow-wrap: anywhere; }
.correcteur-panneau mark { background: none; color: var(--texte); font-weight: 700; text-decoration: underline wavy #dc2626; text-underline-offset: 3px; }
.correcteur-panneau mark.cr-grammaire, .correcteur-panneau mark.cr-typographie { text-decoration-color: #ea8a00; }
.correcteur-panneau mark.cr-style { text-decoration-color: #2563eb; text-decoration-style: dotted; }
.correcteur-panneau .cr-message { font-size: .82rem; color: var(--texte-2); }
.correcteur-panneau .cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.correcteur-panneau .cr-sugg { border: 1px solid #86d3a4; background: #e8f7ee; color: #13703c; font-weight: 700; border-radius: 999px; padding: 3px 11px; cursor: pointer; font-size: .85rem; }
.correcteur-panneau .cr-sugg:hover { background: #d3f0de; }
.correcteur-panneau .cr-lien { border: 0; background: none; color: var(--bleu); cursor: pointer; font-size: .8rem; padding: 3px 4px; }
.correcteur-panneau .cr-lien:hover { text-decoration: underline; }
.correcteur-panneau .cr-pied { display: flex; justify-content: center; padding: 9px 12px; border-top: 1px solid var(--bord); }
.correcteur-panneau { transition: opacity .3s ease, transform .3s ease; }
.correcteur-panneau[hidden], .correcteur-pastille[hidden] { display: none !important; }
.correcteur-panneau.cr-sortie { opacity: 0; transform: translateY(4px); pointer-events: none; }
.correcteur-panneau .cr-vide.cr-encours { color: var(--texte-2); }
.correcteur-panneau .cr-vide.cr-indispo { color: #b45309; }
.correcteur-panneau .cr-vide { margin: 0; padding: 14px 12px; color: #13703c; text-align: center; }

/* Paramètres › Entreprise › Correcteur */
.correcteur-carte .correcteur-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.correcteur-carte textarea { min-height: 120px; font-family: inherit; }
@media (max-width: 760px) { .correcteur-carte .correcteur-grille { grid-template-columns: minmax(0, 1fr); } }

/* --- Sous-menus du menu principal (🎨 Apparence › Sous-menus) --- */
.sous-menu { position: fixed; z-index: 2600; min-width: 220px; max-width: 320px; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
    background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: calc(12px * var(--arrondi));
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .08); animation: sm-entree .14s ease-out; }
.sous-menu[hidden] { display: none; }
@keyframes sm-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sous-menu .sm-item { display: block; padding: 9px 14px; border-radius: calc(8px * var(--arrondi)); color: var(--texte); text-decoration: none; font-size: .92rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sous-menu .sm-item:hover, .sous-menu .sm-item:focus-visible { background: color-mix(in srgb, var(--bleu) 10%, var(--carte)); color: var(--texte); text-decoration: none; outline: none; }
.sous-menu .sm-item.sm-primaire { color: var(--bleu); font-weight: 600; }
.sous-menu .sm-titre { padding: 8px 14px 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); }
.sous-menu .sm-sep { height: 1px; margin: 5px 8px; background: var(--gris-clair); }
.sous-menu .sm-attente { display: flex; justify-content: center; gap: 5px; padding: 14px; }
.sous-menu .sm-attente span { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-2); opacity: .35; animation: sm-point 1s infinite ease-in-out; }
.sous-menu .sm-attente span:nth-child(2) { animation-delay: .15s; }
.sous-menu .sm-attente span:nth-child(3) { animation-delay: .3s; }
@keyframes sm-point { 50% { opacity: .9; transform: translateY(-2px); } }
.sous-menus .nav a.sm-ouvert:not(.actif) { background: var(--entete-survol); }
@media (prefers-reduced-motion: reduce) { .sous-menu { animation: none; } }

/* Pièce jointe : menu Ouvrir / Enregistrer sous */
.mx-piece.mx-piece-active { border-color: var(--bleu); background: var(--survol); }
.mx-piece-menu { position: fixed; z-index: 2700; min-width: 210px; padding: 5px; background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
    border-radius: calc(10px * var(--arrondi)); box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .08); animation: sm-entree .12s ease-out; }
.mx-piece-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; background: none; color: var(--texte);
    font: inherit; font-size: .9rem; text-align: left; border-radius: calc(7px * var(--arrondi)); cursor: pointer; }
.mx-piece-menu button:hover, .mx-piece-menu button:focus-visible { background: color-mix(in srgb, var(--bleu) 10%, var(--carte)); outline: none; }

/* --- 🛍️ Achats --- */
.marge-positive { color: var(--vert); }
.achat-nouveau-fournisseur { display: grid; gap: 6px; margin-top: 8px; }
.achat-nouveau-fournisseur[hidden] { display: none; }
.achat-echeances { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.achat-lignes .achat-ref { margin-top: 4px; font-size: .82rem; min-height: 30px; }
.achat-lignes .achat-article { display: block; width: 100%; margin-top: 4px; font-size: .82rem; min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.achat-lignes .col-affectation { width: 230px; }
.achat-lignes .col-affectation select { display: block; width: 100%; }
.achat-lignes .col-affectation select + select { margin-top: 4px; }
.achat-lignes:not(.achat-reparti) .col-affectation { display: none; }
.achat-pied-lignes { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.achat-totaux { display: grid; grid-template-columns: max-content max-content; gap: 4px 18px; margin: 0; font-variant-numeric: tabular-nums; }
.achat-totaux dt { color: var(--texte-2); text-align: right; }
.achat-totaux dd { margin: 0; text-align: right; }
.achat-affectation { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-puce { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--bord); border-radius: var(--pilule); background: var(--surface-2); color: var(--texte); }
.achat-puce:hover { border-color: var(--bleu); text-decoration: none; }
.achat-marge { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-clair); }
.achat-marge-chiffres { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92rem; }
@media (max-width: 760px) {
    .achat-lignes .col-affectation { width: auto; grid-column: 1 / -1; }
    .achat-pied-lignes { flex-direction: column; align-items: stretch; }
    .achat-totaux { justify-content: end; }
    .achats-filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .achats-filtres > input[type=search] { grid-column: 1 / -1; }
    .achats-filtres > * { width: 100%; min-width: 0; margin: 0; }
}

/* ---------- 🗃️ Stock ---------- */
.stock-plus { color: var(--vert); }
.stock-moins { color: var(--rouge); }
.stock-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stock-type { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.stock-type:hover { border-color: var(--bleu); }
.stock-type.actif { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bleu) 25%, transparent); }
.stock-type input { position: absolute; opacity: 0; pointer-events: none; }
.stock-type-icone { font-size: 1.5rem; line-height: 1.2; }
.stock-inventaire .stock-compte { width: 110px; text-align: right; }
.stock-dans-ligne { font-size: .82rem; }
@media (max-width: 760px) {
    .stock-types { grid-template-columns: 1fr; }
    .stock-type { flex-direction: row; justify-content: flex-start; text-align: left; gap: 8px; flex-wrap: wrap; }
    .stock-inventaire .stock-compte { width: 100%; }
}
.stock-article-encart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); }
.mx-piece.mx-piece-lecture { opacity: .55; pointer-events: none; cursor: progress; }

/* ---------- 🪄 LAD : lecture automatique des factures d'achat ---------- */
form.inline { display: inline-block; margin: 0; vertical-align: middle; }
.lad-depot { display: flex; align-items: center; gap: 14px; padding: 22px 20px; margin-bottom: 16px; border: 2px dashed color-mix(in srgb, var(--bleu) 45%, var(--bord)); border-radius: var(--rayon); background: color-mix(in srgb, var(--bleu-clair) 55%, var(--surface)); transition: background .15s, border-color .15s; }
.lad-depot.lad-survol { border-color: var(--bleu); background: var(--bleu-clair); }
.lad-depot.lad-en-cours { opacity: .7; pointer-events: none; }
.lad-depot-icone { font-size: 2rem; line-height: 1; }
.lad-depot-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lad-depot-compact { padding: 12px 16px; }
.lad-depot-compact .lad-depot-icone { font-size: 1.5rem; }
.lad-depot-compact .lad-depot-texte { flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.lad-depot-attente { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bleu); }
.lad-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--bleu) 25%, transparent); border-top-color: var(--bleu); animation: lad-tourne .8s linear infinite; flex: none; }
@keyframes lad-tourne { to { transform: rotate(360deg); } }
.lad-suivi { margin-top: -4px; display: flex; flex-direction: column; gap: 6px; }
.lad-suivi-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--gris-clair); }
.lad-suivi-nom { font-weight: 600; flex: 1 1 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lad-suivi-fin { display: flex; justify-content: center; gap: 10px; padding-top: 8px; }
.lad-moteurs ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; line-height: 1.55; }
/* Formulaire pré-rempli : facture à gauche, champs à droite */
.lad-split { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 16px; align-items: start; }
.lad-apercu { position: sticky; top: calc(var(--haut-colle, 123px) + 12px); padding: 0; overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - var(--haut-colle, 123px) - 28px); min-height: 520px; }
.lad-apercu-tete { padding: 12px 14px; border-bottom: 1px solid var(--bord); display: flex; flex-direction: column; gap: 6px; }
.lad-apercu-nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lad-apercu-infos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lad-apercu-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lad-apercu-document { flex: 1; background: var(--surface-2); overflow: auto; }
.lad-apercu-document iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lad-apercu-document img { width: 100%; height: auto; display: block; }
.lad-alertes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lad-alerte { padding: 10px 14px; border-radius: var(--rayon); border: 1px solid var(--bord); font-size: .92rem; }
.lad-alerte .case { display: flex; }
.lad-alerte-danger { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 35%, var(--bord)); color: color-mix(in srgb, var(--rouge) 80%, var(--texte)); font-weight: 600; }
.lad-alerte-attention { background: var(--orange-clair); border-color: color-mix(in srgb, var(--orange) 35%, var(--bord)); }
.lad-alerte-info { background: var(--bleu-clair); border-color: color-mix(in srgb, var(--bleu) 25%, var(--bord)); }
.lad-legende { margin-bottom: 10px; }
.lad-puce { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; font-size: .72rem; vertical-align: middle; border: 1.5px solid; cursor: help; }
.lad-sur { border-color: var(--vert); background: var(--vert-clair); }
.lad-probable { border-color: var(--orange); background: var(--orange-clair); }
.lad-incertain { border-color: var(--rouge); background: var(--rouge-clair); }
.lad-appris { border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, var(--surface)); }
.lad-a-verifier { border-color: var(--orange) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 22%, transparent); }
.lad-controle.lad-ok::after { content: ' ✓'; color: var(--vert); font-weight: 700; }
.lad-controle.lad-ecart { color: var(--rouge); font-weight: 700; }
.lad-controle.lad-ecart::after { content: ' ⚠'; }
.lad-formulaire .form-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 1100px) {
    .lad-split { grid-template-columns: 1fr; }
    .lad-apercu { position: static; height: 60vh; min-height: 380px; }
}
@media (max-width: 760px) {
    .lad-depot { flex-direction: column; text-align: center; padding: 16px 12px; }
    .lad-depot-compact .lad-depot-texte { justify-content: center; }
    .lad-apercu { height: 55vh; }
}
.lad-depot-attente[hidden], .lad-suivi[hidden] { display: none; }
.lad-moteurs-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lad-etapes { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }

/* ---------- 💊 Secret « matrix » d'Axia : pluie de caractères verts sur tout l'écran ---------- */
.matrice-scene { position: fixed; inset: 0; z-index: 2050; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .7s ease; cursor: pointer; }
.matrice-scene.visible { opacity: 1; }
.matrice-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.matrice-texte { position: absolute; left: 8vw; top: 42%; font: 600 clamp(1.1rem, 2.6vw, 2rem)/1.3 "Courier New", ui-monospace, monospace; color: #b6ffc8;
    text-shadow: 0 0 6px #00ff41, 0 0 18px #00ff41; letter-spacing: .04em; padding: 10px 16px; background: rgba(0, 0, 0, .55); border-radius: 4px; white-space: pre; }
.matrice-curseur { display: inline-block; margin-left: 2px; color: #00ff41; animation: matrice-clignote 1s steps(1) infinite; }
@keyframes matrice-clignote { 50% { opacity: 0; } }
.axia.axia-matrice { z-index: 2100; }
.axia-matrice .axia-orbe { filter: saturate(.3) sepia(1) hue-rotate(68deg) saturate(3) drop-shadow(0 0 14px #00ff41); transition: filter .6s; }
.axia-matrice .axia-bulle { display: none; }
@media (prefers-reduced-motion: reduce) { .matrice-curseur { animation: none; } }

/* ---------- 🧭 Menu principal : groupes déroulants (🎨 Apparence › Menu principal) ---------- */
.nav-groupe { display: flex; flex: none; }
.nav-groupe-bouton { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--entete-texte-2);
    border-radius: calc(6px * var(--arrondi)); cursor: pointer; white-space: nowrap; }
.nav-groupe-bouton:hover, .nav-groupe.ouvert .nav-groupe-bouton { background: var(--entete-survol); color: var(--entete-texte); }
.nav-groupe.actif .nav-groupe-bouton { background: var(--entete-actif); color: var(--entete-actif-texte); }
.nav-groupe-icone { font-size: .95em; line-height: 1; }
.nav-groupe-fleche { font-size: .72em; opacity: .7; transition: transform .15s; }
.nav-groupe.ouvert .nav-groupe-fleche { transform: rotate(180deg); }
.nav-groupe-menu { position: fixed; z-index: 950; min-width: 210px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--carte); border: 1px solid var(--bord);
    border-radius: var(--rayon); box-shadow: var(--ombre-forte, 0 12px 32px rgba(15, 23, 42, .18)); }
.nav-groupe-menu[hidden] { display: none; }
.nav-groupe-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: calc(6px * var(--arrondi)); color: var(--texte); font-weight: 500; white-space: nowrap; }
.nav-groupe-menu a:hover, .nav-groupe-menu a:focus-visible { background: var(--bleu-clair); text-decoration: none; color: var(--texte); }
.nav-groupe-menu a.actif { background: var(--bleu-clair); color: var(--bleu); font-weight: 600; }
.nav-groupe-menu .compteur { margin-left: auto; }
html.nav-serre .nav-groupe-bouton { padding-left: 8px; padding-right: 8px; }
html.nav-serre-2 .nav-groupe-bouton { padding-left: 5px; padding-right: 5px; font-size: .9rem; }
html[data-densite="compact"] .nav-groupe-bouton { padding: 6px 10px; }
html[data-densite="aere"] .nav-groupe-bouton { padding: 9px 14px; }
@media (max-width: 1100px) { .nav-groupe-bouton { padding: 8px 8px; font-size: .93rem; } }

/* ---------- 🧭 Éditeur du menu principal (🎨 Apparence) ---------- */
.mp-carte { display: flex; flex-direction: column; gap: 14px; }
.mp-modeles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-modele { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon);
    background: var(--surface); font: inherit; color: var(--texte); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.mp-modele:hover { border-color: var(--bleu); }
.mp-modele.actif { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bleu) 25%, transparent); }
.mp-modele-perso { cursor: default; opacity: .65; }
.mp-modele-perso.actif { opacity: 1; }
.mp-apercu-titre { margin-bottom: -8px; }
.mp-apercu { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-radius: var(--rayon); background: var(--entete); border: 1px solid var(--entete-bord); }
.mp-ap { padding: 6px 10px; border-radius: calc(6px * var(--arrondi)); font-weight: 500; font-size: .9rem; color: var(--entete-texte-2, var(--texte)); white-space: nowrap; }
.mp-ap-fixe { background: var(--entete-actif, var(--bleu-clair)); color: var(--entete-actif-texte, var(--bleu)); }
.mp-ap-groupe { border: 1px dashed color-mix(in srgb, var(--bleu) 50%, var(--bord)); }
.mp-fixes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.mp-fixe { padding: 6px 12px; border-radius: var(--pilule); background: var(--surface-2); border: 1px solid var(--bord); font-size: .9rem; color: var(--texte-2); }
.mp-liste, .mp-groupe-menus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-menu, .mp-groupe-tete { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }
.mp-menu { cursor: grab; }
.mp-poignee { color: var(--texte-2); cursor: grab; font-size: 1.1rem; line-height: 1; }
.mp-icone { width: 1.4em; text-align: center; }
.mp-nom { font-weight: 600; flex: 1; min-width: 0; }
.mp-outils { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.mp-ranger { width: auto; min-width: 150px; padding-top: 4px; padding-bottom: 4px; font-size: .85rem; }
.mp-groupe { border: 1px solid color-mix(in srgb, var(--bleu) 35%, var(--bord)); border-radius: var(--rayon); background: color-mix(in srgb, var(--bleu-clair) 55%, var(--surface)); padding: 8px; }
.mp-groupe-tete { border: 0; background: transparent; padding: 0 2px 8px; cursor: grab; }
.mp-groupe-icone { width: auto; padding: 4px 6px; font-size: 1.05rem; }
.mp-groupe-nom { flex: 1; min-width: 120px; max-width: 280px; font-weight: 700; }
.mp-groupe-menus { padding-left: 22px; }
.mp-depot { padding: 6px 10px; border: 1px dashed var(--bord); border-radius: var(--rayon); color: var(--texte-2); font-size: .82rem; text-align: center; }
.mp-glisse { opacity: .45; }
.mp-cible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.mp-depot.mp-cible { background: var(--bleu-clair); }
.mp-ajout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mp-note { margin: 0; text-align: center; }
@media (max-width: 900px) { .mp-modeles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .mp-modeles { grid-template-columns: 1fr; }
    .mp-menu, .mp-groupe-tete { flex-wrap: wrap; }
    .mp-outils { width: 100%; justify-content: flex-start; }
    .mp-groupe-menus { padding-left: 8px; }
}

/* Sous-menus en cascade dans les groupes du menu principal (🎨 Apparence › Sous-menus dans les groupes) */
.sm-groupes-reglage { margin-top: 10px; }
.sm-groupes-reglage.ar-off { opacity: .55; }
.sous-menu.sm-cascade { z-index: 2600; }
@media (hover: hover) and (min-width: 1001px) {
    html.sous-menus.sous-menus-groupes .nav-groupe-menu > a::after { content: '›'; margin-left: auto; padding-left: 14px; font-size: 1.1em; line-height: 1; color: var(--texte-2); opacity: .55; transition: transform .15s, opacity .15s; }
    html.sous-menus.sous-menus-groupes .nav-groupe-menu > a:has(.compteur)::after { margin-left: 0; padding-left: 10px; }
    html.sous-menus.sous-menus-groupes .nav-groupe-menu > a.sm-ouvert { background: var(--bleu-clair); }
    html.sous-menus.sous-menus-groupes .nav-groupe-menu > a.sm-ouvert::after { opacity: 1; color: var(--bleu); transform: translateX(2px); }
}

/* 🧭 Menu sur mesure gardé (repris en un clic après un retour au menu classique) */
.mp-modele-perso.mp-perso-garde { opacity: 1; border-style: dashed; }
.mp-modele-perso.mp-perso-garde.actif { border-style: solid; }
.mp-perso-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ======================================================================
   📺 Centre de contrôle : liste des écrans, modèles et éditeur (l'écran affiché a sa propre feuille : centre-controle.css)
   ====================================================================== */
.cc-ecrans { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.cc-ecrans > .cc-ecran { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin: 0; }
.cc-ecran-apercu { position: relative; display: block; border-radius: calc(10px * var(--arrondi)); overflow: hidden; text-decoration: none; }
.cc-ecran-lecture { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; background: rgba(5, 10, 25, .45); opacity: 0; transition: opacity .2s; }
.cc-ecran-apercu:hover .cc-ecran-lecture, .cc-ecran-apercu:focus-visible .cc-ecran-lecture { opacity: 1; }
.cc-ecran-infos h2 { margin: 0 0 2px; font-size: 1.1rem; }
.cc-ecran-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cc-ecran-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: auto; }
.cc-ecran-actions .btn { white-space: nowrap; }
.cc-ecran-actions form { margin: 0; }
.cc-accueil { text-align: center; padding: 34px 24px; max-width: 720px; margin: 0 auto 16px; }
.cc-accueil-icone { font-size: 52px; }
.cc-accueil h2 { margin: 8px 0; }
.cc-aide h2 { margin: 0 0 8px; font-size: 1.05rem; }
.cc-aide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--texte-2); }
.cc-aide strong { color: var(--texte); }
.cc-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cc-modeles > .card.cc-modele { margin: 0; }
.cc-modele { display: flex; flex-direction: column; gap: 6px; padding: 14px; margin: 0; color: var(--texte); text-decoration: none; transition: border-color .15s, transform .15s; }
.cc-modele:hover { border-color: var(--bleu); transform: translateY(-2px); text-decoration: none; }
.cc-modele .ccm { margin-bottom: 6px; }

/* Miniature d'une page d'écran */
.ccm { --m-fond: #070b14; --m-carte: #111a2e; --m-texte: #cfe0ff; --m-accent: #38bdf8; --m-bord: color-mix(in srgb, var(--m-accent) 22%, transparent);
    aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--m-fond); color: var(--m-texte); border-radius: calc(10px * var(--arrondi)); border: 1px solid var(--bord); }
.ccm-crm { --m-fond: var(--fond); --m-carte: var(--carte); --m-texte: var(--texte); --m-bord: var(--bord); }
.ccm-tete { display: flex; justify-content: space-between; align-items: center; font-size: 10px; opacity: .85; }
.ccm-tete span { width: 22%; height: 4px; border-radius: 3px; background: var(--m-bord); }
.ccm-grille { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; gap: 4px; }
.ccm-tuile { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 5px;
    background: var(--m-carte); border: 1px solid var(--m-bord); font-size: 11px; text-align: center; padding: 2px; }
.ccm-tuile em { font-style: normal; font-size: 8.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ccm-vide { grid-column: 1 / -1; grid-row: span 2; display: grid; place-items: center; font-size: 11px; opacity: .6; }

/* Éditeur */
.cc-editeur { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cc-editeur .card { margin-bottom: 16px; }
.cc-editeur h2 { margin: 0 0 12px; font-size: 1.05rem; }
.cc-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.cc-section-tete h2 { margin: 0; }
.cc-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cc-onglet { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.cc-onglet:hover { border-color: var(--bleu); }
.cc-onglet.actif { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.cc-onglet.actif .muted { color: inherit; opacity: .8; }
.cc-onglet-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .78rem; background: var(--gris-clair); color: var(--texte); }
.cc-onglet.actif .cc-onglet-num { background: rgba(255, 255, 255, .25); color: inherit; }
.cc-onglet-ajout { border-style: dashed; color: var(--bleu); }
.cc-page-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cc-page-nom-champ { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.cc-page-nom-champ input { width: 220px; }
.cc-page-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-maquette-cadre { --m-fond: #070b14; --m-carte: #111a2e; --m-texte: #dbe7ff; --m-accent: #38bdf8;
    --m-texte-2: color-mix(in srgb, var(--m-texte) 62%, var(--m-fond)); --m-bord: color-mix(in srgb, var(--m-accent) 24%, transparent);
    display: flex; flex-direction: column; gap: 8px; aspect-ratio: 16 / 9; padding: 12px; border-radius: calc(12px * var(--arrondi));
    background: radial-gradient(600px 300px at 10% -10%, color-mix(in srgb, var(--m-accent) 16%, transparent), transparent 60%), var(--m-fond); color: var(--m-texte); box-shadow: var(--ombre-forte); }
.cc-maquette-cadre[data-cc-theme-maquette="crm"] { --m-fond: var(--fond); --m-carte: var(--carte); --m-texte: var(--texte); --m-texte-2: var(--texte-2); --m-bord: var(--bord); --m-accent: var(--bleu); background: var(--m-fond); border: 1px solid var(--bord); }
.cc-maquette-tete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: .82rem; color: var(--m-texte-2); }
.cc-maquette-tete b { color: var(--m-texte); }
.cc-maquette-tete strong { font-size: 1.3rem; color: var(--m-texte); }
.cc-maquette-direct { justify-self: end; color: #34d399; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.cc-maquette { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; gap: 7px; }
.cc-mq-tuile { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center;
    border-radius: 8px; background: var(--m-carte); border: 1px solid var(--m-bord); cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.cc-mq-tuile:hover { border-color: var(--m-accent); }
.cc-mq-tuile.choisie { box-shadow: 0 0 0 2px var(--m-accent); }
.cc-mq-tuile.glissee { opacity: .4; }
.cc-mq-tuile.cible { box-shadow: inset 3px 0 0 var(--m-accent), 0 0 0 1px var(--m-accent); }
.cc-mq-tuile.cc-mq-masquee { opacity: .55; }
.cc-mq-tuile.cc-mq-masquee .cc-mq-titre::after { content: " 🔒"; }
.cc-mq-icone { font-size: clamp(14px, 2vw, 26px); line-height: 1; }
.cc-mq-titre { font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cc-mq-texte { font-size: .68rem; color: var(--m-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cc-mq-vide { grid-column: 1 / -1; grid-row: span 3; border: 2px dashed var(--m-bord); border-radius: 12px; background: none; color: var(--m-texte-2); font: inherit; font-weight: 600; cursor: pointer; }
.cc-mq-vide:hover { border-color: var(--m-accent); color: var(--m-accent); }
.cc-tuiles-liste { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-tl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(8px * var(--arrondi)); border: 1px solid var(--bord); background: var(--carte); }
.cc-tl.choisie { border-color: var(--bleu); background: var(--bleu-clair); }
.cc-tl-icone { font-size: 1.35rem; }
.cc-tl-nom { min-width: 0; display: flex; flex-direction: column; }
.cc-tl-nom .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tl-euro { font-size: .8rem; }
.cc-tl-texte { margin-top: 4px; }
.cc-tl-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
.cc-tl-taille { display: inline-flex; align-items: center; gap: 3px; font-size: .85rem; color: var(--texte-2); }
.cc-tl-taille select, .cc-tl-deplacer { padding: 4px 6px; font-size: .85rem; width: auto; }
.cc-ajout { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.cc-nom-ligne { display: flex; gap: 6px; }
.cc-nom-ligne select { width: 64px; flex: none; font-size: 1.05rem; }
.cc-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-theme-choix { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--bord); border-radius: calc(10px * var(--arrondi)); cursor: pointer; font-weight: 600; font-size: .86rem; transition: border-color .15s, box-shadow .15s; }
.cc-theme-choix:hover { border-color: var(--bleu); }
.cc-theme-choix:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bleu) 30%, transparent); }
.cc-theme-choix input { position: absolute; opacity: 0; pointer-events: none; }
.cc-theme-choix:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
.cc-theme-vignette { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; height: 38px; padding: 5px; border-radius: 7px;
    background: radial-gradient(80px 40px at 10% 0%, color-mix(in srgb, var(--t-accent) 35%, transparent), transparent 70%), var(--t-fond); border: 1px solid color-mix(in srgb, var(--t-accent) 25%, transparent); }
.cc-theme-vignette i { border-radius: 3px; background: var(--t-carte); border-top: 2px solid var(--t-accent); }
.cc-theme-vignette i:first-child { grid-column: span 2; }
.cc-theme-choix-crm { --t-fond: var(--fond); --t-carte: var(--carte); --t-accent: var(--bleu); }
.cc-theme-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.cc-masquer { align-items: flex-start; margin-top: 8px; }
.cc-lien { display: flex; gap: 6px; }
.cc-lien input { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.cc-qr { width: 150px; margin: 12px auto 8px; padding: 6px; background: #fff; border-radius: 10px; }
.cc-qr svg { display: block; width: 100%; height: auto; }
.cc-lien-actions h2 { margin: 0 0 10px; font-size: 1.05rem; }
.cc-lien-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-lien-boutons form { margin: 0; }
.cc-pin-form { display: flex; gap: 6px; }
.cc-pin-form input { width: 190px; }
.cc-catalogue { width: min(880px, calc(100vw - 32px)); max-width: none; text-align: left; }
.cc-catalogue h3 { margin: 14px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); }
.cc-catalogue-corps { max-height: min(62vh, 620px); overflow-y: auto; padding-right: 4px; }
.cc-cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cc-cat-tuile { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-align: left; border: 1px solid var(--bord); border-radius: calc(10px * var(--arrondi));
    background: var(--carte); color: var(--texte); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.cc-cat-tuile:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.cc-cat-tuile > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-cat-icone { font-size: 1.5rem; line-height: 1.1; }
.cc-cat-deja { font-size: .74rem; color: var(--vert); font-weight: 700; margin-top: 2px; }
.cc-cat-deja[hidden] { display: none; }
.cc-tl-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: .85rem; color: var(--texte-2); }
.cc-tl-agenda label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; }
.cc-tl-agenda select { width: auto; padding: 4px 6px; font-size: .85rem; }
.cc-tl-case input { margin: 0; }
@media (max-width: 1100px) { .cc-editeur { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .cc-tl { grid-template-columns: auto minmax(0, 1fr); }
    .cc-tl-outils { grid-column: 1 / -1; justify-content: flex-start; }
    .cc-page-nom-champ input { width: 100%; }
    .cc-page-nom-champ { flex: 1; }
    .cc-maquette-cadre { padding: 8px; }
    .cc-mq-titre { font-size: .62rem; }
}

/* Sauvegardes : échec de la sauvegarde automatique (raison et prochain essai) */
.sv-echec { display: grid; gap: 4px; }
.sv-echec-raison { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; color: var(--texte); background: color-mix(in srgb, var(--carte) 70%, transparent); border-radius: calc(5px * var(--arrondi)); padding: 6px 9px; }

/* ================================================================== 📱 Application iPhone */
/* Bouton 📱 de la barre du haut : seulement sur les écrans tactiles (rien ne change sur ordinateur) */
@media (hover: hover) and (pointer: fine) { .seul-tactile { display: none !important; } }
/* Bandeau « hors ligne » / « saisies envoyées » */
.appli-bandeau { position: sticky; top: 0; z-index: 2600; padding: 8px 14px; font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.35; }
.appli-bandeau[hidden] { display: none; }
.appli-bandeau-hors { background: #fff4e5; color: #8a4b00; border-bottom: 1px solid #f5c98b; }
.appli-bandeau-ok { background: var(--vert-clair, #e8f6ee); color: var(--vert, #1b7f5b); border-bottom: 1px solid color-mix(in srgb, var(--vert, #1b7f5b) 30%, transparent); }
/* Invitation à installer (Safari sur iPhone) */
.appli-invitation { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2650; display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 10px 12px; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre-forte, 0 10px 30px rgba(15, 23, 42, .18));
    animation: confirm-entree .25s ease-out; max-width: 520px; margin: 0 auto; }
.appli-invitation img { border-radius: 9px; flex: 0 0 auto; }
.appli-invitation > div { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
.appli-invitation strong { font-size: 14px; }
.appli-invitation span { font-size: 12.5px; color: var(--texte-2); }
.appli-invitation-fermer { border: 0; background: none; color: var(--texte-2); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }
/* Application installée : la barre du système (heure, batterie) reste lisible, le bas de l'écran laisse la place à la barre d'accueil */
html.appli-installee body { padding-bottom: env(safe-area-inset-bottom); -webkit-tap-highlight-color: transparent; }
/* Connexion par Face ID */
.faceid-zone[hidden] { display: none; }
.faceid-separateur { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--texte-2); font-size: 13px; }
.faceid-separateur::before, .faceid-separateur::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
.faceid-bouton { gap: 8px; justify-content: center; }
.faceid-erreur { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--rouge-clair); color: var(--rouge); font-size: 13.5px; }
.faceid-erreur[hidden] { display: none; }
/* Page 📱 Application iPhone */
.appli-page { display: grid; gap: 16px; }
.appli-page > .alerte { margin: 0; }
.appli-carte h2 { margin: 0; }
.appli-carte h3 { font-size: 14px; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.appli-carte > h2 + p, .appli-carte > .card-head + p { margin-top: 10px; }
.appli-bas { gap: 16px; }
.appli-bas .appli-carte h2 { margin-bottom: 10px; }
.appli-installer { display: flex; gap: 24px; align-items: center; margin-top: 12px; }
.appli-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1 1 auto; }
.appli-etapes li { display: flex; gap: 12px; align-items: flex-start; }
.appli-etapes li > div { display: block; line-height: 1.4; }
.appli-etapes li > div > span:not(.appli-picto) { display: block; margin-top: 2px; font-size: 13px; color: var(--texte-2); }
.appli-num { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu-clair); color: var(--bleu); font-weight: 700; font-size: 14px; }
.appli-picto { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--gris-clair); color: var(--bleu); vertical-align: middle; margin-left: 4px; font-weight: 700; }
.appli-qr { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; text-align: center; }
.appli-qr #appli-qr { width: 150px; height: 150px; padding: 6px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; }
.appli-qr svg { width: 100%; height: 100%; display: block; }
.appli-etat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 12px; border-radius: 10px; background: var(--surface-2, var(--gris-clair)); font-weight: 600; }
.appli-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.appli-type { padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.appli-pied { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.appli-rappel { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.appli-rappel select { width: auto; }
.appli-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bord); }
.appli-ligne > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.appli-ligne-icone { font-size: 22px; }
.appli-cle-creer { margin: 12px 0 6px; flex-wrap: wrap; }
.appli-cle-creer input { flex: 1 1 260px; max-width: 360px; }
.appli-attente { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font-weight: 600; font-size: 13.5px; }
.appli-attente[hidden] { display: none; }
@media (max-width: 720px) {
    .appli-installer { flex-direction: column-reverse; align-items: stretch; }
    .appli-qr { display: none; }
    .appli-etat { flex-direction: column; align-items: stretch; }
    .appli-etat .actions { justify-content: center; }
    .appli-pied { justify-content: center; }
    .appli-pied .btn { width: 100%; justify-content: center; }
    .appli-cle-creer input, .appli-cle-creer .btn { flex: 1 1 100%; max-width: none; justify-content: center; }
}
/* Scan des codes-barres (écrans tactiles) */
.appli-scan-champ { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.appli-scan-champ > input, .appli-scan-champ > textarea { flex: 1 1 auto; min-width: 0; }
.appli-scan-bouton { flex: 0 0 auto; min-width: 42px; }
.appli-scan { width: min(480px, calc(100vw - 24px)); }
.appli-scan-video { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; margin: 10px 0; }
.appli-scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.appli-scan-viseur { position: absolute; inset: 22% 12%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); }
.appli-scan-viseur::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: appli-scan 1.6s ease-in-out infinite alternate; }
@keyframes appli-scan { from { transform: translateY(-34px); } to { transform: translateY(34px); } }
.appli-scan-etat { margin: 0 0 12px; color: var(--texte-2); }
.securite-faceid { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.securite-faceid h2 { margin: 0; }
.appli-page [hidden] { display: none !important; }
.appli-carte .card-head { flex-wrap: wrap; gap: 8px; }
/* iPhone, tablette : en tirant la page au-delà du haut, plus de bande blanche au-dessus de l'en-tête.
   Le fond « derrière » la page prend la couleur de l'en-tête, et l'application installée ne rebondit plus (comme une app native). */
@media (pointer: coarse) {
    html { background-color: var(--entete); }
    body { min-height: 100vh; min-height: 100dvh; }
    html.appli-installee, html.appli-installee body { overscroll-behavior-y: none; }
}
/* Messagerie sur iPhone : doigt maintenu sur un e-mail → menu au bas de l'écran (sans l'aperçu de lien d'iOS) */
@media (pointer: coarse) {
    [data-mx-ouvrir] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .mx-ligne-appui { transform: scale(.985); background: var(--survol); transition: transform .35s ease, background .2s; }
    .mx-ctx.mx-ctx-feuille { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); min-width: 0; max-height: 78vh; overflow-y: auto;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 8px 8px; border-radius: 18px; z-index: 2700;
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .38), var(--ombre-forte); animation: mx-feuille .22s ease-out; }
    .mx-ctx-feuille .mx-ctx-tete { display: grid; gap: 2px; padding: 10px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gris-clair); text-align: center; }
    .mx-ctx-feuille .mx-ctx-tete::before { content: ''; justify-self: center; width: 38px; height: 5px; border-radius: 3px; background: var(--bord); margin: -4px 0 8px; }
    .mx-ctx-feuille .mx-ctx-tete strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mx-ctx-feuille .mx-ctx-tete span { font-size: 12.5px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mx-ctx-feuille .mx-ctx-item { padding: 12px 12px; font-size: 16px; gap: 12px; }
    .mx-ctx-feuille .mx-ctx-ico { width: 24px; font-size: 18px; }
    .mx-ctx-feuille .mx-ctx-sous { position: static; display: none; max-height: none; overflow: visible; margin: 0 0 4px 24px; padding: 2px 0; border: 0; box-shadow: none; background: none; }
    .mx-ctx-feuille .mx-ctx-groupe:hover > .mx-ctx-sous { display: none; }
    .mx-ctx-feuille .mx-ctx-groupe.ouvert > .mx-ctx-sous { display: block; }
    .mx-ctx-feuille .mx-ctx-groupe.ouvert > .mx-ctx-item .mx-ctx-fleche { transform: rotate(90deg); }
    .mx-ctx-feuille .mx-ctx-fleche { transition: transform .15s; }
}
@keyframes mx-feuille { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (pointer: coarse) {
    .mx-ctx-feuille .mx-ctx-item:hover, .mx-ctx-feuille .mx-ctx-item:focus-visible { background: none; }
    .mx-ctx-feuille .mx-ctx-item:active { background: var(--survol); }
}
@keyframes mx-lecture-entree { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mx-lecture-ouverte .mx-lecture { animation: none; } }
html.mx-lecture-plein .mx-toast { z-index: 2600; }

/* ================================================================== 🗂️ Boutons des fiches rangés par famille */
.page-head:has(> .actions-familles) { flex-wrap: wrap; }
.page-head > .actions.actions-familles { flex: 1 1 100%; width: 100%; display: block; }
/* Largeur des cartes (Apparence) : largeur maximale d'une carte, cartes centrées ; « pleine » = toute la ligne */
html { --af-l: 290px; }
html[data-af-largeur="compacte"] { --af-l: 240px; }
html[data-af-largeur="compacte"] .af-boutons .btn { white-space: normal; line-height: 1.25; } /* libellé long : 2 lignes plutôt que coupé */
html[data-af-largeur="large"] { --af-l: 380px; }
html[data-af-largeur="pleine"] { --af-l: 1fr; }
.af-grille { display: grid; grid-template-columns: repeat(var(--af-n, 4), minmax(0, var(--af-l))); justify-content: center; gap: 10px; align-items: stretch; }
.af-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px 10px 10px; min-width: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.af-titre { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; cursor: default;
    font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.af-nombre, .af-chevron { display: none; }
.af-boutons { display: grid; gap: 6px; }
.af-boutons > *, .af-plus > * { min-width: 0; margin: 0; }
.af-boutons > form, .af-boutons > details { display: flex; }
.af-boutons .btn, .af-boutons > form > .btn, .af-boutons > details > summary.btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-boutons > form > .btn { flex: 1; }
.af-pied { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.af-plus { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px 4px 12px; border: 1px dashed var(--bord); border-radius: var(--pilule, 999px); }
.af-plus-titre { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); margin-right: 2px; }
.af-plus .btn { padding-top: 5px; padding-bottom: 5px; }
.af-pied > form, .af-pied > .btn-danger { margin: 0; }
/* Couleur discrète de chaque famille (liseré du haut) */
.af-carte { border-top: 3px solid var(--af-couleur, var(--bord)); }
/* Mode « Organiser » : familles en pointillés, boutons à toucher pour les ranger */
.af-organiser { flex: none; }
.af-edition .af-carte, .af-edition .af-plus { outline: 2px dashed color-mix(in srgb, var(--bleu) 45%, transparent); outline-offset: 2px; }
.af-edition .af-boutons > :not(.af-ajouter-ici), .af-edition .af-plus > :not(.af-plus-titre) { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.af-vide.af-ajouter-ici { width: 100%; background: transparent; font: inherit; font-size: .85rem; cursor: pointer; color: var(--bleu); }
.af-vide.af-ajouter-ici:hover { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 6%, transparent); }
.af-fantome { position: fixed; z-index: 3000; pointer-events: none; margin: 0; opacity: .92; transform: rotate(-2deg) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.22); border-radius: calc(var(--rayon) * .8); }
.af-source { opacity: .35; }
.af-glisse, .af-glisse * { cursor: grabbing !important; }
.af-edition .af-survol { outline: 2px solid var(--bleu); background: color-mix(in srgb, var(--bleu) 8%, var(--carte)); }
.af-arrive { animation: af-arrive .7s ease; }
@keyframes af-arrive { 0% { transform: scale(.92); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 50%, transparent); } 100% { transform: none; box-shadow: none; } }
.af-choix .af-choix-famille small { display: block; font-size: .75rem; font-weight: 400; }
.af-edition .af-boutons .btn, .af-edition .af-plus .btn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bleu) 35%, transparent); }
.af-vide { padding: 10px; text-align: center; font-size: .85rem; color: var(--texte-3, var(--texte-2)); border: 1px dashed var(--bord); border-radius: calc(var(--rayon) * .8); }
.af-aide { flex: 1 1 100%; text-align: center; font-size: .86rem; color: var(--texte-2); }
.af-aide a { font-weight: 600; }
.af-choix-liste { display: grid; gap: 6px; margin: 0 0 14px; }
.af-choix-liste .btn { justify-content: center; }
/* Fiche figée sous le menu (ordinateur) : rien ne déborde */
html.entete-fige .page-head > .actions.actions-familles { overflow: visible; }
/* Téléphone : familles repliables, deux par ligne ; une famille ouverte prend toute la largeur */
@media (max-width: 760px) {
    html.entete-fige .page-head .actions.actions-familles, .page-head .actions.actions-familles { display: block; flex-wrap: wrap; overflow: visible; max-width: none; }
    .af-grille { grid-template-columns: 1fr 1fr; gap: 8px; grid-auto-flow: row dense; }
    .af-carte { padding: 0; }
    .af-carte.ouvert { grid-column: 1 / -1; padding: 0 10px 10px; }
    .af-titre { cursor: pointer; justify-content: flex-start; min-height: 44px; margin: 0; padding: 0 12px; font-size: .78rem; }
    .af-carte.ouvert .af-titre { padding: 0 2px; }
    .af-nombre { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gris-clair); color: var(--texte-2); font-size: .72rem; letter-spacing: 0; }
    .af-chevron { display: inline-block; margin-left: auto; font-size: 18px; transition: transform .15s; }
    .af-carte.ouvert .af-chevron { transform: rotate(90deg); }
    .af-carte:not(.ouvert) .af-boutons { display: none; }
    .af-carte.ouvert .af-boutons { grid-template-columns: 1fr; }
    .af-boutons .btn, .af-boutons > form > .btn, .af-boutons > details > summary.btn { white-space: normal; min-height: 42px; }
    .af-pied { justify-content: center; }
    .af-plus { border-radius: var(--rayon); }
}
/* Apparence : petite maquette du réglage */
.af-reglage { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.af-mini { display: grid; grid-template-columns: repeat(4, 74px); gap: 6px; }
.af-mini div { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--bord); border-radius: 6px; background: var(--fond); }
.af-mini b { font-size: 9px; font-weight: 700; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.af-mini i { display: block; height: 7px; border-radius: 3px; background: var(--gris-clair); border: 1px solid var(--bord); }
.af-mini i.p { background: var(--bleu); border-color: var(--bleu); }
@media (max-width: 560px) { .af-mini { display: none; } }
/* Apparence : éditeur des familles */
.af-editeur { margin-top: 10px; }
.af-editeur-tete { display: grid; gap: 2px; margin-bottom: 10px; }
.af-lignes { display: grid; gap: 8px; }
.af-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--bord); border-left: 4px solid var(--af-couleur, var(--bord)); border-radius: calc(var(--rayon) * .8); background: var(--carte); }
.af-ligne .af-icone { width: 52px; flex: none; text-align: center; font-size: 1.05rem; }
.af-ligne .af-nom-champ { flex: 1 1 auto; min-width: 0; max-width: 340px; font-weight: 600; }
.af-ligne-boutons { display: flex; gap: 4px; margin-left: auto; }
.af-retirer { color: var(--rouge); }
.af-editeur-pied { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.af-editeur-pied [data-af-etat] { flex: 1 1 100%; text-align: center; min-height: 1.2em; }

/* Hauteur des boutons des cartes (Apparence) */
html[data-af-hauteur="compacte"] .af-boutons { gap: 4px; }
html[data-af-hauteur="compacte"] .af-boutons .btn { min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: .86rem; }
html[data-af-hauteur="confortable"] .af-boutons { gap: 8px; }
html[data-af-hauteur="confortable"] .af-boutons .btn { min-height: 46px; }
@media (max-width: 760px) {
    html[data-af-hauteur="compacte"] .af-boutons .btn { min-height: 36px; } /* doigt : jamais trop petit */
    html[data-af-hauteur="confortable"] .af-boutons .btn { min-height: 50px; }
}
/* Apparence : schémas, aperçu réel et menus concernés */
.af-reglages-plus { margin-top: 4px; }
.af-schema { display: flex; align-items: center; justify-content: center; gap: 5px; height: 86px; padding: 0 12px; background: var(--fond); border-radius: calc(8px * var(--arrondi, 1)); border: 1px solid var(--bord); }
.af-schema > i { display: block; height: 46px; border-radius: 4px; background: var(--carte); border: 1px solid var(--bord); border-top: 3px solid var(--bleu); }
.af-schema-l-compacte > i { width: 18%; } .af-schema-l-equilibree > i { width: 24%; } .af-schema-l-large > i { width: 29%; } .af-schema-l-pleine > i { flex: 1; }
.af-schema > b { display: grid; gap: 4px; width: 60%; padding: 6px; background: var(--carte); border: 1px solid var(--bord); border-top: 3px solid var(--bleu); border-radius: 4px; }
.af-schema > b > i { display: block; border-radius: 3px; background: color-mix(in srgb, var(--texte) 16%, var(--carte)); }
.af-schema-h-compacte > b > i { height: 8px; } .af-schema-h-normale > b > i { height: 12px; } .af-schema-h-confortable > b { gap: 5px; } .af-schema-h-confortable > b > i { height: 16px; }
.af-apercu-reel { padding: 14px; background: var(--fond); }
.af-apercu-reel > .actions { display: block; margin: 0; }
.af-apercu-reel .af-titre { cursor: default; }
.af-apercu-reel .btn { pointer-events: none; }
.af-menus-aide { margin: -4px 0 10px; }
.af-menus { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.af-menu { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); cursor: pointer; font-size: .9rem; user-select: none; }
.af-menu:has(input:checked) { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 8%, var(--carte)); }
.af-menu:has(input:not(:checked)) span { color: var(--texte-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texte-2) 50%, transparent); }

/* ☑️ Messagerie : cases de sélection, barre d'actions sur la sélection, « Vider » la corbeille */
.mx-ligne { padding-left: 38px; }
.mx-coche { position: absolute; left: 0; top: 0; width: 36px; height: 54px; display: grid; place-items: center; z-index: 1; cursor: pointer; }
.mx-coche input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--bleu); opacity: .55; transition: opacity .12s; }
.mx-li:hover .mx-coche input, .mx-coche input:checked, .mx-coche input:focus-visible, .mx-en-selection .mx-coche input { opacity: 1; }
.mx-li.mx-coche-active .mx-ligne { background: color-mix(in srgb, var(--bleu) 9%, var(--carte)); }
/* ↩️ E-mails répondus / transférés, 💬 conversations groupées */
.mx-repondu { font-size: .78rem; margin-right: 2px; }
.mx-repondu-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 10px; padding: 6px 10px; border-radius: var(--rayon); background: color-mix(in srgb, var(--bleu) 7%, var(--carte)); color: var(--texte-2); font-size: .82rem; }
.mx-conv-bouton { position: absolute; left: 4px; top: 50px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 28px; height: 20px; padding: 0 5px;
    border: 1px solid var(--bord); border-radius: var(--pilule); background: var(--carte); color: var(--texte-2); font: inherit; font-size: .72rem; font-weight: 700; line-height: 1; cursor: pointer; }
.mx-conv-bouton:hover, .mx-conv-bouton[aria-expanded="true"] { border-color: var(--bleu); color: var(--bleu-fonce); background: var(--bleu-clair); }
.mx-conv-fleche { display: inline-block; font-size: .9rem; transition: transform .15s; }
.mx-conv-bouton[aria-expanded="true"] .mx-conv-fleche { transform: rotate(90deg); }
.mx-conv-liste { list-style: none; border-bottom: 1px solid var(--gris-clair); background: color-mix(in srgb, var(--bleu) 3%, var(--carte)); }
.mx-conv-liste .mx-conv-ligne { padding: 7px 12px 7px 52px; border-bottom: 1px dashed var(--gris-clair); position: relative; }
.mx-conv-liste .mx-conv-ligne:last-child { border-bottom: 0; }
.mx-conv-liste .mx-conv-ligne::before { content: ''; position: absolute; left: 30px; top: 0; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--bleu) 30%, transparent); }
.mx-conv-liste .mx-de { font-size: .86rem; }
.mx-conv-vous { font-weight: 600; color: var(--bleu-fonce); }
.mx-conv-dossier { font-size: .72rem; color: var(--texte-3); }
.mx-conv-vide { margin: 0; padding: 8px 12px 8px 52px; }
.mx-selection { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; min-height: 30px; }
.mx-selection[hidden], .mx-filtres[hidden] { display: none; }
.mx-selection-tout { display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.mx-selection-tout input { width: 16px; height: 16px; margin: 0; accent-color: var(--bleu); cursor: pointer; }
.mx-selection-nb { font-size: .8rem; font-weight: 650; color: var(--bleu); white-space: nowrap; }
.mx-selection .mx-rapides-lot { position: static; display: inline-flex; margin-left: auto; box-shadow: 0 1px 4px rgba(16, 24, 40, .14); }
.mx-selection-fermer { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--texte-2); font-size: 1.1rem; line-height: 1; }
.mx-selection-fermer:hover { background: var(--gris-clair); color: var(--texte); }
.mx-liste-titre-droite { display: inline-flex; align-items: center; gap: 8px; }
.mx-vider { padding: 2px 9px; font-size: .76rem; font-weight: 600; color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 35%, var(--bord)); }
.mx-vider:hover { background: color-mix(in srgb, var(--rouge) 8%, var(--carte)); }
.mx-vider-en-cours { opacity: .6; pointer-events: none; }
@media (max-width: 860px) {
    .mx-coche input { opacity: 1; width: 18px; height: 18px; }
    .mx-selection .mx-rapides-lot { display: inline-flex !important; } /* sur téléphone, la barre de sélection garde ses boutons */
}

/* =====================================================================================================
   📱 Téléphone (≤ 760 px) : ☰ menu principal dans un volet à gauche, pastille du prénom (mon compte),
   boutons du tableau de bord en grille. Rien de tout cela sur ordinateur.
   ===================================================================================================== */
.tiroir-bouton, .tiroir-page, .compte-pastille, .tiroir { display: none; }
@media (min-width: 861px) { .mx-choix-dossier, .mx-choix-voile, .mx-compte-service { display: none; } }
@media (max-width: 760px) {
    /* Pastille du prénom à la place des icônes */
    .accueil-prenom, .topbar-haut .user-menu { display: none !important; }
    .compte-pastille { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin: 2px 0 2px 4px; padding: 3px 10px 3px 3px; border-radius: 999px;
        border: 1px solid var(--entete-bord); background: var(--entete-bouton); color: var(--entete-texte); font: inherit; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
    .compte-pastille:active { transform: scale(.97); }
    .compte-initiales { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; flex: none; }
    .compte-fleche { font-size: .75rem; opacity: .8; }

    /* Barre du menu : ☰ Menu + page en cours (reste en haut de l'écran) */
    .topbar-menu .nav { display: none; }
    .topbar-menu { justify-content: flex-start; gap: 12px; min-height: 50px; }
    .tiroir-bouton { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--entete-bord);
        background: var(--entete-bouton); color: var(--entete-texte); font: inherit; font-weight: 600; cursor: pointer; flex: none; }
    .tiroir-bouton .compteur { margin-left: 2px; }
    .tiroir-burger { display: grid; gap: 3px; width: 16px; }
    .tiroir-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
    .tiroir-page { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--entete-texte); font-weight: 600; text-align: right; padding-right: 2px; }

    /* Volet */
    .tiroir { display: block; position: fixed; inset: 0; z-index: 2700; }
    .tiroir[hidden] { display: none; }
    .tiroir-voile { position: absolute; inset: 0; background: rgba(10, 16, 32, .45); opacity: 0; transition: opacity .22s ease; }
    .tiroir-panneau { position: absolute; top: 0; left: 0; width: min(84vw, 330px); display: flex; flex-direction: column; background: var(--carte);
        /* Hauteur ajustée au contenu (s'agrandit quand une famille se déroule), jamais plus que l'écran : la liste défile alors */
        max-height: 100%; border-bottom-right-radius: 18px; overflow: hidden;
        box-shadow: 6px 0 28px rgba(0, 0, 0, .22); transform: translateX(-102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); outline: none;
        padding-top: env(safe-area-inset-top); }
    .tiroir.ouvert .tiroir-voile { opacity: 1; }
    .tiroir.ouvert .tiroir-panneau { transform: none; }
    .tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 18px; background: var(--entete); color: var(--entete-texte); }
    .tiroir-titre { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
    .tiroir-fermer { width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
    .tiroir-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 10px 16px; display: grid; align-content: start; gap: 2px; }
    .tiroir-lien { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: calc(10px * var(--arrondi, 1)); color: var(--texte); font-weight: 550; list-style: none; cursor: pointer; }
    .tiroir-lien::-webkit-details-marker { display: none; }
    .tiroir-lien:hover, .tiroir-lien:active { background: var(--fond); text-decoration: none; }
    .tiroir-lien.actif { background: var(--bleu-clair); color: var(--bleu); font-weight: 700; }
    .tiroir-icone { width: 24px; text-align: center; font-size: 1.1rem; flex: none; }
    .tiroir-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .compteurs-menu { display: inline-flex; gap: 4px; flex-shrink: 0; }
    .compteurs-menu .compteur { margin-left: 0; }
    .tiroir-chevron { font-size: 1.2rem; color: var(--texte-2); transition: transform .15s; }
    .tiroir-groupe[open] > summary .tiroir-chevron { transform: rotate(90deg); }
    .tiroir-groupe > summary.actif { background: none; color: var(--texte); }
    .tiroir-sous { display: grid; gap: 2px; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 2px solid var(--bord); }
    .tiroir-sous .tiroir-lien { min-height: 42px; font-weight: 500; }
    html.tiroir-ouvert, html.tiroir-ouvert body { overflow: hidden; }

    /* Mon compte : feuille au bas de l'écran */
    /* Menu déroulant juste sous la pastille du prénom (position calculée par app.js) */
    .compte-feuille { position: fixed; inset: var(--deroule-haut, 120px) 12px auto 12px; margin: 0; width: auto; max-width: none; max-height: var(--deroule-max, 70vh); padding: 0; border: 0;
        border-radius: 16px; background: var(--carte); color: var(--texte); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); overflow-y: auto; transform-origin: 50% 0; }
    .compte-feuille[open] { animation: deroule-entree .2s cubic-bezier(.2, .8, .2, 1); }
    .compte-feuille::backdrop { background: rgba(10, 16, 32, .35); }
    @keyframes deroule-entree { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
    .compte-feuille-tete { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--bord); position: relative; }
    .compte-initiales-grand { width: 42px; height: 42px; font-size: .95rem; }
    .compte-feuille-qui { flex: 1; min-width: 0; display: grid; }
    .compte-feuille-qui strong, .compte-feuille-qui span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .compte-feuille .tiroir-fermer { background: var(--fond); color: var(--texte-2); }
    .compte-feuille-liste { padding: 8px 10px; display: grid; gap: 2px; }
    .compte-lien { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px; border: 0; border-radius: calc(10px * var(--arrondi, 1));
        background: none; color: var(--texte); font: inherit; font-weight: 550; text-align: left; cursor: pointer; list-style: none; }
    .compte-lien::-webkit-details-marker { display: none; }
    .compte-lien > span:first-child { width: 26px; text-align: center; font-size: 1.15rem; }
    .compte-lien:hover, .compte-lien:active { background: var(--fond); text-decoration: none; }
    .compte-lien-plus { margin-left: auto; color: var(--texte-2); font-size: 1.2rem; transition: transform .15s; }
    .compte-societes[open] .compte-lien-plus { transform: rotate(90deg); }
    .compte-societes-liste { display: grid; gap: 4px; padding: 4px 4px 8px 12px; }
    .compte-feuille-pied { margin: 0; padding: 6px 10px 12px; border-top: 1px solid var(--bord); }
    .compte-deconnexion { color: var(--rouge); justify-content: center; font-weight: 650; }
    .compte-deconnexion > span:first-child { width: auto; }

    /* Tableau de bord : boutons en grille de 2, l'action principale en tête sur toute la largeur */
    main[data-route="dashboard"] .page-head .barre-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%;
        overflow: visible !important; flex-wrap: wrap; max-width: none; }
    main[data-route="dashboard"] .page-head .barre-actions > * { min-width: 0; margin: 0; }
    main[data-route="dashboard"] .page-head .barre-actions > .btn,
    main[data-route="dashboard"] .page-head .barre-actions > details > summary.btn { width: 100%; min-height: 46px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
    main[data-route="dashboard"] .page-head .barre-actions > .btn-primaire { grid-column: 1 / -1; order: -1; }
}
/* 📱 Téléphone : en-tête des pages → bouton principal + « ⋯ Plus d'actions » (panneau au bas de l'écran) */
.plus-feuille { display: none; }
@media (max-width: 760px) {
    .page-head > .actions.actions-plus { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; overflow: visible !important; }
    .page-head > .actions.actions-plus > * { width: 100%; margin: 0; min-width: 0; }
    .page-head > .actions.actions-plus .btn, .page-head > .actions.actions-plus > form > .btn, .page-head > .actions.actions-plus > details > summary.btn { width: 100%; min-height: 44px; justify-content: center; }
    .plus-bouton .compteur { margin-left: 4px; background: var(--gris-clair); color: var(--texte-2); }
    .page-head > .actions.actions-deux { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; overflow: visible !important; }
    .page-head > .actions.actions-deux > * { width: 100%; margin: 0; min-width: 0; }
    .page-head > .actions.actions-deux .btn { width: 100%; min-height: 44px; justify-content: center; }
    .page-head > .actions.actions-deux > .btn-primaire, .page-head > .actions.actions-deux > :has(> .btn-primaire) { order: -1; }
    .af-carte-plus { --af-couleur: var(--bord); }
    .plus-fleche { font-size: .8rem; opacity: .7; margin-left: 2px; }
    .plus-feuille { display: block; position: fixed; inset: 0; z-index: 55; }
    .plus-feuille[hidden] { display: none; }
    .plus-voile { position: absolute; inset: 0; background: rgba(10, 16, 32, .35); opacity: 0; transition: opacity .2s; }
    .plus-panneau { position: absolute; left: 12px; right: 12px; top: var(--deroule-haut, 120px); max-height: var(--deroule-max, 70vh); overflow-y: auto; background: var(--carte); color: var(--texte);
        border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 50% 0; transition: opacity .18s, transform .2s cubic-bezier(.2, .8, .2, 1); }
    .plus-feuille.ouvert .plus-voile { opacity: 1; }
    .plus-feuille.ouvert .plus-panneau { transform: none; opacity: 1; }
    .plus-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--bord); }
    .plus-tete strong { font-size: 1.02rem; }
    .plus-tete .tiroir-fermer { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fond); color: var(--texte-2); font-size: 1.35rem; line-height: 1; cursor: pointer; }
    .plus-liste { display: grid; gap: 6px; padding: 12px 14px 16px; }
    .plus-liste > * { width: 100%; margin: 0; min-width: 0; }
    .plus-liste > form, .plus-liste > details { display: block; }
    .plus-liste .btn, .plus-liste > form > .btn, .plus-liste > details > summary.btn { width: 100%; min-height: 48px; justify-content: flex-start; text-align: left; padding: 10px 14px; white-space: normal; }
    .plus-liste > details > summary.btn::after { content: '›'; margin-left: auto; font-size: 1.2rem; color: var(--texte-2); }
}

/* 📱 Téléphone : sous-menus (Modèles, Exporter, Accès rapide…) déroulés sous leur bouton, même style que les autres menus */
@media (max-width: 760px) {
    .export-panneau.panneau-flottant { z-index: 2600; border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); animation: deroule-entree .2s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; }
}

/* 📬 Messagerie : onglets (E-mails, Agenda, Règles, Comptes) ; téléphone : côte à côte, icône au-dessus, sans défilement */
.mx-onglet-court { display: none; }
@media (max-width: 760px) {
    .mx-onglets { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; overflow: visible; border: 1px solid var(--bord);
        border-radius: calc(14px * var(--arrondi, 1)); background: var(--carte); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
    .mx-onglets a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; margin: 0; padding: 6px 2px;
        border: 0; border-radius: calc(10px * var(--arrondi, 1)); font-size: .78rem; font-weight: 600; color: var(--texte-2); white-space: nowrap; }
    .mx-onglets a.actif { background: var(--bleu-clair); color: var(--bleu-fonce); }
    .mx-onglet-icone { font-size: 1.3rem; line-height: 1; }
    .mx-onglet-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .mx-onglet-long { display: none; }
    .mx-onglet-court { display: inline; }
    .mx-onglets a .compteur { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; font-size: .68rem; line-height: 18px; }
}
@media (max-width: 760px) {
    main[data-route^="messagerie"] .page-head > .actions { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; overflow: visible !important; }
    main[data-route^="messagerie"] .page-head > .actions > * { min-width: 0; margin: 0; }
    main[data-route^="messagerie"] .page-head > .actions .btn { width: 100%; min-height: 44px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    main[data-route^="messagerie"] .page-head > .actions > form[data-mx-synchro] .btn { width: 100%; }
}

/* 📱 Écrans tactiles : l'appui long sur un e-mail ouvre le menu, sans sélectionner de texte ni ouvrir la bulle d'iOS ;
   champs de saisie à 16 px, sinon l'iPhone zoome dès qu'on écrit (et la page reste zoomée ensuite) */
@media (pointer: coarse) {
    .mx-li, .mx-ligne, .mx-ligne * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    .mx-ligne { -webkit-tap-highlight-color: transparent; }
}
@media (pointer: coarse) and (max-width: 860px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, [contenteditable="true"], [contenteditable=""] { font-size: 16px !important; }
}
/* 🧰 Support CRM : environnement du serveur */
.env-versions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.env-version { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); text-align: center; }
.env-version strong { font-size: 1.05rem; }
.env-suivi { margin-top: 14px; }
.env-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; font-size: .78rem; text-align: center; color: var(--texte-2); }
.env-etapes span { padding: 4px; border-radius: 999px; transition: background .2s, color .2s; }
.env-etapes span.actif { background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 700; }
.env-etapes span.fait { color: var(--vert, #1e7e34); font-weight: 600; }
.env-barre { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bleu) 14%, transparent); }
.env-barre > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bleu), color-mix(in srgb, var(--bleu) 70%, #fff)); position: relative; overflow: hidden; }
.env-barre > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: mx-synchro-reflet 1.2s linear infinite; }
.env-barre.env-ok > span { background: var(--vert, #1e7e34); } .env-barre.env-erreur > span { background: var(--rouge); }
.env-barre.env-ok > span::after, .env-barre.env-erreur > span::after { content: none; }
.env-message { text-align: center; margin: 8px 0 0; font-size: .9rem; min-height: 1.2em; }
.env-resultat { margin: 12px 0 0; text-align: center; }
.env-journal { margin-top: 10px; }
.env-journal pre { max-height: 240px; overflow: auto; font-size: .72rem; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: 10px; white-space: pre-wrap; }
.env-aide { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bord); }
.env-aide ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.env-aide code { word-break: break-all; }
@media (max-width: 760px) { .env-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .env-etapes { font-size: .68rem; } }
@media (max-width: 760px) {
    .export-panneau.panneau-deroule { border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); animation: deroule-entree .2s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; z-index: 2600; }
}

/* Lecteur PDF mobile (« Voir PDF » sur téléphone / tablette) */
dialog.pdf-lecteur { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #525659; display: flex; flex-direction: column; z-index: 2700; }
dialog.pdf-lecteur:not([open]) { display: none; }
dialog.pdf-lecteur::backdrop { background: rgba(16, 24, 40, .6); }
.pdf-lecteur-tete { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px 14px; background: var(--bleu-fonce); color: #fff; }
.pdf-lecteur-titre { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-lecteur-outils { display: inline-flex; gap: 6px; }
.pdf-lecteur-outils button { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.15rem; display: grid; place-items: center; text-decoration: none; cursor: pointer; }
.pdf-lecteur-outils button:disabled { opacity: .35; }
.pdf-lecteur-fermer { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--bleu-fonce); font-size: 1.8rem; line-height: 1; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.pdf-lecteur-pages { flex: 1; overflow: auto; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pdf-lecteur-pages canvas { display: block; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); margin: 0 auto; flex: none; }
.pdf-lecteur-attente { color: #fff; margin: 40px auto; text-align: center; }
html.pdf-lecteur-ouvert { overflow: hidden; }

/* Appui long sur téléphone / tablette (menu contextuel des listes) : aucune sélection de texte ni bulle d'iOS */
@media (pointer: coarse) {
    .menu-ctx, .menu-ctx * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    tbody tr:has(a[href]), tbody tr:has(a[href]) *, [data-menu-url], [data-menu-url] * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.mx-messages.mx-filtrage { opacity: .55; transition: opacity .15s; }

/* 📱 Animation d'ouverture « Envol » (application iPhone) */
.envol { position: fixed; inset: 0; z-index: 2147483001; background: #fff; pointer-events: none; }
.envol[hidden] { display: none; }
.envol-logo { position: absolute; }
.envol-m, .envol-t { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.envol-m { clip-path: inset(0 var(--envol-m, 70%) 0 0); }
.envol-t { clip-path: inset(0 0 0 var(--envol-t, 35%)); }
.envol.envol-entier .envol-m { display: none; }
.envol.envol-entier .envol-t { clip-path: none; }
.envol-joue .envol-m { animation: envol-m 1s cubic-bezier(.2, .9, .25, 1.2) both; }
.envol-joue .envol-t { animation: envol-t .7s .45s cubic-bezier(.3, .8, .3, 1) both; }
.envol-joue.envol-entier .envol-t { animation: envol-entier .9s cubic-bezier(.3, .8, .3, 1) both; }
.envol-joue .envol-logo { animation: envol-depart .6s 1.6s cubic-bezier(.6, 0, .3, 1) both; }
.envol-joue { animation: envol-fondu .45s 1.8s ease both; }
@keyframes envol-m { from { opacity: 0; transform: translateY(18%) scale(.55) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes envol-t { from { clip-path: inset(0 100% 0 var(--envol-t, 35%)); opacity: .2; transform: translateX(-4%); } to { clip-path: inset(0 0 0 var(--envol-t, 35%)); opacity: 1; transform: none; } }
@keyframes envol-entier { from { clip-path: inset(0 100% 0 0); transform: scale(.9); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes envol-depart { to { transform: translateY(-310%) scale(.78); opacity: 0; } }
@keyframes envol-fondu { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .envol-joue, .envol-joue * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---- 🧭 Suivi d'avancement des devis (même frise que les commandes) */
.suivi-devis .frise-etapes li { align-content: start; }
.suivi-devis .frise-etapes li.passee .frise-rond { background: var(--fond); border-style: dashed; color: var(--texte-2); }
.suivi-devis .frise-etapes li.passee::before { background: var(--bleu); }
.suivi-devis .frise-etapes li.arretee .frise-rond { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.suivi-devis .frise-etapes li.arretee strong { color: var(--rouge); }
.suivi-devis-action { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.suivi-devis-action form { margin: 0; }
.suivi-devis-statut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.suivi-devis-statut label { font-weight: 600; }
.suivi-devis-statut select { width: auto; min-width: 180px; }
@media (max-width: 760px) {
    .suivi-devis .frise-etapes li .frise-rond { grid-row: span 2; }
    .suivi-devis-action { flex-direction: column; align-items: stretch; }
    .suivi-devis-action .btn, .suivi-devis-statut select { width: 100%; }
    .suivi-devis-statut { flex-direction: column; align-items: stretch; }
}
.wf-suivi-devis-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .wf-suivi-devis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wf-suivi-devis-grille { grid-template-columns: 1fr; } }
.suivi-alertes { display: grid; gap: 4px; }
.suivi-alertes ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
/* Ordinateur : familles de boutons pliables (clic sur le titre, mémorisé) */
@media (min-width: 761px) {
    .actions-familles:not(.af-edition) .af-titre { cursor: pointer; border-radius: 6px; }
    .actions-familles:not(.af-edition) .af-titre:hover .af-nom { color: var(--texte); }
    .actions-familles:not(.af-edition) .af-chevron { display: inline-block; font-size: 15px; line-height: 1; color: var(--texte-2); transform: rotate(90deg); transition: transform .15s; }
    .af-carte:not(.ouvert) { align-self: start; padding-bottom: 8px; }
    .af-carte:not(.ouvert) .af-titre { margin: 0; }
    .af-carte:not(.ouvert) .af-boutons { display: none; }
    .af-carte:not(.ouvert) .af-chevron { transform: rotate(0deg); }
    .af-carte:not(.ouvert) .af-nombre { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gris-clair); color: var(--texte-2); font-size: .72rem; letter-spacing: 0; }
}

/* ---- 📱 Téléphone : en-tête sur deux lignes équilibrées — logo à gauche et pastille du prénom à droite,
   puis la phrase d'accueil (sans le prénom) sur une ligne, centrée. Rien ne change sur ordinateur. */
.accueil-court { display: none; }
@media (max-width: 760px) {
    .topbar-haut { justify-content: space-between; align-items: center; column-gap: 10px; }
    .topbar-haut .brand { order: 0; flex: 0 1 auto; min-width: 0; max-width: 55%; justify-content: flex-start; }
    .topbar .topbar-haut .brand > picture:not(.brand-client) img, .topbar-haut .brand img { height: auto; max-height: min(40px, 10.5vw); max-width: 100%; }
    .topbar-haut > .compte-pastille { order: 0; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 165px); margin: 0; font-size: .86rem; gap: 5px; padding: 3px 9px 3px 3px; }
    .topbar-haut > .compte-pastille .compte-initiales { width: 24px; height: 24px; font-size: .68rem; }
    .topbar-haut > .compte-pastille .compte-prenom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-haut .accueil { order: 1; flex: 1 1 100%; justify-content: center; gap: 8px; white-space: nowrap; font-size: min(.98rem, 4vw); }
    .topbar-haut .accueil-emoji { font-size: 1.15em; }
    .topbar-haut .accueil > span:last-child { display: none !important; }
    .topbar-haut .accueil-court { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Liste des devis : mini-frise du suivi d'avancement à côté du statut */
.suivi-mini { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; vertical-align: middle; color: var(--texte-2); text-decoration: none; white-space: nowrap; }
.suivi-mini:hover { text-decoration: none; color: var(--texte); }
@media (max-width: 760px) { .suivi-mini { margin: 4px 0 0; display: flex; } }
/* Ordinateur : familles en menus déroulants (🎨 Apparence › Boutons des fiches › Affichage des familles) */
@media (min-width: 761px) {
    .af-carte.af-deroulant { position: relative; align-self: start; padding-bottom: 8px; }
    .af-carte.af-deroulant .af-titre { margin: 0; }
    .af-carte.af-deroulant .af-nombre { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gris-clair); color: var(--texte-2); font-size: .72rem; letter-spacing: 0; }
    .af-carte.af-deroulant .af-chevron { transform: rotate(90deg); }
    .af-carte.af-deroulant.ouvert { z-index: 60; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--ombre-forte, 0 10px 28px rgba(15, 23, 42, .16)); }
    .af-carte.af-deroulant.ouvert .af-chevron { transform: rotate(-90deg); }
    .af-boutons.af-flottant { position: fixed; z-index: 120; display: none; gap: 6px; padding: 8px 10px 10px; background: var(--carte); border: 1px solid var(--bord); border-top: 0;
        border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: 0 14px 28px rgba(15, 23, 42, .18); }
    .af-boutons.af-flottant.ouvert { display: grid; animation: menu-ctx-entree .14s ease; }
    .af-boutons.af-flottant > form, .af-boutons.af-flottant > details { display: flex; }
    .af-boutons.af-flottant .btn, .af-boutons.af-flottant > form > .btn { width: 100%; justify-content: center; text-align: center; }
}
.af-schema-a-cartes > i { width: 26%; height: 52px; }
.af-schema-a-deroulants { align-items: flex-start; padding-top: 14px; }
.af-schema-a-deroulants > i { width: 26%; height: 16px; }
.af-schema-a-deroulants > i:nth-child(2) { height: 56px; box-shadow: 0 6px 12px rgba(15, 23, 42, .12); }
.options-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Liste des devis (ordinateur) : client et objet sur une ou deux lignes, statut et mini-frise côte à côte */
@media (min-width: 761px) {
    /* Chaque colonne prend la place de son contenu ; client et objet sur une ligne, plafonnés pour que tout tienne */
    /* Client et objet : une ligne s'ils tiennent, sinon deux lignes (« … » au-delà, texte entier au survol) */
    .liste-devis .cellule-ligne { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; }
    .liste-devis td.montant .montant-mois { font-size: .78rem; }
    .liste-devis .col-statut { white-space: nowrap; width: 1%; }
    .liste-devis .col-statut .suivi-mini { margin-left: 6px; gap: 4px; }
    .liste-devis .col-statut .suivi-mini-texte { font-size: .78rem; }
    .liste-devis .col-statut .mini-frise { gap: 2px; }
    .liste-devis .col-statut .mini-frise span { width: 10px; }
}
/* Téléphone : ligne « Total » des tableaux en cartes, centrée sur toute la largeur */
@media (max-width: 640px) {
    table.responsive tfoot { display: block; width: 100%; }
    table.responsive tfoot tr { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; width: 100%; margin-top: 8px; padding: 10px 12px;
        background: var(--fond); border-radius: calc(8px * var(--arrondi, 1)); text-align: center; }
    table.responsive tfoot th, table.responsive tfoot td { display: block; width: auto; padding: 0; border: 0; text-align: center; background: none; }
}

/* ---- 🖐️ Secret d'Axia « le chat et la souris » : un bras lui pousse et sa main essaie d'attraper le curseur */
.axia-bras { position: fixed; inset: 0; z-index: 2650; pointer-events: none; }
.axia-bras-tube { position: absolute; left: 0; top: 0; height: 10px; transform-origin: 0 50%; border-radius: 6px;
    background: linear-gradient(180deg, var(--a3, #a5f3fc), var(--a1, #38bdf8) 45%, var(--a2, #4f46e5)); box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
    will-change: transform, width; }
.axia-bras-tube::after { content: ''; position: absolute; right: -2px; top: -3px; width: 12px; height: 16px; border-radius: 5px; background: var(--a2, #4f46e5); } /* manchette */
.axia-bras-main { position: absolute; left: 0; top: 0; width: 48px; height: 43px; transform-origin: 22px 21px; will-change: transform; transition: opacity .2s; }
.axia-main { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .3)); }
.axia-main rect { fill: #fff; stroke: var(--a2, #4f46e5); stroke-width: 1.6; }
.axia-main .axia-doigts { transform-origin: 18px 20px; transition: transform .12s cubic-bezier(.34, 1.56, .64, 1); }
.axia-main .axia-pouce { transition: transform .12s; }
.axia-bras-main.serre .axia-doigts { transform: scaleX(.45); }
.axia-chasse .axia-orbe { animation: axia-chasse .5s ease-in-out infinite alternate; }
@keyframes axia-chasse { from { transform: rotate(-5deg) scale(1.02); } to { transform: rotate(5deg) scale(.98); } }
/* Ratée : toute rouge, elle tremble de colère et fume */
.axia-colere .axia-orbe { animation: axia-colere 2.6s ease-in-out; }
@keyframes axia-colere {
    0% { filter: none; transform: none; }
    10%, 85% { filter: sepia(1) saturate(7) hue-rotate(-40deg) brightness(.92) drop-shadow(0 0 10px rgba(239, 68, 68, .9)); }
    12%, 20%, 28%, 36%, 44%, 52%, 60% { transform: translateX(-3px) rotate(-3deg) scale(1.06); }
    16%, 24%, 32%, 40%, 48%, 56%, 64% { transform: translateX(3px) rotate(3deg) scale(1.06); }
    72% { transform: scale(1.04); }
    100% { filter: none; transform: none; }
}
.axia-colere .axia-halo { background: radial-gradient(circle, rgba(239, 68, 68, .55), transparent 70%) !important; }
.axia-colere::before { content: '💢'; position: absolute; right: -4px; top: -14px; font-size: 20px; z-index: 3; animation: axia-fume 1.3s ease-in-out 2; pointer-events: none; }
@keyframes axia-fume { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 30% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-14px) scale(.9); } }
[data-mimique="colere"] .axia-yeux i { border-radius: 2px; clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%); background: #fecaca !important; }
[data-mimique="colere"] .axia-yeux i:last-child { clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 100%); }

/* ---- 🎬 Scènes des grands secrets d'Axia (trésor, combat) */
.secret-scene { position: fixed; inset: 0; z-index: 2700; overflow: hidden; cursor: pointer; opacity: 0; transition: opacity .45s ease; }
.secret-scene.on { opacity: 1; }
.secret-scene.sort { opacity: 0; transition-duration: .5s; }
.secret-plateau { position: absolute; left: 50%; top: 44%; width: 520px; height: 300px; translate: -50% -50%; }
.axia.axia-doublure { position: absolute; z-index: 3; pointer-events: none; --taille-orbe: var(--taille-doublure) !important; }
.axia-doublure .axia-orbe { cursor: default; }
.secret-etincelle { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; z-index: 6; pointer-events: none; box-shadow: 0 0 8px currentColor;
    animation: secret-etincelle 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes secret-etincelle { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
.secret-cartouche { position: absolute; left: 50%; top: calc(44% + 175px); translate: -50% 12px; width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
    padding: 14px 20px; border-radius: 14px; background: linear-gradient(180deg, rgba(23, 18, 8, .92), rgba(10, 8, 3, .92)); border: 2px solid #e0a526;
    box-shadow: 0 0 0 4px rgba(224, 165, 38, .18), 0 18px 40px rgba(0, 0, 0, .45); color: #fff8e1; text-align: center; opacity: 0; transition: opacity .35s, translate .35s; }
.secret-cartouche.on { opacity: 1; translate: -50% 0; }
.secret-cartouche-titre { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; min-height: 1.4em; }
.secret-cartouche-sous { margin-top: 4px; font-size: .95rem; color: #fcd77f; opacity: 0; transition: opacity .4s; }
.secret-cartouche-sous.on { opacity: 1; }

/* Coffre au trésor */
.tresor-scene { background: radial-gradient(circle at 50% 44%, rgba(74, 50, 12, .9), rgba(8, 7, 18, .96) 68%); }
.axia.tresor-heroine { left: 70px; right: auto; bottom: 40px; animation: tresor-arrivee .9s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes tresor-arrivee { 0% { transform: translateX(-160px); opacity: 0; } 25% { transform: translateX(-110px) translateY(-22px); opacity: 1; } 50% { transform: translateX(-60px); }
    75% { transform: translateX(-20px) translateY(-14px); } 100% { transform: none; } }
.tresor-coffre { position: absolute; left: 250px; bottom: 30px; width: 170px; height: 138px; overflow: visible; z-index: 2; opacity: 0; transform: translateY(-460px); }
.coffre-tombe .tresor-coffre { animation: tresor-chute .75s cubic-bezier(.5, 0, .6, 1) forwards; }
@keyframes tresor-chute { 0% { opacity: 1; transform: translateY(-460px); } 70% { transform: translateY(0) scaleY(.86) scaleX(1.08); } 85% { transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
.tresor-caisse, .tresor-couvercle { transform-box: fill-box; }
.coffre-tremble .tresor-caisse, .coffre-tremble .tresor-couvercle { animation: tresor-tremble .45s ease-in-out 2; transform-origin: 50% 100%; }
@keyframes tresor-tremble { 0%, 100% { transform: none; } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg) translateY(-2px); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }
.tresor-couvercle { transform-origin: 0% 100%; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); }
.coffre-ouvert .tresor-couvercle { animation: none; transform: translate(-8px, -20px) rotate(-34deg); }
.tresor-interieur { opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 10px #fde047); }
.coffre-ouvert .tresor-interieur { opacity: 1; }
.tresor-serrure { transition: fill .3s; }
.coffre-tremble .tresor-serrure { fill: #fff3b0; }
.tresor-lueur { position: absolute; left: 335px; top: 190px; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle, rgba(255, 244, 184, .95), rgba(250, 204, 21, .45) 40%, rgba(250, 204, 21, 0) 70%); transform: scale(0); transition: transform .6s cubic-bezier(.2, .8, .3, 1.2); }
.coffre-ouvert .tresor-lueur { transform: scale(26); }
.tresor-objet { position: absolute; left: 335px; top: 192px; width: 76px; height: 76px; margin: -38px; z-index: 4; display: grid; place-items: center; font-size: 46px; line-height: 1;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 251, 220, .95), rgba(253, 224, 71, .55) 55%, rgba(253, 224, 71, 0) 72%);
    opacity: 0; transform: scale(.3); transition: left .8s cubic-bezier(.4, .1, .3, 1), top .8s cubic-bezier(.4, .1, .3, 1), transform .8s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.tresor-objet::before { content: ''; position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px; z-index: -1; border-radius: 50%; opacity: 0;
    background: repeating-conic-gradient(from 0deg, rgba(255, 236, 140, .55) 0deg 9deg, rgba(255, 236, 140, 0) 9deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
    animation: tresor-rayons 9s linear infinite; transition: opacity .5s; }
@keyframes tresor-rayons { to { transform: rotate(360deg); } }
.objet-sort .tresor-objet { opacity: 1; top: 70px; transform: scale(1.25); }
.objet-sort .tresor-objet::before { opacity: 1; }
.objet-brandi .tresor-objet { left: 118px; top: 74px; transform: scale(1.35); animation: tresor-objet-flotte 1.6s ease-in-out .8s infinite; }
@keyframes tresor-objet-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.objet-brandi .axia.tresor-heroine { animation: tresor-brandit .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tresor-brandit { 0% { transform: none; } 40% { transform: translateY(-26px) scale(1.04, .96); } 100% { transform: translateY(-8px); } }

/* Combat façon RPG rétro */
.rpg-scene { background-color: #0b1026; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 28px), linear-gradient(180deg, rgba(8, 12, 40, .97), rgba(30, 27, 75, .97) 58%, rgba(49, 46, 129, .97)); }
.rpg-scene .secret-plateau::before { content: ''; position: absolute; left: -40px; right: -40px; bottom: 30px; height: 70px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, .45), rgba(99, 102, 241, 0) 70%); }
.rpg-monstre { position: absolute; left: 60px; bottom: 56px; width: 130px; z-index: 2; animation: rpg-monstre-arrive .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.rpg-monstre-svg { width: 100%; height: auto; overflow: visible; animation: rpg-monstre-respire 1.4s ease-in-out .6s infinite; transform-origin: 50% 100%; }
@keyframes rpg-monstre-arrive { 0% { transform: translateX(-220px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes rpg-monstre-respire { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
.rpg-monstre.touche { animation: rpg-touche .38s linear; }
@keyframes rpg-touche { 0%, 100% { transform: none; filter: none; } 15% { transform: translateX(-10px); filter: brightness(3) saturate(0); } 35% { transform: translateX(8px); filter: none; }
    55% { transform: translateX(-6px); filter: brightness(2.5) saturate(0); } 75% { transform: translateX(4px); filter: none; } }
.rpg-monstre.vaincu { animation: rpg-vaincu .7s ease-in forwards; }
@keyframes rpg-vaincu { 0% { opacity: 1; filter: brightness(2.5); transform: none; } 100% { opacity: 0; filter: brightness(4) blur(6px); transform: scale(.3, 1.4) translateY(30px); } }
.axia.rpg-heroine { right: 82px; bottom: 64px; animation: rpg-heroine-arrive .6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes rpg-heroine-arrive { 0% { transform: translateX(220px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.axia.rpg-heroine.rpg-attaque { animation: rpg-attaque .62s cubic-bezier(.5, 0, .3, 1); }
@keyframes rpg-attaque { 0% { transform: none; } 30% { transform: translateX(-196px) rotate(-12deg); } 45% { transform: translateX(-200px) rotate(8deg); } 100% { transform: none; } }
.axia.rpg-heroine.rpg-victoire { animation: rpg-victoire .8s ease-in-out 4; }
@keyframes rpg-victoire { 0%, 100% { transform: none; } 40% { transform: translateY(-24px) rotate(-6deg); } 60% { transform: translateY(-24px) rotate(6deg); } }
.rpg-entaille { position: absolute; left: 125px; top: 150px; width: 170px; height: 8px; margin: -4px -85px; z-index: 4; border-radius: 4px; opacity: 0; rotate: -38deg;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 40%, #c7d2fe 60%, rgba(255, 255, 255, 0)); box-shadow: 0 0 16px #a5b4fc; }
.rpg-entaille.on { animation: rpg-entaille .32s ease-out; }
@keyframes rpg-entaille { 0% { opacity: 0; transform: scaleX(.1); } 30% { opacity: 1; transform: scaleX(1.1); } 100% { opacity: 0; transform: scaleX(1.2) translateY(6px); } }
.rpg-degats { position: absolute; left: 125px; top: 70px; translate: -50% 0; z-index: 5; font: 900 30px/1 ui-monospace, Consolas, monospace; color: #fff;
    -webkit-text-stroke: 2px #1e1b4b; paint-order: stroke; opacity: 0; }
.rpg-degats.critique { color: #fde047; font-size: 40px; }
.rpg-degats.on { animation: rpg-degats .9s ease-out forwards; }
@keyframes rpg-degats { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 25% { opacity: 1; transform: translateY(-8px) scale(1.2); } 45% { transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.rpg-levelup { position: absolute; left: 392px; top: 24px; translate: -50% 0; white-space: nowrap; text-align: center; z-index: 5; font: 900 34px/1 ui-monospace, Consolas, monospace; letter-spacing: .04em;
    color: #fde047; background: linear-gradient(180deg, #fff7c2, #facc15 55%, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #92400e) drop-shadow(0 0 14px rgba(250, 204, 21, .75)); opacity: 0; }
.rpg-levelup.on { animation: rpg-levelup 1.6s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes rpg-levelup { 0% { opacity: 0; transform: translateY(30px) scale(.4); } 30% { opacity: 1; transform: translateY(-6px) scale(1.2); } 45% { transform: none; } 100% { opacity: 1; transform: translateY(-4px); } }
.rpg-butin { position: absolute; left: 0; top: 130px; max-width: 330px; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px;
    background: rgba(15, 23, 42, .92); border: 2px solid #facc15; color: #fff; font-size: .95rem; box-shadow: 0 0 22px rgba(250, 204, 21, .4);
    opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.rpg-butin.on { opacity: 1; transform: none; }
.rpg-butin-icone { font-size: 34px; line-height: 1; animation: tresor-objet-flotte 1.4s ease-in-out infinite; }
.rpg-butin small { display: block; color: #fcd77f; font-size: .82rem; margin-top: 2px; }
.rpg-panneau { position: absolute; left: 50%; top: calc(44% + 170px); translate: -50% 0; width: min(720px, calc(100vw - 24px)); box-sizing: border-box; display: grid;
    grid-template-columns: 1.3fr 1fr; gap: 10px; font: 600 15px/1.35 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 1px 0 #000; }
.rpg-recit, .rpg-fiche { padding: 12px 16px; border-radius: 10px; background: linear-gradient(180deg, #2a3a9c, #141c5a); border: 3px solid #e2e8f0;
    box-shadow: inset 0 0 0 2px #0b1030, 0 10px 30px rgba(0, 0, 0, .4); min-height: 76px; box-sizing: border-box; }
.rpg-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rpg-ligne + .rpg-ligne { margin-top: 6px; }
.rpg-niv { color: #fde047; }
.rpg-jauge { flex: 1; height: 10px; border-radius: 5px; background: #0b1030; border: 1px solid #94a3b8; overflow: hidden; }
.rpg-jauge i { display: block; height: 100%; border-radius: 5px; }
.rpg-pv i { background: linear-gradient(90deg, #22c55e, #86efac); }
.rpg-xp i { background: linear-gradient(90deg, #38bdf8, #facc15); }
.rpg-fiche.flash { animation: rpg-flash .9s ease-out; }
@keyframes rpg-flash { 0% { box-shadow: inset 0 0 0 2px #0b1030, 0 0 0 rgba(250, 204, 21, 0); } 30% { box-shadow: inset 0 0 0 2px #0b1030, 0 0 30px 6px rgba(250, 204, 21, .8); } 100% { box-shadow: inset 0 0 0 2px #0b1030, 0 10px 30px rgba(0, 0, 0, .4); } }
@media (max-width: 640px) {
    .rpg-panneau { grid-template-columns: 1fr; font-size: 13px; top: auto; bottom: 16px; }
    .secret-cartouche { top: auto; bottom: 22px; }
}

/* Récré : tenues secrètes */
.axia-recre-sous-titre { margin: 10px 0 6px; font-size: .82rem; font-weight: 700; color: var(--muted, #64748b); text-align: center; }
.axia-recre-puce.secrete { border-color: #e0a526; }
.axia-recre-puce.verrou { opacity: .65; cursor: default; border-style: dashed; }

/* ---- 🦠 Antivirus : badge « Analysé et vérifié », progression d'envoi, notification */
.badge-antivirus { background: var(--vert-clair); color: var(--vert); font-weight: 600; white-space: nowrap; }
.badge-gris { background: var(--fond-doux, #eef1f5); color: var(--muted, #64748b); white-space: nowrap; }
.envoi-progression { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2600; width: min(420px, calc(100vw - 32px));
    background: var(--carte, #fff); color: var(--texte, #1b1f24); border-radius: 14px; padding: 12px 16px 14px; box-shadow: 0 12px 36px rgba(15, 23, 42, .28);
    border: 1px solid var(--bord, #e2e8f0); animation: toast-monte .25s ease; box-sizing: border-box; }
.envoi-progression .ep-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.envoi-progression .ep-detail { font-size: .82rem; color: var(--muted, #64748b); margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoi-progression .ep-barre { height: 8px; border-radius: 4px; background: var(--fond-doux, #eef1f5); overflow: hidden; }
.envoi-progression .ep-barre i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #38bdf8, #2563eb); transition: width .25s ease; }
.envoi-progression.analyse .ep-barre i { background: linear-gradient(90deg, #34d399, #16a34a); }
.envoi-progression.ok .ep-barre i { background: #16a34a; }
.notif-crm { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2600; display: flex; align-items: flex-start; gap: 10px;
    width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 14px; box-sizing: border-box;
    background: var(--carte, #fff); color: var(--texte, #1b1f24); box-shadow: 0 12px 36px rgba(15, 23, 42, .28); border: 1px solid var(--bord, #e2e8f0);
    border-left: 5px solid #16a34a; animation: toast-monte .3s ease; font-size: .92rem; }
.notif-crm.erreur { border-left-color: var(--rouge, #dc2626); }
.notif-crm.info { border-left-color: var(--bleu, #2563eb); }
.notif-crm.attention { border-left-color: var(--orange, #b45309); }
.notif-crm .nc-icone { font-size: 1.25rem; line-height: 1.2; }
.notif-crm .nc-texte small { display: block; color: var(--muted, #64748b); margin-top: 2px; }
.notif-crm .nc-x { margin-left: 6px; border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted, #64748b); padding: 0 2px; }
.notif-crm.sort { opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .3s; }
@media (max-width: 760px) { .envoi-progression, .notif-crm { bottom: 84px; } }

/* ---- 💶 Devis facturé : relier sa facture ou le marquer payé */
.devis-paiement { margin-top: 8px; }
.devis-paiement-ligne { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.devis-paiement-ligne select { max-width: 260px; font-size: .85rem; padding: 4px 6px; }

/* ---- 📬 Lecture d'un e-mail (ordinateur et téléphone) : barre d'actions harmonieuse (pictogrammes au trait, cases égales) */
.mx-retour-liste .mx-ico, .mx-retour-texte { display: none; }
.mx-ico { width: 20px; height: 20px; flex: none; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.mx-menu-choix .mx-ico, .export-titre .mx-ico { width: 18px; height: 18px; vertical-align: -4px; color: var(--bleu); margin-right: 4px; }
.mx-message > .mx-barre { flex-wrap: nowrap; gap: 12px; padding: 10px 0; }
.mx-message > .mx-barre > .mx-barre-groupe { display: none; }
.mx-message > .mx-barre .mx-menu-creer { margin-left: auto; flex: none; }
.mx-message > .mx-barre .mx-menu-creer > summary { min-height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 650; white-space: nowrap; }
.mx-message > .mx-barre .mx-menu-creer .mx-libelle-garde { display: inline !important; }
.mx-actions-mobile { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 78px); gap: 2px; flex: 0 1 auto; min-width: 0; padding: 4px;
    background: var(--fond); border: 1px solid var(--bord); border-radius: 14px; }
.mx-actions-mobile form { margin: 0; display: contents; }
.mx-am { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 50px; padding: 5px 2px;
    border: 0; border-radius: 10px; background: none; color: var(--texte); font: inherit; font-size: .7rem; font-weight: 650; letter-spacing: -.01em;
    cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s, transform .1s; }
.mx-am::-webkit-details-marker { display: none; }
.mx-am span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mx-am .mx-ico { width: 22px; height: 22px; color: var(--bleu); }
.mx-am:hover, .mx-am:focus-visible { background: var(--carte); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); outline: none; }
.mx-am:active, .mx-am-plus[open] > .mx-am { background: var(--carte); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); transform: scale(.97); }
.mx-am-danger .mx-ico { color: var(--rouge); }
.mx-am-danger:hover { color: var(--rouge); }
.mx-am-plus { position: relative; }
.mx-am-plus > .export-panneau { right: 0; left: auto; min-width: 230px; }
.mx-menu-choix.mx-suivi-actif .mx-ico, .mx-am.mx-suivi-actif .mx-ico { fill: #facc15; color: #ca8a04; }
.mx-am.mx-suivi-actif { background: #fff6d6; border: 0; }
.mx-am-tel { display: none; }
.mx-am-plus .export-titre { display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; margin-top: 6px; }
@media (min-width: 761px) {
    .mx-message > .mx-barre .mx-menu-creer { order: 2; }
    .mx-fenetre .mx-message > .mx-barre { padding-right: 84px; }
    /* Volet de lecture étroit : tout reste sur une ligne (« Créer » en rond, puis pictogrammes seuls, libellé au survol) */
    @container (max-width: 600px) {
        .mx-message > .mx-barre { gap: 8px; }
        .mx-lecture .mx-message > .mx-barre .mx-menu-creer .mx-libelle-garde { display: none !important; }
        .mx-message > .mx-barre .mx-menu-creer > summary { width: 40px; min-height: 40px; padding: 0; justify-content: center; font-size: 1.1rem; }
        .mx-actions-mobile { grid-auto-columns: minmax(0, 62px); }
        .mx-am { font-size: .66rem; padding: 5px 1px; }
    }
    /* Très étroit : les actions secondaires repassent sous « Plus » */
    @container (max-width: 400px) {
        .mx-am-pc { display: none !important; }
        .mx-am-tel { display: block; }
    }
    @container (max-width: 470px) {
        .mx-entete { flex-wrap: wrap; }
        .mx-date-longue { width: 100%; text-align: left; order: 3; padding-left: 54px; }
    }
    @container (max-width: 580px) {
        .mx-actions-mobile { grid-auto-columns: minmax(0, 46px); }
        .mx-am { min-height: 40px; }
        .mx-am span { display: none; }
    }
}
@media (max-width: 860px) {
    .mx-message > .mx-barre .mx-retour-liste { align-items: center; gap: 2px; min-height: 36px; padding: 0 10px 0 4px; border: 0; background: none;
        color: var(--bleu); font-weight: 650; font-size: .98rem; box-shadow: none; }
    .mx-message > .mx-barre .mx-retour-liste .mx-ico { display: block; width: 22px; height: 22px; }
    .mx-message > .mx-barre .mx-retour-texte { display: inline; }
    .mx-message > .mx-barre .mx-retour-fleche { display: none; }
}
@media (max-width: 760px) {
    .mx-message > .mx-barre { flex-wrap: wrap; gap: 10px; padding: 10px 0 0; border-bottom: 0; }
    .mx-message > .mx-barre .mx-menu-creer > summary { min-height: 36px; padding: 0 16px; }
    .mx-actions-mobile { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1 0 100%; padding: 5px; margin-bottom: 8px; border-radius: 16px; }
    .mx-am { gap: 4px; min-height: 54px; padding: 6px 2px; border-radius: 12px; font-size: .6rem; }
    .mx-am .mx-ico { width: 23px; height: 23px; }
    .mx-am:hover { box-shadow: none; background: none; }
    .mx-am-pc { display: none !important; }
    .mx-am-tel { display: block; }
    .mx-am:active, .mx-am-plus[open] > .mx-am { background: var(--carte); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
}

/* ---- 🚀 Assistant de premier démarrage (installation neuve) */
.page-installation { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: var(--fond); }
.carte-installation { width: 100%; max-width: 760px; padding: 28px 32px; }
.inst-tete { text-align: center; }
.inst-logo { height: 52px; width: auto; }
.inst-tete h1 { margin: 14px 0 4px; font-size: 1.45rem; }
.inst-tete p { margin: 0; }
.inst-etapes { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 22px 0 18px; padding: 0; counter-reset: none; }
.inst-etapes li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; color: var(--texte-2); font-size: .78rem; font-weight: 600; text-align: center; }
.inst-etapes li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--bord); }
.inst-etapes li:first-child::before { display: none; }
.inst-etapes li.fait::before, .inst-etapes li.actif::before { background: var(--bleu); }
.inst-puce { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--carte); border: 2px solid var(--bord); color: var(--texte-2); font-weight: 700; transition: background .2s, border-color .2s, color .2s; }
.inst-etapes li.actif .inst-puce { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 0 0 4px var(--bleu-clair); }
.inst-etapes li.fait .inst-puce { background: var(--bleu-clair); border-color: var(--bleu); color: var(--bleu); }
.inst-etapes li.actif { color: var(--texte); }
.inst-etape { border: 0; padding: 0; margin: 0; min-width: 0; }
.inst-etape legend { font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 4px; }
.inst-intro { color: var(--texte-2); margin: 0 0 16px; }
.inst-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.inst-grille .champ { margin: 0; }
.inst-grille input:not([type=radio]):not([type=checkbox]) { width: 100%; }
.inst-large { grid-column: 1 / -1; }
.inst-libelle { display: block; font-weight: 600; margin-bottom: 6px; }
.inst-choix-ligne { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.inst-radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.inst-depot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 170px; padding: 20px; border: 2px dashed var(--bord); border-radius: 14px; background: var(--fond); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.inst-depot:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.inst-depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.inst-depot img { max-height: 90px; max-width: 80%; object-fit: contain; }
.inst-depot-texte { display: flex; flex-direction: column; gap: 4px; }
.inst-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.inst-formule { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border: 2px solid var(--bord); border-radius: 14px; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.inst-formule input { position: absolute; opacity: 0; pointer-events: none; }
.inst-formule:hover { border-color: color-mix(in srgb, var(--bleu) 50%, var(--bord)); }
.inst-formule:has(input:checked) { border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-clair); }
.inst-formule:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
.inst-formule-icone { font-size: 1.8rem; }
.inst-formule strong { font-size: 1.05rem; }
.inst-options { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.inst-option, .inst-demo { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.inst-option input, .inst-demo input { margin-top: 3px; flex: none; }
.inst-demo { padding: 16px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); }
.inst-demo > span { display: flex; flex-direction: column; gap: 4px; }
.inst-recap { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.inst-recap-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 10px; background: var(--fond); }
.inst-recap-ligne span { color: var(--texte-2); white-space: nowrap; }
.inst-recap-ligne strong { text-align: right; overflow-wrap: anywhere; }
.inst-boutons { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.inst-boutons .btn { min-width: 150px; }
@media (max-width: 760px) {
    .page-installation { padding: 16px 12px; }
    .carte-installation { padding: 20px 16px; }
    .inst-grille, .inst-formules { grid-template-columns: minmax(0, 1fr); }
    .inst-puce-nom { display: none; }
    .inst-boutons .btn { min-width: 0; flex: 1; }
}
.inst-attente { font-size: .88rem; text-align: left; margin-bottom: 14px; }
.inst-boutons [hidden] { display: none !important; }

/* ---- 🔄 Mises à jour d'AXION PILOT (console de l'éditeur et CRM client) */
.console-version { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .9rem; }
.console-tous { margin: 0; }
.console-canal-choix { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.console-canal-choix label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.versions-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.versions-grille .card { margin: 0; }
.versions-publier textarea { width: 100%; }
.versions-canaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.versions-canal { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--bord); border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.versions-canal:has(input:checked) { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-clair); }
.versions-canal input { margin-top: 3px; }
.versions-canal > span { display: flex; flex-direction: column; gap: 2px; }
.versions-actions { display: flex; justify-content: center; margin-top: 14px; }
.versions-dl { display: grid; gap: 8px; margin: 0 0 12px; }
.versions-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--fond); }
.versions-dl dt { color: var(--texte-2); }
.versions-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.versions-notes { white-space: pre-line; max-width: 380px; }
.versions-boutons { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.versions-boutons form { margin: 0; }
.maj-dispo { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bleu-clair); }
.maj-notes { margin-top: 6px; white-space: pre-line; font-size: .9rem; }
.maj-carte .form-actions { gap: 10px; flex-wrap: wrap; }
.maj-carte .form-actions form { margin: 0; }
.maj-reglages { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord); }
.maj-reglages .champ { margin: 0; }
.maj-historique { margin-top: 12px; }
.maj-historique ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.maj-historique li { display: flex; gap: 8px; }
@media (max-width: 760px) {
    .versions-grille, .versions-canaux { grid-template-columns: minmax(0, 1fr); }
}
.maj-bandeau { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.maj-carte .env-versions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .maj-carte .env-versions { grid-template-columns: minmax(0, 1fr); } }

/* ---- 🎫 Licences des CRM clients */
.console-licence { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.console-licence a.badge-lien { text-decoration: none; color: var(--bleu); background: var(--bleu-clair); }
.console-licence a.badge-lien:hover { filter: brightness(.96); }
.licence-dialogue { width: min(560px, calc(100vw - 32px)); }
.licence-dialogue .lien-action { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--bleu); text-decoration: none; }
.licence-dialogue .lien-action:hover { text-decoration: underline; }
.licence-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.licence-formule { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 2px solid var(--bord); border-radius: 10px; cursor: pointer; }
.licence-formule:has(input:checked) { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-clair); }
.licence-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.licence-options label { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.licence-ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.licence-ligne .champ { margin: 0; }
.licence-ligne input, .licence-ligne select { width: 100%; }
.licence-prolonger { display: flex; justify-content: center; margin: 4px 0 0; }
@media (max-width: 760px) { .licence-formules, .licence-options, .licence-ligne { grid-template-columns: minmax(0, 1fr); } }
.licence-bandeau { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }

/* ---- 🛰️ Supervision des CRM clients */
.console-sante { display: flex; flex-wrap: wrap; gap: 6px; }
.console-sante span { font-size: .78rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--bord); background: var(--fond); white-space: nowrap; }
.console-sante .console-sante-ok { border-color: color-mix(in srgb, var(--vert) 35%, var(--bord)); background: var(--vert-clair); color: color-mix(in srgb, var(--vert) 75%, var(--texte)); }
.console-sante .console-sante-ko { border-color: color-mix(in srgb, var(--rouge) 35%, var(--bord)); background: var(--rouge-clair); color: var(--rouge); }
.console-sante .console-sante-neutre { color: var(--texte-2); }
.console-attente { color: var(--bleu); }
.console-attente-ko { color: var(--rouge); }
.console-actions { position: relative; }
.console-actions-panneau { width: max-content; min-width: 300px; max-width: calc(100vw - 32px); }
.console-actions-panneau form { margin: 0; }
.console-alertes-email { margin: 0; display: flex; align-items: center; }

/* ---- 📄 Livraison des CRM AXION PILOT (Super console) */
.livraison-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.livraison-grille .card { margin: 0; }
.livraison-carte h2 { margin: 0 0 10px; font-size: 1.1rem; }
.livraison-carte p { margin: 0 0 10px; }
.livraison-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.livraison-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.livraison-conclusion { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; }
.livraison-points { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--bordure, #dde2e8); border-radius: 8px; }
.livraison-points label, .livraison-conclusion label { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; cursor: pointer; }
.livraison-points input { margin-top: 3px; flex-shrink: 0; }
.livraison-signes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bordure, #dde2e8); display: grid; gap: 4px; font-size: .92rem; }
.documents-pilot .card { margin: 0 0 16px; }
.documents-pilot-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.documents-pilot-tete h2 { margin: 0; font-size: 1.1rem; }
.documents-pilot textarea { width: 100%; font-family: inherit; line-height: 1.45; }
@media (max-width: 760px) {
    .livraison-grille, .livraison-ligne { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 📊 Abonnements et 🧪 essais AXION PILOT (Super console) */
.abo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.abo-kpis > .abo-kpi { margin: 0; } .abo-kpi { margin: 0; display: grid; gap: 2px; text-align: center; }
.abo-kpi span { color: var(--gris, #5b6470); font-size: .9rem; }
.abo-kpi strong { font-size: 1.7rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.abo-kpi small { color: var(--gris, #5b6470); }
.abo-kpi-principal { border-top: 4px solid var(--bleu); }
.abo-kpi-principal strong { color: var(--bleu); }
.abo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.abo-grille .card { margin: 0; }
.abo-grille h2 { margin: 0 0 12px; font-size: 1.1rem; }
.abo-sous { font-size: .95rem; margin: 14px 0 8px; }
.abo-graphe { width: 100%; height: auto; display: block; }
.abo-grille-ligne { stroke: var(--bordure, #dde2e8); stroke-width: 1; }
.abo-barre-mrr { fill: var(--bleu); background: var(--bleu); }
.abo-barre-encaisse { fill: #1b7f5b; background: #1b7f5b; }
.abo-graphe-mois { font-size: 12px; fill: var(--gris, #5b6470); }
.abo-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: .88rem; color: var(--gris, #5b6470); margin-top: 6px; }
.abo-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.abo-etats, .abo-entonnoir { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.abo-etats div, .abo-entonnoir div { display: grid; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--fond-doux, #f3f6fc); }
.abo-etats strong, .abo-entonnoir strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.abo-etats span, .abo-entonnoir span { font-size: .82rem; color: var(--gris, #5b6470); }
.abo-orange strong { color: #b26a00; }
.abo-rouge strong { color: #b42318; }
.abo-vert strong { color: #1b7f5b; }
.abo-ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; gap: 10px; align-items: center; margin-bottom: 6px; }
.abo-ligne strong { text-align: right; }
.abo-jauge { height: 10px; border-radius: 6px; background: var(--fond-doux, #eef1f6); overflow: hidden; }
.abo-jauge i { display: block; height: 100%; background: var(--bleu); border-radius: 6px; }
.abo-options { display: flex; flex-wrap: wrap; gap: 6px; }
.abo-echeance { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordure, #dde2e8); }
.abo-echeance:last-child { border-bottom: 0; }
.essais-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 8px; }
.essais-grille .card { margin: 0; }
.essais-grille h2 { margin: 0 0 12px; font-size: 1.1rem; }
.essais-adresse code { display: inline-block; padding: 8px 12px; font-size: 1rem; user-select: all; word-break: break-all; }
@media (max-width: 900px) {
    .abo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abo-grille, .essais-grille { grid-template-columns: minmax(0, 1fr); }
}

/* 📜 Paramètres › Entreprise : conditions générales (CGV, CGM) */
.conditions-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.conditions-fichier { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; background: var(--surface-2); display: flex; flex-direction: column; }
.conditions-tete { display: flex; align-items: center; gap: 10px; }
.conditions-tete > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.conditions-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--carte); border: 1px solid var(--bord); font-size: 1.1rem; flex-shrink: 0; }
.conditions-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: auto; padding-top: 10px; }
.conditions-actions form { margin: 0; }
.conditions-actions label.btn { cursor: pointer; }
.case-conditions { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); font-weight: 600; }
@media (max-width: 760px) { .conditions-grille { grid-template-columns: minmax(0, 1fr); } }
/* 📱 Application mobile : iPhone / iPad et Android côte à côte (l'appareil utilisé en premier, l'autre atténué) */
.appli-systemes { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.appli-systeme h3 { margin: 0 0 10px; font-size: 1rem; }
.appli-systeme.appli-autre { opacity: .55; }
.appli-android-bouton { display: flex; justify-content: center; margin-top: 12px; }
@media (max-width: 760px) {
    .appli-systemes { grid-template-columns: minmax(0, 1fr); }
    .appli-systeme.appli-autre { display: none; }
}
/* 📱 Tablettes tactiles (Android, iPad) de 761 à 1100 px : en-tête resserré pour tenir sur une ligne, menu qui défile
   au doigt avec un fondu qui l'indique. Écrans tactiles uniquement : l'affichage sur ordinateur ne change pas. */
@media (min-width: 761px) and (max-width: 1100px) and (hover: none) and (pointer: coarse) {
    .topbar-haut { gap: 12px; }
    .topbar .brand img { max-height: 40px; width: auto; }
    .topbar .accueil, .rg-raccourci, .masque-etroit, .societe-libelle { display: none; }
    .recherche-globale { flex: 1 1 200px; min-width: 140px; }
    .user-menu { gap: 6px; }
    .user-menu .btn-icone, .user-menu > form .btn { min-width: 44px; min-height: 44px; }
    .topbar-menu .nav { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .topbar-menu .nav::-webkit-scrollbar { display: none; }
    .topbar-menu .nav > * { scroll-snap-align: start; }
    /* Cibles tactiles confortables */
    .btn { min-height: 40px; }
    .btn-petit { min-height: 34px; }
}

/* 🕘 Choix des heures du CRM (ordinateur uniquement : téléphones et tablettes gardent la molette du système) */
@media (hover: hover) and (pointer: fine) {
    .heure-crm-champ::-webkit-calendar-picker-indicator { display: none; }
    .heure-crm-champ { cursor: pointer; }
}
.heure-crm-conteneur { position: relative; }
.heure-crm { position: absolute; z-index: 2700; left: 0; top: 100%; margin: 4px 0 0; min-width: 100%; width: max-content; max-height: 248px; overflow-y: auto;
    padding: 4px; list-style: none; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.heure-crm li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 10px; border-radius: calc(5px * var(--arrondi)); cursor: pointer;
    font-size: .88rem; font-variant-numeric: tabular-nums; }
.heure-crm li:hover { background: var(--bleu-clair); color: var(--bleu-fonce); }
.heure-crm li[aria-selected="true"] { background: var(--bleu); color: var(--sur-bleu); font-weight: 600; }
.heure-crm-duree { color: var(--texte-3); font-size: .8rem; }
.heure-crm li:hover .heure-crm-duree { color: inherit; opacity: .75; }
.heure-crm li[aria-selected="true"] .heure-crm-duree { color: inherit; opacity: .85; }

/* 🖱️ Menu contextuel de l'agenda (clic droit) */
.ag-menu { position: fixed; z-index: 2800; min-width: 210px; padding: 5px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.ag-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; border-radius: calc(5px * var(--arrondi)); background: transparent;
    color: var(--texte); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.ag-menu button span { width: 1.2em; text-align: center; }
.ag-menu button:hover, .ag-menu button:focus-visible { background: var(--bleu-clair); color: var(--bleu-fonce); outline: none; }
.ag-menu .ag-menu-danger { color: var(--rouge, #b42318); }
.ag-menu .ag-menu-danger:hover, .ag-menu .ag-menu-danger:focus-visible { background: color-mix(in srgb, var(--rouge, #b42318) 12%, transparent); color: var(--rouge, #b42318); }
.ag-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--bord); }

/* 🧭 Assistant de création d'entreprise */
.assistant { max-width: 920px; margin: 0 auto; }
.assistant-tete { text-align: center; justify-content: center; }
.assistant-etapes { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; }
.assistant-etapes .etape { display: inline-flex; align-items: center; gap: 6px; }
.assistant-numero { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .75rem; font-weight: 700; }
.assistant-carte { padding: 22px 24px; }
.assistant-h2 { margin: 0 0 14px; font-size: 1.15rem; }
.assistant-h3 { margin: 4px 0 10px; font-size: 1rem; }
.assistant-intro { margin: 0 0 14px; }
.assistant-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.assistant-utilisateurs { border: 0; padding: 0; margin: 14px 0 0; }
.assistant-logo { display: grid; place-items: center; height: 110px; margin-bottom: 12px; border: 1px dashed var(--bord); border-radius: var(--rayon); background: var(--gris-clair); overflow: hidden; }
.assistant-logo img { max-width: 90%; max-height: 90px; object-fit: contain; }
.assistant-logo-vide { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bleu); color: var(--sur-bleu); font-size: 1.8rem; font-weight: 700; }
.assistant-choix { margin: 0 0 8px; }
.assistant-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; transition: opacity .2s; }
.assistant-couleurs.assistant-inactif { opacity: .45; }
.assistant-couleurs input[type="color"] { width: 46px; height: 34px; padding: 2px; border-radius: calc(6px * var(--arrondi, 1)); cursor: pointer; }
.assistant-pastille { min-width: 30px; height: 30px; padding: 0 8px; border: 2px solid var(--carte); border-radius: var(--pilule); background: var(--c); color: #fff; font: inherit; font-size: .72rem; font-weight: 600;
    box-shadow: 0 0 0 1px var(--bord); cursor: pointer; }
.assistant-pastille.choisie, .assistant-pastille:focus-visible { box-shadow: 0 0 0 2px var(--texte); outline: none; }
.assistant-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.assistant-module { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); cursor: pointer; }
.assistant-module input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.assistant-module > span { display: grid; gap: 2px; min-width: 0; }
.assistant-module:has(input:checked) { border-color: color-mix(in srgb, var(--bleu) 55%, var(--bord)); background: color-mix(in srgb, var(--bleu) 6%, var(--carte)); }
.assistant-module.hors-formule { opacity: .6; cursor: not-allowed; }
.assistant-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.assistant-boutons .btn.desactive { opacity: .5; cursor: not-allowed; }
.assistant-compte { margin-bottom: 6px; }
.assistant-liste { margin: 0 0 12px; padding-left: 4px; list-style: none; display: grid; gap: 6px; }
.assistant-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.assistant-recap li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.assistant-recap li > span { font-size: 1.2rem; line-height: 1.3; }
.assistant-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); }
@media (max-width: 720px) {
    .assistant-carte { padding: 16px; }
    .assistant-deux, .assistant-modules { grid-template-columns: minmax(0, 1fr); }
    .assistant-titre-etape { display: none; }
    .assistant-etapes { gap: 4px; }
    .assistant-etapes .etape { padding: 4px 8px; }
    .assistant-etapes .etape.active .assistant-titre-etape { display: inline; }
    .assistant-actions .btn { flex: 1 1 auto; }
}

.donnees-test-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.preparation-barre { height: 12px; margin: 6px 0 12px; border-radius: var(--pilule); background: var(--gris-clair); overflow: hidden; }
.preparation-barre i { display: block; height: 100%; width: var(--avance, 3%); border-radius: inherit; background: var(--bleu); transition: width .4s ease; }

.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 📎 Pièce jointe en cours d'envoi au serveur (pendant la rédaction) : la puce se remplit */
.mx-joint.mx-joint-encours { background: linear-gradient(90deg, color-mix(in srgb, var(--bleu) 28%, var(--carte)) var(--progres, 0%), var(--carte) var(--progres, 0%)); border-color: color-mix(in srgb, var(--bleu) 45%, var(--bord)); }
.mx-joint.mx-joint-erreur { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 35%, var(--carte)); color: var(--rouge); }

/* ⧉ Messagerie détachée : fenêtre à part, sans le menu du CRM ; boutons Détacher (CRM) / Rattacher (fenêtre) */
.mx-rattacher { display: none; }
html.mx-detache .mx-detacher { display: none; }
html.mx-detache .mx-rattacher { display: inline-flex; }
html.mx-detache .topbar, html.mx-detache .tiroir, html.mx-detache .compte-feuille, html.mx-detache .retour-barre,
html.mx-detache .axia, html.mx-detache .appli-invitation { display: none !important; }
html.mx-detache main.container { max-width: none; padding: 12px 16px 16px; }
html.mx-detache .page-head { top: 0 !important; }
html.mx-detache .ag-corps { height: calc(100vh - 250px); }
@media (hover: none), (max-width: 1000px) { .mx-detacher { display: none; } }

/* 🗂️ Fiche client : Correspondants et Espace client empilés, à la hauteur des Coordonnées */
.fiche-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fiche-colonne > .card { margin: 0; }
.fiche-colonne-extensible { flex: 1 1 auto; }

/* 📬 Fiche client : e-mails liés (aperçu au survol, lecture dans une fenêtre) */
.email-client { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: var(--rayon); color: var(--texte); border-bottom: 1px solid var(--gris-clair); }
.email-client:last-child { border-bottom: 0; }
.email-client:hover { background: var(--survol); text-decoration: none; }
.email-client-sens { flex: none; width: 24px; text-align: center; font-size: 1rem; line-height: 1.5; }
.email-client-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.email-client-haut { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.email-client-qui { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.email-client-date { flex: none; font-size: .76rem; color: var(--texte-3); }
.email-client-objet, .email-client-extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-client-objet { font-size: .88rem; }
.email-client-extrait { font-size: .8rem; color: var(--texte-3); }
.email-client-non-lu .email-client-qui, .email-client-non-lu .email-client-objet { font-weight: 700; }
.emails-client-plus { text-align: center; margin: 10px 0 2px; }
.email-fenetre { width: min(900px, calc(100vw - 32px)); }
.email-fenetre h2 { padding-right: 28px; overflow-wrap: anywhere; }
.email-fenetre-infos { margin: 0 0 10px; overflow-wrap: anywhere; }
.email-fenetre-cadre { display: block; width: 100%; height: min(62vh, 640px); border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; margin-bottom: 14px; }

/* 📬 Aperçu au survol d'un e-mail (fiche client) : comme dans la Messagerie */
.apercu-email { width: min(560px, calc(100vw - 60px)); padding: 12px 14px; }
.apm-sujet { font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; overflow-wrap: anywhere; }
.apm-entete { margin-bottom: 8px; }
.apm-etat { margin: 0 0 8px; }
.apm-cadre { height: 420px; border: 1px solid var(--bord); }