/* ============================================
   SECLI - Domain Custom CSS
   secli.bspoke.fr
   ============================================ */

/* ===== Design Tokens ===== */
:root {
  --secli-terracotta: #D46947;
  --secli-brown: #633F33;
  --secli-beige: #F1DEBD;
  --secli-dark: #1D1D1B;
  --secli-gray: #808080;
  --secli-bg-section: #f5f0eb;
  --secli-timeline-blue: #91B7CE;
  --secli-hover-beige: #e2cfab;
  --secli-hover-brown: #523228;
  --secli-hover-terracotta: #b8563c;
}

/* ===== Page Background ===== */
#mainContent {
  background-image: url('/assets/images/page-background.webp');
  background-repeat: repeat;
  background-size: auto;
}

/* ===== Header / Navigation ===== */

/* Top bar terracotta background (header is outside #mainContent!) */
header [blocname="container_2"] {
  background-color: var(--secli-terracotta) !important;
}

/* Top bar smooth collapse transition */
header [blocname="container_2"] {
  max-height: 40px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* --- Nav bar always white --- */
header [blocname="container_14"] {
  background-color: white;
}

/* Logo link: align to top so logo overflows DOWNWARD */
header [blocname="link_16"] {
  align-self: flex-start !important;
  padding-top: 0.5rem;
}

/* --- Scroll states (toggled by JS) --- */

/* Scrolled: add shadow to nav bar */
header [blocname="header_1"].header-scrolled [blocname="container_14"] {
  border-color: rgb(229, 231, 235) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Scrolled: collapse top bar for compact header */
header [blocname="header_1"].header-scrolled [blocname="container_2"] {
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
}

/* Scrolled: shrink logo */
@media (min-width: 1024px) {

  header [blocname="header_1"].header-scrolled .secli-logo-desktop,
  header [blocname="header_1"].header-scrolled .secli-logo-desktop img {
    height: 70px !important;
  }
}

/* --- Logo overflow effect --- */
header [blocname="container_14"],
header [blocname="container_15"],
header [blocname="link_16"],
header [blocname="link_16"] a,
header [blocname="link_16"] [bspk="linkContent"] {
  overflow: visible !important;
}

/* Remove h-full constraint on linkContent so logo can overflow */
header [blocname="link_16"] [bspk="linkContent"] {
  height: auto !important;
}

@media (min-width: 1024px) {
  .secli-logo-desktop {
    height: 130px !important;
    width: auto;
    position: relative;
    z-index: 2;
    transition: height 0.3s ease;
  }

  .secli-logo-desktop img {
    height: 130px !important;
    width: auto !important;
  }
}

@media (max-width: 1023px) {
  .secli-logo-desktop {
    height: 56px;
  }

  .secli-logo-desktop img {
    height: 56px !important;
    width: auto !important;
  }
}

/* --- Fixed header compensation --- */
/* JS sets --header-h dynamically; fallback 121px = 40px top bar + 81px nav */
#mainContent {
  padding-top: var(--header-h, 121px);
}

/* --- Desktop nav styling (Shippori Mincho, brown) --- */
.secli-desktop-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.secli-desktop-nav .active {
  background-color: transparent !important;
}

.secli-desktop-nav .active a {
  color: var(--secli-terracotta);
}

.secli-desktop-nav a .bi-search {
  color: var(--secli-terracotta);
  font-size: 25px;
}

.secli-desktop-nav a {
  padding: 0.5rem 0.5rem;
  color: var(--secli-brown);
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.25;
  transition: color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.secli-desktop-nav a:hover {
  color: var(--secli-terracotta);
}

@media (min-width: 1280px) {
  .secli-desktop-nav {
    gap: 0.5rem;
  }

  .secli-desktop-nav a {
    font-size: 1rem;
    white-space: normal;
    word-break: break-word;
    width: 150px;
  }
}

/* --- Dev panel z-index fix --- */
.secli-mobile-nav a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--secli-dark);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  transition: background-color 0.15s;
  text-decoration: none;
}

