Règles

Variables CSS

Utiliser les variables --bg, --bg-soft et --surface pour tous les fonds de page, bandes et cartes.
Utiliser --text-strong pour les titres et liens principaux.
Utiliser --text-body pour le texte courant et --text-muted pour les mentions secondaires.
Utiliser --brand pour les actions, repères actifs et puces, puis --brand-hover pour le survol.
Utiliser --border pour les contours et séparateurs.
Utiliser uniquement --radius-xl, --radius-lg, --radius-md et --radius-pill pour les arrondis.
Utiliser l'échelle --space-1 à --space-10 pour les espacements récurrents.

Nommage

Nommer les classes en minuscules avec des traits d'union, par exemple site-header, hero-video et billing-toggle.
Utiliser des noms de composants explicites : point-card, price-card, faq-item, footer-link-column.
Utiliser les modificateurs d'état déjà présents : is-open, is-active, is-expanded, is-visible et is-scrolled.
Utiliser des attributs data-* pour les comportements JavaScript, comme data-header, data-nav, data-billing et data-plan.

Interdits

Ne jamais ajouter une nouvelle police ; utiliser Inter local et la pile système existante.
Ne jamais ajouter de dépendance externe, de framework CSS ou de bibliothèque JavaScript pour les pages statiques.
Ne jamais utiliser de styles inline pour remplacer une classe existante.
Ne jamais utiliser !important hors règle prefers-reduced-motion déjà présente.
Ne jamais réutiliser une couleur en dur si une variable existante couvre le même rôle.
Ne jamais créer de nouveaux dégradés, ombres décoratives ou effets glass si le composant existant n'en utilise pas.

Responsive

Construire mobile-first avec des grilles fluides et minmax().
Utiliser max-width: 420px pour les ajustements des très petits mobiles.
Utiliser min-width: 560px pour passer les logos/connecteurs à trois colonnes.
Utiliser min-width: 640px pour les statistiques en quatre colonnes.
Utiliser min-width: 760px pour les mises en page en deux colonnes.
Utiliser max-width: 839px pour le menu mobile et les cartes verticales.
Utiliser min-width: 840px pour la navigation desktop, la grille prix et le layout héros.
Utiliser max-width: 900px pour empiler le footer.
Utiliser min-width: 1024px pour les grilles larges de connecteurs.
Conserver la règle orientation: landscape et max-height: 540px pour les petits écrans horizontaux.

Transitions

Utiliser 180ms ease pour les états simples : fond, couleur, bordure, opacité, transformation.
Utiliser 220ms cubic-bezier(0.22, 1, 0.36, 1) pour le curseur du toggle de facturation.
Utiliser 260ms ease pour les rotations d'icônes secondaires.
Utiliser 520ms ease pour les animations de révélation.
Respecter prefers-reduced-motion: reduce avec durées ramenées à 0.01ms.

Palette de couleurs

--bg#fafafa

--bg-soft#f5f6f6

--surface#ffffff

--text-strong#111517

--text-body#4d5558

--text-muted#707a7d

--brand#006070

--brand-hover#004f5c

--brand-soft#e7f3f4

--border#e4e8ea

--placeholder#e1e4e6

--placeholder-text#677175

--footer#11191b

<div class="swatch">
    <div class="swatch-color swatch-brand"></div>
    <div class="swatch-body">
        <strong>--brand</strong>
        <span>#006070</span>
    </div>
</div>

Typographie

H1 - Vos campagnes eMailing, prêtes en 5 minutes.

H2 - Ce qui fait la différence

H3 - Éditeur

H4 - Titre compact de section

H5 - Nom de plan tarifaire

H6 - Libellé de pied de page

Paragraphe - Vos newsletters se construisent par blocs, sans code. Le rendu reste sobre, lisible et rythmé par l'échelle d'espacement existante.

Petit texte - sans carte bancaire · sans engagement

Lien texte souligné

