/* ============================================================================
   faqs-claire.css - hub /faqs, version « ile claire »
   ----------------------------------------------------------------------------
   Chargee UNIQUEMENT par pages/faqs/faqs.php, apres theme.css (head-css) et
   light.css. Sorti de l'inline le 2026-08-15, en meme temps que l'alignement de
   la page sur le gabarit de /realisations et /boutique.

   Ce que la page emprunte a light.css, et qui n'est donc PAS ici :
     .pd-blog-layout / .pd-blog-main / .pd-blog-aside  (gabarit 1/3 + 2/3)
     .pd-sticky / .pd-side / .pd-side-widget / .pd-side-title / .pd-side-cats
     .pd-page-head / .pd-page-intro                    (titre de page)
     .acr-faq / .acr-faq-item / .acr-faq-a             (accordeon)
   Ne restent ici que les composants propres a la FAQ.
   ============================================================================ */

/* Tokens locaux, tous derives de la charte de l'ile claire : aucune couleur en
   dur, la page suit light.css si la charte bouge. */
.faq-hub{
	--fq-card:var(--surface-card,#fff);
	--fq-border:var(--glass-border,rgba(209,219,228,.75));
	--fq-accent:var(--primary-fluo,#046fb4);
	--fq-ink:rgba(var(--primary-darkest-rgb,4,23,43),1);
	--fq-ink-soft:rgba(var(--primary-dark-rgb,16,53,89),.92);
	--fq-ink-mute:rgba(var(--primary-dark-rgb,16,53,89),.8);
	--fq-tint:rgba(var(--primary-medium-rgb,25,74,122),.06);
	--fq-radius:.7rem;
}

/* Compteur, au-dessus du titre.
   ⚠️ La couleur du texte n'est PAS --fq-accent (#046FB4) : la pastille est
   posee sur le fond de l'ile, pas sur du blanc, et son propre voile l'assombrit
   encore (mesure : #046FB4 sur #DCE3EA = 4,12:1, sous AA pour du 13px). Le bleu
   de charte, plus fonce, y donne 7,3:1. */
.pd-fiche .faq-hub-count{
	display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.9rem;
	padding:.35rem .85rem;border-radius:50px;
	background:var(--fq-tint);color:rgba(var(--primary-medium-rgb),1);
	font-size:.82rem;font-weight:700;
}

/* --- Sommaire des themes, dans la barre laterale -------------------------- */
/* Il reprend le widget de categories de /realisations (.pd-side-cats) : meme
   forme, meme comportement. Ne restent que l'icone et le compteur, que le
   composant partage ne prevoit pas. */
.pd-fiche .faq-toc-list a{display:flex;align-items:center;gap:.6rem;min-height:44px}
.pd-fiche .faq-toc-list a i{flex:0 0 1.15rem;text-align:center;font-size:.85rem;color:var(--fq-accent)}
.pd-fiche .faq-toc-list a .faq-toc-nb{
	margin-left:auto;font-size:.72rem;font-weight:700;
	color:var(--fq-ink-mute);background:var(--fq-tint);
	padding:.1rem .45rem;border-radius:50px;
}
.pd-fiche .faq-toc-list a:hover{padding-left:0}

/* --- Un theme ------------------------------------------------------------- */
/* scroll-margin-top : sans lui, une ancre place le titre du theme SOUS la
   navbar fixe, et le visiteur croit avoir atterri au mauvais endroit. */
.pd-fiche .faq-groupe{margin-bottom:2.6rem;scroll-margin-top:calc(var(--acro-nav-h,64px) + 1.2rem)}
.pd-fiche .faq-groupe-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.35rem}
.pd-fiche .faq-groupe-ico{
	display:inline-flex;align-items:center;justify-content:center;
	width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:.6rem;
	background:var(--fq-tint);color:var(--fq-accent);font-size:1rem;
}
.pd-fiche .faq-groupe h2{margin:0;font-size:1.35rem;font-weight:700;color:var(--fq-ink)}
.pd-fiche .faq-groupe-lien{
	display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;
	font-size:.86rem;font-weight:700;color:var(--fq-accent);text-decoration:none;
}
.pd-fiche .faq-groupe-lien:hover{text-decoration:underline}
.pd-fiche .faq-groupe-note{margin-bottom:1rem}

/* --- Renvoi vers les FAQ qui vivent sur les fiches produits ---------------- */
.pd-fiche .faq-ailleurs{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:576px){.pd-fiche .faq-ailleurs{grid-template-columns:repeat(3,1fr)}}
.pd-fiche .faq-ailleurs a{
	display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem;
	background:var(--fq-card);border:1px solid var(--fq-border);
	border-radius:var(--fq-radius);text-decoration:none;
	transition:border-color .2s ease,transform .2s ease;
}
.pd-fiche .faq-ailleurs a:hover{border-color:var(--fq-accent);transform:translateY(-2px)}
.pd-fiche .faq-ailleurs strong{font-size:.92rem;color:var(--fq-ink)}
.pd-fiche .faq-ailleurs span{font-size:.8rem;color:var(--fq-ink-mute)}

/* --- Appel a l'action ----------------------------------------------------- */
/* Composant AUTONOME. Ne pas reutiliser « .acr-rech-cta », qui vit dans
   recherche-page.css, charge par la seule page de resultats.
   Contrastes verifies : blanc sur --pd-red-ink = 5,1:1, bleu sur blanc = 5,3:1. */
.pd-fiche .faq-cta{
	display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
	margin-top:1rem;padding:1.3rem 1.4rem;
	border:1px solid var(--fq-border);border-radius:var(--fq-radius);
	background:linear-gradient(135deg,rgba(var(--primary-medium-rgb,25,74,122),.08),rgba(var(--secondary-medium-rgb,246,10,54),.06));
}
.pd-fiche .faq-cta-txt{flex:1;min-width:15rem}
.pd-fiche .faq-cta-txt strong{display:block;margin-bottom:.15rem;font-size:1.05rem;color:var(--fq-ink)}
.pd-fiche .faq-cta-txt p{margin:0;font-size:.92rem;color:var(--fq-ink-soft)}
.pd-fiche .faq-cta-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.pd-fiche .faq-cta-actions a{
	display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
	padding:0 1.15rem;border-radius:50px;text-decoration:none;
	font-size:.87rem;font-weight:700;transition:all .2s ease;
}
.pd-fiche .faq-cta-actions .is-primary{background:var(--pd-red-ink,#DC0930);color:#fff;border:2px solid var(--pd-red-ink,#DC0930)}
.pd-fiche .faq-cta-actions .is-primary:hover{background:#b8082a;border-color:#b8082a;color:#fff;transform:translateY(-1px)}
.pd-fiche .faq-cta-actions .is-ghost{background:var(--fq-card);color:var(--fq-accent);border:2px solid var(--fq-accent)}
.pd-fiche .faq-cta-actions .is-ghost:hover{background:var(--fq-accent);border-color:var(--fq-accent);color:#fff;transform:translateY(-1px)}

/* --- Accessibilite -------------------------------------------------------- */
.pd-fiche .faq-toc-list a:focus-visible,
.pd-fiche .faq-groupe-lien:focus-visible,
.pd-fiche .faq-ailleurs a:focus-visible,
.pd-fiche .faq-cta-actions a:focus-visible{outline:3px solid var(--fq-accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
	.pd-fiche .faq-ailleurs a,
	.pd-fiche .faq-cta-actions a{transition:none}
	.pd-fiche .faq-ailleurs a:hover,
	.pd-fiche .faq-cta-actions a:hover{transform:none}
}