.secli-mobile-nav a:hover {
  background-color: rgba(241, 222, 189, 0.3);
}

/* ===== Hero Banners (common) ===== */
#mainContent [blocname="hist_hero"],
#mainContent [blocname="miss_hero"],
#mainContent [blocname="edit_hero"],
#mainContent [blocname="faq_hero"],
#mainContent [blocname="mc_hero"] {
  background-size: cover;
  background-position: center;
  min-height: 200px;
}

@media (min-width: 1024px) {

  #mainContent [blocname="hist_hero"],
  #mainContent [blocname="miss_hero"],
  #mainContent [blocname="edit_hero"],
  #mainContent [blocname="faq_hero"],
  #mainContent [blocname="mc_hero"] {
    min-height: 280px;
  }
}

/* ===== Section Backgrounds ===== */
/* Background texture from #mainContent background-image (page-background.webp) */

/* ===== Home - CTA Boxes (native wrapper blocks) ===== */
#mainContent [blocname="cta_auteur"] {
  background-color: var(--secli-beige);
  color: var(--secli-dark);
  cursor: pointer;
  transition: background-color 0.2s;
}

#mainContent [blocname="cta_auteur"]:hover {
  background-color: var(--secli-hover-beige);
}

#mainContent [blocname="cta_editeur"] {
  background-color: var(--secli-brown);
  cursor: pointer;
  transition: background-color 0.2s;
}

#mainContent [blocname="cta_editeur"]:hover {
  background-color: var(--secli-hover-brown);
}

#mainContent [blocname="cta_recherche"] {
  background-color: var(--secli-terracotta);
  cursor: pointer;
  transition: background-color 0.2s;
}

#mainContent [blocname="cta_recherche"]:hover {
  background-color: var(--secli-hover-terracotta);
}

/* ===== Home - Qui sommes-nous ===== */
#mainContent [blocname="qsn_button"] {
  display: inline-block;
  border: 2px solid var(--secli-terracotta);
  color: var(--secli-terracotta);
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  transition: all 0.3s;
}

#mainContent [blocname="qsn_button"]:hover {
  background-color: var(--secli-terracotta);
  color: white;
}

#mainContent [blocname="qsn_button"] a {
  color: inherit !important;
  text-decoration: none;
}

/* ===== Home - Actualites ===== */
#mainContent [blocname="actus_grid"] [bspk="wrapper"].actu-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.actu-title {
  font-family: 'Shippori Mincho', serif;
  color: var(--secli-terracotta);
  font-weight: 600;
}

/* ===== Buttons ===== */
.btn-terracotta {
  display: inline-block;
  background-color: var(--secli-terracotta) !important;
  color: white !important;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.btn-terracotta:hover {
  background-color: var(--secli-hover-terracotta) !important;
  ;
}

.btn-terracotta-outline {
  display: inline-block;
  background-color: var(--secli-terracotta) !important;
  ;
  color: white !important;
  padding: 0.625rem 2rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none !important;
  transition: background-color 0.3s;
}

.btn-terracotta-outline:hover {
  background-color: var(--secli-hover-terracotta);
}

.btn-primary {
  background-color: var(--secli-terracotta) !important;
  border-color: var(--secli-terracotta) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--secli-hover-terracotta) !important;
}

/* Mode outline : fond transparent (forcé en inline par BWeb), bordure + texte terracotta */
.btn-primary.btn-outline {
  color: var(--secli-terracotta) !important;
}

/* Hover : box-shadow inset car BWeb force background-color:transparent !important en inline */
.btn-primary.btn-outline:hover {
  box-shadow: inset 0 0 0 9999px var(--secli-terracotta) !important;
  color: white !important;
}

/* Animation pop sur les actions inline dans un accordion title (cf custom.js handler) */
@keyframes bspk-action-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.bspk-action-pop {
  display: inline-block;
  animation: bspk-action-pop 0.3s ease;
}

