/*
 * Accordéon FAQ générique (design_system.md §3.6), bâti sur le bloc natif
 * `core/details` — remplace `uagb/faq` (Spectra Legacy), D2 (session 31).
 * Classe `.ss-accordion` volontairement générique (pas `ss-faq-contact`) :
 * réutilisable telle quelle sur Conseils carrière IT (même composant), pas
 * un nouveau nom par page — cf. constat des 39% de duplication CSS
 * (audit-post-content-structure.php, session 31).
 *
 * Marqueur natif de <summary> neutralisé (list-style + ::-webkit-details-
 * marker), remplacé par le chevron filaire déjà utilisé pour la nav
 * (skillshift_nav_chevron(), functions.php) — même langage visuel
 * sitewide, ici à 20px/outline 2px comme l'exige §3.6.
 *
 * Bug trouvé en validation humaine après le commit D2 : `.ss-faq-section`
 * (wrapper renommé depuis `uagb-block-faqcontact`, fond teinté + padding
 * de section) et `.ss-faq-header`/`.ss-faq-inner` (largeur 680px centrée,
 * comme `.ss-form-section__form`/`.ss-policy__card`) avaient été retirés
 * de l'ancien <style> de post_content sans être reportés nulle part —
 * la FAQ héritait du padding par défaut de bloc (~45px) et s'étalait sur
 * toute la largeur du conteneur (1050px) au lieu de 680px, désalignée avec
 * le Formulaire et la Policy juste au-dessus/en-dessous. Reporté ici tel
 * quel (mêmes valeurs que l'ancien <style>, rien réinventé).
 */
.ss-faq-section{
	padding-top:64px;
	padding-bottom:64px;
	padding-left:24px;
	padding-right:24px;
	position:relative;
}
@media (max-width:767px){
	.ss-faq-section{
		padding-top:48px;
		padding-bottom:48px;
		padding-left:16px;
		padding-right:16px;
	}
}
.ss-faq-section::before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width:100vw;
	transform:translateX(-50%);
	background:#F8FAFC;
	z-index:-1;
}
/* Fond blanc sur les articles de blog : le bandeau teinte plein-ecran est
   voulu sur les pages (Contact, Conseils carriere IT) mais casse le rendu
   "carte blanche" du layout separate-container d'Astra utilise sur les
   articles -- retour utilisateur 2026-08-04 sur reussir-entretien-
   developpeur, generalise a tous les articles (meme classe partagee). */
body.single-post .ss-faq-section::before{
	content:none;
}
.ss-faq-header{
	max-width:680px;
	margin:0 auto 40px;
	text-align:left;
}
.ss-faq-inner{
	max-width:680px;
	margin:0 auto;
}

.ss-accordion .wp-block-details{
	border:1px solid #E2E8F0;
	border-radius:8px;
	overflow:hidden;
}
.ss-accordion .wp-block-details + .wp-block-details{
	margin-top:12px;
}
.ss-accordion .wp-block-details summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:0;
	padding:16px 20px;
	font-weight:500;
	color:#091A2A;
	cursor:pointer;
	list-style:none;
}
.ss-accordion .wp-block-details summary::-webkit-details-marker{
	display:none;
}
.ss-accordion .wp-block-details summary:hover{
	background:#F8FAFC;
}
.ss-accordion .wp-block-details summary:focus-visible{
	outline:2px solid #0F6B8F;
	outline-offset:-2px;
}
.ss-accordion .wp-block-details summary::after{
	content:"";
	flex:none;
	width:20px;
	height:20px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/contain;
	transition:transform .2s ease;
}
.ss-accordion .wp-block-details[open] summary::after{
	transform:rotate(180deg);
}
/* Couleur #5C6D7F (pas #667788, standard du reste du site) : sur le fond
   teinte #F8FAFC de .ss-faq-section/.ss-faq-conseils, #667788 ne fait que
   4.4:1 (sous le seuil AA 4.5:1) — trouve via Lighthouse a11y en R5 sur la
   bascule de Conseils carriere IT (session 33), touche aussi Contact (61,
   meme composant partage .ss-accordion) sans regression de contenu, CSS
   seul. */
.ss-accordion .wp-block-details > :not(summary){
	margin:0;
	padding:0 20px;
	color:#5C6D7F;
	font-size:15px;
	line-height:1.6;
}
/* :not(summary):first-of-type, pas *:first-of-type seul : <summary> est
   toujours "first-of-type" au sens CSS (seule de son type parmi ses
   frères), donc *:first-of-type la matchait aussi et écrasait son
   padding-top — bug rapporté par l'utilisateur (question collée au bord
   haut de la carte), corrigé ici. */
.ss-accordion .wp-block-details > :not(summary):first-of-type{
	padding-top:0;
}
.ss-accordion .wp-block-details > :not(summary):last-child{
	padding-bottom:16px;
}
.ss-accordion .wp-block-details > :not(summary) + :not(summary){
	margin-top:8px;
}
.ss-accordion .wp-block-details > ol,
.ss-accordion .wp-block-details > ul{
	padding-left:40px;
}
.ss-accordion .wp-block-details a{
	color:inherit;
	text-decoration:underline;
}