/* =====================================================================
   SUITIX — peinture Ashler & Manson pour La Suite numérique (bêta)
   ---------------------------------------------------------------------
   Injectée par le relais nginx juste avant </head> dans :
     - Messages  (mail.beta.ashler-manson.com)    Cunningham v3 + ui-kit
     - Calendars (agenda.beta.ashler-manson.com)  Cunningham v3 + ui-kit
     - Docs      (docs.beta.ashler-manson.com)    Cunningham v3 (Next.js)
     - Visio     (visio.beta.ashler-manson.com)   Panda CSS + LiveKit
   On ne touche à aucun code : uniquement des variables CSS et quelques
   règles de masquage, avec des sélecteurs relevés dans les CSS/JS publics
   des quatre applications (relevé du 31/10/2026).
   Règle de lecture : la variable est surchargée en !important sur
   :root, html, body, [class*="cunningham-theme"], [data-theme] pour
   gagner sur le thème de l'application quel que soit l'ordre de chargement.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Police : Source Sans 3 (variable, latin, graisses 200 à 900),
      servie par le relais au même endroit que cette feuille.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("/suitix-peinture/polices/source-sans-3.woff2") format("woff2-variations"),
       url("/suitix-peinture/polices/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   2. Charte Ashler & Manson : jetons exacts, réutilisés plus bas.
   --------------------------------------------------------------------- */
:root {
  --am-marine: #001f3e;
  --am-marine-texte: #0c2340;
  --am-marine-clair: #1e4470;
  --am-or: #c6a46a;
  --am-or-fonce: #8a6a2f;
  --am-creme: #f7f4ec;
  --am-creme-clair: #fbfaf7;
  --am-filet: #e6e3dc;
  --am-filet-fort: #dcd9d2;
  --am-filet-clair: #efede7;
  --am-corps: #23282e;
  --am-secondaire: #3a424d;
  --am-discret: #6b7480;
  --am-sable: #a9a294;
  --am-sur-marine: #f5f0e6;
  --am-police: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --am-angle: 2px;
}


/* ---------------------------------------------------------------------
   3. Cunningham v3 (Messages, Calendars, Docs) — variables globales.
      Relevé : le bouton principal (.c__button--brand--primary) prend
      --c--contextuals--background--semantic--brand--primary, qui vaut
      var(--c--globals--colors--brand-550) dans les trois applications
      (survol : brand-650). L'étape 550 vaut donc #0c2340 (marine-texte).
      Les éclaircis (050 à 450) sont des teintes du marine-clair, les
      foncés (600 à 950) partent du marine #001f3e.
      Gris : chauds en clair (crème, filets, sable), ardoise de la charte
      en foncé (discret, secondaire, corps). L'ordre clair → foncé est
      conservé, donc le thème sombre des applications reste lisible.
   --------------------------------------------------------------------- */
