/* Lease Lane — feuille de style partagée des portails.
   Générée depuis « Lease Lane Design System ». Les valeurs viennent
   du logo et des jetons officiels : ne pas les modifier à la main.
*/

/* Lease Lane — webfaces. Bebas Neue (display) + IBM Plex Sans (UI/body) + IBM Plex Mono (data).
   Files fetched from Google Fonts (SIL Open Font License 1.1) and vendored into assets/fonts/. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-400-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:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-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}

/* Poppins — substitution documentée de Gilroy (police commerciale du thème source).
   Même squelette géométrique, même « a » à un étage, même « y » à jambe droite. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300-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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300-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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-800-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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-800-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}

/* Playfair Display italique — accent de titre en serif, repris du thème de référence
   (mot-clé en serif italique suivi du reste en géométrique grasse). */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/playfair-display-italic-400-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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/playfair-display-italic-400-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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/playfair-display-italic-500-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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/playfair-display-italic-500-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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/playfair-display-italic-600-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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/playfair-display-italic-600-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}

/* Lease Lane — couleurs.
   Toute la palette est dérivée du logo : le cadre marine, le dégradé bleu des
   chevrons et du mot-clé « LANE », et les gris froids du cadre.
   Échantillonnée depuis assets/logo/*.svg et la présentation commerciale. */
:root{
  /* ---- Marine (fond de marque) — cadre du logo, fonds de la présentation ---- */
  --marine-950:#071A2E;
  --marine-900:#0A2038;
  --marine-800:#0D233B;
  --marine-700:#122744;
  --marine-600:#172C49;
  --marine-500:#1C3053;
  --marine-400:#24405F;
  --marine-300:#2E5788;
  --marine-200:#35629B;

  /* ---- Bleu Lease Lane — dégradé des chevrons et du mot « LANE » ---- */
  --bleu-800:#1C3451;
  --bleu-700:#2E5788;
  --bleu-600:#3767A2;
  --bleu-500:#4581CB;
  --bleu-400:#518ACF;
  --bleu-300:#6A9AD5;
  --bleu-200:#91B5E0;
  --bleu-100:#B5CDEA;
  --bleu-050:#C8DAF0;
  --bleu-025:#ECF2F9;

  /* ---- Gris froids — cadre et vitrages du logo ---- */
  --gris-000:#FFFFFF;
  --gris-025:#F7F9FB;
  --gris-050:#EEF1F5;
  --gris-100:#E1E6EC;
  --gris-200:#D1D6DB;
  --gris-300:#C8CDD4;
  --gris-400:#A6B1BE;
  --gris-500:#78838F;
  --gris-600:#58697F;
  --gris-700:#3E4A59;
  --gris-800:#26303C;
  --gris-900:#151C25;

  /* ---- Signaux — teintes sourdes, calées sur la valeur du marine ---- */
  --succes-600:#12694F;
  --succes-500:#17795E;
  --succes-100:#DCEFE8;
  --alerte-600:#9C6212;
  --alerte-500:#B77416;
  --alerte-100:#FAEEDA;
  --urgence-600:#9B2E28;
  --urgence-500:#B4362F;
  --urgence-100:#F8E4E2;
  --info-500:var(--bleu-500);
  --info-100:var(--bleu-025);

  /* ---- Dégradés de marque ---- */
  --degrade-chevron:linear-gradient(135deg,#5C86B9 0%,#6A9AD5 25%,#91B5E0 52%,#6593CC 80%,#5982B3 100%); /* @kind color */
  --degrade-mot:linear-gradient(180deg,#FFFFFF 0%,#C8DAF0 45%,#6A9AD5 100%); /* @kind color */
  --degrade-marine:linear-gradient(160deg,#0A2038 0%,#122744 55%,#1C3053 100%); /* @kind color */
  --degrade-bandeau:linear-gradient(90deg,#0A2038 0%,#12294A 50%,#1C3053 100%); /* @kind color */
  --lueur-bleue:radial-gradient(60% 70% at 50% 60%,rgba(145,181,224,.38) 0%,rgba(10,32,56,0) 70%); /* @kind color */

  /* ---- Alias sémantiques ---- */
  --surface-page:var(--gris-000);
  --surface-douce:var(--gris-025);
  --surface-carte:var(--gris-000);
  --surface-enfoncee:var(--gris-050);
  --surface-marine:var(--marine-900);
  --surface-marine-haute:var(--marine-600);
  --surface-survol:var(--bleu-025);

  --texte-titre:var(--marine-900);
  --texte-corps:var(--gris-700);
  --texte-discret:var(--gris-500);
  --texte-inverse:var(--gris-000);
  --texte-inverse-discret:var(--bleu-100);
  --texte-accent:var(--bleu-500);
  --texte-lien:var(--bleu-600);
  --texte-lien-survol:var(--marine-900);

  --bordure-fine:var(--gris-100);
  --bordure:var(--gris-200);
  --bordure-forte:var(--gris-400);
  --bordure-marine:rgba(145,181,224,.22);
  --bordure-focus:var(--bleu-500);

  --action-primaire:var(--bleu-500);
  --action-primaire-survol:var(--bleu-600);
  --action-primaire-active:var(--bleu-700);
  --action-marine:var(--marine-900);
  --action-marine-survol:var(--marine-600);

  /* Trame « plan d'architecte » : motif de fond des zones marine */
  --grille-trait:rgba(145,181,224,.10); /* @kind color */
  --grille-pas:64px; /* @kind spacing */
}

/* Lease Lane — rayons. Le thème de référence est très peu arrondi : médias à 10 px,
   boutons et pastilles en pilule complète, tout le reste net. */
:root{
  --rayon-0:0px;
  --rayon-1:2px;
  --rayon-2:6px;
  --rayon-3:10px;
  --rayon-4:12px;
  --rayon-5:16px;
  --rayon-pilule:999px;
  --rayon-carte:10px;
  --rayon-champ:8px;
  --rayon-bouton:999px;
}

/* Lease Lane — ombres et lueurs.
   Sur fond clair : ombres froides, très diffuses, jamais noires.
   Sur fond marine : pas d'ombre — on utilise une lueur bleue et un filet clair. */
:root{
  --ombre-0:none; /* @kind shadow */
  --ombre-1:0 1px 2px rgba(10,32,56,.06),0 1px 1px rgba(10,32,56,.04);
  --ombre-2:0 2px 6px rgba(10,32,56,.07),0 1px 2px rgba(10,32,56,.05);
  --ombre-3:0 8px 24px rgba(10,32,56,.09),0 2px 6px rgba(10,32,56,.05);
  --ombre-4:0 18px 48px rgba(10,32,56,.13),0 4px 12px rgba(10,32,56,.06);
  --ombre-5:0 32px 80px rgba(10,32,56,.18);
  --ombre-interne:inset 0 1px 2px rgba(10,32,56,.06); /* @kind shadow */

  --lueur-focus:0 0 0 3px rgba(69,129,203,.28);
  --lueur-marine:0 0 48px rgba(145,181,224,.28);
  --filet-marine:inset 0 1px 0 rgba(200,218,240,.14); /* @kind shadow */
}

/* Lease Lane — bases d'élément. Volontairement minimal. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--police-corps);font-size:var(--texte-m);line-height:var(--interligne-corps);color:var(--texte-corps);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--police-titre);font-weight:700;line-height:var(--interligne-titre);letter-spacing:var(--interlettre-titre);color:var(--texte-titre);margin:0}
h1{font-size:var(--titre-xl)}h2{font-size:var(--titre-l)}h3{font-size:var(--titre-m)}h4{font-size:var(--titre-s)}h5{font-size:var(--titre-xs)}
p{margin:0 0 var(--esp-4);text-wrap:pretty}
a{color:var(--texte-lien);text-decoration:none;transition:color var(--duree-2) var(--courbe-sortie)}
a:hover{color:var(--texte-lien-survol);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bordure-focus);outline-offset:2px}
small{font-size:var(--texte-xs)}
strong{font-weight:var(--graisse-demi);color:var(--texte-titre)}
code,kbd{font-family:var(--police-mono);font-size:.92em}
hr{border:0;border-top:1px solid var(--bordure-fine);margin:var(--esp-7) 0}
::selection{background:var(--bleu-100);color:var(--marine-900)}

/* Sur-titre : barre oblique + capitales espacées (signature du thème de référence). */
.ll-surtitre{font-family:var(--police-corps);font-size:var(--surtitre-taille);font-weight:var(--surtitre-graisse);letter-spacing:var(--interlettre-surtitre);text-transform:uppercase;color:var(--texte-discret)}
.ll-surtitre::before{content:"/ ";color:var(--bleu-500)}
/* Titre d'affiche — présentation commerciale seulement. */
.ll-affiche{font-family:var(--police-affiche);text-transform:uppercase;line-height:.92;letter-spacing:.005em;font-weight:400}
.ll-marine{background:var(--degrade-marine);color:var(--texte-inverse)}
.ll-grille{background-image:linear-gradient(var(--grille-trait) 1px,transparent 1px),linear-gradient(90deg,var(--grille-trait) 1px,transparent 1px);background-size:var(--grille-pas) var(--grille-pas)}
/* Filets verticaux de colonne, posés sur une section pleine largeur. */
.ll-filets{position:relative}
.ll-filets::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(90deg,var(--web-filet) 0 1px,transparent 1px calc(100% / var(--web-filet-colonnes)))}
.ll-filets>*{position:relative;z-index:1}
.ll-mono{font-family:var(--police-mono);font-variant-numeric:tabular-nums}

/* Lease Lane — espacements. Pas de 4 px, doublement à partir de 16. */
:root{
  --esp-0:0px; --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px;
  --esp-5:20px; --esp-6:24px; --esp-7:32px; --esp-8:40px; --esp-9:48px;
  --esp-10:64px; --esp-11:80px; --esp-12:96px; --esp-13:128px;

  --gouttiere:24px;
  --marge-section:96px;
  --largeur-max:1240px;
  --largeur-texte:68ch; /* @kind spacing */
  --hauteur-entete:72px;
  --largeur-rail:264px;
  --cible-tactile:44px;
}

/* Lease Lane — mouvement. Court, linéaire-sortant, jamais de rebond. */
:root{
  --duree-1:120ms; /* @kind other */
  --duree-2:180ms; /* @kind other */
  --duree-3:260ms; /* @kind other */
  --duree-4:420ms; /* @kind other */
  --courbe-sortie:cubic-bezier(.2,.8,.3,1); /* @kind other */
  --courbe-entree:cubic-bezier(.4,0,.6,1); /* @kind other */
  --courbe-douce:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-interface:all var(--duree-2) var(--courbe-sortie); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--duree-1:0ms; /* @kind other */ --duree-2:0ms; /* @kind other */ --duree-3:0ms; /* @kind other */ --duree-4:0ms /* @kind other */}
  .ll-onde,[style*="ll-onde"]{animation:none!important}
}
/* Onde de présence : un anneau bleu qui s'élargit et s'efface. Portée par le lanceur de l'agent. */
@keyframes ll-onde{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}

/* ═══════════════════════════════════════════════════════════════
   PONT VERS LES ANCIENS NOMS DE VARIABLES
   Les portails utilisent 1 039 fois des variables héritées. Les
   redéfinir ici restyle le produit sans toucher au balisage.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:var(--surface-douce);
  --paper-2:var(--surface-enfoncee);
  --ink:var(--marine-900);
  --line:var(--bordure-fine);
  --muted:var(--texte-discret);
  --brass:var(--action-primaire);
  --brass-dark:var(--action-primaire-survol);
  --sage:var(--succes-500);
  --rust:var(--urgence-500);
  --amber:var(--alerte-500);

  --police-titre:'Bebas Neue',Impact,sans-serif;
  --police-texte:'IBM Plex Sans',system-ui,sans-serif;
  --police-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Filet des portails : un cran plus présent que --bordure-fine,
     pour détacher chaque bloc du fond (portail.css du système). */
  --bordure-portail:#D6DCE4;
}

body{ background:var(--surface-douce); color:var(--texte-corps); }

/* Les portails déclarent la police sur des sélecteurs plus précis que
   `body` (.subtitle, p, aside…). On couvre donc explicitement le texte
   courant, sinon l'ancienne serif ressort par endroits. */
body,p,span,div,td,th,li,label,input,select,textarea,button,a{
  font-family:var(--police-texte);
}

/* ═══════ TYPOGRAPHIE ═══════
   Bebas est une condensée : à taille égale elle paraît plus petite
   qu'un serif. Les tailles sont donc remontées, sinon les titres
   rapetissent au lieu de gagner en présence. */
h1,h2,h3,h4{
  font-family:var(--police-titre);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
  font-weight:400;            /* Bebas n'a qu'une graisse */
  color:var(--texte-titre);
}
h1{ font-size:2.15em; }
h2{ font-size:1.6em; }
code,kbd,samp{ font-family:var(--police-mono); font-variant-numeric:tabular-nums; }

/* ═══════ BARRE LATÉRALE ═══════
   Spec : chrome.jsx › Rail. Largeur fixe 248 px, entête de 72 px
   séparé par un filet, éléments de 44 px à coins arrondis, pastille
   marine pleine sur l'élément actif. */
aside{
  width:248px; flex:none;
  background:var(--surface-carte);
  border-right:1px solid var(--bordure-fine);
  display:flex; flex-direction:column;
  padding:0;
}
aside .brand{
  height:72px; display:flex; align-items:center;
  padding:0 20px; margin:0;
  border-bottom:1px solid var(--bordure-fine);
  flex:none;
}
aside .brand-sub{
  display:block; padding:16px 20px 8px;
  font:600 11px/1 var(--police-texte);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--texte-accent);
}
aside .tab-btn{
  display:flex; align-items:center; gap:12px;
  height:44px; padding:0 12px; margin:2px 12px;
  border:0; border-radius:var(--rayon-2);
  background:transparent; color:var(--marine-900);
  font:500 14px/1 var(--police-texte);
  text-align:left; cursor:pointer; white-space:nowrap;
  transition:background var(--duree-2,.15s) ease;
}
aside .tab-btn:hover{ background:var(--surface-douce); }
aside .tab-btn.active{
  background:var(--marine-900); color:var(--texte-inverse);
  font-weight:600;
}
aside .signout{
  margin-top:auto;
  border-top:1px solid var(--bordure-fine);
  padding:8px 0;
}