/* ===== Tableau panier (/mon-panier) : grid 8 colonnes partage header + lignes ===== */
.cart-grid {
  display: grid;
  grid-template-columns: 60px minmax(160px, 2fr) 90px 90px 130px 140px 140px 44px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.cart-grid-header {
  background: var(--secli-terracotta);
  color: #fff;
  font-weight: 600;
}
.cart-row-line {
  border-bottom: 1px solid #eee;
}
.cart-row-line:last-child {
  border-bottom: none;
}
/* line_data : ses 7 cellules participent directement au grid de la ligne */
.cart-cell-contents {
  display: contents;
}

/* ===== CTA Bandeau (native link blocks) ===== */
.cta-bandeau {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 1024px) {
  .cta-bandeau {
    flex-direction: row;
  }
}

.cta-box {
  flex: 1;
  padding: 1.5rem 2rem;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .cta-box {
    font-size: 1.125rem;
  }
}

.cta-box strong {
  font-weight: 900;
}

.cta-beige {
  background-color: var(--secli-beige);
  color: var(--secli-dark);
}

.cta-beige:hover {
  background-color: var(--secli-hover-beige);
}

.cta-brown {
  background-color: var(--secli-brown);
  color: white;
}

.cta-brown:hover {
  background-color: var(--secli-hover-brown);
}

.cta-terracotta {
  background-color: var(--secli-terracotta);
  color: white;
}

.cta-terracotta:hover {
  background-color: var(--secli-hover-terracotta);
}

/* Style the <a> inside BWeb link blocks for CTA */
.cta-box a {
  color: inherit;
  text-decoration: none;
}

/* ===== Notre historique - 2 column layout ===== */
.secli-timeline {
  columns: 2;
  column-gap: 3rem;
}

@media (max-width: 767px) {
  .secli-timeline {
    columns: 1;
  }
}

.secli-tl-entry {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* Override left/right classes - same style for both */
.secli-tl-left,
.secli-tl-right {
  width: 100%;
  text-align: left;
  padding: 0;
  margin-left: 0;
}

.secli-tl-year {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secli-terracotta);
  margin-bottom: 0.25rem;
}

.secli-tl-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--secli-dark);
}

.secli-tl-text a {
  color: var(--secli-terracotta);
  text-decoration: underline;
}

/* ===== FAQ Accordion (maquette style: + icon left) ===== */
.secli-faq-accordion {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  border-bottom: 1px solid #ddd;
}

/* Hide DaisyUI collapse-plus +/- text, replace with treble clef icon */
.secli-faq-accordion.collapse-plus>.collapse-title {
  padding-left: 3rem !important;
  padding-right: 1rem !important;
}

.secli-faq-accordion.collapse-plus>.collapse-title::after {
  content: "" !important;
  position: absolute !important;
  left: 0.5rem !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background-image: url('/assets/images/treble-clef.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.secli-faq-accordion [bspk="accordionTitle"] {
  cursor: pointer;
}

.secli-faq-accordion [bspk="accordionTitle"] bspk[bspk="text"] {
  font-weight: 600;
  color: var(--secli-brown);
  font-size: 0.95rem;
}

.secli-faq-accordion [bspk="accordionContent"] bspk[bspk="text"] {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--secli-dark);
}

.secli-faq-accordion [bspk="accordionContent"] a {
  color: var(--secli-terracotta);
  text-decoration: underline;
}

/* FAQ footer CTA */
.secli-faq-footer {
  text-align: center;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--secli-terracotta);
}

/* ===== Editor Cards (Editeurs membres) ===== */
.secli-ed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .secli-ed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .secli-ed-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.secli-ed-card {
  background: white;
  border: 2px solid var(--secli-beige);
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
}

.secli-ed-card:nth-child(odd) {
  border-color: var(--secli-terracotta);
}