:root, html, body, [class*="cunningham-theme"], [data-theme] {
  /* Échelle « brand » complète, 050 à 950 (pas de 50 dans Cunningham v3) */
  --c--globals--colors--brand-050: #eff2f5 !important;
  --c--globals--colors--brand-100: #e0e5eb !important;
  --c--globals--colors--brand-150: #ced6e0 !important;
  --c--globals--colors--brand-200: #bcc7d4 !important;
  --c--globals--colors--brand-250: #a7b6c7 !important;
  --c--globals--colors--brand-300: #93a5ba !important;
  --c--globals--colors--brand-350: #7c93ac !important;
  --c--globals--colors--brand-400: #66809e !important;
  --c--globals--colors--brand-450: #426287 !important;
  --c--globals--colors--brand-500: #1e4470 !important; /* marine-clair */
  --c--globals--colors--brand-550: #0c2340 !important; /* marine-texte : bouton principal */
  --c--globals--colors--brand-600: #001f3e !important; /* marine */
  --c--globals--colors--brand-650: #001a35 !important;
  --c--globals--colors--brand-700: #00162d !important;
  --c--globals--colors--brand-750: #001226 !important;
  --c--globals--colors--brand-800: #000f20 !important;
  --c--globals--colors--brand-850: #000c1a !important;
  --c--globals--colors--brand-900: #000914 !important;
  --c--globals--colors--brand-950: #00060d !important;

  /* Gris alignés sur la charte (gray-000 reste blanc : cartes et champs) */
  --c--globals--colors--gray-000: #ffffff !important;
  --c--globals--colors--gray-025: #fbfaf7 !important; /* crème-clair */
  --c--globals--colors--gray-050: #f7f4ec !important; /* crème */
  --c--globals--colors--gray-100: #efede7 !important; /* filet-clair */
  --c--globals--colors--gray-150: #e6e3dc !important; /* filet */
  --c--globals--colors--gray-200: #dcd9d2 !important; /* filet-fort */
  --c--globals--colors--gray-250: #cac6bd !important;
  --c--globals--colors--gray-300: #b8b2a6 !important;
  --c--globals--colors--gray-350: #a9a294 !important; /* sable */
  --c--globals--colors--gray-400: #958f84 !important;
  --c--globals--colors--gray-450: #827f79 !important;
  --c--globals--colors--gray-500: #767a80 !important;
  --c--globals--colors--gray-550: #6b7480 !important; /* discret : texte tertiaire */
  --c--globals--colors--gray-600: #3a424d !important; /* secondaire : texte secondaire */
  --c--globals--colors--gray-650: #353c46 !important;
  --c--globals--colors--gray-700: #30373f !important;
  --c--globals--colors--gray-750: #2b3138 !important;
  --c--globals--colors--gray-800: #272c32 !important;
  --c--globals--colors--gray-850: #23282e !important; /* corps : texte principal */
  --c--globals--colors--gray-900: #1a1e23 !important;
  --c--globals--colors--gray-950: #111417 !important;
  --c--globals--colors--gray-1000: #000000 !important;

  /* Couleur des logos d'application dessinés par Cunningham (Docs) */
  --c--globals--colors--logo-1-light: #001f3e !important;
  --c--globals--colors--logo-2-light: #001f3e !important;
  --c--globals--colors--logo-1-dark: #f5f0e6 !important;
  --c--globals--colors--logo-2-dark: #f5f0e6 !important;

  /* Familles de police (Marianne / Inter / Hanken Grotesk aujourd'hui) */
  --c--globals--font--families--base: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
  --c--globals--font--families--accent: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;

  /* Éditeur BlockNote / Mantine (Docs, Messages) */
  --mantine-font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
  --mantine-font-family-headings: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;

  /* Anciens jetons Cunningham v2 encore lus par Calendars, sans valeur
     définie (repli sur le bleu Google #1a73e8) : on les définit. */
  --c--theme--colors--primary-500: #1e4470 !important;
  --c--theme--colors--primary-600: #0c2340 !important;
  --c--theme--colors--primary-700: #001f3e !important;
  --c--theme--colors--greyscale-50: #f7f4ec !important;
  --c--theme--colors--greyscale-100: #efede7 !important;
  --c--theme--colors--greyscale-200: #dcd9d2 !important;
  --c--theme--colors--greyscale-500: #767a80 !important;
  --c--theme--colors--greyscale-600: #6b7480 !important;
  --c--theme--colors--greyscale-700: #3a424d !important;
  --c--theme--colors--greyscale-800: #272c32 !important;
  --c--theme--colors--greyscale-900: #23282e !important;
}


/* ---------------------------------------------------------------------
   4. Cunningham v3 — jetons contextuels et composants.
      Les applications ne figent aucun jeton contextuel en dur (tous
      pointent vers les globales ci-dessus) ; on n'en surcharge que trois :
      le texte sur fond marine (sur-marine), le survol du bouton principal
      (marine-clair, sinon le survol est invisible entre deux marines) et
      le focus des champs (filet or 2 px).
   --------------------------------------------------------------------- */
