/* ═══════════════════════════════════════════════════════════
   CUBX THEME — theme-cms.css (v2.5.210 — Sprint front V3)
   ───────────────────────────────────────────────────────────
   Charge à priority 223 (entre theme-page-sitemap.css 222 et fixes 225+).
   Stylise les pages CMS éditoriales (controller=cms, /content/X-slug)
   avec card blanche centrale, RTE harmonisé, bouton Accueil fixe en bottom.
   Scope : .cubx-hero-cms (classe posée par hero-wrapper.tpl quand hero_type='cms').

   Ce fichier ne contient QUE les règles propres aux CMS qui n'existent
   pas ailleurs. Les patterns mutualisés sont dans :
     - theme-core.css §17b      → hero full-width mobile (étendu page-cms)
     - theme-category-fixes.css → .cubx-listing-title (consommé via JS)
     - cubx-listing-titles.js   → branche page-cms (promotion H1)
     - cms/page.tpl             → bouton Accueil fixe en bottom (HTML)

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.199 (Sprint front V3 : pages CMS stylees CUBX)
   @updated   v2.5.200 (Sprint front V3 : ajout section 8 FAQ — styling
              de la 11e CMS "FAQ" id=16 importée d'idyll, structure
              <details>/<summary> sans JS, scope .cubx-faq-cms)
   @updated   v2.5.201 (Sprint front V3 cont. : refonte section 8 — (a)
              chevron remplacé par toggle +/− typographique 22px couleur
              preset --cubx-accent, (b) Material Icons remplacent les
              emojis sur les titres de sections via .cubx-faq-icon ou
              .material-icons (taille 24px, couleur preset --cubx-accent),
              (c) nav table-of-contents refondue en chips carrés légèrement
              arrondis (8px radius) sans icon, juste le label texte, hover
              fond accent / texte blanc / lift translateY -1px, layout
              flex-wrap responsive naturel au lieu de grid 2 cols, (d)
              toutes les couleurs hardcodées basculées vers les variables
              preset CUBX --cubx-accent / --cubx-text / --cubx-border /
              --cubx-bg / --h2j-bg-light — le styling suit automatiquement
              le preset actif (or, violet, rose, etc).)
   @updated   v2.5.206 (Sprint front V3 cont. : (a) Pages d'erreur HTTP série
              complète — refonte 404.tpl pour retirer le hardcode iDYLL et
              création de 4 nouveaux templates 500/501/502/503 via partial
              mutualisé _partials/error-page-content.tpl. cubx-theme reste
              100% générique vendable, fallback typo gradient preset par
              défaut. (b) Section 8.1 chips raccourcis FAQ : adoption du
              style bouton CTA accueil — fond --cubx-accent uni, border
              2px accent, texte blanc, radius 8px, font 13px bold. Hover
              invert (fond blanc + texte accent + lift -1px). Material
              Icons en blanc 18px (mêmes noms que les sections H2 :
              diamond, local_shipping, payment, undo, build, shopping_cart,
              person, redeem, phone, celebration, gavel) à gauche du label.
              Nécessite SQL UPDATE update-cms-faq-nav-material-icons.sql
              pour remplacer les emojis par des <span class="material-icons">
              dans la nav.)
   @updated   v2.5.210 (Sprint front V3 cont. : section 3 étendue aux pages
              contact + stores + sitemap. Le masquage breadcrumb natif PS
              (qui apparaît tronqué derrière le burger megamenu mobile)
              couvre maintenant en plus de body.page-cms : body.page-contact
              (/nous-contacter), body.page-stores (/magasins) et
              body.page-sitemap (/plan-site, controller PS natif). Ce sont
              des pages éditoriales hero-active aux mêmes problématiques que
              les CMS. Complète le fix s17b dans theme-core.css qui étend
              hero gallery full-width mobile aux 3 mêmes body classes.)
   @updated   v2.5.212 (Sprint front V3 cont. : section 3 étendue aux 3
              surfaces custom h2jforms /connexion-h2j /inscription-h2j et
              /contact-h2j (LOT 13 en avance). 2 patterns body class chacun
              (body#module-h2jforms-X + body.page-module-h2jforms-X) pour
              couvrir par défense en profondeur les variantes PS Classic 8.x.
              Résout le titre tronqué "eate an account" sous le burger
              megamenu mobile signalé par David sur les captures session
              13/05/2026 polish UAT /inscription-h2j v3. Complète le fix
              s17b dans theme-core.css qui étend hero gallery full-width
              mobile aux 6 mêmes body classes également.)
   ============================================================ */