.secli-ed-name {
  font-family: 'Shippori Mincho', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--secli-terracotta);
  margin-bottom: 0.75rem;
}

.secli-ed-fonds {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.secli-ed-address {
  font-size: 0.8rem;
  color: var(--secli-dark);
  margin-bottom: 0.5rem;
}

.secli-ed-tel {
  font-size: 0.8rem;
  color: var(--secli-terracotta);
  margin-bottom: 0.5rem;
}

.secli-ed-links {
  font-size: 0.8rem;
}

.secli-ed-links a {
  color: var(--secli-terracotta);
  text-decoration: underline;
}

/* ===== Mission & services ===== */
@media (min-width: 1024px) {
  #mainContent .lg\:w-5\/12 {
    width: 41.666667%;
  }

  #mainContent .lg\:w-7\/12 {
    width: 58.333333%;
  }
}

[blocname="miss_pres_image"] {
  background-size: cover;
  background-position: center;
  min-height: 250px;
  border-radius: 0.5rem;
}

@media (min-width: 1024px) {
  [blocname="miss_pres_image"] {
    min-height: 350px;
  }
}

/* ===== Home - QSN Image ===== */
[blocname="qsn_image"] {
  background-size: cover;
  background-position: center;
  min-height: 300px;
  border-radius: 0.5rem;
}

@media (min-width: 1024px) {
  [blocname="qsn_image"] {
    min-height: 400px;
  }
}

/* ===== Missing Tailwind Utilities ===== */
#mainContent .h-48 {
  height: 12rem;
}

#mainContent .min-h-64 {
  min-height: 16rem;
}

@media (min-width: 1024px) {
  #mainContent .lg\:inline {
    display: inline;
  }

  #mainContent .lg\:flex-row {
    flex-direction: row;
  }

  #mainContent .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  #mainContent .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  #mainContent .lg\:text-left {
    text-align: left;
  }

  #mainContent .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  #mainContent .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  #mainContent .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  #mainContent .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mainContent .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #mainContent .lg\:order-1 {
    order: 1;
  }

  #mainContent .lg\:order-2 {
    order: 2;
  }
}

/* ===== Connexion / Mon compte Page ===== */

/* Fix BWeb-generated arbitrary Tailwind classes not in pre-compiled output.css */
#mainContent .flex-Max {
  flex: 1 1 0%;
}

/* Padding */
#mainContent .pt-\[16px\] {
  padding-top: 16px;
}

#mainContent .pt-\[20px\] {
  padding-top: 20px;
}

#mainContent .pt-\[30px\] {
  padding-top: 30px;
}

#mainContent .pt-\[40px\] {
  padding-top: 40px;
}

#mainContent .pb-\[16px\] {
  padding-bottom: 16px;
}

#mainContent .pb-\[20px\] {
  padding-bottom: 20px;
}

#mainContent .pb-\[30px\] {
  padding-bottom: 30px;
}

#mainContent .pb-\[40px\] {
  padding-bottom: 40px;
}

#mainContent .pl-\[16px\] {
  padding-left: 16px;
}

#mainContent .pl-\[20px\] {
  padding-left: 20px;
}

#mainContent .pl-\[30px\] {
  padding-left: 30px;
}

#mainContent .pr-\[8px\] {
  padding-right: 8px;
}

#mainContent .pr-\[16px\] {
  padding-right: 16px;
}

#mainContent .pr-\[20px\] {
  padding-right: 20px;
}

#mainContent .pr-\[30px\] {
  padding-right: 30px;
}

/* Margin */
#mainContent .mt-\[16px\] {
  margin-top: 16px;
}

#mainContent .mt-\[24px\] {
  margin-top: 24px;
}

#mainContent .mb-\[16px\] {
  margin-bottom: 16px;
}

#mainContent .mb-\[20px\] {
  margin-bottom: 20px;
}

#mainContent .mb-\[24px\] {
  margin-bottom: 24px;
}

