fournit trois éléments de grille : la pastille ::before, le
titre et le paragraphe. Sans placement explicite, le paragraphe retombait
dans la colonne de la pastille — 26 px de large, un mot par ligne. */
.etapes li {
display: grid;
grid-template-columns: 1.65rem minmax(0, 1fr);
gap: 0 0.85rem;
counter-increment: etape;
}
.etapes li h3 { grid-column: 2; grid-row: 1; }
.etapes li p { grid-column: 2; grid-row: 2; }
.etapes li::before {
content: counter(etape);
display: grid;
place-items: center;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: var(--vert);
font-family: var(--mono);
font-size: var(--t-micro);
font-weight: 500;
color: var(--encre);
}
.etapes h3 {
font-family: var(--corps);
font-size: var(--t-base);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.35;
margin-bottom: 0.2rem;
}
.etapes p { font-size: var(--t-petit); line-height: 1.55; color: var(--gris); }
/* --------------------------------------------------------------------------
16 quinquies. Contenu rédactionnel (mentions légales)
-------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
font-stretch: 92%;
margin-top: 2.75rem;
margin-bottom: 0.9rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; color: var(--gris); line-height: 1.75; }
.prose strong { color: var(--encre); font-weight: 800; }
.prose-liste {
display: grid;
gap: 0;
margin-bottom: 1.5rem;
border-top: 1px solid var(--filet);
}
.prose-liste > div {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 0.5rem 1.5rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--filet);
}
.prose-liste dt { font-size: var(--t-petit); font-weight: 700; }
.prose-liste dd { font-size: var(--t-petit); color: var(--gris); }
/* Signale visiblement ce qui reste à renseigner avant mise en ligne */
[data-a-completer] {
padding: 0.1em 0.45em;
border-radius: var(--r-s);
background: repeating-linear-gradient(
-45deg,
#fff3c4 0 8px,
#ffe9a3 8px 16px
);
color: #6b5200;
font-weight: 700;
}
@media (max-width: 34rem) {
.prose-liste > div { grid-template-columns: minmax(0, 1fr); }
}
/* --------------------------------------------------------------------------
19. Révélations au défilement
-------------------------------------------------------------------------- */
/* Le masquage initial n'est appliqué que si le navigateur exécute bien du
script : sans JavaScript, rien ne viendrait retirer l'opacité et le contenu
resterait invisible. Si la requête média n'est pas reconnue, elle ne
s'applique pas — le contenu reste visible, ce qui est le bon repli. */
/* La révélation utilise transform, le survol des cartes utilise translate :
deux propriétés distinctes, donc aucune ne peut écraser l'autre. Avec la
même propriété, .revele.est-visible (0,2,0) l'emportait sur .offre:hover
(0,1,1) et les cartes ne se soulevaient plus. */
@media (scripting: enabled) {
.revele {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s var(--ease-doux), transform 0.7s var(--ease);
}
}
.revele.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.revele { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
20. Adaptations
-------------------------------------------------------------------------- */
@media (max-width: 60rem) {
.entete-nav,
.entete-actions { display: none; }
.entete-burger { display: grid; }
.pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pied-marque { grid-column: 1 / -1; }
/* Même seuil que le passage au menu burger. En dessous, une composition à
taquets n'a plus de quoi respirer : la grille se replie sur une colonne et
tout retombe dans l'ordre du document, aligné à gauche. Les échelles du
titre, elles, restent — c'est ce qui en fait une affiche. */
.heros-compo { grid-template-columns: minmax(0, 1fr); }
/* Le h1 étant en display:contents, ses lignes sont des éléments de la grille
sans être des enfants du DOM : il faut les nommer à part. */
.heros-compo > *,
.heros-compo .ligne {
grid-column: 1;
grid-row: auto;
justify-self: start;
align-self: auto;
text-align: left;
}
/* L'écart d'échelle qui tient sur 1200 px de mesure rendrait l'amorce et la
chute minuscules sur 350 : on resserre le rapport sans l'annuler. */
.ligne-1 { font-size: 11cqw; }
.ligne-3 { font-size: 15cqw; }
.heros-mention { padding-bottom: 0; margin-top: 1.5rem; }
.heros-actions { justify-content: flex-start; margin-top: 2rem; }
}
@media (max-width: 56rem) {
.fiche { grid-template-columns: minmax(0, 1fr); }
.contact-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44rem) {
.final-grille { grid-template-columns: minmax(0, 1fr); }
.final-mark { display: none; }
}
/* --------------------------------------------------------------------------
19 bis. Téléphone
Sous 40rem la largeur utile tombe à ~335 px : tout ce qui prélève une
colonne latérale la prélève sur le texte. On rend cette place au contenu.
-------------------------------------------------------------------------- */
@media (max-width: 40rem) {
:root { --h-entete: 4.25rem; }
/* La chaîne de l'atelier : le rail des numéros mangeait 76 px sur 335, soit
près d'un quart de la ligne — les paragraphes tombaient à 28 signes par
ligne. Le numéro remonte à côté du titre, le texte prend toute la largeur.
display:contents sur un sans rôle propre : les deux enfants passent
dans la grille du poste sans que la structure du document ne change. */
.poste {
grid-template-columns: auto minmax(0, 1fr);
gap: 0.7rem 0.85rem;
align-items: center;
}
.poste-repere { align-self: center; }
/* Le trait de construction ne relie plus rien une fois les numéros sortis
de leur colonne : il deviendrait un tiret suspendu à gauche du titre. */
.poste-repere::before { display: none; }
.poste-corps { display: contents; }
.poste-numero { width: 2.5rem; height: 2.5rem; }
.poste-titre {
grid-column: 2;
grid-row: 1;
margin-bottom: 0;
}
.poste-texte { grid-column: 1 / -1; grid-row: 2; }
/* Les avis : cinq témoignages empilés, c'est plus de 2 000 px de défilement
pour un contenu qu'on parcourt. Ils défilent désormais latéralement, carte
par carte, et celle qui dépasse à droite annonce qu'il y en a d'autres.
Les marges négatives font filer la bande jusqu'aux bords de l'écran
pendant que la première carte reste alignée sur la gouttière.
align-items passe à stretch, contrairement à la grille du bureau : des
cartes de hauteurs inégales feraient disparaître le débord de la suivante
dès qu'on atteint le bas de la plus longue — l'invitation à faire glisser
s'évanouirait au moment où elle sert. La signature reste collée en bas de
carte (margin-top: auto), le blanc se loge au-dessus d'elle. */
.avis-grille {
display: flex;
align-items: stretch;
gap: 0.85rem;
margin-inline: calc(-1 * var(--gouttiere));
padding-inline: var(--gouttiere);
padding-bottom: 0.35rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gouttiere);
overscroll-behavior-x: contain;
}
.avis-grille > li {
flex: 0 0 min(86%, 21rem);
scroll-snap-align: start;
}
/* La bande porte un tabindex (voir le gabarit) : aucune de ses cartes n'est
focalisable, elle serait sinon hors d'atteinte au clavier. L'anneau se
dessine autour de la bande entière, d'où l'écart un peu plus large. */
.avis-grille:focus-visible { outline-offset: 6px; }
}
/* Pouce et pavé tactile : sous 30rem, un bouton calé sur la longueur de son
libellé donne une colonne de boutons dépenaillée et des cibles étroites. */
@media (max-width: 30rem) {
.groupe-boutons {
flex-direction: column;
align-items: stretch;
}
.groupe-boutons .bouton { width: 100%; }
/* Le menu reste affiché jusqu'à 60rem : au-delà du téléphone, un bouton
étiré sur toute la largeur du panneau perdrait sa forme de bouton. */
.menu-mobile .bouton { justify-self: stretch; }
.formulaire-pied { flex-direction: column; align-items: stretch; }
.formulaire-pied .bouton { width: 100%; }
.formulaire-pied .formulaire-note { text-align: center; }
.fiche-pied .bouton { width: 100%; }
}