/* ─── 1. WRAPPER GLOBAL — Card blanche style PDP/sitemap ─── */

.cubx-hero-cms .cubx-hero-content {
  padding: 24px 24px 48px;
}

.cubx-hero-cms .cubx-hero-content #content-wrapper {
  background: var(--h2j-bg-card, #ffffff);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 32px 40px;
  margin: 0;
  float: none;
  width: 100%;
  max-width: 100%;
}

.cubx-hero-cms section#main {
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
}


/* ─── 2. PAGE HEADER — Reset margins
   (le H1 .cubx-listing-title est stylé par theme-category-fixes.css,
    promotion via cubx-listing-titles.js v2.5.199 branche page-cms) ─── */

.cubx-hero-cms .page-header {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
}


/* ─── 3. MASQUAGE BREADCRUMB NATIF SUR PAGES CMS + CONTACT + STORES ───
   PS Classic rend un breadcrumb natif <nav><ol class="breadcrumb"> sur
   les CMS, sans le wrapper .cubx-cat-breadcrumb-wrap utilisé sur les
   autres pages spéciales. Il apparaissait tronqué derrière le burger
   megamenu fixed top-left sur mobile.

   Plutôt que d'adapter le breadcrumb (wrapper + padding-left:60px mobile),
   on le masque entièrement : le bouton "Accueil" en bas du content_wrapper
   (cf cms/page.tpl + section 5 ci-dessous) suffit pour la navigation retour,
   et c'est cohérent avec le contenu éditorial des CMS qui ne sont pas en
   arborescence comme les catégories.

   v2.5.210 — Extension aux pages contact + stores + sitemap. Mêmes problématiques :
   ce sont des pages éditoriales hero-active (mode_auto) avec breadcrumb
   natif PS qui apparaît tronqué derrière le burger megamenu en mobile.
   Pages ciblées :
     body.page-contact → /nous-contacter (Contact PS)
     body.page-stores  → /magasins (Stores PS)
     body.page-sitemap → /plan-site (Sitemap PS natif) 

   v2.5.212 — Extension aux 3 surfaces custom h2jforms (Sprint front V3 cont.) :
   /connexion-h2j, /inscription-h2j et /contact-h2j (LOT 13 à venir) ont le
   même problème — ce sont des ModuleFrontController qui héritent du layout
   Classic et donc du breadcrumb natif PS qui s'affiche tronqué sous le burger
   megamenu en mobile (titre "eate an account" visible sur les captures David
   session 13/05). 2 patterns body class générés par PS pour ces controllers :
     body#module-h2jforms-register     + body.page-module-h2jforms-register
     body#module-h2jforms-login        + body.page-module-h2jforms-login
     body#module-h2jforms-contact      + body.page-module-h2jforms-contact
   On utilise les 2 patterns par défense en profondeur (cost zero, l'un est
   inerte si l'autre marche). La 3e surface contact est ajoutée en avance
   même si LOT 13 pas encore livré — règle inerte tant que le controller n'existe pas. */