/* Text size */
#mainContent .text-\[20px\] {
  font-size: 20px;
}

#mainContent .text-\[24px\] {
  font-size: 24px;
}

/* Width */
#mainContent .w-\[35\%\] {
  width: 35%;
}

/* Hero banner (bg image set via code block <style>) */
#mainContent [blocname="connexion_hero"] {
  background-size: cover;
  background-position: center;
  min-height: 200px;
  position: relative;
}

#mainContent [blocname="connexion_hero"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

#mainContent [blocname="connexion_hero"]>* {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  #mainContent [blocname="connexion_hero"] {
    min-height: 280px;
  }
}

#mainContent [blocname="connexion_hero_title"] {
  font-family: 'Shippori Mincho', serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Forms container */
#mainContent [blocname="connexion_forms"] {
  max-width: 1280px;
  margin: 0 auto;
  gap: 30px;
  background: #f5f3ef;
  flex-direction: column;
}

@media (min-width: 1024px) {
  #mainContent [blocname="connexion_forms"] {
    flex-direction: row;
    align-items: flex-start;
    padding: 60px 40px;
  }

  /* @lg: responsive overrides for connexion blocks */
  #mainContent .\@lg\:flex-row {
    flex-direction: row;
  }

  #mainContent .\@lg\:pt-\[24px\] {
    padding-top: 24px;
  }

  #mainContent .\@lg\:pb-\[24px\] {
    padding-bottom: 24px;
  }

  #mainContent .\@lg\:pt-\[60px\] {
    padding-top: 60px;
  }

  #mainContent .\@lg\:pb-\[60px\] {
    padding-bottom: 60px;
  }

  #mainContent .\@lg\:pl-\[40px\] {
    padding-left: 40px;
  }

  #mainContent .\@lg\:pr-\[40px\] {
    padding-right: 40px;
  }

  #mainContent .\@lg\:text-\[36px\] {
    font-size: 36px;
  }
}

/* Section cards */
#mainContent [blocname="connexion_login"],
#mainContent [blocname="connexion_register"] {
  background: white;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Rounded top corners on headers */
#mainContent [blocname="login_header"] {
  border-radius: 8px 8px 0 0;
}

#mainContent [blocname="register_header"] {
  border-radius: 8px 8px 0 0;
}

/* Section headers */
#mainContent [blocname="login_header"] {
  background-color: var(--secli-terracotta);
}

#mainContent [blocname="login_header_title"],
#mainContent [blocname="register_header_title"] {
  font-family: 'Shippori Mincho', serif;
}

#mainContent [blocname="register_header"] {
  background-color: var(--secli-brown);
}

/* Form intro text */
#mainContent [blocname="login_intro"],
#mainContent [blocname="register_intro"] {
  color: var(--secli-gray);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* BWeb form field overrides for connexion page */
#mainContent [blocname="connexion_login"] .form-control,
#mainContent [blocname="connexion_register"] .form-control {
  width: 100%;
}

#mainContent [blocname="connexion_login"] .label-text,
#mainContent [blocname="connexion_register"] .label-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secli-dark);
}

#mainContent [blocname="connexion_login"] .input,
#mainContent [blocname="connexion_register"] .input,
#mainContent [blocname="connexion_login"] select.select,
#mainContent [blocname="connexion_register"] select.select {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: 'Nunito Sans', Arial, sans-serif;
  background: white;
  color: var(--secli-dark);
  transition: border-color 0.2s;
  height: auto;
  min-height: 2.75rem;
}

#mainContent [blocname="connexion_login"] .input:focus,
#mainContent [blocname="connexion_register"] .input:focus,
#mainContent [blocname="connexion_login"] select.select:focus,
#mainContent [blocname="connexion_register"] select.select:focus {
  outline: none;
  border-color: var(--secli-terracotta);
  box-shadow: 0 0 0 2px rgba(193, 105, 79, 0.15);
}