<h1>Vos campagnes eMailing, prêtes en 5 minutes.</h1>
<h2>Ce qui fait la différence</h2>
<h3>Éditeur</h3>
<p>Vos newsletters se construisent par blocs, sans code.</p>
<p class="small-copy">sans carte bancaire · sans engagement</p>
<a class="text-link" href="#">Lien texte souligné</a>

Boutons

NormalCréer un compte gratuit

HoverCréer un compte gratuit

FocusCréer un compte gratuit

Désactivé

InverséCréer mon compte gratuit

<a class="btn btn-primary account-cta" href="./newUser.php">Créer un compte gratuit</a>
<a class="btn btn-invert account-cta" href="./newUser.php">Créer mon compte gratuit</a>
<button class="btn btn-primary" type="button" disabled>Créer un compte gratuit</button>

Formulaires

Adresse eMail *

Volume mensuel

Message

J'accepte les conditions générales *

Veuillez renseigner les champs obligatoires.

<div class="field">
    <label for="adEmail">Adresse eMail <span class="required-mark">*</span></label>
    <input type="email" id="adEmail" name="adEmail" placeholder="nom@entreprise.fr" autocomplete="email">
</div>
<div class="field">
    <label for="volume">Volume mensuel</label>
    <select id="volume" name="volume"><option>10 000 emails</option></select>
</div>
<div class="field">
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
</div>
<div class="checkbox-row">
    <input name="acceptCGU" id="acceptCGU" type="checkbox">
    <label for="acceptCGU"><strong>J'accepte les conditions générales</strong> <span class="required-mark">*</span></label>
</div>
<p class="form-error">Veuillez renseigner les champs obligatoires.</p>

Cartes

Éditeur

Vos newsletters se construisent par blocs, sans code. Vous partez d'un modèle ou d'une page blanche.

<article class="point-card">
    <div class="point-card-heading">
        <h3>Éditeur</h3>
        <span class="icon-box" aria-hidden="true">...</span>
    </div>
    <p>Vos newsletters se construisent par blocs, sans code.</p>
</article>

<header class="site-header" data-header>
    <div class="container nav-wrap">
        <a class="brand brand-lockup" href="./index.html" aria-label="Accueil eTarget">
            <img class="brand-logo" src="pix_emailing/img_site/logo-etarget.svg" alt="" width="512" height="512">
            <img class="brand-typo" src="pix_emailing/img_site/logo-typo-etarget.svg" alt="" width="240" height="64">
        </a>
        <nav class="nav-links" id="main-nav" aria-label="Navigation principale" data-nav>
            <a href="./features.html">Fonctionnalités</a>
            <a href="./contact.php">Contact</a>
            <a href="./tarifs.html">Tarifs</a>
            <a class="nav-login" href="./connex.php">Se connecter</a>
        </nav>
        <a class="btn btn-primary nav-cta account-cta" href="./newUser.php">Créer un compte gratuit</a>
    </div>
</header>

<footer class="site-footer">
    <div class="container footer-inner">
        <div class="footer-brand-band">
            <div class="footer-brand">
                <div class="footer-brand-lockup">...</div>
                <p>Logiciel du mail en France. Depuis 2004 vos données restent hébergées en France.</p>
            </div>
            <div class="footer-contact">...</div>
        </div>
        <nav class="footer-link-grid" aria-label="Liens de pied de page">...</nav>
        <div class="footer-bottom">...</div>
    </div>
</footer>

Échelle d'espacement

--space-18px

--space-212px

--space-315px

--space-418px

--space-521px

--space-628px

--space-735px

--space-848px

--space-962px

--space-1082px

<section class="section">
    <div class="container">
        <div class="section-intro">...</div>
    </div>
</section>

Ombres et radius

--radius-md

10px

--radius-lg

12px

--radius-xl

16px

--radius-pill

999px

Aucune ombre carte

border only

Ombre média

drop-shadow

<article class="point-card">...</article>
<img class="media-editor-workflow" src="..." alt="">

Styleguide eTarget