body.page-cms nav[aria-label="Breadcrumb"],
body.page-cms nav > ol.breadcrumb,
body#cms nav[aria-label="Breadcrumb"],
body#cms nav > ol.breadcrumb,
body.page-contact nav[aria-label="Breadcrumb"],
body.page-contact nav > ol.breadcrumb,
body.page-stores nav[aria-label="Breadcrumb"],
body.page-stores nav > ol.breadcrumb,
body.page-sitemap nav[aria-label="Breadcrumb"],
body.page-sitemap nav > ol.breadcrumb,
body#module-h2jforms-register nav[aria-label="Breadcrumb"],
body#module-h2jforms-register nav > ol.breadcrumb,
body.page-module-h2jforms-register nav[aria-label="Breadcrumb"],
body.page-module-h2jforms-register nav > ol.breadcrumb,
body#module-h2jforms-login nav[aria-label="Breadcrumb"],
body#module-h2jforms-login nav > ol.breadcrumb,
body.page-module-h2jforms-login nav[aria-label="Breadcrumb"],
body.page-module-h2jforms-login nav > ol.breadcrumb,
body#module-h2jforms-contact nav[aria-label="Breadcrumb"],
body#module-h2jforms-contact nav > ol.breadcrumb,
body.page-module-h2jforms-contact nav[aria-label="Breadcrumb"],
body.page-module-h2jforms-contact nav > ol.breadcrumb {
  display: none !important;
}

/* P-038 : sélecteur précédent v2.5.199 incluait `body.page-cms .cubx-hero-cms nav`
   qui matchait TROP large — il masquait aussi .cubx-faq-nav (chips de raccourcis FAQ).
   Retiré en v2.5.204. Si un breadcrumb natif PS échappe aux 2 sélecteurs ci-dessus,
   on le masquera via une exception ciblée plutôt que d'élargir à tous les <nav>. */


/* ─── 4. CONTENT — RTE harmonisé ─── */

.cubx-hero-cms section#main h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
  margin: 32px 0 12px;
  padding: 0 0 8px;
  position: relative;
  line-height: 1.3;
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
}

.cubx-hero-cms section#main h2:first-of-type {
  margin-top: 16px;
}

.cubx-hero-cms section#main h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
  margin: 24px 0 8px;
  line-height: 1.4;
}

.cubx-hero-cms section#main h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
  margin: 20px 0 8px;
  line-height: 1.4;
}

.cubx-hero-cms section#main p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--h2j-text, #1a1f2c);
  margin: 0 0 14px;
}

.cubx-hero-cms section#main p:empty {
  display: none;
}

.cubx-hero-cms section#main ul,
.cubx-hero-cms section#main ol {
  margin: 0 0 16px 24px;
  padding: 0;
}

.cubx-hero-cms section#main ul li,
.cubx-hero-cms section#main ol li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--h2j-text, #1a1f2c);
  margin-bottom: 6px;
}

.cubx-hero-cms section#main strong,
.cubx-hero-cms section#main b {
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

.cubx-hero-cms section#main a:not(.btn):not(.cubx-cms-home-btn) {
  color: var(--cubx-accent, #ec4899);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.cubx-hero-cms section#main a:not(.btn):not(.cubx-cms-home-btn):hover {
  color: var(--cubx-primary, #7c4dff);
}

/* Exception : les liens dans la nav FAQ sont stylés comme des boutons CTA
   (cf section 8.1) — on neutralise ici les déclarations color/underline RTE.
   Spécificité requise : la règle RTE ci-dessus avec :not(.btn):not(.cubx-cms-home-btn)
   est à (0,1,3,1) (1 ID #main + 3 pseudo-classes/classes). Il faut donc au
   minimum (0,1,3,1) ici, sinon la règle RTE écrase et le texte sort en or.
   On utilise .cubx-hero-cms + .cubx-faq-cms + .cubx-faq-nav + a = (0,1,3,1)
   ex aequo, ma règle gagne par ordre de cascade (vient après dans le CSS).
   P-038 : sélecteurs trop larges + erreur calcul spécificité initiale. */
.cubx-hero-cms section#main .cubx-faq-cms .cubx-faq-nav a {
  color: #ffffff;
  text-decoration: none;
}

.cubx-hero-cms section#main .cubx-faq-cms .cubx-faq-nav a:hover,
.cubx-hero-cms section#main .cubx-faq-cms .cubx-faq-nav a:focus {
  color: var(--cubx-accent, #d4af37);
  text-decoration: none;
}

.cubx-hero-cms section#main img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 8px 0;
  border-radius: 6px;
}

.cubx-hero-cms section#main iframe {
  max-width: 100%;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid var(--h2j-border, #e5e7eb);
}