:root, html, body, [class*="cunningham-theme"], [data-theme] {
  --c--contextuals--content--semantic--brand--on-brand: #f5f0e6 !important;
  --c--contextuals--background--semantic--brand--primary-hover: #1e4470 !important;

  /* Focus des champs : filet or de 2 px */
  --c--components--forms-input--border-color--focus: #c6a46a !important;
  --c--components--forms-select--border-color--focus: #c6a46a !important;
  --c--components--forms-textarea--border-color--focus: #c6a46a !important;
  --c--components--forms-datepicker--border-color--focus: #c6a46a !important;
  --c--components--forms-checkbox--border-color--focus: #c6a46a !important;
  --c--components--forms-input--border-width--focus: 2px !important;
  --c--components--forms-select--border-width--focus: 2px !important;
  --c--components--forms-textarea--border-width--focus: 2px !important;
  --c--components--forms-datepicker--border-width--focus: 2px !important;

  /* Angles quasi droits : boutons, champs, cartes, fenêtres, menus.
     Les pastilles (badge 12px), l'interrupteur (switch) et les avatars
     ne sont pas touchés : ils restent ronds. */
  --c--components--button--border-radius: 2px !important;
  --c--components--button--border-radius--active: 2px !important;
  --c--components--button--border-radius--focus: 2px !important;
  --c--components--alert--border-radius: 2px !important;
  --c--components--forms-input--border-radius: 2px !important;
  --c--components--forms-input--border-radius--hover: 2px !important;
  --c--components--forms-input--border-radius--focus: 2px !important;
  --c--components--forms-select--border-radius: 2px !important;
  --c--components--forms-select--border-radius--hover: 2px !important;
  --c--components--forms-select--border-radius--focus: 2px !important;
  --c--components--forms-textarea--border-radius: 2px !important;
  --c--components--forms-textarea--border-radius--hover: 2px !important;
  --c--components--forms-textarea--border-radius--focus: 2px !important;
  --c--components--forms-datepicker--border-radius: 2px !important;
  --c--components--forms-datepicker--border-radius--hover: 2px !important;
  --c--components--forms-datepicker--border-radius--focus: 2px !important;
  --c--components--modal--border-radius: 2px !important;
  --c--components--modal--tab-item-border-radius: 2px !important;
  --c--components--calendar--border-radius: 2px !important;
  --c--components--calendar--menu-border-radius: 2px !important;
  --c--components--calendar--cell-border-radius: 2px !important;
  --c--components--tooltip--border-radius: 2px !important;
}

/* BlockNote déclare sa police sur .bn-root (et non sur :root) */
.bn-root, .bn-container {
  --bn-font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
}


/* ---------------------------------------------------------------------
   5. Visio (Meet) — Panda CSS, jetons --colors-* / --radii-* / --fonts-*.
      Relevé : le bouton principal prend primary.800 (#000091 aujourd'hui),
      survol primary.action ; le jeton sémantique --colors-primary (LiveKit)
      pointe vers blue-700. On repeint les deux.
   --------------------------------------------------------------------- */