/* ═══════ CARTES ET SURFACES ═══════
   Spec readme §4.5 : filet ET ombre, les deux. */
.metric,.card,.panel{
  background:var(--surface-carte);
  border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-2);
  padding:20px;
}

/* Tuile de mesure — spec chrome.jsx › Tuile */
.metric .label{
  font:600 10.5px/15px var(--police-texte);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--texte-discret);
}
.metric .val{
  font-family:var(--police-texte);
  font-variant-numeric:tabular-nums;
  font-size:28px; font-weight:700; line-height:32px;
  letter-spacing:-.02em;
  color:var(--marine-900);
  margin-top:6px;
}
/* tabular-nums aligne les colonnes de chiffres, mais élargit aussi les
   séparateurs : réservé aux tableaux, pas aux tuiles. */
tbody td{ font-variant-numeric:tabular-nums; }
/* Une tuile d'alerte se signale par son filet et son chiffre, jamais
   par un aplat de couleur (readme §4.2 : pas de grands aplats). */
.metric.flag{ border-color:var(--urgence-500); }
.metric.flag .val{ color:var(--urgence-600); }

/* ═══════ TABLEAUX ═══════
   Spec chrome.jsx › Tableau2 : entêtes en petites capitales
   espacées, lignes séparées par un filet, pas de zébrure. */
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead th{
  font:600 11px/1 var(--police-texte);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--texte-discret);
  text-align:left; padding:0 12px 10px;
  border-bottom:1px solid var(--bordure-fine);
  white-space:nowrap;
  background:transparent;
}
tbody td{
  padding:14px 12px;
  border-bottom:1px solid var(--bordure-fine);
  color:var(--texte-corps);
  vertical-align:middle;
}
tbody tr:hover{ background:var(--surface-survol); }

/* ═══════ CHAMPS ═══════ */
input,select,textarea{
  border:1px solid var(--bordure);
  border-radius:var(--rayon-champ);
  padding:10px 12px;
  font:400 14px/1.4 var(--police-texte);
  background:var(--surface-carte);
  color:var(--texte-corps);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--bordure-focus);
  box-shadow:var(--lueur-focus);
}

/* ═══════ BOUTONS ═══════
   Le bleu est la SEULE couleur d'action (readme §4.2). Rayon en
   pilule : --rayon-bouton vaut 999px dans le système. */
button{ font-family:var(--police-texte); }

/* ═══════ ZONE PRINCIPALE ═══════
   Spec chrome.jsx › Coquille : la zone de contenu défile seule, avec
   un rembourrage généreux. Sans cela, le tableau touche le bord et
   son entête se retrouve collé au bandeau. */
main{
  padding:28px 32px 48px;
  overflow-y:auto;
  background:var(--surface-douce);
}
main > .section > .toolbar{ margin-bottom:18px; }

/* Un tableau vit dans une carte (spec › Carte), jamais posé nu sur le
   fond : c'est ce qui détache chaque bloc de contenu de la page. */
main table{
  background:var(--surface-carte);
  border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-2);
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
}
main thead th{ padding:16px 16px 12px; }
main tbody td{ padding:14px 16px; }
main tbody tr:last-child td{ border-bottom:0; }

/* Les tuiles de mesure s'alignent en grille souple : elles gardent une
   largeur lisible et passent à la ligne plutôt que de s'écraser. */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  margin-top:20px;
}

/* Libellés de groupe dans la barre latérale (portail admin) : même
   traitement que les sur-titres du système — capitales espacées,
   précédées d'un filet bleu (readme §3 « Sur-titres »). */
aside .nav-group-label{
  font:600 10px/1 var(--police-texte);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--texte-discret);
  padding:18px 12px 8px;
  margin:0 12px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════
   Les portails avaient déjà une bonne réponse à 760 px : la barre
   latérale devient une barre d'onglets horizontale. Elle a cessé de
   s'appliquer quand cette feuille est passée APRÈS leur <style> —
   c'est donc ici qu'elle doit revivre, adaptée aux composants du
   système.

   Une barre latérale de 248 px sur un écran de 390 px ne laisse rien
   au contenu : sur téléphone, la navigation se pose en haut et défile
   horizontalement. */
@media (max-width:860px){
  .shell{ flex-direction:column; }

  aside{
    width:100%; flex:none;
    border-right:0;
    border-bottom:1px solid var(--bordure-fine);
    flex-direction:row; align-items:center;
    overflow-x:auto; white-space:nowrap;
    padding:8px 4px;
    gap:4px;
    /* Défilement fluide au doigt, sans barre visible. */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  aside::-webkit-scrollbar{ display:none; }

  /* Le logo et le sur-titre reprennent la place du contenu : sur
     téléphone, l'usager sait déjà dans quelle application il est. */
  aside .brand,
  aside .brand-sub,
  aside .nav-group-label{ display:none; }

  aside .tab-btn{
    width:auto; flex:none;
    margin:0; height:38px;
    padding:0 14px;
    border-radius:var(--rayon-pilule);
    font-size:13.5px;
  }
  aside .signout{
    margin:0 0 0 auto; flex:none;
    border-top:0; padding:0;
  }

  main{ padding:20px 16px 40px; }

  /* Deux tuiles par rangée : une seule gâche la hauteur d'écran,
     trois rendent les chiffres illisibles. */
  .metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .metric{ padding:16px; }
  .metric .val{ font-size:22px; line-height:26px; }

  /* Un tableau large défile dans sa carte plutôt que de déborder de
     la page : le reste de l'écran reste lisible. */
  main table{ display:block; overflow-x:auto; max-width:100%; }

  h1{ font-size:1.75em; }
  h2{ font-size:1.4em; }
}

/* Écrans très étroits : une tuile par rangée devient plus lisible que
   deux chiffres écrasés. */
@media (max-width:420px){
  .metrics{ grid-template-columns:1fr; }
  main{ padding:16px 12px 32px; }
}

/* L'écran de connexion : le panneau marine disparaît sous 860 px, la
   carte prend toute la largeur avec une gouttière. */
@media (max-width:860px){
  #login-screen{ padding:16px; }
  .login-box{ width:100%; max-width:420px; }
}

/* Un enfant de grille refuse de descendre sous sa largeur intrinsèque
   (min-width:auto par défaut) : une étiquette longue pousse la tuile
   hors de l'écran. min-width:0 lève ce plancher, et le texte passe à
   la ligne au lieu de déborder. */
.metric,.card,.panel{ min-width:0; }
.metric .label{ overflow-wrap:anywhere; }

/* Même cause côté zone principale : sans min-width:0, un tableau large
   élargit tout le conteneur au lieu de défiler dans sa carte. */
main,.shell{ min-width:0; }
.shell{ max-width:100%; }
body{ overflow-x:hidden; }

/* ═══════ ICÔNES ═══════
   Sprite Lucide (assets/icones.svg), repris du système. Le trait est
   en currentColor : l'icône suit donc la couleur du texte, y compris
   sur l'élément actif en marine, sans règle supplémentaire. */
.ic{
  width:18px; height:18px; flex:none;
  stroke-width:2;
  vertical-align:middle;
}
aside .tab-btn .ic{ opacity:.75; }
aside .tab-btn.active .ic,
aside .tab-btn:hover .ic{ opacity:1; }

/* Sur téléphone la barre devient horizontale : l'icône seule suffirait
   à rendre les onglets illisibles, on garde donc les deux mais plus
   serrés. */
@media (max-width:860px){
  aside .tab-btn .ic{ width:16px; height:16px; }
  aside .tab-btn{ gap:8px; }
}

/* ═══════ DÉFILEMENT ═══════
   Les portails posaient .shell en min-height:100vh : la coquille peut
   donc dépasser l'écran, c'est le DOCUMENT qui défile, et la barre
   latérale s'en va avec lui.

   Le système fait l'inverse (portail.css : body{overflow:hidden}) —
   la coquille occupe exactement la hauteur de l'écran et c'est la
   zone principale qui défile, seule. La barre latérale reste donc en
   place, et défile elle-même si ses onglets dépassent.
   Limité aux pages qui ont une .shell (les portails) : sur les
   formulaires publics, body{overflow:hidden} empêchait tout défilement. */
html:has(.shell), body:has(.shell){ height:100%; }
body:has(.shell){ overflow:hidden; }

.shell{
  height:100vh;
  height:100dvh;        /* iOS : exclut la barre d'adresse rétractable */
  min-height:0;
  overflow:hidden;
}

aside{
  height:100%;
  overflow-y:auto;      /* une nav longue défile dans la barre */
  overflow-x:hidden;
  scrollbar-width:thin;
}

.shell main{
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Sur téléphone la barre est horizontale et posée en haut : c'est la
   colonne entière qui doit tenir dans l'écran, la nav gardant sa
   hauteur propre et le contenu prenant le reste. */
@media (max-width:860px){
  .shell{ flex-direction:column; }
  aside{
    height:auto; flex:none;
    overflow-x:auto; overflow-y:hidden;
    position:sticky; top:0; z-index:20;
    background:var(--surface-carte);
  }
  main{ flex:1; min-height:0; }
}

/* Un conteneur flex qui défile écrase ses enfants pour les faire
   tenir : les onglets perdaient leur hauteur de 44 px et leurs
   marges. flex:none les en empêche — ils gardent leur taille et c'est
   la barre qui défile, ce qui est le but. */
aside .tab-btn,
aside .brand,
aside .brand-sub,
aside .nav-group-label,
aside .signout{ flex:none; }

/* .signout était poussé par margin-top:auto, qui ne fonctionne plus
   dans un conteneur qui défile : il se colle au dernier onglet. On le
   détache par une marge fixe. */
aside .signout{ margin-top:12px; }

/* Les portails bornaient main à 900–1020 px. Tant que la page entière
   défilait, ça ne se voyait pas. Depuis que main est la zone de
   défilement, sa barre s'arrêtait à cette largeur et laissait une bande
   vide à droite. La zone défilante prend donc toute la largeur ; c'est
   son contenu qui garde une largeur lisible. */
main{ flex:1; max-width:none; }
main > *{ max-width:1240px; }

/* ═══════ ASSISTANT D'ONBOARDING ═══════
   Une étape visible à la fois ; la barre du haut montre où l'on est,
   ce qui est fait et ce qui reste. */
.ob-etapes{
  display:flex; gap:8px; list-style:none; margin:20px 0 18px; padding:0;
  counter-reset:none; flex-wrap:wrap;
}
.ob-etapes li{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px 8px 8px;
  border:1px solid var(--bordure-portail); border-radius:var(--rayon-pilule);
  background:var(--surface-carte);
  font:500 13px/1 var(--police-texte); color:var(--texte-discret);
}
.ob-etapes li span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-enfoncee); color:var(--texte-discret);
  font:600 12px/1 var(--police-texte);
}
.ob-etapes li.actif{ border-color:var(--marine-900); color:var(--marine-900); }
.ob-etapes li.actif span{ background:var(--marine-900); color:#fff; }
.ob-etapes li.fait{ color:var(--succes-600); }
.ob-etapes li.fait span{ background:var(--succes-100); color:var(--succes-600); }

.ob-panneau{ display:none; }
.ob-panneau.actif,
.ob-carte{
  display:block;
  background:var(--surface-carte);
  border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-2);
  padding:24px;
}
.ob-panneau h2{ font-size:1.5em; margin-bottom:6px; }
.ob-aide{ color:var(--texte-discret); font-size:13.5px; margin:0 0 16px; max-width:70ch; }
.ob-aide a,.ob-lien a{ color:var(--texte-lien); }
.ob-lien{ margin-top:14px; font-size:13px; }
.ob-msg{ font-size:13px; margin-top:10px; min-height:1em; }

