et non un titre, choix de référencement assumé. */
p.hero__titre {
font-family: var(--police-affiche) !important;
}
/* Surtitres et mentions. */
p.eyebrow,
p.eyebrow-fonce,
p.form-note,
p.upload-zone__hint {
font-family: var(--police-detail) !important;
}
/* Le texte des avis est en police de titre : c'est une citation mise en avant,
pas du texte courant. */
.temoignage p {
font-family: var(--police-titre) !important;
}
/* ----- 4. Titres et boutons ----------------------------------------------
Ceux-là ne sont pas confisqués par un !important, mais par le CSS en ligne
que Shopkeeper imprime en priorité 999 — donc après tout le reste. Comme il
cible « h1, h2, h3… » à nu (0,0,1), une règle de spécificité 0,1,1 suffit à
reprendre la main : pas besoin de !important ici. */
:is(.intro, .hero, .slogan, .proof-strip, .services, .autres, .procede,
.entreprise, .realisations, .temoignages, .faq, .soumission, .carrieres)
:is(h2, h3, h4, h5, h6) {
font-family: var(--police-titre);
}
/* Pas de règle pour h1 : le seul de la page est .hero__accroche, qui porte sa
propre police de corps (0,1,0) et gagne déjà seul contre le CSS en ligne du
thème (0,0,1). Une règle générique à 0,1,1 l'écraserait et rendrait
l'accroche en police d'affiche — c'est précisément ce qu'il ne faut pas. */
/* La maquette veut que les boutons héritent, sauf ceux qui portent .bouton et
prennent la police d'affiche. Shopkeeper leur impose la sienne. */
:is(.intro, .hero, .slogan, .proof-strip, .services, .autres, .procede,
.entreprise, .realisations, .temoignages, .faq, .soumission, .carrieres)
button:not(.bouton) {
font: inherit;
cursor: pointer;
}
/* ==========================================================================
C. LA COULEUR DU TEXTE AU SURVOL
--------------------------------------------------------------------------
Shopkeeper applique « a:hover { color: .
Ils héritaient donc de l'icône du thème EN PLUS du guillemet pêche voulu —
d'où deux guillemets, dont un bleu clair à gauche.
Le guillemet de la maquette est un vrai élément, .temoignage__guillemet :
il n'est pas concerné par cette règle et reste en place.
========================================================================== */
.temoignage::before {
content: none;
}
/* ==========================================================================
E. LES LIENS NE DOIVENT PAS DEVENIR TRANSLUCIDES AU SURVOL
--------------------------------------------------------------------------
Shopkeeper pose, dans css/styles.css :
a:hover, a:focus, .entry-content a:hover { opacity: 0.7; }
TOUS les liens du site deviennent donc translucides au survol. Dans la
maquette, où plusieurs liens sont des surfaces pleines posées sur un fond
sombre, l'effet est destructeur : ce n'est plus la couleur voulue qu'on
voit, mais son mélange avec ce qu'il y a derrière.
Cas rapporté : la tuile « Soumission rapide » du bandeau de preuve. Son
fond au survol vaut bien #f1d8ca, mais à 70 % sur le marine #0b2535 du
bandeau, l'œil reçoit rgb(172, 162, 157) — un pêche sale, nettement plus
foncé. La valeur calculée du background restant correcte, le défaut est
invisible à l'inspection : il faut relever l'opacité PENDANT le survol.
Les boutons, les cartes de service et les liens flèche sont touchés de la
même façon.
SPÉCIFICITÉ — le point qui a fait échouer une première correction.
« .entry-content a:hover » vaut 0,2,1. Une règle en 0,2,0 perd. On vise
donc les sections avec :is() (0,1,0) plus « a:hover » (0,1,1), soit 0,2,1 :
à égalité, et notre feuille se charge après celle du thème — voir
chargement.php, qui déclare shopkeeper-default-style en dépendance.
La portée reste les sections de la maquette : les liens de l'en-tête et du
pied de Shopkeeper gardent leur effet habituel.
========================================================================== */
:is(.intro, .hero, .slogan, .proof-strip, .services, .autres, .procede,
.entreprise, .realisations, .temoignages, .faq, .soumission, .carrieres)
a:hover,
:is(.intro, .hero, .slogan, .proof-strip, .services, .autres, .procede,
.entreprise, .realisations, .temoignages, .faq, .soumission, .carrieres)
a:focus {
opacity: 1;
}
/* --------------------------------------------------------------------------
LE BOUTON DE SOUMISSION DU PIED, EN MOBILE
styles-v7.css lui donne « width: 100%; max-width: none » sous 700 px. Comme
cette feuille ne se charge QUE sur les pages à blocs, le même pied rendait
deux boutons différents : 166 px sur une page ordinaire, pleine largeur sur
l'accueil. Une incohérence entre pages, en plus d'un rendu que Patrik ne
voulait pas.
On lui rend la largeur de la rangée des trois pastilles — 3 × 50 px plus
deux écarts de 8 — pour qu'il se pose juste dessous, aligné à gauche.
Ce fichier est chargé APRÈS styles-v7.css : à spécificité égale, il gagne.
Aucun !important nécessaire.
-------------------------------------------------------------------------- */
/* D'ABORD LA COULEUR, ET À TOUTES LES LARGEURS.
« .pied__social a { color: var(--texte-inverse) } » donne le blanc à tous
les liens du bloc — c'est juste pour les pastilles, posées sur le fond
sombre du pied. Mais le bouton de soumission, lui, porte un aplat bleu pâle :
le blanc y tombait à 1,5 : 1, illisible, et pas seulement en mobile. Le
marine y donne 10,6 : 1.
Deux classes pour battre le (0,1,1) du sélecteur ci-dessus. */
.pied__social .pied__cta {
color: var(--texte-sur-accent);
}
/* On passe en GRILLE plutôt qu'en rangée flex, et ce n'est pas un détail.
En flex, impossible d'obtenir les deux à la fois : « flex-basis: 100% »
fait bien passer le bouton à la ligne, mais « max-width: 166px » BORNE cette
base avant que le retour à la ligne soit calculé — le bouton tient alors sur
la ligne des pastilles. Mesuré : il se rangeait à leur suite, à 194 px.
La grille n'a pas ce conflit. Trois colonnes de 50 px, et le bouton occupe
la rangée entière : sa largeur devient DÉDUITE des pastilles — 3 × 50 plus
deux écarts de 8 — au lieu d'être un 166 écrit à la main qu'il faudrait
corriger si la taille des pastilles changeait. */
@media (max-width: 700px) {
.pied__social {
display: grid;
grid-template-columns: repeat(3, 50px);
justify-content: start;
gap: 0.5rem;
}
/* DEUX CLASSES, encore une fois : « .pied__social a { width: 50px } » pèse
(0,1,1) et rendait le bouton carré de 50 px. Même piège de spécificité que
pour le méga-menu, le logo et la sous-liste du troisième niveau. */
.pied__social .pied__cta {
grid-column: 1 / -1;
width: auto;
height: auto;
max-width: none;
margin-left: 0;
}
}
/* --------------------------------------------------------------------------
LA RANGÉE QUI ROGNAIT LE HÉROS PENDANT L'INTRO
WPBakery pose « .vc_row[data-vc-full-width] { overflow: hidden } », et la
rangée du héros porte bien cet attribut — vérifié dans le HTML servi. Elle
coupe donc tout ce qui dépasse son bord haut.
Or l'intro remonte précisément le héros au-dessus de ce bord, pour qu'il
couvre l'emplacement de la barre de navigation. Mesuré dans le navigateur
pendant la phase d'attente : le héros était bien remonté (transform à −81,
sommet à −15 px), et pourtant invisible là-haut — la rangée commençant à
66 px, tout ce qui précédait était coupé. D'où la bande claire, qui n'était
ni l'en-tête ni un défaut d'animation, mais le fond de page vu à travers un
trou de 66 px.
Le débordement n'est libéré que pour LA rangée du héros. Les autres gardent
celui de WPBakery : il sert à contenir les marges négatives de la mise en
pleine largeur, et l'ouvrir partout risquerait une barre de défilement
horizontale.
Si :has() venait à manquer, la règle est simplement ignorée — on retombe sur
le comportement d'avant, sans rien casser.
-------------------------------------------------------------------------- */
.vc_row[data-vc-full-width]:has(.hero) {
overflow: visible;
}