/* Additions on top of orbicul-brand.css: language switcher, fallback
   notice, lead-sent confirmation. Kept in a separate file so the
   brand stylesheet can still be swapped/updated independently. */

.header-right{ display:flex; align-items:center; gap:1rem; }

.lang-switcher{ position:relative; }
.lang-switcher summary{
  list-style:none; cursor:pointer; font-size:.85rem; font-weight:700;
  color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  padding:.4rem .75rem; letter-spacing:.03em;
}
.lang-switcher summary::-webkit-details-marker{ display:none; }
.lang-switcher summary:hover{ border-color:var(--accent); }
.lang-switcher ul{
  list-style:none; margin:0; padding:.5rem; position:absolute; right:0; top:calc(100% + .5rem);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  min-width:180px; max-height:320px; overflow-y:auto; z-index:20;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.lang-switcher li{ margin:0; }
.lang-switcher a, .lang-switcher .lang-pending{
  display:block; padding:.45rem .6rem; border-radius:6px; font-size:.9rem; text-decoration:none;
}
.lang-switcher a{ color:var(--text); }
.lang-switcher a:hover{ background:var(--surface-raised); color:var(--accent); }
.lang-switcher a.is-current{ color:var(--accent); font-weight:700; }
.lang-switcher .lang-pending{ color:var(--muted); opacity:.55; cursor:default; }

.fallback-notice{
  background:var(--surface-raised); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.9rem; color:var(--muted); margin-top:1.5rem;
}

.lead-sent{
  background:rgba(149,193,31,.12); border:1px solid var(--accent); color:var(--accent-strong);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.92rem; margin-bottom:1rem;
}

/* The FAQ question is now a real <h3> inside <summary> for semantic
   correctness (search engines / AI crawlers / screen readers read the
   heading outline, not just visible text) — reset it to look exactly
   like the plain-text label it replaced, not like a document heading. */
.faq-item summary h3{
  display:inline; font:inherit; margin:0; color:inherit; font-weight:600;
}

/* ---- Supporting ("one page, one question") pages ---- */
.hero-supporting .eyebrow a{ color:var(--accent); text-decoration:none; font-weight:600; }
.hero-supporting .eyebrow a:hover{ text-decoration:underline; }
.hero-supporting h1{ margin-bottom:0; }

.direct-answer{
  font-size:1.15rem; line-height:1.7; color:var(--text);
  border-left:3px solid var(--accent); padding-left:1.2rem; margin:0;
}

.cluster-card-pending{
  opacity:.55; cursor:default;
}
.cluster-card-pending .pending-label{
  font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}

/* ---- Visible breadcrumbs (structured data alone isn't enough —
   spec explicitly wants both machine- and human-readable) ---- */
.breadcrumbs{ padding:.9rem 0; font-size:.85rem; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.breadcrumbs li{ margin:0; display:flex; align-items:center; gap:.4rem; color:var(--muted); }
.breadcrumbs a{ color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--accent); }
.breadcrumbs li[aria-current] { color:var(--text); font-weight:600; }

/* ---- Visually-hidden labels: present for screen readers and form
   semantics, invisible on screen where the placeholder already
   communicates the field's purpose visually. Placeholder text alone
   is not an accessible label. ---- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Comparative/categorical content tables (maturity models,
   level definitions, scoring scales) — semantic <table>, not prose,
   per the audit's explicit "tables not paragraphs" recommendation. ---- */
.table-wrap{ overflow-x:auto; margin:1.6rem 0; border:1px solid var(--border); border-radius:var(--radius); }
.orgx-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.orgx-table caption{
  text-align:left; padding:.9rem 1.1rem .4rem; font-weight:700; color:var(--text);
  font-family:'Raleway',sans-serif; font-size:1rem;
}
.orgx-table th, .orgx-table td{
  padding:.75rem 1.1rem; text-align:left; border-bottom:1px solid var(--border);
  vertical-align:top; color:var(--text);
}
.orgx-table thead th{
  background:var(--surface); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
  border-bottom:1px solid var(--border);
}
.orgx-table tbody th[scope="row"]{
  font-weight:600; background:var(--surface); white-space:nowrap;
}
.orgx-table tbody tr:last-child td, .orgx-table tbody tr:last-child th{ border-bottom:none; }

/* ---- Editorial cross-domain links — deliberately understated, one
   per page maximum, attached to the specific paragraph that earned
   it. Never styled as a prominent CTA; this is a footnote-weight
   "you might also want this" for a genuinely interested reader. ---- */
.cross-link{
  margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--border);
  font-size:.88rem;
}
.cross-link-eyebrow{ color:var(--muted); margin-right:.3rem; }
.cross-link a{ color:var(--accent); text-decoration:underline; }

/* ---- Dedicated booking page template ---- */
.orgx-booking-page{ padding-top:4.5rem; padding-bottom:4.5rem; }

/* ---- Scheduler modal ----
   Same modal pattern used across the ORGX family (Digital Services runs
   the identical chrome under its own domain-accent colours). The widget
   inside needs no variable bridge — the shared booking plugin's CSS
   already falls back to --bg/--surface/--border/--text/--muted/--accent/
   --accent-strong/--accent-ink/--radius, the exact same token names this
   theme already defines, so it inherits them natively. */
body.scheduler-body-lock{ overflow:hidden; }

