/* ==========================================================================
   SiriusLogic Studio — feuille de style de l'application
   Palette de siriuslogic.fr : sarcelle profond et or. Syne, IBM Plex Sans, IBM Plex Mono.
   Thème sombre par défaut, thème clair au choix (bouton en bas de la barre latérale).
   ========================================================================== */

:root{
  --fond:        #00161A;
  --fond-2:      #031F24;
  --fond-3:      #072A2F;
  --fond-4:      #0B3439;
  --surface:     #03212A;
  --surface-2:   #062B32;
  --surface-3:   #0A353C;
  --survol:      rgba(143, 211, 198, .07);
  --survol-fort: rgba(143, 211, 198, .12);
  --champ:       #021A1F;

  --trait:       rgba(143, 211, 198, .11);
  --trait-fort:  rgba(143, 211, 198, .2);
  --trait-or:    rgba(216, 174, 85, .34);

  --creme:       #F2ECDF;
  --texte:       #C9D5D1;
  --texte-2:     #A9BCB8;
  --gris:        #86A3A0;
  --sur-or:      #1B1304;

  --or:          #D8AE55;
  --or-clair:    #F0D08A;
  --or-profond:  #B8862F;
  --or-voile:    rgba(216, 174, 85, .12);
  --eau:         #8FD3C6;
  --eau-voile:   rgba(143, 211, 198, .1);
  --corail:      #F0A08E;
  --vert:        #8FD9AE;
  --rouge:       #EE7F70;
  --bleu:        #93BDEB;
  --violet:      #C4A8EC;
  --rose:        #EBA8CB;
  --orange:      #EDB47C;
  --brun:        #C9A27E;

  --degrade-or:  linear-gradient(135deg, #F7E2A6 0%, #E2BC67 38%, #C89840 72%, #A87526 100%);
  --degrade-texte: linear-gradient(100deg, #F7E2A6 0%, #E2BC67 45%, #C89840 100%);
  --ombre:       0 18px 50px -18px rgba(0, 0, 0, .65);
  --ombre-douce: 0 6px 24px -10px rgba(0, 0, 0, .55);

  --display: "Syne", system-ui, sans-serif;
  --corps:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --rayon: 16px;
  --rayon-moyen: 12px;
  --rayon-petit: 8px;
  --barre: 252px;
  --haut: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

:root[data-theme="clair"]{
  --fond:        #F3EFE6;
  --fond-2:      #ECE6DA;
  --fond-3:      #E3DCCD;
  --fond-4:      #D8CFBE;
  --surface:     #FFFDF8;
  --surface-2:   #F8F4EC;
  --surface-3:   #EFE9DD;
  --survol:      rgba(0, 54, 60, .05);
  --survol-fort: rgba(0, 54, 60, .09);
  --champ:       #FFFFFF;
  --trait:       rgba(0, 40, 46, .12);
  --trait-fort:  rgba(0, 40, 46, .22);
  --trait-or:    rgba(168, 117, 38, .45);
  --creme:       #0E2A2E;
  --texte:       #20393C;
  --texte-2:     #3C5659;
  --gris:        #5E7477;
  --or:          #A6731F;
  --or-clair:    #8A5C12;
  --or-profond:  #7A520F;
  --or-voile:    rgba(168, 117, 38, .1);
  --eau:         #0E6F68;
  --eau-voile:   rgba(14, 111, 104, .08);
  --corail:      #B4533F;
  --vert:        #1F7A4D;
  --rouge:       #B83A2C;
  --bleu:        #2D62A3;
  --violet:      #6D46AE;
  --rose:        #A83B78;
  --orange:      #A65B12;
  --brun:        #7D5A38;
  --sur-or:      #FFFDF8;
  --degrade-or:  linear-gradient(135deg, #C08A2E 0%, #A6731F 60%, #8A5C12 100%);
  --degrade-texte: linear-gradient(100deg, #B07B26 0%, #8A5C12 100%);
  --ombre:       0 18px 50px -20px rgba(30, 40, 30, .35);
  --ombre-douce: 0 6px 22px -12px rgba(30, 40, 30, .3);
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ -webkit-text-size-adjust: 100%; background: var(--fond); }
body{
  margin: 0; min-height: 100vh;
  color: var(--texte); background: var(--fond);
  font-family: var(--corps); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
:root:not([data-theme="clair"]) body{
  background:
    radial-gradient(1100px 700px at 100% -10%, rgba(14, 74, 76, .35), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(8, 52, 56, .3), transparent 60%),
    var(--fond);
  background-attachment: fixed;
}
img, svg{ display: block; max-width: 100%; }
a{ color: var(--or-clair); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--or); }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; }
::selection{ background: var(--or); color: var(--sur-or); }
:focus-visible{ outline: 2px solid var(--or-clair); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4{ color: var(--creme); margin: 0; line-height: 1.2; }
h1{ font-family: var(--display); font-weight: 700; font-size: 1.65rem; letter-spacing: -.02em; }
h2{ font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
h3{ font-family: var(--corps); font-weight: 600; font-size: .98rem; }
p{ margin: 0 0 .7em; }
code, kbd, .mono{ font-family: var(--data); font-size: .88em; }
kbd{ padding: .05rem .35rem; border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: 5px; color: var(--texte-2); background: var(--surface-2); }
hr{ border: 0; border-top: 1px solid var(--trait); margin: 1.2rem 0; }
.ic{ display: inline-block; vertical-align: -.22em; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic--petit{ width: 15px; height: 15px; }
.ic--grand{ width: 24px; height: 24px; }
.ic--plein{ fill: currentColor; stroke: none; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--trait-fort); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track{ background: transparent; }

.etiquette{
  font-family: var(--data); font-size: .66rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); margin: 0;
}
.etiquette--or{ color: var(--or); }
.or-texte{ background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.attenue{ color: var(--gris); }
.petit{ font-size: .84rem; }
.tres-petit{ font-size: .76rem; }
.nowrap{ white-space: nowrap; }
.droite{ text-align: right; }
.flex{ display: flex; align-items: center; gap: .6rem; }
.flex--haut{ align-items: flex-start; }
.flex--entre{ justify-content: space-between; }
.flex--wrap{ flex-wrap: wrap; }
.pousse{ margin-left: auto; }
.pile{ display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.pile--serree{ gap: .4rem; }
.visuellement-cache{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.lien-evitement{ position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .6rem 1rem; border-radius: 999px; background: var(--or); color: var(--sur-or); text-decoration: none; font-family: var(--data); font-size: .8rem; }
.lien-evitement:focus{ top: 1rem; }

/* ---------------------------------------------------------------- mise en page */

.app{ display: grid; grid-template-columns: var(--barre) minmax(0, 1fr); min-height: 100vh; }
.barre{
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1rem .75rem .9rem; border-right: 1px solid var(--trait);
  background: linear-gradient(180deg, rgba(3, 31, 36, .92), rgba(0, 22, 26, .96));
  z-index: 40;
}
:root[data-theme="clair"] .barre{ background: var(--surface-2); }
.marque{ display: flex; align-items: center; gap: .65rem; padding: .25rem .5rem .8rem; color: var(--creme); text-decoration: none; }
.marque img{ height: 40px; width: auto; filter: drop-shadow(0 0 10px rgba(240, 208, 138, .28)); }
.marque__nom{ display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; line-height: 1; }
.marque__nom b{ font-weight: inherit; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marque__sous{ display: block; margin-top: .3rem; font-family: var(--data); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--or); }
.recherche-bouton{
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .7rem; margin-bottom: .4rem;
  border: 1px solid var(--trait); border-radius: 10px; background: var(--champ); color: var(--gris); text-align: left; font-size: .86rem; white-space: nowrap;
}
.recherche-bouton:hover{ border-color: var(--trait-fort); color: var(--texte); }
.recherche-bouton kbd{ margin-left: auto; font-size: .66rem; }
.nav{ display: grid; gap: .1rem; }
.nav__groupe{ margin: .85rem 0 .3rem; padding: 0 .6rem; }
.nav a{
  position: relative; display: flex; align-items: center; gap: .65rem; padding: .48rem .65rem; border-radius: 9px;
  color: var(--texte-2); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.nav a:hover{ background: var(--survol); color: var(--creme); }
.nav a[aria-current="page"]{ background: var(--or-voile); color: var(--creme); }
.nav a[aria-current="page"]::before{ content: ""; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--or); }
.nav a[aria-current="page"] .ic{ color: var(--or); }
.nav__compteur{ margin-left: auto; min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--or); color: var(--sur-or); font-family: var(--data); font-size: .66rem; font-weight: 500; line-height: 1.35rem; text-align: center; }
.nav__compteur--doux{ background: var(--surface-3); color: var(--texte-2); }
.barre__pied{ margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--trait); display: grid; gap: .5rem; }
.moi{ display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; color: var(--texte); }
.moi:hover{ background: var(--survol); }
.moi__nom{ font-size: .88rem; font-weight: 500; color: var(--creme); line-height: 1.2; }
.moi__role{ font-size: .72rem; color: var(--gris); }
.barre__outils{ display: flex; gap: .3rem; }

.principal{ min-width: 0; display: flex; flex-direction: column; }
.haut{
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; min-height: var(--haut);
  padding: .55rem clamp(1rem, 2.5vw, 2rem); border-bottom: 1px solid var(--trait);
  background: rgba(0, 22, 26, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
:root[data-theme="clair"] .haut{ background: rgba(243, 239, 230, .86); }
.haut .haut__menu{ display: none; }
.fil{ display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .86rem; color: var(--gris); }
.fil a{ color: var(--gris); text-decoration: none; }
.fil a:hover{ color: var(--creme); }
.fil__sep{ opacity: .5; }
.fil__courant{ color: var(--creme); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haut__actions{ margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.vue{ padding: clamp(1rem, 2.5vw, 2rem); padding-bottom: 4rem; width: 100%; max-width: 1480px; margin: 0 auto; }
.vue--large{ max-width: none; }
.vue--pleine{ padding: 0; max-width: none; }
.tete{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.4rem; }
.tete__titre{ min-width: 0; }
.tete__titre .etiquette{ margin-bottom: .35rem; }
.tete__titre p{ margin: .35rem 0 0; color: var(--texte-2); max-width: 70ch; }
.tete__actions{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ----------------------------------------------------------------- boutons */

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.25rem; padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--trait-fort); background: var(--surface-2); color: var(--creme);
  font-size: .86rem; font-weight: 500; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s var(--ease), box-shadow .2s ease;
}
.btn:hover{ border-color: var(--trait-or); background: var(--surface-3); color: var(--creme); }
.btn:active{ transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity: .45; pointer-events: none; }
.btn--or{ border-color: transparent; background: var(--degrade-or); color: var(--sur-or); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--or:hover{ color: var(--sur-or); filter: brightness(1.06); box-shadow: 0 10px 30px -12px rgba(216, 174, 85, .8), inset 0 1px 0 rgba(255, 255, 255, .45); background: var(--degrade-or); }
.btn--fantome{ background: transparent; border-color: transparent; color: var(--texte-2); }
.btn--fantome:hover{ background: var(--survol); border-color: transparent; color: var(--creme); }
.btn--danger{ color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 40%, transparent); background: transparent; }
.btn--danger:hover{ background: color-mix(in srgb, var(--rouge) 12%, transparent); border-color: var(--rouge); color: var(--rouge); }
.btn--petit{ min-height: 1.85rem; padding: .3rem .7rem; font-size: .8rem; }
.btn--icone{ width: 2.25rem; padding: 0; }
.btn--icone.btn--petit{ width: 1.85rem; }
.btn--plein{ width: 100%; }
.btn--carre{ border-radius: 10px; }
.btn.actif{ border-color: var(--or); color: var(--or-clair); background: var(--or-voile); }
.groupe-btn{ display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 999px; padding: 2px; background: var(--surface-2); }
.groupe-btn button{ border: 0; background: transparent; color: var(--texte-2); padding: .32rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }
.groupe-btn button:hover{ color: var(--creme); }
.groupe-btn button[aria-pressed="true"]{ background: var(--or-voile); color: var(--or-clair); box-shadow: inset 0 0 0 1px var(--trait-or); }

/* ------------------------------------------------------------- formulaires */

.form{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9rem 1rem; }
.champ{ display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.form > *{ grid-column: span 12; }
.form > .champ--demi{ grid-column: span 6; }
.form > .champ--tiers{ grid-column: span 4; }
.form > .champ--quart{ grid-column: span 3; }
.form > .champ--deux-tiers{ grid-column: span 8; }
.champ > label, .champ__label{ font-family: var(--data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.champ__aide{ font-size: .78rem; color: var(--gris); margin: 0; }
.champ__aide a{ color: var(--eau); }
.requis::after{ content: " *"; color: var(--or); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="search"], select, textarea, .saisie{
  width: 100%; min-height: 2.45rem; padding: .5rem .75rem; border-radius: 10px;
  border: 1px solid var(--trait-fort); background: var(--champ); color: var(--creme);
  font-size: .92rem; font-weight: 400; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ resize: vertical; min-height: 5rem; }
select{ appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus, .saisie:focus-within{ outline: none; border-color: var(--or); box-shadow: 0 0 0 3px var(--or-voile); }
input::placeholder, textarea::placeholder{ color: var(--gris); opacity: .75; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: invert(.75); cursor: pointer; }
:root[data-theme="clair"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="clair"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: none; }
input[type="color"]{ width: 2.6rem; height: 2.3rem; padding: 2px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--champ); cursor: pointer; }
input[type="file"]{ font-size: .85rem; color: var(--texte-2); }
input[type="file"]::file-selector-button{ margin-right: .7rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--surface-2); color: var(--creme); font-size: .8rem; cursor: pointer; }
input[type="range"]{ accent-color: var(--or); width: 100%; }
.case{ display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--texte); cursor: pointer; user-select: none; }
.case input{ width: 1.05rem; height: 1.05rem; accent-color: var(--or); flex: none; margin: 0; }
.interrupteur{ position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; }
.interrupteur input{ position: absolute; opacity: 0; pointer-events: none; }
.interrupteur__piste{ width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--trait-fort); position: relative; transition: background .2s ease; flex: none; }
.interrupteur__piste::after{ content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%; background: var(--texte-2); transition: transform .2s var(--ease), background .2s ease; }
.interrupteur input:checked + .interrupteur__piste{ background: var(--or-voile); border-color: var(--or); }
.interrupteur input:checked + .interrupteur__piste::after{ transform: translateX(1rem); background: var(--or); }
.interrupteur input:focus-visible + .interrupteur__piste{ outline: 2px solid var(--or-clair); outline-offset: 2px; }
.mdp{ position: relative; }
.mdp input{ padding-right: 2.8rem; }
.mdp button{ position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--gris); padding: .35rem; border-radius: 6px; }
.mdp button:hover{ color: var(--creme); }
.saisie-icone{ position: relative; }
.saisie-icone .ic{ position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.saisie-icone input{ padding-left: 2.2rem; }
.form-actions{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-end; padding-top: .4rem; }
.form-actions--gauche{ justify-content: flex-start; }
.form__titre{ grid-column: 1 / -1; margin: .6rem 0 -.2rem; padding-top: .8rem; border-top: 1px solid var(--trait); }
.form__titre:first-child{ border-top: 0; padding-top: 0; margin-top: 0; }
.message-form{ grid-column: 1 / -1; margin: 0; padding: .65rem .85rem; border-radius: 10px; font-size: .88rem; }
.message-form--erreur{ color: var(--rouge); background: color-mix(in srgb, var(--rouge) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rouge) 30%, transparent); }
.message-form--ok{ color: var(--vert); background: color-mix(in srgb, var(--vert) 10%, transparent); border: 1px solid color-mix(in srgb, var(--vert) 30%, transparent); }
.message-form--info{ color: var(--texte-2); background: var(--eau-voile); border: 1px solid var(--trait); }

/* Étiquettes (saisie de mots-clés) */
.puces-saisie{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 2.45rem; padding: .3rem .4rem; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--champ); cursor: text; }
.puces-saisie:focus-within{ border-color: var(--or); box-shadow: 0 0 0 3px var(--or-voile); }
.puces-saisie input{ flex: 1; min-width: 8rem; min-height: 1.8rem; border: 0 !important; box-shadow: none !important; background: transparent; padding: .1rem .3rem; }

/* Sélecteur d'objet lié */
.choix-objet{ position: relative; }
.choix-objet__liste{ position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 260px; overflow: auto; padding: .3rem; border-radius: 12px; border: 1px solid var(--trait-fort); background: var(--surface-2); box-shadow: var(--ombre); }
.choix-objet__liste button{ display: flex; width: 100%; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--texte); font-size: .88rem; }
.choix-objet__liste button:hover, .choix-objet__liste button.actif{ background: var(--survol-fort); color: var(--creme); }
.choix-objet__liste small{ margin-left: auto; color: var(--gris); font-size: .74rem; }
.choix-objet__choisi{ display: flex; align-items: center; gap: .5rem; min-height: 2.45rem; padding: .3rem .4rem .3rem .7rem; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--champ); }
.choix-objet__choisi span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ cartes, tuiles */

.carte{ background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: clamp(1rem, 2vw, 1.4rem); min-width: 0; }
.carte--plate{ padding: 0; overflow: hidden; }
.carte--or{ border-color: var(--trait-or); }
.carte--alerte{ border-color: color-mix(in srgb, var(--rouge) 40%, transparent); }
.carte__tete{ display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; min-height: 1.9rem; }
.carte__tete h2{ font-size: 1.02rem; }
.carte__tete .etiquette{ margin-right: auto; }
.carte__tete > :last-child:not(h2):not(.etiquette){ margin-left: auto; }
.carte__pied{ margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--trait); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.grille{ display: grid; gap: 1rem; }
.grille--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--fiche{ grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grille--fiche-gauche{ grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.grille--auto{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpi{ position: relative; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); text-decoration: none; color: inherit; overflow: hidden; min-width: 0; }
.kpi:hover{ border-color: var(--trait-fort); }
a.kpi:hover{ border-color: var(--trait-or); }
.kpi__label{ font-family: var(--data); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: .4rem; }
.kpi__valeur{ margin-top: .45rem; font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.02em; color: var(--creme); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__sous{ margin-top: .3rem; font-size: .78rem; color: var(--gris); }
.kpi--or .kpi__valeur{ background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi--alerte .kpi__valeur{ color: var(--rouge); }
.kpi::after{ content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--or-voile), transparent 70%); pointer-events: none; }

/* ------------------------------------------------------------- listes, lignes */

.liste{ list-style: none; margin: 0; padding: 0; }
.liste > li{ border-top: 1px solid var(--trait); }
.liste > li:first-child{ border-top: 0; }
.ligne{ display: flex; align-items: center; gap: .75rem; padding: .7rem .2rem; color: inherit; text-decoration: none; min-width: 0; }
a.ligne:hover, button.ligne:hover{ background: var(--survol); }
button.ligne{ width: 100%; border: 0; background: transparent; text-align: left; }
.ligne--dense{ padding: .5rem .2rem; }
.ligne__corps{ flex: 1; min-width: 0; }
.ligne__titre{ display: block; color: var(--creme); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne__sous{ display: block; font-size: .8rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne__fin{ margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; font-size: .82rem; color: var(--gris); }
.carte .liste .ligne{ padding-left: 0; padding-right: 0; }

/* -------------------------------------------------------------------- tableaux */

.tableau-conteneur{ overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.tableau{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.tableau th, .tableau td{ padding: .62rem .85rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait); }
.tableau tbody tr:last-child td{ border-bottom: 0; }
.tableau th{ position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-family: var(--data); font-weight: 500; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.tableau th[data-tri]{ cursor: pointer; user-select: none; }
.tableau th[data-tri]:hover{ color: var(--creme); }
.tableau th[aria-sort="ascending"]::after{ content: " ↑"; color: var(--or); }
.tableau th[aria-sort="descending"]::after{ content: " ↓"; color: var(--or); }
.tableau tbody tr{ transition: background .12s ease; }
.tableau tbody tr.cliquable{ cursor: pointer; }
.tableau tbody tr.cliquable:hover td{ background: var(--survol); }
.tableau td.n, .tableau th.n{ text-align: right; font-variant-numeric: tabular-nums; }
.tableau .principal-cell{ color: var(--creme); font-weight: 500; }
.tableau .principal-cell small{ display: block; color: var(--gris); font-weight: 400; font-size: .78rem; }
.tableau tr.attenue td{ opacity: .55; }
.tableau--saisie td{ padding: .3rem .35rem; }
.tableau--saisie input, .tableau--saisie select{ min-height: 2.1rem; padding: .35rem .55rem; border-radius: 8px; }

.outils{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.outils .saisie-icone{ flex: 1 1 260px; max-width: 420px; }
.outils select{ width: auto; min-width: 9rem; }
.compte-resultats{ font-size: .8rem; color: var(--gris); margin-left: auto; }

/* ------------------------------------------------------------ pastilles, puces */

.pastille{ display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .6rem; border-radius: 999px; border: 1px solid var(--trait-fort); font-size: .74rem; font-weight: 500; line-height: 1.45; white-space: nowrap; color: var(--texte-2); background: transparent; }
.pastille::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pastille--sans::before{ display: none; }
.p-or, .p-en_cours, .p-envoye, .p-planifie, .p-proposition, .p-a_valider, .p-emise, .p-evaluation, .p-haute{ color: var(--or); border-color: color-mix(in srgb, var(--or) 40%, transparent); }
.p-vert, .p-livre, .p-accepte, .p-payee, .p-publie, .p-gagne, .p-valide, .p-termine, .p-fait, .p-client, .p-emis, .p-traitee, .p-actif, .p-transmis{ color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, transparent); }
.p-rouge, .p-refuse, .p-retard, .p-echec, .p-perdu, .p-annulee, .p-desactive{ color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 40%, transparent); }
.p-eau, .p-preparation, .p-nouveau, .p-nouvelle, .p-qualifie, .p-prospect, .p-a_commencer, .p-idee, .p-a_venir, .p-invite{ color: var(--eau); border-color: color-mix(in srgb, var(--eau) 35%, transparent); }
.p-bleu, .p-negociation, .p-apprenant, .p-a_publier, .p-manuel, .p-partiel{ color: var(--bleu); border-color: color-mix(in srgb, var(--bleu) 40%, transparent); }
.p-violet, .p-partenaire{ color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.p-gris, .p-clos, .p-en_pause, .p-brouillon, .p-expire, .p-archivee, .p-ancien, .p-autre, .p-basse, .p-fournisseur{ color: var(--gris); }
.puce{ display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 6px; background: var(--surface-3); color: var(--texte-2); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.puce button{ border: 0; background: transparent; color: var(--gris); padding: 0; display: inline-flex; }
.puce button:hover{ color: var(--rouge); }
.puces{ display: flex; flex-wrap: wrap; gap: .3rem; }
.c-gris{ background: rgba(134, 163, 160, .16); color: var(--texte-2); }
.c-brun{ background: color-mix(in srgb, var(--brun) 20%, transparent); color: var(--brun); }
.c-orange{ background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.c-or{ background: color-mix(in srgb, var(--or) 18%, transparent); color: var(--or-clair); }
.c-vert{ background: color-mix(in srgb, var(--vert) 16%, transparent); color: var(--vert); }
.c-sarcelle{ background: color-mix(in srgb, var(--eau) 16%, transparent); color: var(--eau); }
.c-bleu{ background: color-mix(in srgb, var(--bleu) 17%, transparent); color: var(--bleu); }
.c-violet{ background: color-mix(in srgb, var(--violet) 17%, transparent); color: var(--violet); }
.c-rose{ background: color-mix(in srgb, var(--rose) 17%, transparent); color: var(--rose); }
.c-rouge{ background: color-mix(in srgb, var(--rouge) 16%, transparent); color: var(--rouge); }

.avatar{ display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; font-family: var(--display); font-weight: 600; font-size: .78rem; color: var(--sur-or); background: var(--degrade-or); text-transform: uppercase; letter-spacing: .02em; }
.avatar--petit{ width: 1.55rem; height: 1.55rem; font-size: .62rem; }
.avatar--grand{ width: 3.4rem; height: 3.4rem; font-size: 1.2rem; }
.avatar--eau{ background: linear-gradient(135deg, #BDEBE1, #5FAEA0); }
.avatar--carre{ border-radius: 10px; }

.barre-progression{ position: relative; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.barre-progression span{ position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--degrade-or); }
.barre-progression--vert span{ background: var(--vert); }
.progression-texte{ display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.progression-texte .barre-progression{ flex: 1; }

/* ------------------------------------------------------------------- onglets */

.onglets{ display: flex; gap: .2rem; border-bottom: 1px solid var(--trait); margin-bottom: 1.2rem; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar{ display: none; }
.onglets button, .onglets a{ position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .85rem; border: 0; background: transparent; color: var(--gris); font-size: .88rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.onglets button:hover, .onglets a:hover{ color: var(--creme); }
.onglets [aria-selected="true"], .onglets [aria-current="page"]{ color: var(--creme); }
.onglets [aria-selected="true"]::after, .onglets [aria-current="page"]::after{ content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--or); }
.onglets__compte{ font-family: var(--data); font-size: .68rem; color: var(--gris); }

/* --------------------------------------------------- modale, menu, notifications */

dialog.modale{
  width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--trait-fort);
  border-radius: 18px; background: var(--surface); color: var(--texte); box-shadow: var(--ombre); overflow: hidden;
}
dialog.modale--large{ width: min(940px, calc(100vw - 2rem)); }
dialog.modale--etroite{ width: min(460px, calc(100vw - 2rem)); }
dialog.modale::backdrop{ background: rgba(0, 10, 12, .62); backdrop-filter: blur(3px); }
:root[data-theme="clair"] dialog.modale::backdrop{ background: rgba(20, 30, 30, .35); }
dialog.modale[open]{ display: flex; flex-direction: column; animation: apparition .22s var(--ease); }
@keyframes apparition{ from{ opacity: 0; transform: translateY(10px) scale(.985); } to{ opacity: 1; transform: none; } }
.modale__tete{ display: flex; align-items: center; gap: .8rem; padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--trait); }
.modale__tete h2{ font-size: 1.08rem; }
.modale__tete .btn{ margin-left: auto; }
.modale__corps{ padding: 1.2rem 1.3rem; overflow-y: auto; }
.modale__pied{ display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; padding: .9rem 1.3rem; border-top: 1px solid var(--trait); background: var(--surface-2); }
.modale__pied .gauche{ margin-right: auto; }

.menu{ position: fixed; z-index: 200; min-width: 200px; max-width: 320px; padding: .35rem; border-radius: 12px; border: 1px solid var(--trait-fort); background: var(--surface-2); box-shadow: var(--ombre); animation: apparition .14s var(--ease); }
.menu button, .menu a{ display: flex; align-items: center; gap: .6rem; width: 100%; padding: .48rem .6rem; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font-size: .87rem; text-align: left; text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button.actif{ background: var(--survol-fort); color: var(--creme); }
.menu .danger{ color: var(--rouge); }
.menu .danger:hover{ color: var(--rouge); }
.menu hr{ margin: .3rem .2rem; }
.menu__titre{ padding: .45rem .6rem .2rem; font-family: var(--data); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.menu small{ margin-left: auto; color: var(--gris); font-size: .72rem; }

.toasts{ position: fixed; z-index: 400; right: 1.2rem; bottom: 1.2rem; display: grid; gap: .5rem; pointer-events: none; max-width: min(420px, calc(100vw - 2.4rem)); }
.toast{ pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--trait-fort); color: var(--creme); box-shadow: var(--ombre); font-size: .88rem; animation: apparition .2s var(--ease); }
.toast--ok{ border-color: color-mix(in srgb, var(--vert) 45%, transparent); }
.toast--ok .ic{ color: var(--vert); }
.toast--erreur{ border-color: color-mix(in srgb, var(--rouge) 50%, transparent); }
.toast--erreur .ic{ color: var(--rouge); }
.toast.sortie{ opacity: 0; transform: translateY(6px); transition: all .25s ease; }

/* Palette de commandes (Ctrl+K) */
.palette{ width: min(680px, calc(100vw - 2rem)); }
.palette .modale__corps{ padding: 0; }
.palette__saisie{ display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--trait); }
.palette__saisie input{ border: 0 !important; box-shadow: none !important; background: transparent; font-size: 1.05rem; padding: 0; min-height: 0; }
.palette__resultats{ max-height: min(60vh, 520px); overflow-y: auto; padding: .4rem; }
.palette__groupe{ padding: .6rem .7rem .25rem; font-family: var(--data); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.palette__item{ display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--texte); }
.palette__item.actif{ background: var(--or-voile); color: var(--creme); }
.palette__item .ligne__sous{ font-size: .78rem; }
.palette__aide{ display: flex; gap: 1rem; padding: .6rem 1.1rem; border-top: 1px solid var(--trait); font-size: .74rem; color: var(--gris); }

/* ----------------------------------------------------------- états, attente */

.vide{ display: grid; justify-items: center; gap: .6rem; padding: 2.4rem 1rem; text-align: center; color: var(--gris); }
.vide .ic{ width: 34px; height: 34px; color: var(--or); opacity: .8; }
.vide h3{ color: var(--creme); font-size: 1rem; }
.vide p{ margin: 0; max-width: 46ch; font-size: .88rem; }
.vide--compact{ padding: 1.2rem .5rem; }
.chargement{ display: grid; gap: .7rem; padding: 1rem 0; }
.chargement span{ height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: reflet 1.3s linear infinite; }
.chargement span:nth-child(2){ width: 80%; }
.chargement span:nth-child(3){ width: 60%; }
@keyframes reflet{ to{ background-position: -200% 0; } }
.tourne{ animation: rotation 1s linear infinite; }
@keyframes rotation{ to{ transform: rotate(360deg); } }
.bandeau{ display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: var(--eau-voile); border: 1px solid var(--trait); font-size: .88rem; color: var(--texte); }
.bandeau .ic{ color: var(--eau); margin-top: .1rem; }
.bandeau--or{ background: var(--or-voile); border-color: var(--trait-or); }
.bandeau--or .ic{ color: var(--or); }
.bandeau--alerte{ background: color-mix(in srgb, var(--rouge) 9%, transparent); border-color: color-mix(in srgb, var(--rouge) 30%, transparent); }
.bandeau--alerte .ic{ color: var(--rouge); }
.bandeau p:last-child{ margin-bottom: 0; }
.bandeau__corps{ flex: 1; min-width: 0; }

/* ---------------------------------------------------------- écrans d'accès */

.acces{ min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.acces__visuel{ position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; overflow: hidden; border-right: 1px solid var(--trait);
  background: radial-gradient(600px 500px at 30% 40%, rgba(216, 174, 85, .14), transparent 60%), radial-gradient(900px 700px at 80% 100%, rgba(14, 74, 76, .5), transparent 60%), #00161A; color: #F2ECDF; }
.acces__visuel canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.acces__visuel > *:not(canvas){ position: relative; }
.acces__emblème, .acces__embleme{ width: 120px; filter: drop-shadow(0 0 30px rgba(240, 208, 138, .35)); }
.acces__accroche{ max-width: 34rem; }
.acces__accroche h1{ font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.02; color: #F2ECDF; }
.acces__accroche p{ margin-top: 1rem; color: #A9BCB8; font-size: 1.02rem; max-width: 30rem; }
.acces__modules{ display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.acces__modules span{ padding: .25rem .7rem; border-radius: 999px; border: 1px solid rgba(216, 174, 85, .3); font-family: var(--data); font-size: .68rem; letter-spacing: .08em; color: #C6B083; }
.acces__formulaire{ display: grid; place-items: center; padding: 2rem 1.5rem; }
.carte-acces{ width: min(100%, 25rem); display: grid; gap: 1.1rem; }
.carte-acces h2{ font-size: 1.5rem; }
.carte-acces p{ color: var(--texte-2); font-size: .9rem; margin: 0; }
.carte-acces .champ{ grid-column: auto; }
.carte-acces .btn{ min-height: 2.8rem; }
.carte-acces__liens{ display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; }
.carte-acces__liens button{ border: 0; background: none; padding: 0; color: var(--eau); text-decoration: underline; text-underline-offset: 3px; font-size: .84rem; }
.code-totp{ font-family: var(--data); font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; }

/* ----------------------------------------------------------- tableau de bord */

.bonjour{ margin-bottom: 1.4rem; }
.bonjour h1{ font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.bonjour p{ margin: .3rem 0 0; color: var(--texte-2); }
.graph{ width: 100%; height: auto; overflow: visible; }
.graph text{ fill: var(--gris); font-family: var(--data); font-size: 10px; }
.graph .axe{ stroke: var(--trait); }
.graph .barre-a{ fill: var(--or); }
.graph .barre-b{ fill: var(--eau); opacity: .75; }
.graph .barre-a:hover, .graph .barre-b:hover{ opacity: 1; filter: brightness(1.15); }
.legende{ display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--gris); }
.legende span{ display: inline-flex; align-items: center; gap: .35rem; }
.legende i{ width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.entonnoir{ display: grid; gap: .45rem; }
.entonnoir__ligne{ display: grid; grid-template-columns: 9rem minmax(0, 1fr) 6.5rem; align-items: center; gap: .7rem; font-size: .84rem; }
.entonnoir__barre{ height: 22px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.entonnoir__barre span{ display: block; height: 100%; border-radius: 6px; background: var(--degrade-or); min-width: 2px; }
.entonnoir__ligne--gagne .entonnoir__barre span{ background: var(--vert); }
.entonnoir__ligne--perdu .entonnoir__barre span{ background: var(--gris); opacity: .5; }
.entonnoir__ligne b{ font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--creme); }
.tache{ display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 0; }
.tache + .tache{ border-top: 1px solid var(--trait); }
.coche{ flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; border-radius: 6px; border: 1.5px solid var(--trait-fort); background: transparent; display: grid; place-items: center; padding: 0; color: transparent; transition: all .15s ease; }
.coche:hover{ border-color: var(--or); }
.coche[aria-checked="true"]{ background: var(--or); border-color: var(--or); color: var(--sur-or); }
.coche .ic{ width: 13px; height: 13px; stroke-width: 2.6; }
.tache__corps{ flex: 1; min-width: 0; }
.tache__titre{ color: var(--creme); font-size: .92rem; cursor: pointer; }
.tache--faite .tache__titre{ text-decoration: line-through; color: var(--gris); }
.tache__meta{ display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin-top: .15rem; font-size: .76rem; color: var(--gris); }
.tache__meta a{ color: var(--eau); text-decoration: none; }
.tache__meta .retard{ color: var(--rouge); }
.tache__actions{ opacity: 0; transition: opacity .15s ease; }
.tache:hover .tache__actions, .tache:focus-within .tache__actions{ opacity: 1; }

/* ---------------------------------------------------------------- fiches */

.fiche-tete{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-bottom: 1.3rem; }
.fiche-tete__corps{ flex: 1; min-width: 220px; }
.fiche-tete h1{ font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.fiche-tete__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .45rem; font-size: .86rem; color: var(--texte-2); }
.fiche-tete__meta a{ color: var(--eau); text-decoration: none; }
.fiche-tete__meta .ic{ width: 15px; height: 15px; color: var(--gris); }
.fiche-tete__actions{ display: flex; flex-wrap: wrap; gap: .45rem; }
.proprietes{ display: grid; gap: .1rem; margin: 0; }
.proprietes > div{ display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--trait); font-size: .88rem; }
.proprietes > div:first-child{ border-top: 0; }
.proprietes dt{ color: var(--gris); font-size: .8rem; }
.proprietes dd{ margin: 0; color: var(--creme); min-width: 0; overflow-wrap: anywhere; }
.proprietes dd a{ color: var(--eau); }
.section-titre{ display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 .8rem; }
.section-titre h2{ font-size: 1rem; }
.section-titre .btn{ margin-left: auto; }

.chronologie{ list-style: none; margin: 0; padding: 0; position: relative; }
.chronologie::before{ content: ""; position: absolute; left: .78rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--trait-fort); }
.chronologie li{ position: relative; display: flex; gap: .8rem; padding: .55rem 0; }
.chronologie__point{ position: relative; z-index: 1; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--trait-fort); color: var(--or); }
.chronologie__point .ic{ width: 13px; height: 13px; }
.chronologie__corps{ flex: 1; min-width: 0; font-size: .88rem; }
.chronologie__corps time{ display: block; font-family: var(--data); font-size: .68rem; color: var(--gris); }
.chronologie__corps p{ margin: .2rem 0 0; color: var(--texte-2); white-space: pre-line; }

/* ------------------------------------------------------------------ kanban */

.kanban{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: .9rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; min-height: 60vh; }
.kanban__col{ display: flex; flex-direction: column; min-height: 200px; max-height: calc(100vh - 220px); border-radius: var(--rayon); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--trait); }
.kanban__tete{ display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem .6rem; }
.kanban__tete h3{ font-size: .88rem; }
.kanban__tete .compte{ font-family: var(--data); font-size: .7rem; color: var(--gris); }
.kanban__total{ margin-left: auto; font-family: var(--data); font-size: .74rem; color: var(--or-clair); }
.kanban__cartes{ flex: 1; display: grid; align-content: start; gap: .55rem; padding: .2rem .6rem .8rem; overflow-y: auto; min-height: 60px; }
.kanban__col.survol-depot{ border-color: var(--or); background: var(--or-voile); }
.kcarte{ display: block; padding: .75rem .85rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); color: inherit; text-decoration: none; cursor: grab; user-select: none; box-shadow: var(--ombre-douce); }
.kcarte:hover{ border-color: var(--trait-or); }
.kcarte.glisse{ opacity: .4; }
.kcarte__titre{ color: var(--creme); font-weight: 500; font-size: .9rem; line-height: 1.3; }
.kcarte__sous{ margin-top: .3rem; font-size: .78rem; color: var(--gris); }
.kcarte__pied{ display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .78rem; color: var(--texte-2); }
.kcarte__montant{ margin-left: auto; font-family: var(--data); color: var(--or-clair); }
.kanban__ajout{ margin: 0 .6rem .7rem; }

/* ----------------------------------------------------------------- agenda */

.agenda-outils{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.agenda-outils h2{ font-size: 1.25rem; min-width: 12rem; text-transform: capitalize; }
.calendrier{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.calendrier__jour-nom{ padding: .5rem .6rem; font-family: var(--data); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); background: var(--surface-2); border-bottom: 1px solid var(--trait); }
.calendrier__case{ min-height: 118px; padding: .35rem .4rem; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: .2rem; min-width: 0; cursor: pointer; }
.calendrier__case:nth-child(7n){ border-right: 0; }
.calendrier__case:hover{ background: var(--survol); }
.calendrier__case.hors{ opacity: .45; }
.calendrier__case.aujourdhui .calendrier__num{ background: var(--or); color: var(--sur-or); }
.calendrier__num{ align-self: flex-start; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 999px; display: grid; place-items: center; font-size: .78rem; font-weight: 500; color: var(--texte-2); }
.ev{ display: flex; align-items: center; gap: .3rem; width: 100%; padding: .12rem .4rem; border: 0; border-radius: 6px; font-size: .73rem; line-height: 1.35; text-align: left; color: var(--creme); background: var(--surface-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; text-decoration: none; }
.ev:hover{ filter: brightness(1.2); }
.ev span{ overflow: hidden; text-overflow: ellipsis; }
.ev b{ font-weight: 500; font-family: var(--data); font-size: .68rem; opacity: .8; flex: none; }
.ev--activite{ background: color-mix(in srgb, var(--or) 20%, var(--surface-2)); }
.ev--rdv{ background: color-mix(in srgb, var(--violet) 26%, var(--surface-2)); }
.ev--appel{ background: color-mix(in srgb, var(--bleu) 22%, var(--surface-2)); }
.ev--publication{ background: color-mix(in srgb, var(--rose) 22%, var(--surface-2)); }
.ev--chantier{ background: color-mix(in srgb, var(--eau) 22%, var(--surface-2)); }
.ev--facture, .ev--devis{ background: color-mix(in srgb, var(--vert) 18%, var(--surface-2)); }
.ev--opportunite{ background: color-mix(in srgb, var(--orange) 22%, var(--surface-2)); }
.ev--fait{ opacity: .55; text-decoration: line-through; }
.ev-plus{ font-size: .7rem; color: var(--gris); padding-left: .3rem; }
.semaine{ display: grid; grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: auto; max-height: calc(100vh - 230px); background: var(--surface); position: relative; }
.semaine__tete{ position: sticky; top: 0; z-index: 2; padding: .5rem; text-align: center; font-size: .8rem; color: var(--texte-2); background: var(--surface-2); border-bottom: 1px solid var(--trait); }
.semaine__tete.aujourdhui{ color: var(--or); font-weight: 600; }
.semaine__journee{ grid-column: span 1; padding: .2rem; border-bottom: 1px solid var(--trait); background: var(--surface-2); display: grid; gap: .15rem; align-content: start; min-height: 1.8rem; }
.semaine__heures{ position: relative; }
.semaine__heure{ height: 48px; border-top: 1px solid var(--trait); font-family: var(--data); font-size: .62rem; color: var(--gris); padding: .1rem .3rem; text-align: right; }
.semaine__col{ position: relative; border-left: 1px solid var(--trait); }
.semaine__col .creneau{ height: 48px; border-top: 1px solid var(--trait); }
.semaine__col .creneau:hover{ background: var(--survol); cursor: pointer; }
.semaine__ev{ position: absolute; left: 3px; right: 3px; z-index: 1; padding: .2rem .35rem; border-radius: 6px; font-size: .72rem; line-height: 1.25; overflow: hidden; border-left: 3px solid var(--or); }
.semaine__maintenant{ position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); z-index: 3; pointer-events: none; }

/* -------------------------------------------------------------- chantiers */

.etapes-chantier{ display: grid; gap: .4rem; }
.etape{ display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; font-size: .88rem; }
.etape__point{ width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--trait-fort); }
.etape--fait .etape__point{ background: var(--vert); border-color: var(--vert); }
.etape--en_cours .etape__point{ background: var(--or); border-color: var(--or); box-shadow: 0 0 0 4px var(--or-voile); }
.fil-messages{ display: grid; gap: .65rem; margin-bottom: 1rem; }
.message{ max-width: 82%; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--trait); font-size: .9rem; }
.message small{ display: block; margin-bottom: .2rem; font-family: var(--data); font-size: .66rem; color: var(--gris); }
.message p{ margin: 0; white-space: pre-line; }
.message--client{ justify-self: start; background: var(--eau-voile); border-bottom-left-radius: 4px; }
.message--nous{ justify-self: end; background: var(--surface-2); border-bottom-right-radius: 4px; }
.message--nouveau{ border-color: var(--or); }
.vignettes{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.vignettes a{ display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--trait); }
.vignettes img{ width: 92px; height: 70px; object-fit: cover; }
.depot{ display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; border: 1.5px dashed var(--trait-fort); border-radius: 12px; color: var(--gris); font-size: .86rem; text-align: center; cursor: pointer; transition: all .15s ease; }
.depot:hover, .depot.survol{ border-color: var(--or); color: var(--creme); background: var(--or-voile); }
.interne{ border-style: dashed !important; border-color: var(--trait-or) !important; }

/* --------------------------------------------------------------- ventes */

.lignes-doc{ width: 100%; border-collapse: separate; border-spacing: 0; }
.lignes-doc th{ padding: .4rem .4rem; font-family: var(--data); font-weight: 500; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); text-align: left; border-bottom: 1px solid var(--trait); }
.lignes-doc td{ padding: .35rem .3rem; vertical-align: top; border-bottom: 1px solid var(--trait); }
.lignes-doc tr.section td{ background: var(--surface-2); }
.lignes-doc input, .lignes-doc select, .lignes-doc textarea{ min-height: 2.1rem; padding: .35rem .5rem; border-radius: 8px; font-size: .86rem; }
.lignes-doc textarea{ min-height: 2.1rem; height: 2.1rem; margin-top: .25rem; font-size: .8rem; color: var(--texte-2); }
.lignes-doc .n input{ text-align: right; }
.lignes-doc .total-ligne{ padding-top: .85rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--creme); font-size: .88rem; }
.lignes-doc .poignee{ cursor: grab; color: var(--gris); padding-top: .7rem; }
.lignes-doc tr.glisse{ opacity: .4; }
.lignes-doc tr:not(.section):not(.texte) .l-des{ min-width: 260px; }
.lignes-doc .l-qte{ width: 80px; }
.lignes-doc .l-unite{ width: 110px; }
.lignes-doc .l-pu{ width: 120px; }
.lignes-doc .l-tva{ width: 90px; }
.lignes-doc .l-remise{ width: 70px; }
.totaux{ margin-left: auto; width: min(100%, 360px); display: grid; gap: .1rem; font-size: .9rem; }
.totaux > div{ display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.totaux span:last-child{ font-variant-numeric: tabular-nums; color: var(--creme); }
.totaux .ttc{ border-top: 1px solid var(--trait-fort); margin-top: .3rem; padding-top: .6rem; font-size: 1.1rem; font-weight: 600; }
.totaux .ttc span:last-child{ background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.montant{ font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----------------------------------------------------------------- notes */

.notes{ display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - var(--haut)); }
.notes__barre{ position: sticky; top: var(--haut); height: calc(100vh - var(--haut)); overflow-y: auto; padding: 1rem .6rem 2rem; border-right: 1px solid var(--trait); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.notes__barre .etiquette{ padding: .9rem .5rem .35rem; display: flex; align-items: center; }
.notes__barre .etiquette button{ margin-left: auto; }
.arbre{ list-style: none; margin: 0; padding: 0; }
.arbre ul{ list-style: none; margin: 0; padding: 0 0 0 .9rem; }
.arbre__ligne{ display: flex; align-items: center; gap: .15rem; border-radius: 7px; min-height: 1.95rem; padding-right: .2rem; color: var(--texte-2); }
.arbre__ligne:hover{ background: var(--survol); color: var(--creme); }
.arbre__ligne.actif{ background: var(--or-voile); color: var(--creme); }
.arbre__ligne.depot-dessus{ box-shadow: inset 0 0 0 1.5px var(--or); }
.arbre__fleche{ width: 1.3rem; height: 1.3rem; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: var(--gris); padding: 0; border-radius: 5px; transition: transform .15s ease; }
.arbre__fleche:hover{ background: var(--survol-fort); }
.arbre__fleche[aria-expanded="true"]{ transform: rotate(90deg); }
.arbre__fleche.invisible{ visibility: hidden; }
.arbre__lien{ flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .25rem .1rem; color: inherit; text-decoration: none; font-size: .87rem; }
.arbre__lien span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arbre__icone{ width: 1.2rem; text-align: center; flex: none; font-size: .95rem; }
.arbre__plus{ opacity: 0; border: 0; background: transparent; color: var(--gris); padding: .15rem; border-radius: 5px; display: grid; place-items: center; }
.arbre__ligne:hover .arbre__plus{ opacity: 1; }
.arbre__plus:hover{ background: var(--survol-fort); color: var(--creme); }

.page-note{ position: relative; min-width: 0; padding-bottom: 30vh; }
.page-note__couverture{ height: 190px; background: var(--surface-2); position: relative; }
.couv-aube{ background: linear-gradient(120deg, #2B1B3D, #8A4F6E 45%, #E8A869); }
.couv-sirius{ background: radial-gradient(circle at 70% 40%, rgba(240, 208, 138, .9), rgba(216, 174, 85, .2) 8%, transparent 20%), radial-gradient(1000px 300px at 30% 120%, #0E4A4C, transparent), #00161A; }
.couv-sarcelle{ background: linear-gradient(120deg, #00161A, #0E4A4C 50%, #2E8C83); }
.couv-or{ background: var(--degrade-or); }
.couv-nuit{ background: linear-gradient(160deg, #04070F, #13233F 60%, #2D3E6B); }
.couv-braise{ background: linear-gradient(120deg, #2A0E08, #8E3A1F 50%, #E8964E); }
.couv-brume{ background: linear-gradient(120deg, #C9D5D1, #8FB5AE 50%, #4F7C78); }
.couv-foret{ background: linear-gradient(120deg, #0B1F14, #24553A 55%, #8FBF7A); }
.page-note__couverture .btn{ position: absolute; right: 1rem; bottom: .8rem; opacity: 0; }
.page-note__couverture:hover .btn{ opacity: 1; }
.page-note__corps{ width: min(100% - 3rem, 820px); margin: 0 auto; }
.page-note--large .page-note__corps{ width: min(100% - 3rem, 1280px); }
.page-note__fil{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 1rem 0 0; font-size: .82rem; color: var(--gris); }
.page-note__fil a{ color: var(--gris); text-decoration: none; }
.page-note__fil a:hover{ color: var(--creme); }
.page-note__icone{ display: block; margin-top: 2.2rem; font-size: 3.4rem; line-height: 1; border: 0; background: transparent; padding: .3rem; border-radius: 12px; }
.page-note__couverture + .page-note__corps .page-note__icone{ margin-top: -2.3rem; position: relative; }
.page-note__icone:hover{ background: var(--survol); }
.page-note__outils-titre{ display: flex; gap: .3rem; margin-top: 1.5rem; opacity: 0; transition: opacity .2s ease; }
.page-note__corps:hover .page-note__outils-titre, .page-note__outils-titre:focus-within{ opacity: 1; }
.page-note__titre{ margin: .4rem 0 .6rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; color: var(--creme); outline: none; word-break: break-word; }
.page-note__titre:empty::before{ content: attr(data-vide); color: var(--gris); opacity: .5; }
.page-note__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-bottom: 1.2rem; font-size: .8rem; color: var(--gris); }
.page-note__meta a{ color: var(--eau); text-decoration: none; }
.page-note__etat{ margin-left: auto; font-family: var(--data); font-size: .7rem; }
.proprietes-ligne{ display: grid; gap: .1rem; margin: 0 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); }
.proprietes-ligne > div{ display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 2.1rem; font-size: .88rem; }
.proprietes-ligne label{ color: var(--gris); font-size: .84rem; display: flex; align-items: center; gap: .4rem; }
.proprietes-ligne input, .proprietes-ligne select{ min-height: 2rem; padding: .25rem .5rem; border-color: transparent; background: transparent; }
.proprietes-ligne input:hover, .proprietes-ligne select:hover{ border-color: var(--trait-fort); }

.editeur{ position: relative; font-size: 1.02rem; line-height: 1.7; color: var(--texte); }
.bloc{ position: relative; display: flex; align-items: flex-start; gap: .2rem; margin: 1px 0; border-radius: 6px; }
.bloc.selectionne{ background: var(--or-voile); }
.bloc.cible-haut{ box-shadow: 0 -2px 0 var(--or); }
.bloc.cible-bas{ box-shadow: 0 2px 0 var(--or); }
.bloc__poignee{ position: absolute; left: -3.1rem; top: .2rem; display: flex; gap: 0; opacity: 0; transition: opacity .12s ease; }
.bloc:hover > .bloc__poignee, .bloc:focus-within > .bloc__poignee{ opacity: 1; }
.bloc__poignee button{ width: 1.5rem; height: 1.6rem; border: 0; background: transparent; color: var(--gris); padding: 0; border-radius: 5px; display: grid; place-items: center; }
.bloc__poignee button:hover{ background: var(--survol-fort); color: var(--creme); }
.bloc__poignee .glisser{ cursor: grab; }
.bloc__marque{ flex: none; min-width: 1.5rem; padding-top: .1rem; color: var(--or); text-align: center; user-select: none; }
.bloc__contenu{ flex: 1; min-width: 0; padding: .12rem .15rem; outline: none; white-space: pre-wrap; word-break: break-word; }
.bloc__contenu:empty::before{ content: attr(data-vide); color: var(--gris); opacity: 0; pointer-events: none; }
.bloc__contenu:focus:empty::before, .editeur--vide .bloc:first-child .bloc__contenu:empty::before{ opacity: .55; }
.bloc__contenu a{ color: var(--eau); }
.bloc__contenu code{ padding: .1rem .35rem; border-radius: 5px; background: var(--surface-3); color: var(--corail); font-size: .86em; }
.bloc__contenu mark{ background: color-mix(in srgb, var(--or) 30%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }
.bloc--titre1 .bloc__contenu{ font-family: var(--display); font-weight: 700; font-size: 1.85rem; line-height: 1.25; color: var(--creme); margin-top: 1.4rem; letter-spacing: -.015em; }
.bloc--titre2 .bloc__contenu{ font-family: var(--display); font-weight: 600; font-size: 1.42rem; line-height: 1.3; color: var(--creme); margin-top: 1.1rem; }
.bloc--titre3 .bloc__contenu{ font-weight: 600; font-size: 1.15rem; color: var(--creme); margin-top: .7rem; }
.bloc--citation .bloc__contenu{ border-left: 3px solid var(--or); padding-left: .9rem; font-style: italic; color: var(--texte-2); }
.bloc--tache.coche-faite .bloc__contenu{ text-decoration: line-through; color: var(--gris); }
.bloc--tache .bloc__marque{ padding-top: .32rem; }
.bloc--encadre{ padding: .8rem .9rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--trait); margin: .35rem 0; }
.bloc--encadre .bloc__marque{ font-size: 1.15rem; cursor: pointer; }
.bloc--encadre.c-or{ background: color-mix(in srgb, var(--or) 10%, var(--surface)); border-color: color-mix(in srgb, var(--or) 25%, transparent); }
.bloc--encadre.c-sarcelle{ background: color-mix(in srgb, var(--eau) 9%, var(--surface)); border-color: color-mix(in srgb, var(--eau) 22%, transparent); }
.bloc--encadre.c-vert{ background: color-mix(in srgb, var(--vert) 9%, var(--surface)); }
.bloc--encadre.c-rouge{ background: color-mix(in srgb, var(--rouge) 9%, var(--surface)); }
.bloc--encadre.c-bleu{ background: color-mix(in srgb, var(--bleu) 9%, var(--surface)); }
.bloc--encadre.c-violet{ background: color-mix(in srgb, var(--violet) 9%, var(--surface)); }
.bloc--encadre.c-gris{ background: var(--surface-2); }
.bloc--code .bloc__contenu{ font-family: var(--data); font-size: .86rem; line-height: 1.6; padding: .9rem 1rem; border-radius: 10px; background: var(--champ); border: 1px solid var(--trait); color: var(--texte); white-space: pre; overflow-x: auto; tab-size: 2; }
.bloc--code .bloc__langue{ position: absolute; right: .5rem; top: .4rem; font-family: var(--data); font-size: .66rem; color: var(--gris); border: 0; background: transparent; }
.bloc--separateur{ padding: .7rem 0; }
.bloc--separateur hr{ flex: 1; margin: 0; border-top-color: var(--trait-fort); }
.bloc--bascule .bloc__marque button{ border: 0; background: transparent; color: var(--texte-2); padding: 0; transition: transform .15s ease; display: grid; place-items: center; width: 1.4rem; height: 1.6rem; }
.bloc--bascule.ouvert .bloc__marque button{ transform: rotate(90deg); }
.bloc.replie{ display: none; }
.bloc--image figure{ margin: .4rem 0; flex: 1; min-width: 0; }
.bloc--image img{ border-radius: 10px; max-width: 100%; }
.bloc--image figcaption{ outline: none; font-size: .84rem; color: var(--gris); padding: .3rem .1rem; }
.bloc--image figcaption:empty::before{ content: "Ajouter une légende"; opacity: .4; }
.bloc--lien_page a, .bloc--signet a, .bloc--fichier a{ display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 8px; color: var(--creme); text-decoration: none; }
.bloc--lien_page a:hover, .bloc--signet a:hover, .bloc--fichier a:hover{ background: var(--survol); }
.bloc--lien_page a{ text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 4px; }
.bloc--signet a{ flex: 1; padding: .7rem .9rem; border: 1px solid var(--trait); border-radius: 10px; font-size: .88rem; overflow: hidden; }
.bloc--tableau .tableau-note{ flex: 1; overflow-x: auto; }
.tableau-note table{ border-collapse: collapse; min-width: 100%; font-size: .9rem; }
.tableau-note td{ border: 1px solid var(--trait-fort); padding: .4rem .55rem; min-width: 7rem; vertical-align: top; outline: none; }
.tableau-note tr.entete td{ background: var(--surface-2); font-weight: 600; color: var(--creme); }
.tableau-note__outils{ display: flex; gap: .3rem; margin-top: .3rem; opacity: 0; }
.bloc--tableau:hover .tableau-note__outils{ opacity: 1; }
.c-texte-gris{ color: var(--gris); } .c-texte-brun{ color: var(--brun); } .c-texte-orange{ color: var(--orange); } .c-texte-or{ color: var(--or-clair); }
.c-texte-vert{ color: var(--vert); } .c-texte-sarcelle{ color: var(--eau); } .c-texte-bleu{ color: var(--bleu); } .c-texte-violet{ color: var(--violet); }
.c-texte-rose{ color: var(--rose); } .c-texte-rouge{ color: var(--rouge); }
.editeur__ajout{ display: block; width: 100%; padding: .8rem 0 0; border: 0; background: transparent; color: var(--gris); text-align: left; font-size: .9rem; opacity: .6; }
.editeur__ajout:hover{ opacity: 1; color: var(--creme); }
.barre-format{ position: fixed; z-index: 150; display: flex; gap: 1px; padding: .25rem; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--trait-fort); box-shadow: var(--ombre); }
.barre-format button{ min-width: 2rem; height: 2rem; padding: 0 .45rem; border: 0; background: transparent; color: var(--texte); border-radius: 7px; font-size: .88rem; display: grid; place-items: center; }
.barre-format button:hover, .barre-format button.actif{ background: var(--survol-fort); color: var(--or-clair); }
.menu-bloc{ width: 300px; max-height: 360px; overflow-y: auto; }
.menu-bloc button{ align-items: center; }
.menu-bloc__icone{ width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface); font-size: .95rem; color: var(--texte-2); font-family: var(--data); }
.menu-bloc small{ display: block; margin: 0; color: var(--gris); font-size: .74rem; }
.sous-pages{ display: grid; gap: .2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.retroliens{ margin-top: 2rem; font-size: .84rem; color: var(--gris); }
.retroliens a{ color: var(--eau); text-decoration: none; margin-right: .8rem; }
.emoji-grille{ display: grid; grid-template-columns: repeat(8, 1fr); gap: .15rem; }
.emoji-grille button{ font-size: 1.3rem; padding: .25rem; border: 0; background: transparent; border-radius: 8px; }
.emoji-grille button:hover{ background: var(--survol-fort); }
.couvertures{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.couvertures button{ height: 52px; border-radius: 10px; border: 2px solid transparent; }
.couvertures button:hover, .couvertures button.actif{ border-color: var(--or); }

/* Bases (tableau, kanban, liste) */
.base{ margin-top: .4rem; }
.base__vues{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; border-bottom: 1px solid var(--trait); margin-bottom: .8rem; }
.base__vues button{ border: 0; background: transparent; color: var(--gris); padding: .55rem .7rem; font-size: .86rem; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: .35rem; align-items: center; }
.base__vues button[aria-selected="true"]{ color: var(--creme); border-bottom-color: var(--or); }
.base__vues .pousse{ margin-left: auto; }
.base-tableau{ overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; }
.base-tableau table{ border-collapse: collapse; width: 100%; font-size: .88rem; }
.base-tableau th{ padding: .5rem .6rem; text-align: left; font-weight: 500; font-size: .8rem; color: var(--gris); background: var(--surface-2); border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); white-space: nowrap; }
.base-tableau th button{ border: 0; background: transparent; color: inherit; padding: 0; display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; }
.base-tableau td{ border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); padding: 0; min-width: 9rem; height: 2.3rem; vertical-align: middle; }
.base-tableau td:first-child{ min-width: 16rem; }
.base-tableau td > input, .base-tableau td > select{ width: 100%; height: 2.3rem; min-height: 0; border: 0; border-radius: 0; background: transparent; padding: .3rem .6rem; font-size: .88rem; }
.base-tableau td > input:focus, .base-tableau td > select:focus{ box-shadow: inset 0 0 0 2px var(--or); }
.base-tableau .titre-ligne{ display: flex; align-items: center; gap: .3rem; padding-right: .3rem; }
.base-tableau .titre-ligne input{ border: 0; background: transparent; min-height: 2.3rem; font-weight: 500; color: var(--creme); }
.base-tableau .titre-ligne a{ opacity: 0; flex: none; }
.base-tableau tr:hover .titre-ligne a{ opacity: 1; }
.base-tableau .case-cell{ text-align: center; }
.base-tableau .multi-cell{ padding: .3rem .5rem; cursor: pointer; }
.base__ajout{ display: flex; align-items: center; gap: .4rem; width: 100%; padding: .55rem .7rem; border: 0; background: transparent; color: var(--gris); font-size: .86rem; text-align: left; }
.base__ajout:hover{ background: var(--survol); color: var(--creme); }

/* ------------------------------------------------------------------- QR */

.qr-atelier{ display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.2rem; align-items: start; }
.qr-apercu{ position: sticky; top: calc(var(--haut) + 1rem); }
.qr-scene{ position: relative; display: grid; place-items: center; padding: 1.4rem; border-radius: 14px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 18px 18px; border: 1px solid var(--trait); min-height: 300px; }
.qr-scene img{ width: 100%; max-width: 300px; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .6); }
.qr-meta{ display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .8rem; font-family: var(--data); font-size: .7rem; color: var(--gris); }
.qr-types{ display: flex; flex-wrap: wrap; gap: .35rem; }
.qr-types button{ border: 1px solid var(--trait-fort); background: var(--surface-2); color: var(--texte-2); padding: .4rem .8rem; border-radius: 999px; font-size: .84rem; }
.qr-types button[aria-pressed="true"]{ background: var(--or-voile); border-color: var(--or); color: var(--or-clair); }
.qr-carte-liste{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.qr-vignette{ display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .85rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); text-decoration: none; color: inherit; }
.qr-vignette:hover{ border-color: var(--trait-or); }
.qr-vignette canvas, .qr-vignette img{ width: 64px; height: 64px; border-radius: 6px; background: #fff; }
.couleur-saisie{ display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .3rem; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--champ); }
.couleur-saisie input[type="color"]{ border: 0; width: 2rem; height: 1.8rem; padding: 0; background: transparent; }
.couleur-saisie code{ font-size: .8rem; color: var(--texte-2); text-transform: uppercase; }
.carte-visite-apercus{ display: grid; gap: 1rem; }
.carte-visite-apercus.portrait{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc{ position: relative; width: 100%; aspect-ratio: 85 / 55; container-type: inline-size; overflow: hidden; background: var(--c-bg); color: var(--c-text); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .3);
  --c-muted: color-mix(in srgb, var(--c-text) 66%, var(--c-bg)); font-family: var(--c-body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bc.portrait{ aspect-ratio: 55 / 85; }
.bc-face{ --u: 1cqi; position: absolute; inset: 0; display: grid; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6.5); }
.bc.portrait .bc-face{ --u: calc(100cqi / 55); }
.bc-face.recto{ grid-template-columns: minmax(0, 1fr) auto; }
.bc-face.recto.qr-none{ grid-template-columns: minmax(0, 1fr); }
.bc-face.recto.qr-left .bc-qr{ order: -1; }
.bc-face.recto.qr-left{ grid-template-columns: auto minmax(0, 1fr); }
.bc.portrait .bc-face.recto{ grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.bc.portrait .bc-face.recto.qr-left .bc-qr{ order: 0; justify-self: start; }
.bc.portrait .bc-face.recto.qr-right .bc-qr{ justify-self: end; }
.bc-info{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bc-logo{ display: block; height: calc(var(--u) * 9); max-width: calc(var(--u) * 32); object-fit: contain; object-position: left center; margin-bottom: calc(var(--u) * 3.5); }
.bc-name{ font-family: var(--c-display); font-weight: var(--c-weight); font-size: calc(var(--u) * 6.6); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bc-role{ font-size: calc(var(--u) * 3.4); line-height: 1.3; color: var(--c-muted); margin-top: calc(var(--u) * 1.2); overflow-wrap: anywhere; }
.bc-rule{ flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * .7); background: var(--c-accent); margin: calc(var(--u) * 3) 0; }
.bc-lines{ list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: calc(var(--u) * .6); font-size: calc(var(--u) * 3.05); line-height: 1.3; }
.bc-lines li{ overflow-wrap: anywhere; }
.bc-qr{ display: block; width: calc(var(--u) * 27); height: calc(var(--u) * 27); align-self: end; border-radius: calc(var(--u) * .8); }
.bc-face.verso{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 3); }
.bc-logo-big{ display: block; max-width: calc(var(--u) * 42); max-height: calc(var(--u) * 17); object-fit: contain; }
.bc-brand{ font-family: var(--c-display); font-weight: var(--c-weight); font-size: calc(var(--u) * 7.5); line-height: 1.05; overflow-wrap: anywhere; }
.bc-tag{ font-size: calc(var(--u) * 3.6); line-height: 1.35; max-width: calc(var(--u) * 64); color: var(--c-muted); overflow-wrap: anywhere; }
.verso .bc-qr{ width: calc(var(--u) * 22); height: calc(var(--u) * 22); align-self: center; }
.bc-site{ font-size: calc(var(--u) * 2.9); letter-spacing: .06em; color: var(--c-muted); }
#impression{ display: none; }
.pr-page{ position: relative; width: 210mm; height: 297mm; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
.pr-page:last-child{ break-after: auto; page-break-after: auto; }
.pr-card{ position: absolute; }
.pr-card .bc{ width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; border-radius: 0; }
.pr-mark{ position: absolute; background: #000; }
.sparkline{ width: 100%; height: 70px; }
.sparkline path{ fill: none; stroke: var(--or); stroke-width: 1.6; }
.sparkline .aire{ fill: var(--or-voile); stroke: none; }

/* ----------------------------------------------------------- publications */

.reseau{ display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 6px; font-family: var(--data); font-size: .66rem; font-weight: 600; color: #fff; flex: none; }
.reseau--petit{ width: 1.15rem; height: 1.15rem; font-size: .54rem; border-radius: 4px; }
.r-linkedin{ background: #0A66C2; }
.r-facebook{ background: #1877F2; }
.r-instagram{ background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.r-x{ background: #000; border: 1px solid rgba(255, 255, 255, .25); }
.r-threads{ background: #101010; border: 1px solid rgba(255, 255, 255, .25); }
.r-youtube{ background: #FF0000; }
.composeur{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 1.2rem; align-items: start; }
.composeur__texte textarea{ min-height: 300px; font-size: .98rem; line-height: 1.6; font-family: var(--corps); }
.composeur__outils{ display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border: 1px solid var(--trait-fort); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface-2); }
.composeur__outils + textarea{ border-top-left-radius: 0; border-top-right-radius: 0; }
.composeur__outils button{ min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 0; border-radius: 7px; background: transparent; color: var(--texte); font-size: .9rem; }
.composeur__outils button:hover{ background: var(--survol-fort); color: var(--or-clair); }
.composeur__outils .sep{ width: 1px; background: var(--trait-fort); margin: .25rem .2rem; }
.compteurs{ display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.compteur{ display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--trait); font-family: var(--data); font-size: .7rem; color: var(--texte-2); }
.compteur.depasse{ color: var(--rouge); border-color: var(--rouge); }
.compteur.proche{ color: var(--orange); border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.cibles{ display: flex; flex-wrap: wrap; gap: .45rem; }
.cible{ position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem .35rem .4rem; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--surface-2); cursor: pointer; font-size: .84rem; user-select: none; }
.cible input{ position: absolute; opacity: 0; pointer-events: none; }
.cible:has(input:checked){ border-color: var(--or); background: var(--or-voile); color: var(--creme); }
.cible:has(input:focus-visible){ outline: 2px solid var(--or-clair); outline-offset: 2px; }
.cible small{ color: var(--gris); font-size: .7rem; }
.medias{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.media{ position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); background: var(--surface-2); }
.media img, .media video{ width: 100%; height: 100%; object-fit: cover; }
.media__actions{ position: absolute; inset: auto .25rem .25rem auto; display: flex; gap: .2rem; }
.media__actions button{ width: 1.6rem; height: 1.6rem; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; display: grid; place-items: center; padding: 0; }
.media__type{ position: absolute; left: .3rem; top: .3rem; padding: .05rem .35rem; border-radius: 5px; background: rgba(0, 0, 0, .65); color: #fff; font-family: var(--data); font-size: .6rem; }
.apercu-reseau{ border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); overflow: hidden; }
.apercu-reseau__tete{ display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; }
.apercu-reseau__tete strong{ color: var(--creme); font-size: .88rem; display: block; line-height: 1.2; }
.apercu-reseau__tete small{ color: var(--gris); font-size: .74rem; }
.apercu-reseau__texte{ padding: 0 .9rem .8rem; font-size: .88rem; white-space: pre-wrap; word-break: break-word; color: var(--texte); max-height: 340px; overflow: hidden; position: relative; }
.apercu-reseau__texte.tronque::after{ content: "… voir plus"; position: absolute; right: .9rem; bottom: .8rem; padding-left: 1.5rem; background: linear-gradient(90deg, transparent, var(--surface) 30%); color: var(--gris); }
.apercu-reseau__media{ display: grid; gap: 2px; background: var(--surface-3); }
.apercu-reseau__media img, .apercu-reseau__media video{ width: 100%; max-height: 380px; object-fit: cover; }
.apercu-reseau__media--2{ grid-template-columns: 1fr 1fr; }
.apercu-reseau__media--carre img{ aspect-ratio: 1; }
.apercu-reseau__lien{ margin: 0 .9rem .9rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--trait); font-size: .8rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publication-carte{ display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); text-decoration: none; color: inherit; }
.publication-carte:hover{ border-color: var(--trait-or); }
.publication-carte__texte{ font-size: .86rem; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.resultat-reseau{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--trait); }
.resultat-reseau:first-child{ border-top: 0; }
.fonderie{ display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.fonderie__source{ position: sticky; top: calc(var(--haut) + 1rem); display: grid; gap: 1rem; }
.fonderie__source textarea{ min-height: 170px; font-family: var(--glyphe, inherit); font-size: 1rem; }
.fonderie__styles{ display: grid; gap: .5rem; }
.style-ligne{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; padding: .7rem .9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--trait); }
.style-ligne__nom{ grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--gris); }
.style-ligne__sortie{ font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Math", "DejaVu Sans", "Arial Unicode MS", system-ui, sans-serif; font-size: 1.12rem; line-height: 1.6; color: var(--creme); word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; cursor: pointer; min-height: 1.6em; }
.style-ligne__sortie:hover{ color: var(--or-clair); }
.etoile{ border: 0; background: none; padding: 0 .1rem; color: var(--trait-fort); font-size: .9rem; line-height: 1; }
.etoile[aria-pressed="true"]{ color: var(--or); }
.zalgo{ border-color: color-mix(in srgb, var(--rose) 45%, transparent) !important; }
.zalgo__sortie{ font-size: 1.15rem; line-height: 2.6; padding: .9rem; border-radius: 10px; background: var(--champ); border: 1px solid var(--trait); word-break: break-word; white-space: pre-wrap; max-height: 300px; overflow: auto; cursor: pointer; }
.puces-choix{ display: flex; flex-wrap: wrap; gap: .3rem; }
.puces-choix label{ position: relative; }
.puces-choix input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puces-choix span{ display: block; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--trait-fort); font-size: .8rem; color: var(--texte-2); cursor: pointer; }
.puces-choix input:checked + span{ background: var(--or-voile); border-color: var(--or); color: var(--or-clair); }
.puces-choix input:focus-visible + span{ outline: 2px solid var(--or-clair); outline-offset: 2px; }

/* ----------------------------------------------------------------- journal */

.journal-ligne td{ vertical-align: top; }
.journal-detail{ min-width: 18rem; max-width: 34rem; overflow-wrap: anywhere; color: var(--texte-2); }
.f-connexions{ color: var(--eau); border-color: color-mix(in srgb, var(--eau) 35%, transparent); }
.f-securite{ color: var(--corail); border-color: color-mix(in srgb, var(--corail) 40%, transparent); }
.f-crm, .f-activite{ color: var(--or); border-color: color-mix(in srgb, var(--or) 40%, transparent); }
.f-ventes, .f-emails{ color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, transparent); }
.f-espace, .f-formation{ color: var(--bleu); border-color: color-mix(in srgb, var(--bleu) 40%, transparent); }
.f-notes, .f-qr, .f-social{ color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }

/* ---------------------------------------------------------------- réglages */

.reglages{ display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.reglages__nav{ position: sticky; top: calc(var(--haut) + 1rem); display: grid; gap: .1rem; }
.reglages__nav a{ display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--texte-2); text-decoration: none; font-size: .9rem; }
.reglages__nav a:hover{ background: var(--survol); color: var(--creme); }
.reglages__nav a[aria-current="page"]{ background: var(--or-voile); color: var(--creme); }
.diagnostic{ display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.diagnostic li{ display: flex; align-items: center; gap: .5rem; }
.diagnostic .ok{ color: var(--vert); }
.diagnostic .ko{ color: var(--rouge); }
.lien-copie{ display: flex; gap: .4rem; }
.lien-copie input{ font-family: var(--data); font-size: .8rem; color: var(--or-clair); border-style: dashed; }
.qr-totp{ display: grid; place-items: center; padding: 1rem; background: #fff; border-radius: 12px; width: 220px; margin: 0 auto; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 1180px){
  .grille--fiche{ grid-template-columns: minmax(0, 1fr); }
  .qr-atelier, .composeur{ grid-template-columns: minmax(0, 1fr); }
  .qr-apercu{ position: static; }
}
@media (max-width: 980px){
  .app{ grid-template-columns: minmax(0, 1fr); }
  .barre{ position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--ombre); }
  .app.barre-ouverte .barre{ transform: none; }
  .app.barre-ouverte::after{ content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  .haut .haut__menu{ display: inline-flex; }
  .grille--3, .grille--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--fiche-gauche{ grid-template-columns: minmax(0, 1fr); }
  .notes{ grid-template-columns: minmax(0, 1fr); }
  .notes__barre{ display: none; }
  .notes.arbre-ouvert .notes__barre{ display: block; position: fixed; z-index: 45; left: 0; top: var(--haut); width: min(300px, 88vw); background: var(--surface); box-shadow: var(--ombre); }
  .reglages{ grid-template-columns: minmax(0, 1fr); }
  .reglages__nav{ position: static; display: flex; overflow-x: auto; scrollbar-width: thin; padding-bottom: .3rem; }
  .reglages__nav a{ flex: none; white-space: nowrap; }
  .fonderie{ grid-template-columns: minmax(0, 1fr); }
  .fonderie__source{ position: static; }
  .acces{ grid-template-columns: minmax(0, 1fr); }
  .acces__visuel{ min-height: 230px; padding: 1.6rem; }
  .acces__accroche h1{ font-size: 1.8rem; }
  .acces__accroche p, .acces__modules{ display: none; }
  .bloc__poignee{ left: -2.3rem; }
}
@media (max-width: 640px){
  .form > .champ--demi, .form > .champ--tiers, .form > .champ--quart, .form > .champ--deux-tiers{ grid-column: span 12; }
  .grille--2, .grille--3{ grid-template-columns: minmax(0, 1fr); }
  .grille--4{ gap: .6rem; }
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  /* Lignes de devis et factures en cartes */
  .lignes-doc, .lignes-doc tbody{ display: block; }
  .lignes-doc thead{ display: none; }
  .lignes-doc tr{ display: grid; grid-template-columns: 1.2rem repeat(6, minmax(0, 1fr)) 2rem; gap: .4rem .45rem; padding: .7rem 0; border-bottom: 1px solid var(--trait);
    grid-template-areas: "p des des des des des des x" "p qte qte unite unite pu pu x" "p tva tva remise remise tot tot x"; }
  .lignes-doc tr.section, .lignes-doc tr.texte{ grid-template-areas: "p des des des des des des x"; }
  .lignes-doc td{ display: block; padding: 0; border: 0; min-width: 0; }
  .lignes-doc tr.section td{ background: none; }
  .lignes-doc tr.section{ background: var(--surface-2); border-radius: 8px; padding: .5rem .3rem; }
  .lignes-doc .poignee{ grid-area: p; padding-top: .5rem; }
  .lignes-doc .l-des{ grid-area: des; }
  .lignes-doc .l-qte{ grid-area: qte; width: auto; }
  .lignes-doc .l-unite{ grid-area: unite; width: auto; }
  .lignes-doc .l-pu{ grid-area: pu; width: auto; }
  .lignes-doc .l-tva{ grid-area: tva; width: auto; }
  .lignes-doc .l-remise{ grid-area: remise; width: auto; }
  .lignes-doc .total-ligne{ grid-area: tot; padding-top: 0; align-self: end; }
  .lignes-doc .l-suppr{ grid-area: x; }
  .lignes-doc .l-vide{ display: none; }
  .lignes-doc td[data-libelle]::before{ content: attr(data-libelle); display: block; margin-bottom: .2rem; font-family: var(--data); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); text-align: left; }
  .lignes-doc .total-ligne::before{ text-align: right; }
  .kpi{ padding: .8rem .85rem; }
  .vue{ padding: 1rem; }
  .tete{ margin-bottom: 1rem; }
  .kpi__valeur{ font-size: 1.3rem; }
  .calendrier__case{ min-height: 74px; }
  .ev span{ display: none; }
  .proprietes > div, .proprietes-ligne > div{ grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .entonnoir__ligne{ grid-template-columns: 6.5rem minmax(0, 1fr) 5rem; }
  .page-note__corps{ width: calc(100% - 2.6rem); margin-left: 2.2rem; }
  .message{ max-width: 94%; }
  .haut .btn span.libelle{ display: none; }
}
@media (max-width: 340px){
  .grille--4, .kpis{ grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- impression */

@media print{
  @page{ size: A4; margin: 0; }
  body{ background: #fff !important; }
  body.impression-qr .app, body.impression-cartes .app, body.impression-qr dialog, body.impression-cartes dialog{ display: none !important; }
  body.impression-qr #impression, body.impression-cartes #impression{ display: block; }
  body.impression-qr #impression img{ position: absolute; left: 15mm; top: 15mm; width: 60mm; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- compléments */

.grille--tableau{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px){ .grille--tableau{ grid-template-columns: minmax(0, 1fr); } }
.tableau a{ color: var(--creme); text-decoration: none; }
.tableau a:hover{ color: var(--or-clair); text-decoration: underline; }
.tableau .principal-cell a{ font-weight: 500; }
.tableau td{ line-height: 1.4; }
.ligne a, .proprietes a{ text-decoration: none; }
.fiche-tete__meta > *{ display: inline-flex; align-items: center; gap: .3rem; }
.action-vue-notes{ display: none !important; }
@media (max-width: 980px){ .action-vue-notes{ display: inline-flex !important; } }
@media print{
  body:not(.impression-qr):not(.impression-cartes) .barre, body:not(.impression-qr):not(.impression-cartes) .haut,
  .notes__barre, .bloc__poignee, .editeur__ajout, .page-note__outils-titre, .page-note__meta .btn, .page-note__couverture .btn, .toasts{ display: none !important; }
  body:not(.impression-qr):not(.impression-cartes) .app{ display: block; }
  body:not(.impression-qr):not(.impression-cartes){ background: #fff !important; color: #111; }
  .notes{ display: block; }
  .page-note__titre, .bloc--titre1 .bloc__contenu, .bloc--titre2 .bloc__contenu, .bloc--titre3 .bloc__contenu{ color: #111 !important; }
  .editeur, .bloc__contenu{ color: #222 !important; }
  .page-note__corps{ width: auto; margin: 0 12mm; }
}