.cubx-hero-cms section#main table {
  border-collapse: collapse;
  margin: 16px auto;
  width: auto;
  max-width: 100%;
}

.cubx-hero-cms section#main table td,
.cubx-hero-cms section#main table th {
  padding: 8px 12px;
  border: 1px solid var(--h2j-border, #e5e7eb);
  font-size: 14px;
  line-height: 1.5;
}

.cubx-hero-cms section#main table th,
.cubx-hero-cms section#main table thead td {
  font-weight: 700;
  background: var(--h2j-bg-soft, #f9fafb);
}


/* ─── 5. BOUTON ACCUEIL FIXE EN BOTTOM ─── */

.cubx-cms-home-btn-wrap {
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--h2j-border, #e5e7eb);
  text-align: center;
}

.cubx-cms-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: var(--cubx-accent, #ec4899);
  color: #ffffff;
  border: 2px solid var(--cubx-accent, #ec4899);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.cubx-cms-home-btn:hover,
.cubx-cms-home-btn:focus {
  background: #ffffff;
  color: var(--cubx-accent, #ec4899);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.20);
}

.cubx-cms-home-btn:active {
  transform: translateY(0);
}


/* ─── 6. NEUTRALISATION DES BOUTONS ACCUEIL INLINE LEGACY ───
   Le HTML idyll legacy importé contient ~10 boutons "ACCUEIL" en
   <a class="btn btn-default"> dispersés dans le contenu RTE. On les
   masque tous au profit du seul bouton CUBX en bas (cf section 5). */

.cubx-hero-cms section#main a.btn.btn-default,
.cubx-hero-cms section#main a.btn-default {
  display: none !important;
}


/* ─── 7. RESPONSIVE — Mobile (<768px) ─── */

@media (max-width: 767px) {
  .cubx-hero-cms .cubx-hero-content {
    padding: 16px 12px 32px;
  }

  .cubx-hero-cms .cubx-hero-content #content-wrapper {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .cubx-hero-cms section#main h2 {
    font-size: 1.2rem;
  }

  .cubx-hero-cms section#main h3 {
    font-size: 1.05rem;
  }

  .cubx-hero-cms section#main p,
  .cubx-hero-cms section#main ul li,
  .cubx-hero-cms section#main ol li {
    font-size: 14px;
  }

  .cubx-hero-cms section#main iframe {
    width: 100% !important;
    height: 280px !important;
  }

  .cubx-hero-cms section#main img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .cubx-cms-home-btn-wrap {
    margin: 32px 0 0;
    padding: 20px 0 0;
  }

  .cubx-cms-home-btn {
    padding: 10px 24px;
    font-size: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════
   8. FAQ — v2.5.203 (Sprint front V3 cont. : clone idyll + preset CUBX)
   ───────────────────────────────────────────────────────────
   Stylise la 11e CMS "FAQ" (id=16, /content/16-faq) importée depuis
   idyll.fr/faq (module legacy h2jtools/h2jfaq, contenu en dur PHP).

   Architecture choisie :
     - 60 questions réparties en 11 sections (catégories)
     - Toggle par <details>/<summary> natif HTML5 (zero JS)
     - Nav table-of-contents en haut (ancres #faq-livraison etc)
     - Cohabitation propre avec card blanche .cubx-hero-cms

   Pourquoi <details>/<summary> et pas checkbox+label comme idyll ?
     - HTML sémantique, accessible (a11y), no JS requis
     - Compatible avec tous les RTE de PrestaShop BO
     - Pas de pollution avec input[type=checkbox] qui peut être soumis
       en form si la CMS est imbriquée dans un form (cas non-trivial mais
       le risque existe)

   Migration vers un vrai module h2jfaq :
     Si plus tard on transforme cette CMS en module h2jfaq avec BO
     CRUD/éditeur, le scope CSS .cubx-faq-cms restera identique — le
     module rendra le même DOM que cette CMS et héritera du styling.
   ═══════════════════════════════════════════════════════════ */

.cubx-faq-cms {
  max-width: 900px;
  margin: 0 auto;
}


/* ─── 8.1. Bandeau hero FAQ + chips raccourcis — v2.5.206 ───
   Bandeau hero "? Foire Aux Questions" : dégradé --cubx-accent
   → --cubx-accent-2 (suit automatiquement le preset actif). Padding 25px,
   radius 10px, texte blanc centré.

   Chips raccourcis : style bouton CTA aligné sur .cubx-cms-home-btn
   (fond --cubx-accent uni, border 2px accent, texte blanc, radius 8px,
   font 13px bold). Hover : invert (fond blanc + texte accent + lift).
   Material Icons en blanc 18px (mêmes noms que les sections H2 :
   diamond, local_shipping, payment, undo, build, shopping_cart, person,
   redeem, phone, celebration, gavel) à gauche du label. Layout flex-wrap
   centré, gap 6px.

   Tout passe par les variables preset → quand David change de preset CUBX
   (or, violet, rose), tout le styling FAQ suit automatiquement.
*/

.cubx-faq-cms .cubx-faq-banner {
  margin: 0 0 24px;
  padding: 25px 20px;
  background: linear-gradient(135deg,
    var(--cubx-accent-2, #6d28d9) 0%,
    var(--cubx-accent, #d4af37) 100%);
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
}

.cubx-faq-cms .cubx-faq-banner h2,
.cubx-faq-cms .cubx-faq-banner h3 {
  margin: 0 0 8px;
  padding: 0;
  border: none;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  text-align: center;
}

.cubx-faq-cms .cubx-faq-banner p {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  opacity: 0.95;
}

.cubx-faq-cms .cubx-faq-nav {
  margin: 0 0 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.cubx-faq-cms .cubx-faq-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.cubx-faq-cms .cubx-faq-nav li {
  margin: 0;
  padding: 0;
}

.cubx-faq-cms .cubx-faq-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cubx-accent, #d4af37);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  border: 2px solid var(--cubx-accent, #d4af37);
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.cubx-faq-cms .cubx-faq-nav a .material-icons,
.cubx-faq-cms .cubx-faq-nav a .cubx-faq-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  color: #ffffff;
  transition: color 0.15s ease;
}

.cubx-faq-cms .cubx-faq-nav a:hover,
.cubx-faq-cms .cubx-faq-nav a:focus {
  background: #ffffff;
  color: var(--cubx-accent, #d4af37);
  border-color: var(--cubx-accent, #d4af37);
  text-decoration: none;
  transform: translateY(-1px);
}

.cubx-faq-cms .cubx-faq-nav a:hover .material-icons,
.cubx-faq-cms .cubx-faq-nav a:hover .cubx-faq-icon,
.cubx-faq-cms .cubx-faq-nav a:focus .material-icons,
.cubx-faq-cms .cubx-faq-nav a:focus .cubx-faq-icon {
  color: var(--cubx-accent, #d4af37);
}

.cubx-faq-cms .cubx-faq-nav a:active {
  transform: translateY(0);
}


/* ─── 8.2. Sections (catégories de questions) ───
   v2.5.201 : Material Icons remplacent les emojis (taille raisonnable,
   couleur preset --cubx-accent qui suit le thème). Le selecteur cible
   `.cubx-faq-icon` (Material Icons) ET garde un fallback sur l'ancien
   `.cubx-faq-emoji` au cas où du contenu legacy persiste. */

.cubx-faq-cms .cubx-faq-section {
  margin: 0 0 40px;
  padding: 0;
  scroll-margin-top: 20px;  /* offset pour ancres avec sticky header */
}

.cubx-faq-cms .cubx-faq-section:last-child {
  margin-bottom: 0;
}

.cubx-faq-cms .cubx-faq-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cubx-text, #1a1a1a);
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--cubx-accent, #d4af37);
  line-height: 1.3;
}

.cubx-faq-cms .cubx-faq-section-title .cubx-faq-icon,
.cubx-faq-cms .cubx-faq-section-title .material-icons {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--cubx-accent, #d4af37);
  transition: color 0.2s ease;
}

/* Fallback pour ancien contenu emoji legacy */
.cubx-faq-cms .cubx-faq-emoji {
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}


/* ─── 8.3. Items Q/A (details/summary natif) ───
   v2.5.201 : chevron remplacé par +/− typographique cohabitant
   avec le pattern accordéon standard idyll/CUBX. Couleurs preset. */

.cubx-faq-cms .cubx-faq-item {
  margin: 0 0 8px;
  padding: 0;
  border: 1px solid var(--cubx-border, #e8e0d0);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cubx-faq-cms .cubx-faq-item:hover {
  border-color: var(--cubx-accent, #d4af37);
}

.cubx-faq-cms .cubx-faq-item[open] {
  border-color: var(--cubx-accent, #d4af37);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cubx-faq-cms .cubx-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cubx-text, #1a1a1a);
  cursor: pointer;
  list-style: none;
  user-select: none;
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cubx-faq-cms .cubx-faq-question:hover {
  background: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, #d4af37);
}

/* Reset de la flèche native ::marker (Firefox) et ::-webkit-details-marker (WebKit) */
.cubx-faq-cms .cubx-faq-question::-webkit-details-marker {
  display: none;
}
.cubx-faq-cms .cubx-faq-question::marker {
  content: '';
}

/* Toggle +/− typographique (couleur preset, taille 22px) */
.cubx-faq-cms .cubx-faq-question::after {
  content: '+';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--cubx-accent, #d4af37);
  transition: transform 0.2s ease, color 0.15s ease;
  margin-left: auto;
}

.cubx-faq-cms .cubx-faq-item[open] > .cubx-faq-question::after {
  content: '−';
}

.cubx-faq-cms .cubx-faq-answer {
  padding: 14px 18px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cubx-text, #1a1a1a);
  border-top: 1px solid var(--cubx-border, #e8e0d0);
}

.cubx-faq-cms .cubx-faq-answer p {
  margin: 0 0 8px;
  font-size: inherit;
  line-height: inherit;
  border: none;
}

.cubx-faq-cms .cubx-faq-answer p:last-child {
  margin-bottom: 0;
}

.cubx-faq-cms .cubx-faq-answer a {
  color: var(--cubx-accent, #d4af37);
  text-decoration: underline;
}

.cubx-faq-cms .cubx-faq-answer strong {
  font-weight: 700;
}


/* ─── 8.4. Responsive mobile FAQ ─── */

@media (max-width: 767px) {
  .cubx-faq-cms .cubx-faq-banner {
    padding: 18px 16px;
    margin-bottom: 18px;
  }

  .cubx-faq-cms .cubx-faq-banner h2,
  .cubx-faq-cms .cubx-faq-banner h3 {
    font-size: 1.25rem;
  }

  .cubx-faq-cms .cubx-faq-banner p {
    font-size: 13px;
  }

  .cubx-faq-cms .cubx-faq-nav {
    margin-bottom: 24px;
  }

  .cubx-faq-cms .cubx-faq-nav ul {
    gap: 5px;
  }

  .cubx-faq-cms .cubx-faq-nav a {
    padding: 6px 12px;
    font-size: 12px;
    gap: 5px;
  }

  .cubx-faq-cms .cubx-faq-nav a .material-icons,
  .cubx-faq-cms .cubx-faq-nav a .cubx-faq-icon {
    font-size: 16px;
  }

  .cubx-faq-cms .cubx-faq-section {
    margin-bottom: 28px;
  }

  .cubx-faq-cms .cubx-faq-section-title {
    font-size: 1.15rem;
    gap: 8px;
  }

  .cubx-faq-cms .cubx-faq-section-title .cubx-faq-icon,
  .cubx-faq-cms .cubx-faq-section-title .material-icons {
    font-size: 20px;
  }

  .cubx-faq-cms .cubx-faq-question {
    padding: 12px 14px;
    font-size: 14px;
  }

  .cubx-faq-cms .cubx-faq-question::after {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .cubx-faq-cms .cubx-faq-answer {
    padding: 12px 14px 14px;
    font-size: 13px;
  }
}


/* ═══════════════════════════════════════════════════════════
   9. ERROR 404 — v2.5.205 (Sprint front V3 cont. : page 404 premium)
   ───────────────────────────────────────────────────────────
   Stylise la page 404 (templates/errors/404.tpl). Structure 100%
   générique pour vente du thème CUBX à d'autres clients : chaque
   client uploade sa propre image (404 menottes pour iDYLL, autre
   chose pour un autre client) via les 4 variables Smarty configurables
   en haut du template — aucun élément branding hardcodé dans le CSS.

   Couleurs preset CUBX dynamiques (--cubx-accent / --cubx-accent-2)
   pour le bouton CTA, la typo fallback, et les liens secondaires :
   le styling suit automatiquement le preset actif.

   Scope : .cubx-error-404 (posé par le <section> dans le template).
*/

.cubx-error-404 {
  text-align: center;
  padding: 24px 16px 48px;
  max-width: 720px;
  margin: 0 auto;
}

/* ─── 9.1. Image hero 404 (configurée par client) ─── */

.cubx-error-404__image-wrap {
  margin: 0 0 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cubx-error-404__image {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  display: block;
}

/* ─── 9.2. Fallback typo si pas d'image configurée ─── */

.cubx-error-404__typo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 32px;
  line-height: 1;
  user-select: none;
}

.cubx-error-404__digit {
  font-size: 160px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -6px;
  background: linear-gradient(135deg,
    var(--cubx-accent-2, #6d28d9) 0%,
    var(--cubx-accent, #d4af37) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cubx-error-404__digit--zero {
  font-style: normal;
}

/* ─── 9.3. Titre + sous-titre ─── */

.cubx-error-404__title {
  margin: 0 0 12px;
  padding: 0;
  border: none;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cubx-text, #1a1a1a);
  line-height: 1.3;
  text-align: center;
}

.cubx-error-404__subtitle {
  margin: 0 0 32px;
  padding: 0;
  border: none;
  font-size: 16px;
  font-weight: 400;
  color: var(--cubx-text, #1a1a1a);
  opacity: 0.75;
  line-height: 1.5;
  text-align: center;
}

/* ─── 9.4. Bouton CTA principal ─── */

.cubx-error-404__actions {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* Le bouton réutilise .cubx-cms-home-btn défini en section 5 — pas de override
   ici sauf léger ajustement de margin si besoin */

.cubx-error-404__actions .cubx-cms-home-btn {
  margin: 0;
}

/* ─── 9.5. Liens secondaires (Nouveautés · Promotions · Meilleures ventes) ─── */

.cubx-error-404__secondary-links {
  margin: 0;
  font-size: 14px;
  color: var(--cubx-text, #1a1a1a);
  opacity: 0.85;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
}

.cubx-error-404__secondary-label {
  font-style: italic;
  opacity: 0.7;
  margin-right: 6px;
}

.cubx-error-404__secondary-links a {
  color: var(--cubx-text, #1a1a1a);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 15px;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-weight: 500;
}

.cubx-error-404__secondary-links a:hover,
.cubx-error-404__secondary-links a:focus {
  background: var(--cubx-accent, #d4af37);
  color: #ffffff;
  text-decoration: none;
}

.cubx-error-404__sep {
  color: var(--cubx-border, #e8e0d0);
  margin: 0;
  user-select: none;
}

/* ─── 9.6. Responsive mobile 404 ─── */

@media (max-width: 767px) {
  .cubx-error-404 {
    padding: 16px 12px 32px;
  }

  .cubx-error-404__image-wrap {
    margin-bottom: 24px;
  }

  .cubx-error-404__image {
    max-height: 220px;
  }

  .cubx-error-404__digit {
    font-size: 110px;
    letter-spacing: -4px;
  }

  .cubx-error-404__typo {
    margin-bottom: 24px;
  }

  .cubx-error-404__title {
    font-size: 1.4rem;
  }

  .cubx-error-404__subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .cubx-error-404__actions {
    margin-bottom: 0;
  }

  .cubx-error-404__secondary-links {
    font-size: 13px;
    gap: 4px;
  }

  .cubx-error-404__secondary-label {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 4px;
  }

  .cubx-error-404__secondary-links a {
    padding: 4px 8px;
  }
}