:root, html, body, [data-lk-theme], [data-theme] {
  --colors-primary-50: #eff2f5 !important;
  --colors-primary-100: #e0e5eb !important;
  --colors-primary-200: #ced6e0 !important;
  --colors-primary-300: #a7b6c7 !important;
  --colors-primary-400: #66809e !important;
  --colors-primary-500: #1e4470 !important;
  --colors-primary-600: #102a4a !important;
  --colors-primary-700: #0a1f38 !important;
  --colors-primary-800: #0c2340 !important; /* bouton principal */
  --colors-primary-900: #00172f !important;
  --colors-primary-950: #001226 !important;
  --colors-primary-action: #1e4470 !important; /* survol du bouton principal */

  /* Interface sombre de la salle de réunion : marine au lieu du violet */
  --colors-primary-dark-50: #000c18 !important;
  --colors-primary-dark-75: #00132a !important;
  --colors-primary-dark-100: #0c2340 !important;
  --colors-primary-dark-200: #1e3a5c !important;
  --colors-primary-dark-300: #2f5079 !important;
  --colors-primary-dark-400: #476a94 !important;
  --colors-primary-dark-500: #6684aa !important;
  --colors-primary-dark-600: #859fc0 !important;
  --colors-primary-dark-700: #a5b8d1 !important;
  --colors-primary-dark-800: #c5d1e1 !important;
  --colors-primary-dark-900: #e2e8f0 !important;
  --colors-primary-dark-950: #f5f0e6 !important;
  --colors-primary-dark-action: #c6a46a !important;

  /* Jetons sémantiques (LiveKit et composants) */
  --colors-primary: #0c2340 !important;
  --colors-primary-hover: #1e4470 !important;
  --colors-primary-active: #001f3e !important;
  --colors-primary-text: #f5f0e6 !important;
  --colors-primary-subtle: #eff2f5 !important;
  --colors-primary-subtle-text: #0c2340 !important;
  --colors-primary-warm: #a7b6c7 !important;
  --colors-focus-ring: #c6a46a !important;
  --colors-default-text: #23282e !important;

  /* Gris de Visio alignés sur la charte */
  --colors-greyscale-000: #ffffff !important;
  --colors-greyscale-50: #f7f4ec !important;
  --colors-greyscale-100: #efede7 !important;
  --colors-greyscale-200: #e6e3dc !important;
  --colors-greyscale-250: #dcd9d2 !important;
  --colors-greyscale-300: #cac6bd !important;
  --colors-greyscale-400: #a9a294 !important;
  --colors-greyscale-500: #6b7480 !important;
  --colors-greyscale-600: #3a424d !important;
  --colors-greyscale-700: #30373f !important;
  --colors-greyscale-750: #2b3138 !important;
  --colors-greyscale-800: #272c32 !important;
  --colors-greyscale-900: #23282e !important;
  --colors-greyscale-950: #1a1e23 !important;
  --colors-greyscale-1000: #111417 !important;
  --colors-gray-50: #fbfaf7 !important;
  --colors-gray-100: #f7f4ec !important;
  --colors-gray-200: #efede7 !important;
  --colors-gray-300: #e6e3dc !important;
  --colors-gray-400: #a9a294 !important;
  --colors-gray-500: #6b7480 !important;
  --colors-gray-600: #3a424d !important;
  --colors-gray-700: #30373f !important;
  --colors-gray-800: #23282e !important;
  --colors-gray-900: #1a1e23 !important;
  --colors-gray-950: #111417 !important;

  /* Angles : 4 / 6 / 8 / 16 px → 2 px ; « full » (pastilles, avatars) intact */
  --radii-4: 2px !important;
  --radii-6: 2px !important;
  --radii-8: 2px !important;
  --radii-16: 2px !important;
  --lk-border-radius: 2px !important;
}

/* Police Visio : --fonts-sans, sauf si l'utilisateur a choisi une police
   d'accessibilité (classes html.font-lexend / atkinson / opendyslexic). */
html:not(.font-lexend):not(.font-atkinson-hyperlegible):not(.font-opendyslexic) {
  --fonts-sans: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
}
html {
  --global-font-body: var(--fonts-sans) !important;
}
html:not(.font-lexend):not(.font-atkinson-hyperlegible):not(.font-opendyslexic) .ff_Marianne {
  font-family: var(--am-police) !important;
}

/* Visio : petits arrondis écrits en dur dans les classes atomiques Panda */
.bdr_0\.1875rem, .bdr_0\.25rem, .bdr_4px, .bdr_5px, .bdr_6px, .bdr_7px, .bdr_8px {
  border-radius: 2px !important;
}


/* ---------------------------------------------------------------------
   6. Focus : filet or de 2 px partout (hors champs de saisie, qui ont
      déjà leur bordure or via les jetons, et hors zone d'édition).
      L'anneau bleu des boutons Cunningham (box-shadow) est retiré.
   --------------------------------------------------------------------- */
