/*
 * FAQ de l'accueil : insérée dans le pied de page, entre le bandeau « Parlons de votre projet » et
 * les colonnes de liens. Le pied impose du blanc et `color: inherit` aux liens : toutes les couleurs
 * sont redéclarées ici, préfixées par .cp-pied pour l'emporter. Questions en blocs Détails du cœur ;
 * faq.js n'en laisse qu'une ouverte à la fois.
 */

.cp-pied > .cp-faq-part,
.cp-faq-part { margin-block: 0 !important; }

.cp-faq {
	--cp-faq-navy: var(--wp--preset--color--navy, #000033);
	--cp-faq-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-faq-mute: var(--wp--preset--color--mute, #555B6B);
	--cp-faq-line: #D9DCE6;
	--cp-faq-ease: cubic-bezier(.65, 0, .25, 1);
	margin: 0 !important;
	padding-block: clamp(72px, 9vw, 120px);
	background: #fff;
	color: var(--cp-faq-navy);
}
.cp-faq,
.cp-faq * { box-sizing: border-box; }
.cp-faq > *,
.cp-faq__grid > *,
.cp-faq__list > * { margin-block: 0 !important; }

.cp-pied .cp-faq .cp-faq__title,
.cp-faq .cp-faq__title { color: var(--cp-faq-navy); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.cp-faq .cp-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(20px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 3.5vw, 48px) !important; }
/* Colonne de gauche : la phrase et le bouton de contact restent visibles pendant la lecture des réponses,
   calés sous la barre de l'en-tête collant (76 px). */
.cp-faq .cp-faq__intro { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 76px + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 22px; }
.cp-faq__intro > * { margin: 0 !important; }
.cp-pied .cp-faq .cp-faq__lead,
.cp-faq .cp-faq__lead { color: var(--cp-faq-mute); font-size: 18px; line-height: 1.6; }
.cp-pied .cp-faq .cp-faq__contact .wp-block-button__link,
.cp-faq .cp-faq__contact .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border: 2px solid var(--cp-faq-navy); border-radius: 8px; background: var(--cp-faq-navy); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.cp-pied .cp-faq .cp-faq__contact .wp-block-button__link:hover,
.cp-faq .cp-faq__contact .wp-block-button__link:hover { border-color: var(--cp-faq-orange); background: var(--cp-faq-orange); color: var(--cp-faq-navy); }
.cp-faq .cp-faq__contact .wp-block-button__link:focus-visible { outline: 2px solid var(--cp-faq-orange); outline-offset: 3px; }
.cp-faq .cp-faq__contact .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s;
}
.cp-faq .cp-faq__contact .wp-block-button__link:hover::after { transform: translateX(3px); }

.cp-faq .cp-faq__list { border-top: 1px solid var(--cp-faq-line); }
.cp-faq .cp-faq__item { margin: 0; border-bottom: 1px solid var(--cp-faq-line); }
.cp-faq .cp-faq__item > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; color: var(--cp-faq-navy); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.3; list-style: none; cursor: pointer; }
.cp-faq .cp-faq__item > summary::-webkit-details-marker { display: none; }
.cp-faq .cp-faq__item > summary::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cp-faq-line);
	border-radius: 50%;
	background: linear-gradient(var(--cp-faq-navy), var(--cp-faq-navy)) center / 14px 2px no-repeat, linear-gradient(var(--cp-faq-navy), var(--cp-faq-navy)) center / 2px 14px no-repeat;
	transition: transform .45s var(--cp-faq-ease), background-color .3s, border-color .3s;
}
.cp-faq .cp-faq__item[open] > summary::after { transform: rotate(135deg); border-color: var(--cp-faq-orange); background-color: var(--cp-faq-orange); }
.cp-faq .cp-faq__item > summary:hover::after { border-color: var(--cp-faq-orange); }
.cp-faq .cp-faq__item > summary:focus-visible { outline: 2px solid var(--cp-faq-orange); outline-offset: 4px; }
.cp-pied .cp-faq .cp-faq__item > :not(summary),
.cp-faq .cp-faq__item > :not(summary) { margin: 0; padding-right: 64px; color: var(--cp-faq-mute); font-size: 17px; line-height: 1.6; }
.cp-faq .cp-faq__item > :not(summary) + :not(summary) { margin-top: 12px; }
.cp-faq .cp-faq__item > :last-child:not(summary) { padding-bottom: 28px; }
.cp-pied .cp-faq .cp-faq__item a { color: var(--cp-faq-navy); text-decoration: underline; text-decoration-color: var(--cp-faq-orange); text-underline-offset: 3px; }
.cp-faq .cp-faq__item[open] > :not(summary) { animation: cp-faq-in .45s var(--cp-faq-ease); }
@keyframes cp-faq-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 900px) {
	.cp-faq .cp-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.cp-faq .cp-faq__intro { position: static; gap: 20px; padding-top: 0; }
	.cp-pied .cp-faq .cp-faq__item > :not(summary),
	.cp-faq .cp-faq__item > :not(summary) { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-faq .cp-faq__item > summary::after { transition: none; }
	.cp-faq .cp-faq__item[open] > :not(summary) { animation: none; }
}