/* COMPOSANTS — les briques qui reviennent d'une section à l'autre.
   Marqueur de section, boutons, lien fléché, carte de témoignage, accordéon, formulaire.
   Leur placement dans la page appartient à sections.css. */

/* Repère de section : le fil du raisonnement */
/* Le filet qui séparait le repère de l'intitulé a été retiré : il servait à
   détacher un numéro d'un mot, deux choses de même nature. Entre une icône et
   un mot, la différence se voit toute seule. */
.marker { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; }
/* Une icône plutôt qu'un numéro : la numérotation 01 à 10 donnait un air de
   gabarit. Le repère garde sa place et son rythme, il dit maintenant de quoi
   parle la section au lieu de la compter. */
.marker .no { display: inline-flex; align-items: center; color: var(--lime-deep); flex: none; }
.marker .no svg { width: 18px; height: 18px; display: block; }
.marker .lb { font-size: .76rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); }

/* ── Boutons ── */
.btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font: inherit;
	font-weight: 600; font-size: .95rem; line-height: 1; padding: 14px 22px; border-radius: var(--r-sm);
	border: 1px solid transparent; cursor: pointer;
	transition: background-color .2s var(--soft-e), border-color .2s var(--soft-e), color .2s var(--soft-e),
				transform .16s var(--out), box-shadow .24s var(--soft-e); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .24s var(--out); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
/* La lueur est posée au repos, pas seulement au survol : c'est elle qui donne
   au bouton son épaisseur. Au survol elle s'étend vers le bas, comme si
   l'objet s'éloignait de la page ; à l'appui elle se resserre, comme s'il y
   revenait. Le mouvement se fait donc sur trois états, pas deux. */
.btn-1 { background: var(--forest); color: #fff; box-shadow: var(--glow-1); }
.btn-3 { background: var(--lime); color: var(--forest); box-shadow: var(--glow-3); }
.btn-lg { padding: 16px 26px; font-size: 1rem; }
.btn-1:active { box-shadow: 0 1px 2px rgba(23,46,35,.24), 0 2px 6px -2px rgba(31,61,48,.34); }
.btn-3:active { box-shadow: 0 1px 2px rgba(86,118,10,.28), 0 2px 6px -2px rgba(134,170,14,.34); }
@media (hover: hover) and (pointer: fine) {
	.btn-1:hover { background: var(--forest-2); box-shadow: var(--glow-1-h); }
	.btn-3:hover { background: #b0d818; box-shadow: var(--glow-3-h); }
	.btn:hover svg { transform: translateX(3px); }
}
.link-a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--lime-deep); }
.link-a svg { width: 15px; height: 15px; transition: transform .24s var(--out); }
.link-a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .link-a:hover svg { transform: translateX(3px); } }

/* ── Carte de témoignage ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 23px;
	box-shadow: var(--sh-2);
	transition: transform .26s var(--out), box-shadow .26s var(--soft-e), border-color .2s var(--soft-e); }
.card q { display: block; quotes: none; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.card .by { display: flex; align-items: center; gap: 11px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.card .by img { height: 25px; max-width: 74px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.card .by .nm { font-size: .83rem; font-weight: 700; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
}

/* ── Accordéon (utilisé par la section 09) ── */
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; position: relative; padding: 22px 52px 22px 0;
	font-size: 1.04rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.35; transition: color .2s var(--soft-e); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:active { transform: scale(.99); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--lime-deep); } }
.qa summary::after, .qa summary::before { content: ""; position: absolute; right: 12px; top: 50%; background: var(--lime-deep);
	transition: transform .3s var(--out), opacity .2s var(--soft-e); }
.qa summary::before { width: 13px; height: 1.5px; margin-top: -.75px; }
.qa summary::after { width: 1.5px; height: 13px; margin-top: -6.5px; right: 17.75px; }
.qa details[open] summary::after { transform: scaleY(0); opacity: 0; }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--out); }
.qa details[open] .ans { grid-template-rows: 1fr; }
.qa .ans > div { overflow: hidden; }
.qa .ans p { padding: 0 56px 24px 0; font-size: .96rem; line-height: 1.68; color: var(--muted); }