/* ============================================================================
CHARTE ECO ASSISTANCE — feuille de style commune à toutes les applications.
Source : ecoassistance.fr. Poppins, marine #044C84, azur #13AFF0, cyan #12CFE0.
À charger telle quelle dans n'importe quel CRM :
Puis utiliser les classes : .entete .logo .onglets .carte .bande .grille .chiffre .btn(.primaire .oui .non .contour .petit)
.etiq(.vert .rouge .ambre .gris) .msg .alerte .danger .doux .vide, et h1.titre pour les titres de page.
============================================================================ */
/* ---------------------------------------------------------------
Charte ecoassistance.fr : Poppins, marine #044C84, azur #13AFF0, cyan #12CFE0,
titres en capitales grasses, cartes blanches à liseré bleu clair, bande dégradée.
--------------------------------------------------------------- */
:root {
--marine: #044C84;
--plein: #044C84; /* aplat qui porte du texte blanc */
--azur: #13AFF0;
--cyan: #12CFE0;
--accent: var(--marine);
--accent-vif: var(--azur);
--pale: #e6f4fc;
--liseret: #cfe9f6;
--degrade: linear-gradient(100deg, #13AFF0 0%, #0a6fb0 55%, #044C84 100%);
--fond: #f4f6f8;
--surface: #ffffff;
--encre: #1f2a35;
--doux: #64748b;
--trait: #e3e9ef;
--barre: #044C84;
--barre-t: #dbeaf6;
--ombre: 0 2px 12px rgba(4, 76, 132, .07);
--vert: #178a5b; --vert-pale: #e3f5ec;
--rouge: #b3261e; --rouge-pale: #fbe9e7;
--ambre: #9a5b00; --ambre-pale: #fff2dd;
--sans: "Poppins", "Segoe UI", system-ui, sans-serif;
--mono: "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--marine: #cfe3f5; --plein: #1b5f92; --azur: #4fb8ee; --cyan: #3fd0dd;
--accent: #5dbdf5; --pale: #0f2a40; --liseret: #1e3a52;
--degrade: linear-gradient(100deg, #0f6a9e 0%, #0a4f7d 55%, #06324f 100%);
--fond: #0d1720; --surface: #14212d; --encre: #e6eef5; --doux: #93a4b5; --trait: #24354a;
--barre: #032f55; --barre-t: #cfe3f3; --ombre: 0 2px 12px rgba(0,0,0,.35);
--vert: #5fd39c; --vert-pale: #10301f; --rouge: #ff9d94; --rouge-pale: #331a17;
--ambre: #e3aa4a; --ambre-pale: #33240c;
}
}
:root[data-theme="dark"] {
--marine: #cfe3f5; --plein: #1b5f92; --azur: #4fb8ee; --cyan: #3fd0dd;
--accent: #5dbdf5; --pale: #0f2a40; --liseret: #1e3a52;
--degrade: linear-gradient(100deg, #0f6a9e 0%, #0a4f7d 55%, #06324f 100%);
--fond: #0d1720; --surface: #14212d; --encre: #e6eef5; --doux: #93a4b5; --trait: #24354a;
--barre: #032f55; --barre-t: #cfe3f3; --ombre: 0 2px 12px rgba(0,0,0,.35);
--vert: #5fd39c; --vert-pale: #10301f; --rouge: #ff9d94; --rouge-pale: #331a17;
--ambre: #e3aa4a; --ambre-pale: #33240c;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 400 15.5px/1.65 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.maj { text-transform: uppercase; letter-spacing: .06em; }
/* ------------------------------------------------------- en-tête blanc, comme le site */
.entete { background: var(--surface); box-shadow: 0 2px 14px rgba(4,76,132,.08); position: sticky; top: 0; z-index: 10; }
.entete .dedans { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center;
gap: 18px; min-height: 76px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.logo img { height: 42px; width: auto; display: block; }
.logo span { font: 700 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--marine);
border-left: 2px solid var(--liseret); padding-left: 12px; }
.onglets { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.onglets a { color: var(--marine); padding: 9px 10px; border-radius: 6px; font: 600 11.5px/1 var(--sans);
letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.onglets a:hover { background: var(--pale); text-decoration: none; }
.onglets a.actif { background: var(--plein); color: #fff; font-weight: 700; }
.onglets .compte { background: var(--azur); color: #fff; border-radius: 10px; padding: 2px 7px;
margin-left: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.etats { display: flex; align-items: center; gap: 10px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .06em;
text-transform: uppercase; color: var(--marine); background: var(--pale); border-radius: 20px; padding: 8px 12px; }
.pastille i { width: 8px; height: 8px; border-radius: 50%; background: #9fb3c4; }
.pastille.ok i { background: var(--cyan); } .pastille.ko i { background: #ff6b5e; }
.btn.contour { background: transparent; border-color: var(--marine); color: var(--marine); }
/* -------------------------------------------------------------- page */
main { max-width: 1240px; margin: 0 auto; padding: 38px 28px 80px; }
h1.titre { font: 900 34px/1.15 var(--sans); text-transform: uppercase; letter-spacing: .01em;
color: var(--accent); margin: 0 0 22px; text-wrap: balance; }
h1.titre .apres { display: block; font: 400 14px/1.5 var(--sans); text-transform: none; letter-spacing: 0;
color: var(--doux); margin-top: 6px; }
.carte { background: var(--surface); border: 2px solid var(--liseret); border-radius: 12px;
box-shadow: var(--ombre); padding: 26px 28px; margin-bottom: 20px; }
.carte h3 { font: 900 15px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .04em;
color: var(--accent); margin: 0 0 18px; }
.bande { background: var(--degrade); color: #fff; border: 0; padding: 34px 36px; }
.bande h3, .bande .doux, .bande a:not(.btn) { color: #fff; }
.bande .doux { opacity: .85; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.chiffre { background: var(--plein); border-radius: 12px; padding: 22px 22px 20px; text-align: center;
box-shadow: 0 6px 18px rgba(4,76,132,.18); }
.chiffre b { display: block; font: 700 40px/1.1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.chiffre span { display: block; margin-top: 8px; font: 700 11.5px/1.4 var(--sans); text-transform: uppercase;
letter-spacing: .08em; color: #fff; opacity: .9; }
.chiffre.fort { background: var(--degrade); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; padding: 0 10px 9px; color: var(--doux); font: 700 11px/1 var(--sans);
text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--pale); }
td { padding: 14px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.cliquable:hover td { background: var(--pale); }
.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.btn { display: inline-block; border: 2px solid var(--liseret); background: var(--surface); color: var(--accent);
border-radius: 8px; padding: 11px 20px; font: 700 13px/1.3 var(--sans); text-transform: uppercase;
letter-spacing: .05em; cursor: pointer; }
.btn:hover { border-color: var(--azur); text-decoration: none; }
.btn.primaire { background: var(--plein); border-color: var(--plein); color: #fff;
box-shadow: 0 3px 10px rgba(4,76,132,.25); }
.btn.primaire:hover { background: #0a5d9e; border-color: #0a5d9e; }
.btn.oui { background: var(--azur); border-color: var(--azur); color: #fff; }
.btn.oui:hover { background: #0d9ee0; border-color: #0d9ee0; }
.btn.non { background: var(--surface); border-color: var(--rouge-pale); color: var(--rouge); }
.btn.non:hover { border-color: var(--rouge); }
.btn.petit { padding: 7px 13px; font-size: 11.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn kbd { font: 700 10px/1 var(--mono); opacity: .7; margin-left: 7px;
border: 1px solid currentColor; border-radius: 3px; padding: 2px 4px; }
.etiq { display: inline-block; border-radius: 6px; padding: 5px 10px; font: 700 11px/1.3 var(--sans);
text-transform: uppercase; letter-spacing: .05em; background: var(--pale); color: var(--accent); }
.etiq.vert { background: var(--vert-pale); color: var(--vert); }
.etiq.rouge { background: var(--rouge-pale); color: var(--rouge); }
.etiq.orange, .etiq.ambre { background: var(--ambre-pale); color: var(--ambre); }
.etiq.gris { background: var(--fond); color: var(--doux); }
input[type=text], input[type=number], input[type=url], input[type=password], input[type=datetime-local],
input[type=file], textarea, select {
width: 100%; padding: 10px 12px; border: 1.5px solid var(--trait); border-radius: 6px;
background: var(--surface); color: var(--encre); font: 400 14.5px/1.5 var(--sans); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--azur); outline-offset: -1px; border-color: var(--azur); }
textarea { resize: vertical; min-height: 70px; }
label { display: block; font: 700 11px/1 var(--sans); text-transform: uppercase;
letter-spacing: .08em; color: var(--accent); margin: 16px 0 6px; }
.ligne { display: flex; gap: 15px; flex-wrap: wrap; }
.ligne > div { flex: 1; min-width: 190px; }
.case { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.case input { margin-top: 4px; width: auto; }
.case label { margin: 0; text-transform: none; letter-spacing: 0; font: 600 14.5px/1.5 var(--sans); color: var(--encre); }
.case .aide { color: var(--doux); font-weight: 400; font-size: 13.5px; display: block; }
.msg { white-space: pre-wrap; background: var(--fond); border: 1px solid var(--trait);
border-left: 4px solid var(--azur); border-radius: 6px; padding: 14px 16px; font-size: 14.5px; }
.alerte, .danger { border-radius: 6px; padding: 12px 15px; font-size: 14px; margin-bottom: 14px; border-left: 4px solid; }
.alerte { background: var(--ambre-pale); border: 1px solid var(--ambre); border-left-width: 4px; color: var(--ambre); }
.danger { background: var(--rouge-pale); border: 1px solid var(--rouge); border-left-width: 4px; color: var(--rouge); }
.danger a, .alerte a { color: inherit; text-decoration: underline; font-weight: 700; }
.doux { color: var(--doux); font-size: 13.5px; }
.vide { color: var(--doux); text-align: center; padding: 46px 20px; }
form.enligne { display: inline; }
code { font: 500 13px/1.4 var(--mono); background: var(--pale); color: var(--accent); padding: 1px 6px; border-radius: 4px; }
/* ------------------------------------------------ sélecteur d'applications (même interface, plusieurs CRM) */
.applis { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--pale); border-radius: 10px; }
.applis a { color: var(--marine); padding: 7px 13px; border-radius: 7px; font: 700 11.5px/1 var(--sans);
letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.applis a:hover { text-decoration: none; background: rgba(255,255,255,.7); }
.applis a.actif { background: var(--azur); color: #fff; box-shadow: 0 2px 8px rgba(19,175,240,.35); }
.applis a.charte { opacity: .55; font-weight: 600; }