/* APOS : feuille de style unique. Identité ARAN, exigence de finition « premium ».
   Repères propres à APOS : barre de navigation flottante navy, titres en Exo (police de la
   charte) précédés d'une barre verte, bandeau d'accueil navy, aperçu en panneau latéral.
   Fond clair, cartes blanches, grands espaces, animations douces.
   Couleurs ARAN : navy #151228 (structure, boutons), bleu #656bb0 (liens, accents),
   vert #bbcf33 (signature). Texte courant : police du système.
   Aucun style dans les pages (CSP stricte) : tout est ici. */

@font-face { font-family: "Exo"; font-weight: 600; font-display: swap;
  src: url("vendor/polices/exo-latin-600-normal.f74683c257db.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-weight: 700; font-display: swap;
  src: url("vendor/polices/exo-latin-700-normal.a3a53af2eb3f.woff2") format("woff2"); }

:root {
  --accent: #656bb0;
  --accent-clair: #7a80c6;
  --accent-fonce: #4e549c;
  --accent-voile: rgba(101, 107, 176, 0.14);
  --vert: #bbcf33;
  --vert-fonce: #6f7d10;
  --navy: #151228;
  --navy-2: #241f45;

  --fond: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --texte: #1d1d1f;
  --texte-2: #424245;
  --texte-discret: #6e6e73;
  --texte-tres-discret: #86868b;
  --trait: rgba(0, 0, 0, 0.08);
  --trait-fort: #d2d2d7;

  --rouge: #d70015;
  --rouge-voile: rgba(255, 59, 48, 0.1);
  --vert-ios: #34c759;

  /* Verre, pour ce qui flotte. */
  --verre: rgba(255, 255, 255, 0.72);
  --verre-dense: rgba(251, 251, 253, 0.92);
  --verre-liseré: rgba(255, 255, 255, 0.75);
  --verre-flou: saturate(180%) blur(20px);
  --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ombre: 0 2px 12px rgba(0, 0, 0, 0.06);
  --ombre-carte: 2px 4px 12px rgba(0, 0, 0, 0.08);
  --ombre-carte-survol: 2px 4px 16px rgba(0, 0, 0, 0.16);
  --ombre-flottante: 0 10px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);

  --rayon: 18px;
  --rayon-groupe: 16px;
  --rayon-moyen: 12px;
  --capsule: 980px;

  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-affichage: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-marque: "Exo", var(--police-affichage);
  --largeur: 76rem;
  --hauteur-nav: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Un élément masqué l'est toujours, même s'il a un affichage défini plus bas (menus). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hauteur-nav) + 1rem); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--police-marque); color: var(--navy); line-height: 1.1; }
h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.35rem; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.005em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 0.9rem; }
.discret { color: var(--texte-discret); font-size: 0.875rem; letter-spacing: -0.01em; }
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icone { flex: 0 0 auto; }
:focus-visible { outline: 3px solid rgba(101, 107, 176, 0.45); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-voile); }

/* Matière de verre (ce qui flotte au-dessus du contenu). */
.verre, .menu-deroulant, .suggestions-conteneur, .js .notifications .message, .barre-actions {
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
}

/* ------------------------------------------------------------------ Barre de navigation flottante */