.ob-avert{
  display:flex; align-items:center; gap:8px;
  margin:14px 0 0; padding:10px 12px;
  background:var(--bleu-025); border-radius:var(--rayon-2);
  font-size:13px; color:var(--marine-900);
}
.ob-avert .ic{ width:16px; height:16px; color:var(--bleu-600); flex:none; }

.ob-liste{ list-style:none; margin:14px 0 0; padding:0; }
.ob-liste li{
  padding:10px 12px; border-top:1px solid var(--bordure-fine);
  font-size:13.5px; color:var(--texte-corps);
}
.ob-liste li::before{ content:"✓  "; color:var(--succes-600); font-weight:600; }

.ob-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; flex-wrap:wrap; }
.ob-suivant{
  margin-left:auto; background:var(--action-primaire); color:#fff; border:0;
  border-radius:var(--rayon-bouton); padding:10px 18px;
  font:600 13.5px/1 var(--police-texte); cursor:pointer;
}
.ob-suivant:hover{ background:var(--action-primaire-survol); }
.ob-retour{
  background:transparent; border:1px solid var(--bordure); color:var(--marine-900);
  border-radius:var(--rayon-bouton); padding:10px 16px;
  font:500 13.5px/1 var(--police-texte); cursor:pointer;
}

.ob-import{ margin-top:18px; border-top:1px solid var(--bordure-fine); padding-top:14px; }
.ob-import summary{ cursor:pointer; font-size:13.5px; color:var(--texte-lien); }
.ob-import[open] summary{ margin-bottom:12px; }

.ob-recap{ display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; margin:6px 0 0; }
.ob-recap dt{ font:600 11px/20px var(--police-texte); letter-spacing:.12em; text-transform:uppercase; color:var(--texte-discret); }
.ob-recap dd{ margin:0; font-size:14px; color:var(--marine-900); }

@media (max-width:860px){
  .ob-etapes li{ padding:6px 10px 6px 6px; font-size:12px; }
  .ob-panneau.actif,.ob-carte{ padding:18px; }
}

/* Au rechargement, la page vérifie la session avant de décider quoi
   afficher. Sans ce masque, l'écran de connexion apparaissait pendant
   cette vérification et donnait l'impression d'avoir été déconnecté. */
body.ll-verif #login-screen,
body.ll-verif #app-shell{ visibility:hidden; }
body.ll-verif::after{
  content:"Chargement…";
  position:fixed; inset:0; display:grid; place-items:center;
  font:500 14px/1 var(--police-texte); color:var(--texte-discret);
  background:var(--surface-douce);
}

/* Les titres prennent la couleur marine par défaut — sur le panneau
   marine de l'écran de connexion, ils devenaient invisibles. */
.login-side h1,.login-side h2,.login-side h3{ color:var(--texte-inverse); }

/* ═══════ NOTIFICATIONS ET FENÊTRES (assets/ui.js) ═══════ */
.ll-toasts{
  position:fixed; right:20px; bottom:20px; z-index:10000;
  display:flex; flex-direction:column; gap:10px; max-width:min(420px, calc(100vw - 32px));
}
.ll-toast{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 14px 14px 16px;
  background:var(--surface-carte); color:var(--marine-900);
  border:1px solid var(--bordure-portail); border-left:3px solid var(--bleu-500);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-3);
  font:500 14px/1.45 var(--police-texte);
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.ll-toast--visible{ opacity:1; transform:none; }
.ll-toast--succes{ border-left-color:var(--succes-500); }
.ll-toast--erreur{ border-left-color:var(--urgence-500); }
.ll-toast__texte{ flex:1; white-space:pre-line; }
.ll-toast__fermer{
  border:0; background:transparent; color:var(--texte-discret);
  font-size:18px; line-height:1; cursor:pointer; padding:0 2px;
}

.ll-modale-fond{
  position:fixed; inset:0; z-index:10001;
  display:grid; place-items:center; padding:16px;
  background:rgba(10,32,56,.45);
  opacity:0; transition:opacity .15s ease;
}
.ll-modale-fond--visible{ opacity:1; }
.ll-modale{
  width:min(460px,100%);
  background:var(--surface-carte);
  border-radius:var(--rayon-5, 16px);
  box-shadow:var(--ombre-4);
  padding:24px;
}
.ll-modale__texte{ margin:0 0 18px; font:500 15px/1.5 var(--police-texte); color:var(--marine-900); white-space:pre-line; }
.ll-modale__champ{
  width:100%; margin:-4px 0 18px; resize:vertical;
  font:400 14px/1.45 var(--police-texte);
}
.ll-modale__actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.ll-bouton{
  border-radius:var(--rayon-bouton); padding:10px 18px; cursor:pointer;
  font:600 13.5px/1 var(--police-texte); border:1px solid transparent;
}
.ll-bouton--primaire{ background:var(--action-primaire); color:#fff; }
.ll-bouton--primaire:hover{ background:var(--action-primaire-survol); }
.ll-bouton--danger{ background:var(--urgence-500); color:#fff; }
.ll-bouton--danger:hover{ background:var(--urgence-600); }
.ll-bouton--secondaire{ background:transparent; border-color:var(--bordure); color:var(--marine-900); }
.ll-bouton:focus-visible{ outline:none; box-shadow:var(--lueur-focus); }

@media (max-width:860px){
  .ll-toasts{ left:16px; right:16px; bottom:16px; max-width:none; }
}

/* ═══════ TRAVAILLEURS ═══════
   Une fiche par travailleur : qui il est, s'il peut recevoir des
   mandats, puis — repliée — la vérification RBQ/assurance. Ouverte
   d'office quand quelque chose bloque, puisque c'est alors la seule
   chose à faire sur la fiche. */
.tr-entete{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:32px; }
.tr-entete h1{ margin:0; }
.tr-entete .subtitle{ margin:4px 0 0; }
.tr-entete .ll-bouton .ic, .tr-pied .ll-bouton .ic{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.tr-resume{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:18px 0; font-size:13.5px; color:var(--texte-discret); }
.tr-resume b{ color:inherit; font-weight:600; }
.tr-resume:empty{ display:none; }

.tr-carte{
  background:var(--surface-carte); border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-2);
  padding:20px 22px; margin-bottom:14px;
}
.tr-carte--inactif{ opacity:.65; }
.tr-form h2{ font-size:1.3em; margin:0 0 14px; }

.tr-tete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tr-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--marine-900); color:#fff; font:600 15px/1 var(--police-texte); letter-spacing:.03em;
}
.tr-ident{ flex:1; min-width:180px; }
.tr-ident h3{ margin:0 0 6px; font:600 16px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.tr-ident h3 small{ font-weight:400; font-size:13px; color:var(--texte-discret); margin-left:4px; }
.tr-specs{ display:flex; flex-wrap:wrap; gap:6px; }
.tr-spec{ font-size:12px; padding:3px 10px; border-radius:var(--rayon-pilule); background:var(--surface-enfoncee); color:var(--marine-900); }
.tr-pastilles{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }

.tr-pastille{
  display:inline-flex; align-items:center; gap:5px;
  font:500 12px/1 var(--police-texte); padding:6px 10px; border-radius:var(--rayon-pilule);
}
.tr-pastille .ic{ width:13px; height:13px; }
.tr-pastille--ok{ background:var(--succes-100); color:var(--succes-600); }
.tr-pastille--ko{ background:var(--urgence-100); color:var(--urgence-600); }
.tr-pastille--att{ background:var(--alerte-100); color:var(--alerte-600); }
.tr-pastille--info{ background:var(--info-100); color:var(--bleu-600, var(--action-primaire)); }

.tr-infos{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0 58px; font-size:13.5px; color:var(--texte-corps); }
.tr-infos span{ display:inline-flex; align-items:center; gap:6px; min-width:0; overflow-wrap:anywhere; }
.tr-infos .ic{ width:15px; height:15px; color:var(--texte-discret); flex:none; }
.tr-manque{ color:var(--alerte-600) !important; font-size:13px; }
.tr-manque .ic{ color:inherit !important; }

.tr-stats{ display:flex; gap:28px; margin:16px 0 0 58px; }
.tr-stats div{ display:flex; flex-direction:column; gap:2px; }
.tr-stats b{ font:600 18px/1.1 var(--police-texte); color:var(--marine-900); }
.tr-stats span{ font-size:12px; color:var(--texte-discret); }

.tr-alerte{
  display:flex; align-items:flex-start; gap:8px; margin:16px 0 0;
  padding:10px 14px; border-radius:var(--rayon-champ);
  background:var(--urgence-100); color:var(--urgence-600); font-size:13.5px;
}
.tr-alerte .ic{ width:16px; height:16px; flex:none; margin-top:2px; }

.tr-verif{ margin-top:16px; border-top:1px solid var(--bordure-fine); padding-top:12px; }
.tr-verif summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font:500 13.5px/1.4 var(--police-texte); color:var(--marine-900);
}
.tr-verif summary::-webkit-details-marker{ display:none; }
.tr-verif summary .ic{ width:16px; height:16px; color:var(--texte-discret); }
.tr-chevron{ margin-left:auto; transition:transform var(--duree-rapide, .15s); }
.tr-verif[open] .tr-chevron{ transform:rotate(180deg); }
.tr-verif .tr-grille{ margin-top:14px; }

.tr-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px 16px; }
.tr-grille label{ display:flex; flex-direction:column; gap:6px; font:500 12px/1.3 var(--police-texte); color:var(--texte-discret); min-width:0; }
.tr-grille label em{ font-style:normal; color:var(--succes-600); }
.tr-grille input, .tr-grille select{ width:100%; box-sizing:border-box; }
.tr-grille input[type=file]{ padding:7px 8px; font-size:13px; }
.tr-grille .tr-large{ grid-column:span 2; }
.tr-grille .tr-case{ flex-direction:row; align-items:center; gap:8px; font-size:13.5px; color:var(--texte-corps); align-self:end; padding-bottom:10px; }
.tr-grille .tr-case input{ width:auto; }
.tr-note{ font-size:13px; color:var(--texte-discret); margin:14px 0 0; }
.tr-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }

