@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('polices/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('polices/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('polices/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('polices/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --encre: #101623;
  --muet: #55606F;
  --ardoise: #617187;
  --royal: #0057FF;
  --royal-fonce: #0043C7;
  --royal-pale: #E7EFFF;
  --givre: #F8F7F4;
  --filet: #E4E1D9;
  --bord: #8A8579;
  --blanc: #FFFFFF;
  --vert: #15803D;
  --vert-pale: #E6F6EC;
  --rouge: #B91C1C;
  --rouge-pale: #FCEBEB;
  --ambre: #A34A06;
  --ambre-pale: #FDF1E1;
  --gris-pale: #EFEDE8;
  --titre: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --texte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ombre-carte: 0 1px 2px rgba(15, 23, 42, .05);
  --ombre-lift: 0 24px 48px -24px rgba(15, 23, 42, .18);
  --ombre-pop: 0 18px 40px -18px rgba(0, 87, 255, .45);
  --rayon: 24px;
  --rayon-champ: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--givre) url('motif.svg') repeat;
  color: var(--encre);
  font: 400 15px/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--encre); }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 18px; line-height: 1.25; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; }
svg { flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 8px; }

.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--encre); color: var(--blanc); padding: 10px 16px; border-radius: 10px;
}
.evitement:focus { top: 12px; }

.muet { color: var(--muet); }
.num { font-variant-numeric: tabular-nums; }
.droite { text-align: right; }
.pile { display: flex; flex-direction: column; gap: 14px; }
.cache { display: none !important; }

.barre {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--filet);
}
.barre-int {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}

.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 18px/1 var(--titre); letter-spacing: -0.02em; color: var(--encre);
  white-space: nowrap;
}
.marque:hover { text-decoration: none; }
.marque em { font-style: normal; color: var(--royal); }
.marque-icone {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--royal); color: var(--blanc); box-shadow: var(--ombre-carte);
}
.marque-grande { font-size: 22px; }
.marque-grande .marque-icone { width: 38px; height: 38px; border-radius: 12px; }

.outils { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.outil {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px;
  border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muet);
}
.outil:hover { background: var(--blanc); color: var(--encre); text-decoration: none; }
.outil[aria-current="page"] { background: var(--royal-pale); color: var(--royal); }
.deconnexion { margin: 0; }
.app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.contenu { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.contenu > .vue { flex: 1 0 auto; width: 100%; padding-bottom: 48px; }
.app .pied-app {
  align-items: center; max-width: none; margin: 0; padding: 16px max(24px, calc((100% - 1240px) / 2 + 24px));
  background: var(--blanc); border-top: 1px solid var(--filet);
}
.barre-mobile { display: none; }
.menu {
  position: sticky; top: 0; z-index: 50; display: flex; flex-direction: column; width: 256px; height: 100vh;
  padding: 18px 14px 14px; background: var(--blanc); border-right: 1px solid var(--filet);
  overflow-x: hidden; overflow-y: auto; transition: width .2s ease;
}
.menu-tete { display: flex; align-items: center; min-height: 40px; padding: 0 8px 12px; }
.menu-replier {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--muet); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.menu-replier:hover { background: var(--givre); color: var(--encre); }
.menu-replier svg { flex-shrink: 0; transition: transform .2s ease; }
.menu-titre { margin: 16px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.menu-liens { display: flex; flex-direction: column; gap: 2px; }
.menu-liens a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--muet); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s;
}
.menu-liens a:hover { background: var(--givre); color: var(--encre); text-decoration: none; }
.menu-liens a[aria-current="page"] { background: var(--royal-pale); color: var(--royal); }
.menu-liens a[aria-current="page"]::before {
  content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--royal);
}
.menu-liens svg { flex-shrink: 0; }
.menu-bas { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 18px; }
.menu-compte { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 6px 2px; border-top: 1px solid var(--filet); }
.menu-avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--filet); background: var(--royal-pale); color: var(--royal); font: 800 14px/1 var(--titre);
}
.menu-avatar img { width: 100%; height: 100%; padding: 3px; object-fit: contain; background: var(--blanc); }
.menu-identite { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.menu-identite strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.menu-etat { font-size: 12.5px; color: var(--muet); white-space: nowrap; cursor: default; }
.menu-etat.essai { color: var(--royal); font-weight: 600; }
.menu-etat.urgent { color: var(--ambre); font-weight: 600; }
.menu-etat .bulle, .bouton-deconnexion::after {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60;
  padding: 8px 12px; border-radius: 10px; background: var(--encre); color: var(--blanc); box-shadow: var(--ombre-lift);
  font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, visibility .15s;
}
.menu-etat .bulle { left: 2px; width: max-content; max-width: 220px; white-space: normal; line-height: 1.4; }
.menu-etat:hover .bulle { opacity: 1; visibility: visible; }
.bouton-deconnexion {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: var(--rouge); cursor: pointer; transition: background-color .2s ease;
}
.bouton-deconnexion svg { transition: transform .2s ease; }
.bouton-deconnexion:hover, .bouton-deconnexion:focus-visible { background: var(--rouge-pale); }
.bouton-deconnexion:hover svg { transform: translateX(2px); }
.bouton-deconnexion::after { content: attr(data-libelle); left: auto; right: 0; }
.bouton-deconnexion:hover::after, .bouton-deconnexion:focus-visible::after { opacity: 1; visibility: visible; }

@media (min-width: 901px) {
  .menu-reduit .menu { width: 82px; overflow: visible; }
  .menu-reduit .menu .marque-mot, .menu-reduit .menu-liens span, .menu-reduit .menu-replier span,
  .menu-reduit .menu-titre, .menu-reduit .menu-identite { display: none; }
  .menu-reduit .menu-tete, .menu-reduit .menu-replier, .menu-reduit .menu-liens a { justify-content: center; }
  .menu-reduit .menu-replier svg { transform: rotate(180deg); }
  .menu-reduit .menu-titre + .menu-liens { margin-top: 14px; }
  .menu-reduit .menu-compte { flex-direction: column; padding-top: 12px; }
  .menu-reduit .menu-liens a::after, .menu-reduit .menu-replier::after {
    content: attr(data-libelle); position: absolute; top: 50%; left: calc(100% + 12px); z-index: 60; transform: translateY(-50%);
    padding: 7px 11px; border-radius: 9px; background: var(--encre); color: var(--blanc); font-size: 13px; font-weight: 600;
    white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility .15s;
  }
  .menu-reduit .menu-replier { position: relative; }
  .menu-reduit .menu-liens a:hover::after, .menu-reduit .menu-replier:hover::after { opacity: 1; visibility: visible; }
  .menu-reduit .bouton-deconnexion::after { top: 50%; bottom: auto; left: calc(100% + 12px); right: auto; transform: translateY(-50%); }
}

@media (max-width: 900px) {
  .app { display: block; }
  .contenu { min-height: calc(100vh - 61px); }
  .barre-mobile {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--filet);
  }
  .ouvrir-menu {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--filet); border-radius: 12px;
    background: var(--blanc); color: var(--encre); cursor: pointer;
  }
  .menu {
    position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: min(290px, 86vw); box-shadow: var(--ombre-lift);
    transform: translateX(-105%); transition: transform .25s ease;
  }
  .menu-ouvert .menu { transform: none; }
  .menu-replier { display: none; }
  .voile-menu { position: fixed; inset: 0; z-index: 45; background: rgba(16, 22, 35, .4); }
}
.voile-menu[hidden] { display: none; }