/* Required asterisk color */
#mainContent [blocname="connexion_login"] .text-error,
#mainContent [blocname="connexion_register"] .text-error {
  color: var(--secli-terracotta);
}

/* Explanatory text */
#mainContent [blocname="connexion_login"] .label-text-alt,
#mainContent [blocname="connexion_register"] .label-text-alt {
  color: var(--secli-gray);
  font-size: 0.8rem;
}

/* Login button */
#mainContent [blocname="login_btn"] .btn {
  background-color: var(--secli-terracotta);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 2.5rem;
  font-weight: 700;
  font-family: 'Nunito Sans', Arial, sans-serif;
  font-size: 1rem;
  transition: background-color 0.2s;
}

#mainContent [blocname="login_btn"] .btn:hover {
  background-color: var(--secli-hover-terracotta);
}

/* Register button */
#mainContent [blocname="register_btn"] .btn {
  background-color: var(--secli-brown);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 2.5rem;
  font-weight: 700;
  font-family: 'Nunito Sans', Arial, sans-serif;
  font-size: 1rem;
  transition: background-color 0.2s;
}

#mainContent [blocname="register_btn"] .btn:hover {
  background-color: var(--secli-hover-brown);
}

/* Forgot password link */
#mainContent [blocname="login_forgot"] {
  color: var(--secli-terracotta);
  font-size: 0.875rem;
}

#mainContent [blocname="login_forgot"] a {
  color: var(--secli-terracotta);
  text-decoration: none;
}

#mainContent [blocname="login_forgot"]:hover,
#mainContent [blocname="login_forgot"] a:hover {
  text-decoration: underline;
}

/* Forfaitaire info box */
#mainContent [blocname="forfaitaire_msg"] {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 4px;
}

#mainContent [blocname="forfaitaire_msg"] p {
  color: #92400E;
  font-size: 0.9rem;
}

#mainContent [blocname="forfaitaire_msg"] a {
  color: var(--secli-terracotta);
  font-weight: 600;
}

/* Force BWeb floating labels to always show ABOVE input (like traditional labels) */
#mainContent [blocname="connexion_login"] .floating-label,
#mainContent [blocname="connexion_register"] .floating-label {
  position: relative;
}

#mainContent [blocname="connexion_login"] .floating-label>span,
#mainContent [blocname="connexion_register"] .floating-label>span {
  position: static !important;
  display: block;
  transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  color: var(--secli-dark);
  margin-bottom: 6px;
  opacity: 1 !important;
  background: transparent !important;
  padding: 0 !important;
}

#mainContent [blocname="connexion_login"] .floating-label .input,
#mainContent [blocname="connexion_register"] .floating-label .input,
#mainContent [blocname="connexion_login"] .floating-label select,
#mainContent [blocname="connexion_register"] .floating-label select {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Required asterisk */
#mainContent [blocname="connexion_login"] .floating-label .required,
#mainContent [blocname="connexion_register"] .floating-label .required {
  color: var(--secli-terracotta) !important;
}

/* === Fiches hero banner === */
#mainContent [blocname="fiches_hero"] {
  background-size: cover;
  background-position: center;
  min-height: 200px;
}

@media (min-width: 1024px) {
  #mainContent [blocname="fiches_hero"] {
    min-height: 280px;
  }
}

/* BWeb fieldSelect overrides for connexion */
#mainContent [blocname="connexion_login"] .field-select.floating-label,
#mainContent [blocname="connexion_register"] .field-select.floating-label {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  height: auto;
  min-height: auto;
  align-items: stretch;
  width: 100%;
}

#mainContent [blocname="connexion_login"] .field-select.floating-label>.label,
#mainContent [blocname="connexion_register"] .field-select.floating-label>.label {
  position: static !important;
  transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  color: var(--secli-dark);
  margin-bottom: 6px;
  opacity: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto;
  text-align: left;
  line-height: 1.25;
}