:focus-visible:not(input):not(textarea):not(select):not([contenteditable]):not([contenteditable] *) {
  outline: 2px solid #c6a46a !important;
  outline-offset: 2px !important;
}
.c__button:focus-visible {
  box-shadow: none !important;
}


/* ---------------------------------------------------------------------
   7. Retrait de ce qui fait « État ».
   --------------------------------------------------------------------- */

/* 7a. Menu « gaufre » (La Gaufre) — bouton LaGaufreV2 du ui-kit
       (Messages, Calendars, Docs), ancien bouton d'intégration,
       fenêtre du widget, et emplacement du panneau mobile de Calendars. */
.lagaufre-button,
.lasuite-gaufre-btn,
#lasuite-widget-lagaufre-shadow,
.calendars__home__left-panel__gaufre {
  display: none !important;
}

/* 7b. Logos République française / Marianne
       - pied de page ui-kit (Calendars) : logo RF par défaut, image
         embarquée en data:image/svg+xml quand aucun logo n'est configuré ;
       - classe .c__logo-gouv (bloc-marque ui-kit, par précaution) ;
       - pied de page « gouvernement » de Visio (Marianne + devise),
         inactif aujourd'hui (use_french_gov_footer = false). */
img.c__footer__logo[src^="data:image/svg+xml"],
.c__logo-gouv,
footer:has(a[href*="legifrance.gouv.fr"]) {
  display: none !important;
}

/* 7c. Liens gouvernementaux des pieds de page
       - ui-kit (Calendars) : ANCT, licence Etalab ;
       - Docs : DINUM, ZenDiS, licence Etalab ;
       - accueil Docs : section « Gouvernements ❤️ Open Source ». */
.c__footer a[href*="gouv.fr"],
.c__footer a[href*="etalab"],
.c__footer__content__mention:has(a[href*="etalab"]),
[class~="--docs--footer"] a[href*="gouv.fr"],
[class~="--docs--footer"] a[href*="zendis.de"],
[class~="--docs--footer-licence"]:has(a[href*="etalab"]),
[class~="--docs--home-section"]:has(a[href*="numerique.gouv.fr"]) {
  display: none !important;
}

/* 7d. Bouton « S'identifier avec ProConnect » → « Se connecter avec SUITIX »
       Le logo et le texte ProConnect sont une image de fond (ou un SVG
       enfant dans Docs) : on la retire et on écrit notre libellé.
       - Messages / Calendars : button.pro-connect-button (ui-kit, image
         en style en ligne, d'où le !important) ;
       - Docs : .--docs--proconnect-button (SVG enfant) ;
       - Visio : lien a[data-attr="login"] dont la classe atomique Panda
         contient « proconnect-button » (affiché seulement si
         use_proconnect_button = true), et le lien d'aide agentconnect. */
