/* =====================================================================
 * era-socle.css — LE SOCLE COMMUN « Ludique & instantané » (26/09/2026)
 * ---------------------------------------------------------------------
 * Raphaël : « Chaque page, chaque onglet, chaque chose de l'application doit
 * être la plus ludique possible, sur PC comme sur téléphone, Android ou iPhone. »
 *
 * Un seul fichier de styles partagé par toutes les pages internes, pour que
 * chaque page ait les mêmes boutons, les mêmes onglets, les mêmes feuilles,
 * le même retour au toucher — sans que chacune les réinvente.
 *
 * RÈGLE : tout est OPT-IN. Charger ce fichier ne change rien à l'écran tant que
 * la page n'utilise pas les classes « s-… ». Seuls les « correctifs de base
 * mobile » (§ 1) s'appliquent d'office : ils sont choisis pour ne rien déplacer
 * (pas de zoom iOS dans les champs, pas de délai au toucher, texte non grossi
 * par iOS en paysage).
 *
 * Mode d'emploi, extraits prêts à copier : docs/SOCLE-UX.md
 * Comportements (feuille, toasts, onglets, barre du bas) : js/era-socle.js
 * ===================================================================== */

/* ─── 0. JETONS (brief § 4) ─────────────────────────────────────────── */
:root {
  --s-violet: #250E62;          /* titres, élément actif */
  --s-rouge: #D70A28;           /* action principale */
  --s-rouge-fonce: #B0081F;
  --s-texte: #1B3A5C;
  --s-gris: #64748B;            /* texte secondaire */
  --s-gris-clair: #94A3B8;
  --s-trait: #E2E8F0;
  --s-fond-doux: #F8FAFC;
  --s-fond: #F4F6FA;
  --s-blanc: #FFFFFF;
  --s-vert: #15803D;       --s-vert-fond: #DCFCE7;
  --s-orange: #B45309;     --s-orange-fond: #FEF3C7;
  --s-alerte: #B0081F;     --s-alerte-fond: #FFE4E6;
  --s-violet-doux: #F4F0FF; --s-violet-bord: #EDE9FE;

  --s-r1: 10px; --s-r2: 14px; --s-r3: 18px; --s-r-puce: 20px;
  --s-ombre: 0 1px 4px rgba(37,14,98,.06);
  --s-ombre-haute: 0 10px 30px rgba(37,14,98,.12);
  --s-e1: 4px; --s-e2: 8px; --s-e3: 12px; --s-e4: 16px; --s-e5: 24px; --s-e6: 32px;

  --s-police: Gotham, 'Gotham', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --s-t-court: 120ms;           /* état pressé */
  --s-t: 180ms;                 /* ouvertures, changements d'état */
  --s-courbe: cubic-bezier(.2,.8,.2,1);
  --s-cible: 44px;              /* cible tactile minimale (Apple) */

  /* Le bas de l'écran : zone sûre de l'iPhone, barre d'onglets du bas.
     --s-nav-occupe = hauteur prise par la barre du bas (0 sans barre) ;
     --s-bas        = ce qu'un élément collé en bas doit laisser libre. */
  --s-nav-h: 58px;
  --s-sure-bas: env(safe-area-inset-bottom, 0px);
  --s-nav-occupe: 0px;
  --s-bas: var(--s-sure-bas);
  --s-barre-sure: var(--s-sure-bas);

  /* Couches : sous les fenêtres des pages (≥ 9999) et le panneau du petit Raphaël
     (8499) pour la barre du bas ; au-dessus de tout le reste pour la feuille. */
  --s-z-barre: 60;
  --s-z-nav: 8400;
  --s-z-feuille: 10050;
  --s-z-toast: 10100;
}

/* ─── 1. CORRECTIFS DE BASE MOBILE (s'appliquent d'office, sans rien déplacer) ─── */
html {
  -webkit-text-size-adjust: 100%;   /* iOS ne grossit plus le texte en paysage */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(37,14,98,.10);  /* flash violet discret au lieu du gris bleuté */
}
/* supprime le délai « double tap = zoom » : chaque toucher répond tout de suite */
a, button, input, select, textarea, label, summary, [role="button"], [onclick] { touch-action: manipulation; }
/* iOS zoome dans un champ dont le texte fait moins de 16 px : on l'en empêche sur téléphone */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }
}
/* les composants du socle ont leur propre état pressé : pas de flash en plus */
[class^="s-"], [class*=" s-"] { -webkit-tap-highlight-color: transparent; }