.tr-pied{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--bordure-fine); }
.tr-espace{ flex:1; }
.tr-lien-danger{ background:none; border:none; padding:8px 4px; cursor:pointer; font:500 13px/1 var(--police-texte); color:var(--urgence-600); }
.tr-lien-danger:hover{ text-decoration:underline; }
.tr-vide{ color:var(--texte-discret); font-size:13.5px; }

@media (max-width:640px){
  .tr-infos, .tr-stats{ margin-left:0; }
  .tr-pastilles{ justify-content:flex-start; width:100%; }
  .tr-grille .tr-large{ grid-column:auto; }
  .tr-carte{ padding:16px; }
}
.tr-form .ob-msg:empty{ display:none; }

/* ═══════ VUE D'ENSEMBLE ═══════
   Les chiffres d'abord, puis ce qui demande une action, trié du plus
   urgent au moins urgent. Le rouge est réservé à ce qui est vraiment
   à traiter : un compteur à 0 reste neutre. */
.vo-entete{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.vo-entete h1{ margin:0; }
.vo-entete .subtitle{ margin:4px 0 0; }

.vo-sante{
  display:flex; align-items:flex-start; gap:8px; max-width:520px;
  padding:9px 14px; border-radius:var(--rayon-champ); font-size:13px;
}
.vo-sante .ic{ width:16px; height:16px; flex:none; margin-top:1px; }
.vo-sante small{ display:block; font-size:11.5px; opacity:.8; }
.vo-sante--ok{ background:var(--succes-100); color:var(--succes-600); }
.vo-sante--att{ background:var(--alerte-100); color:var(--alerte-600); }
.vo-sante--ko{ background:var(--urgence-100); color:var(--urgence-600); }
.vo-sante summary{ cursor:pointer; font-weight:600; }
.vo-sante ul{ margin:8px 0 6px; padding-left:16px; color:var(--texte-corps); }
.vo-sante li{ margin-bottom:4px; }

.vo-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.vo-kpi{
  background:var(--surface-carte); border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-2); padding:18px 20px;
  display:flex; flex-direction:column; gap:8px; min-width:0;
}
.vo-kpi__label{ font:600 11px/1.3 var(--police-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-discret); }
.vo-kpi b{ font:600 30px/1 var(--police-texte); color:var(--marine-900); }
.vo-kpi--accent{ background:var(--marine-900); border-color:var(--marine-900); }
.vo-kpi--accent .vo-kpi__label{ color:rgba(255,255,255,.7); }
.vo-kpi--accent b{ color:#fff; }

.vo-signaux{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px; }
.vo-signal{
  display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left;
  background:var(--surface-carte); border:1px solid var(--bordure-portail); border-radius:var(--rayon-carte);
  padding:14px 18px; cursor:pointer; font:500 13.5px/1.3 var(--police-texte); color:var(--texte-corps);
}
.vo-signal:hover{ border-color:var(--action-primaire); }
.vo-signal b{ font:600 20px/1 var(--police-texte); color:var(--texte-discret); }
.vo-signal--actif{ background:var(--urgence-100); border-color:transparent; color:var(--urgence-600); }
.vo-signal--actif b{ color:var(--urgence-600); }

.vo-titre{ display:flex; align-items:baseline; gap:12px; margin:34px 0 14px; }
.vo-titre h2{ margin:0; font-size:1.5em; }
.vo-titre .vo-lien{ margin-left:auto; }
.vo-compte{ font-size:13px; color:var(--texte-discret); }

.vo-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:14px; align-items:start; }
.vo-carte{
  background:var(--surface-carte); border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-2); padding:16px 18px; min-width:0;
}
.vo-carte header{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.vo-carte h3{ margin:0; flex:1; font:600 15px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.vo-icone{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--info-100); color:var(--bleu-600); }
.vo-icone .ic{ width:17px; height:17px; }
.vo-nb{ min-width:26px; padding:4px 8px; border-radius:var(--rayon-pilule); text-align:center; font:600 12px/1 var(--police-texte); background:var(--surface-enfoncee); color:var(--marine-900); }
.vo-carte--urgent .vo-icone{ background:var(--urgence-100); color:var(--urgence-600); }
.vo-carte--urgent .vo-nb{ background:var(--urgence-600); color:#fff; }
.vo-carte--att .vo-icone{ background:var(--alerte-100); color:var(--alerte-600); }
.vo-carte--att .vo-nb{ background:var(--alerte-100); color:var(--alerte-600); }
.vo-carte ul{ list-style:none; margin:0; padding:0; }
.vo-carte li{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-top:1px solid var(--bordure-fine); font-size:13.5px; line-height:1.45; color:var(--texte-corps);
  overflow-wrap:anywhere;
}
.vo-carte li:first-child{ border-top:none; padding-top:2px; }
.vo-action{
  flex:none; margin-left:auto; padding:6px 12px; border-radius:var(--rayon-pilule); cursor:pointer;
  border:1px solid var(--bordure); background:var(--surface-carte); color:var(--marine-900);
  font:500 12px/1 var(--police-texte);
}
.vo-action:hover{ border-color:var(--action-primaire); color:var(--action-primaire); }
.vo-lien{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:4px 0;
  background:none; border:none; cursor:pointer; font:500 13px/1 var(--police-texte); color:var(--texte-lien, var(--action-primaire));
}
.vo-lien .ic{ width:14px; height:14px; }
.vo-lien:hover{ text-decoration:underline; }
.vo-plus{ margin:8px 0 0; font-size:12.5px; color:var(--texte-discret); }
.vo-rien{
  display:flex; align-items:center; gap:10px; padding:18px 20px; border-radius:var(--rayon-carte);
  background:var(--succes-100); color:var(--succes-600); font-size:14px; grid-column:1/-1;
}
.vo-rien .ic{ width:18px; height:18px; }

@media (max-width:1100px){ .vo-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .vo-signaux{ grid-template-columns:1fr; }
  .vo-grille{ grid-template-columns:1fr; }
  .vo-kpi b{ font-size:24px; }
}
/* Nouvelles demandes = des occasions, pas des problèmes : bleu, pas rouge. */
.vo-signal--info{ background:var(--info-100); border-color:transparent; color:var(--bleu-600); }
.vo-signal--info b{ color:var(--bleu-600); }
.vo-carte li{ flex-wrap:nowrap; }
@media (max-width:640px){ .vo-carte li{ flex-wrap:wrap; } }

/* ═══════ DEMANDES DE MANDAT ═══════
   Reprend les fiches Travailleurs. Les quatre chiffres qui décident
   d'un rappel (portes, loyer, frais estimés, début) en premier. */
.md-sous{ font-size:13px; color:var(--texte-discret); }
.tr-infos a{ display:inline-flex; align-items:center; gap:6px; color:var(--texte-lien, var(--action-primaire)); text-decoration:none; overflow-wrap:anywhere; }
.tr-infos a:hover{ text-decoration:underline; }
.tr-infos a .ic{ width:15px; height:15px; flex:none; }
.md-faits{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:16px 0 0; }
.md-faits div{ background:var(--surface-enfoncee); border-radius:var(--rayon-champ); padding:10px 14px; display:flex; flex-direction:column; gap:4px; }
.md-faits span{ font:600 10.5px/1.2 var(--police-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-discret); }
.md-faits b{ font:600 17px/1.2 var(--police-texte); color:var(--marine-900); }
.md-details{ display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; margin:16px 0 0; font-size:13.5px; }
.md-details dt{ color:var(--texte-discret); }
.md-details dd{ margin:0; color:var(--texte-corps); overflow-wrap:anywhere; }
.md-message{ margin:14px 0 0; padding:10px 14px; border-left:3px solid var(--bordure); color:var(--texte-corps); font-size:14px; font-style:italic; }
.md-ia{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; padding:10px 14px; border-radius:var(--rayon-champ); background:var(--info-100); color:var(--texte-corps); font-size:13.5px; line-height:1.5; }
.md-ia .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--bleu-600); }
.md-ia b{ color:var(--bleu-600); font-weight:600; margin-right:4px; }
a.ll-bouton{ display:inline-flex; align-items:center; text-decoration:none; }
@media (max-width:640px){ .md-details{ grid-template-columns:1fr; gap:2px; } .md-details dd{ margin-bottom:8px; } }
/* Cartes « À traiter » de même hauteur : 3 éléments max chacune, le lien
   collé en bas pour qu'il tombe au même niveau d'une carte à l'autre. */
.vo-grille{ align-items:stretch; }
.vo-carte{ display:flex; flex-direction:column; }
.vo-carte ul{ flex:1; }
.vo-carte > .vo-lien, .vo-carte > .vo-plus{ align-self:flex-start; margin-top:auto; padding-top:10px; }

/* ═══════ FORMULAIRES ADMIN (classes communes) ═══════
   Remplacent ~345 styles en ligne répétés. Les formulaires en carte
   deviennent une grille : les champs s'alignent en colonnes régulières
   au lieu de s'empiler au hasard des largeurs fixées à la main. */
.ch-label{ display:block; font:500 12px/1.3 var(--police-texte); color:var(--texte-discret); margin-bottom:6px; }
.fo-carte{
  background:var(--surface-carte); border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-2);
  padding:20px 22px; margin-bottom:16px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px 16px; align-items:end;
}
.fo-carte--libre{ display:block; }
.fo-carte > div, .fo-ligne > div{ min-width:0; }
.fo-carte input:not([type=checkbox]):not([type=radio]), .fo-carte select, .fo-carte textarea,
.fo-ligne input:not([type=checkbox]):not([type=radio]), .fo-ligne select{ width:100%; box-sizing:border-box; }
.fo-carte input[type=file], .fo-ligne input[type=file]{ padding:7px 8px; font-size:13px; }
.fo-carte > button, .fo-carte > .ll-bouton{ justify-self:start; }
.fo-ligne{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px 14px; align-items:end; }
section > h1 + .subtitle, section > h2 + .subtitle{ margin-top:4px; margin-bottom:18px; }
section > h2{ margin-top:36px; }
.vo-action{ white-space:nowrap; }
.sous-titre{ font-size:1.35em !important; margin:34px 0 6px !important; }
h3.sous-titre{ font-size:1.15em !important; margin:26px 0 10px !important; }

/* ═══════ CLIENTS PROPRIÉTAIRES ═══════ */
.cl-table td{ vertical-align:middle; }
.cl-client{ display:flex; align-items:center; gap:12px; }
.cl-client .tr-avatar{ width:36px; height:36px; font-size:13px; }
.cl-client b{ display:block; font-weight:600; color:var(--marine-900); }
.cl-client small{ display:block; font-size:12.5px; color:var(--texte-discret); }
.cl-champ{ display:inline-flex; align-items:center; border:1px solid var(--bordure); border-radius:var(--rayon-champ); background:var(--surface-carte); overflow:hidden; }
.cl-champ:focus-within{ border-color:var(--bordure-focus); box-shadow:var(--lueur-focus); }
.cl-champ input{ border:none; box-shadow:none !important; width:84px; padding:8px 10px; text-align:right; font-variant-numeric:tabular-nums; }
.cl-champ input::-webkit-inner-spin-button{ display:none; }
.cl-champ span{ padding:0 10px 0 2px; color:var(--texte-discret); font-size:13px; }
.cl-actions{ text-align:right; white-space:nowrap; }
.cl-actions > *{ margin-left:8px; vertical-align:middle; }
.cl-actions .ll-bouton{ padding:8px 14px; }
.cl-modifiee{ background:var(--bleu-025); }
.cl-modifiee .cl-champ{ border-color:var(--action-primaire); }
@media (max-width:760px){
  .cl-table thead{ display:none; }
  .cl-table, .cl-table tbody, .cl-table tr, .cl-table td{ display:block; width:100%; }
  .cl-table tr{ padding:12px 0; border-bottom:1px solid var(--bordure-fine); }
  .cl-table td{ border:none; padding:6px 16px; }
  .cl-table td[data-libelle]:not(:first-child){ display:flex; justify-content:space-between; align-items:center; }
  .cl-table td[data-libelle]:not(:first-child)::before{ content:attr(data-libelle); font-size:12.5px; color:var(--texte-discret); }
  .cl-actions{ text-align:left; }
  .cl-actions > *{ margin:0 8px 0 0; }
}
.tr-pied .ll-bouton:disabled{ opacity:.6; cursor:wait; }
.tr-entete{ margin-bottom:18px; }