.bandeau-alerte { background: var(--ambre-pale); border-bottom: 1px solid #F3D9B4; color: #6B3A0A; }
.bandeau-alerte p { max-width: 1240px; margin: 0 auto; padding: 10px 24px; font-size: 14px; }
.bandeau-alerte a { color: #6B3A0A; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.vue { max-width: 1240px; margin: 0 auto; padding: 32px 24px 96px; outline: none; }
.chargement { color: var(--muet); padding: 40px 0; }

.entete-vue {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  margin-bottom: 24px;
}
.titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.titre-ligne .crayon-titre { position: relative; align-self: flex-start; margin: -8px 0 0 -12px; padding: 6px; }
.crayon-titre .libelle-survol {
  position: absolute; left: 100%; top: -1px; bottom: -1px; display: flex; align-items: center;
  max-width: 0; overflow: hidden; border-radius: 0 10px 10px 0;
  background: var(--royal-pale); color: var(--royal-fonce); font-size: 13.5px;
  transition: max-width .35s ease-in-out;
}
.crayon-titre .libelle-survol span { padding: 0 12px 0 2px; }
.crayon-titre:hover, .crayon-titre:focus-visible { border-radius: 10px 0 0 10px; }
.crayon-titre:hover .libelle-survol, .crayon-titre:focus-visible .libelle-survol { max-width: 140px; }
.carte-espacee { margin-bottom: 20px; }
.carte-espacee-haut { margin-top: 20px; }
.fieldset-nu { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-nu > .carte + .carte { margin-top: 20px; }
.entete-vue .sous-titre { margin-top: 6px; color: var(--muet); font-size: 15px; }
.entete-vue .sous-titre + .sous-titre { margin-top: 2px; }
.entete-vue .note-entete { white-space: pre-line; overflow-wrap: anywhere; }
.note-entete strong { font-weight: 600; }
.entete-vue .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.entete-vue .actions select { width: auto; min-width: 104px; }
.creation { display: flex; align-items: center; }
.bouton.bouton-plus { padding: 10px; }
.bouton-plus svg { transition: transform .35s ease-in-out; }
.creation.ouvert .bouton-plus svg { transform: rotate(45deg); }
.bouton.choix-creation {
  max-width: 0; margin-left: 0; padding-left: 0; padding-right: 0; border-width: 0;
  overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-width .35s ease-in-out, margin-left .35s ease-in-out, padding .35s ease-in-out, opacity .2s ease,
    visibility .35s, transform .15s, border-color .15s, color .15s;
}
.creation.ouvert .bouton.choix-creation {
  max-width: 140px; margin-left: 8px; padding-left: 16px; padding-right: 16px; border-width: 1px; opacity: 1; visibility: visible;
  transition: max-width .35s ease-in-out, margin-left .35s ease-in-out, padding .35s ease-in-out, opacity .25s ease .08s,
    visibility 0s, transform .15s, border-color .15s, color .15s;
}
.choix-creation svg { flex: none; color: var(--royal); }
.surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise);
}
.surtitre a { color: var(--ardoise); }

.carte {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 24px; box-shadow: var(--ombre-carte);
}
.carte + .carte { margin-top: 20px; }
.carte-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.carte-titre h2 { font-size: 17px; }
.etiquette {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise);
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  font: 600 14.5px/1.2 var(--texte); cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { text-decoration: none; }
.bouton:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.bouton-principal { background: var(--royal); color: var(--blanc); box-shadow: var(--ombre-carte); }
.bouton-principal:hover { background: var(--royal-fonce); transform: translateY(-1px); box-shadow: var(--ombre-pop); }
.bouton-secondaire { background: var(--blanc); color: var(--encre); border-color: var(--bord); }
.bouton-secondaire:hover { border-color: var(--royal); color: var(--royal); }
.bouton-fantome { background: none; color: var(--muet); }
.bouton-fantome:hover { background: var(--givre); color: var(--encre); }
.bouton-danger { background: var(--blanc); color: var(--rouge); border-color: #E7B4B4; }
.bouton-danger:hover { background: var(--rouge-pale); }
.bouton-succes { background: var(--vert); color: var(--blanc); }
.bouton-succes:hover { background: #116632; transform: translateY(-1px); }
.bouton-petit { padding: 7px 12px; font-size: 13.5px; border-radius: 10px; }
.bouton-large { width: 100%; padding: 13px 18px; font-size: 15.5px; }
.bouton-icone { padding: 8px; border-radius: 10px; }
.bouton-icone.icone-modifier { color: var(--royal); }
.bouton-icone.icone-modifier:hover { background: var(--royal-pale); color: var(--royal-fonce); }
.bouton-icone.icone-supprimer { color: var(--rouge); }
.bouton-icone.icone-supprimer:hover { background: var(--rouge-pale); color: var(--rouge); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.3;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-gris { background: var(--gris-pale); color: var(--muet); }
.badge-bleu { background: var(--royal-pale); color: var(--royal-fonce); }
.badge-vert { background: var(--vert-pale); color: var(--vert); }
.badge-rouge { background: var(--rouge-pale); color: var(--rouge); }
.badge-ambre { background: var(--ambre-pale); color: var(--ambre); }

.grille-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-2 > .carte + .carte, .editeur > .carte + aside .carte { margin-top: 0; }



.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { border-bottom: 1px solid var(--filet); }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 6px; margin: 0 -6px; border-radius: 12px; color: var(--encre);
}
.liste-simple a:hover { background: var(--givre); text-decoration: none; }
.liste-simple .principal { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-simple .secondaire { font-size: 13px; color: var(--muet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-simple .montant { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.vide { text-align: center; padding: 36px 16px; color: var(--muet); }
.vide strong { display: block; color: var(--encre); font: 800 17px/1.3 var(--titre); margin-bottom: 6px; }
.vide .bouton { margin-top: 16px; }
.illustration { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 16px 22px; text-align: center; }
.illustration strong { color: var(--encre); font: 800 16px/1.3 var(--titre); }
.illustration .fond { fill: var(--royal-pale); }
.illustration .dos { fill: color-mix(in srgb, var(--royal-pale) 45%, var(--blanc)); }
.illustration .rabat { fill: var(--blanc); }
.illustration .dos, .illustration .rabat { stroke: var(--ardoise); stroke-width: 2.2; stroke-linejoin: round; }
.illustration .eclat { stroke: var(--royal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.barre-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.filtres {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 14px;
}
.filtres button {
  border: 0; background: none; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muet);
}
.filtres button:hover { color: var(--encre); background: var(--givre); }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.filtres .compte { margin-left: 6px; font-weight: 700; opacity: .7; }
.recherche { position: relative; flex: 0 1 300px; }
.recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ardoise); pointer-events: none; }
.recherche input[type="search"] { padding-left: 38px; }
.barre-filtres-clients { justify-content: flex-start; }
.barre-filtres .a-droite { margin-left: auto; }
.barre-filtres-clients select { width: auto; }
.tableau th .tri {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.tableau th .tri svg { opacity: 0; transition: opacity .15s; }
.tableau th .tri:hover { color: var(--encre); }
.tableau th .tri:hover svg { opacity: .45; }
.tableau th .tri-actif, .tableau th .tri-actif:hover { color: var(--royal); }
.tableau th .tri-actif svg, .tableau th .tri-actif:hover svg { opacity: 1; }

.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tableau th {
  text-align: left; padding: 0 14px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardoise); border-bottom: 1px solid var(--filet); white-space: nowrap;
}
.tableau td { padding: 14px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { cursor: pointer; transition: background-color .12s; }
.tableau tbody tr:hover td { background: var(--givre); }
.tableau .numero { font-weight: 700; white-space: nowrap; }
.tableau .objet { color: var(--muet); font-size: 13px; margin-top: 2px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau .montant { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau th.droite { text-align: right; }
.carte-tableau { padding: 10px 10px 4px; }
.carte-tableau .tableau th { padding-top: 12px; }

.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise);
}
.champ .aide { font-size: 12.5px; color: var(--muet); letter-spacing: 0; text-transform: none; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--filet); border-radius: var(--rayon-champ);
  background: var(--blanc); color: var(--encre); font: 400 15px/1.4 var(--texte);
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23617187' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:hover, select:hover, textarea:hover { border-color: #CFCABE; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(0, 87, 255, .15); }
input:disabled, select:disabled, textarea:disabled { background: var(--givre); color: var(--muet); }
input[type="color"] { width: 52px; height: 42px; padding: 3px; border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc); cursor: pointer; }
.case { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; cursor: pointer; }
.case input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--royal); }
.choix { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix label {
  display: flex; gap: 10px; padding: 14px; border: 1px solid var(--filet); border-radius: 16px; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.choix label:hover { border-color: var(--bord); }
.choix label:has(input:checked) { border-color: var(--royal); background: var(--royal-pale); }
.choix input { margin-top: 3px; accent-color: var(--royal); }
.choix strong { display: block; font-size: 14.5px; }
.choix small { display: block; font-size: 13px; color: var(--muet); margin-top: 2px; }

.rangee { display: grid; gap: 14px; grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr)); }
.rangee-3 { --colonnes: 3; }
.rangee-4 { --colonnes: 4; }
.rangee .large { grid-column: 1 / -1; }
.majuscules { text-transform: uppercase; }

.alerte { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.alerte-erreur { background: var(--rouge-pale); color: var(--rouge); }
.alerte-info { background: var(--royal-pale); color: var(--royal-fonce); }
.alerte-attention { background: var(--ambre-pale); color: var(--ambre); }
.alerte-succes { background: var(--vert-pale); color: var(--vert); }
.alerte a { color: inherit; font-weight: 700; text-decoration: underline; }

.editeur { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.editeur-cote { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 901px) and (max-width: 1336px) {
  .app:not(.menu-reduit) .editeur { grid-template-columns: minmax(0, 1fr); }
  .app:not(.menu-reduit) .editeur-cote { position: static; }
}
.editeur-cote .carte { margin: 0; }
.resume-client {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--givre);
  font-size: 14px; color: var(--muet); line-height: 1.55;
}
.resume-client strong { color: var(--encre); display: block; }
.selection-client { display: flex; gap: 10px; align-items: flex-end; }
.selection-client .champ { flex: 1; }
.selection-titre { display: flex; gap: 10px; align-items: center; }
.selection-titre select { flex: 1; min-width: 0; }
.selection-titre .bouton.bouton-depliant-entete { align-self: stretch; padding-left: 11px; padding-right: 11px; }
.liste-titres { list-style: none; margin: 0; padding: 0; }
.separateur-bloc { border: 0; border-top: 1px solid var(--filet); margin: 16px 0 6px; }
.liste-titres li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--filet); font-size: 14.5px; }
.liste-titres li:first-child { border-top: 0; }
.liste-titres .actions-ligne { display: flex; gap: 2px; flex: none; }
.vide-titres { margin-top: 10px; }

.lignes { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.lignes th {
  text-align: left; padding: 0 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardoise); white-space: nowrap;
}
.lignes th.droite { text-align: right; }
.lignes td { padding: 8px 6px; vertical-align: top; border-top: 1px solid var(--filet); }
.lignes input, .lignes select, .lignes textarea { padding: 9px 8px; font-size: 14.5px; }
.lignes select { padding-right: 26px; background-position: right 8px center; }
.lignes textarea { min-height: 38px; margin-top: 6px; font-size: 13.5px; color: var(--muet); }
.lignes .col-designation { width: auto; }
.lignes .col-qte { width: 66px; }
.lignes .col-unite { width: 90px; }
.lignes .col-pu { width: 96px; }
.lignes .col-tva { width: 84px; }
.lignes .col-total { width: 100px; }
.lignes .col-actions { width: 92px; }
.lignes .bouton-icone { padding: 6px; }
.lignes .total-ligne { padding-top: 18px; padding-right: 14px; text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lignes th.col-total { padding-right: 14px; }
.lignes .actions-ligne { display: flex; gap: 2px; justify-content: flex-end; padding-top: 4px; }
.lignes .ajouter-detail { margin-top: 6px; font-size: 13px; }
.actions-lignes { display: flex; gap: 10px; margin-top: 14px; }

.totaux { display: grid; gap: 10px; font-size: 14.5px; }
.totaux div { display: flex; justify-content: space-between; gap: 12px; }
.totaux span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.totaux .ttc {
  margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--royal); color: var(--blanc);
  font-weight: 700; font-size: 15.5px;
}
.totaux .ttc span:last-child { font: 800 20px/1.1 var(--titre); }
.totaux .acompte { color: var(--muet); font-size: 13.5px; }
.totaux .mention { color: var(--muet); font-size: 13px; justify-content: flex-end; }

.actions-document { display: flex; flex-direction: column; gap: 10px; }
.actions-document .bouton { width: 100%; }
.actions-document .separateur { height: 1px; background: var(--filet); margin: 4px 0; }
.bloc-interrupteur { padding: 4px 0 6px; }
.interrupteur {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--filet); border-radius: 12px; background: var(--givre); cursor: pointer;
  font: 600 14px/1.2 var(--texte); color: var(--muet);
}
.interrupteur:disabled { cursor: not-allowed; opacity: .7; }
.interrupteur-piste { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #CFCABE; transition: background-color .25s ease; }
.interrupteur-curseur { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgba(15, 23, 42, .25); transition: transform .25s ease; }
.interrupteur[aria-checked="true"] .interrupteur-piste { background: var(--royal); }
.interrupteur[aria-checked="true"] .interrupteur-curseur { transform: translateX(20px); }
.interrupteur[aria-checked="false"] .interrupteur-libelle:first-child, .interrupteur[aria-checked="true"] .interrupteur-libelle:last-child { color: var(--encre); }
.bouton-depliant.a-valider .libelle-depliant { max-width: 220px; }
.bouton-depliant.en-cours { position: relative; pointer-events: none; }
.bouton-depliant.en-cours > svg { opacity: 0; }
.bouton-depliant.en-cours::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--blanc); border-radius: 50%; animation: tourner .7s linear infinite;
}
.bouton-depliant.enregistre { background: var(--vert); border-color: var(--vert); pointer-events: none; }
.bouton-depliant.enregistre .libelle-depliant { max-width: 220px; }
.bouton-depliant.enregistre > svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: tracer .45s ease-out forwards; }
@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.zone-suggestions { position: relative; }
.suggestions {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 100%; width: max-content; max-width: min(460px, 90vw);
  max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-lift);
}
.suggestions li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--encre); }
.suggestions li small { color: var(--muet); font-size: 13px; white-space: nowrap; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--givre); }
.liens-document { display: grid; gap: 8px; font-size: 14px; }
.liens-document a { font-weight: 600; }