/* ─── 2. OUTILS ─────────────────────────────────────────────────────── */
.s-plein-ecran { min-height: 100vh; min-height: 100dvh; }   /* 100vh iOS = trop haut (barre Safari) */
.s-hauteur-ecran { height: 100vh; height: 100dvh; }
.s-contenu { width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.s-lisible { max-width: 72ch; }                              /* pas de lignes de 1 800 px sur PC */
.s-seul-mobile { display: none !important; }
@media (max-width: 640px) {
  .s-cache-mobile { display: none !important; }
  .s-seul-mobile { display: revert !important; }
}
.s-invisible {   /* lu par VoiceOver / TalkBack, invisible à l'œil */
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.s-defile-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.s-defile-x::-webkit-scrollbar { display: none; }

/* focus clavier visible sur tout le socle (jamais au doigt ni à la souris) */
.s-btn:focus-visible, .s-puce:focus-visible, .s-onglet:focus-visible, .s-carte--cliquable:focus-visible,
.s-nav__lien:focus-visible, .s-feuille__fermer:focus-visible, .s-menu__tuile:focus-visible, .s-fab:focus-visible {
  outline: 3px solid rgba(215,10,40,.45); outline-offset: 2px;
}

/* ─── 3. BOUTONS ────────────────────────────────────────────────────── */
.s-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 40px; padding: 9px 18px; margin: 0;
  font: 800 14px/1.2 var(--s-police); letter-spacing: .2px; text-decoration: none; white-space: nowrap;
  color: var(--s-violet); background: var(--s-blanc); border: 1.5px solid var(--s-trait); border-radius: var(--s-r1);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform var(--s-t-court) ease, background var(--s-t-court) ease, border-color var(--s-t-court) ease, box-shadow var(--s-t-court) ease, color var(--s-t-court) ease;
}
.s-btn:hover { border-color: #C7D2E5; background: var(--s-fond-doux); }
.s-btn:active, .s-btn.s-presse { transform: scale(.97); }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
/* agrandit la zone qu'on peut toucher sans agrandir le dessin (petits boutons) */
.s-btn::after { content: ""; position: absolute; inset: -4px; }

.s-btn--primaire { color: #fff; background: var(--s-rouge); border-color: var(--s-rouge); box-shadow: 0 4px 12px rgba(215,10,40,.22); }
.s-btn--primaire:hover { background: var(--s-rouge-fonce); border-color: var(--s-rouge-fonce); }
.s-btn--secondaire { color: #fff; background: var(--s-violet); border-color: var(--s-violet); box-shadow: 0 4px 12px rgba(37,14,98,.18); }
.s-btn--secondaire:hover { background: #1A0948; border-color: #1A0948; }
.s-btn--contour { color: var(--s-violet); background: var(--s-blanc); border-color: var(--s-violet); }
.s-btn--contour:hover { background: var(--s-violet-doux); }
.s-btn--fantome { color: var(--s-gris); background: transparent; border-color: transparent; }
.s-btn--fantome:hover { color: var(--s-violet); background: #F1F5F9; border-color: transparent; }
.s-btn--succes { color: #fff; background: var(--s-vert); border-color: var(--s-vert); }
.s-btn--succes:hover { background: #166534; border-color: #166534; }
.s-btn--danger { color: var(--s-alerte); background: var(--s-blanc); border-color: #FECDD3; }
.s-btn--danger:hover { background: var(--s-alerte-fond); }

.s-btn--petit { min-height: 32px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.s-btn--petit::after { inset: -6px; }
.s-btn--grand { min-height: 52px; padding: 13px 22px; font-size: 15px; border-radius: var(--s-r2); }
.s-btn--bloc { display: flex; width: 100%; }
.s-btn--icone { width: 40px; padding: 0; font-size: 18px; }   /* toujours un aria-label */

/* chargement : le texte reste là (la largeur ne saute pas), une roue tourne par-dessus */
.s-btn.s-charge, .s-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.s-btn.s-charge::before, .s-btn[aria-busy="true"]::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2.5px solid currentColor; border-color: var(--s-violet) var(--s-violet) transparent transparent;
  border-radius: 50%; animation: s-tourne .7s linear infinite;
}
.s-btn--primaire.s-charge::before, .s-btn--secondaire.s-charge::before, .s-btn--succes.s-charge::before,
.s-btn--primaire[aria-busy="true"]::before, .s-btn--secondaire[aria-busy="true"]::before, .s-btn--succes[aria-busy="true"]::before {
  border-color: #fff #fff transparent transparent;
}
@keyframes s-tourne { to { transform: rotate(360deg); } }

/* sur écran tactile, cibles de 44 px */
@media (max-width: 640px), (pointer: coarse) {
  .s-btn { min-height: var(--s-cible); }
  .s-btn--petit { min-height: 36px; }
  .s-btn--icone { width: var(--s-cible); }
}

/* ─── 4. PUCES / FILTRES ────────────────────────────────────────────── */
.s-puces { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s-puces--defile { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 1px 4px; scroll-padding-inline: 12px; }
.s-puces--defile::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {   /* sur téléphone : une seule rangée qu'on fait glisser, jamais 3 lignes */
  .s-puces { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 1px 4px; }
  .s-puces::-webkit-scrollbar { display: none; }
  .s-puces--retour { flex-wrap: wrap; overflow: visible; }   /* sauf si la page préfère le retour à la ligne */
}
.s-puce {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  min-height: 34px; padding: 6px 14px; margin: 0;
  font: 800 12.5px/1.2 var(--s-police); letter-spacing: .2px; white-space: nowrap; text-decoration: none;
  color: var(--s-gris); background: var(--s-blanc); border: 1.5px solid var(--s-trait); border-radius: var(--s-r-puce);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform var(--s-t-court) ease, background var(--s-t-court) ease, color var(--s-t-court) ease, border-color var(--s-t-court) ease;
}
.s-puce::after { content: ""; position: absolute; inset: -5px -2px; }
.s-puce:hover { border-color: #C7D2E5; color: var(--s-violet); }
.s-puce:active, .s-puce.s-presse { transform: scale(.95); }
.s-puce.actif, .s-puce[aria-pressed="true"], .s-puce[aria-selected="true"] { color: #fff; background: var(--s-violet); border-color: var(--s-violet); }
.s-puce--rouge.actif, .s-puce--rouge[aria-pressed="true"] { background: var(--s-rouge); border-color: var(--s-rouge); }
.s-puce .s-compteur { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #F1F5F9; color: var(--s-gris); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.s-puce.actif .s-compteur, .s-puce[aria-pressed="true"] .s-compteur { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px), (pointer: coarse) { .s-puce { min-height: 38px; padding: 8px 15px; } }

/* ─── 5. CARTES ─────────────────────────────────────────────────────── */
.s-carte {
  display: block; box-sizing: border-box; padding: var(--s-e4);
  background: var(--s-blanc); border: 1px solid var(--s-trait); border-radius: var(--s-r2); box-shadow: var(--s-ombre);
  color: var(--s-texte); text-decoration: none; min-width: 0;
}
.s-carte--cliquable { cursor: pointer; transition: transform var(--s-t-court) ease, box-shadow var(--s-t) ease, border-color var(--s-t) ease; }
.s-carte--cliquable:hover { border-color: #D6CCF5; box-shadow: var(--s-ombre-haute); transform: translateY(-1px); }
.s-carte--cliquable:active, .s-carte--cliquable.s-presse { transform: scale(.985); }
.s-carte--rouge { border-left: 4px solid var(--s-rouge); }
.s-carte--violet { border-left: 4px solid var(--s-violet); }
.s-carte--vert { border-left: 4px solid var(--s-vert); }
.s-carte--orange { border-left: 4px solid #F59E0B; }
.s-carte--actif { background: var(--s-violet-doux); border-color: var(--s-violet-bord); }
.s-carte__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.s-carte__titre { margin: 0; font: 900 14px/1.3 var(--s-police); color: var(--s-violet); min-width: 0; overflow-wrap: anywhere; }
.s-carte__sous { margin: 2px 0 0; font: 600 12px/1.4 var(--s-police); color: var(--s-gris); }
.s-carte__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.s-carte__tete .s-carte__fin { margin-left: auto; flex: none; }
.s-section-titre { margin: 0 0 10px; font: 900 11px/1.2 var(--s-police); letter-spacing: 1px; text-transform: uppercase; color: var(--s-violet); display: flex; align-items: center; gap: 8px; }

/* ─── 6. ONGLETS : une rangée qui glisse au doigt, l'actif se centre (js : ERAsocle.onglets) ─── */
.s-onglets {
  position: relative; display: flex; flex-wrap: nowrap; gap: 2px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x proximity; border-bottom: 1px solid var(--s-trait);
}
.s-onglets::-webkit-scrollbar { display: none; }
/* un fondu sur le bord qui cache encore des onglets : on devine qu'il y en a d'autres */
.s-onglets.s-suite-d { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.s-onglets.s-suite-g { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.s-onglets.s-suite-g.s-suite-d { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.s-onglet {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; scroll-snap-align: center;
  min-height: var(--s-cible); padding: 10px 14px; margin: 0; box-sizing: border-box;
  font: 800 13px/1.2 var(--s-police); white-space: nowrap; text-decoration: none;
  color: var(--s-gris); background: none; border: 0; border-radius: var(--s-r1) var(--s-r1) 0 0; cursor: pointer;
  transition: color var(--s-t-court) ease, background var(--s-t-court) ease;
}
.s-onglet:hover { color: var(--s-violet); background: var(--s-fond-doux); }
.s-onglet::after {   /* le trait rouge sous l'onglet actif */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--s-rouge); transform: scaleX(0); transition: transform var(--s-t) var(--s-courbe);
}
.s-onglet.actif, .s-onglet[aria-selected="true"] { color: var(--s-violet); }
.s-onglet.actif::after, .s-onglet[aria-selected="true"]::after { transform: scaleX(1); }
.s-onglet:active { background: var(--s-violet-doux); }
.s-onglet .s-badge { margin-left: 2px; }
/* variante « pilules » (onglets segmentés, sur fond doux) */
.s-onglets--pilules { gap: 4px; padding: 4px; border: 0; background: #EEF1F6; border-radius: 12px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.s-onglets--pilules .s-onglet { min-height: 38px; padding: 8px 14px; border-radius: 9px; }
.s-onglets--pilules .s-onglet::after { display: none; }
.s-onglets--pilules .s-onglet.actif, .s-onglets--pilules .s-onglet[aria-selected="true"] { background: var(--s-blanc); color: var(--s-violet); box-shadow: 0 1px 4px rgba(37,14,98,.12); }
@media (max-width: 640px) { .s-onglets--pilules .s-onglet { min-height: 40px; } }
[data-panneau][hidden] { display: none !important; }

/* ─── 7. BARRE D'ACTIONS COLLÉE EN BAS (au-dessus de la zone sûre et de la barre d'onglets) ─── */
.s-barre-actions {
  position: sticky; bottom: var(--s-nav-occupe); z-index: var(--s-z-barre);
  display: flex; gap: 8px; align-items: center; box-sizing: border-box;
  padding: 10px 16px calc(10px + var(--s-barre-sure));
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--s-trait); box-shadow: 0 -6px 18px rgba(37,14,98,.06);
}
.s-barre-actions > .s-btn { flex: 1 1 0; min-width: 0; }
.s-barre-actions > .s-btn--icone, .s-barre-actions > .s-btn--fixe { flex: none; }
.s-barre-actions--fixe { position: fixed; left: 0; right: 0; }
.s-reserve-barre { padding-bottom: calc(76px + var(--s-bas)) !important; }   /* pour qu'une barre fixe ne cache pas la fin du contenu */
@media (min-width: 641px) {   /* sur PC : les boutons gardent leur taille, alignés à droite */
  .s-barre-actions { justify-content: flex-end; }
  body:has(#pr-widget-launcher) .s-barre-actions:not(.s-feuille .s-barre-actions) { padding-right: 92px; }   /* place du petit Raphaël */
  .s-barre-actions > .s-btn { flex: none; }
  .s-barre-actions--mobile { position: static; background: none; border: 0; box-shadow: none; padding: 12px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* bouton rond d'action (« + ») : au-dessus de la barre du bas ; le petit Raphaël monte d'un cran */
.s-fab {
  position: fixed; right: 16px; bottom: calc(var(--s-bas) + 16px); z-index: 8450;
  width: 56px; height: 56px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  background: var(--s-rouge); color: #fff; font: 900 26px/1 var(--s-police); cursor: pointer;
  box-shadow: 0 8px 22px rgba(215,10,40,.35); transition: transform var(--s-t-court) ease;
}
.s-fab:active { transform: scale(.92); }

/* ─── 8. FEUILLE : monte du bas sur téléphone, fenêtre centrée sur PC (js : ERAsocle.feuille) ─── */
.s-feuille-fond {
  position: fixed; inset: 0; z-index: calc(var(--s-z-feuille) - 1);
  background: rgba(15,23,42,.45); opacity: 0; transition: opacity var(--s-t) ease;
}
.s-feuille-fond.s-ouverte { opacity: 1; }
.s-feuille {
  position: fixed; z-index: var(--s-z-feuille); box-sizing: border-box;
  display: flex; flex-direction: column; background: var(--s-blanc); color: var(--s-texte);
  font-family: var(--s-police); box-shadow: 0 -10px 40px rgba(15,23,42,.18); outline: none;
  left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; border-radius: var(--s-r3) var(--s-r3) 0 0;
  transform: translateY(104%); transition: transform 200ms var(--s-courbe);
}
.s-feuille.s-ouverte { transform: none; }
.s-feuille.s-glisse { transition: none; }
.s-feuille[hidden], .s-feuille-fond[hidden] { display: none !important; }
.s-feuille__poignee { flex: none; height: 22px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.s-feuille__poignee::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: #CBD5E1; }
.s-feuille__tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 10px 18px; border-bottom: 1px solid #F1F5F9; touch-action: none; }
.s-feuille__titre { flex: 1; min-width: 0; margin: 0; font: 900 16px/1.25 var(--s-police); color: var(--s-violet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-feuille__fermer {
  flex: none; width: var(--s-cible); height: var(--s-cible); margin-left: auto; border: 0; border-radius: 50%;
  background: #F1F5F9; color: var(--s-gris); font: 800 17px/1 var(--s-police); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background var(--s-t-court) ease, transform var(--s-t-court) ease;
}
.s-feuille__fermer:hover { background: var(--s-trait); color: var(--s-violet); }
.s-feuille__fermer:active { transform: scale(.92); }
.s-feuille__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 18px calc(18px + var(--s-sure-bas)); }
.s-feuille { --s-nav-occupe: 0px; --s-bas: var(--s-sure-bas); --s-barre-sure: var(--s-sure-bas); }   /* la feuille couvre la barre du bas */
.s-feuille__corps .s-barre-actions { margin: 16px -18px calc(-18px - var(--s-sure-bas)); bottom: 0; }
.s-feuille--plein { top: 0; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
.s-feuille--plein .s-feuille__poignee { display: none; }
.s-feuille--plein .s-feuille__tete { padding-top: 10px; }
html.s-feuille-ouverte, html.s-feuille-ouverte body { overflow: hidden !important; }
@media (min-width: 641px) {
  .s-feuille {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: 86vh;
    border-radius: var(--s-r3); box-shadow: 0 24px 70px rgba(15,23,42,.28);
    transform: translate(-50%, -47%) scale(.97); opacity: 0; transition: transform 180ms var(--s-courbe), opacity 180ms ease;
  }
  .s-feuille.s-ouverte { transform: translate(-50%, -50%); opacity: 1; }
  .s-feuille--large { width: min(880px, calc(100vw - 48px)); }
  .s-feuille--plein { top: 50%; padding-top: 0; }
  .s-feuille__poignee { display: none; }
  .s-feuille__tete { padding: 14px 12px 12px 22px; }
  .s-feuille__corps { padding: 18px 22px 22px; }
  .s-feuille__corps .s-barre-actions { margin: 18px -22px -22px; padding: 12px 22px; border-radius: 0 0 var(--s-r3) var(--s-r3); }
}

/* ─── 9. TOASTS (js : ERAsocle.toast) ────────────────────────────────── */
.s-toasts {
  position: fixed; left: 50%; bottom: calc(var(--s-bas) + 14px); z-index: var(--s-z-toast);
  transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.s-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; box-sizing: border-box; max-width: 100%;
  padding: 12px 14px 12px 16px; border-radius: var(--s-r2); background: #1E1446; color: #fff;
  font: 700 13.5px/1.35 var(--s-police); box-shadow: 0 12px 30px rgba(15,23,42,.28); border-left: 4px solid #4ADE80;
  animation: s-toast-entre 200ms var(--s-courbe) both; cursor: pointer;
}
.s-toast--erreur { border-left-color: #FB7185; }
.s-toast--attention { border-left-color: #FBBF24; }
.s-toast--info { border-left-color: #A78BFA; }
.s-toast.s-sort { animation: s-toast-sort 160ms ease both; }
.s-toast__action {
  flex: none; margin-left: 4px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff; font: 900 12.5px/1 var(--s-police); cursor: pointer; text-transform: uppercase; letter-spacing: .4px;
}
.s-toast__action:hover { background: rgba(255,255,255,.24); }
@keyframes s-toast-entre { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes s-toast-sort { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ─── 10. SQUELETTES (à la place exacte du contenu, jamais « Chargement… » seul) ─── */
.s-squelette {
  display: block; border-radius: 6px; height: 12px; margin: 0 0 8px;
  background: linear-gradient(90deg, #EEF1F6 0%, #F7F8FB 45%, #EEF1F6 90%); background-size: 220% 100%;
  animation: s-luit 1.3s ease-in-out infinite;
}
.s-squelette--titre { height: 18px; width: 55%; margin-bottom: 12px; }
.s-squelette--ligne { width: 100%; }
.s-squelette--court { width: 40%; }
.s-squelette--moyen { width: 68%; }
.s-squelette--avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; margin: 0; }
.s-squelette--vignette { flex: none; width: 58px; height: 44px; border-radius: 7px; margin: 0; }
.s-squelette--puce { display: inline-block; width: 78px; height: 30px; border-radius: 16px; margin: 0 6px 0 0; }
.s-squelette--carte { height: 96px; border-radius: var(--s-r2); margin-bottom: 12px; }
.s-squelette--tuile { height: 74px; border-radius: var(--s-r2); margin: 0; }
.s-squelette-rangee { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F7F7FA; }
.s-squelette-rangee > div { flex: 1; min-width: 0; }
.s-squelette-rangee .s-squelette:last-child { margin-bottom: 0; }
@keyframes s-luit { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* ─── 11. ÉTAT VIDE (qui dit quoi faire) ──────────────────────────────── */
.s-vide { text-align: center; padding: 36px 20px; color: var(--s-gris); font-family: var(--s-police); }
.s-vide__emoji {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--s-violet-doux); font-size: 34px; line-height: 1; margin-bottom: 12px; animation: s-flotte 3.2s ease-in-out infinite;
}
.s-vide__titre { margin: 0 0 6px; font: 900 15px/1.3 var(--s-police); color: var(--s-violet); }
.s-vide__texte { margin: 0 auto 16px; max-width: 42ch; font: 600 13px/1.5 var(--s-police); }
@keyframes s-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ─── 12. BADGES, COMPTEURS, ÉTIQUETTES ───────────────────────────────── */
.s-badge {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--s-rouge); color: #fff; font: 900 10.5px/1 var(--s-police); font-variant-numeric: tabular-nums;
}
.s-badge[hidden] { display: none !important; }
.s-badge--violet { background: var(--s-violet); }
.s-badge--vert { background: var(--s-vert); }
.s-badge--gris { background: #E2E8F0; color: var(--s-gris); }
.s-badge.s-pop { animation: s-pop 320ms var(--s-courbe); }
/* la barre latérale : le compteur de « Mes tâches » collé à droite, rouge ; bleu sur l'entrée active (déjà rouge) */
[data-socle-sidebar] a .s-badge--barre { margin-left: auto; flex: none; }
[data-socle-sidebar] a:is(.active, .on, .s-ici) .s-badge--barre { background: #2563EB; color: #fff; box-shadow: 0 0 0 1.5px #fff; }
@keyframes s-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.s-etiquette {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font: 800 11px/1.3 var(--s-police); background: #F1F5F9; color: var(--s-gris);
}
.s-etiquette--vert { background: var(--s-vert-fond); color: var(--s-vert); }
.s-etiquette--orange { background: var(--s-orange-fond); color: var(--s-orange); }
.s-etiquette--rouge { background: var(--s-alerte-fond); color: var(--s-alerte); }
.s-etiquette--violet { background: var(--s-violet-doux); color: var(--s-violet); }

/* ─── 13. BARRE DE PROGRESSION ────────────────────────────────────────── */
.s-progression { position: relative; height: 8px; border-radius: 4px; background: #EEF1F6; overflow: hidden; }
.s-progression__barre {
  height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--s-rouge), #F43F5E);
  transition: width 400ms var(--s-courbe);
}
.s-progression--vert .s-progression__barre { background: linear-gradient(90deg, var(--s-vert), #22C55E); }
.s-progression--violet .s-progression__barre { background: linear-gradient(90deg, var(--s-violet), #6D4BD8); }
.s-progression--attente .s-progression__barre { width: 35% !important; animation: s-attente 1.2s ease-in-out infinite; }
.s-progression-legende { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font: 800 12px/1.2 var(--s-police); color: var(--s-violet); }
.s-progression-legende span:last-child { color: var(--s-gris); font-variant-numeric: tabular-nums; }
@keyframes s-attente { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ─── 14. EN-TÊTE DE PAGE (compact sur téléphone : ≤ 56–64 px) ──────────── */
.s-entete {
  position: sticky; top: 0; z-index: 50; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 24px;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--s-trait);
}
.s-entete__titre { margin: 0; min-width: 0; font: 900 18px/1.15 var(--s-police); color: var(--s-violet); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-entete__sous { font: 600 11px/1.3 var(--s-police); color: var(--s-gris); }
.s-entete__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.s-entete__retour { flex: none; }
@media (max-width: 640px) {
  .s-entete { gap: 8px; min-height: 52px; padding: max(6px, env(safe-area-inset-top, 0px)) 12px 6px; }
  .s-entete__titre { font-size: 16px !important; }   /* era-sso.js impose h1 à 20 px !important sous 820 px */
  .s-entete__sous { display: none; }
  .s-entete__actions { gap: 6px; }
}

/* ─── 15. GRILLES ─────────────────────────────────────────────────────── */
.s-grille { display: grid; gap: var(--s-e4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--s-grille-min, 260px)), 1fr)); }
.s-grille--serree { gap: var(--s-e3); --s-grille-min: 200px; }
.s-colonnes { display: grid; gap: var(--s-e4); grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
.s-colonnes--egales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .s-colonnes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .s-grille { gap: var(--s-e3); } }

/* ─── 16. TABLEAUX : défilent dans leur cadre, ou deviennent des cartes sur téléphone ─── */
.s-table-cadre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--s-trait); border-radius: var(--s-r2); background: var(--s-blanc); }
.s-table { width: 100%; border-collapse: collapse; font: 600 13px/1.4 var(--s-police); color: var(--s-texte); }
.s-table th { position: sticky; top: 0; background: var(--s-fond-doux); color: var(--s-violet); font-weight: 900; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--s-trait); white-space: nowrap; }
.s-table td { padding: 10px 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.s-table tbody tr:hover { background: var(--s-violet-doux); }
@media (max-width: 640px) {
  .s-table-cartes, .s-table-cartes tbody, .s-table-cartes tr, .s-table-cartes td { display: block; width: 100%; box-sizing: border-box; }
  .s-table-cartes { border: 0; background: none; }
  .s-table-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .s-table-cartes tr {
    margin: 0 0 10px; padding: 10px 14px; background: var(--s-blanc);
    border: 1px solid var(--s-trait); border-radius: var(--s-r2); box-shadow: var(--s-ombre);
  }
  .s-table-cartes tbody tr:hover { background: var(--s-blanc); }
  .s-table-cartes td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  .s-table-cartes td + td { border-top: 1px dashed #F1F5F9; }
  .s-table-cartes td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font: 800 11px/1.3 var(--s-police); color: var(--s-gris); text-transform: uppercase; letter-spacing: .4px; }
  .s-table-cartes td[data-label=""]::before, .s-table-cartes td:not([data-label])::before { content: none; }
  .s-table-cartes td.s-td-titre { display: block; text-align: left; font-weight: 900; font-size: 14px; color: var(--s-violet); }
  .s-table-cartes td.s-td-titre::before { content: none; }
  .s-table-cartes td.s-td-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  .s-table-cartes td.s-td-actions::before { content: none; }
  .s-table-cadre:has(> .s-table-cartes) { border: 0; background: none; overflow: visible; }
}

/* ─── 17. BARRE D'ONGLETS DU BAS + MENU (téléphone ≤ 640 px, js : navigation mobile) ─── */
.s-nav { display: none; }
@media (max-width: 640px) {
  /* la place de la barre est réservée : rien ne se cache dessous */
  body.s-nav-on {
    --s-nav-occupe: calc(var(--s-nav-h) + var(--s-sure-bas));
    --s-bas: var(--s-nav-occupe);
    --s-barre-sure: 0px;
    padding-bottom: var(--s-nav-occupe) !important;
    box-sizing: border-box;
  }
  .s-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--s-z-nav); box-sizing: border-box;
    height: var(--s-nav-occupe); padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--s-sure-bas) max(4px, env(safe-area-inset-left, 0px));
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--s-trait); box-shadow: 0 -4px 18px rgba(37,14,98,.06);
    font-family: var(--s-police); overscroll-behavior: contain;
  }
  .s-nav__lien {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; height: var(--s-nav-h); padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
    color: var(--s-gris); text-decoration: none; font: 800 10.5px/1 var(--s-police); letter-spacing: .1px;
  }
  .s-nav__icone {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 54px; height: 30px; border-radius: 15px; font-size: 19px; line-height: 1;
    transition: background var(--s-t) ease, transform var(--s-t-court) ease;
  }
  .s-nav__texte { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .s-nav__lien:active .s-nav__icone { transform: scale(.88); }
  .s-nav__lien[aria-current="page"] { color: var(--s-violet); }
  .s-nav__lien[aria-current="page"] .s-nav__icone { background: var(--s-violet-doux); box-shadow: inset 0 0 0 1px var(--s-violet-bord); }
  .s-nav__lien[aria-current="page"] .s-nav__texte { color: var(--s-rouge); }
  .s-nav__badge { position: absolute; top: -3px; right: 6px; box-shadow: 0 0 0 2px #fff; }

  /* Un seul menu sur téléphone : la barre du bas remplace les boutons ☰ flottants
     (menu-era.js, era-sso.js, cockpit) et la barre latérale de la page. */
  html body.s-nav-on [data-socle-sidebar],
  html body.s-nav-on #eraMenuTab, html body.s-nav-on #eraMenuBg,
  html body.s-nav-on #eraBurger, html body.s-nav-on #eraBackdrop,
  html body.s-nav-on #navBurger, html body.s-nav-on #navBackdrop { display: none !important; }
  /* le petit Raphaël reste en bas à droite, juste au-dessus de la barre (et d'un bouton « + ») */
  html body.s-nav-on #pr-widget-launcher { bottom: calc(var(--s-nav-occupe) + 12px) !important; }
  html body.s-nav-on:has(.s-fab) #pr-widget-launcher { bottom: calc(var(--s-nav-occupe) + 84px) !important; }
  html body.s-nav-on #pr-widget-panel { bottom: var(--s-nav-occupe) !important; max-height: calc(100dvh - var(--s-nav-occupe) - 40px) !important; }
}

@media (max-width: 640px) {
  /* une barre d'actions collée en bas : le petit Raphaël et le « + » montent au-dessus d'elle */
  html body:has(.s-barre-actions) #pr-widget-launcher { bottom: calc(var(--s-bas) + 80px) !important; }
  body:has(.s-barre-actions) .s-fab { bottom: calc(var(--s-bas) + 80px); }
}

/* le menu complet, dans une feuille */
.s-menu__cherche {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 11px 14px;
  font: 600 16px/1.2 var(--s-police); color: var(--s-texte); background: var(--s-fond-doux);
  border: 1.5px solid var(--s-trait); border-radius: 12px; outline: none;
}
.s-menu__cherche:focus { border-color: var(--s-violet); background: #fff; }
.s-menu__zone { margin: 0 0 16px; }
.s-menu__zone[hidden] { display: none; }
.s-menu__zone-titre { margin: 0 0 8px; font: 900 10px/1 var(--s-police); letter-spacing: 1.2px; color: var(--s-violet); text-transform: uppercase; }
.s-menu__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 641px) { .s-menu__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-menu__tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 74px; padding: 10px 6px; border-radius: var(--s-r2); text-align: center; text-decoration: none;
  background: var(--s-fond-doux); border: 1px solid #EEF1F6; color: var(--s-texte);
  font: 800 11.5px/1.2 var(--s-police); transition: transform var(--s-t-court) ease, background var(--s-t-court) ease;
}
.s-menu__tuile[hidden] { display: none; }
.s-menu__tuile span:first-child { font-size: 22px; line-height: 1; }
.s-menu__tuile:hover { background: var(--s-violet-doux); border-color: var(--s-violet-bord); }
.s-menu__tuile:active { transform: scale(.95); }
.s-menu__tuile.s-ici { background: var(--s-rouge); border-color: var(--s-rouge); color: #fff; }

/* ─── 18. MOUVEMENT RÉDUIT ET IMPRESSION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .s-squelette, .s-vide__emoji, .s-progression--attente .s-progression__barre { animation: none !important; }
  .s-btn, .s-puce, .s-carte--cliquable, .s-onglet, .s-onglet::after, .s-feuille, .s-feuille-fond, .s-toast,
  .s-nav__icone, .s-menu__tuile, .s-progression__barre, .s-badge, .s-fab { transition: none !important; animation: none !important; }
  .s-btn:active, .s-puce:active, .s-carte--cliquable:active, .s-carte--cliquable:hover, .s-nav__lien:active .s-nav__icone { transform: none !important; }
  .s-btn.s-charge::before, .s-btn[aria-busy="true"]::before { animation-duration: 1.6s !important; }
}
@media print {
  .s-nav, .s-feuille, .s-feuille-fond, .s-toasts, .s-fab, .s-barre-actions--fixe { display: none !important; }
  body.s-nav-on { padding-bottom: 0 !important; }
  .s-barre-actions, .s-entete { position: static !important; box-shadow: none !important; }
}

/* ─── 19. ICÔNES DU MENU : une icône au trait, nette et cohérente, par entrée ──────────
   Raphaël, 27/09/2026 : « Facturation vide, Admin quasi invisible, Office Manager pâle… ». Les emojis du menu
   n'avaient ni la même taille, ni le même contraste (🧾 blanc, ⚙️ gris, 📋 en double avec Bon de visite).
   Chaque entrée reçoit ici un pictogramme dessiné au trait (masque SVG, violet ; blanc sur l'entrée active) —
   le même dans la barre latérale des pages, le menu ☰ (menu-era.js) et la feuille « Menu » du téléphone.
   L'emoji d'origine reste dans la page (anciennes versions, secours) : il est seulement masqué ici. */
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/"], a[href="/calendrier"], a[href="/inbox"], a[href="/#alertes"], a[href="#alertes"], a[href="/taches"], a[href="/prospection"], a[href="/marketpulse"], a[href="/estimation"], a[href="/mes-brouillons"], a[href="/contacts"], a[href="/mariage"], a[href="/mariage-off-market"], a[href="/prospects"], a[href="/missions"], a[href="/fiche-bien"], a[href="/bon-visite"], a[href="/ama"], a[href="/tableau"], a[href="/candidatures"], a[href="/gestion-vente"], a[href="/gestion-locative"], a[href="/annuaire"], a[href="/collaborations"], a[href="/marketing"], a[href="/#scoreboard"], a[href="#scoreboard"], a[href="/office-manager"], a[href="/facturation"], a[href="/tableau-excel"], a[href="/envois-auto"], a[href="/admin"], a[href="/formation"], a[href="/inventaire"]) > span:first-child {
  font-size: 0 !important; color: transparent; display: inline-block; flex: none;
  width: 16px; height: 16px; background: var(--s-violet, #250E62);
  -webkit-mask: var(--s-ic) center / contain no-repeat; mask: var(--s-ic) center / contain no-repeat;
}
:is([data-socle-sidebar], #eraMenu, .s-menu) a.s-menu__tuile[href] > span:first-child { width: 24px; height: 24px; }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a.active, a.on, a.s-ici) > span:first-child { background-color: #fff; }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/calendrier"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/inbox"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/#alertes"], a[href="#alertes"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/taches"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/prospection"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/marketpulse"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/estimation"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4l16 16z'/%3E%3Cpath d='M8 16v-4l4 4zM4 8h2M4 12h2'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/mes-brouillons"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/contacts"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/mariage"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/mariage-off-market"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M12 21 8 9l4-6 4 6z'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/prospects"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3Ccircle cx='12' cy='12.5' r='2.5'/%3E%3Cpath d='M8.5 21a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/missions"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/fiche-bien"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/bon-visite"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/ama"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/tableau"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5M13 17V8M18 17v-9'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/candidatures"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8.5 18a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/gestion-vente"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/gestion-locative"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.3-9.3M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/annuaire"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/collaborations"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/marketing"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/#scoreboard"], a[href="#scoreboard"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21v-7h4v7M10 21V8h4v13M15 21v-10h4v10'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/office-manager"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/facturation"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2z'/%3E%3Cpath d='M15 9.5a3 3 0 1 0 0 5M8 11h5M8 13h5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/tableau-excel"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/envois-auto"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/admin"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/formation"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E"); }
:is([data-socle-sidebar], #eraMenu, .s-menu) :is(a[href="/inventaire"]) > span:first-child { --s-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }

/* ─── 20. PC : plus de barre flottante du bas (Raphaël, 27/09/2026 : « ça n'a plus d'intérêt ») ───
   La barre de modules d'era-core.js (Estimation · Prospection · Gestion vente… · Activité) doublait le menu
   de gauche. Sur PC elle disparaît ; sur téléphone, la barre d'onglets du socle la remplace (un seul menu). */
@media (min-width: 641px) {
  #era-platform-bar { display: none !important; }
  body:has(> #era-platform-bar) { padding-bottom: 0 !important; }
}
@media (max-width: 640px) {
  body.s-nav-on #era-platform-bar { display: none !important; }
}