(voir details.card-faq > summary
dans layout.css) aux coins arrondis de la card. */
.card-faq {
background: var(--color-background);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-faq);
padding: var(--space-md);
overflow: hidden;
}
details.card-faq > summary:hover {
background: var(--color-background-alt);
}
/* .accordion-group--faq — registre légèrement plus "engineered" que
.card-faq générique (fin d'article de blog...) : filet fin au lieu de
l'ombre, marqueur en pastille ronde plutôt qu'un simple caractère +/-,
accent sur la question active. Scopé pour ne pas affecter .card-faq
ailleurs sur le site. */
.accordion-group--faq .card-faq {
border: 1px solid var(--color-border);
box-shadow: none;
transition: border-color 0.2s ease;
}
.accordion-group--faq .card-faq:hover {
border-color: var(--color-text-tertiary);
}
.accordion-group--faq details.card-faq[open] {
border-color: var(--color-primary);
}
.accordion-group--faq details.card-faq > summary::after {
content: '+';
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--color-border);
font-size: 16px;
font-weight: 400;
line-height: 1;
color: var(--color-text-secondary);
transition: all 0.2s ease;
}
.accordion-group--faq details.card-faq[open] > summary::after {
content: '\2212';
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-text);
}
/* .card-quote — bloc citation avec avatar (fondateur/expert). Deux
variantes : blanche avec ombre (défaut) et fond bleu clair (--info,
réutilise --color-background-info déjà validé). */
.card-quote {
display: flex;
align-items: center;
gap: var(--space-md);
background: var(--color-background);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card-marketing);
padding: var(--space-card);
/* Texte toujours aligné à gauche, y compris dans un parent centré
(ex: .content-section) — validé ronde 5. */
text-align: left;
}
.card-quote--info {
background: var(--color-background-info);
box-shadow: none;
}
/* .card-quote--info-strong — variante bleu un peu plus soutenu, scopée à un
module précis (voir docs/missing-components.md, validé par Sébastien le
2026-09-17) pour ne pas changer .btn-info ni les autres .card-quote--info
qui partagent --color-background-info. */
.card-quote--info-strong {
background: #e8f2ff;
}
.card-quote__avatar {
flex-shrink: 0;
width: var(--size-avatar-sm);
height: var(--size-avatar-sm);
border-radius: 50%;
object-fit: cover;
}
/* .card-testimonial — avis client (nom/rôle + titre + citation + étoiles,
dans cet ordre — pas d'avatar dans le contenu réel du site). Prévue pour
être utilisée dans un carrousel .testimonial-marquee (voir plus bas). */
.card-testimonial {
flex: 0 0 320px;
background: var(--color-background);
border: none;
border-radius: var(--radius-md);
/* Pas d'ombre (ronde 5) : le carrousel doit se fondre dans le fond de la
page, sans démarcation visuelle entre les cards et la section. */
box-shadow: none;
padding: var(--space-card);
}
.card-testimonial__author {
margin: 0 0 var(--space-sm);
}
.card-testimonial__title {
margin: 0 0 var(--space-xs);
}
.card-testimonial__quote {
margin: 0 0 var(--space-sm);
}
.card-testimonial__stars {
color: var(--color-accent);
letter-spacing: 2px;
margin: 0;
}
/* .testimonial-marquee — carrousel à défilement continu (2 rangées, sens
opposés) avec fondu sur les bords. Le contenu de .testimonial-track doit
être dupliqué une fois dans le HTML (2 jeux de cards identiques à la
suite) pour boucler sans coupure — l'animation va de 0 à -50%. */
.testimonial-marquee {
overflow: hidden;
min-width: 0;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.testimonial-track {
display: flex;
align-items: center;
width: max-content;
min-width: 0;
gap: var(--space-md);
animation: marquee-left var(--duration-marquee) linear infinite;
}
@keyframes marquee-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.testimonial-track {
animation: none;
}
}
/* Pause au survol (couvre aussi .logo-marquee-track, qui réutilise cette
classe) : sans ça, un visiteur ne peut ni lire un témoignage en entier ni
cliquer un logo presse pendant le défilement continu (aussi un point
WCAG 2.2.2 — contenu en mouvement qui doit pouvoir être mis en pause). */
.testimonial-marquee:hover .testimonial-track {
animation-play-state: paused;
}
/* .logo-marquee-track — variante logos (hero /declaration-impot-crowdfunding/,
hero /declaration-impot-crypto/, section "Comment ça marche ?"
/declaration-impot-crypto/), réutilise .testimonial-marquee/.testimonial-track
pour le défilement continu, sans le cadre .card : juste les logos, hauteur
uniforme + espace un peu plus généreux qu'entre les cards témoignages. */
.logo-marquee-track {
gap: var(--space-lg);
}
.logo-marquee-track img {
height: 40px;
width: auto;
flex-shrink: 0;
}
/* .press-track — bandeau presse (home, "La presse et les experts parlent de
DeclarAid"). Hauteur uniforme (20px, réduite de 32px le 2026-10-08 —
demande explicite d'Elena, "comme chez Stripe" : des wordmarks discrets,
pas des logos qui dominent le bandeau). Repassé en carrousel défilant le
même jour (demande explicite d'Elena, "comme avant") après un essai en
rangée statique — mêmes règles que .press-track pro — scopé pour ne pas
changer les autres usages de .logo-marquee-track (hero crypto/
crowdfunding). */
.press-track {
animation-duration: 40s;
gap: var(--space-3xl);
}
.press-track img {
height: 20px;
width: auto;
}
/* Sous 640px, la même durée que sur desktop défile trop lentement vu
l'écran plus étroit : durée réduite de moitié, même principe que pro. */
@media (max-width: 640px) {
.press-track {
animation-duration: 20s;
}
}
/* .press-section — bandeau presse isolé (demande explicite d'Elena,
2026-10-08, "exactement comme sur Stripe") : fond blanc, filet fin
au-dessus ET en dessous (même --color-border que la bordure sous le
header), collé de près au hero (faible padding). */
.press-section {
background: var(--color-background);
border-top: 1px solid var(--color-border);
/* border-bottom retirée le 2026-10-08 (demande explicite d'Elena) : la
bande sombre de .stats-section juste en dessous sert elle-même de
séparation, la bordure devenait redondante. */
padding: var(--space-md) 0;
}
/* .press-row — carrousel presse + CTA "Voir les articles" alignés sur une
même ligne (demande explicite d'Elena, 2026-10-08) : le carrousel garde
son fondu existant (.testimonial-marquee) plutôt qu'une coupure nette, le
CTA ne wrap jamais. Repassé à une largeur contenue (max-width 1400,
calée sur .hero) le même jour — demande explicite d'Elena de réduire le
défilement pleine page essayé juste avant. */
.press-row {
display: flex;
align-items: center;
gap: var(--space-xl);
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.press-row__marquee {
flex: 1 1 auto;
min-width: 0;
}
/* Lien plat, sans box/ombre (DA du bandeau : "la donnée porte la structure,
rien ne la fait flotter dans une boîte", même principe que .trust-band
et .stats-grid__cta juste en dessous) — accent jaune au survol + flèche
qui glisse, même micro-interaction que .btn-primary/.btn-info. Revu le
2026-10-08 (le traitement pilule noire précédent ne correspondait pas à
la DA de la page, retour explicite d'Elena). */
.press-row__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
flex-shrink: 0;
white-space: nowrap;
color: var(--color-text-secondary);
font-weight: 600;
font-size: 14px;
transition: color 0.15s ease;
}
.press-row__cta:hover {
color: var(--color-accent);
}
.press-row__cta-arrow {
display: inline-block;
transition: transform 0.2s ease;
}
.press-row__cta:hover .press-row__cta-arrow {
transform: translateX(3px);
}
/* Sous 767px, pas assez de place pour une ligne : CTA repassé sous le
carrousel, centré (comportement d'origine avant .press-row). */
@media (max-width: 767px) {
.press-row {
flex-direction: column;
gap: var(--space-md);
}
}
/* .tag-cycle — mot/expression qui alterne dans une liste (ex: plateformes
compatibles sous un titre de catégorie, hero /declaration-impots-bourse/).
Le JS (js/tag-cycle.js) swap le texte et bascule cette classe pour le
fondu ; en CSS seul, le mot reste affiché sans alterner (dégradation
propre, pas de contenu qui disparaît si le JS ne charge pas). */
.tag-cycle {
display: inline-block;
color: var(--color-accent);
font-weight: 700;
transition: opacity 0.25s ease;
}
.tag-cycle--fade {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.tag-cycle {
transition: none;
}
}
/* Sections */
.section {
padding: var(--space-3xl) 0;
background: var(--color-background);
}
.section--alt {
background: var(--color-background-alt);
}
.section--muted {
background: var(--color-surface-muted);
}
.section--info {
background: var(--color-background-info);
}
/* .section--dark — "Sécurité et Confidentialité". Couleur validée ronde 3. */
.section--dark {
background: var(--color-background-dark);
color: var(--color-text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
color: var(--color-text-on-dark);
}
.section--dark p {
color: rgba(255, 255, 255, 0.7);
}
/* .table-search — champ de recherche au-dessus de .broker-table (filtre par
nom de courtier, voir js/broker-search.js). Validé explicitement par
Sébastien pour /page-courtiers/ (voir docs/missing-components.md). */
.table-search {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto var(--space-lg);
padding: var(--padding-btn-compact);
font: inherit;
font-size: var(--font-size-body);
color: var(--color-text);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color 0.2s ease;
}
.table-search:focus {
border-color: var(--color-tag-cto-bg);
}
/* Icône loupe dans la barre de recherche (voir docs/missing-components.md,
validé par Sébastien le 2026-09-16) — réutilise --space-sm/md/lg et
--color-text-tertiary déjà validés, même style d'icône ligne (stroke-width
2) que le reste du site. */
.table-search-wrap {
position: relative;
max-width: 400px;
margin: 0 auto var(--space-lg);
}
.table-search-wrap .table-search {
margin: 0;
padding-left: calc(var(--space-md) + 20px);
}
.table-search__icon {
position: absolute;
left: var(--space-sm);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-tertiary);
pointer-events: none;
}
.table-search__no-results {
display: none;
text-align: center;
padding: var(--space-lg);
color: var(--color-text-tertiary);
}
/* .broker-table — tableau des courtiers (/page-courtiers/). En-tête gris,
lignes zébrées, colonnes Pays/Import centrées — repris du widget
d'origine, validé explicitement par Sébastien (voir
docs/missing-components.md). */
.broker-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.broker-table th,
.broker-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.broker-table thead tr {
background: var(--color-secondary-bg);
font-weight: 600;
color: var(--color-heading);
}
.broker-table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-secondary-bg);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.broker-table th:nth-child(2),
.broker-table td:nth-child(2),
.broker-table th:nth-child(3),
.broker-table td:nth-child(3) {
text-align: center;
}
.broker-table tbody tr:nth-child(even) {
background: var(--color-background-alt);
}
.broker-table tbody tr[hidden] {
display: none;
}
/* Hover ergonomique (ronde 6, demande explicite de Sébastien) — réutilise
--color-background-alt-dark, déjà validé, pour rester au-dessus du zébrage. */
.broker-table tbody tr {
transition: background-color 0.15s ease;
}
.broker-table tbody tr:hover {
background: var(--color-background-alt-dark);
}
/* Mobile (<768px, breakpoint canonique du site) : le tableau à 4 colonnes ne
tient pas à l'écran — au lieu du scroll horizontal (pénible sur mobile),
chaque ligne devient une mini-carte empilée. Le libellé de chaque colonne
(data-label, posé sur chaque | dans le HTML) réapparaît via ::before à
la place de l'en-tête, masqué sur ce format. */
@media (max-width: 767px) {
.broker-table thead {
display: none;
}
.broker-table,
.broker-table tbody,
.broker-table tr,
.broker-table td {
display: block;
width: 100%;
}
.broker-table tr {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.broker-table tbody tr:nth-child(even) {
background: var(--color-background-alt);
}
.broker-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-2xs) 0;
border-bottom: none;
text-align: right;
}
.broker-table td::before {
content: attr(data-label);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-tertiary);
text-align: left;
}
.broker-table td:first-child {
font-weight: 700;
color: var(--color-heading);
padding-top: 0;
}
.broker-table td:first-child::before {
display: none;
}
}
/* .tag — pilule de catégorie dans .broker-table (une ou plusieurs par
ligne). Distinct de .badge (réservé aux cards pricing) : 5 couleurs
propres à cette colonne, non réutilisables ailleurs sans revalidation. */
.tag {
display: inline-block;
padding: 2px 10px;
margin: 2px;
border-radius: var(--radius-pill);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
color: var(--color-tag-text);
}
.tag--cto { background: var(--color-tag-cto-bg); }
.tag--pea { background: var(--color-tag-pea-bg); }
.tag--crypto { background: var(--color-tag-crypto-bg); }
.tag--crowdfunding { background: var(--color-tag-crowdfunding-bg); }
.tag--compte { background: var(--color-tag-compte-bg); }
|