/* ==========================================================================
   Composant GÉNÉRIQUE « FAQ dépliable » (.cx-faq) — <details>/<summary> natifs, réponses présentes dans le HTML serveur.
   Fichier propre, chargé par toutes les pages qui l'utilisent (pages du cluster « Changer d'extranet », /moyens, …) via
   $header_extra_css (voir inc/header.php) — jamais dupliqué. Markup : inc/cluster_extranet.php (cxFaqHtml, cxFaqItems, cxFaqGrouped) ;
   ouverture par lien profond : js/cx-faq.js (facultatif : sans lui, le lien amène à la question, repliée).
   Fonctionne avec ou sans le wrapper .cx : les règles neutralisent elles-mêmes les décalages globaux de la vitrine
   (.public-site p/h3 : position, left, width, text-indent).
   ========================================================================== */

.cx-faq-zone { padding: 0 15px; }
.cx .cx-faq-zone { padding: 0; }
.cx-faq-item, .cx-faq-group { scroll-margin-top: 90px; } /* header fixe de 70 px */
.cx-faq { display: grid; gap: 8px; }
.cx-faq-item { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.cx-faq-item summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; }
.cx-faq-item summary::-webkit-details-marker { display: none; }
.cx-faq-item summary::after { content: '+'; margin-left: auto; flex: 0 0 auto; font-family: 'copropole-semibold', sans-serif; font-size: 1.3em; color: var(--primary); }
.cx-faq-item[open] summary::after { content: '–'; }
.public-site .cx .cx-faq-item h3 { margin: 0; font-size: 1em; font-family: 'copropole-semibold', sans-serif; color: var(--text-dark); line-height: 1.35; }
.cx-faq-item[open] { border-color: var(--border-medium); box-shadow: var(--shadow-sm); }
.cx-a { padding: 0 14px 6px; }
.public-site .cx .cx-a p { margin: 0 0 10px; }


/* Question sans élément de titre (FAQ rangée sous des intertitres H3) */
.public-site .cx-faq .cx-q { display: block; margin: 0; position: static; left: auto; width: auto; font-family: 'copropole-semibold', sans-serif; font-size: 1em; line-height: 1.35; color: var(--text-dark); }
.public-site .cx-faq .cx-faq-item h3 { position: static; left: auto; width: auto; }
.public-site .cx-faq .cx-a p { position: static; left: auto; width: auto; text-indent: 0; margin: 0 0 10px; }

/* Intertitres de thèmes (H3) et mini-sommaire de thèmes (simple liste de liens, sans pastilles) */
.public-site .cx-faq-zone h3.cx-faq-group { position: static; left: auto; width: auto; margin: 22px 0 8px; font-size: 1.08em; font-family: 'copropole-medium', sans-serif; color: var(--primary); }
.cx-faq-toc { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 4px 0 6px; padding: 0; }
.cx-faq-toc li { margin: 0; padding: 0; }
.cx-faq-toc li::before { content: none; }
.cx-faq-toc a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.95em; }
@media (max-width: 480px) { .cx-faq-toc { flex-direction: column; align-items: flex-start; gap: 0; } .cx-faq-toc a { min-height: 44px; } }
.cx-faq-item:target { border-color: var(--primary); }

.cx-faq-item summary:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.cx-faq-item summary:hover { background: var(--bg-light); border-radius: var(--radius-md); }

/* Mouvement réduit : aucune transition */
@media (prefers-reduced-motion: reduce) { .cx-faq, .cx-faq * { transition: none !important; animation: none !important; } }
@media print { .cx-faq-toc { display: none; } }