.verrou { display: flex; gap: 12px; align-items: flex-start; }

.section-parametres .intro { margin: -8px 0 18px; color: var(--muet); font-size: 14px; }
.logo-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.logo-apercu {
  display: grid; place-items: center; width: 220px; height: 96px; border-radius: 16px;
  border: 1px dashed var(--bord); background: var(--givre); overflow: hidden; color: var(--ardoise); font-size: 13px;
}
.logo-apercu img { max-width: 92%; max-height: 80px; object-fit: contain; }
.barre-parametres { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-bottom: 22px; }
.barre-parametres > .bouton { flex: none; margin-left: auto; }
.onglets-parametres { flex: 1 1 560px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.onglets-parametres ol { display: flex; margin: 0; padding: 4px; list-style: none; }
.onglet-parametre { position: relative; flex: 1 1 0; min-width: max-content; padding-right: 12px; }
.onglet-parametre:last-child { flex: none; padding-right: 0; }
.onglet-parametre:not(:last-child)::after {
  content: ''; position: absolute; left: 38px; right: 10px; top: 13px; border-top: 2px dashed var(--bord); opacity: .55;
}
.onglet-parametre.relie::after { border-top-style: solid; border-color: var(--royal); opacity: 1; }
.onglet-parametre button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: 100%; min-width: 92px; padding: 0;
  border: 0; background: none; color: var(--muet); font: inherit; text-align: left; cursor: pointer;
}
.onglet-pastille {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px dashed var(--bord);
  background: var(--blanc); color: var(--muet); font: 800 13px/1 var(--titre);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.onglet-parametre.atteint .onglet-pastille { border-style: solid; border-color: var(--royal); color: var(--royal); }
.onglet-parametre.active .onglet-pastille { background: var(--royal); color: var(--blanc); box-shadow: 0 0 0 4px var(--royal-pale); }
.onglet-parametre strong { font: 700 14px/1.25 var(--titre); color: var(--muet); white-space: nowrap; transition: color .15s; }
.onglet-parametre button:hover strong, .onglet-parametre.active strong { color: var(--encre); }
.onglet-parametre.active strong { font-weight: 800; }
.onglet-parametre button:hover .onglet-pastille { border-color: var(--royal); }
.onglet-parametre button:focus-visible { outline: none; }
.onglet-parametre button:focus-visible .onglet-pastille { box-shadow: 0 0 0 4px rgba(0, 87, 255, .3); }
.onglet-parametre.bloque { opacity: .45; }
.onglet-parametre.bloque button { cursor: not-allowed; }
.accueil { max-width: 720px; margin: 12px auto 0; padding: 44px 40px; text-align: center; }
.accueil-icone {
  display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 18px;
  background: var(--royal); color: var(--blanc); box-shadow: var(--ombre-pop);
}
.accueil h1 { font-size: 30px; line-height: 1.2; text-wrap: balance; }
.accueil h1 .texte-royal { font-weight: inherit; }
.accueil-texte { max-width: 520px; margin: 14px auto 26px; color: var(--muet); font-size: 16px; line-height: 1.6; }
.accueil .bouton-large { max-width: 380px; }
.accueil-note { margin-top: 12px; font-size: 13.5px; color: var(--muet); }
.accueil-fin { max-width: 520px; margin: 24px auto; padding: 18px 20px; border-radius: 16px; text-align: left; background: var(--ambre-pale); color: var(--ambre); }
.accueil-fin strong { display: block; margin-bottom: 4px; font: 800 16px/1.3 var(--titre); }
.accueil-fin p { font-size: 14.5px; line-height: 1.55; color: #6B3A0A; }
.accueil .actions-lignes { justify-content: center; }

.tableau-factures td, .tableau-factures th { padding-left: 8px; padding-right: 8px; }
.carte-factures { display: flex; flex-direction: column; }
.zone-factures { display: flex; flex: 1; flex-direction: column; }
.zone-factures > .illustration { margin: auto 0; }
.consigne-offres { margin-top: 4px; font-size: 14.5px; font-weight: 600; }
.offres { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offre {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px;
  border: 1px solid var(--filet); border-radius: 18px; cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.offre:hover { border-color: var(--bord); }
.offre:has(input:checked) { border-color: var(--royal); background: var(--royal-pale); box-shadow: inset 0 0 0 1px var(--royal); }
.offre:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--royal), 0 0 0 4px rgba(0, 87, 255, .2); }
.offre input { position: absolute; top: 17px; right: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--royal); }
.offre-tete { padding-right: 26px; font: 800 15px/1.3 var(--titre); }
.offre-prix { margin-top: 8px; color: var(--encre); font: 800 26px/1.1 var(--titre); }
.offre small { color: var(--muet); font-size: 13px; }
.actions-centrees { justify-content: center; }
.mention-stripe { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: -4px; color: var(--ardoise); font-size: 12px; opacity: .8; }
.mention-stripe svg { flex: none; margin-top: -1px; }
.lien-pdf { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; }

.section-parametres { transition: border-color .2s, box-shadow .2s; }
.section-parametres.modifiee { border-color: #F3D9B4; box-shadow: 0 0 0 3px var(--ambre-pale); }
.enregistrer-section {
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .2s, border-color .2s;
}
.section-parametres.modifiee .enregistrer-section, .enregistrer-section.en-cours, .enregistrer-section.enregistre {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .2s, border-color .2s;
}
.enregistrer-section.secoue { animation: secouer .45s ease; }
@keyframes secouer { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
  border-radius: var(--rayon); background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-lift);
}
dialog::backdrop { background: rgba(16, 22, 35, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogue { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dialogue-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.dialogue-corps { padding: 18px 24px; overflow: auto; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--filet); }
.dialogue-pied .a-gauche { margin-right: auto; }
.dialogue-court { width: min(460px, calc(100vw - 32px)); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--encre); color: var(--blanc);
  font-size: 14.5px; font-weight: 600; box-shadow: var(--ombre-lift); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.erreur { background: var(--rouge); }

.ecran-partage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.panneau-marque {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 56px 40px 150px; color: var(--blanc);
  background: radial-gradient(120% 80% at 15% 10%, rgba(255, 255, 255, .14), transparent 55%), linear-gradient(160deg, #2370FF 0%, #0057FF 48%, #0041C2 100%);
}
.panneau-marque::before {
  content: ''; position: absolute; top: 32px; left: 32px; width: 126px; height: 72px;
  background-image: radial-gradient(rgba(255, 255, 255, .4) 1.6px, transparent 1.8px); background-size: 18px 18px;
}
.panneau-contenu { position: relative; z-index: 1; max-width: 440px; text-align: center; }
.panneau-logo {
  display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 28px;
  background: var(--blanc); color: var(--royal); box-shadow: 0 28px 56px -24px rgba(0, 18, 80, .7);
}
.panneau-logo svg { width: 50px; height: 50px; }
.panneau-nom { margin-top: 22px; font: 800 46px/1 var(--titre); letter-spacing: .03em; }
.panneau-accroche { margin-top: 12px; font: 600 17px/1.5 var(--titre); color: rgba(255, 255, 255, .86); }
.panneau-signature { margin-top: 4px; font: italic 500 15px/1.4 var(--titre); color: rgba(255, 255, 255, .72); }
.panneau-signature a { color: inherit; }
.panneau-atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 46px 0 0; padding: 0; list-style: none; }
.panneau-atouts li { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.panneau-icone {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
}
.panneau-vagues { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 170px; }
.zone-formulaire { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.connexion { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.connexion-carte.carte-acces > h1 { margin: 0 0 22px; }
.connexion-carte.carte-acces > h1 + .connexion-sous-titre { margin-top: -14px; }
.champ-icone { position: relative; display: block; }
.champ-icone > svg { position: absolute; top: 50%; left: 13px; z-index: 1; transform: translateY(-50%); color: var(--ardoise); pointer-events: none; }
.champ-icone input { padding-left: 40px; }
.bouton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px;
  border: 1px solid var(--bord); border-radius: 12px; background: var(--blanc); color: var(--encre);
  font: 600 15px/1.2 var(--texte); transition: border-color .15s, box-shadow .15s;
}
.bouton-google:hover { border-color: var(--encre); box-shadow: var(--ombre-carte); text-decoration: none; }
.bouton-google.verrouille { opacity: .5; cursor: not-allowed; }
.bouton-google.verrouille:hover { border-color: var(--bord); box-shadow: none; }
.icone-verrou { flex: none; }
.bandeau-maintenance {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px 18px;
  border: 1px solid #F3C58C; border-radius: 18px; background: #FFF1DE; color: #8A3D00; box-shadow: var(--ombre-carte);
}
.bandeau-maintenance svg { flex: none; margin-top: 1px; color: #E8740C; }
.bandeau-maintenance p { font-size: 14px; line-height: 1.5; }
.bandeau-maintenance strong { display: block; color: #6B3000; font: 800 15px/1.3 var(--titre); }
.bandeau-maj { display: block; margin-top: 6px; font-size: 12.5px; opacity: .8; }

@media (max-width: 960px) {
  .ecran-partage { grid-template-columns: minmax(0, 1fr); }
  .panneau-marque { padding: 30px 20px 64px; }
  .panneau-marque::before { top: 16px; left: 16px; width: 72px; height: 36px; }
  .panneau-logo { width: 60px; height: 60px; border-radius: 18px; }
  .panneau-logo svg { width: 32px; height: 32px; }
  .panneau-nom { margin-top: 12px; font-size: 32px; }
  .panneau-accroche { margin-top: 8px; font-size: 15px; }
  .panneau-signature { margin-top: 2px; font-size: 13.5px; }
  .panneau-atouts { display: none; }
  .panneau-vagues { height: 60px; }
  .zone-formulaire { align-items: flex-start; padding: 0 16px 32px; margin-top: -28px; }
}
.connexion-carte {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 28px; padding: 36px 32px 28px;
  box-shadow: var(--ombre-lift);
}
.connexion-carte h1 { margin-top: 28px; font-size: 26px; }
.connexion-sous-titre { margin: 8px 0 24px; color: var(--muet); }
.connexion-carte .alerte { margin-bottom: 18px; }
.connexion-carte .bouton { margin-top: 6px; }
.connexion-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; color: var(--muet); }


.lien-marque { display: inline-flex; color: var(--encre); }
.lien-marque:hover { text-decoration: none; }
.marque-icone svg { width: 17px; height: 17px; }
.marque-grande .marque-icone svg { width: 20px; height: 20px; }
.marque-mot { font: 800 20px/1 var(--titre); letter-spacing: 0.02em; }
.marque-grande .marque-mot { font-size: 24px; }

.connexion-carte-large { max-width: 520px; }
.connexion { max-width: 520px; }
.connexion-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 20px; font-size: 14px; color: var(--muet); }
.liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 22px; font-size: 12.5px; }
.liens-legaux a { color: var(--muet); }
.centre { text-align: center; }
.choix-formule { border: 0; margin: 0; padding: 0; min-width: 0; }
.choix-formule legend { padding: 0; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
.case a { font-weight: 600; }

.pied-app { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 13px; color: var(--ardoise); }
.pied-app nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pied-app a { color: var(--muet); }

.ligne-info { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--filet); font-size: 14.5px; }
.aligne-bas { display: flex; align-items: flex-end; }

@media (max-width: 1080px) {
  .editeur { grid-template-columns: minmax(0, 1fr); }
  .editeur-cote { position: static; }
  }

@media (max-width: 860px) {
  .barre-int { flex-wrap: wrap; padding: 10px 16px; gap: 10px 12px; }
  .outil span { display: none; }
  .vue { padding: 22px 16px 88px; }
  .grille-2 { grid-template-columns: minmax(0, 1fr); }
  .rangee, .rangee-3, .rangee-4 { --colonnes: 1; }
  .choix { grid-template-columns: minmax(0, 1fr); }
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: 12px 8px; border-bottom: 1px solid var(--filet); }
  .tableau tr:last-child { border-bottom: 0; }
  .tableau td { padding: 3px 6px; border: 0; }
  .tableau td.montant { text-align: left; }
  .tableau td[data-libelle]::before { content: attr(data-libelle) ' : '; color: var(--ardoise); font-size: 12.5px; font-weight: 600; }
  .lignes thead { display: none; }
  .lignes, .lignes tbody, .lignes tr, .lignes td { display: block; width: 100% !important; }
  .lignes tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-top: 1px solid var(--filet); }
  .lignes td { border: 0; padding: 0; }
  .lignes td.col-designation { grid-column: 1 / -1; }
  .lignes td[data-libelle]::before { content: attr(data-libelle); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
  .lignes .total-ligne { padding-top: 0; text-align: left; }
  .lignes .actions-ligne { justify-content: flex-start; }
}

@media (max-width: 560px) {
  h1 { font-size: 24px; }
  .offres { grid-template-columns: minmax(0, 1fr); }
  .pagination-texte { display: none; }
  .carte { padding: 18px; border-radius: 20px; }
      .connexion-carte { padding: 28px 22px 22px; }
  .accueil { padding: 30px 20px; }
  .accueil h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bouton-depliant.enregistre > svg path { stroke-dashoffset: 0; }
}

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.espace-haut { margin-top: 14px; }
.lien-discret { font-size: 13.5px; font-weight: 600; }

.titre-section { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.compte-titre { color: var(--muet); font-weight: 600; }
.titre-section select { width: auto; min-width: 170px; }
.outils-prestations { display: flex; align-items: center; gap: 8px; align-self: center; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; }
.pagination:empty { display: none; }
.pagination-ellipse { align-self: center; padding: 0 4px; color: var(--muet); }
.zone-liste { scroll-margin-top: 84px; }
.etape-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etape-titre-ligne .badge { padding: 2px 8px; font-size: 11px; }
.pile-affaires { display: flex; flex-direction: column; gap: 16px; }
.pile-affaires > .carte + .carte { margin-top: 0; }
.affaire { padding: 22px 24px; }
.affaire-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.affaire-titre { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.affaire-etat { display: flex; align-items: center; gap: 4px; flex: none; margin: -5px -8px 0 0; }
.affaire-etat .badge { margin-right: 2px; }
.bouton.bouton-depliant { gap: 0; }
.bouton-depliant .libelle-depliant { display: block; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease-in-out; }
.bouton-depliant .libelle-depliant span { display: block; padding: 0 4px 0 6px; font-size: 13.5px; }
.bouton-depliant:hover .libelle-depliant, .bouton-depliant:focus-visible .libelle-depliant { max-width: 220px; }
.depliant-rouge { color: var(--rouge); }
.depliant-rouge:hover, .depliant-rouge:focus-visible { background: var(--rouge-pale); color: var(--rouge); }
.depliant-gris { color: var(--ardoise); }
.depliant-gris:hover, .depliant-gris:focus-visible { background: var(--givre); color: var(--encre); }
.bouton.bouton-depliant-entete { padding: 10px; }
.bouton-depliant-entete .libelle-depliant span { padding: 0 4px 0 8px; font-size: 14.5px; }
@media (hover: none) {
  .bouton-depliant .libelle-depliant { display: none; }
  .bouton-depliant-entete .libelle-depliant { display: block; max-width: none; }
}
.bascule-affaire {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -2px 0 0 -8px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ardoise); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.bascule-affaire:hover { background: var(--givre); color: var(--encre); }
.bascule-affaire::before {
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.affaire.reduite .bascule-affaire::before { transform: translateX(-2px) rotate(-45deg); }
.affaire-corps { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease, visibility .3s; }
.affaire.reduite .affaire-corps { grid-template-rows: 0fr; visibility: hidden; }
.affaire-corps-interne { min-height: 0; overflow: hidden; padding: 0 6px 24px; margin: 0 -6px -24px; }
.affaire-corps-interne > .frise { margin-top: 20px; }
.affaire-tete h3 { font-size: 17px; line-height: 1.3; }
.affaire-tete p { margin-top: 3px; font-size: 13.5px; }
.carte-frise .carte-titre { margin-bottom: 16px; }

.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.frise-une { grid-template-columns: minmax(0, 1fr); }
.etape { position: relative; min-width: 0; padding-right: 16px; }
.etape:last-child { padding-right: 0; }
.etape-rail { position: relative; height: 28px; margin-bottom: 10px; }
.etape:not(:last-child) .etape-rail::after {
  content: ''; position: absolute; left: 38px; right: 6px; top: 13px; height: 2px; border-radius: 2px; background: var(--filet);
}
.etape-fait:not(:last-child) .etape-rail::after { background: var(--royal); }
.etape-pastille {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--filet); background: var(--blanc); color: var(--muet); font: 800 13px/1 var(--titre);
}
.etape-fait .etape-pastille { background: var(--royal); border-color: var(--royal); color: var(--blanc); }
.etape-encours .etape-pastille { background: var(--royal-pale); border-color: var(--royal); color: var(--royal); }
.etape-facultatif .etape-pastille, .etape-saute .etape-pastille { border-style: dashed; border-color: var(--bord); }
.etape-bloque .etape-pastille { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge); }
.etape-titre { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.etape-numero { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
.etape-titre strong { font: 800 15px/1.25 var(--titre); }
.etape-saute .etape-titre strong { color: var(--muet); }
.etape-docs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.etape-note { font-size: 13px; color: var(--muet); }
.etape-action { margin-top: 12px; }
.puce-doc {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%;
  padding: 7px 10px; border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc);
  color: var(--encre); font-size: 13px; line-height: 1.3;
}
.puce-doc:hover { border-color: var(--royal); text-decoration: none; }
.puce-numero { font-weight: 700; }
.puce-montant { color: var(--muet); font-variant-numeric: tabular-nums; }
.puce-doc .badge { padding: 2px 8px; font-size: 11px; }
.puce-ligne { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.bouton.telecharger-puce { padding: 6px; color: var(--ardoise); }
.bouton.telecharger-puce:hover { background: var(--givre); color: var(--royal); }
.bouton-depliant:disabled .libelle-depliant { max-width: 0; }
.puce-courante { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(0, 87, 255, .12); }

.detail-affaire { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--filet); }
.detail-affaire summary {
  display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--encre);
}
.detail-affaire summary::-webkit-details-marker { display: none; }
.detail-affaire summary::before {
  content: ''; width: 7px; height: 7px; margin: 0 8px 0 2px; border-right: 2px solid var(--ardoise); border-bottom: 2px solid var(--ardoise);
  transform: rotate(-45deg); transition: transform .15s;
}
.detail-affaire[open] summary::before { transform: rotate(45deg); }
.detail-affaire summary .muet { font-weight: 400; }
.detail-affaire ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.detail-affaire li { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; gap: 14px; align-items: baseline; font-size: 14px; }
.detail-affaire .designation { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-affaire .quantite { color: var(--muet); font-size: 13px; white-space: nowrap; }
.detail-affaire .montant { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.carte-formulaire { max-width: 760px; }

.saisie-unite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(76px, auto); gap: 8px; }
.saisie-unite.saisie-compacte { max-width: 200px; }
.dialogue-pied { flex-wrap: wrap; }

.actions-lignes { flex-wrap: wrap; align-items: center; }
.actions-lignes select { width: auto; flex: 0 1 340px; max-width: 100%; }
.tableau-catalogue .col-boutons { width: 96px; }
.tableau-catalogue .actions-ligne { display: flex; gap: 2px; justify-content: flex-end; }

@media (max-width: 860px) {
  .tableau-catalogue .col-boutons { width: auto; }
  .tableau-catalogue .actions-ligne { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .frise { grid-template-columns: minmax(0, 1fr); }
  .etape { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 0 0 18px; }
  .etape:last-child { padding-bottom: 0; }
  .etape-rail { grid-row: 1 / span 3; height: auto; margin: 0; }
  .etape:not(:last-child) .etape-rail::after { left: 13px; right: auto; top: 34px; bottom: -14px; width: 2px; height: auto; }
  .etape-titre, .etape-docs, .etape-action { grid-column: 2; }
  .etape-action { margin-top: 10px; }
  .detail-affaire li { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-affaire .quantite { display: none; }
  .affaire { padding: 18px; }
  .dialogue-pied .bouton { flex: 1 1 auto; }
}

.slogan-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.slogan { font: 700 14px/1.35 var(--titre); color: var(--royal); letter-spacing: -0.005em; }
.appel-inscription {
  margin-top: 22px; padding: 18px; border-radius: 18px; background: var(--royal-pale);
  display: grid; gap: 12px; font-size: 14.5px; color: var(--encre);
}
.appel-inscription .bouton { margin-top: 0; border-color: var(--royal); color: var(--royal); }
.appel-inscription .bouton:hover { background: var(--royal); color: var(--blanc); }

.texte-royal { color: var(--royal); font-weight: 600; }

.page-legale {
  max-width: 820px; margin: 32px auto 40px; padding: 44px 52px 56px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.page-legale h1 { font-size: 34px; }
.page-legale .legale-date { margin-top: 8px; font-size: 14px; color: var(--muet); }
.page-legale .legale-chapo { margin: 22px 0 8px; font-size: 17px; line-height: 1.6; color: var(--encre); }
.page-legale h2 { margin: 34px 0 12px; font-size: 19px; }
.page-legale p, .page-legale li { font-size: 15.5px; line-height: 1.7; color: #2B3443; }
.page-legale p + p, .page-legale ul + p { margin-top: 10px; }
.page-legale ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.page-legale strong { color: var(--encre); }
.barre .outils .bouton { margin-left: 6px; }
.pied-app nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }

@media (max-width: 560px) {
  .page-legale { margin: 16px 12px 28px; padding: 26px 18px 40px; border-radius: 20px; }
  .page-legale h1 { font-size: 27px; }
  .barre .outils .outil { display: none; }
}

.saisie-code { font: 800 26px/1.2 var(--titre) !important; letter-spacing: .4em; text-align: center; }
.actions-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.actions-code form { margin: 0; }
.actions-code .bouton { width: 100%; padding: 12px 16px; border-color: var(--royal); color: var(--royal); }
.actions-code .bouton:hover { background: var(--royal-pale); border-color: var(--royal); color: var(--royal-fonce); }
.actions-code + .aide { margin-top: 16px; font-size: 13.5px; color: var(--muet); }
.connexion-carte-centree { text-align: center; }
.connexion-carte-centree .champ, .connexion-carte-centree .alerte { text-align: left; }
.entete-blast { margin: 0 0 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: inherit; }
.marque-geante { gap: 14px; }
.marque-geante .marque-icone { width: 60px; height: 60px; border-radius: 18px; box-shadow: var(--ombre-pop); }
.marque-geante .marque-icone svg { width: 32px; height: 32px; }
.marque-geante .marque-mot { font-size: 46px; letter-spacing: .03em; }
.slogan-grand { font: 700 16px/1.4 var(--titre); color: var(--royal); }
.separateur-ou {
  display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; font-weight: 600; color: var(--muet);
}
.separateur-ou::before, .separateur-ou::after { content: ''; flex: 1; height: 1px; background: var(--filet); }
.bouton-creer { border-color: var(--royal); color: var(--royal); }
.bouton-creer:hover { background: var(--royal); color: var(--blanc); }
.connexion-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 22px; font-size: 14px; color: var(--muet); text-align: center; }
.connexion-pied a { color: var(--royal); font-weight: 700; }
.connexion-pied .texte-royal { flex-basis: 100%; margin-top: 4px; font-size: 13px; font-weight: 600; }

@media (max-width: 560px) {
  .marque-geante .marque-icone { width: 50px; height: 50px; border-radius: 15px; }
  .marque-geante .marque-icone svg { width: 27px; height: 27px; }
  .marque-geante .marque-mot { font-size: 38px; }
}

.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 48px; }
.oeil-mdp {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--ardoise); cursor: pointer;
}
.oeil-mdp:hover { color: var(--royal); background: var(--givre); }
.oeil-mdp[aria-pressed="true"] { color: var(--royal); }
.ligne-titre { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ligne-titre h1 { margin: 0; }
.ligne-titre + .connexion-sous-titre { margin-top: -12px; }

.champ > .regles-mdp, .regles-mdp {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin-top: 9px;
  font: 500 12.5px/1.4 var(--texte); letter-spacing: 0; text-transform: none; color: #9AA3AF;
}
.regle { display: flex; align-items: center; gap: 6px; color: #9AA3AF; transition: color .15s; }
.regle svg { flex-shrink: 0; opacity: .6; }
.regle.respectee { color: var(--vert); }
.regle.respectee svg { opacity: 1; }

.ligne-marque { display: flex; align-items: center; gap: 12px; }
.retour-connexion {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--filet); background: var(--blanc); color: var(--muet);
  transition: color .15s, border-color .15s;
}
.retour-connexion:hover { color: var(--royal); border-color: var(--royal); text-decoration: none; }

@media (max-width: 560px) {
  .champ > .regles-mdp, .regles-mdp { grid-template-columns: minmax(0, 1fr); }
}

.lien-oubli { margin: -6px 0 -2px; text-align: right; font-size: 13.5px; }
.lien-oubli a { font-weight: 600; }