/* ============================================================
   pacs1-theme.css — Thème "outil scientifique" (Google Material-like)
   Surcouche au thème manoir (screen6649.css), chargée APRÈS lui.
   La nav + le menu sont des composants PROPRES (.p-*) indépendants
   du chrome manoir (plus de conflit). Palette Google + Roboto.
   ============================================================ */

:root {
  --p-bg:#ffffff; --p-surface:#f8f9fa; --p-surface-2:#f1f3f4;
  --p-border:#dadce0; --p-border-strong:#c6cacd;
  --p-text:#202124; --p-text-2:#3c4043; --p-text-muted:#5f6368; --p-text-faint:#80868b;
  --p-primary:#1a73e8; --p-primary-hover:#1765cc; --p-primary-light:#e8f0fe;
  --p-radius:8px; --p-radius-sm:4px; --p-radius-lg:16px;
  --p-shadow-1:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.10);
  --p-shadow-2:0 1px 3px 0 rgba(60,64,67,.30),0 4px 8px 3px rgba(60,64,67,.12);
  --p-sans:"Roboto","Helvetica Neue",Arial,system-ui,sans-serif;
  --p-mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  --p-serif:"Gelasio",Georgia,"Times New Roman",serif;
  --p-appbar-h:64px; --p-content:880px;
}

/* ---------- Sécurité : contenu toujours visible (neutralise l'anim AOS manoir) ---------- */
[data-aos] { opacity:1 !important; transform:none !important; visibility:visible !important; }

/* ---------- Masque les éléments de chrome manoir non utilisés ---------- */
.nav, .mnav, .nav-gradient-bg, .menu, .menu_booking, .rooms_header { display:none !important; }

/* ---------- Typographie : UI en sans (Roboto), contenu en serif académique (Gelasio) ---------- */
body, button, input, select, textarea,
.p-appbar, .p-drawer, .footer,
.gdoc-breadcrumb, .gdoc-related, .gdoc-related-card-title {
  font-family: var(--p-sans) !important;
}
.section_title, h1.section_title,
.gdoc-content, .gdoc-content h1, .gdoc-content h2, .gdoc-content h3, .gdoc-content h4, .gdoc-content h5, .gdoc-content h6 {
  font-family: var(--p-serif) !important;
}
/* Tables de données : sans pour la lisibilité des chiffres */
.gdoc-content table, .gdoc-content table th, .gdoc-content table td {
  font-family: var(--p-sans) !important;
}
/* Police alternative manoir (.fontalt = freight-big-pro, non chargée → Georgia) → suit la charte (sans + réglage de police) */
.fontalt { font-family: var(--p-sans) !important; }
html { scroll-behavior:smooth; }
body {
  background: var(--p-bg) !important; color: var(--p-text);
  font-size:18px !important; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0;
}
::selection { background: var(--p-primary-light); }

/* ============================================================
   APP BAR (barre supérieure)
   ============================================================ */
.p-appbar {
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  height: var(--p-appbar-h);
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--p-border);
}
.p-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--p-text); }
.p-brand-mark {
  width:30px; height:30px; border-radius:5px; flex:0 0 auto;
  background:#000000;
  box-shadow: inset 0 0 0 0px rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font:700 16px/1 "Elms Sans",system-ui,sans-serif;
}
.p-brand-mark::before { content:"\0394"; } /* Δ (delta) */
.p-brand-name { font-size:22px; font-weight:800; letter-spacing:-0.01em; }
.p-brand-sub { color:var(--p-text-faint); font-size:14px; font-weight:400; margin-left:4px; line-height:14px; border-left:1px solid #000000; padding-left:10px; }
html[data-theme="dark"] .p-brand-sub { border-left-color:var(--p-border-strong); }
.p-appbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.p-menu-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--p-border); color:var(--p-text-muted);
  font:500 15px/1 var(--p-sans); text-transform:uppercase; letter-spacing:.06em;
  padding:10px 16px; border-radius:var(--p-radius-sm); cursor:pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.p-menu-btn:hover { background:var(--p-surface-2); color:var(--p-text); box-shadow:var(--p-shadow-1); }
.p-menu-btn svg { width:18px; height:18px; fill:currentColor; }