#mainContent [blocname="connexion_login"] .field-select select,
#mainContent [blocname="connexion_register"] .field-select select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: 'Nunito Sans', Arial, sans-serif;
  background: white;
  color: var(--secli-dark);
  transition: border-color 0.2s;
  appearance: auto;
  -webkit-appearance: auto;
}

#mainContent [blocname="connexion_login"] .field-select select:focus,
#mainContent [blocname="connexion_register"] .field-select select:focus {
  outline: none;
  border-color: var(--secli-terracotta);
  box-shadow: 0 0 0 2px rgba(193, 105, 79, 0.15);
}

/* Le wrapper <label class="select field-select"> reçoit un outline noir (DaisyUI)
   au :focus-within, qui déborde jusqu'au libellé. On le supprime : le ring
   terracotta du <select> interne (ci-dessus) suffit. */
#mainContent [blocname="connexion_login"] label.field-select:focus-within,
#mainContent [blocname="connexion_register"] label.field-select:focus-within {
  outline: none;
}

#mainContent [blocname="searchEngine"] {
  & [blocname="globalsearch"] input::placeholder {
    font-style: italic;
  }

  & .field-select {
    & span.label {
      background-color: var(--secli-brown);
      color: white;
      padding: 0.25rem 0.75rem;
      height: 40px;
      width: 130px;
      margin: 0;
    }
  }

  & [blocname="advanced"] {
    & [bspk="accordion"] {
      & .collapse-title {
        background-color: var(--secli-brown);
        color: white;
      }
      & [bspk="accordion"] .collapse-title {
        background-color: white !important;
        color: var(--secli-brown) !important;
        padding: 4px;;
      }
    }
  }
}

#mainContent {
  & .info-tooltip {
    & h3 {
      color: var(--secli-terracotta);
    }

    & ol {
      list-style-type: decimal;
      padding-left: 1.5rem;
      margin-top: 1rem;
      margin-bottom: 1.5rem;
    }
  }
}


/* ===== Fiches de Chants - Zebra striping des résultats ===== */
#mainContent [blocname="results_container"] .collapse-title {
  padding-top:0;
  padding-bottom:0;
} 

#mainContent [blocname="results_container"] > [blocname="accordion_results"]:nth-child(even) {
  background-color: white;
}


/* ===== Mon compte - Sidebar (BWeb blocks: wrapper > sections + links) ===== */
/* Section headers (text blocks avec class account-sb-section) */
#mainContent .account-sb-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--secli-terracotta);
  letter-spacing: 0.01em;
}

#mainContent .account-sb-section .account-sb-h-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* Premier header pas de margin-top extra */
#mainContent [blocname="account_sidebar"] > .account-sb-section:first-child {
  margin-top: 0 !important;
}

/* Liens (link blocks avec class account-sb-link). BWeb wrappe le contenu dans <a>. */
#mainContent .account-sb-link {
  display: block;
  width: 100%;
}

#mainContent .account-sb-link a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px 8px 32px;
  color: var(--secli-dark);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.15s, color 0.15s;
}

#mainContent .account-sb-link a:hover {
  background-color: #FBF6EF;
  color: var(--secli-brown);
}

/* Item actif */
#mainContent .account-sb-link.is-active a {
  background-color: var(--secli-beige);
  color: var(--secli-terracotta);
  font-weight: 600;
}

#mainContent .account-sb-link.is-active a:hover {
  background-color: var(--secli-beige);
  opacity: 0.92;
}

/* Logout (séparateur via borderTop natif sur le bloc, layout flex via icon+text) */
#mainContent .account-sb-logout a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--secli-gray);
}

#mainContent .account-sb-logout:hover {
  background-color: #F1F1F1;
}

#mainContent .account-sb-logout:hover a {
  color: var(--secli-terracotta);
}

#mainContent .account-sb-logout .account-sb-logout-icon {
  font-size: 16px;
}