et une
main sur les liens : c'est lui qui renseigne sur la cliquabilité. */
.prestation:hover,
.prestation:focus-visible {
border-color: var(--pausity-green, #007c34);
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(20, 24, 26, 0.09);
}
.prestation h3 {
margin: 0 0 0.9rem;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.45rem;
font-weight: 400;
color: var(--page-ink);
}
.prestation p {
margin: 0 0 1.8rem;
color: var(--page-text);
font-size: 1rem;
line-height: 1.65;
}
.prestation__lien {
margin-top: auto;
color: var(--pausity-green, #007c34);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
padding-bottom: 3px;
align-self: flex-start;
}
/* ================================================== */
/* GALERIES DE CHANTIERS */
/* ================================================== */
/* Utilisé par realisations.html et par les galeries « En images »
des pages de prestation : dans les deux cas il s'agit de photos
de travaux livrés, avec légende. */
.realisations {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
.realisation {
margin: 0;
}
/* Emplacement photo. Tant qu'aucune image n'est fournie, ce bloc
affiche un aplat neutre : rien n'apparaît « cassé ».
Pour poser une vraie photo, ajouter dans le
:
*/
.realisation__media {
position: relative;
aspect-ratio: 4 / 3;
/* Gris TRANSLUCIDE, et non le crème : l'emplacement doit se détacher
aussi bien d'une section blanche que d'une section crème. Une
couleur opaque identique à l'un des deux fonds rendrait la tuile
invisible dès qu'on déplace la galerie — le cas s'est produit. */
background: rgba(20, 24, 26, 0.045);
border: 1px solid var(--page-hairline);
overflow: hidden;
}
.realisation__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Pictogramme discret affiché seulement si le bloc est encore vide */
.realisation__media:empty::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
border: 1px solid rgba(20, 24, 26, 0.16);
border-radius: 50%;
}
.realisation figcaption {
margin-top: 1rem;
}
.realisation__titre {
display: block;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.2rem;
color: var(--page-ink);
}
.realisation__detail {
display: block;
margin-top: 0.35rem;
color: var(--page-text);
font-size: 0.95rem;
line-height: 1.6;
}
/* Renvoi vers la page de la prestation ou de la matière concernée */
.realisation__detail a {
color: var(--pausity-green-deep, #04512a);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0, 124, 52, 0.4);
transition: border-color 0.2s ease;
}
.realisation__detail a:hover,
.realisation__detail a:focus-visible {
border-bottom-color: var(--pausity-green, #007c34);
}
/* ================================================== */
/* APPEL À L'ACTION */
/* ================================================== */
/* Aplat vert profond, volontairement distinct de TOUT ce qui l'entoure.
Jouer sur deux teintes seulement (blanc et crème) ne suffit pas : le
bloc d'appel est coincé entre une section et le pied de page, et quelle
que soit la teinte choisie il finit par toucher un voisin identique.
Une troisième valeur, franchement plus sombre, règle le problème une
fois pour toutes — et place le devis là où le regard doit finir. */
.page-cta {
background: var(--pausity-green-deep, #04512a);
padding: 5rem 2rem;
text-align: center;
}
.page-cta h2 {
margin: 0 0 1rem;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 400;
color: #ffffff; /* 9,4:1 sur ce fond */
}
.page-cta p {
max-width: 560px;
margin: 0 auto 2.4rem;
color: rgba(255, 255, 255, 0.82);
font-size: 1.02rem;
line-height: 1.7;
}
/* Bouton inversé : blanc sur le vert, pour rester l'élément le plus
clair de la bande et donc le premier point d'accroche. */
.page-cta__bouton {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 30px;
background: #ffffff;
color: var(--pausity-green-deep, #04512a);
border-radius: 999px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: background 0.25s ease, transform 0.25s ease;
}
.page-cta__bouton:hover,
.page-cta__bouton:focus-visible {
background: var(--page-cream);
transform: translateY(-2px);
}
.page-cta__bouton:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* ================================================== */
/* RESPONSIVE */
/* ================================================== */
@media (max-width: 980px) {
.prestations,
.realisations {
grid-template-columns: repeat(2, 1fr);
}
.demarche {
grid-template-columns: 1fr;
gap: 2.4rem;
max-width: 560px;
margin: 0 auto;
}
}
@media (max-width: 680px) {
.page-hero {
padding: 2.25rem 1.2rem 2rem;
}
/* Interligne resserre : le chapo occupe 8 a 9 lignes sur un
telephone, c est lui qui fait la hauteur du bandeau. */
.page-intro {
line-height: 1.65;
}
.page-section {
padding: 3.5rem 1.2rem;
}
/* Les cartes de prestation contiennent du texte : elles ont besoin de
toute la largeur. */
.prestations {
grid-template-columns: 1fr;
max-width: 520px;
margin: 0 auto;
}
/* Les photos, elles, restent sur DEUX colonnes. En une seule, la page
Réalisations mesurait 16 780px, soit 21 écrans de téléphone. À deux,
les vignettes font encore 170px de large en 4/3 — largement lisibles —
et la page tombe sous les 13 écrans. */
.realisations {
grid-template-columns: repeat(2, 1fr);
gap: 0.9rem;
}
.realisation figcaption {
margin-top: 0.7rem;
}
.realisation__titre {
font-size: 0.95rem;
}
.realisation__detail {
font-size: 0.82rem;
line-height: 1.45;
}
.prestation {
padding: 2rem 1.6rem;
}
.page-cta {
padding: 3.5rem 1.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.prestation,
.page-cta__bouton {
transition: none;
}
.prestation:hover,
.page-cta__bouton:hover {
transform: none;
}
}
/* ============================================================ */
/* VISIONNEUSE (clic sur une photo pour l'agrandir) */
/* ============================================================ */
/* Le curseur annonce que la photo est cliquable. */
.realisation__media img {
cursor: zoom-in;
}
.visionneuse {
position: fixed;
inset: 0;
/* La barre de menu est a 9999 (menu.css) : a 1000, elle passait
par-dessus la visionneuse. La photo disparaissait sous le menu et
le bouton Fermer, place a 20px du haut, etait cache derriere. */
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(12, 16, 14, 0.92);
/* Anime l'ouverture sans decaler la mise en page. */
opacity: 0;
transition: opacity 0.22s ease;
}
.visionneuse[hidden] {
display: none;
}
.visionneuse.est-ouverte {
opacity: 1;
}
.visionneuse__cadre {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 100%;
max-height: 100%;
}
/* Photo entiere, jamais recadree : c'est tout l'interet par rapport a la
vignette, qui est en object-fit: cover et coupe pres de la moitie d'une
photo verticale.
HAUTEUR FIXE, largeur libre : en `max-height` seul, une verticale de
900x1200 s'affichait bien plus grande qu'une horizontale de 1200x900 —
deux photos de la meme galerie n'avaient pas du tout la meme presence.
A hauteur commune, portrait et paysage se valent. */
.visionneuse__image {
display: block;
height: min(72vh, 760px);
width: auto;
max-width: 92vw;
object-fit: contain;
border-radius: 2px;
}
.visionneuse__legende {
margin: 0;
max-width: 700px;
text-align: center;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
.visionneuse__compteur {
display: block;
margin-top: 6px;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
/* --- Boutons --- */
/* Base commune : uniquement ce qui est vraiment commun.
Ni dimensions ni marges interieures ici — `.visionneuse button` (une
classe + un type) l'emporte en specificite sur `.visionneuse__fermer`
(une classe) et ecraserait ses valeurs. Chaque bouton porte les siennes. */
.visionneuse button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background: transparent;
color: #fff;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.visionneuse button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* --- Sortie ---------------------------------------------------------
Sous la photo, dans le flux, et non plus en pastille au coin haut
droit : la barre de menu passait devant, et un rond flottant sur une
image lisait mal. Ici il est la ou l'oeil finit sa lecture, apres la
legende. Trait fin, capitales espacees : le vocabulaire du reste du
site plutot qu'un bouton d'interface. */
.visionneuse__fermer {
margin-top: 10px;
/* Le cadre serrait le texte. Un libelle en capitales tres espacees a
besoin d'air : sinon le trait se lit comme une bordure de champ de
formulaire, pas comme un bouton. */
height: 48px;
padding: 0 30px;
gap: 13px;
border-radius: 1px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.visionneuse__fermer:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
.visionneuse__fermer svg {
width: 13px;
height: 13px;
}
/* `letter-spacing` ajoute son espace apres la DERNIERE lettre aussi : sans
cette compensation, le libelle parait colle a gauche dans son cadre. */
.visionneuse__fermer span {
margin-right: -0.22em;
}
/* --- Fleches --------------------------------------------------------
Elles, restent flottantes de part et d'autre de la photo : leur fond
est opaque car elles peuvent se poser sur une image claire. */
.visionneuse__prec,
.visionneuse__suiv {
position: absolute;
width: 48px;
height: 48px;
padding: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(10, 14, 12, 0.72);
}
.visionneuse__prec:hover,
.visionneuse__suiv:hover {
background: rgba(10, 14, 12, 0.9);
border-color: #fff;
}
.visionneuse__prec { left: 20px; }
.visionneuse__suiv { right: 20px; }
.visionneuse__prec svg,
.visionneuse__suiv svg {
width: 22px;
height: 22px;
}
.visionneuse button svg {
pointer-events: none;
}
/* Une seule photo : pas de fleches. */
.visionneuse.est-seule .visionneuse__prec,
.visionneuse.est-seule .visionneuse__suiv {
display: none;
}
/* Marqueur seulement : le blocage du defilement se fait en JavaScript
(voir verrouillerPage dans app.js). `overflow: hidden` pose ici n'avait
aucun effet, car sur ce site c'est qui defile, pas . */
@media (max-width: 700px) {
/* Bande basse reservee aux fleches : sur telephone la photo occupe
presque toute la largeur, et des fleches centrees verticalement se
posaient dessus en masquant une partie de l'image. */
.visionneuse { padding: 24px 12px 84px; }
/* Sur telephone, retour a une image inscrite (max-height + max-width) :
avec une hauteur fixe, une photo horizontale voyait sa largeur bridee
a 94vw sans que la boite ne se retracte, laissant une bande vide en
haut et en bas. Ici c'est la largeur qui manque, pas la hauteur. */
.visionneuse__image {
height: auto;
max-height: min(58vh, 520px);
max-width: 94vw;
}
.visionneuse__fermer {
height: 38px;
padding: 0 16px;
font-size: 0.66rem;
}
.visionneuse__prec,
.visionneuse__suiv {
width: 42px;
height: 42px;
top: auto;
bottom: 18px;
transform: none;
}
.visionneuse__prec { left: 18px; }
.visionneuse__suiv { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.visionneuse { transition: none; }
}
/* ============================================================ */
/* ANCRES DE SECTION */
/* ============================================================ */
/* La barre de menu est en `position: fixed` : 89px sur grand ecran,
67px sur telephone. Sans cette reserve, un lien vers #creation amene
le titre de section exactement DERRIERE la barre — la page a bien
defile, mais on ne voit pas ou l'on est arrive. */
:root {
--ancre-reserve: 106px;
}
@media (max-width: 600px) {
:root {
--ancre-reserve: 84px;
}
}
main [id] {
scroll-margin-top: var(--ancre-reserve);
}
/* La page glisse jusqu'a la section au lieu d'y sauter : on garde le fil
de ce qu'on vient de traverser. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ============================================================ */
/* SOMMAIRE DES METIERS (page Realisations) */
/* ============================================================ */
/* Seize metiers empiles font 13 ecrans de telephone. Sans point
d'entree, le visiteur doit tout parcourir pour trouver le sien.
Le sommaire lui donne la liste d'emblee : il choisit, il y va. */
/* Vert profond, texte clair. Le sommaire n'est pas un contenu de plus a
faire defiler : c'est l'outil qui rend la page utilisable avec vingt
metiers. Il doit s'annoncer comme tel.
C'est aussi la couleur de l'appel a l'action en bas de page : les deux
encadrent la liste des chantiers, debut et fin. */
.sommaire {
padding: 3rem 2rem 3.4rem;
background: var(--pausity-green-deep, #04512a);
}
.sommaire__inner {
max-width: 1240px;
margin: 0 auto;
}
.sommaire__titre {
margin: 0 0 1.5rem;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
/* Blanc attenue : le titre annonce, il ne doit pas rivaliser avec les
vingt liens qu'il coiffe. 9,5:1 de contraste, tres au-dessus du seuil. */
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
.sommaire__liste {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* La case doit s'étirer sur toute la hauteur de sa rangée. En `display:
block`, un libellé sur une ligne restait à 43px à côté d'un libellé
sur deux lignes à 61px : la grille paraissait bancale. */
.sommaire__liste li {
display: flex;
}
.sommaire__liste a {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
/* `border-box` indispensable : le site n'a pas de règle globale, donc
`min-height` porterait sur le seul contenu et les 20px de marge
intérieure viendraient s'y ajouter — les cases faisaient 82px au
lieu de 56. */
box-sizing: border-box;
/* Hauteur plancher : une case d'une ligne et une case de deux lignes
ne diffèrent alors plus que de quelques pixels, la grille se lit
comme un ensemble régulier. */
min-height: 54px;
padding: 10px 14px;
text-align: center;
/* Un voile de blanc a peine perceptible, et un filet clair : la case
existe sans decouper la bande. Le survol l'eclaircit franchement,
elle remonte alors sous le doigt. */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 2px;
color: #ffffff;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.85rem;
line-height: 1.35;
text-decoration: none;
text-wrap: balance;
/* Le vert n'apparaît qu'au survol : seize bordures vertes d'emblée le
banaliseraient. */
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Inversion franche : fond blanc, texte vert profond.
L'état précédent gardait un fond sombre et ne faisait que passer le
filet de blanc-28 % à blanc pur. Ce trait fin très contrasté se lisait
comme un champ de formulaire sélectionné, pas comme un lien survolé —
et le changement était trop ténu pour dire clairement « c'est celui-ci ».
Ici la case s'allume : le rapport s'inverse d'un coup, sans ambiguïté,
et le vert profond sur blanc reste à 9,5:1. */
.sommaire__liste a:hover {
background: #ffffff;
border-color: #ffffff;
color: var(--pausity-green-deep, #04512a);
}
/* Le focus clavier ne doit pas se confondre avec le survol : la case
reste sur le fond vert et c'est un anneau extérieur qui la désigne. */
.sommaire__liste a:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
outline: 2px solid #ffffff;
outline-offset: 3px;
}
@media (max-width: 980px) {
.sommaire__liste {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 680px) {
.sommaire {
padding: 2rem 1.2rem 2.4rem;
}
/* Deux colonnes plutot que trois : les libelles longs
(« Debroussaillage - Remise en etat ») tiennent alors sans se
couper en trois lignes. */
.sommaire__liste {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.sommaire__liste a {
min-height: 56px;
padding: 9px 10px;
font-size: 0.8rem;
}
}
/* ============================================================ */
/* GALERIE TRONQUEE : LES 10 PREMIERES, PUIS « VOIR PLUS » */
/* ============================================================ */
/* Soixante-cinq photos dans une seule section, c'est 21 Mo et vingt
ecrans de defilement sur telephone. On n'en montre que dix.
`display: none` et non `visibility: hidden` : une ![]()
en
display:none n'est JAMAIS telechargee par le navigateur. C'est tout
l'interet de la manoeuvre — sans cela on masquerait les photos sans
rien gagner sur le temps de chargement.
La classe est posee par JavaScript : sans lui, toutes les photos
restent visibles plutot qu'inaccessibles. */
.realisations--tronquee .realisation:nth-child(n + 10) {
display: none;
}
/* Sur telephone la grille passe a 2 colonnes : 6 photos font trois
rangees pleines, comme les 9 en font trois sur ordinateur. */
@media (max-width: 680px) {
.realisations--tronquee .realisation:nth-child(n + 7) {
display: none;
}
}
/* Vert plein, comme le bouton telephone de la barre de menu.
En filet gris sur fond transparent, il se fondait dans la page : le
visiteur ne voyait pas qu'il restait 56 photos. C'est une commande,
pas une mention — elle doit s'annoncer comme telle. */
.galerie-plus {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 2.6rem auto 0;
height: 54px;
padding: 0 34px;
border: 0;
border-radius: 999px;
background: var(--pausity-green, #007c34);
color: #ffffff;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease;
}
/* La grille est en display: grid, le bouton lui est exterieur :
c'est cette regle qui le centre. */
.realisations + .galerie-plus {
display: flex;
width: fit-content;
}
.galerie-plus svg {
width: 17px;
height: 17px;
flex: none;
transition: transform 0.25s ease;
}
.galerie-plus[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.galerie-plus:hover,
.galerie-plus:focus-visible {
background: var(--pausity-green-deep, #04512a);
transform: translateY(-2px);
}
.galerie-plus:focus-visible {
outline: 2px solid var(--pausity-green-deep, #04512a);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.galerie-plus:hover,
.galerie-plus:focus-visible {
transform: none;
}
}
@media (max-width: 680px) {
.realisations + .galerie-plus {
width: 100%;
height: 52px;
padding: 0 18px;
font-size: 0.76rem;
letter-spacing: 0.08em;
}
}
/* A l'impression, tout est visible : un document papier ampute des trois
quarts de ses illustrations n'aurait pas de sens. */
@media print {
.realisations--tronquee .realisation:nth-child(n + 10) {
display: block;
}
.galerie-plus {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.galerie-plus {
transition: none;
}
}
/* ============================================================ */
/* NAVIGATION HAUT / BAS DE PAGE */
/* ============================================================ */
/* Sur une page de vingt metiers et des centaines de photos, revenir en
haut a la molette prend un temps deraisonnable.
Le bloc n'est monte que sur les pages reellement longues (plus de
trois hauteurs d'ecran), et il n'apparait qu'une fois le premier ecran
franchi : sur une page courte ou en haut de page, il n'existe pas. */
.nav-page {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 900;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-page.est-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Masque pendant que la visionneuse est ouverte : elle occupe l'ecran
entier, ces boutons n'auraient plus de sens par-dessus. */
body.visionneuse-ouverte .nav-page {
opacity: 0;
visibility: hidden;
}
.nav-page button {
display: flex;
align-items: center;
justify-content: center;
/* 46px : au-dessus des 44px recommandes pour une cible tactile. */
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
background: var(--pausity-green, #007c34);
color: #ffffff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(20, 24, 26, 0.22);
transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.nav-page button:hover {
background: var(--pausity-green-deep, #04512a);
transform: translateY(-2px);
}
.nav-page button:focus-visible {
outline: 2px solid var(--pausity-green-deep, #04512a);
outline-offset: 3px;
}
/* Bout de course : le bouton reste en place mais s'efface et cesse de
repondre — le faire disparaitre ferait sauter l'autre. */
.nav-page button[disabled] {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.nav-page svg {
width: 20px;
height: 20px;
}
@media (max-width: 680px) {
.nav-page {
right: 14px;
bottom: 14px;
gap: 6px;
}
.nav-page button {
width: 44px;
height: 44px;
}
}
@media print {
.nav-page {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-page,
.nav-page button {
transition: none;
}
.nav-page button:hover {
transform: none;
}
}
*/
.realisation__media {
position: relative;
aspect-ratio: 4 / 3;
/* Gris TRANSLUCIDE, et non le crème : l'emplacement doit se détacher
aussi bien d'une section blanche que d'une section crème. Une
couleur opaque identique à l'un des deux fonds rendrait la tuile
invisible dès qu'on déplace la galerie — le cas s'est produit. */
background: rgba(20, 24, 26, 0.045);
border: 1px solid var(--page-hairline);
overflow: hidden;
}
.realisation__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Pictogramme discret affiché seulement si le bloc est encore vide */
.realisation__media:empty::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
border: 1px solid rgba(20, 24, 26, 0.16);
border-radius: 50%;
}
.realisation figcaption {
margin-top: 1rem;
}
.realisation__titre {
display: block;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.2rem;
color: var(--page-ink);
}
.realisation__detail {
display: block;
margin-top: 0.35rem;
color: var(--page-text);
font-size: 0.95rem;
line-height: 1.6;
}
/* Renvoi vers la page de la prestation ou de la matière concernée */
.realisation__detail a {
color: var(--pausity-green-deep, #04512a);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0, 124, 52, 0.4);
transition: border-color 0.2s ease;
}
.realisation__detail a:hover,
.realisation__detail a:focus-visible {
border-bottom-color: var(--pausity-green, #007c34);
}
/* ================================================== */
/* APPEL À L'ACTION */
/* ================================================== */
/* Aplat vert profond, volontairement distinct de TOUT ce qui l'entoure.
Jouer sur deux teintes seulement (blanc et crème) ne suffit pas : le
bloc d'appel est coincé entre une section et le pied de page, et quelle
que soit la teinte choisie il finit par toucher un voisin identique.
Une troisième valeur, franchement plus sombre, règle le problème une
fois pour toutes — et place le devis là où le regard doit finir. */
.page-cta {
background: var(--pausity-green-deep, #04512a);
padding: 5rem 2rem;
text-align: center;
}
.page-cta h2 {
margin: 0 0 1rem;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 400;
color: #ffffff; /* 9,4:1 sur ce fond */
}
.page-cta p {
max-width: 560px;
margin: 0 auto 2.4rem;
color: rgba(255, 255, 255, 0.82);
font-size: 1.02rem;
line-height: 1.7;
}
/* Bouton inversé : blanc sur le vert, pour rester l'élément le plus
clair de la bande et donc le premier point d'accroche. */
.page-cta__bouton {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 30px;
background: #ffffff;
color: var(--pausity-green-deep, #04512a);
border-radius: 999px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: background 0.25s ease, transform 0.25s ease;
}
.page-cta__bouton:hover,
.page-cta__bouton:focus-visible {
background: var(--page-cream);
transform: translateY(-2px);
}
.page-cta__bouton:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* ================================================== */
/* RESPONSIVE */
/* ================================================== */
@media (max-width: 980px) {
.prestations,
.realisations {
grid-template-columns: repeat(2, 1fr);
}
.demarche {
grid-template-columns: 1fr;
gap: 2.4rem;
max-width: 560px;
margin: 0 auto;
}
}
@media (max-width: 680px) {
.page-hero {
padding: 2.25rem 1.2rem 2rem;
}
/* Interligne resserre : le chapo occupe 8 a 9 lignes sur un
telephone, c est lui qui fait la hauteur du bandeau. */
.page-intro {
line-height: 1.65;
}
.page-section {
padding: 3.5rem 1.2rem;
}
/* Les cartes de prestation contiennent du texte : elles ont besoin de
toute la largeur. */
.prestations {
grid-template-columns: 1fr;
max-width: 520px;
margin: 0 auto;
}
/* Les photos, elles, restent sur DEUX colonnes. En une seule, la page
Réalisations mesurait 16 780px, soit 21 écrans de téléphone. À deux,
les vignettes font encore 170px de large en 4/3 — largement lisibles —
et la page tombe sous les 13 écrans. */
.realisations {
grid-template-columns: repeat(2, 1fr);
gap: 0.9rem;
}
.realisation figcaption {
margin-top: 0.7rem;
}
.realisation__titre {
font-size: 0.95rem;
}
.realisation__detail {
font-size: 0.82rem;
line-height: 1.45;
}
.prestation {
padding: 2rem 1.6rem;
}
.page-cta {
padding: 3.5rem 1.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.prestation,
.page-cta__bouton {
transition: none;
}
.prestation:hover,
.page-cta__bouton:hover {
transform: none;
}
}
/* ============================================================ */
/* VISIONNEUSE (clic sur une photo pour l'agrandir) */
/* ============================================================ */
/* Le curseur annonce que la photo est cliquable. */
.realisation__media img {
cursor: zoom-in;
}
.visionneuse {
position: fixed;
inset: 0;
/* La barre de menu est a 9999 (menu.css) : a 1000, elle passait
par-dessus la visionneuse. La photo disparaissait sous le menu et
le bouton Fermer, place a 20px du haut, etait cache derriere. */
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(12, 16, 14, 0.92);
/* Anime l'ouverture sans decaler la mise en page. */
opacity: 0;
transition: opacity 0.22s ease;
}
.visionneuse[hidden] {
display: none;
}
.visionneuse.est-ouverte {
opacity: 1;
}
.visionneuse__cadre {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 100%;
max-height: 100%;
}
/* Photo entiere, jamais recadree : c'est tout l'interet par rapport a la
vignette, qui est en object-fit: cover et coupe pres de la moitie d'une
photo verticale.
HAUTEUR FIXE, largeur libre : en `max-height` seul, une verticale de
900x1200 s'affichait bien plus grande qu'une horizontale de 1200x900 —
deux photos de la meme galerie n'avaient pas du tout la meme presence.
A hauteur commune, portrait et paysage se valent. */
.visionneuse__image {
display: block;
height: min(72vh, 760px);
width: auto;
max-width: 92vw;
object-fit: contain;
border-radius: 2px;
}
.visionneuse__legende {
margin: 0;
max-width: 700px;
text-align: center;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
.visionneuse__compteur {
display: block;
margin-top: 6px;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
/* --- Boutons --- */
/* Base commune : uniquement ce qui est vraiment commun.
Ni dimensions ni marges interieures ici — `.visionneuse button` (une
classe + un type) l'emporte en specificite sur `.visionneuse__fermer`
(une classe) et ecraserait ses valeurs. Chaque bouton porte les siennes. */
.visionneuse button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background: transparent;
color: #fff;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.visionneuse button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* --- Sortie ---------------------------------------------------------
Sous la photo, dans le flux, et non plus en pastille au coin haut
droit : la barre de menu passait devant, et un rond flottant sur une
image lisait mal. Ici il est la ou l'oeil finit sa lecture, apres la
legende. Trait fin, capitales espacees : le vocabulaire du reste du
site plutot qu'un bouton d'interface. */
.visionneuse__fermer {
margin-top: 10px;
/* Le cadre serrait le texte. Un libelle en capitales tres espacees a
besoin d'air : sinon le trait se lit comme une bordure de champ de
formulaire, pas comme un bouton. */
height: 48px;
padding: 0 30px;
gap: 13px;
border-radius: 1px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.visionneuse__fermer:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
.visionneuse__fermer svg {
width: 13px;
height: 13px;
}
/* `letter-spacing` ajoute son espace apres la DERNIERE lettre aussi : sans
cette compensation, le libelle parait colle a gauche dans son cadre. */
.visionneuse__fermer span {
margin-right: -0.22em;
}
/* --- Fleches --------------------------------------------------------
Elles, restent flottantes de part et d'autre de la photo : leur fond
est opaque car elles peuvent se poser sur une image claire. */
.visionneuse__prec,
.visionneuse__suiv {
position: absolute;
width: 48px;
height: 48px;
padding: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(10, 14, 12, 0.72);
}
.visionneuse__prec:hover,
.visionneuse__suiv:hover {
background: rgba(10, 14, 12, 0.9);
border-color: #fff;
}
.visionneuse__prec { left: 20px; }
.visionneuse__suiv { right: 20px; }
.visionneuse__prec svg,
.visionneuse__suiv svg {
width: 22px;
height: 22px;
}
.visionneuse button svg {
pointer-events: none;
}
/* Une seule photo : pas de fleches. */
.visionneuse.est-seule .visionneuse__prec,
.visionneuse.est-seule .visionneuse__suiv {
display: none;
}
/* Marqueur seulement : le blocage du defilement se fait en JavaScript
(voir verrouillerPage dans app.js). `overflow: hidden` pose ici n'avait
aucun effet, car sur ce site c'est qui defile, pas . */
@media (max-width: 700px) {
/* Bande basse reservee aux fleches : sur telephone la photo occupe
presque toute la largeur, et des fleches centrees verticalement se
posaient dessus en masquant une partie de l'image. */
.visionneuse { padding: 24px 12px 84px; }
/* Sur telephone, retour a une image inscrite (max-height + max-width) :
avec une hauteur fixe, une photo horizontale voyait sa largeur bridee
a 94vw sans que la boite ne se retracte, laissant une bande vide en
haut et en bas. Ici c'est la largeur qui manque, pas la hauteur. */
.visionneuse__image {
height: auto;
max-height: min(58vh, 520px);
max-width: 94vw;
}
.visionneuse__fermer {
height: 38px;
padding: 0 16px;
font-size: 0.66rem;
}
.visionneuse__prec,
.visionneuse__suiv {
width: 42px;
height: 42px;
top: auto;
bottom: 18px;
transform: none;
}
.visionneuse__prec { left: 18px; }
.visionneuse__suiv { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.visionneuse { transition: none; }
}
/* ============================================================ */
/* ANCRES DE SECTION */
/* ============================================================ */
/* La barre de menu est en `position: fixed` : 89px sur grand ecran,
67px sur telephone. Sans cette reserve, un lien vers #creation amene
le titre de section exactement DERRIERE la barre — la page a bien
defile, mais on ne voit pas ou l'on est arrive. */
:root {
--ancre-reserve: 106px;
}
@media (max-width: 600px) {
:root {
--ancre-reserve: 84px;
}
}
main [id] {
scroll-margin-top: var(--ancre-reserve);
}
/* La page glisse jusqu'a la section au lieu d'y sauter : on garde le fil
de ce qu'on vient de traverser. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ============================================================ */
/* SOMMAIRE DES METIERS (page Realisations) */
/* ============================================================ */
/* Seize metiers empiles font 13 ecrans de telephone. Sans point
d'entree, le visiteur doit tout parcourir pour trouver le sien.
Le sommaire lui donne la liste d'emblee : il choisit, il y va. */
/* Vert profond, texte clair. Le sommaire n'est pas un contenu de plus a
faire defiler : c'est l'outil qui rend la page utilisable avec vingt
metiers. Il doit s'annoncer comme tel.
C'est aussi la couleur de l'appel a l'action en bas de page : les deux
encadrent la liste des chantiers, debut et fin. */
.sommaire {
padding: 3rem 2rem 3.4rem;
background: var(--pausity-green-deep, #04512a);
}
.sommaire__inner {
max-width: 1240px;
margin: 0 auto;
}
.sommaire__titre {
margin: 0 0 1.5rem;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
/* Blanc attenue : le titre annonce, il ne doit pas rivaliser avec les
vingt liens qu'il coiffe. 9,5:1 de contraste, tres au-dessus du seuil. */
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
.sommaire__liste {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* La case doit s'étirer sur toute la hauteur de sa rangée. En `display:
block`, un libellé sur une ligne restait à 43px à côté d'un libellé
sur deux lignes à 61px : la grille paraissait bancale. */
.sommaire__liste li {
display: flex;
}
.sommaire__liste a {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
/* `border-box` indispensable : le site n'a pas de règle globale, donc
`min-height` porterait sur le seul contenu et les 20px de marge
intérieure viendraient s'y ajouter — les cases faisaient 82px au
lieu de 56. */
box-sizing: border-box;
/* Hauteur plancher : une case d'une ligne et une case de deux lignes
ne diffèrent alors plus que de quelques pixels, la grille se lit
comme un ensemble régulier. */
min-height: 54px;
padding: 10px 14px;
text-align: center;
/* Un voile de blanc a peine perceptible, et un filet clair : la case
existe sans decouper la bande. Le survol l'eclaircit franchement,
elle remonte alors sous le doigt. */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 2px;
color: #ffffff;
font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
font-size: 0.85rem;
line-height: 1.35;
text-decoration: none;
text-wrap: balance;
/* Le vert n'apparaît qu'au survol : seize bordures vertes d'emblée le
banaliseraient. */
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Inversion franche : fond blanc, texte vert profond.
L'état précédent gardait un fond sombre et ne faisait que passer le
filet de blanc-28 % à blanc pur. Ce trait fin très contrasté se lisait
comme un champ de formulaire sélectionné, pas comme un lien survolé —
et le changement était trop ténu pour dire clairement « c'est celui-ci ».
Ici la case s'allume : le rapport s'inverse d'un coup, sans ambiguïté,
et le vert profond sur blanc reste à 9,5:1. */
.sommaire__liste a:hover {
background: #ffffff;
border-color: #ffffff;
color: var(--pausity-green-deep, #04512a);
}
/* Le focus clavier ne doit pas se confondre avec le survol : la case
reste sur le fond vert et c'est un anneau extérieur qui la désigne. */
.sommaire__liste a:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
outline: 2px solid #ffffff;
outline-offset: 3px;
}
@media (max-width: 980px) {
.sommaire__liste {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 680px) {
.sommaire {
padding: 2rem 1.2rem 2.4rem;
}
/* Deux colonnes plutot que trois : les libelles longs
(« Debroussaillage - Remise en etat ») tiennent alors sans se
couper en trois lignes. */
.sommaire__liste {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.sommaire__liste a {
min-height: 56px;
padding: 9px 10px;
font-size: 0.8rem;
}
}
/* ============================================================ */
/* GALERIE TRONQUEE : LES 10 PREMIERES, PUIS « VOIR PLUS » */
/* ============================================================ */
/* Soixante-cinq photos dans une seule section, c'est 21 Mo et vingt
ecrans de defilement sur telephone. On n'en montre que dix.
`display: none` et non `visibility: hidden` : une