/* ═══════ TRAVAILLEURS — TABLEAU ═══════ */
.tr-outils{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.tr-recherche{ flex:1 1 280px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--bordure); border-radius:var(--rayon-champ); background:var(--surface-carte); }
.tr-recherche:focus-within{ border-color:var(--bordure-focus); box-shadow:var(--lueur-focus); }
.tr-recherche .ic{ width:16px; height:16px; color:var(--texte-discret); flex:none; }
.tr-recherche input{ border:none; box-shadow:none !important; flex:1; min-width:0; padding:10px 0; background:transparent; }
.tr-outils select{ flex:0 1 220px; }
.tr-triable{ cursor:pointer; user-select:none; white-space:nowrap; }
.tr-triable:hover{ color:var(--marine-900); }
.tr-fleche{ margin-left:6px; font-size:9px; opacity:.45; }
.tr-trie{ color:var(--marine-900); }
.tr-trie .tr-fleche{ opacity:1; color:var(--action-primaire); }
.tr-table td{ vertical-align:middle; }
.tr-table td small{ display:block; font-size:12px; color:var(--texte-discret); }
.tr-contact{ font-size:13.5px; overflow-wrap:anywhere; }
.tr-ligne{ cursor:pointer; }
.tr-ligne--inactive{ opacity:.6; }
.tr-ligne--ouverte{ background:var(--bleu-025); }
.tr-ligne--ouverte td{ border-bottom-color:transparent; }
.tr-chev{ width:36px; text-align:right; color:var(--texte-discret); }
.tr-chev .ic{ width:16px; height:16px; transition:transform .15s; }
.tr-ligne--ouverte .tr-chev .ic{ transform:rotate(180deg); }
.tr-detail > td{ background:var(--bleu-025); padding:4px 20px 18px !important; }
.tr-detail .tr-alerte{ margin-top:0; }
.tr-sous{ margin:14px 0 12px; font:600 13.5px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.tr-detail tbody tr:hover, .tr-detail:hover{ background:none; }
@media (max-width:760px){
  .tr-table thead{ display:none; }
  .tr-table, .tr-table tbody, .tr-table tr, .tr-table td{ display:block; width:100%; }
  .tr-table tr.tr-ligne{ padding:10px 0; border-top:1px solid var(--bordure-fine); position:relative; }
  .tr-table td{ border:none; padding:4px 16px; text-align:left !important; }
  .tr-table td[data-libelle]:not(:first-child){ display:flex; justify-content:space-between; gap:12px; }
  .tr-table td[data-libelle]:not(:first-child)::before{ content:attr(data-libelle); font-size:12.5px; color:var(--texte-discret); }
  .tr-chev{ position:absolute; top:18px; right:6px; width:auto; }
}

/* ═══════ FICHE TRAVAILLEUR (tiroir latéral) ═══════ */
.fi-fond{ position:fixed; inset:0; background:rgba(10,32,56,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:900; }
.fi-tiroir{
  position:fixed; top:0; right:0; bottom:0; width:min(640px, 100vw); z-index:901;
  background:var(--surface-carte); box-shadow:-12px 0 40px rgba(10,32,56,.18);
  transform:translateX(100%); transition:transform .22s ease; overflow-y:auto;
  padding:24px 28px 40px; box-sizing:border-box;
}
body.fi-ouvert .fi-fond{ opacity:1; pointer-events:auto; }
body.fi-ouvert .fi-tiroir{ transform:none; }
.fi-tete{ display:flex; align-items:center; gap:14px; }
.fi-tete .tr-avatar{ width:52px; height:52px; font-size:17px; }
.fi-tete h2{ margin:0 0 6px; font-size:1.7em; }
.fi-fermer{ margin-left:auto; align-self:flex-start; width:36px; height:36px; border-radius:50%; border:1px solid var(--bordure); background:var(--surface-carte); cursor:pointer; display:grid; place-items:center; color:var(--marine-900); }
.fi-fermer .ic{ width:18px; height:18px; }
.fi-contact{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0 0; }
.fi-contact .ll-bouton .ic{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; }
.fi-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:18px 0 0; }
.fi-stats div{ background:var(--surface-enfoncee); border-radius:var(--rayon-champ); padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.fi-stats b{ font:600 20px/1.1 var(--police-texte); color:var(--marine-900); }
.fi-stats span{ font-size:12px; color:var(--texte-discret); }
.fi-onglets{ display:flex; gap:4px; margin:22px 0 0; border-bottom:1px solid var(--bordure-fine); overflow-x:auto; }
.fi-onglet{ background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; cursor:pointer; font:500 14px/1 var(--police-texte); color:var(--texte-discret); white-space:nowrap; margin-bottom:-1px; }
.fi-onglet span{ display:inline-block; min-width:18px; padding:2px 6px; margin-left:4px; border-radius:var(--rayon-pilule); background:var(--surface-enfoncee); font-size:11.5px; color:var(--marine-900); }
.fi-onglet.actif{ color:var(--marine-900); border-bottom-color:var(--action-primaire); }
.fi-corps{ padding-top:18px; }

.fi-fil{ list-style:none; margin:0; padding:0; position:relative; }
.fi-fil::before{ content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--bordure-fine); }
.fi-ev{ display:flex; gap:14px; padding:0 0 18px; position:relative; }
.fi-point{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--surface-enfoncee); color:var(--texte-discret); position:relative; z-index:1; border:2px solid var(--surface-carte); }
.fi-point .ic{ width:15px; height:15px; }
.fi-ev--ok .fi-point{ background:var(--succes-100); color:var(--succes-600); }
.fi-ev--ko .fi-point{ background:var(--urgence-100); color:var(--urgence-600); }
.fi-ev--att .fi-point{ background:var(--alerte-100); color:var(--alerte-600); }
.fi-ev--info .fi-point, .fi-ev--note .fi-point{ background:var(--info-100); color:var(--bleu-600); }
.fi-txt{ font-weight:600; font-size:14px; color:var(--marine-900); padding-top:6px; }
.fi-sous{ font-size:13px; color:var(--texte-discret); margin-top:2px; }
.fi-cit{ margin:8px 0 0; padding:8px 12px; border-left:3px solid var(--bordure); background:var(--surface-enfoncee); border-radius:0 var(--rayon-champ) var(--rayon-champ) 0; font-size:13.5px; color:var(--texte-corps); white-space:pre-wrap; }
.fi-ev time{ display:block; font-size:12px; color:var(--texte-discret); margin-top:6px; }

.fi-table{ width:100%; }
.fi-table td small{ display:block; font-size:12px; color:var(--texte-discret); margin-top:2px; }
.fi-note-form{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; margin-bottom:18px; }
.fi-note-form textarea{ width:100%; box-sizing:border-box; resize:vertical; }
.fi-note{ padding:12px 14px; border:1px solid var(--bordure-fine); border-radius:var(--rayon-champ); margin-bottom:10px; font-size:14px; white-space:pre-wrap; color:var(--texte-corps); }
.fi-note .fi-sous{ margin:0 0 6px; }
@media (max-width:640px){ .fi-tiroir{ padding:18px 16px 32px; } .fi-stats{ grid-template-columns:repeat(2, 1fr); } }

/* ═══════ FICHE TRAVAILLEUR — MESSAGES ═══════ */
.ms-fil{ display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto; padding:4px 2px 8px; }
.ms-bulle{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45; }
.ms-bulle--sortant{ align-self:flex-end; background:var(--action-primaire); color:#fff; border-bottom-right-radius:4px; }
.ms-bulle--sortant.ms-bulle--auto{ background:var(--bleu-025); color:var(--texte-corps); border:1px solid var(--bordure-fine); }
.ms-bulle--entrant{ align-self:flex-start; background:var(--surface-enfoncee); color:var(--texte-corps); border-bottom-left-radius:4px; }
.ms-meta{ display:flex; align-items:center; gap:5px; font-size:11.5px; opacity:.8; margin-bottom:4px; }
.ms-meta .ic{ width:13px; height:13px; }
.ms-sujet{ font-weight:600; }
.ms-corps summary{ cursor:pointer; font-size:12.5px; margin-top:4px; opacity:.85; list-style:none; }
.ms-corps summary::-webkit-details-marker{ display:none; }
.ms-corps[open] summary:empty{ display:none; }
.ms-corps div{ white-space:pre-wrap; margin-top:6px; overflow-wrap:anywhere; }
.ms-attente{ align-self:flex-end; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--alerte-600); }
.ms-attente .ic{ width:14px; height:14px; }
.ms-ecrire{ margin-top:14px; border:1px solid var(--bordure); border-radius:var(--rayon-carte); padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--surface-carte); }
.ms-ecrire input, .ms-ecrire textarea{ width:100%; box-sizing:border-box; border:none; box-shadow:none !important; padding:6px 8px; resize:vertical; }
.ms-ecrire input{ font-weight:600; border-bottom:1px solid var(--bordure-fine); border-radius:0; }
.ms-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ms-dest{ font-size:12.5px; color:var(--texte-discret); overflow-wrap:anywhere; }
.ms-actions .ll-bouton .ic{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; }
/* Espace propriétaire : échéance proche = à surveiller, pas urgent. */
.vo-signal--att{ background:var(--alerte-100); border-color:transparent; color:var(--alerte-600); }
.vo-signal--att b{ color:var(--alerte-600); }
.vo-carte li > span:last-child{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }

/* ═══════ ESPACE PROPRIÉTAIRE — PAGES ═══════
   Une carte par intention (connecter la banque, fixer le plafond, poser
   une question) : icône, explication courte, action à droite. */
.pp-carte{
  background:var(--surface-carte); border:1px solid var(--bordure-portail);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-2); padding:18px 20px; margin-bottom:16px;
}
.pp-banque, .pp-plafond, .pp-question{ display:flex; align-items:flex-start; gap:14px; }
.pp-banque__texte{ flex:1; min-width:0; }
.pp-banque__texte h3{ margin:0 0 4px; font:600 15px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.pp-banque__texte > p{ margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--texte-discret); }
.pp-banque > .ll-bouton{ flex:none; }
.pp-note{ font-size:12.5px; color:var(--texte-discret); margin:4px 0 0; }
.pp-note:empty{ display:none; }
.pp-note--erreur{ color:var(--urgence-600); }
.pp-compte{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--bordure-fine); font-size:13.5px; }
.pp-compte b{ margin-right:6px; }

.pp-plafond__champ{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none; }
.pp-montant{ display:flex; align-items:center; gap:6px; }
.pp-montant input{ width:110px; text-align:right; }
.pp-montant span{ font-weight:600; color:var(--marine-900); }

