Référence interne · goodassur.com
Design System
Tokens, classes CSS et patterns visuels utilisés sur goodassur.com. À utiliser comme référence avant de créer un nouveau bloc — préférer toujours une classe existante à du Tailwind inline pour les patterns récurrents.
Couleurs tokens CSS
Tokens de marque exposés via var(--color-*) et utilisables en Tailwind via bg-primary, text-accent, etc.
Utilisation
<div class="bg-primary text-white">…</div> <a class="text-accent hover:text-accent-dark">…</a> <div style="background: var(--color-primary);">…</div>
Typographie Source Sans 3 + JetBrains Mono
Police sans-serif Source Sans 3 (200-900) chargée localement (/fonts/source-sans-3-latin.woff2), monospace JetBrains Mono pour le code. Aucune autre police — ne pas charger de Google Font additionnelle.
Heading 1 — texte principal de page
Heading 2 — section d'article
Heading 3 — sous-section
Paragraphe corps d'article : --font-size-body (1,125 rem) et line-height: 1,75. Texte normal lisible sur écran et imprimé. Les liens éditoriaux apparaissent en bleu primaire et en gras, soulignés.
Texte secondaire (légendes, méta) — 0,9 rem, color: #6b7280.
text-xl, text-2xl, text-3xl…) pour la cohérence avec la grille de breakpoints.Tokens layout --max-width-* / --shadow-* / --radius-*
Tokens partagés (issus de themes/base/theme.css) que toute page goodassur peut consommer.
--max-width-content : 1200 px--max-width-article : 768 px
--radius-card : 0,5 rem--radius-button : 0,5 rem--radius-input : 0,375 rem--radius-badge : 9999 px
--shadow-card : carte au repos--shadow-card-hover : carte au survol--shadow-dropdown : menu déroulant--shadow-sticky : header sticky
--spacing-section : 3 rem--spacing-section-lg : 4 rem--spacing-card-padding : 1,5 rem
Bloc d'intro .ga-intro / p.intro
Paragraphe d'ouverture d'article avec barre bleue à gauche. Optimisé pour Google position 0 — réponse directe en 40-60 mots.
L'assurance habitation est obligatoire pour les locataires en France. Comptez en moyenne 150 €/an pour un studio, 250 €/an pour un T3 et jusqu'à 600 €/an pour une maison de 100 m². Comparer les offres permet d'économiser jusqu'à 30 % sur la prime annuelle.
Code
<p class="intro">
L'<strong>assurance habitation est obligatoire pour les locataires</strong>…
<a href="/comparateur">Comparer les offres</a>…
</p>
<div class="ga-intro">
<p>Premier paragraphe…</p>
<p>Suite éventuelle…</p>
</div>Listes ✓ / ✗ li.b--check / li.b--cross
Bullets en check vert ou croix rouge. À utiliser pour les listes « avantages » / « inconvénients » ou « inclus » / « non inclus ».
- Responsabilité civile vie privée
- Vol et tentative de vol
- Dégâts des eaux
- Bris de glace.
- Catastrophes naturelles non déclarées
- Objets de valeur sans déclaration préalable
- Dommages volontaires.
Code
<ul>
<li class="b--check">Responsabilité civile vie privée</li>
<li class="b--check">Vol et tentative de vol</li>
</ul>
<ul>
<li class="b--cross">Catastrophes naturelles non déclarées</li>
</ul>Liste numérotée ol.list--num
Liste ordonnée avec pastilles bleues circulaires. Idéale pour décrire un processus en plusieurs étapes inline (en alternative à x-timeline-steps).
- Renseignez votre situation en 2 minutes (âge, situation familiale, code postal) ;
- Comparez les offres triées par prix et niveau de remboursement ;
- Choisissez la mutuelle qui correspond à votre profil ;
- Souscrivez en ligne ou par téléphone, sans engagement.
Code
<ol class="list--num">
<li>Renseignez votre situation en 2 minutes ;</li>
<li>Comparez les offres triées par prix ;</li>
<li>Choisissez la mutuelle adaptée ;</li>
<li>Souscrivez en ligne ou par téléphone.</li>
</ol>Badge inline .mark.mark--success / .text--green
Petite étiquette inline orange (par défaut) ou verte (dans un .table--green-cta). Pour valoriser une économie ou un avantage tarifaire.
Avec Acheel, vous économisez en moyenne -32 % sur le prix par rapport à la concurrence directe.
Le tarif final sera de 28 €/mois au lieu de 41 €/mois.
Code
Vous économisez <span class="mark mark--success">-32 % sur le prix</span>. Tarif <span class="text--green"><strong>de 28 €/mois</strong></span>.
Tableau éditorial .table--responsive
Tableau moderne sans bordures, avec lignes en cards et zébrage léger. Variantes : .table--swap (transformation mobile en cartes), .table--green-cta (CTA et badges verts).
.article-body est nécessaire car les styles tableau sont scopés à .article-body .table--responsive dans le CSS. Sur les pages article, ce wrapper est posé par x-layouts.article.Code
<div class="table--responsive">
<table>
<thead>
<tr><th>Mutuelle</th><th>Prix</th><th>Économie</th></tr>
</thead>
<tbody>
<tr><td><strong>Acheel</strong></td><td>589 €</td><td><span class="mark mark--success">-32 %</span></td></tr>
</tbody>
</table>
</div>
<div class="table--responsive table--green-cta"> … </div>Légende sous tableau .tbl-note
Caption discrète placée immédiatement après le wrapper du tableau. Style canonique : petite typo, gris ardoise, alignée à droite. C'est l'unique classe autorisée pour les légendes de tableau (jamais <small>, <em> ou Tailwind ad hoc — cf. convention.md).
| Mutuelle | Prix moyen |
|---|---|
| Acheel | 589 €/an |
| Alan | 612 €/an |
Prix observés en mai 2026 (source : ameli.fr).
themes/base/theme.css et nécessite le wrapper .article-body (automatique sur x-layouts.article). Elle doit toujours inclure une source et une indication de fraîcheur ({{ $mois }}, {{ $annee }}).Code
<div class="table--responsive">
<table>…</table>
</div>
<p class="tbl-note">Prix observés en {{ $mois }} (source : ameli.fr).</p>Tableau premium .ga-table-wrap + .ga-table
Système de tableau complet avec caption colorée, titre, scroll horizontal, badges colorés et ligne mise en avant. Idéal pour les tableaux comparatifs structurés (formules d'assureur, plafonds par garantie, etc.).
Modificateurs sur .ga-table-wrap : .ga-zebra (lignes alternées), .ga-borders-horizontal (séparateurs lignes), .ga-borders-full (grille complète). Sur une ligne <tr> : .ga-row-highlight (fond bleu + barre gauche). Badges : .ga-badge-blue|green|amber|red|neutral.
Comparatif des formules les plus souscrites
| Formule | Hospitalisation | Optique | Prix |
|---|---|---|---|
| Essentielle | 100 % | 125 € | 28 €/mois |
| Confort Recommandé | 200 % | 250 € | 42 €/mois |
| Premium | 300 % | 400 € | 68 €/mois |
Tarifs indicatifs pour un assuré de 65 ans (source : catalogue assureurs).
Code
<div class="ga-table-wrap ga-zebra">
<div class="ga-table-head">
<div class="ga-table-caption">Mutuelle senior · janvier 2026</div>
<p class="ga-table-title">Comparatif des formules</p>
</div>
<div class="ga-table-scroll">
<table class="ga-table">
<thead><tr><th>Formule</th><th>Prix</th></tr></thead>
<tbody>
<tr class="ga-row-highlight">
<td>Confort <span class="ga-badge ga-badge-blue">Recommandé</span></td>
<td><span class="ga-badge ga-badge-green">42 €/mois</span></td>
</tr>
</tbody>
</table>
</div>
<p class="ga-table-note">Tarifs indicatifs (source : …).</p>
</div>
.ga-zebra
.ga-borders-horizontal
.ga-borders-full
.ga-badge-blue | .ga-badge-green | .ga-badge-amber | .ga-badge-red | .ga-badge-neutral
<tr class="ga-row-highlight">...</tr>Alert .ga-alert (via <x-alert>)
Bloc d'attention avec icône à gauche et contenu HTML libre à droite. Préférer le composant <x-alert> (voir shortcodes) — la classe .ga-alert est exposée pour les cas custom mais le composant gère les variantes (info / warning / success / error) automatiquement.
4 rem de large (3,25 rem sur mobile < 480 px). Au-delà, le contenu HTML hérite des styles du .article-body (liens bleus, <strong> noir).Code
<x-alert type="warning" title="Délai de carence">
Certaines formules appliquent un <strong>délai de carence</strong>…
</x-alert>
Trust grid .ga-trust-grid + .ga-trust-card
Grille de 3 cartes « confiance » avec icône, statistique et étoiles. Utilisée en home et en bas de page assureur.
Sur plus de 1 200 avis clients vérifiés.
Par an et par foyer sur la mutuelle santé.
Toutes les offres du marché en quelques clics.
Code
<div class="ga-trust-grid">
<div class="ga-trust-card">
<div class="ga-trust-card-icon">⭐</div>
<div class="ga-trust-stat">4,7/5</div>
<div class="ga-trust-stars">★★★★★</div>
<div class="ga-trust-card-title">Note Trustpilot</div>
<p class="ga-trust-card-text">Sur plus de 1 200 avis…</p>
</div>
</div>Garanties .ga-guarantee-grid + .ga-guarantee-card
Grille responsive de cartes « garanties incluses » (1 → 2 → 3 colonnes). Icône SVG dans une pastille bleue, titre, description.
Responsabilité civile
Couvre les dommages causés à des tiers, dans la vie privée comme à l'extérieur.
Vol & vandalisme
Indemnisation après dépôt de plainte, valeur de remplacement à neuf possible.
Bris de glace
Vitres, baies vitrées, vélux. Vitres optiques (lunettes) souvent en option.
Code
<div class="ga-guarantee-grid">
<div class="ga-guarantee-card">
<div class="ga-guarantee-card__icon"><svg>…</svg></div>
<p class="ga-guarantee-card__title">Responsabilité civile</p>
<p>Couvre les dommages causés à des tiers…</p>
</div>
</div>Pros / cons .ga-expert__grid
Grille 2 colonnes responsive (1 col mobile, 2 col desktop) utilisée par le composant <x-expert-review>. Pour comparer avantages et limites en vis-à-vis. Pour les listes simples, préférer <x-check-cross-list> (voir shortcodes).
✓ Avantages
- Tarifs compétitifs sur les formules d'entrée
- Application mobile bien notée
- Souscription en ligne en 5 min.
✗ Limites
- Pas de réseau d'agences physique
- Délais d'expertise jugés longs
- Plafond optique limité à 200 €.
Code
<div class="ga-expert__grid">
<div>
<p>✓ Avantages</p>
<ul><li class="b--check">…</li></ul>
</div>
<div>
<p>✗ Limites</p>
<ul><li class="b--cross">…</li></ul>
</div>
</div>Grille devis .ga-devis-grid + .ga-devis-card
Cartes de redirection vers les comparateurs (auto, mutuelle, habitation). Préférer le composant <x-devis-grid> (voir shortcodes) — la classe CSS reste utile pour des cas custom.
Podium 1-2-3 .ga-podium + .ga-podium-card--{1,2,3}
Cartes or / argent / bronze pour le top 3. Préférer le composant <x-podium-top3> qui gère les médailles et logos automatiquement (voir shortcodes).
« À lire aussi » multi-liens .multiple-link
Grille de cartes-liens (2 → 3 → 4 colonnes responsive). Icône optionnelle en attribut data-icon et couleur data-color.
Code
<div class="multiple-link">
<span class="multiple-link__label">À lire aussi</span>
<ul>
<li data-icon="🩺" data-color="blue"><a href="...">Choisir sa mutuelle</a></li>
<li data-icon="🚗" data-color="orange"><a href="...">Assurance auto pas chère</a></li>
</ul>
</div>
« À lire aussi » lien unique .single-link
Carte horizontale avec icône, label, titre cliquable et flèche. À utiliser pour mettre en avant un seul article connexe au milieu d'un article éditorial.
Code
<div class="single-link" data-icon="🩺">
<span class="single-link__label">Guide associé</span>
<a href="..." class="single-link__url">Quelle mutuelle santé choisir ?</a>
</div>
FAQ hub .ga-faq-hub + .ga-faq-grid + .ga-faq-card
Index visuel d'une rubrique FAQ (ex. /mutuelle-sante/faq). Grille 2 colonnes responsive (1 col < 720px) de cartes-liens cliquables avec icône, question, flèche.
Toutes les réponses aux questions que vous vous posez sur la mutuelle santé — résiliation, remboursement, dispense, complémentaire santé solidaire.
Code
<div class="ga-faq-hub">
<span class="ga-faq-count">📚 24 questions fréquentes</span>
<p class="ga-faq-intro"><strong>Toutes les réponses</strong>…</p>
<div class="ga-faq-grid">
<a href="..." class="ga-faq-card">
<span class="ga-faq-card-icon">👵</span>
<span class="ga-faq-card-question">Mutuelle 90 ans</span>
<span class="ga-faq-card-arrow">→</span>
</a>
</div>
<a href="..." class="ga-faq-back">← Retour</a>
</div>Accordéon .collapse / .collapse-box
Bloc dépliant. Utile pour les FAQ, les blocs longs ou les détails optionnels. Le toggle est géré par le script global #ga-collapse-handler dans le layout — aucun JS supplémentaire à charger.
Quelle est la différence entre franchise et plafond ?
La franchise est la somme qui reste à votre charge après un sinistre, avant que l'assureur ne rembourse. Le plafond est le montant maximum que l'assureur paiera pour un sinistre donné.
Puis-je résilier ma mutuelle à tout moment ?
Oui, depuis la loi du 1er décembre 2020, vous pouvez résilier votre mutuelle après un an de contrat, à tout moment et sans frais.
Code
<div class="collapse-box">
<div class="collapse" data-opened="true">
<h3>Quelle est la différence entre franchise et plafond ?</h3>
<div class="collapse__content">
<p>La <strong>franchise</strong> est la somme qui reste à votre charge…</p>
</div>
</div>
</div>
CSS uniquement règle de conventions
Toute page de sites/goodassur.com/pages/ doit être stylée avec des classes CSS nommées uniquement. Tailwind est interdit sur les pages.
❌ Interdit sur les pages
Classes utilitaires Tailwind composées dans class="...". Difficile à relire pour la rédaction, dérive visuelle entre pages, impossible à maintenir depuis un seul endroit.
<!-- À NE PAS FAIRE sur une page -->
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
<span class="text-2xl">💡</span>
<p class="text-sm text-blue-900">Astuce du jour</p>
</div>
✅ À faire
Soit un composant Blade (<x-info-card>, <x-alert>…), soit une classe CSS du design system. Si la classe n'existe pas, l'ajouter dans sites/goodassur.com/css/app.css avant de l'utiliser.
<x-info-card icon="💡" title="Astuce du jour">
Texte de l'astuce…
</x-info-card>
<a href="..." class="btn-cta btn-cta--blue">Comparer</a>
Pourquoi cette règle ?
- La rédaction lit et écrit les pages — un
class="..."avec 12 utilitaires est illisible, une classe nommée comme.btn-ctadit ce qu'elle fait ; - Le design est centralisé : changer la couleur primaire ou le rayon des cartes se fait dans un seul fichier, pas dans 200 pages ;
- La cohérence visuelle est garantie : impossible qu'une page ait un bouton à
rounded-lget une autre àrounded-xl; - Les revues PR vont plus vite — la review se concentre sur le contenu, pas sur les classes utilitaires.
Champ d'application
| Type de fichier | Tailwind autorisé ? | Pourquoi |
|---|---|---|
Pages — sites/goodassur.com/pages/** |
Non | Territoire de la rédaction. CSS classes + composants <x-...> uniquement. |
Composants — sites/goodassur.com/components/** |
Oui | Territoire des développeurs. Tailwind est encapsulé dans le composant et n'est pas exposé à la rédaction. |
Layout — components/layouts/** |
Oui | Idem — modifié par les développeurs uniquement. |
Internals partagés — departments/**/views/**, resources/views/** |
Oui | Composants techniques partagés entre plusieurs sites. |
Et le style="..." inline ?
Toléré pour les vraies one-shot : un dégradé spécifique au hero d'une seule page, une marge unique, une animation custom. Dès que vous le ré-écrivez ailleurs, il faut le promouvoir en classe CSS.
sites/goodassur.com/css/app.css, ajoutez la définition avec un préfixe cohérent (.ga-*, .btn-*, etc.), documentez-la sur cette page, puis utilisez-la. Ne pas contourner la règle en mettant du Tailwind à la place.