/* ---------- Nav desktop (dans l'app bar) + bouton "More" ---------- */
.p-topnav { display:none; }
@media screen and (min-width:768px){
  .p-topnav { display:flex; align-items:center; gap:2px; margin-left:18px; }
  .p-appbar .p-menu-btn { display:none; }   /* burger remplacé par la nav inline + More en desktop */
}
.p-topnav-link, .p-topnav-more {
  font:500 15px/1 var(--p-sans); color:var(--p-text-2) !important; text-decoration:none;
  padding:9px 12px; border-radius:var(--p-radius-sm);
  background:none; border:none; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; transition:background .12s, color .12s;
}
.p-topnav-link:hover, .p-topnav-more:hover { background:var(--p-surface-2); color:var(--p-text) !important; }
.p-topnav-link.is-active { color:var(--p-text) !important; font-weight:700; }
.p-topnav-more { color:var(--p-text-muted) !important; }
.p-topnav-more svg { opacity:.8; }

/* ============================================================
   DRAWER (menu latéral)
   ============================================================ */
.p-drawer { position:fixed; inset:0; z-index:1100; visibility:hidden; }
.p-drawer-scrim {
  position:absolute; inset:0; background:rgba(32,33,36,.5);
  opacity:0; transition:opacity .2s ease;
}
.p-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:320px; max-width:86vw;
  background:#fff; box-shadow:var(--p-shadow-2);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
html.p-drawer-open .p-drawer { visibility:visible; }
html.p-drawer-open .p-drawer-scrim { opacity:1; }
html.p-drawer-open .p-drawer-panel { transform:translateX(0); }
html.p-drawer-open { overflow:hidden; }
.p-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--p-appbar-h); padding:0 8px 0 24px; border-bottom:1px solid var(--p-border);
}
.p-drawer-title { font-size:18px; font-weight:500; color:var(--p-text); }
.p-drawer-close {
  width:40px; height:40px; border:none; background:none; cursor:pointer;
  font-size:28px; line-height:1; color:var(--p-text-muted); border-radius:50%;
}
.p-drawer-close:hover { background:var(--p-surface-2); color:var(--p-text); }
.p-drawer-nav { padding:8px 0; overflow-y:auto; }
.p-drawer-sec { padding:14px 24px 6px; font-size:15px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--p-text-faint); }
.p-drawer-link {
  display:block; padding:13px 24px; color:var(--p-text) !important; text-decoration:none;
  font-size:17px; border-left:3px solid transparent; transition:background .12s,color .12s,border-color .12s;
}
.p-drawer-link:hover { background:var(--p-surface); color:var(--p-primary) !important; border-left-color:var(--p-primary); }

/* ============================================================
   COLONNE DE CONTENU
   ============================================================ */
.page_main {
  padding: calc(var(--p-appbar-h) + 64px) 24px 80px !important;
  max-width: var(--p-content) !important; margin: 0 auto !important;
  min-height: 60vh; text-align: left !important;
}

/* Fil d'Ariane */
.gdoc-breadcrumb {
  max-width:none !important; margin:0 0 20px !important; padding:0 !important;
  text-align:left !important; color:var(--p-text-faint) !important; font-size:15px; line-height:1.4;
}
.gdoc-breadcrumb a { color:var(--p-text-muted) !important; text-decoration:none !important; }
.gdoc-breadcrumb a:hover { color:var(--p-primary) !important; text-decoration:underline !important; }
.gdoc-breadcrumb-sep { color:var(--p-text-faint); margin:0 .5em; }

/* Titre de page */
.section_header { margin:0 0 24px !important; text-align:left !important; }
/* Les wrappers .section_header* (ajoutés par siteStructure) avaient 2rem de padding latéral
   → contenu plus étroit que .page_main (titre décalé vs fil d'Ariane, et trop de marge sur mobile).
   On les aligne sur la marge de .page_main. */
.section_header, .section_header_text, .section_header_2col,
.gdoc-content .section_header, .gdoc-content .section_header_text, .gdoc-content .section_header_2col {
  padding-left:0 !important; padding-right:0 !important;
}
.section_title, h1.section_title {
  font-size:32px !important; line-height:1.25 !important; font-weight:700 !important;
  color:var(--p-text) !important; text-align:left !important; text-transform:none !important;
  letter-spacing:-0.01em !important; margin:0 !important; padding:0 !important; /* manoir mettait padding:0 2rem */
}

