/* Fichier FABRIQUÉ par outils/importer-mes-devis.js à partir de projets/espace-client/public/assets/css/espace.css + css/mes-devis.css : NE PAS MODIFIER ICI (modifier l'espace client, puis relancer l'outil). */
/* ---- espace.css ---- */
.md-ecran.md-tout { --encre: #111318; --encre-2: #1b1e26; --bleu: #3b5bff; --bleu-fonce: #2a45e0; --bleu-doux: #eef1ff; --menthe: #2ee6a6; --menthe-doux: #e3fbf2; --nuage: #f1f3f8; --gris: #9aa1b2; --ardoise: #5c6374; --bordure: #e1e5ee; --blanc: #fff; --rouge: #c8372d; --orange-doux: #fff1e5; --titres: 'Sora', 'Segoe UI', Arial, sans-serif; --texte: 'Manrope', 'Segoe UI', Arial, sans-serif; --rayon: calc(16 * var(--u)); --ombre: 0 1px 2px rgba(17, 19, 24, .05), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(17, 19, 24, .06) }
.md-ecran.md-tout * { box-sizing: border-box }
.md-ecran.md-tout { margin: 0; font-family: var(--texte); font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--encre); background: var(--nuage); -webkit-font-smoothing: antialiased }
.md-ecran.md-tout h1, .md-ecran.md-tout h2, .md-ecran.md-tout h3 { font-family: var(--titres); font-weight: 600; margin: 0; letter-spacing: -.01em }
.md-ecran.md-tout a { color: var(--bleu) }
.md-ecran.md-tout .bouton { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); border: 0; border-radius: calc(999 * var(--u)); padding: calc(12 * var(--u)) calc(22 * var(--u)); font: 700 calc(15 * var(--u)) var(--texte); background: var(--bleu); color: #fff; cursor: pointer; text-decoration: none; transition: background .15s }
.md-ecran.md-tout .bouton:hover { background: var(--bleu-fonce) }
.md-ecran.md-tout .bouton:disabled { opacity: .6; cursor: default }
.md-ecran.md-tout .bouton.secondaire { background: transparent; color: inherit; border: 1px solid currentColor }
.md-ecran.md-tout .bouton.petit { padding: calc(7 * var(--u)) calc(14 * var(--u)); font-size: calc(13.5 * var(--u)) }
.md-ecran.md-tout .discret { color: var(--ardoise) }
.md-ecran.md-tout .petit { font-size: calc(13 * var(--u)) }
.md-ecran.md-tout :focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px }
.md-ecran.md-tout .page-connexion { min-height: 100vh; display: grid; place-items: center; padding: calc(24 * var(--u)); background: var(--encre); position: relative; overflow: hidden }
.md-ecran.md-tout .page-connexion::before { content: ""; position: absolute; right: calc(-220 * var(--u)); top: calc(-240 * var(--u)); width: calc(640 * var(--u)); height: calc(640 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(59, 91, 255, .38), transparent 65%) }
.md-ecran.md-tout .page-connexion::after { content: ""; position: absolute; left: calc(-240 * var(--u)); bottom: calc(-280 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(46, 230, 166, .14), transparent 65%) }
.md-ecran.md-tout .connexion-carte { position: relative; z-index: 1; width: min(calc(440 * var(--u)), 100%); background: var(--blanc); border-radius: calc(20 * var(--u)); padding: calc(36 * var(--u)) calc(34 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: calc(16 * var(--u)) }
.md-ecran.md-tout .connexion-logo { width: calc(150 * var(--u)); margin-bottom: calc(6 * var(--u)) }
.md-ecran.md-tout .connexion-carte h1 { font-size: calc(24 * var(--u)) }
.md-ecran.md-tout .connexion-carte p { margin: 0; color: var(--ardoise) }
.md-ecran.md-tout .connexion-carte form { display: flex; flex-direction: column; gap: calc(12 * var(--u)) }
.md-ecran.md-tout .champ { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-weight: 600; font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .champ input, .md-ecran.md-tout .champ select { font: 400 calc(15 * var(--u)) var(--texte); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--bordure); border-radius: calc(12 * var(--u)); background: #fff; color: var(--encre) }
.md-ecran.md-tout .champ input:focus { outline: 2px solid var(--bleu); border-color: transparent }
.md-ecran.md-tout .message { padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .message.ok { background: var(--menthe-doux); color: #0b6b4b }
.md-ecran.md-tout .message.ko { background: #fdecec; color: var(--rouge) }
.md-ecran.md-tout .securite { display: flex; gap: calc(8 * var(--u)); align-items: flex-start; font-size: calc(12.5 * var(--u)); color: var(--ardoise); border-top: 1px solid var(--bordure); padding-top: calc(14 * var(--u)) }
.md-ecran.md-tout .securite svg { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: 2px; color: var(--menthe) }
.md-ecran.md-tout .entete { background: var(--encre); color: #fff; position: relative; overflow: hidden }
.md-ecran.md-tout .entete::after { content: ""; position: absolute; right: calc(-180 * var(--u)); top: calc(-260 * var(--u)); width: calc(560 * var(--u)); height: calc(560 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(59, 91, 255, .35), transparent 65%); pointer-events: none }
.md-ecran.md-tout .entete-barre { max-width: calc(1240 * var(--u)); margin: 0 auto; padding: calc(18 * var(--u)) calc(24 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); position: relative; z-index: 1 }
.md-ecran.md-tout .entete-barre img { width: calc(136 * var(--u)); display: block }
.md-ecran.md-tout .entete-barre .qui { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); color: #c9cdd8 }
.md-ecran.md-tout .entete-titre { max-width: calc(1240 * var(--u)); margin: 0 auto; padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: calc(20 * var(--u)); flex-wrap: wrap }
.md-ecran.md-tout .entete-titre .surtitre { color: var(--menthe); font-size: calc(12.5 * var(--u)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: calc(8 * var(--u)) }
.md-ecran.md-tout .entete-titre .surtitre::before { content: ""; width: calc(18 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--menthe) }
.md-ecran.md-tout .entete-titre h1 { font-size: clamp(calc(24 * var(--u)), 3vw, calc(34 * var(--u))); margin-top: calc(6 * var(--u)) }
.md-ecran.md-tout .entete-titre .direct { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); color: #c9cdd8; margin-top: calc(6 * var(--u)) }
.md-ecran.md-tout .direct i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 0 rgba(46, 230, 166, .6); animation: md-pulse 2s infinite }
@keyframes md-pulse { 70% { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(46, 230, 166, 0) } 100% { box-shadow: 0 0 0 0 rgba(46, 230, 166, 0) } }
.md-ecran.md-tout .periodes { display: inline-flex; background: rgba(255, 255, 255, .08); border-radius: calc(999 * var(--u)); padding: calc(4 * var(--u)); gap: 2px }
.md-ecran.md-tout .periodes button { border: 0; background: transparent; color: #c9cdd8; font: 600 calc(13.5 * var(--u)) var(--texte); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); cursor: pointer }
.md-ecran.md-tout .periodes button[aria-pressed="true"] { background: #fff; color: var(--encre) }
.md-ecran.md-tout .onglets-espace { max-width: calc(1240 * var(--u)); margin: 0 auto; padding: 0 calc(24 * var(--u)); position: relative; z-index: 1; display: flex; gap: calc(4 * var(--u)) }
.md-ecran.md-tout .onglets-espace a { color: #c9cdd8; text-decoration: none; font-weight: 700; font-size: calc(14 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)) }
.md-ecran.md-tout .onglets-espace a:hover { color: #fff; background: rgba(255, 255, 255, .08) }
.md-ecran.md-tout .onglets-espace a[aria-current="page"] { background: #fff; color: var(--encre) }
.md-ecran.md-tout .bandeau-demo { background: var(--menthe); color: var(--encre); text-align: center; font-weight: 700; font-size: calc(13.5 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) }
.md-ecran.md-tout .contenu { max-width: calc(1240 * var(--u)); margin: calc(-18 * var(--u)) auto 0; padding: 0 calc(24 * var(--u)) calc(48 * var(--u)); position: relative; z-index: 2; display: flex; flex-direction: column; gap: calc(18 * var(--u)) }
.md-ecran.md-tout .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)) }
.md-ecran.md-tout .kpi { background: var(--blanc); border-radius: var(--rayon); padding: calc(18 * var(--u)) calc(20 * var(--u)); box-shadow: var(--ombre); display: flex; flex-direction: column; gap: calc(4 * var(--u)) }
.md-ecran.md-tout .kpi-tete { display: flex; justify-content: space-between; align-items: center; color: var(--ardoise); font-size: calc(13.5 * var(--u)); font-weight: 600 }
.md-ecran.md-tout .kpi-icone { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; background: var(--bleu-doux); color: var(--bleu) }
.md-ecran.md-tout .kpi-icone svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)) }
.md-ecran.md-tout .kpi.vert .kpi-icone { background: var(--menthe-doux); color: #0b8a5f }
.md-ecran.md-tout .kpi-valeur { font-family: var(--titres); font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums }
.md-ecran.md-tout .kpi-aide { font-size: calc(12.5 * var(--u)); color: var(--ardoise) }
.md-ecran.md-tout .grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: calc(18 * var(--u)) }
.md-ecran.md-tout .carte { background: var(--blanc); border-radius: var(--rayon); padding: calc(20 * var(--u)) calc(22 * var(--u)); box-shadow: var(--ombre); min-width: 0 }
.md-ecran.md-tout .carte h2 { font-size: calc(16 * var(--u)); margin-bottom: calc(4 * var(--u)) }
.md-ecran.md-tout .carte .sous { font-size: calc(13 * var(--u)); color: var(--ardoise); margin: 0 0 calc(14 * var(--u)) }
.md-ecran.md-tout .legende { display: flex; gap: calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--ardoise) }
.md-ecran.md-tout .legende .c-bleu { background: var(--bleu) }
.md-ecran.md-tout .legende .c-menthe { background: var(--menthe) }
.md-ecran.md-tout .legende i { display: inline-block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)); margin-right: calc(6 * var(--u)); vertical-align: -1px }
.md-ecran.md-tout .titre-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); flex-wrap: wrap }
.md-ecran.md-tout .graphique svg { width: 100%; height: auto; display: block; overflow: visible }
.md-ecran.md-tout .barres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)) }
.md-ecran.md-tout .barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(4 * var(--u)) calc(10 * var(--u)); font-size: calc(13.5 * var(--u)) }
.md-ecran.md-tout .barres .piste { grid-column: 1 / -1; height: calc(8 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--nuage); overflow: hidden }
.md-ecran.md-tout .barres .piste span { display: block; height: 100%; border-radius: calc(99 * var(--u)); background: var(--bleu) }
.md-ecran.md-tout .barres li:first-child .piste span { background: linear-gradient(90deg, var(--bleu), #6f86ff) }
.md-ecran.md-tout .barres b { font-variant-numeric: tabular-nums }
.md-ecran.md-tout .anneau { display: flex; align-items: center; gap: calc(18 * var(--u)) }
.md-ecran.md-tout .anneau svg { width: calc(130 * var(--u)); height: calc(130 * var(--u)); flex: none }
.md-ecran.md-tout .anneau ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)) }
.md-ecran.md-tout .anneau li i { display: inline-block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)); margin-right: calc(8 * var(--u)) }
.md-ecran.md-tout .demandes { width: 100%; border-collapse: collapse; font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .demandes th { text-align: left; font-size: calc(12 * var(--u)); text-transform: uppercase; letter-spacing: .05em; color: var(--ardoise); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--bordure) }
.md-ecran.md-tout .demandes td { padding: calc(12 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--bordure); vertical-align: top }
.md-ecran.md-tout .demandes tr:last-child td { border-bottom: 0 }
.md-ecran.md-tout .demandes .msg { color: var(--ardoise); max-width: calc(460 * var(--u)) }
.md-ecran.md-tout .demandes .quand { white-space: nowrap; color: var(--ardoise); font-size: calc(13 * var(--u)) }
.md-ecran.md-tout .demandes a { text-decoration: none; font-weight: 600 }
.md-ecran.md-tout .vide { padding: calc(22 * var(--u)); text-align: center; color: var(--ardoise); background: var(--nuage); border-radius: calc(12 * var(--u)); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .info-stats { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--bleu-doux); color: #1d2f8f; font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .pied { text-align: center; font-size: calc(12.5 * var(--u)); color: var(--gris); padding: calc(8 * var(--u)) 0 0 }
.md-ecran.md-tout .chargement { padding: calc(60 * var(--u)); text-align: center; color: var(--ardoise) }
.md-ecran.md-tout .admin-client { display: flex; flex-direction: column; gap: calc(12 * var(--u)) }
.md-ecran.md-tout .admin-client + .admin-client { border-top: 1px solid var(--bordure); padding-top: calc(18 * var(--u)); margin-top: calc(6 * var(--u)) }
.md-ecran.md-tout .admin-ligne { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; align-items: flex-end }
.md-ecran.md-tout .admin-ligne .champ { flex: 1; min-width: calc(180 * var(--u)) }
.md-ecran.md-tout .admin-liste { margin: 0; padding-left: calc(18 * var(--u)); font-size: calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)) }
.md-ecran.md-tout .cle { font-family: Consolas, monospace; font-size: calc(12.5 * var(--u)); background: var(--nuage); padding: 2px calc(6 * var(--u)); border-radius: calc(6 * var(--u)); word-break: break-all }
.md-ecran.md-tout .pack-admin { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--nuage) }
.md-ecran.md-tout .secret-unique { border: 2px solid var(--menthe); background: var(--menthe-doux); border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .erreur-admin { color: var(--rouge) }
.md-ecran.md-tout .journal { font-size: calc(12.5 * var(--u)); color: var(--ardoise); max-height: calc(260 * var(--u)); overflow: auto; margin: 0; padding-left: calc(18 * var(--u)) }
.md-ecran.md-max-960 .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.md-ecran.md-max-960 .grille { grid-template-columns: minmax(0, 1fr) }
.md-ecran.md-max-560 .contenu, .md-ecran.md-max-560 .entete-barre, .md-ecran.md-max-560 .entete-titre { padding-left: calc(14 * var(--u)); padding-right: calc(14 * var(--u)) }
.md-ecran.md-max-560 .kpi-valeur { font-size: calc(24 * var(--u)) }
.md-ecran.md-max-560 .demandes .msg { max-width: none }
.md-ecran.md-max-560 .demandes thead { display: none }
.md-ecran.md-max-560 .demandes tr { display: block; padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--bordure) }
.md-ecran.md-max-560 .demandes td { display: block; border: 0; padding: 2px 0 }
.md-ecran.md-max-560 .entete-barre .qui span { display: none }
.md-ecran.md-max-560 .onglets-espace { padding: 0 calc(14 * var(--u)) }
/* ---- mes-devis.css ---- */
.md-ecran.md-tout .etat-auto { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 700; background: rgba(46, 230, 166, .14); color: var(--menthe) }
.md-ecran.md-tout .etat-auto i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: currentColor; flex: none }
.md-ecran.md-tout .etat-auto[data-etat="actif"] i { animation: md-pulse 2s infinite; box-shadow: 0 0 0 0 rgba(46, 230, 166, .6) }
.md-ecran.md-tout .etat-auto[data-etat="pause"] { background: rgba(255, 184, 77, .16); color: #ffc46b }
.md-ecran.md-tout .etat-auto[data-etat="pause"] i { border-radius: 2px; width: calc(8 * var(--u)); height: calc(10 * var(--u)); background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%) }
.md-ecran.md-tout .etat-auto[data-etat="alerte"] { background: rgba(255, 107, 94, .16); color: #ff8a7e }
.md-ecran.md-tout .etat-auto[data-etat="test"], .md-ecran.md-tout .etat-auto[data-etat="attente"] { background: rgba(255, 255, 255, .1); color: #dfe3ec }
.md-ecran.md-tout .synchro { display: block; font-size: calc(12.5 * var(--u)); color: #9aa1b2; margin-top: calc(8 * var(--u)) }
.md-ecran.md-tout .bandeau { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.45 }
.md-ecran.md-tout .bandeau svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; margin-top: 1px }
.md-ecran.md-tout .bandeau.file { background: #fff6e5; color: #6b4e00; border: 1px solid #f6dfa8 }
.md-ecran.md-tout .bandeau.alerte { background: #fdecec; color: #8f241c; border: 1px solid #f3c3bd }
.md-ecran.md-tout .bandeau.info { background: var(--bleu-doux); color: #1d2f8f }
.md-ecran.md-tout .bandeau.pause { background: #fff1e5; color: #7a4100; border: 1px solid #f7d2ae }
.md-ecran.md-tout .bandeau strong { font-weight: 700 }
.md-ecran.md-tout .autres-messages { margin-top: calc(-10 * var(--u)); font-size: calc(13 * var(--u)); color: var(--ardoise) }
.md-ecran.md-tout .autres-messages summary { cursor: pointer; padding: 2px calc(4 * var(--u)); width: max-content }
.md-ecran.md-tout .autres-messages .bandeau { margin-top: calc(8 * var(--u)) }
.md-ecran.md-tout .kpis-devis { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.md-ecran.md-tout .kpis-devis .kpi { padding: calc(20 * var(--u)) calc(22 * var(--u)); gap: calc(6 * var(--u)) }
.md-ecran.md-tout .kpi.fort { background: var(--encre); color: #fff }
.md-ecran.md-tout .kpi.fort .kpi-tete, .md-ecran.md-tout .kpi.fort .kpi-aide { color: #b9bfcc }
.md-ecran.md-tout .kpi.fort .kpi-valeur { color: var(--menthe) }
.md-ecran.md-tout .kpi.fort .kpi-icone { background: rgba(46, 230, 166, .16); color: var(--menthe) }
.md-ecran.md-tout .kpis-plus { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(22 * var(--u)); margin: calc(-6 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(13.5 * var(--u)); color: var(--ardoise) }
.md-ecran.md-tout .kpis-plus span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)) }
.md-ecran.md-tout .kpis-plus svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; color: var(--gris) }
.md-ecran.md-tout .kpis-plus b { color: var(--encre); font-weight: 700 }
.md-ecran.md-tout .carte-devis { padding-bottom: calc(8 * var(--u)) }
.md-ecran.md-tout .outils-devis { display: flex; gap: calc(10 * var(--u)); align-items: center; justify-content: space-between; flex-wrap: wrap; margin: calc(4 * var(--u)) 0 calc(12 * var(--u)) }
.md-ecran.md-tout .filtres { display: flex; gap: calc(6 * var(--u)); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.md-ecran.md-tout .filtres::-webkit-scrollbar { display: none }
.md-ecran.md-tout .filtres button { flex: none; border: 1px solid var(--bordure); background: #fff; color: var(--ardoise); font: 700 calc(13.5 * var(--u)) var(--texte); padding: calc(8 * var(--u)) calc(13 * var(--u)); border-radius: calc(999 * var(--u)); cursor: pointer; white-space: nowrap }
.md-ecran.md-tout .filtres button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre) }
.md-ecran.md-tout .filtres button span { font-weight: 600; opacity: .7; margin-left: calc(4 * var(--u)) }
.md-ecran.md-tout .recherche { position: relative; flex: 1; min-width: calc(200 * var(--u)); max-width: calc(320 * var(--u)) }
.md-ecran.md-tout .recherche input { width: 100%; font: 400 calc(14.5 * var(--u)) var(--texte); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(36 * var(--u)); border: 1px solid var(--bordure); border-radius: calc(999 * var(--u)); background: var(--nuage); color: var(--encre) }
.md-ecran.md-tout .recherche input:focus { outline: 2px solid var(--bleu); background: #fff; border-color: transparent }
.md-ecran.md-tout .recherche svg { position: absolute; left: calc(12 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); transform: translateY(-50%); color: var(--gris) }
.md-ecran.md-tout .liste-devis { display: flex; flex-direction: column }
.md-ecran.md-tout .entete-liste { display: none }
.md-ecran.md-tout .devis-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "client client montant" "statut proch proch"; gap: calc(6 * var(--u)) calc(10 * var(--u)); align-items: center; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--bordure); background: transparent; padding: calc(14 * var(--u)) calc(4 * var(--u)); font: inherit; color: inherit; cursor: pointer; border-radius: 0 }
.md-ecran.md-tout .devis-ligne:first-of-type { border-top: 0 }
.md-ecran.md-tout .devis-ligne:hover { background: #f8f9fc }
.md-ecran.md-tout .devis-ligne:focus-visible { outline-offset: -2px; border-radius: calc(10 * var(--u)) }
.md-ecran.md-tout .dl-client { grid-area: client; min-width: 0 }
.md-ecran.md-tout .dl-client strong { display: block; font-size: calc(15 * var(--u)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.md-ecran.md-tout .dl-montant { grid-area: montant; font-family: var(--titres); font-weight: 600; font-size: calc(15 * var(--u)); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums }
.md-ecran.md-tout .dl-statut { grid-area: statut; display: flex; gap: calc(6 * var(--u)); align-items: center; min-width: 0 }
.md-ecran.md-tout .dl-proch { grid-area: proch; min-width: 0; font-size: calc(13 * var(--u)); color: var(--ardoise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.md-ecran.md-tout .dl-proch strong { color: var(--encre); font-weight: 700 }
.md-ecran.md-tout .dl-proch em { font-style: normal; font-weight: 700; color: #7a4100 }
.md-ecran.md-tout .dl-proch.arret { color: #8f241c }
.md-ecran.md-tout .dl-proch.fini { color: var(--gris) }
.md-ecran.md-tout .devis-ligne.fantome { opacity: .75; background: repeating-linear-gradient(135deg, transparent 0 calc(10 * var(--u)), rgba(59, 91, 255, .04) calc(10 * var(--u)) calc(20 * var(--u))) }
.md-ecran.md-tout .puce { display: inline-flex; align-items: center; padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 700; line-height: 1.3; white-space: nowrap }
.md-ecran.md-tout .st-envoye { background: #e8eaed; color: #3c4043 }
.md-ecran.md-tout .st-discussion { background: #ffe5a0; color: #6b4e00 }
.md-ecran.md-tout .st-signe { background: #d4edbc; color: #11734b }
.md-ecran.md-tout .st-perdu { background: #ffcfc9; color: #b10202 }
.md-ecran.md-tout .st-termine { background: #bfe1f6; color: #0a53a8 }
.md-ecran.md-tout .marque { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; padding: 2px calc(8 * var(--u)); border-radius: calc(6 * var(--u)) }
.md-ecran.md-tout .marque.envoi { background: var(--bleu-doux); color: var(--bleu-fonce) }
.md-ecran.md-tout .marque.envoi::before { content: ""; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: md-tourne 0.8s linear infinite }
.md-ecran.md-tout .marque.file { background: #fff1cc; color: #6b4e00 }
.md-ecran.md-tout .marque.ok { background: var(--menthe-doux); color: #0b6b4b }
.md-ecran.md-tout .marque.ko { background: #fdecec; color: var(--rouge) }
.md-ecran.md-tout .marque.avis { background: var(--menthe-doux); color: #0b6b4b }
@keyframes md-tourne { to { transform: rotate(360deg) } }
.md-ecran.md-tout .points { display: inline-flex; gap: calc(3 * var(--u)); vertical-align: -1px; margin-right: calc(4 * var(--u)) }
.md-ecran.md-tout .points i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: 1.5px solid #9aa0a6 }
.md-ecran.md-tout .points i.ok { background: var(--bleu); border-color: var(--bleu) }
.md-ecran.md-tout .liste-vide { padding: calc(26 * var(--u)) calc(12 * var(--u)); text-align: center; color: var(--ardoise); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .plus-devis { display: block; margin: calc(10 * var(--u)) auto calc(6 * var(--u)) }
.md-ecran.md-tout .calendrier { display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)); gap: calc(4 * var(--u)); margin-bottom: calc(14 * var(--u)) }
.md-ecran.md-tout .calendrier .jsem { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--gris); text-align: center; text-transform: uppercase }
.md-ecran.md-tout .calendrier .sem { font-size: calc(11 * var(--u)); color: var(--gris); align-self: center; padding-right: calc(6 * var(--u)); white-space: nowrap }
.md-ecran.md-tout .jour { border: 0; background: var(--nuage); border-radius: calc(10 * var(--u)); min-height: calc(52 * var(--u)); padding: calc(6 * var(--u)) 2px; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); font: 700 calc(14 * var(--u)) var(--texte); color: var(--encre); cursor: pointer }
.md-ecran.md-tout .jour.weekend { background: #f7f8fb; color: var(--gris) }
.md-ecran.md-tout .jour.passe { color: var(--ardoise) }
.md-ecran.md-tout .jour.auj { background: var(--encre); color: #fff }
.md-ecran.md-tout .jour[aria-pressed="true"] { outline: 2px solid var(--bleu); outline-offset: 1px }
.md-ecran.md-tout .jour .pts { display: flex; gap: calc(3 * var(--u)); flex-wrap: wrap; justify-content: center; max-width: calc(34 * var(--u)); min-height: calc(7 * var(--u)) }
.md-ecran.md-tout .jour .pts i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50% }
.md-ecran.md-tout .pt-envoye { background: var(--menthe) }
.md-ecran.md-tout .pt-prevu { background: var(--bleu) }
.md-ecran.md-tout .jour.auj .pt-prevu { background: #8ea2ff }
.md-ecran.md-tout .legende-cal { display: flex; gap: calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--ardoise); margin: -2px 0 calc(10 * var(--u)); flex-wrap: wrap }
.md-ecran.md-tout .legende-cal i { display: inline-block; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; margin-right: calc(6 * var(--u)) }
.md-ecran.md-tout .sous-onglets { display: inline-flex; background: var(--nuage); border-radius: calc(999 * var(--u)); padding: calc(3 * var(--u)); gap: 2px; margin-bottom: calc(10 * var(--u)) }
.md-ecran.md-tout .sous-onglets button { border: 0; background: transparent; font: 700 calc(13.5 * var(--u)) var(--texte); color: var(--ardoise); padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); cursor: pointer }
.md-ecran.md-tout .sous-onglets button[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px calc(3 * var(--u)) rgba(17, 19, 24, .12) }
.md-ecran.md-tout .fil-emails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(420 * var(--u)); overflow: auto }
.md-ecran.md-tout .fil-emails .date-groupe { font-size: calc(12 * var(--u)); font-weight: 700; color: var(--ardoise); text-transform: uppercase; letter-spacing: .04em; padding: calc(10 * var(--u)) 0 calc(4 * var(--u)) }
.md-ecran.md-tout .fil-emails .date-groupe:first-child { padding-top: 0 }
.md-ecran.md-tout .email-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px calc(10 * var(--u)); align-items: center; padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #fafbfd; border: 1px solid var(--bordure) }
.md-ecran.md-tout .email-item strong { font-size: calc(14 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.md-ecran.md-tout .email-item small { grid-column: 2; font-size: calc(12.5 * var(--u)); color: var(--ardoise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.md-ecran.md-tout .email-item.en-pause { opacity: .55 }
.md-ecran.md-tout .badge { display: inline-flex; align-items: center; justify-content: center; min-width: calc(46 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 800; padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; grid-row: span 2 }
.md-ecran.md-tout .b-j3 { background: #e8ecff; color: var(--bleu-fonce) }
.md-ecran.md-tout .b-j7 { background: var(--bleu); color: #fff }
.md-ecran.md-tout .b-j14 { background: var(--encre); color: #fff }
.md-ecran.md-tout .b-avis { background: var(--menthe); color: var(--encre) }
.md-ecran.md-tout .b-rappel { background: var(--menthe-doux); color: #0b6b4a }
.md-ecran.md-tout .auto-ligne { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) 0; border-top: 1px solid var(--bordure); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .auto-ligne:first-of-type { border-top: 0 }
.md-ecran.md-tout .auto-ligne span { color: var(--ardoise) }
.md-ecran.md-tout .auto-ligne b { text-align: right }
.md-ecran.md-tout .auto-actions { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)) }
.md-ecran.md-tout .bouton.attention { background: #fff; color: #7a4100; border: 1px solid #f0c48f }
.md-ecran.md-tout .bouton.attention:hover { background: #fff6ec }
.md-ecran.md-tout .bouton.vert { background: var(--menthe); color: var(--encre) }
.md-ecran.md-tout .bouton.vert:hover { background: #22d398 }
.md-ecran.md-tout .reference { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--nuage); font-size: calc(13 * var(--u)); color: var(--ardoise) }
.md-ecran.md-tout .reference svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none }
.md-ecran.md-tout .feuille { border: 0; padding: 0; width: min(calc(560 * var(--u)), 100%); max-height: min(92vh, calc(900 * var(--u))); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(17, 19, 24, .35); color: var(--encre); background: #fff }
.md-ecran.md-tout .feuille::backdrop { background: rgba(17, 19, 24, .55) }
.md-ecran.md-tout .feuille[open] { animation: md-monte .22s ease }
@keyframes md-monte { from { transform: translateY(calc(16 * var(--u))); opacity: 0 } to { transform: none; opacity: 1 } }
.md-ecran.md-tout .feuille-corps { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)) }
.md-ecran.md-tout .feuille-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(12 * var(--u)) }
.md-ecran.md-tout .feuille-tete h2 { font-size: calc(20 * var(--u)); overflow-wrap: anywhere }
.md-ecran.md-tout .feuille-tete p { margin: calc(3 * var(--u)) 0 0; color: var(--ardoise); font-size: calc(14 * var(--u)); overflow-wrap: anywhere }
.md-ecran.md-tout .feuille-tete .surtitre-fiche { font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu) }
.md-ecran.md-tout .fermer { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; border: 0; background: var(--nuage); font-size: calc(22 * var(--u)); line-height: 1; cursor: pointer; color: var(--encre) }
.md-ecran.md-tout .infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin: 0 }
.md-ecran.md-tout .infos div { background: var(--nuage); border-radius: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); min-width: 0 }
.md-ecran.md-tout .infos dt { font-size: calc(12 * var(--u)); color: var(--ardoise); font-weight: 600 }
.md-ecran.md-tout .infos dd { margin: 2px 0 0; font-weight: 700; font-size: calc(14.5 * var(--u)); overflow-wrap: anywhere }
.md-ecran.md-tout .choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--u)) }
.md-ecran.md-tout .choix .bouton { padding: calc(13 * var(--u)) calc(10 * var(--u)); font-size: calc(14.5 * var(--u)) }
.md-ecran.md-tout .choix .bouton.large { grid-column: 1 / -1 }
.md-ecran.md-tout .choix .bouton.neutre { background: var(--nuage); color: var(--encre) }
.md-ecran.md-tout .choix .bouton.neutre:hover { background: #e4e7ef }
.md-ecran.md-tout .choix .bouton.danger { background: #fff; color: var(--rouge); border: 1px solid #f3c3bd }
.md-ecran.md-tout .choix .bouton.danger:hover { background: #fff6f5 }
.md-ecran.md-tout .sous-titre-fiche { font-size: calc(14 * var(--u)); margin: calc(4 * var(--u)) 0 calc(-4 * var(--u)) }
.md-ecran.md-tout .emails-devis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)) }
.md-ecran.md-tout .emails-devis li { display: flex; gap: calc(10 * var(--u)); align-items: center }
.md-ecran.md-tout .emails-devis .badge { grid-row: auto }
.md-ecran.md-tout .emails-devis .prevu { color: var(--ardoise) }
.md-ecran.md-tout .note-fiche { font-size: calc(12.5 * var(--u)); color: var(--ardoise); margin: 0 }
.md-ecran.md-tout .formulaire-devis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)) }
.md-ecran.md-tout .formulaire-devis .champ.large { grid-column: 1 / -1 }
.md-ecran.md-tout .formulaire-devis .champ small { font-weight: 400; color: var(--ardoise); font-size: calc(12.5 * var(--u)) }
.md-ecran.md-tout .champ textarea { font: 400 calc(15 * var(--u)) var(--texte); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--bordure); border-radius: calc(12 * var(--u)); resize: vertical }
.md-ecran.md-tout .champ select:focus, .md-ecran.md-tout .champ textarea:focus { outline: 2px solid var(--bleu); border-color: transparent }
.md-ecran.md-tout .radios { display: flex; gap: calc(8 * var(--u)) }
.md-ecran.md-tout .radios label { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding: calc(11 * var(--u)); border: 1px solid var(--bordure); border-radius: calc(12 * var(--u)); font-weight: 700; cursor: pointer }
.md-ecran.md-tout .radios label:has(input:checked) { border-color: var(--bleu); background: var(--bleu-doux); color: var(--bleu-fonce) }
.md-ecran.md-tout .erreur-form { grid-column: 1 / -1 }
.md-ecran.md-tout .boutons-fin { display: flex; gap: calc(10 * var(--u)); justify-content: flex-end; grid-column: 1 / -1; flex-wrap: wrap }
.md-ecran.md-tout .bouton-flottant { display: none }
.md-ecran.md-tout .toasts { position: fixed; left: 50%; bottom: calc(22 * var(--u)); transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: calc(8 * var(--u)); width: min(calc(460 * var(--u)), calc(100% - calc(28 * var(--u)))); pointer-events: none }
.md-ecran.md-tout .toast { pointer-events: auto; display: flex; gap: calc(10 * var(--u)); align-items: flex-start; background: var(--encre); color: #fff; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(17, 19, 24, .3); font-size: calc(14 * var(--u)); line-height: 1.45; animation: md-monte .25s ease }
.md-ecran.md-tout .toast i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; flex: none; margin-top: calc(5 * var(--u)); background: var(--menthe) }
.md-ecran.md-tout .toast.file i { background: #ffc46b }
.md-ecran.md-tout .toast.ko i { background: #ff8a7e }
.md-ecran.md-tout .toast.part { opacity: 0; transition: opacity .4s }
.md-ecran.md-min-900 .entete-liste { display: grid; grid-template-columns: minmax(0, 2.2fr) calc(120 * var(--u)) calc(200 * var(--u)) minmax(0, 1.8fr); gap: calc(16 * var(--u)); padding: 0 calc(12 * var(--u)) calc(10 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--ardoise); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--bordure) }
.md-ecran.md-min-900 .entete-liste span:nth-child(2) { text-align: right }
.md-ecran.md-min-900 .devis-ligne { grid-template-columns: minmax(0, 2.2fr) calc(120 * var(--u)) calc(200 * var(--u)) minmax(0, 1.8fr); grid-template-areas: "client montant statut proch"; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(12 * var(--u)) }
.md-ecran.md-min-900 .devis-ligne:first-of-type { border-top: 0 }
.md-ecran.md-max-960 .grille-devis { grid-template-columns: minmax(0, 1fr) }
.md-ecran.md-max-640 .onglets-espace { padding: 0 calc(14 * var(--u)) }
.md-ecran.md-max-640 .entete-titre { padding-top: calc(12 * var(--u)); padding-bottom: calc(26 * var(--u)) }
.md-ecran.md-max-640 .kpis-devis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)) }
.md-ecran.md-max-640 .kpis-devis .kpi { padding: calc(14 * var(--u)) }
.md-ecran.md-max-640 .kpis-devis .kpi.fort { grid-column: 1 / -1 }
.md-ecran.md-max-640 .kpis-plus { margin-top: calc(-4 * var(--u)); gap: calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)) }
.md-ecran.md-max-640 .kpis-devis .kpi-valeur { font-size: calc(22 * var(--u)) }
.md-ecran.md-max-640 .kpis-devis .kpi-icone { width: calc(28 * var(--u)); height: calc(28 * var(--u)) }
.md-ecran.md-max-640 .carte { padding: calc(16 * var(--u)) calc(14 * var(--u)) }
.md-ecran.md-max-640 .titre-ligne #ajouter { display: none }
.md-ecran.md-max-640 .recherche { max-width: none; min-width: 100%; order: -1 }
.md-ecran.md-max-640 .bouton-flottant { display: inline-flex; position: fixed; right: calc(16 * var(--u)); bottom: calc(18 * var(--u)); z-index: 40; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(59, 91, 255, .45); padding: calc(15 * var(--u)) calc(20 * var(--u)); font-size: calc(15.5 * var(--u)) }
.md-ecran.md-max-640 .contenu-devis { padding-bottom: calc(96 * var(--u)) }
.md-ecran.md-max-640 .toasts { bottom: calc(86 * var(--u)) }
.md-ecran.md-max-640 .feuille { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0 }
.md-ecran.md-max-640 .feuille[open] { animation: md-glisse .25s ease }
.md-ecran.md-max-640 .formulaire-devis { grid-template-columns: minmax(0, 1fr) }
.md-ecran.md-max-640 .calendrier .sem { display: none }
.md-ecran.md-max-640 .calendrier { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.md-ecran.md-max-640 .entete-barre .qui .bouton { padding: calc(6 * var(--u)) calc(11 * var(--u)); font-size: calc(13 * var(--u)) }
@keyframes md-glisse { from { transform: translateY(calc(40 * var(--u))) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .md-ecran.md-tout *, .md-ecran.md-tout *::before, .md-ecran.md-tout *::after { animation: none !important; transition: none !important } }