Données en lignes. En-tête gris en mono, filets de 1 px, statut en dernière colonne.
components/table/
Utiliser : Comparer des lignes de données sur les mêmes colonnes.Éviter : Mettre en page du contenu : utilisez des cartes.
Action
Échéance
Prix HT
Statut
Remplacer les deux postes sous Windows 10
Novembre
360,00 €
Agir maintenant
Former les nouveaux arrivants
Janvier
350,00 €
À prévoir
Tester la restauration des sauvegardes
Octobre
–
Fait
<div class="iv-table-wrap">
<table class="iv-table">
<thead><tr><th scope="col">Action</th><th scope="col">Échéance</th><th scope="col" class="is-num">Prix HT</th><th scope="col">Statut</th></tr></thead>
<tbody>
<tr><td>Remplacer les deux postes sous Windows 10</td><td>Novembre</td><td class="is-num">360,00 €</td><td><span class="iv-tag iv-tag--now">Agir maintenant</span></td></tr>
<tr><td>Former les nouveaux arrivants</td><td>Janvier</td><td class="is-num">350,00 €</td><td><span class="iv-tag iv-tag--plan">À prévoir</span></td></tr>
<tr><td>Tester la restauration des sauvegardes</td><td>Octobre</td><td class="is-num">–</td><td><span class="iv-tag iv-tag--done">Fait</span></td></tr>
</tbody>
</table>
</div>
Formulaires
Saisir une information
Formulaires
Champ de formulaire
Libellé au-dessus, aide en dessous, erreur explicite. Fonctionne pour input, textarea et select.
components/field/
Utiliser : Saisir un texte, un mail, un nombre, choisir dans une liste.Éviter : Choisir parmi 2 à 5 options visibles : utilisez les cases ou les radios.
<form class="iv-stack" style="max-width: 420px" novalidate>
<div class="iv-field"><label class="iv-field__label" for="f-mail">Adresse mail professionnelle</label><input class="iv-input" id="f-mail" type="email" autocomplete="email" aria-describedby="f-mail-h"><span class="iv-field__help" id="f-mail-h">Nous ne la partageons avec personne.</span></div>
<div class="iv-field is-invalid"><label class="iv-field__label" for="f-tel">Téléphone</label><input class="iv-input" id="f-tel" type="tel" value="06 12" aria-invalid="true" aria-describedby="f-tel-e"><span class="iv-field__error" id="f-tel-e"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M12 3l10 18H2z"></path><path d="M12 10v5M12 18v.5"></path></svg> Le numéro doit contenir 10 chiffres.</span></div>
<div class="iv-field"><label class="iv-field__label" for="f-size">Taille de l'entreprise</label><select class="iv-select" id="f-size"><option>1 à 5 personnes</option><option>6 à 20 personnes</option><option>Plus de 20</option></select></div>
<div class="iv-field"><label class="iv-field__label" for="f-msg">Votre message <span class="iv-field__opt">(facultatif)</span></label><textarea class="iv-textarea" id="f-msg"></textarea></div>
</form>
Formulaires
Case à cocher et bouton radio
Choix multiples (case) ou unique (radio). Zone cliquable de 44 px.
components/choice/
Utiliser : Choisir une ou plusieurs options visibles.Éviter : Plus de 6 options : utilisez une liste déroulante.
<fieldset class="iv-fieldset"><legend>Ce que vous avez déjà</legend>
<label class="iv-choice"><input type="checkbox" checked> <span>Des sauvegardes<span class="iv-choice__help">Sur un disque ou dans le cloud.</span></span></label>
<label class="iv-choice"><input type="checkbox"> <span>Un antivirus sur chaque poste</span></label>
</fieldset>
<fieldset class="iv-fieldset"><legend>Vous préférez être contacté</legend>
<label class="iv-choice"><input type="radio" name="ct" checked> <span>Par téléphone</span></label>
<label class="iv-choice"><input type="radio" name="ct"> <span>Par mail</span></label>
</fieldset>
Formulaires
Interrupteur
Active ou coupe un réglage, avec effet immédiat (pas de bouton « Enregistrer »).
components/switch/
Utiliser : Activer un réglage avec effet immédiat.Éviter : Un choix dans un formulaire à valider : utilisez une case à cocher.
Recevoir les alertes urgentes par SMS
Rapport mensuel par mail
<div class="iv-switch"><button type="button" class="iv-switch__btn" role="switch" aria-checked="true" aria-labelledby="sw1" data-iv-switch></button><span id="sw1">Recevoir les alertes urgentes par SMS</span></div>
<div class="iv-switch"><button type="button" class="iv-switch__btn" role="switch" aria-checked="false" aria-labelledby="sw2" data-iv-switch></button><span id="sw2">Rapport mensuel par mail</span></div>
Formulaires
Recherche avec suggestions
Champ de recherche qui propose des résultats pendant la frappe (site support, admin).
components/search/
Utiliser : Chercher dans un contenu (aide, clients, tickets).Éviter : Filtrer une petite liste de moins de 10 éléments.
<div class="iv-search" data-iv-search>
<label class="iv-sr-only" for="q">Rechercher dans l'aide</label>
<div class="iv-search__box"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4.2-4.2"></path></svg><input class="iv-search__input" id="q" type="search" placeholder="Ex. : faux mail, mot de passe, sauvegarde" role="combobox" aria-expanded="false" aria-controls="q-list" aria-autocomplete="list" autocomplete="off"></div>
<ul class="iv-search__list" id="q-list" role="listbox" hidden></ul>
<script type="application/json" data-iv-search-items>[
{"t": "J'ai cliqué sur un lien dans un faux mail", "c": "Urgence"},
{"t": "Changer mon mot de passe", "c": "Compte"},
{"t": "Activer la double authentification", "c": "Compte"},
{"t": "Tester une sauvegarde", "c": "Dépannage"},
{"t": "Reconnaître un faux mail", "c": "Ressources"}
]</script>
</div>
Messages et retours
Informer, confirmer, faire patienter
Messages et retours
Bandeau d'alerte
Message dans la page : urgence, information, succès. Pas de rouge : le violet signale ce qui demande d'agir.
components/alert/
Utiliser : Un message important lié à la page.Éviter : Confirmer une action réussie : utilisez une notification.
Faille Windows : 3 postes concernés
Faites la mise à jour aujourd'hui. Nous pouvons nous en charger.
Rapport d'octobre disponible
Il est dans vos documents.
Sauvegarde testée
La restauration du 28/10 a réussi.
<div class="iv-alert iv-alert--urgent" role="alert"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M12 3l10 18H2z"></path><path d="M12 10v5M12 18v.5"></path></svg><div><b class="iv-alert__title">Faille Windows : 3 postes concernés</b><p class="iv-alert__text">Faites la mise à jour aujourd'hui. Nous pouvons nous en charger.</p></div></div>
<div class="iv-alert iv-alert--info" role="status"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v6M12 7.5v.5"></path></svg><div><b class="iv-alert__title">Rapport d'octobre disponible</b><p class="iv-alert__text">Il est dans vos documents.</p></div></div>
<div class="iv-alert iv-alert--done" role="status"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><div><b class="iv-alert__title">Sauvegarde testée</b><p class="iv-alert__text">La restauration du 28/10 a réussi.</p></div></div>
Messages et retours
Notification
Confirme une action. Glisse depuis le bas, reste 5 secondes, propose d'annuler si possible.
components/toast/
Utiliser : Confirmer une action qui vient d'être faite.Éviter : Une erreur qui bloque : utilisez un bandeau d'alerte.
<button type="button" class="iv-btn iv-btn--secondary" data-iv-toast-demo>Inviter un collègue</button>
Messages et retours
Fenêtre de confirmation
Pour les actions irréversibles seulement. Construite sur <dialog>.
components/modal/
Utiliser : Confirmer une action irréversible.Éviter : Afficher un formulaire long ou du contenu : utilisez une page.
<button type="button" class="iv-btn iv-btn--primary" data-iv-open="m1">Supprimer l'accès</button>
<dialog class="iv-modal" id="m1" aria-labelledby="m1-t">
<form method="dialog">
<div class="iv-modal__body"><h2 class="iv-modal__title" id="m1-t">Supprimer l'accès de Julie ?</h2><p class="iv-modal__text">Elle ne pourra plus se connecter à l'espace client. Vous pourrez l'inviter à nouveau.</p></div>
<div class="iv-modal__actions"><button class="iv-btn iv-btn--secondary" value="cancel">Garder</button><button class="iv-btn iv-btn--accent" value="ok">Supprimer</button></div>
</form>
</dialog>
Messages et retours
Infobulle
Explique un terme technique au survol ou au clavier.
components/tooltip/
Utiliser : Expliquer un terme technique.Éviter : Une information indispensable : écrivez-la dans la page.
Activez la Un code reçu sur votre téléphone en plus du mot de passe. sur votre messagerie.
<p>Activez la <span class="iv-tip"><button type="button" class="iv-tip__btn" aria-describedby="tip1">double authentification</button><span class="iv-tip__bubble" role="tooltip" id="tip1">Un code reçu sur votre téléphone en plus du mot de passe.</span></span> sur votre messagerie.</p>
Messages et retours
Chargement en squelette
Remplace une roue qui tourne pendant le chargement des données.
components/skeleton/
Utiliser : Pendant le chargement de données.Éviter : Un chargement de moins de 300 ms.
<div class="iv-empty"><span class="iv-empty__mark" aria-hidden="true">{ }</span><p class="iv-empty__title">Aucune alerte ce mois-ci</p><p class="iv-empty__text">Rien ne touche vos outils pour l'instant. Nous vous prévenons dès que ça change.</p><a class="iv-btn iv-btn--secondary" href="#">Voir les alertes passées</a></div>
Navigation
Se repérer, changer de vue
Navigation
Barre du site
En-tête du site vitrine : logo, menu, appel à l'action. Menu repliable sur mobile.
components/topbar/
Utiliser : En-tête du site vitrine et du site support.Éviter : Dans l'espace client : utilisez le menu latéral.
Questions fréquentes et détails repliables. Construit sur <details> : marche sans JavaScript.
components/accordion/
Utiliser : Questions fréquentes, détails secondaires.Éviter : Le contenu principal de la page.
Comment résilier mon abonnement ?
Dans votre espace : Abonnement › Changer ou résilier. La date de fin s'affiche avant de confirmer.
Le déplacement est-il compris ?
[À préciser : zone sans frais, au-delà forfait.]
Comment je paie ?
Virement, carte, ou prélèvement mensuel pour la veille.
<div class="iv-accordion">
<details open><summary>Comment résilier mon abonnement ?</summary><div class="iv-accordion__body">Dans votre espace : Abonnement › Changer ou résilier. La date de fin s'affiche avant de confirmer.</div></details>
<details><summary>Le déplacement est-il compris ?</summary><div class="iv-accordion__body">[À préciser : zone sans frais, au-delà forfait.]</div></details>
<details><summary>Comment je paie ?</summary><div class="iv-accordion__body">Virement, carte, ou prélèvement mensuel pour la veille.</div></details>
</div>
Structure et marque
Contenir, signer
Structure et marque
Carte
Regroupe un contenu cliquable ou non. Bordure 1 px, angles droits, pas d'ombre.
components/card/
Utiliser : Regrouper un contenu (service, article, document).Éviter : Comparer des données : utilisez un tableau.
Consentement RGPD : accepter et refuser au même niveau, sans case pré-cochée.
components/cookie-banner/
Utiliser : Au premier chargement du site, si des cookies non exemptés sont utilisés.Éviter : Si seule la mesure d'audience exemptée est active.
Nous mesurons l'audience sans cookie. Nous utilisons des cookies seulement pour la vidéo et la prise de rendez-vous, si vous l'acceptez. En savoir plus
<div class="iv-cookies iv-cookies--inline" role="region" aria-label="Cookies" data-iv-cookies>
<p>Nous mesurons l'audience sans cookie. Nous utilisons des cookies seulement pour la vidéo et la prise de rendez-vous, si vous l'acceptez. <a class="iv-link" href="#">En savoir plus</a></p>
<div class="iv-cookies__actions"><button type="button" class="iv-btn iv-btn--secondary iv-btn--sm" data-choice="refuse">Tout refuser</button><button type="button" class="iv-btn iv-btn--secondary iv-btn--sm" data-choice="custom">Choisir</button><button type="button" class="iv-btn iv-btn--primary iv-btn--sm" data-choice="accept">Tout accepter</button></div>
</div>
Blocs de page
Des sections entières, prêtes à coller dans une page.
Blocs de page
En-tête de page d'accueil
Grand titre, promesse, deux boutons. Le premier écran du site vitrine.
blocks/hero/
Cybersécurité · Toulon et Var
Votre métier d'abord. Les menaces, c'est pour nous.
Nous protégeons les TPE et PME du Var : diagnostic, veille, formation de l'équipe, aide en cas d'attaque.
<section class="iv-hero-split">
<div class="iv-container iv-hero-split__grid">
<div class="iv-stack"><p class="iv-kicker" style="margin:0">Veille cyber</p><h1 class="iv-h2">Prévenu avant que ça vous touche.</h1><p class="iv-lead" style="margin:0">Nous surveillons les failles qui touchent vos outils, et nous vous disons quoi faire.</p><div class="iv-row"><a class="iv-btn iv-btn--primary" href="#">S'abonner <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a><a class="iv-link iv-link--arrow" href="#">Voir un exemple d'alerte <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></div></div>
<div class="iv-hero-split__visual" aria-hidden="true">{ }</div>
</div>
</section>
Blocs de page
Bandeau des secteurs
Une ligne de métiers servis. Rassure en un coup d'œil.
blocks/sectors/
Ils nous font confiance dans le Var
Artisans
Commerces
Cabinets libéraux
Agences
Associations
PME industrielles
<section class="iv-sectors"><div class="iv-container"><p class="iv-sectors__label">Ils nous font confiance dans le Var</p><ul class="iv-sectors__list"><li>Artisans</li><li>Commerces</li><li>Cabinets libéraux</li><li>Agences</li><li>Associations</li><li>PME industrielles</li></ul></div></section>
Blocs de page
Grille de services
Trois ou quatre cartes cliquables : les offres, les avantages.
<section class="iv-section">
<div class="iv-container iv-stack">
<div><p class="iv-kicker">Ce que nous faisons</p><h2 class="iv-h2">Quatre façons de vous protéger</h2></div>
<div class="iv-grid">
<a class="iv-card" href="#"><span class="iv-card__num">01</span><h3 class="iv-card__title">Diagnostic</h3><p class="iv-card__text">Une journée pour savoir où vous en êtes, avec un plan clair.</p><span class="iv-card__foot iv-link iv-link--arrow">Découvrir <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="iv-card" href="#"><span class="iv-card__num">02</span><h3 class="iv-card__title">Veille cyber</h3><p class="iv-card__text">Prévenu quand une menace touche vos outils.</p><span class="iv-card__foot iv-link iv-link--arrow">Découvrir <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="iv-card" href="#"><span class="iv-card__num">03</span><h3 class="iv-card__title">Sensibilisation</h3><p class="iv-card__text">Une équipe qui reconnaît un faux mail.</p><span class="iv-card__foot iv-link iv-link--arrow">Découvrir <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="iv-card" href="#"><span class="iv-card__num">04</span><h3 class="iv-card__title">En cas d'incident</h3><p class="iv-card__text">Quelqu'un à appeler quand ça arrive.</p><span class="iv-card__foot iv-link iv-link--arrow">Découvrir <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
</div>
</div>
</section>
Blocs de page
Comment ça se passe
Trois ou quatre étapes numérotées. Rassure sur la simplicité.
blocks/steps/
Comment ça se passe
Trois étapes, rien à installer
Le diagnostic
Une journée chez vous. Vous repartez avec un score et un plan.
Les corrections
Nous réglons les urgences avec vous, sur place ou à distance.
La veille
Chaque mois : alertes, contrôles, un rapport, et quelqu'un à appeler.
<section class="iv-section iv-section--alt">
<div class="iv-container iv-stack">
<div><p class="iv-kicker">Comment ça se passe</p><h2 class="iv-h2">Trois étapes, rien à installer</h2></div>
<ol class="iv-steps" style="list-style:none;margin:0;padding:0">
<li class="iv-steps__item"><h3>Le diagnostic</h3><p>Une journée chez vous. Vous repartez avec un score et un plan.</p></li>
<li class="iv-steps__item"><h3>Les corrections</h3><p>Nous réglons les urgences avec vous, sur place ou à distance.</p></li>
<li class="iv-steps__item"><h3>La veille</h3><p>Chaque mois : alertes, contrôles, un rapport, et quelqu'un à appeler.</p></li>
</ol>
</div>
</section>
Blocs de page
Bandeau de chiffres
Trois ou quatre chiffres clés sur fond noir.
blocks/stats-band/
1 j
pour un diagnostic complet
5 min
pour l'autodiagnostic en ligne
[x]
clients accompagnés dans le Var
0
jargon dans nos rapports
<section class="iv-statsband"><div class="iv-container iv-statsband__grid">
<div><div class="iv-statsband__v">1 <em>j</em></div><p class="iv-statsband__l">pour un diagnostic complet</p></div>
<div><div class="iv-statsband__v">5 <em>min</em></div><p class="iv-statsband__l">pour l'autodiagnostic en ligne</p></div>
<div><div class="iv-statsband__v">[x]</div><p class="iv-statsband__l">clients accompagnés dans le Var</p></div>
<div><div class="iv-statsband__v">0</div><p class="iv-statsband__l">jargon dans nos rapports</p></div>
</div></section>
Blocs de page
Tarifs
Trois formules côte à côte, la recommandée en noir.
<section class="iv-section">
<div class="iv-container iv-stack">
<div><p class="iv-kicker">Tarifs</p><h2 class="iv-h2">Des prix clairs, annoncés avant de commencer</h2><p class="iv-text-2">Tous les tarifs sont hors taxes.</p></div>
<div class="iv-pricing">
<div class="iv-price"><span class="iv-price__name">Diagnostic</span><span class="iv-price__amount">[prix] € <small>HT · une fois</small></span><p class="iv-price__for">Pour savoir où vous en êtes.</p><ul><li>Visite sur place ou à distance</li><li>Score de sécurité sur 100</li><li>Plan d'action priorisé</li></ul><a class="iv-btn iv-btn--secondary" href="#">Réserver le diagnostic</a></div>
<div class="iv-price iv-price--featured"><span class="iv-price__name">Veille cyber · recommandé</span><span class="iv-price__amount">[prix] € <small>HT / mois</small></span><p class="iv-price__for">Pour être prévenu à temps.</p><ul><li>Alertes filtrées selon vos outils</li><li>Espace client</li><li>Rapport le 5 du mois</li></ul><a class="iv-btn iv-btn--on-dark" href="#">S'abonner <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></div>
<div class="iv-price"><span class="iv-price__name">Accompagnement</span><span class="iv-price__amount">Sur devis</span><p class="iv-price__for">Pour tout mettre en place.</p><ul><li>Installation des protections</li><li>Sensibilisation de l'équipe</li><li>Contrôle et nouveau score</li></ul><a class="iv-btn iv-btn--secondary" href="#">Demander un devis</a></div>
</div>
</div>
</section>
Blocs de page
Témoignage
Une citation client, avec nom et métier. Uniquement des citations réelles, avec accord écrit.
blocks/quote/
[Témoignage réel d'un client, en une ou deux phrases.]
[Prénom Nom] · [Métier], [Ville]
<section class="iv-quote"><div class="iv-container"><figure style="margin:0"><blockquote class="iv-quote__text">[Témoignage réel d'un client, en une ou deux phrases.]</blockquote><figcaption class="iv-quote__who">[Prénom Nom] · [Métier], [Ville]</figcaption></figure></div></section>
Blocs de page
Questions fréquentes
Titre à gauche, accordéon à droite.
blocks/faq/
Questions
Ce qu'on nous demande souvent
Faut-il être un expert pour travailler avec vous ?
Non. Nous expliquons chaque action, sans jargon.
Le déplacement est-il compris ?
[À préciser : zone sans frais, au-delà forfait.]
Puis-je arrêter la veille quand je veux ?
Oui, depuis votre espace client. La date de fin s'affiche avant de confirmer.
<section class="iv-section"><div class="iv-container iv-faq__grid">
<div><p class="iv-kicker">Questions</p><h2 class="iv-h2">Ce qu'on nous demande souvent</h2></div>
<div class="iv-accordion">
<details open><summary>Faut-il être un expert pour travailler avec vous ?</summary><div class="iv-accordion__body">Non. Nous expliquons chaque action, sans jargon.</div></details>
<details><summary>Le déplacement est-il compris ?</summary><div class="iv-accordion__body">[À préciser : zone sans frais, au-delà forfait.]</div></details>
<details><summary>Puis-je arrêter la veille quand je veux ?</summary><div class="iv-accordion__body">Oui, depuis votre espace client. La date de fin s'affiche avant de confirmer.</div></details>
</div>
</div></section>