button.c__button.pro-connect-button,
[class~="--docs--proconnect-button"],
a[data-attr="login"][class*="proconnect-button"] {
  background-image: none !important;
  background-color: #0c2340 !important;
  color: #f5f0e6 !important;
  border: none !important;
  border-radius: 2px !important;
  width: auto !important;
  min-width: 214px !important;
  height: 48px !important;
  padding: 0 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
button.c__button.pro-connect-button:hover,
[class~="--docs--proconnect-button"]:hover,
a[data-attr="login"][class*="proconnect-button"]:hover,
a[data-attr="login"][class*="proconnect-button"][data-hovered] {
  background-image: none !important;
  background-color: #1e4470 !important;
}
button.c__button.pro-connect-button > *,
[class~="--docs--proconnect-button"] > * {
  display: none !important;
}
button.c__button.pro-connect-button::after,
[class~="--docs--proconnect-button"]::after,
a[data-attr="login"][class*="proconnect-button"]::after {
  content: "Se connecter avec SUITIX";
  font-family: var(--am-police);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: #f5f0e6;
  white-space: nowrap;
}
a[href^="https://agentconnect.gouv.fr"],
a[href^="https://proconnect.gouv.fr"] {
  display: none !important;
}

/* 7e. Accueil de Visio : carrousel de présentation (diapositive 1 :
       « conçue pour tous les agents publics… »). Seul carrousel des
       quatre applications ; on masque aussi sa colonne vide. */
[role="region"][aria-roledescription="carousel"],
div:has(> [role="region"][aria-roledescription="carousel"]) {
  display: none !important;
}

/* =====================================================================
   Logos SUITIX à une adresse neuve (31/10). Les navigateurs gardent un an
   les anciens logos (/assets/logo.svg…) : on ne compte pas sur le relais
   seul, la feuille désigne directement nos images.
   ===================================================================== */
img[src$="/assets/logo.svg"] { content: url(/suitix-peinture/logos/visio.svg); height: 36px !important; width: auto !important; }
img[src*="/app-logo-"] { content: url(/suitix-peinture/logos/messagerie.svg); width: auto !important; }
img[src*="/app-icon-"],
img[src*="cal_icon"],
img[src*="logo-icon_beta"] { content: url(/suitix-peinture/logos/icone.svg); }
img[src*="cal_logotype"],
img[src*="cal_full_logotype"] { content: url(/suitix-peinture/logos/agenda.svg); width: auto !important; }

/* =====================================================================
   Titres en Cormorant Garamond et fond crème, comme la coquille.
   ===================================================================== */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url(/suitix-peinture/polices/cormorant-garamond.woff2) format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
/* Visio (LiveKit pose data-lk-theme sur <html>) : accueil et pages hors appel. */
html[data-lk-theme] body { background-color: #f7f4ec !important; }
html[data-lk-theme] h1,
html[data-lk-theme] h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  color: #0c2340 !important;
  letter-spacing: 0 !important;
}
/* Tuile d'un participant sans caméra : marine de la charte au lieu de la couleur tirée au sort. */
html[data-lk-theme] .lk-participant-placeholder,
html[data-lk-theme] .lk-participant-placeholder > * {
  background: radial-gradient(circle at 50% 45%, #1e4470 0%, #0c2340 55%, #001f3e 100%) !important;
}
/* La pastille de l'initiale : or de la charte, lettre marine. */
html[data-lk-theme] .lk-participant-placeholder > * > * {
  background: #c6a46a !important;
  color: #001f3e !important;
}

/* =====================================================================
   Docs (Notes partagées) : logo SUITIX à la place de « Docs », fonds de la
   charte. Docs nomme ses blocs par des classes « --docs--… ».
   ===================================================================== */
[class~="--docs--header-logo-link"] [data-testid="header-icon-docs"] {
  content: url(/suitix-peinture/logos/notes.svg);
  width: auto !important;
  height: 36px !important;
}
[class~="--docs--header-logo-link"] [class~="--docs--title"] { display: none !important; }
[class~="--docs--main-layout"],
[class~="--docs--page-layout"] {
  background: #f7f4ec !important;
}
[class~="--docs--left-panel"],
[class~="--docs--resizable-left-panel"],
[class~="--docs--header"],
[class~="--docs--header-bar"] {
  background: #fbfaf7 !important;
}
[class~="--docs--doc-grid"] {
  background: #ffffff !important;
  border: 1px solid #e6e3dc !important;
  border-radius: 2px !important;
  padding: 8px 16px !important;
}
[class~="--docs--doc-grid"] h2,
[class~="--docs--doc-grid"] h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  color: #0c2340 !important;
}

/* Recette du 31/10 (nuit) ------------------------------------------------ */
/* Visio : le grand conteneur blanc de l'accueil passe en crème (classes atomiques Panda). */
html[data-lk-theme] .d_flex.flex-d_column.bg-c_white.flex_1 { background-color: #f7f4ec !important; }
/* Docs : le mot « Docs » (h1 sans classe propre) à côté de notre logo, et le dégradé gris du <main>. */
[class~="--docs--header-logo-link"] h1 { display: none !important; }
[class~="--docs--main-layout"] main { background: #f7f4ec !important; background-image: none !important; }