.pp-demande{ display:flex; gap:10px; margin-top:8px; }
.pp-demande input{ flex:1; min-width:0; }
.pp-demande .ll-bouton{ flex:none; }
.pp-exemples{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pp-exemples button{
  border:1px solid var(--bordure); background:var(--surface-carte); color:var(--texte-corps);
  border-radius:var(--rayon-pilule); padding:6px 12px; font:500 12.5px/1.2 var(--police-texte); cursor:pointer;
}
.pp-exemples button:hover{ border-color:var(--action-primaire); color:var(--action-primaire); }
.pp-reponse{ margin:14px 0 0; padding:12px 14px; border-radius:var(--rayon-champ); background:var(--bleu-025); border:1px solid var(--bordure-fine); font-size:14px; line-height:1.6; color:var(--texte-corps); white-space:pre-wrap; }
.pp-reponse:empty{ display:none; }

.pp-messages .ms-fil{ min-height:120px; }
.pp-large{ grid-column:span 2; }
.fo-carte .ll-bouton .ic{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; }
.approve-row.pp-carte{ padding:16px 18px; margin-bottom:12px; }
.approve-actions{ flex-wrap:wrap; justify-content:flex-end; align-items:center; }

@media (max-width:640px){
  .pp-banque, .pp-plafond, .pp-question{ flex-direction:column; }
  .pp-demande{ flex-direction:column; }
  .pp-large{ grid-column:auto; }
}

/* Bouton « Parcourir » natif des champs fichier, aux couleurs de la charte (tous les portails). */
input[type=file]{ font:400 13px/1.2 var(--police-texte); color:var(--texte-discret); cursor:pointer; }
input[type=file]::file-selector-button{
  margin-right:10px; padding:6px 12px; cursor:pointer;
  border:1px solid var(--bordure); border-radius:var(--rayon-pilule);
  background:var(--bleu-025); color:var(--marine-900); font:500 12.5px/1 var(--police-texte);
  transition:border-color .15s, color .15s;
}
input[type=file]:hover::file-selector-button{ border-color:var(--action-primaire); color:var(--action-primaire); }
/* Fiche locataire : actions par ligne de paiement. */
.fi-actions{ text-align:right; white-space:nowrap; }
.fi-actions .vo-action + .vo-action{ margin-left:6px; }
.fi-contact{ flex-wrap:wrap; }
.fi-table td.num, .fi-table .tr-pastille{ white-space:nowrap; }
.fi-actions > div{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.fi-actions .vo-action + .vo-action{ margin-left:0; }
/* Fiche locataire : liste des loyers (remplace le tableau serré). */
.lo-paiements{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lo-paiement{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--bordure-portail); border-radius:var(--rayon-carte);
  background:var(--surface-carte); border-left:4px solid var(--bordure);
}
.lo-paiement--ok{ border-left-color:var(--succes-600); }
.lo-paiement--ko{ border-left-color:var(--urgence-600); }
.lo-paiement--att{ border-left-color:var(--alerte-600); }
.lo-p-quand b{ display:block; font:600 14px/1.3 var(--police-texte); color:var(--marine-900); }
.lo-p-quand b::first-letter{ text-transform:uppercase; }
.lo-p-quand small{ display:block; margin-top:3px; font-size:12.5px; color:var(--texte-discret); }
.lo-p-montant{ font:600 16px/1 var(--police-texte); color:var(--marine-900); white-space:nowrap; font-variant-numeric:tabular-nums; }
.lo-p-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.lo-petit{ padding:7px 14px; font-size:12.5px; white-space:nowrap; }
.lo-lien{ background:none; border:none; padding:2px 0; cursor:pointer; font:500 12px/1.2 var(--police-texte); color:var(--texte-discret); text-decoration:underline; white-space:nowrap; }
.lo-lien:hover{ color:var(--action-primaire); }
@media (max-width:640px){
  .lo-paiement{ grid-template-columns:minmax(0,1fr) auto; }
  .lo-p-actions{ grid-column:1/-1; flex-direction:row; justify-content:flex-start; align-items:center; gap:12px; }
}
/* Portail locataire */
.lo-kpi-sous{ font-size:12.5px; color:rgba(255,255,255,.75); }
.lo-form textarea{ width:100%; box-sizing:border-box; resize:vertical; }
.lo-form .ch-label small{ font-weight:400; }
.lo-form-pied{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:16px; flex-wrap:wrap; }
.lo-form-pied .form-note{ margin:0 auto 0 0; }
.lo-form-pied .ll-bouton .ic, .vo-entete .ll-bouton .ic{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.lo-demandes{ list-style:none; margin:0; padding:0; }
.lo-demande{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.lo-demande b{ display:block; font-weight:600; color:var(--marine-900); overflow-wrap:anywhere; }
.lo-demande small{ display:block; margin-top:3px; font-size:12.5px; color:var(--texte-discret); }

/* ═══════ TRAVAUX À ASSIGNER ═══════ */
.sr-carte{ background:var(--surface-carte); border:1px solid var(--bordure-portail); border-left:4px solid var(--bordure); border-radius:var(--rayon-carte); box-shadow:var(--ombre-2); padding:20px 22px; margin-bottom:16px; }
.sr-carte--urgent{ border-left-color:var(--urgence-600); }
.sr-carte--att{ border-left-color:var(--alerte-600); }
.sr-carte--refus{ border-left-color:#8a5fb0; }
.sr-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.sr-badges .tr-pastille .ic{ width:13px; height:13px; margin-right:4px; vertical-align:-2px; }
.sr-pastille--refus{ background:#f1e9f8; color:#6b3f95; }
.sr-quand{ margin-left:auto; font-size:12.5px; color:var(--texte-discret); }
.sr-titre{ margin:0; font:600 17px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.sr-titre small{ display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--texte-discret); }
.sr-desc{ margin:12px 0 0; padding:10px 14px; border-left:3px solid var(--bordure); background:var(--surface-douce, #f6f8fb); border-radius:0 var(--rayon-champ) var(--rayon-champ) 0; font-size:14px; color:var(--texte-corps); }
.sr-medias{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--texte-discret); }
.sr-media{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--bordure); border-radius:var(--rayon-pilule); background:var(--surface-carte); color:var(--marine-900); text-decoration:none; font-weight:500; }
.sr-media:hover{ border-color:var(--action-primaire); color:var(--action-primaire); }
.sr-media .ic{ width:14px; height:14px; }
.sr-ia{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.sr-ia span{ display:inline-block; min-width:150px; font-weight:600; color:var(--marine-900); }
.sr-sans-ia{ margin:12px 0 0; font-size:13px; color:var(--texte-discret); font-style:italic; }
.sr-assigner{ margin-top:16px; padding-top:16px; border-top:1px solid var(--bordure-fine); }
.sr-grille{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px 14px; }
.sr-grille > div{ min-width:0; }
.sr-grille input, .sr-grille select{ width:100%; box-sizing:border-box; }
.sr-large{ grid-column:span 2; }
.sr-plus{ margin-top:12px; }
.sr-plus summary{ cursor:pointer; font-size:13px; font-weight:500; color:var(--texte-lien, var(--action-primaire)); margin-bottom:10px; }
.sr-pied{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:16px; }
.sr-pied .ll-bouton .ic{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
@media (max-width:1100px){ .sr-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .sr-grille{ grid-template-columns:1fr; } .sr-large{ grid-column:auto; } .sr-quand{ margin-left:0; width:100%; } .sr-ia span{ display:block; } }
.sr-video{ background:var(--surface-enfoncee); white-space:pre-line; }
.sr-video .ic{ color:var(--marine-900); }
.sr-video b{ display:block; color:var(--marine-900); margin-bottom:2px; }

/* Visionneuse de pièces jointes (photos, vidéos) */
.vi-fond{ position:fixed; inset:0; z-index:1200; background:rgba(6,18,32,.88); display:none; align-items:center; justify-content:center; padding:56px 72px; }
.vi-fond.vi-ouverte{ display:flex; }
.vi-scene{ max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; }
.vi-scene img, .vi-scene video{ max-width:min(1200px, 100%); max-height:calc(100vh - 140px); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.45); background:#000; }
.vi-charge{ color:rgba(255,255,255,.8); font-size:14px; }
.vi-btn{ position:absolute; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; }
.vi-btn:hover{ background:rgba(255,255,255,.24); }
.vi-btn .ic{ width:22px; height:22px; }
.vi-fermer{ top:16px; right:16px; }
.vi-prec{ left:16px; top:50%; transform:translateY(-50%); }
.vi-suiv{ right:16px; top:50%; transform:translateY(-50%); }
.vi-bas{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:18px; font-size:13px; color:rgba(255,255,255,.8); }
.vi-bas a{ color:rgba(255,255,255,.8); }
@media (max-width:640px){ .vi-fond{ padding:56px 8px 48px; } .vi-prec{ left:6px; } .vi-suiv{ right:6px; } }
/* Portail locataire : fil par demande */
.lo-demande-bloc{ padding:0; overflow:hidden; list-style:none; margin-bottom:10px; }
.lo-demande-bloc > .lo-demande{ width:100%; margin:0; padding:16px 18px; background:none; border:none; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.lo-demande-etat{ display:inline-flex; align-items:center; gap:8px; flex:none; }
.lo-demande-etat .ic{ width:18px; height:18px; color:var(--texte-discret); transition:transform .2s; }
.lo-demande-bloc.ouverte .lo-demande-etat .ic{ transform:rotate(180deg); }
.lo-fil{ display:none; padding:4px 18px 18px; border-top:1px solid var(--bordure-fine); }
.lo-demande-bloc.ouverte .lo-fil{ display:flex; flex-direction:column; gap:12px; padding-top:16px; }
.lo-fil .ms-bulle{ max-width:88%; }
.lo-fil .ms-ecrire{ margin-top:4px; }
.lo-fil .ms-actions input[type=file]{ min-width:0; flex:1; }
.lo-pj{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.sr-fil{ margin-top:14px; border:1px solid var(--bordure-fine); border-radius:var(--rayon-carte); padding:10px 14px; }
.sr-fil summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--marine-900); display:flex; align-items:center; gap:8px; }
.sr-fil summary .ic{ width:16px; height:16px; }
.sr-fil[open] summary{ margin-bottom:12px; }
.sr-fil .ms-fil{ max-height:360px; }
.ms-actions .lo-petit .ic{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; }
/* Portail locataire : boîte « Nouvelle demande » et détail */
.lo-dialog{ border:none; border-radius:var(--rayon-carte); padding:0; width:min(640px, calc(100vw - 32px)); box-shadow:0 24px 70px rgba(10,32,56,.3); }
.lo-dialog::backdrop{ background:rgba(10,32,56,.45); }
.lo-dialog form{ padding:22px 24px; margin:0; }
.lo-dialog-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lo-dialog-tete h2{ margin:0; }
.lo-dialog .subtitle{ margin:6px 0 16px; }
.lo-conseil{ display:flex; gap:10px; padding:12px 14px; border-radius:var(--rayon-champ); background:var(--alerte-100); color:var(--texte-corps); font-size:13.5px; line-height:1.5; }
.lo-conseil .ic{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--alerte-600); }
.lo-conseil b{ display:block; color:var(--alerte-600); }
.lo-infos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.lo-infos div{ background:var(--surface-enfoncee); border-radius:var(--rayon-champ); padding:10px 12px; min-width:0; }
.lo-infos span{ display:block; font:600 10.5px/1.2 var(--police-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-discret); margin-bottom:4px; }
.lo-infos b{ font-size:14px; color:var(--marine-900); overflow-wrap:anywhere; }
.lo-infos small{ display:block; font-weight:400; color:var(--texte-discret); }
.lo-fil-titre{ margin:6px 0 0; font:600 12px/1.3 var(--police-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-discret); }
.lo-histo{ list-style:none; margin:0; padding:0; }
.lo-histo li{ display:flex; gap:12px; padding-bottom:12px; position:relative; }
.lo-histo li:not(:last-child)::before{ content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--bordure-fine); }
.lo-histo-pt{ width:28px; height:28px; border-radius:50%; background:var(--info-100); color:var(--bleu-600); display:grid; place-items:center; flex:none; }
.lo-histo-pt .ic{ width:14px; height:14px; }
.lo-histo b{ display:block; font-size:13.5px; font-weight:600; color:var(--marine-900); }
.lo-histo time{ font-size:12px; color:var(--texte-discret); }
@media (max-width:760px){ .lo-infos{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.lo-demandes > li{ list-style:none; }
.lo-demande--lien{ width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1px solid var(--bordure-portail); }
.lo-demande--lien:hover{ border-color:var(--action-primaire); }
.lo-fiche{ display:flex; flex-direction:column; gap:14px; }
.lo-fiche .sr-desc{ margin:0; }
#fiche-dem .tr-avatar .ic{ width:20px; height:20px; }
#fiche-dem .tr-ident h2{ font-size:20px; }

/* Bandeau « vue admin » dans le portail d'un client */
.ll-vue-admin{ position:sticky; top:0; z-index:1100; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:9px 16px; background:var(--alerte-100); color:var(--alerte-600); border-bottom:1px solid rgba(0,0,0,.06); font-size:13.5px; text-align:center; }
.ll-vue-admin b{ font-weight:700; }
.ll-vue-admin button{ border:1px solid currentColor; background:#fff; color:var(--alerte-600); border-radius:var(--rayon-pilule); padding:5px 14px; font:600 12.5px/1 var(--police-texte); cursor:pointer; }
.ll-vue-admin button:hover{ background:var(--alerte-600); color:#fff; }
body.avec-vue-admin .shell{ height:calc(100dvh - var(--vue-admin-h, 40px)); }
body.avec-vue-admin .fi-tiroir, body.avec-vue-admin .fi-fond{ top:var(--vue-admin-h, 40px); }
body.avec-vue-admin .fi-tiroir{ height:auto; bottom:0; }
.lo-conseil--ok{ background:var(--succes-100); }
.lo-conseil--ok .ic, .lo-conseil--ok b{ color:var(--succes-600); }
.tr-table td small{ display:block; margin-top:2px; font-size:12px; color:var(--texte-discret); }

/* Portail travailleur */
.lo-offre{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; list-style:none; }
.lo-offre b{ display:block; color:var(--marine-900); }
.lo-offre small{ display:block; margin-top:3px; color:var(--texte-discret); font-size:12.5px; }
.lo-offre-btns{ display:flex; gap:8px; flex:none; }
.galerie-t{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.galerie-t img{ width:100%; height:120px; object-fit:cover; border-radius:10px; cursor:zoom-in; display:block; }
.galerie-t video{ grid-column:1/-1; width:100%; max-height:60vh; border-radius:10px; background:#000; }
dialog.zoom-t{ border:none; padding:0; background:transparent; max-width:95vw; }
dialog.zoom-t::backdrop{ background:rgba(6,18,32,.88); }
dialog.zoom-t img{ max-width:95vw; max-height:88vh; border-radius:10px; display:block; }
.lo-repondre{ display:grid; gap:10px; margin-top:6px; }
.lo-repondre .ll-bouton{ width:100%; justify-content:center; padding:13px 16px; }
.lo-repondre .ll-bouton .ic{ width:17px; height:17px; margin-right:8px; vertical-align:-3px; }
.lo-deux{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lo-repondre .btn-ok-t{ background:var(--succes-600); color:#fff; border:none; }
.lo-repondre .btn-refus-t{ background:transparent; color:var(--urgence-600); border:1px solid var(--urgence-600); }
.muted-t{ color:var(--texte-discret); font-size:13px; }
.lo-conf{ margin-bottom:14px; }
#fiche-job .tr-avatar .ic{ width:20px; height:20px; }
#fiche-job .tr-ident h2{ font-size:20px; }
@media (max-width:640px){ .lo-offre{ flex-direction:column; align-items:flex-start; } .lo-deux{ grid-template-columns:1fr; } }

/* Premier accès : page « Choisis ton mot de passe » (plein écran) */
body.ll-mdp-actif{ overflow:hidden; }
.ll-mdp-page{ position:fixed; inset:0; z-index:2000; display:grid; grid-template-columns:minmax(300px, 440px) 1fr; background:var(--surface-page); }
.ll-mdp-cote{ background:var(--marine-900); color:#fff; padding:48px 44px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.ll-mdp-cote img{ height:30px; width:auto; align-self:flex-start; margin-bottom:auto; }
.ll-mdp-cote h2{ font-family:var(--police-titre); font-weight:600; font-size:30px; line-height:1.15; margin:0; color:#fff; }
.ll-mdp-cote p{ margin:0 0 auto; color:rgba(255,255,255,.75); font-size:14.5px; max-width:36ch; }
.ll-mdp-zone{ display:flex; align-items:center; justify-content:center; padding:32px 16px; overflow-y:auto; }
.ll-mdp-carte{ width:100%; max-width:420px; background:var(--surface-carte); border:1px solid var(--bordure-portail); border-radius:var(--rayon-carte); box-shadow:var(--ombre-2); padding:28px; display:flex; flex-direction:column; }
.ll-mdp-carte h1{ margin:0 0 6px; font-size:28px; }
.ll-mdp-carte .subtitle{ margin:0 0 18px; }
.ll-mdp-carte input{ width:100%; box-sizing:border-box; margin-bottom:14px; }
.ll-mdp-carte .ll-bouton{ margin-top:6px; padding:13px 18px; }
@media (max-width:860px){ .ll-mdp-page{ grid-template-columns:1fr; grid-template-rows:auto 1fr; } .ll-mdp-cote{ padding:24px 20px; } .ll-mdp-cote img{ margin-bottom:8px; } .ll-mdp-cote p{ margin:0; } }
/* Portail travailleur : profil */
.pf-grille{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.pf-grille > .pp-carte{ margin:0; }
.pf-titre{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font:600 15px/1.3 var(--police-texte); letter-spacing:0; text-transform:none; color:var(--marine-900); }
.pf-titre .ic{ width:17px; height:17px; color:var(--bleu-600); }
.pf-aide{ margin:-6px 0 12px; font-size:13px; color:var(--texte-discret); }
.pf-puces{ display:flex; flex-wrap:wrap; gap:8px; }
.pf-puce input{ position:absolute; opacity:0; pointer-events:none; }
.pf-puce span{ display:inline-block; padding:7px 13px; border-radius:var(--rayon-pilule); border:1px solid var(--bordure); background:var(--surface-carte); font:500 13px/1 var(--police-texte); color:var(--texte-corps); cursor:pointer; }
.pf-puce input:checked + span{ background:var(--marine-900); border-color:var(--marine-900); color:#fff; }
.pf-puce input:focus-visible + span{ box-shadow:var(--lueur-focus); }
.pf-bascule{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:14px; color:var(--texte-corps); cursor:pointer; }
.pf-bascule input{ width:18px; height:18px; accent-color:var(--action-primaire); flex:none; }
.pf-horaire{ display:flex; flex-direction:column; gap:6px; }
.pf-jour{ display:grid; grid-template-columns:130px 1fr auto 1fr; align-items:center; gap:8px; padding:4px 0; opacity:.55; }
.pf-jour.actif{ opacity:1; }
.pf-jour .pf-bascule{ margin:0; font-weight:500; }
.pf-jour input[type=time]{ width:100%; box-sizing:border-box; }
.pf-a{ font-size:13px; color:var(--texte-discret); }
.pf-pied{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:16px; }
.pf-pied .msg{ margin:0; }
@media (max-width:900px){ .pf-grille{ grid-template-columns:1fr; } }
@media (max-width:480px){ .pf-jour{ grid-template-columns:1fr 1fr; } .pf-jour .pf-bascule{ grid-column:1/-1; } .pf-a{ display:none; } }
.pf-grille{ align-items:start; }
.pf-grille input:not([type=checkbox]):not([type=radio]), .pf-grille select{ width:100%; box-sizing:border-box; }

/* ═══════ NAVIGATION TÉLÉPHONE (assets/mobile.js) ═══════
   Remplace la bande d'onglets horizontale : barre du haut (☰ + onglet
   courant) et menu latéral qui glisse. Les !important l'emportent sur les
   anciennes règles mobiles des portails (onglets en ligne). */
.ll-barre-mobile, .ll-nav-fond{ display:none; }
@media (max-width:860px){
  .shell{ flex-direction:column !important; }
  .ll-barre-mobile{
    display:flex; align-items:center; gap:10px; flex:none; height:56px; padding:0 10px 0 6px;
    background:var(--surface-carte); border-bottom:1px solid var(--bordure-fine); position:relative; z-index:30;
  }
  .ll-menu-btn{ width:44px; height:44px; display:grid; place-items:center; border:none; background:none; border-radius:10px; color:var(--marine-900); cursor:pointer; }
  .ll-menu-btn:hover, .ll-menu-btn:focus-visible{ background:var(--surface-enfoncee); outline:none; }
  .ll-menu-btn .ic{ width:24px; height:24px; }
  .ll-barre-titre{ flex:1; min-width:0; font:600 16px/1.2 var(--police-texte); color:var(--marine-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ll-barre-mobile img{ height:22px; width:auto; flex:none; }

  .shell > aside{
    position:fixed !important; top:0; left:0; bottom:0; z-index:960;
    width:min(300px, 84vw) !important; height:100dvh !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:2px !important;
    overflow-y:auto !important; overflow-x:hidden !important; white-space:normal !important;
    padding:18px 10px 24px !important; margin:0 !important;
    background:var(--surface-carte) !important; border:0 !important; border-right:1px solid var(--bordure-fine) !important;
    box-shadow:12px 0 40px rgba(10,32,56,.18);
    transform:translateX(-105%); transition:transform .22s ease;
  }
  body.nav-ouverte .shell > aside{ transform:none; }
  .shell > aside .brand, .shell > aside .brand-sub, .shell > aside .nav-group-label{ display:block !important; }
  .shell > aside .tab-btn{
    display:flex !important; align-items:center; width:100% !important; height:auto !important; min-height:46px;
    padding:10px 14px !important; margin:0 !important; border-radius:var(--rayon-champ) !important;
    font-size:15px !important; white-space:normal !important; text-align:left; border-left:0 !important; border-bottom:0 !important;
  }
  .shell > aside .signout{ display:block !important; margin:12px 0 0 !important; padding:10px 0 0 !important; border-top:1px solid var(--bordure-fine) !important; }
  .ll-nav-fond{ display:block; position:fixed; inset:0; z-index:955; background:rgba(10,32,56,.4); opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-ouverte .ll-nav-fond{ opacity:1; pointer-events:auto; }
  .shell > main{ flex:1; min-height:0; height:auto !important; padding:18px 16px 40px !important; }
}
@media (max-width:860px){
  /* Les fiches latérales sont aussi des <aside> : l'ancienne règle mobile
     (onglets en ligne) les mettait à l'horizontale et les rendait illisibles. */
  aside.fi-tiroir{
    display:block !important; flex-direction:column !important; white-space:normal !important;
    overflow-y:auto !important; overflow-x:hidden !important; gap:0 !important;
    position:fixed !important; top:var(--vue-admin-h, 0px) !important; right:0; bottom:0; left:auto;
    width:100vw !important; height:auto !important; padding:16px 16px 40px !important;
    border:0 !important; background:var(--surface-carte) !important;
  }
  .fi-tete h2{ font-size:22px; }
  .fi-contact{ flex-wrap:wrap; gap:8px; }
  .fi-contact .ll-bouton{ flex:1 1 auto; justify-content:center; }
  .fi-onglets{ overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
  .fi-onglets::-webkit-scrollbar{ display:none; }
  .fi-onglet{ flex:none; }
  /* Tableaux en cartes : pas de flèche de ligne, filtres pleine largeur. */
  .tr-table .tr-chev{ display:none; }
  .tr-outils{ flex-direction:column; align-items:stretch; }
  .tr-outils select, .tr-outils .tr-recherche{ width:100% !important; max-width:none; }
  .lo-infos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sr-badges .sr-quand{ width:100%; margin-left:0; }
}
@media (max-width:860px){ .tr-outils > *{ flex:none !important; } }
@media (max-width:640px){ .vo-kpi b{ font-size:22px !important; overflow-wrap:anywhere; } .vo-kpi{ padding:14px 14px; } }
/* Portail travailleur : disponibilité */
.dispo{ margin-bottom:16px; }
.dispo .pf-titre{ margin-bottom:4px; }
.dispo-texte{ margin:0 0 14px; font-size:13.5px; color:var(--texte-discret); }
.dispo-choix{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.dispo-choix .avail-btn{
  display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; text-align:left;
  padding:12px 14px !important; margin:0 !important; border:1px solid var(--bordure) !important; border-radius:var(--rayon-carte) !important;
  background:var(--surface-carte) !important; color:var(--texte-corps) !important; cursor:pointer; font:inherit;
}
.dispo-choix .avail-btn:hover{ border-color:var(--action-primaire) !important; }
.dispo-choix .avail-btn b{ font:600 14px/1.2 var(--police-texte); color:var(--marine-900); }
.dispo-choix .avail-btn small{ grid-column:2; font-size:12px; color:var(--texte-discret); margin-top:2px; }
.dispo-choix .avail-btn .point{ grid-row:1 / span 2; width:12px; height:12px; border-radius:50%; }
.point--vert{ background:#1f9d6a; } .point--bleu{ background:var(--action-primaire); } .point--ambre{ background:#d9921a; } .point--gris{ background:#9aa5b1; }
.dispo-choix .avail-btn.active{ border-color:var(--marine-900) !important; background:var(--marine-900) !important; box-shadow:var(--ombre-2); }
.dispo-choix .avail-btn.active b{ color:#fff; }
.dispo-choix .avail-btn.active small{ color:rgba(255,255,255,.75); }
.dispo-choix .avail-btn.active .point{ box-shadow:0 0 0 3px rgba(255,255,255,.25); }
@media (max-width:900px){ .dispo-choix{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* Portail travailleur : calendrier des rendez-vous */
.cal-bloc{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0,1fr); gap:16px; align-items:start; }
.cal{ margin:0; }
.cal-tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-tete b{ font:600 15px/1 var(--police-texte); color:var(--marine-900); text-transform:capitalize; }
.cal-nav{ width:36px; height:36px; border-radius:50%; border:1px solid var(--bordure); background:var(--surface-carte); display:grid; place-items:center; cursor:pointer; color:var(--marine-900); }
.cal-nav .ic{ width:18px; height:18px; }
.cal-grille{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cal-js{ text-align:center; font:600 11px/2 var(--police-texte); color:var(--texte-discret); }
.cal-j{ aspect-ratio:1; min-height:38px; border:none; border-radius:10px; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:500 13.5px/1 var(--police-texte); color:var(--texte-corps); }
.cal-j:hover{ background:var(--surface-enfoncee); }
.cal-j.plein{ font-weight:700; color:var(--marine-900); background:var(--bleu-025); }
.cal-j.auj span:first-child{ width:26px; height:26px; line-height:26px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--action-primaire); }
.cal-j.choisi{ background:var(--marine-900) !important; color:#fff; }
.cal-pts{ display:flex; gap:3px; height:6px; }
.cal-pt{ display:inline-block; width:6px; height:6px; border-radius:50%; }
.cal-pt--ok{ background:#1f9d6a; } .cal-pt--att{ background:#d9921a; }
.cal-j.choisi .cal-pt{ box-shadow:0 0 0 1.5px #fff; }
.cal-legende{ display:flex; gap:14px; margin-top:12px; font-size:12px; color:var(--texte-discret); }
.cal-legende span{ display:inline-flex; align-items:center; gap:6px; }
.cal-jour .pf-titre{ text-transform:none; }
.cal-jour .pf-titre::first-letter{ text-transform:uppercase; }
.cal-rdv{ display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; }
.cal-heure{ display:flex; flex-direction:column; align-items:center; min-width:56px; padding:6px 8px; border-radius:10px; background:var(--surface-enfoncee); }
.cal-heure b{ font-size:15px; color:var(--marine-900); }
.cal-heure small{ font-size:11.5px; color:var(--texte-discret); margin:0 !important; }
@media (max-width:900px){ .cal-bloc{ grid-template-columns:1fr; } }
@media (max-width:480px){ .cal-rdv{ grid-template-columns:auto minmax(0,1fr); } .cal-rdv .tag{ grid-column:2; justify-self:start; } }
.autre-heure{ margin:0; }
.autre-heure input, .autre-heure textarea{ width:100%; box-sizing:border-box; }
.lo-conseil--prop{ background:var(--info-100); }
.lo-conseil--prop .ic, .lo-conseil--prop b{ color:var(--bleu-600); }
/* Une fiche longue (vidéo, long fil) comprimait la rangée d'onglets à
   1 px : dans une colonne flex, un enfant avec overflow ≠ visible perd sa
   hauteur minimale. Aucun bloc de la fiche ne doit rétrécir. */
.fi-tiroir > *{ flex-shrink:0; }
.fi-onglets{ flex:none; min-height:max-content; }
/* Portail travailleur : « Terminer » (photos avant / après) */
.fin-zones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fin-zone{ border:1.5px dashed var(--bordure); border-radius:var(--rayon-carte); padding:12px; background:var(--surface-douce, #f6f8fb); display:flex; flex-direction:column; gap:10px; }
.fin-zone.ok{ border-style:solid; border-color:#1f9d6a; background:var(--succes-100); }
.fin-zone-tete{ display:flex; justify-content:space-between; align-items:center; }
.fin-zone-tete b{ font-size:14px; color:var(--marine-900); }
.fin-compte{ font:600 12px/1 var(--police-texte); color:var(--texte-discret); }
.fin-vignettes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.fin-vignettes:empty{ display:none; }
.fin-vign{ position:relative; aspect-ratio:1; }
.fin-vign img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.fin-vign button{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(6,18,32,.75); color:#fff; font-size:15px; line-height:22px; cursor:pointer; padding:0; }
.fin-ajout{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:96px; border-radius:10px; background:var(--surface-carte); border:1px solid var(--bordure); cursor:pointer; color:var(--action-primaire); font:600 13px/1.2 var(--police-texte); text-align:center; }
.fin-ajout:hover{ border-color:var(--action-primaire); }
.fin-ajout .ic{ width:24px; height:24px; }
.fin-ajout input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.fin-ajout[hidden]{ display:none; }
.fin-note{ width:100%; box-sizing:border-box; resize:vertical; }
.fin-envoyer{ width:100%; justify-content:center; padding:14px 18px; background:var(--succes-600); color:#fff; border:none; font-size:15px; }
.fin-envoyer .ic{ width:18px; height:18px; margin-right:8px; vertical-align:-3px; }
.fin-envoyer:disabled{ background:var(--surface-enfoncee); color:var(--texte-discret); cursor:not-allowed; }
.fin-aide{ margin:-4px 0 0; text-align:center; font-size:12.5px; color:var(--texte-discret); }
@media (max-width:420px){ .fin-zones{ grid-template-columns:1fr; } }

/* Fiche locataire (admin) — onglet Demandes : liste en cartes. */
.lo-dem-admin{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.lo-dem-admin li{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface, #fff); border:1px solid var(--bordure, #E3E8EF); border-radius:var(--rayon-carte, 12px); }
.lo-dem-ic{ flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-enfoncee); color:var(--marine-900); }
.lo-dem-ic--urgent{ background:var(--urgence-100); color:var(--urgence-600); }
.lo-dem-txt{ flex:1; min-width:0; }
.lo-dem-txt b{ display:block; font-weight:600; color:var(--marine-900); overflow-wrap:anywhere; }
.lo-dem-txt small{ display:block; margin-top:3px; font-size:12.5px; color:var(--texte-discret); }
.lo-dem-txt em{ font-style:normal; font-weight:600; color:var(--urgence-600); }
.lo-dem-admin .tr-pastille{ flex:none; white-space:nowrap; }

/* Confirmation de réparation (portail locataire + page du lien courriel). */
.cf-carte{ border:1px solid var(--succes-500); background:var(--succes-100); border-radius:var(--rayon-carte, 12px); padding:18px; display:flex; flex-direction:column; gap:12px; }
.cf-tete{ display:flex; gap:12px; align-items:flex-start; }
.cf-tete b{ display:block; font-size:15.5px; color:var(--marine-900); }
.cf-tete small{ display:block; margin-top:3px; font-size:13px; color:var(--texte-corps); }
.cf-ic{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--succes-500); color:#fff; }
.cf-label{ margin:4px 0 6px; font-size:13px; font-weight:600; color:var(--marine-900); }
.cf-etoiles{ display:flex; gap:4px; margin-bottom:10px; }
.cf-etoiles button{ background:none; border:none; padding:2px; font-size:30px; line-height:1; color:#C9D2DE; cursor:pointer; transition:transform .1s, color .1s; }
.cf-etoiles button:hover{ transform:scale(1.12); }
.cf-etoiles button.on{ color:#E3A008; }
.cf-carte textarea{ width:100%; background:#fff; }
.cf-boutons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.cf-boutons .ll-bouton{ flex:1 1 200px; justify-content:center; }
.cf-carte .ll-bouton--secondaire{ background:#fff; }
.md-resume{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.md-resume div{ background:var(--surface-enfoncee); border-radius:var(--rayon-champ); padding:10px 14px; }
.md-resume span{ display:block; font:600 10.5px/1.2 var(--police-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-discret); margin-bottom:4px; }
.md-resume b{ font-size:18px; color:var(--marine-900); }
.md-paie{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.md-paie > b{ font-size:16px; color:var(--marine-900); }
.md-paie small{ font-size:12px; color:var(--texte-discret); }
@media (max-width:520px){ .lo-dem-admin li{ flex-wrap:wrap; } .md-paie{ width:100%; flex-direction:row; justify-content:space-between; align-items:center; } }

/* Travaux à assigner — tâche humaine quand l'analyse IA a échoué. */
.sr-tache{ margin-top:12px; padding:14px 16px; border-radius:var(--rayon-champ); border:1px solid var(--alerte-600, #9A6700); background:var(--alerte-100); }
.sr-tache--retard{ border-color:var(--urgence-600); background:var(--urgence-100); }
.sr-tache-tete{ display:flex; align-items:center; gap:8px; color:var(--marine-900); }
.sr-tache-tete .ic{ width:18px; height:18px; color:var(--alerte-600, #9A6700); }
.sr-tache--retard .sr-tache-tete .ic{ color:var(--urgence-600); }
.sr-tache-err{ margin:6px 0 8px; font-size:12.5px; color:var(--texte-discret); overflow-wrap:anywhere; }
.sr-tache em{ font-style:normal; font-weight:600; color:var(--urgence-600); }
.sr-tache-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sr-badges .ll-bouton{ padding:4px 12px; font-size:12.5px; }

/* Portail propriétaire — immeuble cliquable, filtres. */
.pf-voir{ text-align:right; white-space:nowrap; color:var(--action-primaire); font-weight:600; font-size:13px; }
.pf-voir .ic{ width:14px; height:14px; vertical-align:-2px; }
.tr-compte{ margin:0 0 8px; font-size:13px; color:var(--texte-discret); }
.tr-table td small + small{ margin-top:0; }
.pf-fiche-lien{ margin-top:14px; }

/* Aperçu d'un document dans l'application (assets/ui.js llApercu). */
.ll-apercu{ position:fixed; inset:0; z-index:3000; background:rgba(6,18,32,.72); display:flex; align-items:center; justify-content:center; padding:24px; }
.ll-apercu__boite{ width:min(1000px, 100%); height:min(92vh, 1200px); background:var(--surface-carte, #fff); border-radius:var(--rayon-carte); box-shadow:var(--ombre-3, 0 20px 60px rgba(0,0,0,.35)); display:flex; flex-direction:column; overflow:hidden; }
.ll-apercu__tete{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--bordure); }
.ll-apercu__tete b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--marine-900); }
.ll-apercu__lien{ font-size:13px; font-weight:600; white-space:nowrap; }
.ll-apercu__fermer{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--bordure); background:#fff; font-size:22px; line-height:1; cursor:pointer; color:var(--marine-900); }
.ll-apercu__corps{ flex:1; min-height:0; background:#525659; display:flex; align-items:center; justify-content:center; }
.ll-apercu__corps iframe{ width:100%; height:100%; border:0; background:#fff; }
.ll-apercu__corps img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:640px){ .ll-apercu{ padding:0; } .ll-apercu__boite{ height:100%; border-radius:0; } }
.pf-doc-actions{ text-align:right; white-space:nowrap; }
.pf-doc-actions > * + *{ margin-left:8px; }
.sr-lien-archives{ border:none; cursor:pointer; font:inherit; }
.sr-lien-archives:hover{ text-decoration:underline; }