Étapes et questions
Les étapes numérotées et les questions qui s’ouvrent.
Les étapes
Une cellule par étape, le numéro en vert profond, un titre, une phrase. Jusqu’à quatre de front. Aucune page du site ne l’emploie encore : les pages d’offre viendront avec.
- Emploi
- Un déroulé en trois ou quatre temps : ce qui se passe, dans l’ordre, dans une page d’offre ou de suivi.
- Moment
- Quand l’ordre compte et que chaque temps tient en une phrase.
- Jamais
- Au-delà de quatre : le composant plafonne --n à 4 et la grille replie le reste sur une seconde rangée. Jamais pour une liste sans ordre.
-
Un mois offert
Hébergement, sécurité et bugs corrigés. À la fin du mois, un point sur le trafic et une étude SEO.
-
Vous reprenez la main
On vous remet le code, les accès et la documentation.
-
Vous nous le confiez
On continue d’héberger, de sécuriser et de corriger, sans durée d’engagement et avec un mois de préavis.
const ETAPES = V3.suivi.colonnes.map((c) => ({ titre: c.titre, texte: c.texte }))
<Etapes etapes={ETAPES} />| Classe | Zone | Valeur |
|---|---|---|
| .tr-etapes | la grille (ol) | une colonne ; deux dès 600 px ; --n colonnes dès 1000 px, --n valant le nombre d’étapes, 4 au plus ; data-stagger 60, data-lignes |
| .tr-etapes li | la cellule | en colonne, 10 px entre le numéro, le titre et la phrase |
| .tr-eng__n | le numéro | Inter 600 11 px (--t-label), .14em, chiffres de tableau, vert profond ; 01, 02 ; aria-hidden |
| .tr-etapes h3 | le titre | clamp(18px, 1.4vw, 21px) |
| .tr-etapes .small | la phrase | 14,5 px, interligne 1.5, ink-3 |
Les questions
Les questions qu’on nous pose : une cellule par question, qui s’ouvre au clic, une croix qui tourne. C’est un details natif : rien ne dépend d’un script.
Avec ou sans CMS ?
Selon qui publiera. Si vous publiez souvent, WordPress ou Storyblok. Si le site bouge peu, sans CMS : il coûte moins cher à faire tourner.
Et pour être trouvé dans ChatGPT ?
Le site est pensé dès le départ pour Google et pour les assistants IA : une structure, des contenus et des données que les deux lisent bien.
Et si j’ai besoin d’un outil de gestion derrière ?
C’est l’offre Logiciel métier. Elle se prend avec le site, avec le même interlocuteur.
const offre = (await getCollection('offres')).find((o) => o.id === 'site-internet')
<Faq questions={offre.data.faq} />| Classe | Zone | Valeur |
|---|---|---|
| .tr-faq | la grille | une colonne ; deux dès 800 px ; data-stagger 60, data-lignes |
| .tr-faq__q | la cellule (details) | padding 0 ; au survol ou ouverte : fond pâle, en 200 ms |
| .tr-faq__q summary | la question | en ligne, padding clamp(18px, 2vw, 24px), marqueur natif masqué ; focus : contour 2 px vert profond, vers l’intérieur |
| .tr-faq__q h3 | le titre, dans le summary | clamp(17px, 1.3vw, 19px) / 1.3, sans marge ni largeur maximale |
| .tr-faq__plus | la croix | 18 px, deux traits de 2 px vert profond ; tourne de 45° quand la cellule est ouverte, en 380 ms (var(--mid)) |
| .tr-faq__q p | la réponse | ink-2, interligne 1.55, 60ch au plus, padding 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) |
Le script de la trame ne touche pas aux questions : il trace les lignes de la grille et fait apparaître les cellules, c’est tout. Sans JavaScript, chaque question s’ouvre et se ferme de la même façon.
Engagements et étapes
Même anatomie : le numéro en vert profond, un titre, une phrase en petit. La différence tient à la liste et à la grille.
-
Une seule personne à appeler
Votre chef de projet vous suit du premier échange au suivi. Vous n’avez rien à coordonner.
-
Un délai annoncé d’avance, et tenu
Vous connaissez le délai de mise en ligne avant qu’on commence. Vous pouvez caler votre lancement ou votre saison dessus.
-
Un devis écrit, et pas de facture surprise
Le devis dit ce qui est compris et ce qui ne l’est pas. Si le projet change en route, on chiffre l’écart avant de s’y mettre.
-
Les clés sont à vous
Le code, les accès, vos comptes de publicité et la documentation vous appartiennent. Vous les récupérez quand vous voulez, et vous partez avec.
-
Un non franc, et une bonne adresse
Si votre budget ou votre projet ne nous correspondent pas, on vous le dit dès le premier échange, et on vous oriente vers quelqu’un de mieux placé.
<Engagements liste={V3.engagements.liste} />| Quoi | Engagements | Étapes |
|---|---|---|
| La liste | un ol de cinq, toujours les mêmes, plus deux cellules allumées (ce qui manque pour finir la rangée de quatre, deux au plus) | un ol de trois ou quatre, propres à la page |
| Les colonnes | une ; deux dès 600 px ; quatre dès 1000 px (sept cellules : une rangée de quatre, puis une de trois) | une ; deux dès 600 px ; --n dès 1000 px |
| La cellule qui finit | .tr-cel--allume : fond pâle, 120 px au moins, cinq carrés de 16 % qui s’allument en 640 ms à 90 ms d’écart puis respirent en 3,6 s ; masquée sous 600 px | aucune |
| Au survol | la cellule passe en fond pâle | rien |
| Le numéro, le titre, la phrase | .tr-eng__n, h3 clamp(18px, 1.4vw, 21px), .small à 1.5 | les mêmes, à l’identique |
RègleUne étape est numérotée en vert profond et tient en une phrase ; une question s’ouvre sans script.