/* ═══════════════════════════════════════════════════════════
Gratias · Vitrine marketing — Page FAQ
Feuille additionnelle : se charge APRÈS /vitrine/styles.css,
dont elle reprend variables, familles et rythmes.
Rien n'est redéfini ici de ce qui vit dans styles.css : les
couleurs, les fontes et l'assouplissement viennent des variables
--ink, --ivory, --gold, --serif, --sans, --ease.
── Balisage attendu ─────────────────────────────────────────
… identique à la vitrine …
Questions
Tout ce qu'une maison veut savoir
◆
…
I
La maison
…
Qui paie les frais de service ?
…
…
…
…
… .btn .btn-gold …
Les deux variantes se ressemblent trait pour trait : le choix
est libre, et il peut même être mixé au sein d'une section.
═══════════════════════════════════════════════════════════ */
:root {
/* Réglages propres à la FAQ. Aucune variable de styles.css n'est écrasée. */
--faq-toc-width: 15rem;
--faq-gutter: 4.5rem;
--faq-clear: 5.5rem; /* hauteur réservée sous la barre fixe */
--faq-item-pad: 1.9rem;
--faq-radius: 2px;
}
/* ── Garde-fous de page ──────────────────────────────────────
La vitrine escamote sa barre tant que le héros n'est pas
dépassé ; la FAQ n'a pas de héros plein écran, donc la barre
doit rester posée en permanence. */
html.js-anim body.page-faq .topbar:not(.is-visible) { transform: none; }
/* Les ancres du sommaire ne doivent pas glisser sous la barre fixe. */
.faq-section,
.faq-item { scroll-margin-top: var(--faq-clear); }
/* ── En-tête de page ─────────────────────────────────────────
Le seuil de la FAQ : même matière que .chapter-deep, en plus bas
de plafond. On ne rejoue pas les portes ni le lustre. */
.faq-hero {
position: relative;
padding: calc(var(--faq-clear) + 5rem) 0 4.5rem;
background:
radial-gradient(1100px 520px at 50% -20%, rgba(201, 164, 92, 0.09), transparent 65%),
var(--ink);
border-bottom: 1px solid var(--line);
text-align: center;
}
.faq-hero .wrap { position: relative; z-index: 1; }
/* Le filigrane : un point d'interrogation en Cormorant, à peine là. */
.faq-hero::after {
content: "?";
position: absolute;
top: 2.5rem;
right: max(1.5rem, calc(50% - 42rem));
z-index: 0;
font-family: var(--serif);
font-size: clamp(9rem, 18vw, 18rem);
line-height: 1;
color: rgba(201, 164, 92, 0.05);
pointer-events: none;
user-select: none;
}
.faq-hero .kicker { padding-left: 0.34em; }
.faq-hero h1 {
font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.faq-hero .ornament { margin: 1.8rem 0 1.6rem; }
.faq-hero-sub {
max-width: 40rem;
margin: 0 auto;
font-size: 1.05rem;
color: var(--ivory-2);
}
/* Fil d'Ariane, retour à la vitrine. */
.faq-crumb {
margin-bottom: 1.4rem;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
padding-left: 0.22em;
color: var(--muted);
}
.faq-crumb a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.3s ease, border-color 0.3s ease;
}
.faq-crumb a:hover { color: var(--gold); border-bottom-color: var(--line-strong); }
.faq-crumb i { font-style: normal; margin: 0 0.55rem; color: var(--gold); }
/* ── Corps : sommaire à gauche, questions à droite ───────────── */
.faq-body {
padding: 5.5rem 0 6.5rem;
background: var(--ink-2);
}
.faq-layout {
display: grid;
grid-template-columns: var(--faq-toc-width) 1fr;
gap: var(--faq-gutter);
align-items: start;
}
/* ── Sommaire ───────────────────────────────────────────────── */
.faq-toc {
position: sticky;
top: var(--faq-clear);
align-self: start;
padding-left: 1.1rem;
border-left: 1px solid var(--line);
}
.faq-toc-title {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
padding-left: 0.3em;
color: var(--gold);
margin-bottom: 1.1rem;
}
.faq-toc-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.15rem;
counter-reset: faq-toc;
}
.faq-toc-link {
display: flex;
align-items: baseline;
gap: 0.7rem;
padding: 0.42rem 0;
text-decoration: none;
color: var(--ivory-2);
font-size: 0.88rem;
line-height: 1.4;
transition: color 0.3s ease;
}
.faq-toc-link:hover,
.faq-toc-link:focus-visible,
.faq-toc-link.is-active { color: var(--gold); }
.faq-toc-num {
flex: none;
min-width: 1.5rem;
font-family: var(--serif);
font-size: 0.95rem;
color: var(--muted);
transition: color 0.3s ease;
}
.faq-toc-link:hover .faq-toc-num,
.faq-toc-link.is-active .faq-toc-num { color: var(--gold); }
/* Si le numéro n'est pas écrit dans le balisage, on le compte. */
.faq-toc-list > li { counter-increment: faq-toc; }
.faq-toc-link .faq-toc-num:empty::before {
content: counter(faq-toc, upper-roman);
}
/* ── Sections de questions ──────────────────────────────────── */
.faq-sections {
min-width: 0; /* évite tout débordement horizontal en grille */
max-width: 46rem;
}
.faq-section + .faq-section { margin-top: 5rem; }
.faq-section-head { margin-bottom: 2.2rem; }
.faq-section-num {
font-family: var(--serif);
font-size: 0.95rem;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 0.55rem;
}
.faq-section-title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.8rem, 3.2vw, 2.5rem);
line-height: 1.12;
letter-spacing: 0.01em;
margin-bottom: 0; /* neutralise le margin-bottom global des h2 */
}
.faq-section-title em {
font-style: italic;
font-weight: 400;
color: var(--gold);
}
.faq-section-intro {
margin-top: 0.9rem;
max-width: 38rem;
font-size: 0.98rem;
color: var(--ivory-2);
}
/* Un filet fin sous le titre de section, à la mesure du texte. */
.faq-section-head::after {
content: "";
display: block;
width: 72px;
height: 1px;
margin-top: 1.6rem;
background: var(--line-strong);
}
/* ── Une question ───────────────────────────────────────────── */
.faq-list {
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
/* Le dépliant natif : on retire le triangle du navigateur, le signe
dessiné plus bas le remplace. Le contenu reste dans le DOM dans
tous les cas, et les sont écrits "open". */
.faq-q {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.4rem;
padding: var(--faq-item-pad) 0 0.85rem;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.2rem, 2vw, 1.45rem);
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--ivory);
list-style: none;
transition: color 0.3s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
/* Seule la variante / se clique. */
summary.faq-q { cursor: pointer; }
summary.faq-q:hover { color: var(--gold); }
/* Repliée, la question reprend l'air que la réponse lui laissait. */
details.faq-item:not([open]) > .faq-q { padding-bottom: var(--faq-item-pad); }
.faq-q-text { display: block; }
.faq-q em {
font-style: italic;
font-weight: 400;
color: var(--gold);
}
/* Le signe : deux traits d'or, la barre verticale s'efface à l'ouverture.
Il n'apparaît que là où il veut dire quelque chose. */
.faq-q-sign { display: none; }
details.faq-item .faq-q-sign {
position: relative;
display: block;
flex: none;
width: 0.85rem;
height: 0.85rem;
margin-top: 0.35rem;
color: var(--gold);
}
.faq-q-sign::before,
.faq-q-sign::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.85rem;
height: 1px;
background: currentColor;
transform: translate(-50%, -50%);
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.faq-q-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
details.faq-item[open] .faq-q-sign::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
/* ── Une réponse ────────────────────────────────────────────── */
.faq-a {
padding: 0 0 var(--faq-item-pad);
max-width: 40rem;
font-family: var(--sans);
font-size: 0.98rem;
line-height: 1.8;
color: var(--ivory-2);
overflow-wrap: break-word;
}
/* La question fixe (h3) a besoin d'un peu d'air, faute de summary. */
.faq-item:not(details) > .faq-a { padding-top: 0.15rem; }
.faq-a p + p { margin-top: 1.05rem; }
.faq-a strong { font-weight: 500; color: var(--ivory); }
.faq-a em { font-style: italic; }
.faq-a a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--line-strong);
transition: color 0.3s ease, border-color 0.3s ease;
}
.faq-a a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
/* Les listes de la réponse. .faq-figures est une