.navigation-globale { position: sticky; top: 0.75rem; z-index: 50; padding: 0 1rem; }
.dock {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 64rem; margin: 0.75rem auto 0; padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  border-radius: var(--capsule);
  background: rgba(21, 18, 40, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 10px 30px rgba(21, 18, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}
.dock-marque { display: flex; align-items: center; gap: 0.55rem; margin-right: 0.5rem; color: #fff; font-family: var(--police-marque); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; }
.dock-marque:hover { text-decoration: none; color: #fff; }
.marque-logo {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--vert); color: var(--navy); font-family: var(--police-marque); font-weight: 700; font-size: 0.9rem; letter-spacing: 0;
}
.dock-liens { display: flex; align-items: center; gap: 0.15rem; flex: 1; margin: 0; padding: 0; list-style: none; }
.dock-liens > li { position: relative; }
.dock-liens > li > a {
  position: relative; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.85rem; border-radius: var(--capsule);
  color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.2s, color 0.2s;
}
.dock-liens > li > a .icone { width: 16px; height: 16px; }
.dock-liens > li > a:hover, .dock-liens > li > a[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.dock-liens > li > a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Signature : point vert sous la rubrique active. */
.dock-liens > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0.12rem; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--vert);
}
.dock-outils { display: flex; align-items: center; gap: 0.3rem; }
.dock-outil { position: relative; }
.dock-bouton {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.dock-bouton:hover, .dock-bouton[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.dock-bouton .icone { width: 17px; height: 17px; }
.dock-bouton-accent { background: var(--vert); color: var(--navy); }
.dock-bouton-accent:hover { background: #c9db4a; color: var(--navy); }
.avatar-mini { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }

/* Menus compacts sous chaque rubrique. */
.popover-menu {
  position: absolute; z-index: 60; top: calc(100% + 0.75rem); left: 50%;
  width: 19rem; padding: 0.45rem;
  border-radius: 18px; background: var(--surface); color: var(--texte);
  box-shadow: 0 0 0 1px rgba(21, 18, 40, 0.06), 0 18px 48px rgba(21, 18, 40, 0.18);
  opacity: 0; transform: translate(-50%, -6px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.popover-menu.ouvert { opacity: 1; transform: translate(-50%, 0); }
/* Passerelle invisible au-dessus du menu : le curseur qui descend de la barre vers le menu
   reste « dans » la navigation, le menu ne se referme pas en chemin. */
.popover-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.9rem; }
.popover-droite { left: auto; right: 0; transform: translateY(-6px); }
.popover-droite.ouvert { transform: none; }
.popover-lien { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.65rem; border-radius: 12px; color: var(--texte); }
.popover-lien:hover { background: #f3f3f8; text-decoration: none; }
.popover-lien strong { display: block; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
.popover-lien small { display: block; font-size: 0.75rem; color: var(--texte-discret); letter-spacing: -0.005em; }
.popover-icone { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #eef0fa; color: var(--accent); }
.popover-icone .icone { width: 17px; height: 17px; }
.popover-lien-simple { padding: 0.45rem 0.65rem; font-size: 0.875rem; color: var(--texte-2); }
.popover-titre { margin: 0.5rem 0.65rem 0.3rem; font-size: 0.75rem; color: var(--texte-discret); overflow: hidden; text-overflow: ellipsis; }
.popover-pied { margin: 0.35rem 0 0; padding: 0.45rem 0.65rem 0.25rem; border-top: 1px solid var(--trait); }
.popover-pied .lien { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texte-2); font-size: 0.875rem; }
.popover-pied .lien:hover { color: var(--rouge); }
.popover-recherche { width: 26rem; }
.recherche-popover { position: relative; display: flex; align-items: center; margin: 0.15rem 0 0.4rem; }
.recherche-popover .icone { position: absolute; left: 0.8rem; color: var(--texte-discret); }
.recherche-popover input[type="search"] { padding-left: 2.3rem; border-radius: 12px; background: #f3f3f8; border-color: transparent; }

.contenu { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 2.25rem 1.5rem 6rem; }

/* ------------------------------------------------------------------ Boutons en capsule */

.bouton, button[type="submit"]:not(.lien):not(.bouton-icone):not(.bouton-secondaire):not(.bouton-verre),
.carte button:not(.bouton-secondaire):not(.bouton-icone):not(.bouton-verre) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.2rem; border: 0; border-radius: var(--capsule);
  background: linear-gradient(180deg, var(--accent-clair) 0%, var(--accent) 55%, var(--accent-fonce) 100%);
  color: #fff; font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(101, 107, 176, 0.35);
  transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
}
.bouton:hover, button[type="submit"]:not(.lien):not(.bouton-icone):not(.bouton-secondaire):not(.bouton-verre):hover,
.carte button:not(.bouton-secondaire):not(.bouton-icone):not(.bouton-verre):hover { filter: brightness(1.06); color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(101, 107, 176, 0.42); }
.bouton:active, button:active { transform: scale(0.97); }
.bouton .icone { width: 16px; height: 16px; }

/* Bouton de verre (secondaire). */
.bouton-verre, .bouton-secondaire, a.bouton-secondaire, button.bouton-secondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.15rem; border-radius: var(--capsule);
  background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-liseré); box-shadow: var(--reflet), 0 1px 4px rgba(31, 29, 61, 0.08);
  color: var(--texte); font: inherit; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.15s;
}
.bouton-verre:hover, .bouton-secondaire:hover { background: rgba(255, 255, 255, 0.9); text-decoration: none; color: var(--texte); }
.bouton-icone { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texte-discret); cursor: pointer; }
.bouton-icone:hover { background: rgba(255, 255, 255, 0.7); color: var(--texte); }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.actions > a:not(.bouton):not(.bouton-secondaire):not(.bouton-verre) { color: var(--accent); font-size: 0.875rem; padding: 0 0.4rem; }

/* ------------------------------------------------------------------ En-têtes de page */

.fil { font-size: 0.8125rem; color: var(--texte-tres-discret); margin: 0 0 0.75rem; }
.fil a { color: var(--texte-discret); }
.barre-titre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin: 0.5rem 0 2.5rem; }
.barre-titre h1 { margin: 0; }
.barre-titre .actions { margin-top: 0; }
.sous-titre { color: var(--texte-discret); font-size: 1.1875rem; margin: 0.4rem 0 0; letter-spacing: -0.02em; line-height: 1.35; }

/* Titre géant façon « Store », avec un texte d'accroche à droite. */
.titre-geant { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin: 1rem 0 3rem; }
.titre-geant h1 { font-size: clamp(3rem, 7vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin: 0; }
.titre-geant-accroche { text-align: right; max-width: 22rem; }
.titre-geant-accroche p { margin: 0 0 0.75rem; font-family: var(--police-affichage); font-size: 1.75rem; font-weight: 600; line-height: 1.14; letter-spacing: -0.03em; }
.titre-geant-accroche a { display: block; font-size: 0.875rem; line-height: 1.9; }
/* Titre de section : petite barre verte ARAN devant le titre. */
.titre-section { display: flex; align-items: center; gap: 0.7rem; margin: 3rem 0 1.25rem; font-size: 1.375rem; font-weight: 600; color: var(--navy); }
.titre-section::before { content: ""; width: 0.35rem; height: 1.25rem; border-radius: 3px; background: var(--vert); }
.titre-section span { margin-left: auto; font-family: var(--police); font-size: 0.875rem; font-weight: 400; color: var(--texte-discret); }
.titre-section:first-child { margin-top: 0; }
.surtitre { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }

/* ------------------------------------------------------------------ Surfaces */

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.panneau, .groupe, .tableau-defilant, .indicateur, .colonne-cadre, .message, .carte { background: var(--surface); }
.panneau { border-radius: var(--rayon); padding: 1.75rem 1.9rem; margin-bottom: 1.25rem; box-shadow: var(--ombre); }
.grille .panneau { margin-bottom: 0; }
.panneau h2 { margin: 0 0 1.25rem; font-size: 1.1875rem; }

.carte { max-width: 30rem; margin: 3rem auto; padding: 2.5rem 2.5rem 2.25rem; border-radius: 28px; box-shadow: var(--ombre-carte); }
.carte-large { max-width: 44rem; }
.carte h1 { font-size: 2rem; margin-bottom: 0.75rem; }
.aide { color: var(--texte-discret); font-size: 1rem; margin-bottom: 1.75rem; }

.proprietes { display: grid; grid-template-columns: 9rem 1fr; margin: 0 0 1.25rem; font-size: 0.9375rem; }
.proprietes dt, .proprietes dd { padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
.proprietes dt { color: var(--texte-discret); }
.proprietes dd { margin: 0; overflow-wrap: anywhere; color: var(--texte); }
.proprietes dt:last-of-type, .proprietes dd:last-of-type { border-bottom: 0; }

.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid var(--trait); font-size: 0.9375rem; }
.liste-simple li:first-child { padding-top: 0.15rem; }
.liste-simple li:last-child { border-bottom: 0; }

.avatar {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(160deg, #b9bce6, #8e93d1); color: #fff; font-weight: 600; font-size: 0.75rem; letter-spacing: 0;
}
.avatar-entreprise { border-radius: 9px; background: linear-gradient(160deg, #dce6a0, #aebf3a); }
.nom-avec-avatar { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 500; color: var(--texte); }
.nom-avec-avatar:hover { color: var(--accent); text-decoration: none; }

/* Boutons : principal navy, secondaire blanc bordé. */
.bouton, button[type="submit"]:not(.lien):not(.bouton-icone):not(.bouton-secondaire):not(.bouton-verre),
.carte button:not(.bouton-secondaire):not(.bouton-icone):not(.bouton-verre) {
  background: var(--navy); box-shadow: 0 1px 2px rgba(21, 18, 40, 0.2); font-weight: 500; font-size: 0.9375rem; padding: 0.6rem 1.25rem; letter-spacing: -0.01em;
}
.bouton:hover, button[type="submit"]:not(.lien):not(.bouton-icone):not(.bouton-secondaire):not(.bouton-verre):hover,
.carte button:not(.bouton-secondaire):not(.bouton-icone):not(.bouton-verre):hover { background: var(--navy-2); filter: none; box-shadow: 0 4px 12px rgba(21, 18, 40, 0.25); }
.bouton-verre, .bouton-secondaire, a.bouton-secondaire, button.bouton-secondaire {
  padding: 0.55rem 1.2rem; border: 1px solid var(--trait-fort); background: var(--surface); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--navy); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
}
.bouton-verre:hover, .bouton-secondaire:hover { background: #f3f3f8; border-color: #c4c4cc; color: var(--navy); }
.bouton-vert { background: var(--vert) !important; color: var(--navy) !important; }
.bouton-vert:hover { background: #c9db4a !important; }
.bouton .icone { width: 17px; height: 17px; }
.lien-fleche::after { content: " ›"; }

/* ------------------------------------------------------------------ Étiquettes */

.etiquette { display: inline-flex; align-items: center; padding: 0.12rem 0.6rem; border-radius: var(--capsule); background: rgba(118, 118, 128, 0.12); color: var(--texte-2); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.etiquette-alerte { background: var(--rouge-voile); color: var(--rouge); }
.etiquette-succes { background: rgba(52, 199, 89, 0.14); color: #248a3d; }

/* ------------------------------------------------------------------ Messages */

.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.message { padding: 0.75rem 1rem; border-radius: var(--rayon-moyen); margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--texte-2); }
.message::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 0.6rem; vertical-align: 0.1em; }
.message-success::before { background: var(--vert-ios); }
.message-error::before { background: var(--rouge); }
.message-warning::before { background: #ff9500; }
.message ul { display: inline; list-style: none; padding: 0; margin: 0; }
.bandeau-alerte { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; padding: 0.9rem 1.2rem; margin-bottom: 1.75rem; border-radius: var(--rayon-groupe); background: rgba(255, 235, 234, 0.75); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border: 1px solid rgba(255, 255, 255, 0.7); color: #a1000f; font-size: 0.875rem; }
.bandeau-alerte a, .lien-alerte { color: var(--rouge); font-weight: 500; }

/* ------------------------------------------------------------------ Tableaux */

.tableau-defilant { overflow-x: auto; border-radius: var(--rayon); margin-bottom: 1.5rem; padding: 0.35rem 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tableau th { text-align: left; padding: 0.7rem 1.25rem 0.55rem; font-size: 0.75rem; font-weight: 500; color: var(--texte-tres-discret); }
.tableau td { padding: 0.75rem 1.25rem; border-top: 1px solid var(--trait); vertical-align: middle; color: var(--texte-2); }
.tableau tbody tr { transition: background 0.15s; }
.tableau tbody tr:hover td { background: rgba(255, 255, 255, 0.55); }
.pagination { display: flex; gap: 1.25rem; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--texte-discret); }

/* ------------------------------------------------------------------ Champs (base) */

label { display: block; font-weight: 500; font-size: 0.8125rem; color: var(--texte-2); margin-bottom: 0.4rem; }
form p, form > div { margin: 0 0 1.15rem; }
input[type="email"], input[type="password"], input[type="text"], input[type="search"], input[type="url"],
input[type="number"], input[type="datetime-local"], input[type="tel"], select, textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen);
  background: rgba(255, 255, 255, 0.85); color: var(--texte); font: inherit; font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none; appearance: none;
}
select {
  padding-right: 2.2rem;
  /* Double chevron, comme les menus contextuels de macOS. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E");
  background-position: calc(100% - 0.8rem) 50%;
  background-size: 10px 14px;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-voile); background-color: #fff; }
input::placeholder, textarea::placeholder { color: var(--texte-tres-discret); }
.helptext { display: block; font-size: 0.75rem; color: var(--texte-tres-discret); margin-top: 0.3rem; line-height: 1.4; }
.helptext ul { margin: 0.2rem 0 0; padding-left: 1rem; }
.errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; color: var(--rouge); font-size: 0.8125rem; }

/* Interrupteur façon iOS pour les cases à cocher. */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 2.75rem; height: 1.65rem; margin: 0; border-radius: var(--capsule); cursor: pointer;
  background: rgba(120, 120, 128, 0.2) radial-gradient(circle at 0.82rem 50%, #fff 0.62rem, transparent 0.66rem);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: background-color 0.25s, background-position 0.25s;
  background-repeat: no-repeat; background-position: 0 0;
}
input[type="checkbox"]:checked { background-color: var(--vert-ios); background-position: 1.1rem 0; }
input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--accent-voile); }

/* ------------------------------------------------------------------ Formulaires groupés (Réglages iPhone) */

.page-formulaire { max-width: 46rem; margin: 0 auto; }
.entete-formulaire { margin: 0.5rem 0 2rem; }
.entete-formulaire h1 { margin-top: 0.4rem; }
.retour { display: inline-block; font-size: 0.9375rem; font-weight: 500; }
.section-formulaire { margin: 0 0 1.75rem; }
.section-titre { margin: 0 0 0.5rem 1.1rem; font-family: var(--police); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--texte-discret); }
.note-section { margin: 0.5rem 1.1rem 0; font-size: 0.75rem; color: var(--texte-tres-discret); }

.groupe { position: relative; border-radius: var(--rayon-groupe); margin: 0; background: var(--verre-dense); }
/* Le groupe en cours de saisie passe au-dessus des suivants (suggestions, menus). */
.groupe:focus-within { z-index: 3; }
.groupe .champ:first-child { border-radius: var(--rayon-groupe) var(--rayon-groupe) 0 0; }
.groupe .champ:last-child { border-radius: 0 0 var(--rayon-groupe) var(--rayon-groupe); }
.groupe .champ:only-child { border-radius: var(--rayon-groupe); }
.groupe .champ {
  position: relative; display: grid; grid-template-columns: 10.5rem 1fr; align-items: center; column-gap: 1rem;
  min-height: 3.1rem; margin: 0; padding: 0.15rem 1.1rem;
  transition: background 0.2s;
}
/* Séparateur fin, décalé à gauche comme sur iOS. */
.groupe .champ + .champ::before { content: ""; position: absolute; top: 0; left: 1.1rem; right: 0; height: 1px; background: var(--trait); }
.groupe .champ:focus-within { background: rgba(101, 107, 176, 0.05); }
.groupe .champ > label { margin: 0; padding: 0.8rem 0; font-size: 0.9375rem; font-weight: 400; color: var(--texte); }
.groupe .champ-saisie { min-width: 0; padding: 0.15rem 0; }
.groupe input[type="email"], .groupe input[type="password"], .groupe input[type="text"], .groupe input[type="url"],
.groupe input[type="number"], .groupe input[type="datetime-local"], .groupe input[type="tel"], .groupe select, .groupe textarea {
  border: 0; border-radius: 8px; background-color: transparent; box-shadow: none;
  padding: 0.65rem 0.5rem; margin-left: -0.5rem; width: calc(100% + 0.5rem);
}
.groupe input:focus, .groupe select:focus, .groupe textarea:focus { box-shadow: none; background-color: transparent; }
.groupe select { padding-right: 2rem; background-position: calc(100% - 0.4rem) 50%; }
.groupe .helptext { margin: -0.15rem 0 0.55rem; }
.groupe .errorlist { margin: -0.15rem 0 0.6rem; }
.groupe .champ-en-erreur > label { color: var(--rouge); }
/* Zones de texte et actions : sur toute la largeur. */
.groupe .champ-textarea { grid-template-columns: 1fr; align-items: start; }
.groupe .champ-textarea > label { padding-bottom: 0; }
.groupe .champ-textarea textarea { min-height: 6rem; resize: vertical; }
.groupe .champ-checkbox .champ-saisie { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0.25rem 1rem; }
.groupe .champ-checkbox .helptext { order: -1; flex: 1; margin: 0; text-align: left; }
.groupe .champ-action { min-height: 0; padding-top: 0.1rem; padding-bottom: 0.8rem; }
.groupe .champ-action .bouton-verre { padding: 0.35rem 0.9rem; font-size: 0.8125rem; color: var(--accent); }
.groupe .champ-action::before { display: none; }
.resultat-siren:not(:empty) { margin-top: 0.75rem; }
.resultat-siren .message { margin-bottom: 0.5rem; }
/* Les champs préremplis par la recherche SIREN arrivent en dehors du groupe : invisibles ici. */
.resultat-siren input, .resultat-siren select { display: none; }

/* Barre d'actions flottante, en verre, en bas de l'écran. */
.barre-actions {
  position: sticky; bottom: 1.25rem; z-index: 4;
  display: flex; justify-content: flex-end; gap: 0.6rem;
  width: fit-content; margin: 2rem 0 0 auto; padding: 0.45rem;
  border-radius: var(--capsule);
  background: rgba(255, 255, 255, 0.55); box-shadow: var(--reflet), var(--ombre-flottante);
}
.barre-actions button[type="submit"] { min-width: 8.5rem; }

/* Formulaires d'allauth (connexion, sécurité) : champs simples, dans leur carte. */
.recherche { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; max-width: 32rem; }
.recherche input { flex: 1; border-radius: var(--capsule); }

/* ------------------------------------------------------------------ Fiches */

.sources { font-size: 0.75rem; color: var(--texte-tres-discret); }
.sources summary { cursor: pointer; list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "›"; display: inline-block; margin-right: 0.4rem; transition: transform 0.2s; }
.sources[open] summary::before { transform: rotate(90deg); }
.sources summary:hover { color: var(--accent); }
.sources ul { padding-left: 1rem; margin: 0.6rem 0 0; line-height: 1.6; }

.historique { list-style: none; padding: 0; margin: 0; }
.historique-element { position: relative; padding: 0 0 1.35rem 1.5rem; }
.historique-element::before { content: ""; position: absolute; left: 0.2rem; top: 0.42rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(101, 107, 176, 0.15); }
.historique-element::after { content: ""; position: absolute; left: 0.43rem; top: 1.15rem; bottom: 0.15rem; width: 1px; background: var(--trait); }
.historique-element:last-child { padding-bottom: 0; }
.historique-element:last-child::after { display: none; }
.historique-entete { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; font-size: 0.8125rem; color: var(--texte-discret); }
.historique-contenu { margin: 0.3rem 0 0; color: var(--texte); font-size: 0.9rem; }

/* ------------------------------------------------------------------ Tableau de bord */

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; margin-bottom: 2rem; }
.indicateur { border-radius: var(--rayon); padding: 1.25rem 1.35rem 1.35rem; }
.indicateur-libelle { font-size: 0.8125rem; color: var(--texte-discret); margin: 0 0 0.5rem; }
.indicateur-valeur { font-family: var(--police-affichage); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--texte); margin: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.indicateur-valeur small { font-size: 0.95rem; font-weight: 500; color: var(--texte-discret); letter-spacing: -0.01em; margin-left: 0.2rem; }
.indicateur-accent { background: linear-gradient(160deg, rgba(140, 145, 215, 0.95) 0%, rgba(101, 107, 176, 0.95) 50%, rgba(70, 75, 145, 0.95) 100%); border-color: rgba(255, 255, 255, 0.35); }
.indicateur-accent .indicateur-libelle { color: rgba(255, 255, 255, 0.78); }
.indicateur-accent .indicateur-valeur, .indicateur-accent .indicateur-valeur small { color: #fff; }

/* ------------------------------------------------------------------ Pipelines */

.onglets { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--capsule); background: rgba(118, 118, 128, 0.12); }
.onglets a { padding: 0.35rem 1.05rem; border-radius: var(--capsule); color: var(--texte-2); font-weight: 500; font-size: 0.8125rem; transition: background 0.2s; }
.onglets a:hover { text-decoration: none; color: var(--texte); }
.onglets a[aria-current="page"] { background: #fff; color: var(--texte); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.05); }
.resume-pipeline { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.5rem; color: var(--texte-discret); font-size: 0.875rem; }
.resume-pipeline strong { font-family: var(--police-affichage); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--texte); }
/* Les étapes se suivent de haut en bas, sans ascenseur horizontal (demande d'Adrien). */
.pipeline { display: grid; gap: 1rem; padding: 0 0 1.5rem; }
.colonne { border-radius: var(--rayon); padding: 1rem 1.1rem 0.6rem; }
.colonne-entete { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0.3rem 0.85rem; }
.colonne-entete h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.008em; margin: 0; }
.colonne-entete h2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.colonne-gagnee .colonne-entete h2::before { background: var(--vert-ios); }
.colonne-perdue .colonne-entete h2::before { background: #ff3b30; }
.colonne-sommeil .colonne-entete h2::before { background: #aeaeb2; }
.colonne-entete .discret { font-size: 0.75rem; color: var(--texte-tres-discret); font-variant-numeric: tabular-nums; }
.carte-opportunite { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 14px; padding: 0.85rem 0.9rem; margin-bottom: 0.55rem; font-size: 0.8125rem; box-shadow: 0 1px 2px rgba(31, 29, 61, 0.05), 0 4px 14px rgba(31, 29, 61, 0.05); transition: box-shadow 0.2s, transform 0.2s; }
.carte-opportunite:hover { box-shadow: var(--ombre-flottante); transform: translateY(-1px); }
.carte-opportunite a { color: var(--texte); font-size: 0.875rem; }
.carte-opportunite a strong { font-weight: 600; }
.carte-opposition { box-shadow: inset 3px 0 0 var(--rouge), 0 1px 2px rgba(31, 29, 61, 0.05); }
.carte-details { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin-top: 0.5rem; color: var(--texte-discret); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.carte-montant { color: var(--texte); font-weight: 600; }
.deplacer { display: flex; gap: 0.4rem; margin: 0.7rem 0 0; }
.deplacer select { padding: 0.32rem 1.8rem 0.32rem 0.7rem; font-size: 0.75rem; border-radius: var(--capsule); background-color: rgba(118, 118, 128, 0.1); border-color: transparent; }
.deplacer .bouton-secondaire { padding: 0.32rem 0.8rem; font-size: 0.75rem; }
.colonne-vide { font-size: 0.75rem; color: var(--texte-tres-discret); margin: 0 0.3rem 0.6rem; }

/* ------------------------------------------------------------------ Connexion */

.page-entree .zone-principale { min-height: 100vh; justify-content: center; }
.page-entree .contenu { max-width: 30rem; padding: 2rem 1.25rem; }
.page-entree .contenu::before {
  content: "A"; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1.5rem;
  border-radius: 50%; background: var(--vert); color: var(--navy);
  font-family: var(--police-marque); font-weight: 700; font-size: 1.5rem;
  box-shadow: 0 0 0 6px rgba(187, 207, 51, 0.18);
}
.page-entree .carte { margin: 0 auto; }
.page-entree .carte h1 { text-align: center; font-size: 1.75rem; }
.page-entree .carte form button[type="submit"] { width: 100%; padding: 0.75rem 1rem; font-size: 0.9375rem; }
.page-entree .carte .discret { text-align: center; margin-top: 1.25rem; }
.carte hr { border: 0; border-top: 1px solid var(--trait); margin: 1.5rem 0; }
.carte h2 { font-size: 0.9375rem; }

/* ------------------------------------------------------------------ Menus déroulants (apos.js) */

.selecteur { position: relative; }
.selecteur-natif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.selecteur-bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.68rem 0.9rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen);
  background: rgba(255, 255, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E") no-repeat calc(100% - 0.8rem) 50% / 10px 14px;
  color: var(--texte); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.selecteur-bouton:hover { background-color: #fff; }
.selecteur-bouton.ouvert, .selecteur-bouton:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-voile); }
.selecteur-valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 1rem; }
.selecteur-vide { color: var(--texte-tres-discret); }
.groupe .selecteur-bouton { border: 0; background-color: transparent; box-shadow: none; padding: 0.65rem 1.4rem 0.65rem 0.5rem; margin-left: -0.5rem; width: calc(100% + 0.5rem); background-position: calc(100% - 0.4rem) 50%; border-radius: 8px; }
.groupe .selecteur-bouton.ouvert { background-color: rgba(101, 107, 176, 0.07); box-shadow: none; }
.deplacer .selecteur { flex: 1; min-width: 0; }
.deplacer .selecteur-bouton { padding: 0.34rem 1.7rem 0.34rem 0.75rem; font-size: 0.75rem; border-radius: var(--capsule); border-color: transparent; background-color: rgba(118, 118, 128, 0.1); background-position: calc(100% - 0.6rem) 50%; }

/* Le panneau du menu : verre dense, coins arrondis, apparition souple. */
.menu-deroulant {
  position: absolute; z-index: 100; max-height: min(22rem, 60vh); overflow-y: auto;
  margin: 0; padding: 0.3rem; list-style: none;
  border-radius: 14px; background: rgba(250, 250, 252, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(31, 29, 61, 0.16), 0 2px 6px rgba(31, 29, 61, 0.06);
  font-size: 0.875rem; outline: none;
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top center;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.menu-deroulant.vers-le-haut { transform-origin: bottom center; transform: translateY(4px) scale(0.98); }
.menu-deroulant.visible { opacity: 1; transform: none; }
.menu-deroulant [role="option"] {
  position: relative; padding: 0.42rem 0.75rem 0.42rem 1.9rem; border-radius: 8px;
  color: var(--texte); cursor: default; user-select: none; white-space: nowrap;
}
.menu-deroulant [aria-selected="true"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23656bb0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.4 2.4L9.5 3.5'/%3E%3C/svg%3E") no-repeat 0.6rem 50% / 12px 12px; font-weight: 500; }
.menu-deroulant .actif { background-color: var(--accent); color: #fff; }
.menu-deroulant .actif[aria-selected="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.4 2.4L9.5 3.5'/%3E%3C/svg%3E"); }
.menu-deroulant .option-vide { color: var(--texte-tres-discret); }
.menu-deroulant .actif.option-vide { color: rgba(255, 255, 255, 0.85); }
.menu-deroulant [aria-disabled="true"] { opacity: 0.4; }
.js .sans-js { display: none; }

/* ------------------------------------------------------------------ Suggestions d'entreprises */

.champ-saisie { position: relative; }
.suggestions-conteneur:empty { display: none; }
.suggestions-conteneur {
  position: absolute; z-index: 60; top: calc(100% + 2px); left: -0.6rem; right: -0.6rem;
  padding: 0.3rem; border-radius: 16px; background: rgba(250, 250, 252, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 14px 40px rgba(31, 29, 61, 0.18), 0 2px 6px rgba(31, 29, 61, 0.06);
  animation: apparition-menu 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes apparition-menu { from { opacity: 0; transform: translateY(-4px) scale(0.985); } }
.suggestions { list-style: none; margin: 0; padding: 0; }
.suggestion {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.65rem;
  border: 0; border-radius: 10px; background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.suggestion:hover, .suggestion:focus-visible { background: var(--accent-voile); outline: none; }
.suggestion-texte { display: grid; flex: 1; min-width: 0; font-size: 0.875rem; }
.suggestion-texte strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-texte .discret { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions-message { margin: 0; padding: 0.7rem 0.8rem; font-size: 0.8125rem; color: var(--texte-discret); }
.suggestions-source { margin: 0.2rem 0.65rem 0.25rem; font-size: 0.6875rem; color: var(--texte-tres-discret); }

/* ------------------------------------------------------------------ Notifications flottantes */

.js .notifications { position: fixed; top: 1rem; right: 1rem; z-index: 200; width: min(24rem, calc(100vw - 2rem)); margin: 0; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.js .notifications .message {
  pointer-events: auto; cursor: pointer; margin: 0; padding: 0.85rem 1.05rem; border-radius: 16px;
  background: rgba(255, 255, 255, 0.8); box-shadow: var(--reflet), var(--ombre-flottante);
  animation: apparition-notification 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.js .notifications .message.efface { opacity: 0; transform: translateX(1rem) scale(0.98); }
@keyframes apparition-notification { from { opacity: 0; transform: translateY(-0.6rem) scale(0.97); } }

/* ------------------------------------------------------------------ Fiches */

.fiche-entete { display: grid; justify-items: center; text-align: center; margin: 0.5rem 0 2.25rem; }
.fiche-entete h1 { margin: 0.9rem 0 0.2rem; }
.fiche-entete .sous-titre { margin: 0; }
.avatar-grand { width: 5.5rem; height: 5.5rem; font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; box-shadow: 0 10px 28px rgba(101, 107, 176, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.avatar-grand.avatar-entreprise { border-radius: 24px; box-shadow: 0 10px 28px rgba(150, 168, 40, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.avatar-petit { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
.actions-rapides { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.4rem; }
.action-rapide {
  display: grid; justify-items: center; gap: 0.35rem; min-width: 5.25rem; padding: 0.7rem 0.6rem 0.55rem;
  border-radius: 16px; border: 1px solid var(--verre-liseré);
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--reflet), var(--ombre);
  color: var(--accent); font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2), background 0.2s;
}
.action-rapide span { color: var(--texte-2); }
.action-rapide .icone { width: 22px; height: 22px; }
.action-rapide:hover { background: rgba(255, 255, 255, 0.92); text-decoration: none; transform: translateY(-2px); }
.action-rapide:active { transform: scale(0.96); }
.bandeau-alerte .icone { color: var(--rouge); }
.lien-discret { margin: 1rem 0 0; font-size: 0.8125rem; }
.ligne-opportunite { justify-content: space-between; }
.ligne-opportunite > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.ligne-opportunite .discret { width: 100%; margin: 0; }
.bouton-petit { padding: 0.32rem 0.85rem; font-size: 0.8125rem; }

/* Pipeline : carte avec avatar. */
.carte-titre { display: flex; align-items: center; gap: 0.6rem; }
.carte-titre > span:last-child { display: grid; min-width: 0; }
.carte-titre .discret { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-titre:hover { text-decoration: none; }

/* Lignes de tableau entièrement cliquables. */
.tableau-cliquable tbody tr { position: relative; cursor: pointer; }
.tableau-cliquable tbody td:first-child a::after { content: ""; position: absolute; inset: 0; }

/* ------------------------------------------------------------------ Mouvement et finitions */

@media (prefers-reduced-motion: no-preference) {
  .contenu { animation: apparition-page 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
  /* Glissement seul : si l'animation est suspendue (onglet en arrière-plan), la page reste lisible. */
  @keyframes apparition-page { from { transform: translateY(6px); } }
}
* { scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, 0.25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(60, 60, 67, 0.22); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ Petits écrans */

@media (max-width: 52rem) {
  /* Barre d'onglets en bas de l'écran, comme une application. */
  .navigation-globale { position: fixed; top: auto; bottom: 0.6rem; left: 0; right: 0; padding: 0 0.6rem; }
  .dock { margin: 0; padding: 0.35rem; gap: 0.25rem; justify-content: space-between; }
  .dock-marque { display: none; }
  .dock-liens { justify-content: space-around; gap: 0; }
  .dock-liens > li > a { flex-direction: column; gap: 0.15rem; padding: 0.4rem 0.5rem; font-size: 0.625rem; }
  .dock-liens > li > a .icone { width: 19px; height: 19px; }
  .dock-liens > li > a[aria-current="page"]::after { display: none; }
  .dock-liens > li > a[aria-current="page"] { color: var(--vert); background: transparent; }
  .popover-menu { top: auto; bottom: calc(100% + 0.75rem); }
  .popover-recherche { width: min(22rem, calc(100vw - 1.5rem)); }
  .dock-outils .dock-bouton:not(.dock-bouton-accent):first-child { display: none; }
  body.connecte { padding-bottom: 5rem; }
  .contenu { padding: 1.75rem 1rem 5rem; }
  h1 { font-size: 2.25rem; }
  .titre-geant-accroche { text-align: left; }
  .titre-geant-accroche p { font-size: 1.375rem; }
  .carte { padding: 1.75rem 1.4rem; margin: 1rem auto; }
  .proprietes { grid-template-columns: 1fr; }
  .proprietes dt { border-bottom: 0; padding-bottom: 0; }
  .groupe .champ { grid-template-columns: 1fr; padding-top: 0.55rem; }
  .groupe .champ > label { padding: 0; font-size: 0.75rem; color: var(--texte-discret); }
  .groupe .champ-checkbox { grid-template-columns: 1fr auto; }
  .groupe .champ-checkbox > label { font-size: 0.9375rem; color: var(--texte); }
  .barre-actions { left: 0; right: 0; margin: 2rem auto 0; }
  .action-rapide { min-width: 4.6rem; }
  .avatar-grand { width: 4.75rem; height: 4.75rem; font-size: 1.7rem; }
  .bandeau { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; border-radius: 22px; }
  .bandeau-chiffre { justify-self: start; text-align: left; }
  .ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ligne-montant { display: none; }
  .fenetre { width: 100vw; border-radius: 0; }
  .tiroir-infos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Imports */

.page-large { max-width: 64rem; }
.tableau-compact { font-size: 0.8125rem; }
.tableau-compact th, .tableau-compact td { padding: 0.5rem 0.9rem; white-space: nowrap; }
.proprietes-larges { grid-template-columns: 15rem 1fr; }
.groupe input[type="file"] { padding: 0.7rem 0; font: inherit; font-size: 0.875rem; color: var(--texte-2); }
input[type="file"]::file-selector-button {
  margin-right: 0.8rem; padding: 0.4rem 0.95rem; border: 1px solid var(--verre-liseré); border-radius: var(--capsule);
  background: rgba(255, 255, 255, 0.8); color: var(--accent); font: inherit; font-weight: 500; cursor: pointer;
  box-shadow: var(--reflet), 0 1px 4px rgba(31, 29, 61, 0.08);
}

/* ------------------------------------------------------------------ Liste d'opposition */

.verification { max-width: none; }
.verification input[type="search"] { border-radius: var(--capsule); }
.resultat-verification { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: var(--rayon-moyen); font-size: 0.875rem; }
.resultat-oppose { background: var(--rouge-voile); color: #a1000f; }
.resultat-oppose .icone { color: var(--rouge); }
.resultat-libre { background: rgba(52, 199, 89, 0.12); color: #1d6b31; }

/* ------------------------------------------------------------------ Accueil : bandeau navy */

.bandeau {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end;
  margin: 0.5rem 0 2.5rem; padding: 2.5rem 2.75rem;
  border-radius: 28px; color: #fff;
  background:
    radial-gradient(38rem 22rem at 105% 120%, rgba(187, 207, 51, 0.22), transparent 60%),
    radial-gradient(34rem 24rem at -10% -30%, rgba(101, 107, 176, 0.55), transparent 60%),
    var(--navy);
  box-shadow: 0 20px 50px rgba(21, 18, 40, 0.22);
}
.bandeau-date { margin: 0 0 0.6rem; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; text-transform: capitalize; }
.bandeau h1 { margin: 0 0 0.75rem; color: #fff; font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
.bandeau-accroche { margin: 0 0 1.75rem; max-width: 30rem; color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; }
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.puce-action {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: var(--capsule);
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.875rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background 0.2s;
}
.puce-action:hover { background: rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; }
.puce-action .icone { width: 16px; height: 16px; }
.puce-action-principale { background: var(--vert); color: var(--navy); box-shadow: none; }
.puce-action-principale:hover { background: #c9db4a; color: var(--navy); }
.bandeau-chiffre { justify-self: end; text-align: right; }
.bandeau-chiffre p { margin: 0; }
.bandeau-chiffre-libelle { color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; }
.bandeau-chiffre-valeur { font-family: var(--police-marque); font-size: clamp(2.75rem, 6vw, 4.25rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bandeau-chiffre-valeur small { font-size: 1.1rem; font-weight: 600; color: var(--vert); margin-left: 0.35rem; }

/* Chiffres clés en grille. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.chiffre {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 1.35rem 1.5rem;
  border-radius: var(--rayon); background: var(--surface); color: var(--texte); box-shadow: var(--ombre);
  transition: box-shadow 0.25s, transform 0.25s;
}
.chiffre:hover { box-shadow: 0 12px 30px rgba(21, 18, 40, 0.1); transform: translateY(-2px); text-decoration: none; }
.chiffre-icone { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.75rem; border-radius: 12px; background: #eef0fa; color: var(--accent); }
.chiffre-icone .icone { width: 19px; height: 19px; }
.chiffre-valeur { font-family: var(--police-marque); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.chiffre-libelle { font-size: 0.875rem; color: var(--texte-discret); }

/* Activité récente : liste de lignes. */
.lignes { margin: 0; padding: 0.4rem; list-style: none; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem; border-radius: 14px; color: var(--texte); transition: background 0.2s; }
.ligne + .ligne { box-shadow: inset 0 1px 0 var(--trait); }
.ligne:hover { background: #f6f6fa; text-decoration: none; }
.ligne-texte { display: grid; min-width: 0; }
.ligne-texte strong { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-texte span { font-size: 0.8125rem; color: var(--texte-discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-montant { font-size: 0.875rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.ligne-chevron { color: var(--texte-tres-discret); }
.lignes-vide { padding: 1.25rem; color: var(--texte-discret); }

/* ------------------------------------------------------------------ Aperçu en panneau latéral */

.fenetre {
  width: min(31rem, 100vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; padding: 0;
  border: 0; border-radius: 26px 0 0 26px; background: var(--fond); color: var(--texte);
  box-shadow: -20px 0 60px rgba(21, 18, 40, 0.25); overflow: hidden;
}
.fenetre[open] { animation: ouverture-panneau 0.4s cubic-bezier(0.2, 0.85, 0.25, 1); }
@keyframes ouverture-panneau { from { transform: translateX(40px); } }
.fenetre::backdrop { background: rgba(21, 18, 40, 0.35); }
#fenetre-contenu { height: 100%; overflow-y: auto; }
.fenetre-fermer {
  position: absolute; z-index: 2; top: 1rem; right: 1rem;
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0 0 0.12rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background 0.2s;
}
.fenetre-fermer:hover { background: rgba(255, 255, 255, 0.26); }
.tiroir-entete {
  padding: 2.25rem 1.75rem 1.75rem; color: #fff;
  background: radial-gradient(26rem 16rem at 110% 130%, rgba(187, 207, 51, 0.25), transparent 60%), var(--navy);
}
.tiroir-entete .avatar { width: 3.75rem; height: 3.75rem; font-size: 1.25rem; margin-bottom: 1rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
.tiroir-entete h2 { margin: 0 0 0.25rem; color: #fff; font-size: 1.75rem; }
.tiroir-entete p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; }
.tiroir-entete .surtitre { color: var(--vert); }
.tiroir-entete .etiquette-alerte { margin-top: 0.75rem; }
.tiroir-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.tiroir-corps { padding: 1.5rem 1.25rem 2rem; display: grid; gap: 1.25rem; }
.tiroir-bloc { padding: 0.35rem 1.1rem; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.tiroir-bloc-titre { margin: 0 0 0.4rem 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-discret); }
.tiroir-ligne { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.8rem; align-items: center; padding: 0.8rem 0; font-size: 0.9375rem; }
.tiroir-ligne + .tiroir-ligne { border-top: 1px solid var(--trait); }
.tiroir-ligne .icone { width: 18px; height: 18px; color: var(--accent); }
.tiroir-ligne small { display: block; color: var(--texte-discret); font-size: 0.8125rem; }
.tiroir-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; font-size: 0.75rem; color: var(--texte-discret); }
.tiroir-infos strong { display: block; color: var(--navy); font-size: 0.8125rem; font-weight: 600; }
.ouvre-apercu { cursor: pointer; }

/* ------------------------------------------------------------------ Ajustements */

.page-entree .contenu { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem; }
.page-entree .carte h1 { font-size: 2rem; }
.colonne { background: #ebebf0; }
.carte-opportunite { background: var(--surface); border: 0; border-radius: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.carte-opportunite:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-1px); }
.onglets { background: rgba(0, 0, 0, 0.06); }
.groupe { background: var(--surface); box-shadow: none; }
.tableau-defilant { box-shadow: var(--ombre); }
.indicateur { box-shadow: var(--ombre); }
.fiche-entete h1 { font-size: clamp(2.25rem, 4.5vw, 3rem); }
.action-rapide { background: var(--surface); border: 0; box-shadow: var(--ombre-carte); -webkit-backdrop-filter: none; backdrop-filter: none; }
.action-rapide:hover { background: var(--surface); box-shadow: var(--ombre-carte-survol); }
.surtitre-alerte { color: var(--rouge); }

/* En-tête des fiches : même bandeau navy que l'accueil, avatar à gauche, actions en pastilles. */
.fiche-entete {
  position: relative; overflow: hidden;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-items: center; justify-items: start; text-align: left;
  margin: 0.5rem 0 2.25rem; padding: 2rem 2.25rem; border-radius: 28px; color: #fff;
  background:
    radial-gradient(34rem 20rem at 105% 130%, rgba(187, 207, 51, 0.2), transparent 60%),
    radial-gradient(30rem 22rem at -10% -40%, rgba(101, 107, 176, 0.55), transparent 60%),
    var(--navy);
  box-shadow: 0 20px 50px rgba(21, 18, 40, 0.22);
}
.fiche-entete > .avatar { grid-column: 1; grid-row: 1 / span 3; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08); }
.fiche-entete > :not(.avatar) { grid-column: 2; }
.fiche-entete h1 { margin: 0 0 0.2rem; color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); }
.fiche-entete .sous-titre { color: rgba(255, 255, 255, 0.7); }
.fiche-entete .sous-titre a { color: var(--vert); }
.fiche-entete .actions-rapides { justify-content: flex-start; margin-top: 1.1rem; }
.fiche-entete .action-rapide {
  display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.5rem 0.95rem;
  border: 0; border-radius: var(--capsule); background: rgba(255, 255, 255, 0.1); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 0.8125rem;
}
.fiche-entete .action-rapide span { color: #fff; }
.fiche-entete .action-rapide .icone { width: 16px; height: 16px; }
.fiche-entete .action-rapide:hover { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transform: none; }

/* ------------------------------------------------------------------ Recherche globale */

.recherche-popover .raccourci {
  position: absolute; right: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--trait); color: var(--texte-discret);
  font: 500 0.6875rem/1.4 inherit; font-family: inherit;
}
.recherche-popover input[type="search"] { padding-right: 3rem; }
.resultats-rapides { max-height: min(26rem, 60vh); overflow-y: auto; }
.popover-recherche:has(.resultats-rapides .ligne, .resultats-rapides .resultats-vide) .aller-a { display: none; }
.resultats-titre {
  margin: 0.9rem 0 0.3rem; padding-left: 0.7rem; border-left: 3px solid var(--vert);
  font-family: var(--police-marque); font-size: 0.8125rem; font-weight: 600; color: var(--navy);
}
.resultats-rapides .lignes { padding: 0; background: none; box-shadow: none; }
.resultats-rapides .ligne { gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 10px; }
.resultats-rapides .avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }
.resultats-vide { margin: 0.8rem 0.4rem; color: var(--texte-discret); font-size: 0.875rem; }
.resultats-tout {
  width: 100%; margin-top: 0.6rem; padding: 0.6rem; border: 0; border-radius: 10px;
  background: #f3f3f8; color: var(--navy); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.resultats-tout:hover { background: #ebebf3; }
.avatar-opportunite { background: var(--navy); color: var(--vert); }
.avatar-opportunite .icone { width: 16px; height: 16px; }
.resultats-page { margin-top: 0.5rem; }
.resultats-page .resultats-titre { margin: 2rem 0 0.75rem; font-size: 1.125rem; }
.recherche-mobile { display: none; }

/* ------------------------------------------------------------------ Export et sauvegarde */

.export { display: grid; gap: 1.25rem; max-width: 46rem; }
.export .panneau > p { max-width: 40rem; }
.formulaire-panneau .groupe { background: #f6f6fa; }
.formulaire-panneau .section-formulaire { margin: 1.25rem 0; }

/* ------------------------------------------------------------------ Connexions Google */

.bandeau-info {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; padding: 0.9rem 1.2rem; margin-bottom: 1.75rem;
  border-radius: var(--rayon-groupe); background: rgba(101, 107, 176, 0.1); color: var(--navy); font-size: 0.875rem;
}
.bandeau-info .icone { color: var(--violet, #656bb0); }
.texte-alerte { color: var(--rouge) !important; }
.lignes-comptes { margin: 0.5rem 0 1.25rem; background: #f6f6fa; box-shadow: none; }
.lignes-comptes .ligne:hover { background: transparent; }
.actions-compte { display: flex; gap: 0.4rem; }
.actions-compte form { margin: 0; }
.action-panneau { margin: 0 0 1rem; }
.alerte-google { margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------ Emails */

.pied-message {
  margin: 0; padding: 1rem 1.1rem; border-radius: var(--rayon-groupe); background: var(--surface);
  color: var(--texte-discret); font: inherit; font-size: 0.8125rem; line-height: 1.55; white-space: pre-wrap;
}
.page-publique { max-width: 34rem; margin: 1rem auto 4rem; padding: 2.5rem; border-radius: 28px; background: var(--surface); box-shadow: var(--ombre); text-align: center; }
.page-publique form { margin: 1.5rem 0; }

/* ------------------------------------------------------------------ Tâches */

.lignes-taches { margin-bottom: 2.5rem; }
.lignes-taches .ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
.lignes-taches .ligne:hover { background: transparent; }
.lignes-taches .ligne-texte a { min-width: 0; color: inherit; }
.lignes-taches .ligne-texte strong, .lignes-taches .ligne-texte span { white-space: normal; }
.lignes-taches form { margin: 0; }
.panneau .lignes-taches { margin: 0; background: #f6f6fa; box-shadow: none; }

/* ------------------------------------------------------------------ Agenda */

.creneaux { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.puce-creneau {
  padding: 0.5rem 0.9rem; border-radius: var(--capsule); background: var(--surface); box-shadow: var(--ombre);
  color: var(--navy); font-size: 0.875rem; font-weight: 500; text-transform: capitalize;
}
.puce-creneau:hover { background: var(--navy); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------------ Pipeline : étapes */

/* Opportunités de chaque étape en grille, autant par ligne que la largeur le permet. */
.colonne-entete { justify-content: flex-start; gap: 0.9rem; margin: 0 0 0.85rem; }
.colonne-entete h2 { font-size: 0.9375rem; }
.colonne-entete .discret { font-size: 0.8125rem; }
.colonne-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.6rem; padding-bottom: 0.5rem; }
.colonne-cartes .carte-opportunite { margin-bottom: 0; }
.colonne-cartes .colonne-vide { margin: 0 0 0.4rem; }
/* Étape sans opportunité : une seule ligne, discrète. */
.colonne:not(:has(.carte-opportunite)) { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.85rem; background: #f1f1f5; }
.colonne:not(:has(.carte-opportunite)) .colonne-entete { margin: 0; }
.colonne:not(:has(.carte-opportunite)) .colonne-cartes { display: block; padding: 0; }
.colonne:not(:has(.carte-opportunite)) .colonne-vide { margin: 0; }
/* Glisser-déposer : carte prise, étape survolée, et étapes vides qui restent des cibles. */
[data-carte-deplacable] { cursor: grab; }
[data-carte-deplacable]:active { cursor: grabbing; }
.carte-opportunite.en-deplacement { opacity: 0.45; transform: scale(0.98); }
.colonne.zone-survolee { background: rgba(187, 207, 51, 0.18); box-shadow: inset 0 0 0 2px var(--vert); }
.glisser-en-cours .colonne:not(:has(.carte-opportunite)) { min-height: 3.5rem; }
/* Dernière ligne de la carte : prochaine action prévue. */
.carte-action { margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--trait); color: var(--texte-discret); font-size: 0.75rem; }
.carte-action-retard { color: var(--rouge); font-weight: 500; }
.carte-opportunite .deplacer, .carte-opportunite .etape-suivante { margin-top: 0.55rem; }
.etape-suivante button { width: 100%; justify-content: center; }

/* Petits écrans (placé en fin de fichier : l'emporte sur les composants définis plus haut). */
@media (max-width: 52rem) {
  .bandeau { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 0; padding: 1.75rem 1.5rem; border-radius: 22px; }
  .bandeau-chiffre { justify-self: start; text-align: left; }
  .bandeau-actions .puce-action { padding: 0.5rem 0.85rem; font-size: 0.8125rem; }
  .ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ligne-montant { display: none; }
  .fenetre { width: 100vw; border-radius: 0; }
  .tiroir-infos { grid-template-columns: 1fr; }
  .fiche-entete { grid-template-columns: 1fr; row-gap: 0; padding: 1.5rem; border-radius: 22px; }
  .fiche-entete > .avatar { grid-row: auto; margin-bottom: 1rem; }
  .fiche-entete > :not(.avatar) { grid-column: 1; }
  /* Barre d'onglets : la recherche passe par la liste des entreprises. */
  .dock-outil:first-child { display: none; }
  .dock-liens > li > a { padding: 0.4rem 0.3rem; }
  .dock-bouton { width: 2.1rem; height: 2.1rem; }
  .recherche-mobile { display: flex; margin: 0 0 2rem; }
  .lignes-comptes .ligne { grid-template-columns: auto minmax(0, 1fr); }
  .lignes-comptes .etiquette, .lignes-comptes .actions-compte { grid-column: 2; justify-self: start; }
  /* Menus ouverts au-dessus de la barre d'onglets : passerelle sous le menu. */
  .popover-menu::before { bottom: auto; top: 100%; }
}