.scheduler-backdrop{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(6,10,15,.72);
  visibility:hidden; opacity:0;
  transition:opacity .2s ease, visibility .2s ease;
}
.scheduler-backdrop.is-open{ visibility:visible; }
.scheduler-backdrop.is-visible{ opacity:1; }

.scheduler-modal{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 32px 96px rgba(0,0,0,.5);
  width:100%; max-width:840px; max-height:92vh; overflow-y:auto;
  padding:clamp(1.5rem,4vw,3rem);
  display:flex; flex-direction:column; gap:1.5rem;
  transform:translateY(16px);
  transition:transform .2s ease;
}
.scheduler-backdrop.is-visible .scheduler-modal{ transform:translateY(0); }

.scheduler-modal__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.scheduler-modal__heading{ flex:1; min-width:0; }
.scheduler-modal__title{ margin-bottom:.4rem; }
.scheduler-modal__subtitle{ color:var(--muted); margin:0; }
.scheduler-modal__close{
  flex-shrink:0; width:32px; height:32px; border-radius:var(--radius);
  border:1px solid var(--border); background:transparent; color:var(--muted);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.scheduler-modal__close:hover{ border-color:var(--accent); color:var(--accent); }
.scheduler-modal__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.scheduler-cb-wrap .orgx-cb-widget{ max-width:none; }

.scheduler-cb-fallback{ color:var(--muted); }
.scheduler-cb-fallback a{ color:var(--accent); }

/* ── Weekly grid layout for the shared widget's day list ─────────────────────
   Built by scheduler.js by moving (never cloning) the plugin's own
   .orgx-cb-day elements into Mon–Fri columns, one week at a time — same
   pattern as Digital Services, just plain ORGX green throughout since this
   theme has no per-domain accent system. */
.orgx-cb-weekgrid__nav{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.8rem;
}
.orgx-cb-weekgrid__label{
  font-size:.85rem; font-weight:700; color:var(--muted);
  min-width:140px; text-align:center;
}
.orgx-cb-weekgrid__navbtn{
  width:28px; height:28px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface); color:var(--muted);
  cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.orgx-cb-weekgrid__navbtn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.orgx-cb-weekgrid__navbtn:disabled{ opacity:.35; cursor:not-allowed; }

.orgx-cb-weekgrid__panel{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-bottom:1.8rem;
}
.orgx-cb-weekgrid__panel[hidden]{ display:none; }

/* Defensive consistency with the rest of the ORGX family (ORGX Clean v1
   needs this to stop long day names blowing out a grid column; harmless
   here today since these h4s already wrap instead of forcing min-content
   width, but keeps the family in sync if that ever changes). */
.orgx-cb-weekgrid__col{ min-width:0; }

.orgx-cb-weekgrid__col.orgx-cb-day{ margin-bottom:0; }
/* Higher specificity than the plugin's own .orgx-cb-day h4 (booking.css,
   font-size .95rem) — populated day columns keep BOTH classes
   (.orgx-cb-day from the plugin, .orgx-cb-weekgrid__col added here), so
   without this the plugin's rule wins on source order and the heading
   renders noticeably bigger than the empty-day placeholder next to it.
   min-height reserves space for 2 lines regardless of whether THIS
   day's name happens to wrap to 1 or 2 lines — without it, a short name
   ("jeudi 17 septembre") makes its own column shorter than its
   neighbours ("mercredi 16 / septembre"), which visibly knocks that
   column's first time-slot row out of horizontal alignment with the rest. */
.orgx-cb-weekgrid__col.orgx-cb-day h4,
.orgx-cb-weekgrid__col--empty h4{
  text-align:center; font-size:.72rem; line-height:1.3; min-height:2.6em;
  margin:0 0 .6rem; white-space:normal; overflow-wrap:break-word;
}
.orgx-cb-weekgrid__col .orgx-cb-slots{ display:flex; flex-direction:column; gap:.4rem; }
.orgx-cb-weekgrid__col .orgx-cb-slot{ width:100%; }

.orgx-cb-weekgrid__col--empty{ display:flex; flex-direction:column; align-items:center; }
.orgx-cb-weekgrid__col--empty h4{ font-weight:700; color:var(--text); }
.orgx-cb-weekgrid__daydate{ display:block; font-weight:400; color:var(--muted); font-size:.7rem; margin-top:.2rem; }
.orgx-cb-weekgrid__noavail{ color:var(--muted); opacity:.4; padding-top:.5rem; }

@media (max-width:680px){
  .orgx-cb-weekgrid__panel{ grid-template-columns:repeat(5,minmax(56px,1fr)); gap:.3rem; overflow-x:auto; }
  .orgx-cb-weekgrid__label{ min-width:0; font-size:.75rem; }

  /* The plugin's own day heading is a full "Wednesday 16 September" —
     fine in a 5-per-row desktop grid, but overlaps the next column at
     these narrower widths. Truncate rather than let it collide. Selectors
     must match (or exceed) the base rule's specificity
     (.orgx-cb-weekgrid__col.orgx-cb-day h4) — a plain .orgx-cb-weekgrid__col h4
     here would lose to that rule's white-space:normal regardless of this
     media query, since higher specificity wins independent of source order. */
  .orgx-cb-weekgrid__col.orgx-cb-day h4,
  .orgx-cb-weekgrid__col--empty h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
  }
}

@media (max-width:640px){
  .scheduler-modal{ padding:1.25rem 1rem; max-height:96vh; }
  .scheduler-modal__subtitle{ display:none; }
}