/* ---------- Contenu éditorial ---------- */
/* Corps : taille classique 16px, interligne mesuré */
.gdoc-content { font-size:18px !important; line-height:1.65 !important; color:var(--p-text-2); }
.gdoc-content p { margin:0 0 16px; text-align:left !important; font-size:18px !important; }
/* Neutralise la typo FLUIDE manoir : .section_header_text passe à 2.2rem ≥1440px (rem → suit la largeur).
   On fige tout le texte de contenu en px → taille identique quelle que soit la largeur. */
.gdoc-content .section_header_text,
.gdoc-content .section_header_text p,
.gdoc-content .section_header_text span,
.gdoc-content .section_header_2col,
.gdoc-content .section_header_2col p,
.gdoc-content li { font-size:18px !important; }
/* Titres de contenu : alignés à GAUCHE + GRAS, échelle cohérente */
.gdoc-content h1, .gdoc-content h2, .gdoc-content h3, .gdoc-content h4, .gdoc-content h5, .gdoc-content h6 {
  text-align:left !important; font-weight:700 !important; color:var(--p-text) !important; letter-spacing:-0.01em;
}
.gdoc-content h1, .gdoc-content h2 { font-size:25px !important; line-height:1.3 !important; margin:34px 0 10px !important; }
.gdoc-content h3 { font-size:21px !important; line-height:1.35 !important; margin:28px 0 8px !important; }
.gdoc-content h4 { font-size:19px !important; margin:22px 0 6px !important; }
.gdoc-content h5, .gdoc-content h6 { font-size:18px !important; margin:18px 0 6px !important; }
.gdoc-content a { color:var(--p-primary); text-decoration:none; }
.gdoc-content a:hover { text-decoration:underline; }
.gdoc-content strong, .gdoc-content b { color:var(--p-text); font-weight:600; }
.gdoc-content ul, .gdoc-content ol { margin:0 0 18px; padding-left:26px; }
/* Listes converties depuis <p>• … : rendu serré façon Google Docs */
.gdoc-content ul.gdoc-list { margin:4px 0 16px !important; padding-left:28px !important; }
.gdoc-content ul.gdoc-list li { margin:3px 0 !important; line-height:1.5 !important; }
.gdoc-content li { margin:6px 0; }
.gdoc-content img { border-radius:var(--p-radius); border:1px solid var(--p-border); }
/* Grandes images de contenu (figures) + vidéos / embeds : arrondi marqué façon AlphaFold */
.gdoc-content .gdoc-fig img { border-radius:var(--p-radius-lg) !important; }
/* Figures : image flush avec la colonne (supprime l'espace latéral disgracieux sur desktop) */
.gdoc-content .gdoc-fig { padding-left:0 !important; padding-right:0 !important; }
/* Live research : titre des cartes à 19px (−2px ; override de .gdoc-content h3 qui force 21px) */
.gdoc-content .md-live-title { font-size:19px !important; }
/* Badges meta (statut + NEW) : −3px ; spécificité (0,3,0) pour battre .section_header_text span{18px} */
.gdoc-content .md-live-meta .md-live-status { font-size:13px !important; }
.gdoc-content .md-live-meta .md-live-badge  { font-size:10px !important; }
/* Corps live : 16px (un poil sous la page à 18px ; les <p> internes étaient forcés à 18px par .section_header_text p) */
.gdoc-content .md-live-item .md-live-body,
.gdoc-content .md-live-item .md-live-body p,
.gdoc-content .md-live-item .md-live-body li { font-size:16px !important; }
.gdoc-content .video-responsive, .video-responsive,
.gdoc-content iframe { border-radius:var(--p-radius-lg) !important; overflow:hidden !important; }
.gdoc-content .video-responsive iframe, .video-responsive iframe { border-radius:var(--p-radius-lg) !important; }
.gdoc-content blockquote { margin:24px 0; padding:12px 20px; border-left:4px solid var(--p-primary); background:var(--p-surface); color:var(--p-text-2); border-radius:0 var(--p-radius-sm) var(--p-radius-sm) 0; }
.gdoc-content code, .gdoc-content kbd, .gdoc-content samp { font-family:var(--p-mono); font-size:.88em; background:var(--p-surface-2); color:#174ea6; padding:2px 6px; border-radius:var(--p-radius-sm); }
.gdoc-content .restaurant_menu_separator { display:block !important; height:1px !important; width:100% !important; max-width:100% !important; background:var(--p-border) !important; margin:36px auto !important; position:static !important; }
.gdoc-content .restaurant_menu_separator::before, .gdoc-content .restaurant_menu_separator::after { display:none !important; }

/* ---------- Tables de données (Material) ---------- */
.gdoc-content table { border-collapse:separate !important; border-spacing:0 !important; width:100% !important; max-width:100% !important; margin:24px 0 !important; font-size:16px !important; background:#fff !important; border:1px solid var(--p-border) !important; border-radius:var(--p-radius) !important; overflow:hidden !important; box-shadow:var(--p-shadow-1); }
.gdoc-content table th, .gdoc-content table thead td, .gdoc-content table tr:first-child td { background:var(--p-surface) !important; color:var(--p-text) !important; font-weight:500 !important; text-align:left !important; border:none !important; border-bottom:1px solid var(--p-border) !important; }
.gdoc-content table td, .gdoc-content table th { padding:12px 16px !important; border:none !important; border-bottom:1px solid var(--p-surface-2) !important; color:var(--p-text-2) !important; vertical-align:top !important; text-align:left !important; background:transparent !important; }
.gdoc-content table tr:last-child td { border-bottom:none !important; }
.gdoc-content table tr:nth-child(even) td { background:transparent !important; }
.gdoc-content table tbody tr:hover td { background:var(--p-primary-light) !important; }
.gdoc-content table p { margin:0 !important; }

/* ---------- Boutons CTA (Google filled) ---------- */
.gdoc-cta { justify-content:flex-start !important; gap:12px !important; margin:28px 0 !important; padding:0 !important; }
.gdoc-cta-btn, .gdoc-cta-btn:link, .gdoc-cta-btn:visited { display:inline-flex !important; align-items:center; justify-content:center; height:40px; padding:0 24px !important; background:var(--p-primary) !important; color:#fff !important; font-weight:500 !important; font-size:16px !important; letter-spacing:.02em; text-transform:none !important; border-radius:var(--p-radius-sm) !important; box-shadow:var(--p-shadow-1); transition:background .15s, box-shadow .15s; }
.gdoc-cta-btn:hover { background:var(--p-primary-hover) !important; box-shadow:var(--p-shadow-2); transform:none !important; }

/* ---------- Pages liées (cartes Material) ---------- */
.gdoc-related { margin-top:56px !important; border-top:1px solid var(--p-border) !important; padding:28px 0 0 !important; max-width:none !important; text-align:left !important; }
.gdoc-related-title { font-size:15px !important; font-weight:500 !important; text-transform:uppercase; letter-spacing:.08em; color:var(--p-text-faint) !important; margin:0 0 16px !important; text-align:left !important; }
.gdoc-related-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:16px !important; justify-content:start !important; justify-items:stretch !important; text-align:left !important; }
.gdoc-related-card { width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; display:flex !important; flex-direction:column !important; background:#fff !important; border:1px solid var(--p-border) !important; border-radius:var(--p-radius) !important; overflow:hidden !important; text-decoration:none !important; transition:box-shadow .2s, border-color .2s; }
.gdoc-related-card:hover { box-shadow:var(--p-shadow-1); border-color:var(--p-border-strong); transform:none !important; }
.gdoc-related-card-img { display:block !important; width:100% !important; height:120px !important; aspect-ratio:auto !important; background:var(--p-surface-2) !important; overflow:hidden !important; flex:0 0 auto; }
.gdoc-related-card-img img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; border:none !important; border-radius:0 !important; margin:0 !important; }
.gdoc-related-card-img--placeholder { background:linear-gradient(135deg,#e8f0fe 0%,#eef1f4 100%) !important; }
.gdoc-related-card-img--placeholder::after { content:none !important; background:none !important; }
.gdoc-related-card-title { display:block !important; padding:14px 16px !important; color:var(--p-text) !important; font-weight:500 !important; font-size:16px !important; line-height:1.4 !important; text-align:left !important; font-family:var(--p-sans) !important; }
.gdoc-related-pagination { justify-content:flex-start !important; margin-top:24px !important; }
.gdoc-related-page-btn { border:1px solid var(--p-border) !important; background:#fff !important; color:var(--p-text-muted) !important; border-radius:var(--p-radius-sm) !important; font-family:var(--p-sans) !important; }
.gdoc-related-page-btn:hover { background:var(--p-surface-2) !important; }
.gdoc-related-page-btn.active { background:var(--p-primary) !important; color:#fff !important; border-color:var(--p-primary) !important; }

/* ---------- Footer minimal ---------- */
.footer { display:block !important; background:var(--p-surface) !important; border-top:1px solid var(--p-border); margin-top:64px; box-shadow:none !important; }
.footer_main { padding:32px 24px !important; background:transparent !important; color:var(--p-text-muted) !important; }
.footer_main_wrapper { max-width:var(--p-content); margin:0 auto; }
.footer_main_contact { justify-content:flex-start !important; gap:24px; margin-bottom:12px; }
.footer_main_contact_link, .footer_main_contact_link:link, .footer_main_contact_link:visited { background:transparent !important; color:var(--p-primary) !important; font-weight:500 !important; text-transform:none !important; font-size:16px !important; padding:6px 0 !important; border-radius:0 !important; }
.footer .fill-white { fill:var(--p-primary) !important; }
.footer_main_bottom { text-align:left !important; color:var(--p-text-faint) !important; margin-top:8px !important; }
.footer_vcard, .footer_vcard_item { color:var(--p-text-faint) !important; font-size:15px !important; }
.footer_vcard_item:first-child { color:var(--p-text) !important; font-weight:500 !important; }

/* ---------- Responsive ---------- */
@media screen and (max-width:767px){
  :root { --p-appbar-h:56px; }
  .p-appbar { padding:0 16px; }
  .p-brand-sub { display:none; }
  .page_main { padding-left:16px !important; padding-right:16px !important; }
  .section_title, h1.section_title { font-size:28px !important; }
  .gdoc-content { font-size:18px; }
  .gdoc-related-grid { grid-template-columns:1fr 1fr !important; }
  /* Mobile : images/figures pleine largeur (dans la marge 16px de .page_main) */
  .gdoc-content .gdoc-fig { padding-left:0 !important; padding-right:0 !important; }
}
@media screen and (max-width:480px){ .gdoc-related-grid { grid-template-columns:1fr !important; } }

/* ============================================================
   PRÉFÉRENCES D'AFFICHAGE — police au choix + dark mode (⚙️)
   ============================================================ */

/* Google Sans (Flex) : @font-face lazy — le woff2 n'est téléchargé que si la police est sélectionnée */
@font-face{
  font-family:'Google Sans Flex';
  font-style:normal; font-display:swap; font-weight:1 1000;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
}

/* Choix de police : remappe les variables (contenu + UI). "Default" = inchangé (Gelasio/Roboto). */
html[data-font="gelasio"]{ --p-serif:"Gelasio",Georgia,"Times New Roman",serif; --p-sans:"Roboto","Helvetica Neue",Arial,system-ui,sans-serif; }
html[data-font="elms"]   { --p-serif:"Elms Sans",system-ui,sans-serif; --p-sans:"Elms Sans",system-ui,sans-serif; }
html[data-font="google"] { --p-serif:"Google Sans Flex","Google Sans",system-ui,sans-serif; --p-sans:"Google Sans Flex","Google Sans",system-ui,sans-serif; }
/* Header (app bar) : police TOUJOURS Elms Sans, quel que soit le réglage de police choisi. */
.p-brand, .p-brand-name, .p-brand-sub, .p-menu-btn, .p-topnav-link, .p-topnav-more{ font-family:"Elms Sans",system-ui,sans-serif !important; }

/* ---------- DARK MODE ---------- */
html[data-theme="dark"]{
  color-scheme:dark; background:var(--p-bg);
  --p-bg:#0e1116; --p-surface:#171b21; --p-surface-2:#21262d;
  --p-border:#2d333b; --p-border-strong:#444c56;
  --p-text:#e6edf3; --p-text-2:#c9d1d9; --p-text-muted:#9aa5b1; --p-text-faint:#768390;
  --p-primary:#4f9cf9; --p-primary-hover:#6aa9fa; --p-primary-light:#16263d;
  --p-shadow-1:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.35);
  --p-shadow-2:0 2px 6px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{ background:var(--p-bg) !important; color:var(--p-text); }
html[data-theme="dark"] .p-appbar,
html[data-theme="dark"] .p-menu-btn,
html[data-theme="dark"] .p-icon-btn,
html[data-theme="dark"] .p-drawer-panel{ background:var(--p-surface) !important; }
html[data-theme="dark"] .gdoc-content table{ background:var(--p-surface) !important; }
html[data-theme="dark"] .gdoc-content table th,
html[data-theme="dark"] .gdoc-content table thead td,
html[data-theme="dark"] .gdoc-content table tr:first-child td{ background:var(--p-surface-2) !important; }
html[data-theme="dark"] .gdoc-related-card{ background:var(--p-surface) !important; }
html[data-theme="dark"] .gdoc-content code,
html[data-theme="dark"] .gdoc-content kbd,
html[data-theme="dark"] .gdoc-content samp{ color:#8ab4f8 !important; background:var(--p-surface-2) !important; }
html[data-theme="dark"] .gdoc-content img{ opacity:.92; }
/* Live research (mdLive) : carte sombre (sinon fond #fff en dur → texte clair illisible) */
html[data-theme="dark"] .md-live-item{ background:var(--p-surface); }
html[data-theme="dark"] .md-live-item-live{ box-shadow:0 0 0 1px rgba(79,156,249,.25); }

/* ---------- Bouton icône ⚙️ (app bar) ---------- */
.p-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:#fff; border:1px solid var(--p-border);
  color:var(--p-text-muted); border-radius:50%; cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.p-icon-btn:hover{ background:var(--p-surface-2); color:var(--p-text); box-shadow:var(--p-shadow-1); }
.p-icon-btn svg{ width:20px; height:20px; fill:currentColor; }

/* ---------- Panneau de réglages (popover) ---------- */
.p-settings{ position:relative; }
.p-settings-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:1200;
  width:264px; background:var(--p-surface); border:1px solid var(--p-border);
  border-radius:var(--p-radius); box-shadow:var(--p-shadow-2); padding:14px;
  font-family:var(--p-sans);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.p-settings.p-settings-open .p-settings-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.p-set-group{ margin-bottom:14px; }
.p-set-group:last-child{ margin-bottom:0; }
.p-set-label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--p-text-faint); margin:0 0 8px; }
.p-seg{ display:flex; gap:6px; }
.p-seg-btn{
  flex:1; padding:9px 0; border:1px solid var(--p-border); background:var(--p-bg);
  color:var(--p-text-2); border-radius:var(--p-radius-sm); cursor:pointer;
  font:500 14px/1 var(--p-sans); display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .12s,color .12s,border-color .12s;
}
.p-seg-btn svg{ opacity:.85; }
.p-seg-btn:hover{ background:var(--p-surface-2); color:var(--p-text); }
.p-seg-btn[aria-checked="true"]{ background:var(--p-primary); border-color:var(--p-primary); color:#fff; }
.p-set-fonts{ display:flex; flex-direction:column; gap:6px; }
.p-font-btn{
  text-align:left; padding:10px 12px; border:1px solid var(--p-border); background:var(--p-bg);
  border-radius:var(--p-radius-sm); cursor:pointer; display:flex; flex-direction:column; gap:1px;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.p-font-btn:hover{ background:var(--p-surface-2); }
.p-font-btn[aria-checked="true"]{ border-color:var(--p-primary); box-shadow:inset 0 0 0 1px var(--p-primary); }
.p-font-name{ font-size:16px; line-height:1.2; color:var(--p-text); }
.p-font-desc{ font-size:12px; color:var(--p-text-faint); }
@media screen and (max-width:767px){
  .p-settings-panel{ position:fixed; top:calc(var(--p-appbar-h) + 8px); right:12px; left:auto; width:auto; min-width:240px; max-width:calc(100vw - 24px); }
}