/* Reinicio mínimo: sin él, el margen por defecto del body dibuja
un marco blanco alrededor de toda la página. */
html{scroll-behavior:smooth}
body{margin:0;background:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ============================================================
LE SITE — fond blanc, comme aujourd'hui. Ce qui change d'une
option à l'autre, c'est l'accent et le traitement, pas le fond.
Tout sort du logo : bleu #273282 · vert #1FA046 · croix #FE0000
============================================================ */
#sitio{
/* A · Confiance — le bleu de la maison, le vert pour agir */
--bleu:#273282; --bleu-clair:#3552B8; --bleu-pale:#EEF1FA;
--vert:#1B8F3E; --vert-pale:#EAF5EE;
--rouge:#E30613;
--papier:#FFFFFF; --papier2:#F5F7FB; --papier3:#EBEFF6;
--encre:#131A2B; --encre2:#414D63; --encre3:#6E7A90;
--trait:#DEE4EE;
--action:var(--vert); --action-txt:#FFFFFF;
--accent2:var(--bleu);
--final-fond:#273282; --final-txt:#FFFFFF; --final-doux:rgba(255,255,255,.84); --final-mono:rgba(255,255,255,.72);
--voile:linear-gradient(96deg,rgba(12,18,38,.90) 4%,rgba(12,18,38,.72) 42%,rgba(12,18,38,.20) 80%);
/* Le logo ne change jamais de couleur, quelle que soit la palette. */
--marca-azul:#273282; --marca-verde:#1FA046; --marca-rojo:#E30613;
/* El verde de marca aclarado, para lo que va sobre foto.
Christopher: «no parece que sea el mismo verde». Tenía razón, y era
medible: el anterior (#41D277) estaba en el TONO 145°, y tanto el verde
del logotipo (#1FA046) como el de los botones (#1B8F3E) están en el 138°.
Siete grados bastan para que el ojo los lea como dos verdes distintos.
Éste conserva el tono 138 y la saturación, y sólo sube la luz — es el
mismo verde, encendido. */
--verde-claro:#33D764;
--muelle:cubic-bezier(.16,1,.3,1);
font-family:"IBM Plex Sans",-apple-system,sans-serif;
color:var(--encre); background:var(--papier);
}
#sitio[data-paleta="broye"]{
/* B · Broye — le même bleu, plus l'ambre du carton */
--bleu:#233069; --bleu-clair:#3A4E9E; --bleu-pale:#EFF1F8;
--vert:#3E7A4E; --vert-pale:#EDF3EE;
--rouge:#C4392C;
--papier:#FFFFFF; --papier2:#F8F5F0; --papier3:#EFE8DC;
--encre:#1B1811; --encre2:#48413A; --encre3:#7A7266;
--trait:#E3DCCF;
--action:#C07A28; --action-txt:#FFFFFF;
--accent2:var(--bleu);
--final-fond:#233069; --final-txt:#FFFFFF; --final-doux:rgba(255,255,255,.84); --final-mono:rgba(255,255,255,.72);
--voile:linear-gradient(96deg,rgba(24,19,12,.90) 4%,rgba(24,19,12,.70) 42%,rgba(24,19,12,.16) 80%);
}
#sitio[data-paleta="suisse"]{
/* C · Suisse — noir, blanc, et la croix rouge comme seul éclat */
--bleu:#14161A; --bleu-clair:#3A4048; --bleu-pale:#F1F2F3;
--vert:#0F7A38; --vert-pale:#EDF4EF;
--rouge:#DA291C;
--papier:#FFFFFF; --papier2:#F4F4F3; --papier3:#E7E7E5;
--encre:#0B0C0D; --encre2:#33373B; --encre3:#6A6E73;
--trait:#DCDCDA;
--action:#DA291C; --action-txt:#FFFFFF;
--accent2:#0B0C0D;
--final-fond:#F4F4F3; --final-txt:#0B0C0D; --final-doux:#33373B; --final-mono:#6A6E73;
--voile:linear-gradient(96deg,rgba(8,9,10,.90) 4%,rgba(8,9,10,.70) 42%,rgba(8,9,10,.16) 80%);
}
#sitio{margin:0}
#sitio *{box-sizing:border-box}
:where(#sitio) :where(h1,h2,h3,h4,p,ul,figure,blockquote){margin:0}
#sitio img{max-width:100%;display:block}
/* :where() anula la especificidad del ID: sin él, este selector le ganaba a
.menu a, .pastilla y .cta, y todos los enlaces heredaban tinta oscura. */
:where(#sitio) a{color:inherit}
.env{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,46px)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{
font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
color:var(--encre3); display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--action);flex:0 0 auto}
h2.tit{
font-family:"Familjen Grotesk",sans-serif; font-weight:700;
font-size:clamp(27px,3.5vw,41px); line-height:1.07; letter-spacing:-.022em;
margin:0 0 14px; text-wrap:balance; color:var(--encre);
}
.sous{font-size:16px;line-height:1.65;color:var(--encre2);max-width:62ch;margin:0}
.sec{padding-block:clamp(56px,7.5vw,96px)}
.sec.gris{background:var(--papier2);border-block:1px solid var(--trait)}
/* ============================================================
EN-TÊTE — même grammaire que studiobroye.ch et mesarbarbershop.ch :
trois pastilles de même hauteur à droite (langue, téléphone, devis),
et le logo TOUJOURS en couleur. Sur la photo il repose sur une plaque
claire à peine visible, qui s'efface dès que l'en-tête devient plein.
============================================================ */
/* ── EL CRUCE DE LA CABECERA ──────────────────────────────────────────────
El 26-08-2026 se grabó el fallo y se midió fotograma a fotograma: al volver
arriba, **el menú desaparecía durante un tercio de segundo**. No era una
animación fallida, era una carrera perdida:
· el fondo blanco se iba en .55 s
· el texto se volvía blanco en .30 s
Con el texto ya blanco y el fondo todavía blanco al 60 %, la cabecera se
quedaba literalmente en blanco sobre blanco. Lo mismo al revés, bajando:
texto oscuro sobre foto oscura antes de que llegara el fondo claro.
La solución no es igualar los tiempos —el punto medio seguiría teniendo
poco contraste— sino **ordenarlos**, y para eso se aprovecha que la
transición que manda es la del estado de DESTINO:
.entete → es el destino al SUBIR → fondo fuera deprisa, texto despacio
.entete.pleine → es el destino al BAJAR → fondo dentro deprisa, texto despacio
Así el fondo llega o se va SIEMPRE antes que el color del texto, y en ningún
instante coinciden los dos claros ni los dos oscuros. Y mientras la cabecera
es transparente, la sombra del texto se queda puesta: es la que garantiza la
lectura sobre cualquier foto.
──────────────────────────────────────────────────────────────────────── */
.entete{
position:sticky; top:0; z-index:50; background:transparent;
--t-fondo:.20s; --t-tinta:.46s;
transition:background var(--t-fondo) ease, box-shadow var(--t-fondo) ease;
--pastilla-borde:rgba(255,255,255,.38); --pastilla-txt:#fff; --pastilla-lab:rgba(255,255,255,.72);
--pastilla-fondo:rgba(255,255,255,.08);
}
.entete.pleine{
background:rgba(255,255,255,.985);
box-shadow:0 1px 20px rgba(15,22,40,.07);
--t-fondo:.24s; --t-tinta:.46s;
--pastilla-borde:var(--trait); --pastilla-txt:var(--encre); --pastilla-lab:var(--encre3);
--pastilla-fondo:transparent;
}
/* La couture verte : c'est elle qui dit « la page a bougé ». Le vert est la
seule couleur de la palette qui ne sert de fond nulle part, donc elle se
détache sur le blanc de l'en-tête comme sur ce qui passe dessous.
Elle ne touche PAS les bords de l'écran : elle s'arrête où s'arrête le
contenu, et elle s'ouvre depuis le centre quand l'en-tête devient plein —
un trait qui va d'un bord à l'autre de la fenêtre ressemble à une bordure
de navigateur, pas à une décision de mise en page. */
/* La costura no es una raya: es un huso. Un rectángulo de 4 px recortado en
elipse queda grueso en el centro y se afila hacia los dos extremos, y una
máscara le apaga las puntas para que no aparezca de golpe. Es la costura de
mesarbarbershop.ch, y sirve igual bajo la cabecera que entre secciones. */
.costura,.entete::after{
background:var(--action);
clip-path:ellipse(50% 50% at 50% 50%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
}
.entete::after{
content:"";position:absolute;bottom:0;
left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);height:4px;
opacity:0;transform:scaleX(.35);transform-origin:50% 50%;
transition:opacity .45s ease, transform .6s var(--muelle);
}
.entete.pleine::after{opacity:1;transform:scaleX(1)}
.entete .env{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:92px;transition:height .5s var(--muelle);
max-width:none;padding:0 clamp(18px,3vw,44px)}
.entete.pleine .env{height:76px}
/* --- le logo, en couleur, sur sa plaque --- */
.logo{
flex:0 0 auto;display:flex;align-items:center;text-decoration:none;
transition:transform .45s var(--muelle), filter .55s ease;
/* Sur la photo, pas de plaque : un halo clair très doux détoure les
couleurs du logo sans dessiner de boîte. Il disparaît dès que
l'en-tête devient plein. */
/* Tres sombras apiladas, no una. Con una sola de 8 px el azul del logotipo
se perdía sobre las fotos oscuras del héroe —comprobado en el vídeo del
26-08: la línea «Déménagement · Nettoyage · Débarras» no se leía—. Apilar
un halo corto y opaco con otros dos más abiertos recorta el dibujo sin
dibujarle una caja alrededor, y sin tocarle un solo color. */
filter:drop-shadow(0 0 2px rgba(255,255,255,.95))
drop-shadow(0 1px 7px rgba(255,255,255,.85))
drop-shadow(0 2px 18px rgba(255,255,255,.55));
/* El halo también al ritmo del fondo: es lo que sostiene el logotipo
mientras la cabecera se vacía. */
transition:transform .45s var(--muelle), filter var(--t-fondo) ease;
}
.entete.pleine .logo{
filter:drop-shadow(0 0 0 rgba(255,255,255,0))
drop-shadow(0 0 0 rgba(255,255,255,0))
drop-shadow(0 0 0 rgba(255,255,255,0));
}
.logo svg{height:64px;width:auto;transition:height .5s var(--muelle)}
.entete.pleine .logo svg{height:56px}
/* Le toit se soulève un peu, la croix respire. Trois degrés, pas trente :
c'est une marque peinte sur un camion, elle doit rester droite. */
.logo .toit{transform-origin:22% 60%;transition:transform .5s var(--muelle)}
.logo .croix{transform-origin:214px 150px;transition:transform .5s var(--muelle)}
.logo:hover,.logo:focus-visible{transform:translateY(-1px)}
.logo:hover .toit,.logo:focus-visible .toit{transform:translateY(-6px) rotate(-2.5deg)}
.logo:hover .croix,.logo:focus-visible .croix{transform:scale(1.16)}
.logo:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.menu{display:flex;gap:clamp(11px,1.6vw,24px);margin-left:auto;list-style:none;padding:0;margin-block:0}
/* Le menu : capitales espacées, comme sur mesarbarbershop.ch. L'espacement
fait presque tout le travail — c'est lui qui sépare une navigation soignée
d'une liste de liens. Le trait ne se contente pas d'apparaître : il s'ouvre
depuis le centre du mot. */
.menu a{
position:relative;
/* Jost en peso 500 y a 13,5 px sale gruesa en mayúsculas: las mayúsculas ya
pesan de por sí, y el peso medio las convierte en un bloque. Baja a 400,
pierde medio punto de cuerpo y gana aire entre letras. Lo que se pierde en
grosor se recupera en separación: se lee mejor y parece más caro. */
font-family:"Jost","IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:400;
letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
text-decoration:none;padding:9px 0 11px;white-space:nowrap;
/* Color LITERAL, no `var(--pastilla-txt)`. Una propiedad personalizada no se
interpola: al cambiar de estado, el color saltaba de golpe a blanco
mientras el fondo todavía era blanco. Con un color fijo en cada estado, la
transición es una interpolación de color normal y corriente. */
color:#fff;
/* Y la sombra va al MISMO ritmo que el fondo, no al del texto. Es ella la
que garantiza la lectura durante el cruce: un halo oscuro alrededor de una
letra blanca se lee incluso sobre blanco. Si llega tarde, hay un instante
en blanco — que es exactamente el fallo del vídeo del 26-08. */
text-shadow:0 1px 2px rgba(6,10,20,.85), 0 2px 14px rgba(6,10,20,.6);
transition:color var(--t-tinta) ease, text-shadow var(--t-fondo) ease;
}
.menu a::after{
content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1.5px;
background:var(--action);
transition:left .34s var(--muelle), right .34s var(--muelle);
}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current]::after{left:0;right:0}
/* Dos sombras a cero, no una: para interpolar, las dos listas tienen que
tener el mismo número de sombras. Con una sola, el navegador no anima y
vuelve a saltar. */
.entete.pleine .menu a{
text-shadow:0 0 0 rgba(6,10,20,0), 0 0 0 rgba(6,10,20,0);
color:var(--encre2);
}
.entete.pleine .menu a:hover{color:var(--bleu)}
.entete.pleine .menu a[aria-current]{color:var(--bleu)}
.submenu a::after{content:none}
/* --- le sous-menu « Services », comme sur son site actuel --- */
.menu-desp{position:relative}
.menu-desp > a{padding-right:16px}
.menu-desp__flecha{position:absolute;right:0;top:9px;width:12px;height:12px;padding:0;border:0;
background:none;cursor:pointer;color:inherit;display:grid;place-items:center}
.menu-desp__flecha svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--muelle)}
.menu-desp.abierto .menu-desp__flecha svg{transform:rotate(180deg)}
.submenu{
position:absolute;top:calc(100% + 10px);left:-14px;min-width:250px;z-index:60;
list-style:none;margin:0;padding:8px 0;border-radius:4px;
background:#fff;border:1px solid var(--trait);box-shadow:0 18px 44px rgba(15,22,40,.16);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .25s ease,transform .25s var(--muelle),visibility 0s linear .25s;
}
.menu-desp:hover .submenu,.menu-desp:focus-within .submenu,.menu-desp.abierto .submenu{
opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.submenu a{
display:block;padding:11px 18px;border:0;white-space:nowrap;text-shadow:none;
font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:500;letter-spacing:0;
text-transform:none;color:var(--encre2);transition:background .2s,color .2s}
.submenu a:hover{background:var(--papier2);color:var(--bleu)}
.submenu a[aria-current="page"]{color:var(--bleu);background:var(--bleu-pale)}
/* --- les trois pastilles de droite --- */
.actions{display:flex;align-items:stretch;gap:9px;flex:0 0 auto;margin-left:clamp(10px,2vw,26px)}
.pastilla{
display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:3px;
border:1px solid var(--pastilla-borde);background:var(--pastilla-fondo);color:var(--pastilla-txt);
font:400 12px/1 "Jost","IBM Plex Sans",sans-serif;letter-spacing:.04em;
text-decoration:none;cursor:pointer;white-space:nowrap;
transition:border-color var(--t-tinta,.35s) ease, background var(--t-tinta,.35s) ease, color var(--t-tinta,.35s) ease;
}
.pastilla:hover{border-color:var(--pastilla-txt);background:rgba(255,255,255,.16)}
.entete.pleine .pastilla:hover{background:var(--papier2);border-color:var(--bleu);color:var(--bleu)}
.pastilla:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.pastilla svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
/* langue : un seul bouton qui déplie les langues écrites dans leur langue */
.lang{position:relative}
.lang__actual{font-family:"Jost",sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.1em}
.lang__chevron{width:12px;height:12px;transition:transform .3s var(--muelle)}
.pastilla[aria-expanded="true"] .lang__chevron{transform:rotate(180deg)}
.lang__menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:186px;margin:0;padding:5px;
list-style:none;background:#fff;border:1px solid var(--trait);border-radius:4px;
box-shadow:0 14px 40px rgba(15,22,40,.16);
}
.lang__menu[hidden]{display:none}
.lang__opcion{
display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
background:none;border:0;border-radius:3px;padding:10px 12px;cursor:pointer;
font:400 14px/1 "IBM Plex Sans",sans-serif;color:var(--encre2);text-align:left;
transition:background .16s,color .16s;
}
.lang__opcion:hover,.lang__opcion:focus-visible{background:var(--papier2);color:var(--encre);outline:none}
.lang__opcion span{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--encre3)}
.lang__opcion[aria-selected="true"]{color:var(--encre);font-weight:600}
.lang__opcion[aria-selected="true"] span{color:var(--action)}
/* téléphone : icône + numéro, rien d'autre */
.tel__num{font-weight:400;font-size:12.5px;letter-spacing:.04em}
/* devis : la seule pastille pleine */
.pastilla.plena{background:var(--action);border-color:var(--action);color:var(--action-txt);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:0 16px}
.pastilla.plena:hover{filter:brightness(.93);background:var(--action);border-color:var(--action);color:var(--action-txt)}
/* ============================================================
Préchargeur — la marque entre, puis s'efface. Fond blanc et les
couleurs du logo, comme sur le camion.
============================================================ */
.precarga{
position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;gap:20px;
background:var(--papier);
}
.precarga svg{width:min(46vw,240px);height:auto;animation:pre-marca .9s var(--muelle) both}
.precarga .pre-mot{
font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.62em;text-transform:uppercase;
color:var(--encre3);padding-left:.62em;animation:pre-mot 1.1s .12s ease both;
}
.precarga .pre-filete{width:0;height:2px;background:var(--action);animation:pre-filete 1.5s .3s var(--muelle) both}
@keyframes pre-marca{from{opacity:0;transform:scale(.86) translateY(6px)}to{opacity:1;transform:none}}
@keyframes pre-mot{from{opacity:0;letter-spacing:1.05em}to{opacity:1;letter-spacing:.62em}}
@keyframes pre-filete{from{width:0}to{width:120px}}
/* Le fondu et le passage à display:none sont pilotés depuis le même
gestionnaire JS (transitionend), pas par deux délais CSS séparés qui
pouvaient se désynchroniser et laisser un voile blanc, à z-index 300 —
au-dessus de tout, y compris l'en-tête — visible plus longtemps que prévu. */
#sitio.cargado .precarga{opacity:0;pointer-events:none;transition:opacity .45s ease}
/* barre de lecture, tout en haut */
.progreso{display:none}
/* .progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none} */
.progreso i{display:block;height:100%;width:100%;background:var(--action);
transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}
/* révélations au défilement — rien n'apparaît d'un bloc */
/* 0,45 s en vez de 0,85: cuanto menos tiempo pasa un texto a media opacidad,
menos se nota el cambio de suavizado de macOS — que es lo que se veía como
«ruido» al desplazar. */
#sitio.js [data-rev]{opacity:0;transform:translateY(14px);
transition:opacity .45s ease,transform .45s var(--muelle)}
#sitio.js [data-rev].visible{opacity:1;transform:none}
#sitio.js [data-rev-d="1"]{transition-delay:.08s}
#sitio.js [data-rev-d="2"]{transition-delay:.16s}
#sitio.js [data-rev-d="3"]{transition-delay:.24s}
#sitio.js [data-rev-d="4"]{transition-delay:.32s}
#sitio.js [data-rev-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
.precarga svg,.precarga .pre-mot,.precarga .pre-filete{animation:none}
#sitio.js [data-rev]{transition-duration:.4s;transform:none}
}
/* ============================================================
La couture entre les sections — même geste que mesarbarbershop.ch :
un filet d'un pixel en haut de chaque section, qui s'évanouit aux
deux bouts. Sur fond sombre, il passe au clair.
============================================================ */
#sitio section{position:relative}
#sitio section + section::before,
#sitio .pied::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;pointer-events:none;
background:linear-gradient(90deg,transparent 0%,rgba(39,50,130,.30) 16%,rgba(39,50,130,.30) 84%,transparent 100%);
}
#sitio section.final::before{
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.26) 16%,rgba(255,255,255,.26) 84%,transparent 100%);
}
#sitio .pied{position:relative}
/* --- boutons génériques --- */
/* Le bouton plein porte un reflet : une bande claire, inclinée, qui traverse
le bouton quand la souris arrive. C'est le geste de mesarbarbershop.ch, et
il tient dans un pseudo-élément — aucune image, aucune bibliothèque. */
.cta{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:var(--action);color:var(--action-txt);
font-weight:600;font-size:14px;padding:13px 22px;border-radius:3px;
text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
transition:background .35s ease, color .35s ease, border-color .35s ease,
transform .35s var(--muelle), box-shadow .35s ease;
}
.cta::after{
content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
transform:skewX(-20deg);pointer-events:none;
transition:left .7s var(--muelle);
}
/* Al pasar por encima sólo cruza el reflejo. Ni el fondo ni el color del texto
se mueven: es lo que hace que el gesto se note sin que el botón «parpadee».
Un solo píxel de elevación, para que responda al dedo sin saltar. */
.cta:hover,.cta:focus-visible{transform:translateY(-1px)}
.cta:hover::after,.cta:focus-visible::after{left:125%}
.cta:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
/* Le second bouton n'est pas un bouton blanc : c'est un contour. Sur la photo
du héros, un rectangle blanc plein fait deux blocs qui se disputent l'œil ;
un contour laisse passer la photo et hiérarchise — un seul bouton plein par
écran, celui qui compte. */
.cta.blanc{
background:transparent;color:#fff;border-color:rgba(255,255,255,.62);
box-shadow:none;
}
.cta.blanc:hover,.cta.blanc:focus-visible{background:#fff;color:var(--encre);border-color:#fff}
.cta.blanc::after{background:linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent)}
/* El contorno gris claro no se veía sobre el blanco: sólo se leía el texto.
Ahora lleva el azul de la marca, y al pasar por encima se rellena de ese
mismo azul con el texto en blanco — el color al revés. */
.cta.fantome{background:transparent;color:var(--bleu);border-color:var(--bleu)}
.cta.fantome:hover,.cta.fantome:focus-visible{background:var(--bleu);color:#fff}
.cta.fantome::after{background:linear-gradient(105deg, transparent, rgba(39,50,130,.18), transparent)}
.cta.bleu{background:var(--bleu);color:#fff}
.cta.bleu{--reflejo:rgba(255,255,255,.42)}
/* ============================================================
HÉROS — quatre photos qui se succèdent, le nom au centre.
Le zoom ne dépend d'aucune fonction récente du navigateur : il est
calculé en JavaScript et marche partout.
============================================================ */
/* `--solapa` : ce que le héros remonte sous l'en-tête. Le chiffre était écrit
deux fois en dur (92 px) et il faut le soustraire une troisième fois plus bas,
pour calculer la hauteur. Trois copies du même nombre, c'est celle qu'on
oublie qui laisse la bande blanche. En mobile il passe à 0 — voir la
requête `max-width:900px`. */
.heros{--solapa:92px;
position:relative;overflow:hidden;background:var(--encre);
margin-top:calc(-1 * var(--solapa));padding-top:var(--solapa)}
/* Le conteneur des photos porte le zoom au défilement — piloté par JS, sans
transition, comme le .hero__bg de mesarbarbershop.ch. Le voile n'est plus
son pseudo-élément mais celui de .heros : sinon il grandirait avec l'image
et laisserait un liseré aux bords. */
/* El contenedor se dibuja un 22 % más grande —lo que llega a crecer— y el
guion sólo lo REDUCE: `scale` nunca pasa de 1. Ampliar un mapa de bits ya
rasterizado es lo que emborronaba la página al desplazarse. */
.heros-img{--zmax:1.22;
position:absolute;inset:calc((100% - 100% * var(--zmax)) / 2);overflow:hidden;background:var(--encre);
transform-origin:50% 50%}
/* La capa se dibuja al 113 % —lo que llega a crecer la foto— y la foto la
rellena entera. El zoom sólo reduce. */
.heros-img .capa{
--zmax:1.13;
position:absolute;inset:calc((100% - 100% * var(--zmax)) / 2);opacity:0;z-index:1;
/* la que sale: espera 1,9 s —tapada ya por la nueva— y entonces se apaga */
transition:opacity 1.2s ease 1.9s;
}
.heros-img .capa.activa{
opacity:1;z-index:2;
/* la que entra: encima, y sube sin esperar a nadie */
transition:opacity 1.9s cubic-bezier(.33,0,.2,1) 0s;
}
.heros-img .capa img{
width:100%;height:100%;object-fit:cover;object-position:50% 55%;
transform:scale(calc(var(--zoom-base,1.04) / var(--zmax)));
transform-origin:50% 50%;
transition:transform 1.5s cubic-bezier(.4,0,.2,1);
}
/* le zoom lent de la photo active — piloté par JS, pas par le navigateur */
.heros-img .capa.activa img{transition:transform 9s linear}
.heros::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
radial-gradient(130% 100% at 50% 48%, rgba(8,12,26,.22) 0%, rgba(8,12,26,.58) 52%, rgba(8,12,26,.84) 100%),
linear-gradient(to bottom, rgba(6,10,20,.78) 0%, rgba(6,10,20,.40) 12%, rgba(6,10,20,.06) 30%, rgba(6,10,20,0) 48%);
transition:opacity .3s ease;
}
.heros .env{position:relative;z-index:3}
/* ---------- le nom au centre ---------- */
/* LA HAUTEUR DU HÉROS. Elle était `clamp(580px, 90vh, 900px)`, et les deux
bornes se voyaient à l'écran :
· 90vh, ce n'est pas l'écran — c'est 90 % de l'écran. Sur un portable de
956 px de haut ça faisait 860 px ; plus les 92 px que le héros remonte
sous l'en-tête, 952. Quatre pixels de blanc entre la photo et le bas de
la fenêtre — et comme la section suivante est blanche sur un héros bleu
nuit, ces quatre pixels se voient.
· Le plafond de 900 px était pire. Sur un écran de 1080, le héros
s'arrêtait à 992 : 88 px de bande blanche. Mesuré, pas déduit.
Maintenant elle vaut l'écran MOINS ce que le héros remonte : le bas du héros
tombe exactement sur le bas de la fenêtre, quelle que soit sa hauteur.
Plancher à 580 px pour que le nom ne s'écrase pas sur un écran très bas.
`svh` et pas `vh` : sur un téléphone, `100vh` compte la fenêtre SANS les
barres du navigateur, donc le héros dépasse et pousse la page. `100svh` est
la hauteur réellement visible. La ligne en `vh` reste dessous comme repli
pour les navigateurs qui ne connaissent pas l'unité. */
.h-centre{
min-height:max(580px, calc(100vh - var(--solapa, 0px)));
min-height:max(580px, calc(100svh - var(--solapa, 0px)));
padding-block:clamp(80px,12vh,140px) clamp(72px,11vh,130px);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
/* « Payerne · Suisse romande » va en VERDE, no en blanco: en el héroe todo lo
demás —el ROJ gigante, la línea de servicios, la frase— es blanco, y una
sola nota de color le da un punto de entrada a la mirada. El verde de marca
(#1FA046) se apaga sobre una foto oscura, así que aquí va su versión clara:
mismo tono, más luz. Los dos filetes que la flanquean lo acompañan. */
.h-eyebrow{
font:500 12px/1 "Jost",sans-serif;letter-spacing:.42em;text-indent:.06em;text-transform:uppercase;
color:var(--verde-claro);margin:0 0 clamp(20px,3vw,34px);
display:flex;align-items:center;gap:16px;
text-shadow:0 1px 10px rgba(4,26,12,.75), 0 0 26px rgba(31,160,70,.35);
}
.h-eyebrow::before,.h-eyebrow::after{
content:"";width:44px;height:1px;
background:linear-gradient(90deg,transparent,var(--verde-claro));
}
.h-eyebrow::after{background:linear-gradient(90deg,var(--verde-claro),transparent)}
.h-nom{margin:0;font-family:"Familjen Grotesk",sans-serif;font-weight:500;line-height:.9}
.h-nom .plein{
display:block;font-size:clamp(72px,14.5vw,188px);
letter-spacing:.16em;text-indent:.16em;
color:rgba(255,255,255,.44);
/* pas d'ombre : la transparence est l'élégance, le voile fait le contraste */
}
/* DÉMÉNAGEMENT es lo que la empresa HACE: debajo de un ROJ de 188 px, a 20 px
y en peso 300 quedaba como un pie de foto. Sube a la mitad del tamaño del
nombre, gana cuerpo y pierde un poco de espaciado —a esta escala, .6em de
separación deshace la palabra en letras sueltas—. Y se apoya en un filete
verde, que la ata a la línea de arriba. */
.h-nom .sous{
display:block;margin-top:clamp(16px,2.2vw,30px);
font-family:"Jost",sans-serif;font-weight:400;
font-size:clamp(19px,2.9vw,38px);letter-spacing:.34em;text-indent:.34em;
color:#fff;text-transform:uppercase;
text-shadow:0 2px 22px rgba(6,10,20,.55);
}
.h-nom .sous::after{
content:"";display:block;width:clamp(60px,9vw,120px);height:2px;
margin:clamp(16px,2vw,24px) auto 0;
background:linear-gradient(90deg,transparent,var(--verde-claro),transparent);
}
.h-baseline{
margin:clamp(22px,3vw,34px) 0 0;font-size:clamp(15px,1.45vw,18.5px);line-height:1.62;
color:rgba(255,255,255,.9);max-width:46ch;
}
.h-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3.6vw,40px)}
/* repères des photos */
.puntos-heros{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:5;display:flex;gap:8px}
.puntos-heros button{width:30px;height:3px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.34);cursor:pointer;transition:background .3s}
.puntos-heros button[aria-current="true"]{background:#fff}
.puntos-heros button:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* ---------- variante « texte à gauche » ---------- */
#sitio[data-heros="centre"] .h-classique{display:none}
#sitio[data-heros="classique"] .h-centre{display:none}
#sitio[data-heros="classique"] .heros::after{background:var(--voile)}
.h-classique{padding-block:clamp(58px,8vw,104px) clamp(64px,9vw,116px)}
.heros-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4.5vw,58px);align-items:end}
.h1{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(34px,5.2vw,62px);line-height:1.03;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance;color:#fff}
.h1 em{font-style:normal;color:#fff;display:block;opacity:.62}
.heros p.intro{font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:rgba(255,255,255,.86);max-width:46ch;margin:0 0 24px}
.puces{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:9px}
.puces li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.puces svg{flex:0 0 auto;margin-top:3px}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
/* En móvil la fila de acciones —idioma, teléfono, «Devis gratuit»— pasa a una
segunda línea. La altura fija de la cabecera «llena» (76 px) ganaba a la
altura automática por especificidad: esa segunda fila se salía del fondo
blanco y flotaba sobre el texto de la página. Se fija aquí, con los dos
selectores, para que la cabecera crezca lo que necesite. */
.entete .env,.entete.pleine .env{height:auto;min-height:70px;padding-block:11px;flex-wrap:wrap;row-gap:0}
.actions{width:100%;margin-left:0;justify-content:flex-end;padding-bottom:10px}
/* En móvil el héroe NO se mete bajo la cabecera: la solapa pasa a cero, y
con ella el descuento de la altura. `.h-centre` mide entonces la pantalla
entera, sin restar nada. */
.heros{--solapa:0px;margin-top:0;padding-top:0}
.h-nom .plein{font-size:clamp(58px,19vw,104px)}
.h-nom .sous{font-size:clamp(15px,4.4vw,24px);letter-spacing:.22em;text-indent:.22em}
}
/* Le zoom et le fondu du héros tournent aussi en « mouvement réduit » :
décision expresse du propriétaire (22.08.2026) — il travaille avec cette
option active et veut voir l'effet que verront les visiteurs. */
/* --- carte estimateur, dans le héros --- */
.carte-est{
background:#fff;border-radius:6px;padding:24px;box-shadow:0 24px 60px rgba(9,14,30,.34);
border-top:4px solid var(--action);
}
.carte-est h3{font:700 17px/1.25 "Familjen Grotesk",sans-serif;margin:0 0 4px;color:var(--encre)}
.carte-est .aide{font-size:12.5px;line-height:1.5;color:var(--encre3);margin:0 0 16px}
.pieces{display:grid;gap:9px;margin-bottom:16px}
.piece{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--trait)}
.piece:last-child{border-bottom:0}
.piece .nom{font-size:13.5px;font-weight:500;color:var(--encre2)}
.piece .nom small{display:block;font:400 11px/1.3 "IBM Plex Mono",monospace;color:var(--encre3);letter-spacing:.02em}
.compteur{display:flex;align-items:center;gap:2px;background:var(--papier2);border:1px solid var(--trait);border-radius:4px}
.compteur button{
width:30px;height:30px;border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;
color:var(--encre2);font-family:"IBM Plex Mono",monospace;border-radius:3px;
}
.compteur button:hover{background:var(--papier3);color:var(--bleu)}
.compteur button:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
.compteur output{min-width:26px;text-align:center;font:600 14px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--encre)}
.resultat{background:var(--bleu);color:#fff;border-radius:4px;padding:16px 18px;display:grid;gap:4px;margin-bottom:14px}
.resultat .m3{font:700 40px/1 "Familjen Grotesk",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.resultat .m3 span{font-size:17px;font-weight:500;opacity:.72;margin-left:4px}
.resultat .veh{font:500 12.5px/1.4 "IBM Plex Mono",monospace;color:rgba(255,255,255,.82);letter-spacing:.02em}
.jauge{height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:8px}
.jauge i{display:block;height:100%;background:#fff;width:0;transition:width .45s cubic-bezier(.16,1,.3,1)}
/* --- bande de confiance --- */
.bande{background:var(--papier2);border-bottom:1px solid var(--trait)}
.bande .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding-block:26px}
.chiffre{display:flex;flex-direction:column;gap:3px}
.chiffre b{font:700 27px/1 "Familjen Grotesk",sans-serif;color:var(--bleu);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chiffre span{font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--encre3)}
.etoiles{display:flex;gap:2px;align-items:center}
/* --- services --- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2.4vw,26px);margin-top:38px}
.carte{background:#fff;border:1px solid var(--trait);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.carte:hover{border-color:var(--bleu);transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,22,40,.10)}
.carte .photo{aspect-ratio:4/3;overflow:hidden;background:var(--papier3)}
.carte .photo img{width:100%;height:100%;object-fit:cover}
.carte .corps{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.code{font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--action)}
.carte h3{font:700 20px/1.2 "Familjen Grotesk",sans-serif;margin:0;letter-spacing:-.015em}
.carte p{margin:0;font-size:14px;line-height:1.6;color:var(--encre2)}
.carte ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.carte ul li{font-size:13px;line-height:1.45;color:var(--encre2);padding-left:16px;position:relative}
.carte ul li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--action);border-radius:1px}
.carte .lien{margin-top:auto;padding-top:6px;font:600 13px/1 "IBM Plex Sans",sans-serif;color:var(--bleu);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.carte .lien:hover{gap:11px}
/* --- section estimateur, à part entière --- */
.est-sec{background:var(--papier2);border-block:1px solid var(--trait)}
.est-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,5vw,64px);align-items:start}
.est-liste{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.est-liste li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--encre2)}
.est-liste li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--action);border-radius:1px}
@media (max-width:900px){.est-grille{grid-template-columns:1fr}}
/* --- avant / après --- */
.ap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:34px}
.ap figure{margin:0;position:relative;border:1px solid var(--trait);border-radius:4px;overflow:hidden;background:#fff}
.ap img{aspect-ratio:4/5;object-fit:cover;width:100%;
transform:scale(var(--z,1));transform-origin:50% 50%}
.ap figcaption{position:absolute;top:12px;left:12px;background:#fff;font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:2px;color:var(--encre)}
.ap figure.apres figcaption{background:var(--action);color:var(--action-txt)}
/* --- zones --- */
.zones{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.zone{border:1px solid var(--trait);border-radius:100px;padding:8px 15px;font-size:13px;color:var(--encre2);background:#fff}
.zone.fort{border-color:var(--bleu);color:var(--bleu);font-weight:600}
/* --- avis : structure, tailles et comportement de mesarbarbershop.ch,
seules les couleurs changent (or → vert, sombre → clair) --- */
.avis__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
gap:clamp(2rem,5vw,4rem);align-items:center}
.avis__resume{text-align:center}
.avis__score{display:flex;align-items:baseline;justify-content:center;gap:.35rem;margin-bottom:.4rem}
.avis__chiffre{font-family:"Familjen Grotesk",sans-serif;font-weight:600;
font-size:clamp(3.2rem,7vw,4.6rem);line-height:1;color:var(--encre)}
.avis__sur{font-family:"Familjen Grotesk",sans-serif;font-size:1.1rem;color:var(--encre3)}
.avis__etoiles{display:inline-flex;gap:.18rem;margin-bottom:.7rem}
.avis__etoile{position:relative;display:inline-block;font-size:1.15rem;line-height:1;color:rgba(27,143,62,.28)}
.avis__etoile-plein{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--action)}
.avis__compte{font-size:.84rem;color:var(--encre3);margin-bottom:1.5rem}
.avis__nota{margin:.9rem auto 0;max-width:34rem;font-size:.82rem;line-height:1.6;color:var(--encre3)}
.avis__cta{display:inline-block;font:500 .78rem/1 "Jost",sans-serif;letter-spacing:.14em;text-transform:uppercase;
color:var(--encre);text-decoration:none;border:1px solid var(--encre3);border-radius:2px;
padding:.85rem 1.4rem;transition:border-color .3s,color .3s,background .3s}
.avis__cta:hover{border-color:var(--action);color:var(--action)}
.avis__liste{display:grid;gap:1rem}
.avis__carte{
margin:0;padding:1.3rem 1.5rem;background:#fff;
border:1px solid var(--trait);border-left:2px solid var(--action);border-radius:3px;
transition:border-color .35s;
}
.avis__carte:hover{border-color:rgba(27,143,62,.45);border-left-color:#23B554}
.avis__carte-note{display:flex;gap:.14rem;margin-bottom:.6rem;font-size:.9rem}
.avis__carte p{font-size:.95rem;line-height:1.75;color:var(--encre2);margin-bottom:.7rem}
.avis__carte footer{display:flex;align-items:baseline;gap:.7rem}
.avis__carte cite{font-style:normal;font-size:.85rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--encre)}
.avis__source{margin:2rem auto 0;text-align:center;font-size:.74rem;letter-spacing:.06em;color:var(--encre3)}
/* La page /avis/ les publie tous les neuf : la note passe au-dessus, sur toute
la largeur, et les avis se rangent en colonnes. Trois à côté d'un résumé,
c'était la vitrine de la home ; ici c'est la page qui doit tout montrer. */
.avis__inner--toutes{grid-template-columns:1fr;align-items:start}
.avis__inner--toutes .avis__resume{max-width:34rem;margin-inline:auto}
.avis__liste--toutes{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
gap:1rem;align-items:start}
@media (max-width:900px){
.avis__inner{grid-template-columns:1fr}
/* comme sur Mesar : en travers, pas en hauteur — bande à accrochage */
.avis__liste{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;
scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-inline:calc(-1*clamp(18px,4vw,46px));
padding-inline:clamp(18px,4vw,46px)}
.avis__liste .avis__carte{scroll-snap-align:center}
/* sauf sur /avis/ : neuf avis à faire défiler de côté, personne ne les lit */
.avis__liste--toutes{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;
grid-template-columns:1fr;scroll-snap-type:none;margin-inline:0;padding-inline:0}
}
/* --- les trois métiers, en alternance : image verticale à droite,
puis à gauche, comme la home de BCR --- */
.oficios{display:grid;margin-top:14px}
.oficio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.5fr);
gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(30px,4.5vw,60px)}
.oficio + .oficio{border-top:1px solid var(--trait)}
.oficio-img{margin:0;position:relative;width:100%;max-width:280px;justify-self:start}
.oficio:nth-child(even) .oficio-img{justify-self:end}
/* --z : la photo arrive agrandie et se pose en traversant l'écran (cf. le JS) */
.oficio-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;
transform:scale(var(--z,1));transform-origin:50% 50%}
.oficio:nth-child(even) .oficio-img{order:-1}
.oficio-txt .code{margin-bottom:10px;display:inline-block}
.oficio-txt h3{font:700 clamp(22px,2.4vw,30px)/1.15 "Familjen Grotesk",sans-serif;
letter-spacing:-.015em;margin:0 0 12px;color:var(--encre)}
.oficio-txt p{margin:0 0 14px;font-size:15px;line-height:1.66;color:var(--encre2);max-width:52ch}
.oficio-txt ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.oficio-txt ul li{font-size:13.5px;line-height:1.5;color:var(--encre2);padding-left:16px;position:relative}
.oficio-txt ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--action);border-radius:1px}
.oficio-txt .lien{font:600 13px/1 "IBM Plex Sans",sans-serif;color:var(--bleu);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.oficio-txt .lien:hover{gap:11px}
@media (max-width:820px){
.oficio{grid-template-columns:1fr}
.oficio:nth-child(even) .oficio-img{order:0}
}
/* --- réseaux sociaux, au pied --- */
.sociales{display:flex;gap:10px;margin-top:14px}
.sociales a{width:36px;height:36px;border:1px solid var(--trait);border-radius:50%;
display:grid;place-items:center;color:var(--encre2);transition:border-color .25s,color .25s,transform .25s}
.sociales a:hover{border-color:var(--bleu);color:var(--bleu);transform:translateY(-2px)}
.sociales svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* --- appel final --- */
.final{background:var(--final-fond);color:var(--final-txt);border-top:1px solid var(--trait)}
.final .env{padding-block:clamp(52px,7vw,86px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,60px);align-items:center}
.final h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.07;letter-spacing:-.024em;margin:0 0 12px;color:var(--final-txt);text-wrap:balance}
.final p{margin:0 0 24px;font-size:15.5px;line-height:1.62;color:var(--final-doux);max-width:50ch}
.form{background:#fff;border:1px solid var(--trait);border-radius:5px;padding:24px;display:grid;gap:12px}
.form label{display:grid;gap:5px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--encre3)}
.form input,.form select,.form textarea{
font:400 14.5px/1.4 "IBM Plex Sans",sans-serif;padding:11px 12px;border:1px solid var(--trait);
border-radius:3px;background:var(--papier);color:var(--encre);width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--bleu);outline-offset:-1px;border-color:var(--bleu)}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .note{font:400 11.5px/1.5 "IBM Plex Sans",sans-serif;color:var(--encre3);text-transform:none;letter-spacing:0;margin:0}
/* --- pied --- */
/* La couture du pied : verte, parce que c'est la seule couleur de la palette
qui ne sert de fond nulle part. Elle se détache donc aussi bien sur la bande
bleue de l'appel à l'action que sur une section blanche ou grise — une seule
règle qui marche sur les dix-sept pages, au lieu d'une par contexte. */
/* El pie llevaba una raya de 3 px de borde a borde. Ahora es el mismo huso
que la cabecera: grueso en el centro, afilado hacia los lados y sin tocar
los bordes de la pantalla. */
/* MEDIDO CONTRA studiobroye.ch EL 27-08-2026 — «exactement pareil, taille et
colonnes » : cinco columnas (marque + quatre listes, la dernière étant
Contact avec l'adresse), même respiration verticale (~34 px au-dessus,
bloc principal ≈ 176 px, bande © séparée). Avant : quatre colonnes avec
l'adresse coincée sous le logo, et 23 px de padding. */
.pied{position:relative;background:var(--papier2);padding-block:34px 14px}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:18px 30px}
.pied-lema{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--encre2);max-width:26ch}
.pied-contact{font-style:normal;font-size:13px;line-height:1.7;color:var(--encre2)}
/* Le courriel est plus long que la colonne : un cran plus petit et il tient
entier, au lieu de se couper après « roj- ». */
.pied-contact a[href^="mailto"]{font-size:12px;letter-spacing:-.01em;white-space:nowrap}
.pied h2,.pied h4{font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--encre3);margin:0 0 10px}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.pied a,.pied-boton{font-size:13px;color:var(--encre2);text-decoration:none}
.pied-boton{font-family:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.pied a:hover,.pied-boton:hover{color:var(--bleu);text-decoration:underline}
.pied address{font-style:normal;font-size:13px;line-height:1.5;color:var(--encre2)}
.pied .bas{margin-top:26px;padding-top:12px;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font:400 12px/1.5 "IBM Plex Sans",sans-serif;color:var(--encre3)}
.pied .logo svg{height:42px}
/* --- bandeau cookies : ce qui manque aujourd'hui --- */
.cookies{
position:sticky;bottom:0;z-index:30;background:#fff;border-top:2px solid var(--bleu);border-radius:0 0 13px 13px;
padding:16px clamp(18px,4vw,46px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;
box-shadow:0 -8px 26px rgba(15,22,40,.09);
}
.cookies p{margin:0;font-size:13px;line-height:1.55;color:var(--encre2);flex:1 1 320px}
/* Le bouton WhatsApp flottant vit dans le coin inférieur droit : sans cette
marge, il recouvre « Accepter » tant que le bandeau des cookies est affiché
— vu sur la capture du 28-08. 74 px = 18 px de bord + 56 px de bouton. */
.cookies .btns{display:flex;gap:9px;flex-wrap:wrap;margin-right:74px}
.cookies .mini-btn{font:500 13px/1 "IBM Plex Sans",sans-serif;padding:11px 16px;border-radius:3px;border:1.5px solid var(--trait);background:#fff;color:var(--encre);cursor:pointer}
.cookies .mini-btn.oui{background:var(--action);border-color:var(--action);color:var(--action-txt);font-weight:600}
/* --- bouton flottant WhatsApp : demandé par le client le 27-08, pour écrire
directement, comme le fait aujourd'hui le widget Chaty de son site actuel --- */
.wa-flotante{
position:fixed;right:18px;bottom:18px;z-index:45;
width:56px;height:56px;border-radius:50%;background:#25D366;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 20px rgba(15,22,40,.3);transition:transform .18s ease;
}
.wa-flotante svg{width:29px;height:29px;fill:#fff}
.wa-flotante:hover{transform:scale(1.07)}
@media (max-width:560px){.wa-flotante{right:14px;bottom:14px;width:50px;height:50px}.wa-flotante svg{width:25px;height:25px}}
/* --- menu mobile --- */
.burger{display:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;border:1px solid var(--trait);
border-radius:3px;background:#fff;cursor:pointer;align-items:center;justify-content:center;gap:4px;flex-direction:column}
.burger i{display:block;width:18px;height:2px;background:var(--encre)}
@media (max-width:900px){
.heros-grille,.final .env{grid-template-columns:1fr}
.pied-grille{grid-template-columns:1fr 1fr}
.burger{display:flex}
.entete{z-index:30}
.entete .env{flex-wrap:wrap;height:auto;min-height:68px;padding-block:10px;row-gap:0}
.menu{order:9;flex:1 0 100%;flex-direction:column;gap:0;margin:0 0 12px;display:none;border-top:1px solid var(--trait)}
.menu.ouvert{display:flex}
.menu a{display:block;padding:13px 0;border-bottom:1px solid var(--trait);border-left:0}
.menu-desp__flecha{top:15px;right:4px;width:22px;height:22px}
.submenu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
border:0;box-shadow:none;background:transparent;padding:0;display:none}
.menu-desp.abierto .submenu{display:block}
.submenu a{padding:11px 0 11px 18px;border-bottom:1px solid var(--trait);font-size:13.5px}
.entete .cta{padding:11px 16px;font-size:13px}
.tel-lien strong{font-size:14px}
}
@media (max-width:560px){
.pied-grille{grid-template-columns:1fr}
.form .duo{grid-template-columns:1fr}
.entete .env{min-height:60px}
.logo svg{height:36px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
.carte:hover{transform:none}
.cta:hover{transform:none}
}
/* Excepciones al recorte global de movimiento — decisión expresa del
propietario (22.08.2026): el héroe y la filigrana se mueven también con
«reducir movimiento» activado. Sin esto, la regla de arriba deja todas las
transiciones en 0,001 ms: el zoom no se ve y el cambio de la filigrana es
un salto brusco — que es exactamente lo que él veía en su Mac. */
@media (prefers-reduced-motion: reduce){
.heros-img .capa{transition-duration:1.6s !important}
.heros-img .capa img{transition-duration:9s !important}
.entete{transition-duration:.55s !important}
.entete .env,.logo,.logo svg{transition-duration:.5s !important}
.page-hero__img img{animation-duration:16s !important}
/* Le diaporama de « notre maison » : sans ces deux lignes, la règle globale
met l'animation et le fondu à 0,001 ms — les quatre photos sautent au lieu
de se fondre et le zoom ne se voit pas. C'est exactement ce que voyait
Christopher, qui travaille avec « réduire les animations » activé. */
.diapo__foto{transition-duration:1.4s !important}
.diapo__foto.activa img{animation-duration:7s !important}
/* et le glissement des photos de la galerie et des métiers, piloté au
défilement : la transition les rendait saccadées */
.galerie__foto img,.oficio-img img,.ap img,.svc-intro figure img{transition-duration:.8s !important}
}
/* ============================================================
PAGE-HERO — l'entrée des pages intérieures (services, estimateur,
zones, avis, contact). Même anatomie que sur mesarbarbershop.ch :
photo + voile + titre, avec le même zoom lent automatique que
sur le héros de l'accueil.
============================================================ */
.page-hero{position:relative;min-height:clamp(280px,38vh,380px);display:grid;place-items:center;
overflow:hidden;text-align:center;margin-top:-92px;padding-top:92px;background:var(--encre)}
.page-hero__img{--zmax:1.14;position:absolute;inset:calc((100% - 100% * var(--zmax)) / 2);z-index:0}
.page-hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
transform:scale(calc(1.04 / 1.14));animation:page-hero-zoom 16s ease-in-out infinite alternate}
/* dibujada al 114 %, se mueve entre 0,912 y 1: nunca se amplía */
@keyframes page-hero-zoom{from{transform:scale(.9123)}to{transform:scale(1)}}
/* Un zoom más marcado, para las cabeceras donde la foto es el argumento.
Se dibuja al 126 % y recorre de 0,794 a 1 — el mismo principio: sólo baja. */
.page-hero__img--fuerte{--zmax:1.26}
.page-hero__img--fuerte img{transform:scale(calc(1 / 1.26));
object-position:50% 22%;animation:page-hero-zoom-fuerte 14s ease-in-out infinite alternate}
@keyframes page-hero-zoom-fuerte{from{transform:scale(.7937)}to{transform:scale(1)}}
.page-hero__voile{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(8,12,24,.72) 0%,rgba(8,12,24,.5) 55%,rgba(8,12,24,.8) 100%)}
.page-hero__content{position:relative;z-index:2;padding:7rem 6vw 2.6rem}
/* Los héroes interiores hablan con OTRA voz que la portada, y a propósito.
La portada es un cartel: Familjen Grotesk en 188 px, peso 700, es un grito.
Una página interior es una conversación, así que pasa a Jost en peso ligero,
con más aire entre líneas. Es la misma tipografía que lleva DÉMÉNAGEMENT
bajo el logotipo del héroe, así que no es una familia nueva: es la segunda
voz de la casa, usada donde toca.
Y bajan de tamaño. A 52 px un título de doce palabras —«Basés à Payerne,
présents dans toute la Suisse romande»— ocupaba tres líneas y se comía el
héroe entero. */
.page-hero h1{
font-family:"Jost","IBM Plex Sans",sans-serif;font-weight:300;
font-size:clamp(27px,3.5vw,43px);line-height:1.14;letter-spacing:-.005em;
color:#fff;margin:0;text-wrap:balance;max-width:22ch;
text-shadow:0 2px 26px rgba(6,10,20,.5);
}
.page-hero p{margin:1rem 0 0;font-size:clamp(14px,1.4vw,16.5px);color:rgba(255,255,255,.86);max-width:54ch}
/* Estimateur y Zones llevan los dos títulos más largos del sitio. Con la
medida general seguían comiéndose la pantalla, así que tienen la suya. */
.page-hero--compact h1{font-size:clamp(23px,2.7vw,34px);max-width:19ch;font-weight:400}
.page-hero--compact .page-hero__content{padding-block:5.6rem 2.4rem}
/* Un filete verde bajo el título: el mismo gesto que en el héroe de la
portada, para que las dieciocho páginas se reconozcan como una sola casa. */
.page-hero h1::after{
/* Centrado, porque el contenido del héroe lo está. Alineado a la izquierda
bajo un título centrado se lee como un fallo de maquetación. */
content:"";display:block;width:74px;height:2px;margin:1.1rem auto 0;
background:linear-gradient(90deg,rgba(65,210,119,0),var(--verde-claro),rgba(65,210,119,0));
}
.fil-ariane{position:relative;z-index:2;margin-top:1.1rem;font:500 11px/1 "IBM Plex Mono",monospace;
letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.fil-ariane a{color:rgba(255,255,255,.86);text-decoration:none}
.fil-ariane a:hover{text-decoration:underline}
/* ============================================================
L'ACCUEIL — la charpente de mesarbarbershop.ch, section par section.
Là-bas : héros → « notre histoire » (2 colonnes + chiffres + diaporama)
→ « nos services » (centré, grille de 4) → avis → Instagram (photo à
fond perdu + grille de 6). Ici, la même succession de formes — mais
chaque bande garde le fond clair du site, jamais du noir.
Rythme vertical de Mesar : padding-block clamp(5rem, 10vw, 8rem).
============================================================ */
.sec-accueil{padding-block:clamp(72px,9.5vw,124px)}
.sec-accueil.gris{background:var(--papier2);border-block:1px solid var(--trait)}
/* ---------- Las tres regiones, alternando lado ---------------------------
Texto e imagen se cruzan de una a otra: el ojo baja en zigzag en vez de
leer tres párrafos apilados. El número no decora — dice que son tres, y
en qué orden se recorren. ------------------------------------------- */
.region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(24px,4vw,58px);align-items:center;
padding-block:clamp(30px,4vw,48px);border-top:1px solid var(--trait)}
.region:first-of-type{border-top:0}
.region--invertida .region__txt{order:2}
.region__num{display:inline-block;font:600 11px/1 "IBM Plex Mono",monospace;
letter-spacing:.18em;color:var(--action);margin-bottom:12px}
.region__txt h3{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(20px,2.3vw,27px);line-height:1.15;letter-spacing:-.01em;
color:var(--encre);margin:0 0 12px}
.region__txt p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--encre2)}
.region__lista{font-size:13.5px;line-height:1.9;color:var(--encre3)}
.region__foto{margin:0;border-radius:5px;overflow:hidden;aspect-ratio:4/3;
background:var(--papier3)}
.region__credito{margin:22px 0 0;font-size:11.5px;line-height:1.6;color:var(--encre3)}
.region__foto img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(var(--z,1));transform-origin:50% 50%}
@media (max-width:900px){
.region{grid-template-columns:1fr;gap:20px}
.region--invertida .region__txt{order:0}
}
/* ---------- «Sur place»: tres tarjetas con foto --------------------------
Antes eran tres cajas de texto pegadas, sin nada que las separara. Ahora
cada oficio tiene su foto, su código y su llamada, y la tarjeta entera es
el enlace. ---------------------------------------------------------- */
.oficios-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
gap:clamp(16px,2vw,24px);margin-top:18px}
.oficio-tarjeta{display:flex;flex-direction:column;text-decoration:none;
background:#fff;border:1px solid var(--trait);border-radius:5px;overflow:hidden;
transition:border-color .35s ease, transform .35s var(--muelle), box-shadow .35s ease}
.oficio-tarjeta:hover,.oficio-tarjeta:focus-visible{
border-color:var(--action);transform:translateY(-3px);
box-shadow:0 22px 46px -28px rgba(15,22,40,.55)}
.oficio-tarjeta:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.oficio-tarjeta__foto{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--papier3)}
.oficio-tarjeta__foto img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(calc(var(--z,1) * var(--hz,1)));transform-origin:50% 50%;
transition:transform .55s var(--muelle)}
.oficio-tarjeta:hover .oficio-tarjeta__foto img{--hz:1.05}
.oficio-tarjeta__cuerpo{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,24px)}
.oficio-tarjeta__t{font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:18px;
line-height:1.2;color:var(--encre)}
.oficio-tarjeta__p{font-size:14.5px;line-height:1.6;color:var(--encre2)}
.oficio-tarjeta__mas{margin-top:4px;font:600 12px/1 "IBM Plex Mono",monospace;
letter-spacing:.1em;text-transform:uppercase;color:var(--action);
display:inline-flex;align-items:center;gap:8px}
.oficio-tarjeta__mas::after{content:"";width:16px;height:1.5px;background:currentColor;
transition:width .35s var(--muelle)}
.oficio-tarjeta:hover .oficio-tarjeta__mas::after{width:28px}
/* ---------- La costura entre secciones ----------------------------------
El mismo huso de la cabecera, centrado, arriba de cada sección que sigue a
otra — en las dieciocho páginas. Antes las secciones se tocaban sin nada en
medio y el cambio de fondo era la única señal, que entre dos claros no es
ninguna.
La regla es genérica: TODA sección hija de #sitio la lleva. Así una sección
nueva nace con su costura sin que haya que acordarse. Las excepciones son
dos, y por el mismo motivo: donde ya hay una foto grande separando, sobra.
---------------------------------------------------------------------- */
#sitio > section,#sitio > footer{position:relative}
#sitio > section:not(.page-hero):not(.heros)::before,
#sitio > footer::before{
content:"";position:absolute;top:0;left:50%;translate:-50% 0;
width:min(680px,58%);height:3px;z-index:3;
background:var(--action);opacity:.55;
clip-path:ellipse(50% 50% at 50% 50%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
}
/* Después de una foto grande la costura SÍ va, pero al revés: en vez de un
huso sobre el borde, un filete fino que arranca desde el centro. La foto ya
separa por sí sola; esto sólo confirma dónde acaba. */
#sitio > .heros + section::before,
#sitio > .page-hero + section::before{
width:min(420px,42%);height:2px;opacity:.7;
background:linear-gradient(90deg,transparent,var(--action),transparent);
}
/* LA REGLA DE LA COSTURA, corregida el 26-08-2026.
Antes: verde sobre claro, BLANCO sobre oscuro. El problema es que una
costura blanca entre una banda azul y una sección blanca desaparece dentro
de la blanca — separa de un lado y no del otro.
La regla buena es la que pidió Christopher: **la costura tiene que ser
distinta de las DOS secciones que separa**. Y en esta paleta hay un color
que no es fondo de nada, ni claro ni oscuro: el verde. Así que la costura es
siempre verde; lo único que cambia sobre oscuro es que usa el verde claro,
porque el de marca se apaga.
Es, además, lo que ya hacía la costura de debajo de la cabecera. Una sola
idea en todo el sitio en vez de dos reglas que se contradicen.
CORREGIDO EL 27-08-2026: la lista apuntaba a clases que ya no existen en
ningún HTML (.sec.azul, .sec.oscura, .final) y se dejaba fuera las DOS
bandas azules reales del sitio — .cta-corta (ocho páginas) y .est-h (la
home) — cuya costura salía en verde de marca al 55 % sobre azul: un
fantasma. La lista de abajo son las secciones oscuras que existen HOY;
si nace otra banda oscura, hay que añadirla aquí. */
#sitio > .galerie::before,#sitio > .cta-corta::before,
#sitio > .est-h::before{background:var(--verde-claro);opacity:.85}
/* El reflejo que recorre la costura de la banda de cierre. Estaba escrito
para «.final», una clase que ningún HTML lleva, así que no se veía en
ninguna página: desde el 27-08-2026 vive en .cta-corta, que es la banda
que de verdad cierra ocho páginas. */
#sitio > .cta-corta::before{
background:linear-gradient(90deg,var(--verde-claro) 0%,var(--verde-claro) 38%,#fff 50%,var(--verde-claro) 62%,var(--verde-claro) 100%);
background-size:280% 100%;animation:costura-reflejo 7s ease-in-out infinite}
@keyframes costura-reflejo{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){#sitio > .cta-corta::before{animation-duration:14s}}
/* El pie: la costura que lo separa de lo que hay encima, en las dieciocho
páginas. Es más ancha y más marcada que las de entre secciones — cierra la
página, no separa dos bloques. */
#sitio > footer.pied::before{
width:min(940px,74%);height:4px;opacity:1;
}
/* ---------- 1. « Notre maison » : deux colonnes, chiffres, diaporama ---------- */
.maison-grille{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(2.5rem,6vw,5rem);align-items:center}
.maison-txt .sous + .sous{margin-top:1.2rem}
.maison-txt .sous{max-width:52ch}
.cifras{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,2rem);
margin:2rem 0;padding-top:1.6rem;border-top:1px solid var(--trait)}
/* trois de front, comme chez Mesar : sans flex:1 la troisième passait à la ligne */
.cifra{flex:1 1 0;min-width:104px}
.cifra__num{display:block;font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(1.9rem,4vw,2.6rem);line-height:1;letter-spacing:-.02em;color:var(--bleu)}
.cifra__lab{display:block;margin-top:6px;font:600 10.5px/1.35 "IBM Plex Mono",monospace;
letter-spacing:.18em;text-transform:uppercase;color:var(--encre3)}
/* le diaporama : quatre verticales qui se relaient, avec le même zoom
lent que celui de Mesar (7 s, de 1,13 à 1,03) */
/* Le cadre se rapproche pendant qu'il traverse l'écran (--z, piloté au
défilement) ; à l'intérieur, la photo active garde son propre zoom lent. */
.diapo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--papier3);
transform:scale(var(--z,1));transform-origin:50% 50%}
.diapo__foto{--zmax:1.13;position:absolute;inset:calc((100% - 100% * var(--zmax)) / 2);
opacity:0;transition:opacity 1.4s ease}
.diapo__foto.activa{opacity:1}
.diapo__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
transform:scale(calc(1.03 / 1.13))}
.diapo__foto.activa img{animation:diapo-zoom 7s ease-out both}
@keyframes diapo-zoom{from{transform:scale(1)}to{transform:scale(.9115)}}
/* un dégradé discret en bas : sans lui, les puces disparaissent sur les
photos claires (mur blanc, armoire blanche) */
.diapo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;
pointer-events:none;background:linear-gradient(to top,rgba(10,14,30,.42),transparent)}
.diapo__puntos{position:absolute;left:50%;bottom:1.1rem;z-index:2;transform:translateX(-50%);
display:flex;gap:.55rem}
.diapo__punto{width:26px;height:3px;border:0;padding:0;cursor:pointer;
background:rgba(255,255,255,.42);transition:background .4s}
.diapo__punto.activo{background:#fff}
.diapo__punto:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* ---------- 2. « Nos services » : centré, séparateur, grille de quatre ---------- */
.svc-h{text-align:center}
.svc-h .eyebrow{justify-content:center}
.svc-h .tit{margin-inline:auto}
.svc-h .sous{max-width:62ch;margin:0 auto 2.2rem}
/* le petit ornement de Mesar : filet, losange, filet */
.orn{display:flex;align-items:center;justify-content:center;gap:1.1rem;
margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.orn__filete{width:min(180px,26vw);height:1px;
background:linear-gradient(90deg,transparent,rgba(39,50,130,.42))}
.orn__filete:last-of-type{transform:scaleX(-1)}
.orn__rombo{width:8px;height:8px;flex:0 0 auto;border:1px solid var(--bleu);transform:rotate(45deg)}
.svc-h__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
gap:1px;background:var(--trait);border:1px solid var(--trait);margin-bottom:2.6rem}
.svc-h__celda{background:var(--papier);padding:1.9rem 1.2rem;transition:background .4s}
.svc-h__celda:hover{background:var(--papier2)}
.svc-h__celda .code{display:block;margin-bottom:10px;
font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--action)}
.svc-h__celda h3{font-family:"Familjen Grotesk",sans-serif;font-weight:600;
font-size:17px;line-height:1.2;letter-spacing:-.01em;color:var(--encre);margin:0}
.svc-h__celda span{display:block;margin-top:.5rem;
font:400 13px/1.45 "IBM Plex Sans",sans-serif;color:var(--encre3)}
/* ---------- 3. L'estimateur : la bande bleue, propre à ROJ ---------- */
.est-h{background:var(--bleu);color:#fff;text-align:center;
padding-block:clamp(64px,8vw,104px)}
.est-h .eyebrow{justify-content:center;color:rgba(255,255,255,.68)}
.est-h .eyebrow::before{background:rgba(255,255,255,.5)}
.est-h h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(27px,3.5vw,41px);line-height:1.07;letter-spacing:-.022em;
margin:0 0 14px;color:#fff;text-wrap:balance}
.est-h p{margin:0 auto 2rem;max-width:56ch;font-size:16px;line-height:1.65;color:rgba(255,255,255,.84)}
.est-h__cifra{font:700 clamp(56px,9vw,104px)/1.05 "Familjen Grotesk",sans-serif;
letter-spacing:-.03em;margin-bottom:1.3rem}
.est-h__cifra small{font-size:.34em;font-weight:500;opacity:.8;margin-left:.12em}
.est-h__regla{width:min(420px,72vw);height:3px;margin:0 auto 1.8rem;
background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.est-h__regla i{position:absolute;inset:0 auto 0 0;width:26%;background:#fff}
/* ---------- 4. La galerie : photo à fond perdu, voile, grille de six ---------- */
.galerie{position:relative;overflow:hidden;text-align:center;color:#fff;
padding-block:clamp(72px,9.5vw,124px)}
.galerie__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 42%;transform-origin:50% 50%;will-change:transform}
.galerie__voile{position:absolute;inset:0;
background:linear-gradient(135deg,rgba(14,20,48,.90) 0%,rgba(20,32,84,.78) 48%,rgba(10,15,36,.92) 100%)}
.galerie__inner{position:relative;z-index:2}
.galerie .eyebrow{justify-content:center;color:rgba(255,255,255,.7)}
.galerie .eyebrow::before{background:var(--vert)}
.galerie h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(27px,3.5vw,41px);line-height:1.1;letter-spacing:-.022em;margin:0;color:#fff;text-wrap:balance}
.galerie__sous{margin:.9rem auto 0;max-width:56ch;font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.8)}
/* Six carrés de 188 px, comme sur la home de Mesar : la grille sort donc un
peu du conteneur de texte, qui est plus étroit. */
.galerie__rejilla{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
width:min(1178px, 100%);margin:2.4rem auto}
.galerie .env{max-width:1274px}
.galerie__foto{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:rgba(0,0,0,.2)}
/* --z est écrit par le JS au défilement (la photo se pose en arrivant),
--hz par le survol. Les deux se multiplient : comme chez Mesar, l'un
n'écrase pas l'autre. */
.galerie__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
transform:scale(calc(var(--z,1) * var(--hz,1)));transform-origin:50% 50%;
transition:transform .8s var(--muelle),filter .5s}
.galerie__foto::after{content:"";position:absolute;inset:0;background:rgba(39,50,130,.38);
opacity:0;transition:opacity .4s}
.galerie__foto:hover img{--hz:1.1}
.galerie__foto:hover::after{opacity:1}
@media (max-width:900px){
.maison-grille{grid-template-columns:1fr}
.galerie__rejilla{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
.galerie__rejilla{grid-template-columns:repeat(2,1fr)}
.svc-h__rejilla{grid-template-columns:repeat(2,1fr)}
}
/* ============================================================
PAGES DE SERVICE — le contenu que le client avait déjà, remonté :
son argumentaire, sa liste d'avantages et ses questions fréquentes.
============================================================ */
.svc-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.svc-intro .code{display:inline-block;margin-bottom:12px}
.svc-intro figure{margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.svc-intro figure img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(var(--z,1));transform-origin:50% 50%}
.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:14px}
.bloque{background:var(--papier);padding:clamp(22px,3vw,32px)}
.bloque h2,.bloque h3{font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:18px;
line-height:1.2;letter-spacing:-.01em;color:var(--encre);margin:0 0 10px}
.bloque p{margin:0;font-size:14.5px;line-height:1.65;color:var(--encre2)}
.ventajas{list-style:none;padding:0;margin:18px 0 0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:11px 28px}
.ventajas li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--encre2)}
.ventajas li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
background:var(--action);border-radius:1px}
/* ---------- questions fréquentes : un accordéon sobre ---------- */
.faq{border-top:1px solid var(--trait);margin-top:10px}
.faq__item{border-bottom:1px solid var(--trait)}
.faq__q{width:100%;display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
background:none;border:0;padding:20px 0;cursor:pointer;text-align:left;
font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:16.5px;line-height:1.35;
letter-spacing:-.01em;color:var(--encre);transition:color .25s}
.faq__q:hover{color:var(--bleu)}
.faq__q:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.faq__signo{flex:0 0 auto;width:18px;height:18px;position:relative;margin-top:3px}
.faq__signo::before,.faq__signo::after{content:"";position:absolute;background:var(--action);
transition:transform .3s var(--muelle),opacity .3s}
.faq__signo::before{left:0;top:8px;width:18px;height:2px}
.faq__signo::after{left:8px;top:0;width:2px;height:18px}
.faq__q[aria-expanded="true"] .faq__signo::after{transform:rotate(90deg);opacity:0}
.faq__r{overflow:hidden;height:0;transition:height .35s var(--muelle)}
.faq__r p{margin:0;padding:0 40px 22px 0;font-size:15px;line-height:1.7;color:var(--encre2);max-width:74ch}
/* ---------- « Qui sommes-nous » ---------- */
.apropos-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(28px,5vw,64px);align-items:center}
.apropos-grille figure{margin:0;border-radius:4px;overflow:hidden}
.apropos-grille figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 32%;
display:block;transform:scale(var(--z,1));transform-origin:50% 50%}
@media (max-width:900px){
.svc-intro,.apropos-grille{grid-template-columns:1fr}
}
/* ============================================================
ESTIMATEUR DE VOLUME — sept pièces, 55 objets, cinq véhicules.
Le catalogue et les volumes sont les siens ; ce qui change, c'est
qu'à la fin la demande arrive vraiment. Voir js/estimateur.js
============================================================ */
.est-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
gap:clamp(24px,3.5vw,44px);align-items:start}
/* --- les onglets de pièce --- */
.est-pestanas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.est-pest{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;cursor:pointer;
border:1px solid var(--trait);border-radius:100px;background:#fff;
font:500 13.5px/1 "IBM Plex Sans",sans-serif;color:var(--encre2);
transition:border-color .25s,color .25s,background .25s}
.est-pest:hover{border-color:var(--bleu);color:var(--bleu)}
.est-pest.activa{background:var(--bleu);border-color:var(--bleu);color:#fff}
.est-pest__n{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
border-radius:100px;background:var(--action);color:#fff;
font:600 11px/1 "IBM Plex Mono",monospace}
.est-pest.activa .est-pest__n{background:#fff;color:var(--bleu)}
.est-pest:focus-visible{outline:2px solid var(--action);outline-offset:3px}
/* --- la grille d'objets --- */
.est-objetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:4px;overflow:hidden}
.est-obj{background:#fff;padding:13px 15px;display:flex;align-items:center;
justify-content:space-between;gap:12px;transition:background .25s}
.est-obj.con{background:var(--bleu-pale)}
.est-obj__t{min-width:0}
.est-obj__n{display:block;font:500 13.5px/1.3 "IBM Plex Sans",sans-serif;color:var(--encre)}
.est-obj__v{display:block;margin-top:2px;font:400 11px/1 "IBM Plex Mono",monospace;color:var(--encre3)}
.est-cont{display:flex;align-items:center;gap:2px;flex:0 0 auto;
background:var(--papier2);border:1px solid var(--trait);border-radius:4px}
.est-cont button{width:29px;height:29px;border:0;background:transparent;cursor:pointer;
font:400 17px/1 "IBM Plex Mono",monospace;color:var(--encre2);border-radius:3px}
.est-cont button:hover:not(:disabled){background:var(--papier3);color:var(--bleu)}
.est-cont button:disabled{opacity:.3;cursor:default}
.est-cont button:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
.est-cont output{min-width:24px;text-align:center;
font:600 13.5px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--encre)}
/* --- ajouter un objet non listé --- */
.est-extras{margin-top:16px}
.est-extras__t{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
text-transform:uppercase;color:var(--encre3);margin:0 0 8px}
.est-anadir{margin-top:16px;padding:16px;border:1px dashed var(--trait);border-radius:4px}
.est-anadir h3,.est-anadir h4{margin:0 0 10px;font:600 13px/1.3 "IBM Plex Sans",sans-serif;color:var(--encre)}
.est-anadir .campos{display:grid;grid-template-columns:minmax(0,1fr) 108px auto;gap:8px}
.est-anadir input{padding:10px 12px;border:1px solid var(--trait);border-radius:3px;
font:400 13.5px/1 "IBM Plex Sans",sans-serif;color:var(--encre);background:#fff;min-width:0}
.est-anadir input:focus-visible{outline:2px solid var(--bleu);outline-offset:-1px}
.est-anadir button{padding:0 18px;border:0;border-radius:3px;background:var(--encre);color:#fff;
font:600 13px/1 "IBM Plex Sans",sans-serif;cursor:pointer;white-space:nowrap}
.est-anadir button:hover{background:var(--bleu)}
/* --- le panneau de droite, qui suit le défilement --- */
.est-panel{position:sticky;top:104px;border:1px solid var(--trait);border-radius:4px;
background:#fff;overflow:hidden}
/* Le bloc bleu du volume : plus haut et plus présent depuis le 27-08-2026 —
« le cadre bleu devrait avoir plus de hauteur, il reste trop de vide en
dessous ». Le chiffre grandit, tout respire, et le bloc se centre sur une
hauteur minimale au lieu de se tasser en haut du panneau. */
.est-panel__alto{background:var(--bleu);color:#fff;padding:30px 26px 26px;
min-height:clamp(230px,26vh,310px);display:flex;flex-direction:column;justify-content:center}
.est-panel__et{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.7)}
.est-panel__m3{font:700 clamp(46px,5.5vw,64px)/1 "Familjen Grotesk",sans-serif;
letter-spacing:-.03em;margin:10px 0 4px}
.est-panel__m3 small{font-size:.4em;font-weight:500;opacity:.8;margin-left:.1em}
.est-panel__cuenta{font-size:13px;color:rgba(255,255,255,.8)}
.est-escala{margin-top:22px}
.est-escala__barra{height:5px;border-radius:3px;background:rgba(255,255,255,.24);overflow:hidden}
.est-escala__barra i{display:block;height:100%;width:0;background:#fff;
transition:width .45s var(--muelle)}
.est-escala__marcas{display:flex;justify-content:space-between;margin-top:6px;
font:400 10px/1 "IBM Plex Mono",monospace;color:rgba(255,255,255,.6)}
.est-panel__bajo{padding:20px 24px}
.est-veh__et{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--encre3);margin-bottom:7px}
.est-veh__nom{font:700 17px/1.25 "Familjen Grotesk",sans-serif;color:var(--encre);margin-bottom:5px}
.est-veh__txt{font-size:13px;line-height:1.55;color:var(--encre2);margin:0}
.est-check{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;
padding-top:16px;border-top:1px solid var(--trait);font-size:13px;line-height:1.5;color:var(--encre2);cursor:pointer}
.est-check input{margin-top:2px;accent-color:var(--action);width:16px;height:16px;flex:0 0 auto}
.est-panel .cta{width:100%;justify-content:center;margin-top:18px}
.est-reiniciar{display:block;width:100%;margin-top:12px;padding:8px;border:0;background:none;
cursor:pointer;font:400 12.5px/1 "IBM Plex Sans",sans-serif;color:var(--encre3);text-decoration:underline}
.est-reiniciar:hover{color:var(--rouge)}
/* --- la barre fixe du mobile --- */
.est-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--bleu);color:#fff;padding:11px clamp(14px,4vw,20px);
align-items:center;justify-content:space-between;gap:14px;
box-shadow:0 -6px 24px rgba(9,14,30,.24)}
.est-movil__m3{font:700 19px/1 "Familjen Grotesk",sans-serif}
.est-movil__veh{font-size:11.5px;color:rgba(255,255,255,.78);margin-top:2px}
.est-movil .cta{padding:11px 16px;font-size:13px}
/* --- « bon à savoir » --- */
.est-saber{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
gap:14px;margin-top:clamp(28px,4vw,44px)}
.est-saber div{border-left:2px solid var(--action);padding-left:14px;
font-size:13.5px;line-height:1.6;color:var(--encre2)}
/* --- le formulaire, avec l'estimation déjà reprise --- */
.est-form-sec{margin-top:clamp(34px,5vw,60px);padding-top:clamp(30px,4vw,48px);
border-top:1px solid var(--trait)}
.est-recap{background:var(--papier2);border:1px solid var(--trait);border-radius:4px;
padding:18px 20px;margin-bottom:24px}
.est-recap__linea{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;
padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--trait)}
.est-recap__m3{font:700 26px/1 "Familjen Grotesk",sans-serif;color:var(--bleu)}
.est-recap__veh{font-size:13.5px;color:var(--encre2)}
.est-chip{display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:100px;
background:#fff;border:1px solid var(--trait);font-size:12.5px;color:var(--encre2)}
.est-chip.vacio{color:var(--encre3);font-style:italic}
.est-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.est-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.est-campo.ancho{grid-column:1/-1}
.est-campo label{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
text-transform:uppercase;color:var(--encre3)}
.est-campo label .req{color:var(--rouge)}
.est-campo input,.est-campo select,.est-campo textarea{
padding:11px 13px;border:1px solid var(--trait);border-radius:3px;background:#fff;
font:400 14px/1.4 "IBM Plex Sans",sans-serif;color:var(--encre);width:100%}
.est-campo textarea{min-height:92px;resize:vertical}
.est-campo input:focus-visible,.est-campo select:focus-visible,.est-campo textarea:focus-visible{
outline:2px solid var(--bleu);outline-offset:-1px}
.est-casillas{display:grid;gap:11px;margin-top:18px}
.est-casillas label{display:flex;gap:10px;align-items:flex-start;
font-size:13.5px;line-height:1.5;color:var(--encre2);cursor:pointer}
.est-casillas input{margin-top:2px;accent-color:var(--action);width:16px;height:16px;flex:0 0 auto}
.est-aviso{margin:16px 0 0;font-size:13.5px;line-height:1.5;min-height:1px}
.est-aviso.mal{color:var(--rouge);font-weight:500}
.est-ok{background:var(--vert-pale);border:1px solid rgba(27,143,62,.35);border-left:3px solid var(--action);
border-radius:4px;padding:24px 26px}
.est-ok h2,.est-ok h3{margin:0 0 8px;font:700 19px/1.25 "Familjen Grotesk",sans-serif;color:var(--encre)}
.est-ok p{margin:0;font-size:14.5px;line-height:1.65;color:var(--encre2)}
.est-ok .ref{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:3px;
background:#fff;border:1px solid var(--trait);
font:600 15px/1 "IBM Plex Mono",monospace;color:var(--bleu)}
@media (max-width:980px){
.est-grid{grid-template-columns:1fr}
.est-panel{position:static}
.est-movil{display:flex}
.est-form-sec{padding-bottom:76px}
}
@media (max-width:520px){
.est-anadir .campos{grid-template-columns:1fr;gap:8px}
}
/* ============================================================
FORMULAIRES DE DEVIS — les trois de son site, avec tous leurs champs
et les pièces jointes qu'il utilise vraiment.
============================================================ */
.dv-form{max-width:820px}
.dv-sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--trait)}
.dv-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
.dv-sec__t{font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--bleu);margin:0 0 16px}
/* --- zone de dépôt des fichiers --- */
.dv-zona{margin-top:10px;border:1.5px dashed var(--trait);border-radius:5px;
padding:26px 22px;text-align:center;cursor:pointer;background:var(--papier2);
transition:border-color .25s,background .25s}
.dv-zona:hover,.dv-zona.encima{border-color:var(--bleu);background:var(--bleu-pale)}
.dv-zona svg{width:26px;height:26px;fill:none;stroke:var(--bleu);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.dv-zona__t{font:600 14px/1.3 "IBM Plex Sans",sans-serif;color:var(--encre);margin:0 0 4px}
.dv-zona__s{font-size:12.5px;line-height:1.5;color:var(--encre3);margin:0}
.dv-zona input[type=file]{display:none}
.dv-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.dv-lista li{display:flex;align-items:center;gap:12px;padding:9px 13px;
background:#fff;border:1px solid var(--trait);border-radius:3px;font-size:13.5px}
.dv-lista .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;color:var(--encre)}
.dv-lista .pes{font:400 11.5px/1 "IBM Plex Mono",monospace;color:var(--encre3);flex:0 0 auto}
.dv-lista button{width:24px;height:24px;flex:0 0 auto;border:0;border-radius:3px;cursor:pointer;
background:var(--papier2);color:var(--encre3);font-size:16px;line-height:1}
.dv-lista button:hover{background:var(--rouge);color:#fff}
/* ---------- le plan de la page de devis ----------
Le formulaire était seul, en 820 px, collé à gauche d'une page qui en fait
1200 : quatre cents pixels de blanc à droite, et pas une raison de faire
confiance à qui demande une adresse et une date. Deux colonnes règlent les
deux choses d'un coup — la colonne de droite tient ce qui se passe après
l'envoi, et le formulaire retrouve une largeur qui a du sens.
La rejilla de campos passe en douze colonnes : voir le commentaire de
`campoTexto()` dans `construir-sitio.mjs`. Une adresse postale ne peut pas
mesurer autant qu'un numéro d'étage. */
.dv-plano{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,336px);
gap:clamp(22px,3vw,44px);align-items:start}
.dv-plano .dv-form{max-width:none;margin:0}
.dv-principal{min-width:0}
.dv-tarjeta{background:#fff;border:1px solid var(--trait);border-radius:6px;
padding:clamp(20px,2.6vw,32px);
box-shadow:0 1px 2px rgba(15,22,40,.04), 0 18px 40px -30px rgba(15,22,40,.5)}
.dv-tarjeta .dv-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
/* Le numéro de l'étape, comme dans l'estimateur : quatre titres alignés ne
disent pas combien il en reste, quatre numéros oui. */
.dv-sec__t{display:flex;align-items:center;gap:10px}
.dv-sec__n{display:grid;place-items:center;width:21px;height:21px;flex:none;
border-radius:50%;background:var(--bleu);color:#fff;
font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:0}
/* `align-items:end` : « Type de local à déménager » et « Ascenseur à
l'arrivée » tiennent sur deux lignes d'étiquette, « Téléphone » sur une.
Alignés par le haut, les trois recuadros de la même ligne partaient à trois
hauteurs différentes. Ce que l'œil suit, ce sont les cases, pas les
étiquettes : on les aligne par le bas. */
.dv-form .est-campos{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.dv-form .est-campo{grid-column:span 6}
.dv-form .est-campo.c3{grid-column:span 3}
.dv-form .est-campo.c4{grid-column:span 4}
.dv-form .est-campo.c6{grid-column:span 6}
.dv-form .est-campo.c12,.dv-form .est-campo.ancho{grid-column:1/-1}
/* Le champ `date` de Safari et de Chrome n'a pas la même hauteur intérieure
qu'un `input` normal : sans ça, la ligne « téléphone · type · date » sort
d'un millimètre et ça se voit. */
.dv-form .est-campo input[type=date]{min-height:42.4px}
.dv-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px}
.dv-envoi .cta{padding-inline:22px}
.dv-envoi__note{margin:0;font-size:12.5px;line-height:1.45;color:var(--encre3)}
/* ---------- la colonne de droite ---------- */
/* 98 px = la hauteur mesurée de l'en-tête collant (76 px) plus une marge.
Sans ça la première carte passe dessous quand on descend. */
.dv-lado{position:sticky;top:98px;display:grid;gap:12px;min-width:0}
.dv-carta{background:#fff;border:1px solid var(--trait);border-radius:6px;
padding:20px 20px 18px;box-shadow:0 1px 2px rgba(15,22,40,.04)}
.dv-carta__t{margin:0 0 14px;font:600 10.5px/1 "IBM Plex Mono",monospace;
letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.dv-carta__s{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--encre3)}
.dv-carta__lien{display:inline-block;margin-top:12px;font-size:13px;color:var(--bleu);
text-decoration:none;border-bottom:1px solid var(--trait);transition:border-color .25s}
.dv-carta__lien:hover{border-bottom-color:var(--bleu)}
.dv-pasos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dv-pasos li{display:flex;gap:11px;align-items:flex-start;
font-size:13.5px;line-height:1.55;color:var(--encre2)}
.dv-pasos li b{color:var(--encre);font-weight:600}
.dv-pasos li span{display:grid;place-items:center;width:22px;height:22px;flex:none;
margin-top:1px;border-radius:50%;background:var(--bleu-pale);color:var(--bleu);
font:600 11.5px/1 "IBM Plex Mono",monospace}
.dv-carta--note{background:var(--papier2)}
.dv-note{display:flex;align-items:center;gap:14px}
.dv-note__n{font:700 38px/1 "Familjen Grotesk",sans-serif;color:var(--bleu);letter-spacing:-.02em}
/* Les étoiles sont celles de la page d'avis (`.avis__etoiles`), pour que la
note se lise pareil aux deux endroits. Ici elles sont un peu plus petites
et sans la marge du bas. */
.dv-note__e{margin-bottom:0}
.dv-note__e .avis__etoile{font-size:.98rem}
.dv-note__c{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--encre3)}
.dv-tel{display:inline-block;font:700 26px/1.1 "Familjen Grotesk",sans-serif;
color:var(--encre);text-decoration:none;letter-spacing:-.01em;
transition:color .22s ease}
.dv-tel:hover{color:var(--bleu)}
.dv-carta__wa{margin-top:14px;width:100%;justify-content:center;font-size:13px;padding:11px 14px}
/* En dessous de 980 px la colonne passe sous le formulaire et cesse d'être
collante : une carte qui suit le doigt sur un téléphone gêne au lieu
d'aider. */
@media (max-width:980px){
.dv-plano{grid-template-columns:1fr}
.dv-lado{position:static;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
align-items:start}
}
@media (max-width:820px){
.dv-form .est-campo.c3,.dv-form .est-campo.c4{grid-column:span 6}
}
@media (max-width:560px){
.dv-form .est-campo,
.dv-form .est-campo.c3,.dv-form .est-campo.c4,.dv-form .est-campo.c6{grid-column:1/-1}
.dv-envoi .cta{width:100%;justify-content:center}
}
/* ============================================================
CONTACT — les coordonnées écrites en clair, et pas seulement
quatre icônes comme sur son site actuel.
============================================================ */
.ctc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(28px,5vw,64px);align-items:start}
.ctc-lista{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.ctc-lista li{display:grid;gap:3px;padding-bottom:14px;border-bottom:1px solid var(--trait)}
.ctc-lista li:last-child{border-bottom:0}
.ctc-et{font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--encre3)}
.ctc-lista a,.ctc-lista span:not(.ctc-et){font-size:16px;line-height:1.5;color:var(--encre);
text-decoration:none}
.ctc-lista a{border-bottom:1px solid var(--trait);width:fit-content;transition:border-color .25s,color .25s}
.ctc-lista a:hover{color:var(--bleu);border-bottom-color:var(--bleu)}
/* Trois boutons de largeurs différentes dans un `flex-wrap` : deux sur la
première ligne, un tout seul sur la deuxième, et trois largeurs qui ne
s'alignent avec rien. En grille ils font la même largeur et se lisent comme
ce qu'ils sont — la liste des trois devis. */
.ctc-accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
gap:9px;margin-top:26px}
.ctc-accesos .cta{font-size:13px;padding:11px 15px;justify-content:center;text-align:center}
/* La carte de la note, sous les accès : sans elle la colonne se terminait
trois cents pixels avant le formulaire d'à côté. */
.ctc-note{margin-top:20px}
/* La cabecera ocupa el ancho: así las dos columnas empiezan a la misma altura
y el formulario arranca donde arranca el teléfono, no dos párrafos más
arriba. */
.ctc-cab{max-width:56ch;margin-bottom:clamp(26px,4vw,44px)}
/* El formulario, dentro de una tarjeta. Suelto sobre el blanco parecía un
borrador; enmarcado se lee como lo que es, la parte donde se actúa. */
.ctc-form{background:#fff;border:1px solid var(--trait);border-radius:6px;
padding:clamp(20px,2.6vw,30px);box-shadow:0 1px 2px rgba(15,22,40,.04), 0 18px 40px -30px rgba(15,22,40,.5)}
.ctc-form .dv-form{margin:0}
.ctc-form .dv-sec{border:0;padding:0;margin:0}
.ctc-form .dv-sec + .dv-sec{margin-top:22px;padding-top:22px;border-top:1px solid var(--trait)}
/* El mapa, a sangre y con la ficha encima — como las bandas de fotos del
resto del sitio. Antes era un recuadro pequeño dentro del contenedor. */
.ctc-mapa{position:relative;margin-top:0;overflow:hidden;background:var(--papier3);
aspect-ratio:21/7;min-height:340px}
.ctc-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
filter:grayscale(.55) contrast(1.05)}
.ctc-mapa__ficha{
position:absolute;top:50%;translate:0 -50%;left:clamp(18px,6vw,86px);
width:min(390px,calc(100% - 2*clamp(18px,6vw,86px)));
background:rgba(255,255,255,.96);backdrop-filter:blur(2px);
border:1px solid var(--trait);border-radius:6px;padding:clamp(20px,2.4vw,28px);
box-shadow:0 24px 60px -30px rgba(15,22,40,.6)}
.ctc-mapa__ficha h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(21px,2.2vw,27px);line-height:1.15;letter-spacing:-.01em;color:var(--encre);margin:10px 0 0}
.ctc-mapa__txt{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--encre2)}
.ctc-mapa__acciones{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.ctc-mapa__acciones .cta{font-size:13px;padding:11px 16px}
@media (max-width:900px){
.ctc-grid{grid-template-columns:1fr}
.ctc-mapa{aspect-ratio:auto;min-height:0;display:grid}
.ctc-mapa iframe{position:relative;height:300px}
.ctc-mapa__ficha{position:relative;top:auto;translate:none;left:auto;width:auto;
border-radius:0;border-width:1px 0 0;box-shadow:none}
}
/* ============================================================
PAGES DE TEXTE — mentions légales, CGV, confidentialité, merci
============================================================ */
.texto{max-width:74ch}
.texto h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,26px);
line-height:1.2;letter-spacing:-.015em;color:var(--encre);margin:clamp(30px,4vw,44px) 0 12px}
.texto h2:first-child{margin-top:0}
.texto h3{font:600 16px/1.3 "IBM Plex Sans",sans-serif;color:var(--encre);margin:24px 0 8px}
.texto p{font-size:15.5px;line-height:1.75;color:var(--encre2);margin:0 0 14px}
.texto ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px}
.texto ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.65;color:var(--encre2)}
.texto ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
background:var(--action);border-radius:1px}
.texto .dato{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:6px 22px;
padding:14px 0;border-bottom:1px solid var(--trait);font-size:15px}
.texto .dato dt{font-weight:600;color:var(--encre)}
.texto .dato dd{margin:0;color:var(--encre2)}
.texto .pendiente{background:var(--bleu-pale);border-left:3px solid var(--bleu);
padding:14px 18px;margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--encre2)}
.texto .fecha{font:400 12.5px/1 "IBM Plex Mono",monospace;color:var(--encre3);
padding-top:24px;margin-top:32px;border-top:1px solid var(--trait)}
/* --- merci --- */
.merci{text-align:center;padding-block:clamp(72px,10vw,130px)}
.merci__ico{width:66px;height:66px;margin:0 auto 24px;border-radius:50%;
background:var(--vert-pale);display:grid;place-items:center}
.merci__ico svg{width:30px;height:30px;fill:none;stroke:var(--action);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.merci h1{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.022em;color:var(--encre);margin:0 0 14px}
.merci p{max-width:54ch;margin:0 auto 12px;font-size:16px;line-height:1.7;color:var(--encre2)}
.merci .boutons{justify-content:center;margin-top:28px}
/* --- CTA court, en pied des pages intérieures : pas de formulaire, un
renvoi net vers contact.html --- */
.cta-corta{background:var(--final-fond);color:var(--final-txt);border-top:1px solid var(--trait);
text-align:center;padding-block:clamp(48px,7vw,78px)}
.cta-corta h2{font-family:"Familjen Grotesk",sans-serif;font-weight:700;
font-size:clamp(24px,3.2vw,36px);letter-spacing:-.02em;margin:0 0 14px;color:var(--final-txt);text-wrap:balance}
.cta-corta p{margin:0 auto 26px;max-width:52ch;color:var(--final-doux);font-size:15px;line-height:1.6}
.cta-corta .boutons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Le zoom du .page-hero tourne aussi en « mouvement réduit », comme celui
du héros de l'accueil : décision expresse du propriétaire (22.08.2026). */
/* ---------- La galerie : trois affichages, une visionneuse ----------------
La mosaïque donne des formats différents à des photos qui n'ont pas la même
importance ; la grille les met toutes au même rang pour comparer ; le grand
format en montre une à la fois. C'est le lecteur qui choisit, et son choix
se voit dans le bouton enfoncé. ---------------------------------------- */
.gal-mando{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
margin:1.8rem 0 1.4rem;padding-bottom:14px;border-bottom:1px solid var(--trait)}
.gal-mando__et{margin:0;font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--encre3)}
.gal-vistas{display:flex;gap:6px}
.gal-vista{width:38px;height:38px;display:grid;place-content:center;cursor:pointer;
background:#fff;border:1px solid var(--trait);border-radius:3px;color:var(--encre3);
transition:border-color .3s,color .3s,background .3s}
.gal-vista svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.gal-vista:hover{border-color:var(--bleu);color:var(--bleu)}
.gal-vista[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.gal-rejilla{display:grid;gap:10px}
/* El mosaico, medido contra la galería de Le Marquis (la referencia que pidió
el cliente): SEIS columnas y filas bajas de 110 px, no cuatro columnas de
186 px. La diferencia no es cosmética — con filas bajas una foto puede
ocupar 5 filas y la de al lado 2, y el mosaico deja de ser un tablero de
ajedrez para leerse como una página de revista. Los cuatro huecos suman
siempre 6 columnas: 3+3, o 2+2+2. */
/* Cada hueco tiene la PROPORCIÓN de las fotos que va a recibir, medida sobre
los archivos: 16:9 → 1,62 · cuadradas → 1,07 · verticales → 0,80. Un hueco
de 1,64 con una foto de 0,80 dentro recorta más de la mitad, y en `cover`
eso no se avisa: sale una tira del centro y parece que la foto está mal.
Cada fila suma seis columnas: 4+2, 3+3 o 2+2+2. */
.gal-rejilla--mosaico{grid-template-columns:repeat(6,1fr);grid-auto-rows:110px;gap:14px;grid-auto-flow:dense}
.gal-rejilla--mosaico .gal-pieza{grid-column:span 2;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza--hero{grid-column:span 4;grid-row:span 4} /* 1,62 — 16:9 */
.gal-rejilla--mosaico .gal-pieza--ancho{grid-column:span 3;grid-row:span 3} /* 1,63 — 16:9 */
.gal-rejilla--mosaico .gal-pieza--cuadro{grid-column:span 2;grid-row:span 3} /* 1,07 — 1:1 */
.gal-rejilla--mosaico .gal-pieza--alto{grid-column:span 2;grid-row:span 4} /* 0,80 — 4:5 */
.gal-rejilla--cuadros .gal-pieza,.gal-rejilla--tira .gal-pieza{grid-column:auto;grid-row:auto}
.gal-rejilla--cuadros{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:200px}
/* La banda: una sola fila que se recorre de lado, con parada en cada foto.
Es la forma de mirarlas una a una sin abrir ninguna. */
.gal-rejilla--tira{grid-auto-flow:column;grid-template-columns:none;
grid-auto-columns:min(420px,72vw);grid-auto-rows:min(56vh,420px);
overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
scrollbar-width:thin}
.gal-rejilla--tira .gal-pieza{scroll-snap-align:center}
.gal-pieza{position:relative;overflow:hidden;padding:0;border:0;border-radius:3px;cursor:zoom-in;
background:var(--papier3);display:block;width:100%;height:100%}
.gal-pieza img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(calc(var(--z,1) * var(--hz,1)));transform-origin:50% 50%;
transition:transform .5s ease}
.gal-pieza::after{content:"";position:absolute;inset:0;background:rgba(39,50,130,.34);
opacity:0;transition:opacity .35s ease}
.gal-pieza:hover{--hz:1.06}
.gal-pieza:hover::after,.gal-pieza:focus-visible::after{opacity:1}
.gal-pieza:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.gal-pieza__lupa{position:absolute;inset:0;display:grid;place-content:center;z-index:2;
opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s var(--muelle)}
.gal-pieza__lupa svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round}
.gal-pieza:hover .gal-pieza__lupa,.gal-pieza:focus-visible .gal-pieza__lupa{opacity:1;transform:scale(1)}
.gal-vacio{margin-top:1.6rem;color:var(--encre3);font-size:14.5px}
/* la visionneuse */
.visor{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
gap:clamp(8px,2vw,26px);padding:clamp(14px,4vw,48px);
background:rgba(8,11,22,.93);backdrop-filter:blur(6px)}
.visor[hidden]{display:none}
.visor__marco{margin:0;max-width:min(1180px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px}
.visor__marco img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:3px;
box-shadow:0 30px 80px rgba(0,0,0,.5)}
.visor__marco figcaption{color:rgba(255,255,255,.82);font-size:13.5px;text-align:center;line-height:1.5}
.visor__cerrar{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
width:44px;height:44px;font-size:28px;line-height:1;cursor:pointer;
background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:3px}
.visor__flecha{width:52px;height:52px;flex:none;font-size:32px;line-height:1;cursor:pointer;
background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:3px;
transition:background .3s,border-color .3s}
.visor__cerrar:hover,.visor__flecha:hover{background:rgba(255,255,255,.2);border-color:#fff}
.visor__cerrar:focus-visible,.visor__flecha:focus-visible{outline:2px solid var(--action);outline-offset:3px}
@media (max-width:900px){
/* tableta: cuatro columnas, y los huecos se reparten a la mitad */
.gal-rejilla--mosaico{grid-template-columns:repeat(4,1fr);grid-auto-rows:105px}
.gal-rejilla--mosaico .gal-pieza--hero{grid-column:span 4;grid-row:span 4}
.gal-rejilla--mosaico .gal-pieza--ancho{grid-column:span 2;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza--alto{grid-column:span 2;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza--cuadro{grid-column:span 2;grid-row:span 2}
.gal-rejilla--cuadros{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
.gal-rejilla--tira{grid-auto-columns:82vw;grid-auto-rows:min(52vh,360px)}
.visor__flecha{width:42px;height:42px;font-size:26px}
}
@media (max-width:560px){
/* En un teléfono no hay mosaico que valga: DOS columnas. Sin redeclarar
`grid-template-columns` heredaba las cuatro de la regla de 900 px y las
fotos salían a 95 px — miniaturas, no una galería. */
.gal-rejilla--mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:112px}
.gal-rejilla--mosaico .gal-pieza,
.gal-rejilla--mosaico .gal-pieza--ancho,
.gal-rejilla--mosaico .gal-pieza--cuadro{grid-column:span 1;grid-row:span 2}
.gal-rejilla--mosaico .gal-pieza--alto{grid-column:span 1;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza--hero{grid-column:span 2;grid-row:span 3}
}
/* ---------- la bande « nos chantiers » : les deux boutons et les réseaux -- */
.galerie__acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.galerie__redes{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;
margin:1.5rem 0 0;font-size:14px;color:rgba(255,255,255,.78)}
.galerie__red{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .3s,color .3s}
.galerie__red svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.galerie__red:hover{border-color:var(--action);color:#fff}
.galerie__seguir{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);
border-radius:99px;padding:9px 15px;
transition:background .35s ease,border-color .35s ease}
.galerie__seguir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.galerie__seguir:hover{background:rgba(255,255,255,.22);border-color:#fff}
.galerie__seguir:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.galerie__seguir.bloqueado{background:rgba(255,255,255,.06);border-style:dashed}
/* ══════════════════════════════════════════════════════════════════════════
26-08-2026 — REPASO VISUAL
Cuatro cosas, y ninguna es un adorno suelto:
1 · el destello, en todo recuadro de color que se pueda pulsar
2 · los formularios del estimador, que eran los más pobres del sitio
3 · el plano propio de la página de contacto
4 · el relieve general: sombras que responden, imágenes que respiran
Todo respeta «reducir movimiento»: lo que se mueve se frena, no desaparece
— decisión del propietario del 22-08, que trabaja con esa opción activa.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · EL DESTELLO ──────────────────────────────────────────────────────
Un barrido de luz que cruza el recuadro UNA vez al recibir el cursor o el
foco. No se repite en bucle: un botón que parpadea solo es un anuncio, y
dentro de un formulario compite con lo que el visitante está escribiendo.
`.cta` ya lo tenía; lo que faltaba era poder ponérselo a cualquier otra
cosa —una pastilla, una tarjeta de servicio, el chip del plano— sin
duplicar el código. De ahí la clase suelta. */
/* La lista incluye `.pastilla.plena` —el « Devis gratuit » de la cabecera— que
es el otro recuadro verde del sitio y no lo tenía. */
.destello,.pastilla.plena{position:relative;overflow:hidden;isolation:isolate}
.destello::after,.pastilla.plena::after{
content:"";position:absolute;top:-45%;bottom:-45%;left:-80%;width:38%;
transform:skewX(-20deg);pointer-events:none;opacity:0;z-index:1;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
}
.destello:hover::after,.destello:focus-visible::after,.destello:focus-within::after,
.pastilla.plena:hover::after,.pastilla.plena:focus-visible::after{
opacity:1;animation:destello .85s ease forwards;
}
/* El « Devis gratuit » deja de oscurecerse al pasar por encima: con el
destello encima, bajarle el brillo hacía que el barrido se viera sucio. */
.pastilla.plena:hover{filter:none;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--action) 75%,transparent)}
@keyframes destello{from{left:-80%}to{left:145%}}
/* El botón verde: el barrido se nota más y el botón se levanta con una
sombra de su propio color, no un gris. Una sombra gris bajo un botón verde
lo ensucia; una verde lo enciende. */
.cta::after{
background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
width:48%;
}
.cta:hover,.cta:focus-visible{
transform:translateY(-2px);
box-shadow:0 6px 18px -8px color-mix(in srgb,var(--action) 78%,transparent),
0 2px 6px -3px rgba(6,20,10,.28);
}
.cta.fantome:hover,.cta.blanc:hover{box-shadow:0 6px 18px -10px rgba(6,20,10,.35)}
@media (prefers-reduced-motion:reduce){
.destello:hover::after,.destello:focus-visible::after,.destello:focus-within::after,
.pastilla.plena:hover::after{animation-duration:1.5s}
.cta:hover,.cta:focus-visible{transform:none}
}
/* ── 2 · LOS FORMULARIOS DEL ESTIMADOR ────────────────────────────────────
Eran cajas blancas con un borde gris de 1 px: correctas y mudas. Lo que
cambia:
· el campo enfocado se ilumina con un anillo verde en vez de un outline
cuadrado, y sube un pelo — se ve DÓNDE estás sin buscar el cursor;
· la etiqueta del campo enfocado se pone azul: el par etiqueta/campo se
lee como una sola cosa;
· las casillas y los selectores dejan de parecer del sistema;
· el bloque entero se apoya en una tarjeta con relieve, no sobre el papel.
------------------------------------------------------------------------ */
.est-campos{gap:16px 14px}
.est-campo{position:relative}
.est-campo label{
transition:color .22s ease, letter-spacing .22s ease;
}
.est-campo:focus-within label{color:var(--bleu);letter-spacing:.13em}
.est-campo input,.est-campo select,.est-campo textarea{
border:1px solid var(--trait);border-radius:4px;
box-shadow:inset 0 1px 2px rgba(15,22,40,.04);
transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.est-campo input:hover,.est-campo select:hover,.est-campo textarea:hover{border-color:#B9C4D6}
.est-campo input:focus-visible,.est-campo select:focus-visible,.est-campo textarea:focus-visible,
.est-campo input:focus,.est-campo select:focus,.est-campo textarea:focus{
outline:none;border-color:var(--action);background:#fff;
box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 20%,transparent),
inset 0 1px 2px rgba(15,22,40,.03);
}
/* El selector del sistema pinta su flecha con la tipografía del sistema y no
se puede tocar. Se le quita y se dibuja una, para que los seis selectores
del formulario tengan la misma que los del panel. */
.est-campo select{
-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A90' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
.est-campo select:focus{background-color:#fff}
/* Las casillas: cuadro propio, con la marca dibujada. La del sistema cambia
de forma en cada navegador y en Safari ni siquiera acepta el color. */
.est-casillas label{
padding:11px 13px;border:1px solid var(--trait);border-radius:4px;background:#fff;
transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.est-casillas label:hover{border-color:#B9C4D6;background:var(--papier2)}
.est-casillas label:has(input:checked){
border-color:var(--action);background:var(--vert-pale);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--action) 30%,transparent);
}
.est-casillas label:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 20%,transparent)}
.est-casillas input{width:18px;height:18px;margin-top:1px;cursor:pointer}
/* Los tres grupos del formulario. Catorce campos seguidos en una rejilla que
se recoloca sola no son un formulario: son una pared. Partirlos en
« coordonnées · déménagement · précisions » no quita ni un campo, pero
convierte una pared en tres pasos cortos, y el número dice cuántos quedan. */
.est-grupo{
grid-column:1/-1;display:flex;align-items:center;gap:11px;
margin:14px 0 2px;padding-top:16px;border-top:1px solid var(--trait);
font:600 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--encre2);
}
.est-grupo:first-child{margin-top:0;padding-top:0;border-top:0}
.est-grupo span{
display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:50%;
background:var(--bleu);color:#fff;font-size:11px;letter-spacing:0;
}
/* El recapitulativo: es la cifra que el visitante ha construido él mismo, y
estaba puesta como un dato más. Ahora abre el formulario como una tarjeta
con su propio color, y la lista de muebles se lee debajo. */
.est-recap__linea{border-bottom:1px solid var(--trait);padding-bottom:12px;margin-bottom:12px}
.est-recap__m3{
font:700 clamp(26px,3.2vw,34px)/1 "Familjen Grotesk",sans-serif;
color:var(--bleu);letter-spacing:-.02em;
}
/* Un filete, no un punto medio: el valor de arranque es « — », y un separador
entre una cifra y una raya se lee como un error de maquetación. */
.est-recap__veh{
font-size:13.5px;color:var(--encre2);
padding-left:14px;margin-left:4px;border-left:1px solid var(--trait);
}
/* La tarjeta que sostiene el formulario final del estimador. */
.est-form-sec{position:relative}
.est-form-sec::before{
content:"";position:absolute;inset:-1px auto auto -1px;width:0;height:0;
}
.est-recap{
border-color:color-mix(in srgb,var(--bleu) 22%,var(--trait));
box-shadow:0 1px 2px rgba(15,22,40,.04), 0 14px 30px -26px rgba(15,22,40,.5);
}
/* Las estancias del catálogo. La activa ya era azul; ahora además se levanta
y deja su sombra, para que se lea como una pestaña delante de las otras. */
.est-pest{transition:border-color .22s ease,color .22s ease,background .22s ease,transform .22s var(--muelle),box-shadow .22s ease}
.est-pest:hover{transform:translateY(-1px)}
.est-pest.activa{box-shadow:0 5px 14px -8px color-mix(in srgb,var(--bleu) 85%,transparent)}
/* Cada objeto del catálogo. El que tiene unidades elegidas se marca con un
filete verde a la izquierda: se distingue de un vistazo cuántas estancias
llevas tocadas sin tener que leer los números. */
.est-obj{
border-radius:4px;
transition:background .22s ease, box-shadow .22s ease, transform .18s var(--muelle);
box-shadow:inset 0 0 0 1px transparent;
}
.est-obj:hover{box-shadow:inset 0 0 0 1px var(--trait), 0 6px 16px -12px rgba(15,22,40,.55)}
.est-obj.con{
box-shadow:inset 3px 0 0 var(--action), inset 0 0 0 1px color-mix(in srgb,var(--bleu) 16%,transparent);
}
.est-cont button{border-radius:4px;transition:background .18s ease,color .18s ease,transform .18s var(--muelle)}
.est-cont button:hover:not(:disabled){transform:scale(1.08)}
/* El panel del volumen. Un reflejo lento lo recorre: es la única cifra que el
visitante ha construido él, y merece que se le mire. */
.est-panel__alto{position:relative;overflow:hidden}
.est-panel__alto::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
background-size:260% 100%;animation:panel-reflejo 9s ease-in-out infinite;
}
@keyframes panel-reflejo{0%,100%{background-position:130% 0}50%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.est-panel__alto::after{animation-duration:18s}}
/* ── 3 · EL PLANO DE LA PÁGINA DE CONTACTO ────────────────────────────────
Sustituye al `iframe` de Google, que plantaba cookies antes de que nadie
aceptara nada. El componente es el mismo de leportail-payerne y de
bcrentrenamiento.es; aquí en azul y verde.
------------------------------------------------------------------------ */
.lugar{
max-width:620px;margin:clamp(26px,4vw,40px) auto 0;
background:#fff;border:1px solid var(--trait);border-radius:6px;overflow:clip;
box-shadow:0 1px 2px rgba(15,22,40,.04), 0 22px 44px -34px rgba(15,22,40,.55);
}
.lugar-medio{position:relative;margin:0;aspect-ratio:16/10;background:#F4F7FC}
.lugar-plano{position:relative;display:block;height:100%;text-decoration:none}
.lugar-medio img{
width:100%;height:100%;object-fit:cover;object-position:center;
transition:transform .8s var(--muelle);
}
.lugar-plano:hover img,.lugar-plano:focus-visible img{transform:scale(1.04)}
.lugar-chip{
position:absolute;left:50%;top:58%;transform:translateX(-50%);
padding:6px 12px;border-radius:3px;
/* Sobre el plano claro, la etiqueta va en el azul de la marca: en oscuro
translúcido se perdía entre las calles. */
background:var(--bleu);border:1px solid var(--bleu);
color:#fff;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
white-space:nowrap;box-shadow:0 3px 12px -4px rgba(15,22,40,.5);
transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.lugar-plano:hover .lugar-chip,.lugar-plano:focus-visible .lugar-chip{
background:var(--action);border-color:var(--action);color:#fff;
}
.lugar-plano:focus-visible{outline:2px solid var(--action);outline-offset:-3px}
.lugar-cuerpo{padding:clamp(20px,3vw,28px)}
.lugar-etiqueta{
font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;
color:var(--encre3);margin:0 0 10px;
}
.lugar-direccion{font-style:normal;font-size:15px;line-height:1.75;color:var(--encre2)}
.lugar-direccion strong{
display:block;font-family:"Familjen Grotesk",sans-serif;font-size:19px;font-weight:700;
letter-spacing:-.01em;color:var(--encre);margin-bottom:4px;
}
.lugar-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:560px){
.lugar-medio{aspect-ratio:4/3}
.lugar-acciones .cta{flex:1 1 100%;justify-content:center}
}
/* ── 4 · EL RELIEVE GENERAL ───────────────────────────────────────────────
Nada de esto llama la atención por sí solo; se nota al recorrer la página
entera. Es la diferencia entre una web que está bien y una que parece
cuidada. */
/* Las fotos con `data-zoom` se acercan un punto al pasar por encima. Un punto,
no cinco: es una fotografía de la empresa, no un carrusel de tienda. */
[data-zoom]{transition:transform .9s var(--muelle)}
figure:hover > [data-zoom]{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
[data-zoom],figure:hover > [data-zoom]{transition-duration:2s}
}
/* Todo enlace del cuerpo del texto subraya al pasar, desde la izquierda.
Un subrayado que aparece de golpe es un cambio de estado; uno que crece
dice de dónde viene. */
.sec p a:not(.cta):not(.pastilla){
background-image:linear-gradient(var(--action),var(--action));
background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
transition:background-size .32s var(--muelle);
text-decoration:none;padding-bottom:1px;
}
.sec p a:not(.cta):not(.pastilla):hover,
.sec p a:not(.cta):not(.pastilla):focus-visible{background-size:100% 1.5px}
/* Las tarjetas que ya tienen borde ganan una sombra que responde. */
.svc-h__item,.ventajas li,.region{transition:transform .3s var(--muelle),box-shadow .3s ease}
.svc-h__item:hover{transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(15,22,40,.6)}
@media (prefers-reduced-motion:reduce){
.svc-h__item:hover{transform:none}
}
/* El número de cada región, en marca de agua detrás del texto: da profundidad
a un bloque que sólo tenía dos columnas. */
.region__txt{position:relative;isolation:isolate}
.region__num{position:relative;z-index:1}
/* La barra de progreso de lectura, en el verde de la casa en vez de un azul
plano: es el único elemento del sitio que se mueve solo todo el rato. */
.progreso{background:linear-gradient(90deg,var(--bleu),var(--action))}
/* ══════════════════════════════════════════════════════════════════════════
26-08-2026 — LO QUE APARECIÓ AL MEDIR OCHO ANCHOS DE VERDAD
`node scripts/medir-movil.mjs` recorre ocho tamaños con emulación de
dispositivo y mide dos cosas: si algo se sale por la derecha, y cuántas
pantallas hay que bajar. Salieron dos problemas, y ninguno se veía en el
portátil.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · EL iPAD HORIZONTAL SE DESPLAZABA DE LADO ─────────────────────────
A 1024 px, LAS OCHO PÁGINAS medían 1248 px de ancho: 224 px fuera de
pantalla. El culpable, `div.actions` — el bloque de idioma, teléfono y
«Devis gratuit» de la cabecera.
La causa: la cabecera se recogía en el menú de hamburguesa a partir de
900 px, pero desplegada necesita unos 1190 (logotipo 170 + ocho entradas
de menú 600 + acciones 330 + márgenes). Entre 901 y 1189 px no cabía y
nadie se lo había dicho, porque en un portátil de 1470 sobra sitio.
Este punto de ruptura recoge SÓLO el menú, y deja el idioma, el teléfono y
el botón donde están: a 1024 px caben de sobra al lado de la hamburguesa,
y bajarlos a una segunda fila alarga la cabecera sin motivo. El bloque de
900 px sigue haciendo lo suyo por debajo.
------------------------------------------------------------------------ */
@media (max-width:1150px){
.burger{display:flex;order:2;margin-left:auto}
.entete .env,.entete.pleine .env{height:auto;min-height:72px;padding-block:12px;flex-wrap:wrap;row-gap:0}
.actions{order:3;margin-left:12px}
.menu{
order:9;flex:1 0 100%;flex-direction:column;gap:0;margin:0 0 10px;
display:none;border-top:1px solid var(--trait);
}
.menu.ouvert{display:flex}
.menu a{display:block;padding:13px 0;border-bottom:1px solid var(--trait);border-left:0}
.menu-desp__flecha{top:15px;right:4px;width:22px;height:22px}
.submenu{
position:static;opacity:1;visibility:visible;transform:none;min-width:0;
border:0;box-shadow:none;background:transparent;padding:0;display:none;
}
.menu-desp.abierto .submenu{display:block}
.submenu a{padding:11px 0 11px 18px;border-bottom:1px solid var(--trait);font-size:13.5px}
/* Con la cabecera transparente sobre la foto, el menú desplegado se abre
sobre un fondo claro: la tinta blanca no se leería. */
.entete .menu.ouvert{background:rgba(255,255,255,.985);
margin-inline:calc(-1 * clamp(18px,3vw,44px));padding-inline:clamp(18px,3vw,44px)}
.entete .menu.ouvert a{color:var(--encre2);text-shadow:none}
}
/* ── 2 · TRECE PANTALLAS DE SCROLL EN /zones/ A 320 px ────────────────────
La página de zonas medía 13,1 pantallas en un iPhone SE. Lo que la alarga
no son las fotos: son **las listas de pueblos**. Tres párrafos de quince
nombres separados por puntos, a 15 px y con interlineado de texto
corrido, ocupan media pantalla cada uno y no se leen — se saltan.
En un móvil pasan a dos columnas y a cuerpo de dato, que es lo que son:
una retahíla de nombres para confirmar «sí, voy a tu pueblo», no un texto
que nadie va a leer entero. La página baja de trece pantallas a ocho sin
quitar un solo nombre.
------------------------------------------------------------------------ */
@media (max-width:700px){
.region__lista{
columns:2;column-gap:16px;
font-size:12.5px;line-height:1.7;
-webkit-hyphens:auto;hyphens:auto;
}
/* Las listas de ventajas y de ciudades, más apretadas. */
.ventajas{gap:10px}
.ventajas li{font-size:13.5px;line-height:1.5}
/* El aire entre secciones, a la mitad: en escritorio da respiro, en un
móvil de 320 px son pantallas enteras de nada. */
.sec{padding-block:clamp(34px,9vw,52px)}
.region{gap:16px;margin-top:26px}
.region__txt h3{margin-bottom:6px}
.tit{margin-bottom:8px}
.sous{font-size:14.5px;line-height:1.55}
}
@media (max-width:380px){
/* En el iPhone SE, dos columnas de nombres largos se parten fatal: una. */
.region__lista{columns:1;font-size:12px}
}
/* ── 3 · LA FILIGRANA INFERIOR ────────────────────────────────────────────
El pie tiene cuatro columnas de enlaces. A 320 px se apilaban en una sola
tira de treinta enlaces, uno debajo de otro: la última pantalla de la web
era una lista interminable de texto pequeño.
En móvil pasa a dos columnas —los enlaces son cortos y caben— y los
títulos de grupo se separan de verdad. Y la fila de abajo (aviso legal y
firma) deja de estar centrada a la fuerza: alineada a la izquierda se lee
como lo que es, una línea de pie.
------------------------------------------------------------------------ */
@media (max-width:700px){
.pied-grille{grid-template-columns:1fr 1fr;gap:22px 18px}
.pied-grille > *:first-child{grid-column:1 / -1}
.pied h4,.pied-grille h4{margin-bottom:8px}
.pied a{font-size:13.5px;line-height:1.9}
.pied-boton{width:100%;justify-content:center}
}
@media (max-width:420px){
.pied-grille{grid-template-columns:1fr 1fr;gap:20px 14px}
.pied a{font-size:13px}
}
/* La hamburguesa sobre la foto. Nacía siempre con fondo blanco y barras
oscuras, y sobre el héroe quedaba como una pegatina blanca pegada en una
esquina. Con la cabecera transparente se comporta como las pastillas de al
lado: contorno claro, barras blancas y el mismo halo que las hace legibles
sobre cualquier fotografía. En cuanto la cabecera se llena, vuelve a ser la
de siempre. */
.entete:not(.pleine) .burger{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.38);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.entete:not(.pleine) .burger i{
background:#fff;
box-shadow:0 1px 2px rgba(6,10,20,.55);
}
.burger,.burger i{transition:background var(--t-fondo,.2s) ease,border-color var(--t-fondo,.2s) ease}
/* ══════════════════════════════════════════════════════════════════════════
26-08-2026 · SEGUNDA PASADA VISUAL
Lo que Christopher fue señalando al recorrer la web despacio. Nada de esto
es una idea propia: cada bloque responde a una frase suya.
══════════════════════════════════════════════════════════════════════════ */
/* ── EL PIE, MÁS BAJO ─────────────────────────────────────────────────────
«Reduce la altura de la filigrana inferior en toda la web.»
No se quita ni un enlace: lo que baja es el aire. El pie de un sitio de
servicios es un índice, no una sección — tiene que caber de un vistazo al
final, no ser una pantalla más. Interlineado más corto, columnas más
juntas y el bloque de abajo pegado al de arriba.
------------------------------------------------------------------------ */
.pied{padding-block:18px 10px}
.pied-grille{gap:12px 28px}
.pied h2,.pied h4{margin:0 0 7px;font-size:9.5px;letter-spacing:.15em}
.pied ul{gap:2px}
.pied a,.pied-boton{font-size:12.5px;line-height:1.75}
.pied address{font-size:12.5px;line-height:1.45}
.pied .bas{margin-top:11px;padding-top:9px;font-size:11.5px}
.pied .logo svg{height:26px}
.sociales{gap:7px}
.sociales a{width:32px;height:32px}
/* ── LAS CELDAS DE «TROIS MÉTIERS» ────────────────────────────────────────
«No hay ni un solo efecto visual al pasar por encima de ella.»
Tenía un cambio de fondo de papel a papel: técnicamente un efecto, en la
práctica invisible. Ahora la celda se levanta, se recorta contra el resto
con su sombra, el código de servicio se enciende en verde y aparece un
filete inferior que crece de izquierda a derecha. Se nota sin gritar.
------------------------------------------------------------------------ */
.svc-h__celda{
position:relative;isolation:isolate;
transition:background .3s ease, transform .3s var(--muelle), box-shadow .3s ease;
}
.svc-h__celda::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--action);transform:scaleX(0);transform-origin:0 50%;
transition:transform .45s var(--muelle);
}
.svc-h__celda:hover,.svc-h__celda:focus-within{
background:#fff;transform:translateY(-3px);
box-shadow:0 16px 34px -24px rgba(15,22,40,.6);z-index:1;
}
.svc-h__celda:hover::after,.svc-h__celda:focus-within::after{transform:scaleX(1)}
.svc-h__celda .code{transition:color .3s ease, letter-spacing .3s ease}
.svc-h__celda:hover .code{letter-spacing:.22em}
.svc-h__celda h3{transition:color .3s ease}
.svc-h__celda:hover h3{color:var(--bleu)}
@media (prefers-reduced-motion:reduce){
.svc-h__celda:hover,.svc-h__celda:focus-within{transform:none}
}
/* ── LA FRANJA AZUL DEL ESTIMADOR ─────────────────────────────────────────
Es la sección con más superficie de color de la portada y no reaccionaba a
nada. La cifra grande respira despacio —es el número que el visitante va a
construir él— y la regla de debajo se recorre sola, como una barra que se
llena. El botón blanco de dentro coge el destello.
------------------------------------------------------------------------ */
.est-h__cifra{
transition:transform .5s var(--muelle);
text-shadow:0 6px 30px rgba(0,0,0,.22);
}
.est-h:hover .est-h__cifra{transform:scale(1.03)}
.est-h__regla i{animation:regla-va 4.5s ease-in-out infinite alternate}
@keyframes regla-va{from{left:0}to{left:74%}}
@media (prefers-reduced-motion:reduce){
.est-h__regla i{animation-duration:9s}
.est-h:hover .est-h__cifra{transform:none}
}
/* ── EL DESTELLO EN TODO RECUADRO CON FONDO ───────────────────────────────
«Implementa el efecto de destello que tiene la web de referencia encima de
las opciones que van en recuadros como "Voir tous les services".»
`.cta` ya lo tenía; lo que faltaba era el botón CONTORNEADO — el blanco
sobre la banda azul y el fantasma sobre papel—, que es justo el de «Voir
tous les services». Un barrido no se ve sobre transparente, así que sobre
esos el destello va con el color del contorno, no en blanco.
------------------------------------------------------------------------ */
.cta.blanc::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}
.cta.fantome::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--bleu) 26%,transparent),transparent)}
.cta.blanc:hover,.cta.blanc:focus-visible{background:rgba(255,255,255,.14);border-color:#fff}
.cta.fantome:hover,.cta.fantome:focus-visible{border-color:var(--bleu);color:var(--bleu)}
/* Y las pastillas de la cabecera y las etiquetas de zona, que también son
recuadros con fondo.
COMPLETADO EL 27-08-2026: estos recuadros se habían PREPARADO (overflow +
isolation) pero nunca recibieron el barrido ni su disparador — el efecto
existía solo en el comentario. Aquí está la parte que faltaba, y con ella
entran también las tarjetas de servicio con foto (.oficio-tarjeta) y el
recuadro «Lire tous les avis» (.avis__cta), que son recuadros pulsables. */
.pastilla,.zone{position:relative;overflow:hidden;isolation:isolate}
.oficio-tarjeta,.avis__cta{position:relative;overflow:hidden;isolation:isolate}
.pastilla::after,.zone::after,.oficio-tarjeta::after,.avis__cta::after{
content:"";position:absolute;top:-45%;bottom:-45%;left:-80%;width:38%;
transform:skewX(-20deg);pointer-events:none;opacity:0;z-index:1;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.pastilla:hover::after,.pastilla:focus-visible::after,
.zone:hover::after,.zone:focus-visible::after,
.oficio-tarjeta:hover::after,.oficio-tarjeta:focus-within::after,
.avis__cta:hover::after,.avis__cta:focus-visible::after{
opacity:1;animation:destello .85s ease forwards;
}
@media (prefers-reduced-motion:reduce){
.pastilla:hover::after,.zone:hover::after,
.oficio-tarjeta:hover::after,.avis__cta:hover::after{animation-duration:1.5s}
}
.zone{transition:transform .28s var(--muelle),border-color .28s ease,color .28s ease}
.zone:hover{transform:translateY(-2px);border-color:var(--action);color:var(--bleu)}
/* ── LA IMAGEN DE «QUI SOMMES-NOUS» ───────────────────────────────────────
«La imagen presentando al cliente es demasiado grande en altura.»
Estaba en 4:5 vertical, que en una rejilla de dos columnas empuja el texto
de al lado y deja media pantalla de foto. A 4:3 ocupa lo que le toca y la
sección entra de una vez.
CORREGIDO EL 27-08-2026: este arreglo nunca llegó a verse. El ![]()
lleva
height="1125" en el HTML, y `aspect-ratio` solo manda cuando la altura es
`auto` — así que la foto seguía saliendo a 1125 px de alto (¡un 1:2!) con
el 4:3 «aplicado» pero inerte. El `height:auto` de abajo es lo que
de verdad activa la proporción. */
.apropos-grille figure img{aspect-ratio:4/3;object-position:50% 38%;height:auto}
@media (max-width:900px){
.apropos-grille figure img{aspect-ratio:16/10}
}
/* Y el texto de al lado, que quedaba pequeño frente a tanta foto: un punto
más de cuerpo y de aire, solo en esta rejilla. */
.apropos-grille .sous{font-size:17.5px;line-height:1.75;max-width:58ch}
.apropos-grille .sous + .sous{margin-top:1.1rem}
/* ── EL MOSAICO DE LA GALERÍA ─────────────────────────────────────────────
«Algunas imágenes algo más grandes, exactamente como en la referencia.»
La referencia (leportail-payerne) usa una retícula de seis columnas con
filas de 110 px y reparte los tamaños por POSICIÓN, no por clase: la
primera manda, la segunda y la tercera la acompañan, y a partir de la
séptima se estabiliza. Es lo que da la irregularidad sin tener que
etiquetar cada foto a mano. Se copia la retícula, no los colores.
------------------------------------------------------------------------ */
@media (min-width:64rem){
.gal-rejilla--mosaico{
grid-template-columns:repeat(6,1fr);grid-auto-rows:104px;grid-auto-flow:dense;
max-width:1180px;margin-inline:auto;
}
.gal-rejilla--mosaico .gal-pieza{grid-column:span 2;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza:nth-child(1){grid-column:span 3;grid-row:span 5}
.gal-rejilla--mosaico .gal-pieza:nth-child(2){grid-column:span 3;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza:nth-child(3){grid-column:span 3;grid-row:span 2}
.gal-rejilla--mosaico .gal-pieza:nth-child(4),
.gal-rejilla--mosaico .gal-pieza:nth-child(5),
.gal-rejilla--mosaico .gal-pieza:nth-child(6){grid-column:span 2;grid-row:span 4}
.gal-rejilla--mosaico .gal-pieza:nth-child(7),
.gal-rejilla--mosaico .gal-pieza:nth-child(8),
.gal-rejilla--mosaico .gal-pieza:nth-child(9),
.gal-rejilla--mosaico .gal-pieza:nth-child(10){grid-column:span 3;grid-row:span 3}
.gal-rejilla--mosaico .gal-pieza:nth-child(n+11){grid-column:span 3;grid-row:span 4}
}
/* ── EL DIAPORAMA DE «DEPUIS PAYERNE» ─────────────────────────────────────
«La transición entre las imágenes es horrorosa.»
Y era verdad, por una razón concreta: era un fundido de opacidad puro entre
dos fotos idénticas en geometría. A mitad de camino las dos están al 50 % y
se ve una superposición sucia — el ojo no lee «cambio», lee «error».
Se arregla dándoles PROFUNDIDAD distinta: la que entra viene un punto más
grande y se asienta; la que sale se aleja un punto y se va. Nunca están en
el mismo plano, así que no hay superposición plana que ensuciar. Y la curva
pasa deprisa por el centro, que es donde se acumula el barro.
------------------------------------------------------------------------ */
.diapo__foto{
opacity:0;transform:scale(1.035);
transition:opacity 1.15s cubic-bezier(.45,0,.15,1),
transform 1.6s cubic-bezier(.16,1,.3,1);
will-change:opacity,transform;
}
.diapo__foto.activa{opacity:1;transform:scale(1)}
.diapo__foto:not(.activa){transform:scale(.975)}
/* El zoom lento de dentro se conserva, pero más corto y menos profundo: con
1,4 s de fundido encima, siete segundos de zoom se comían el cambio. */
.diapo__foto.activa img{animation:diapo-zoom 9s ease-out both}
@keyframes diapo-zoom{from{transform:scale(1)}to{transform:scale(.935)}}
/* Un velo que cruza al cambiar, para atar las dos fotos. */
.diapo::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
background-size:280% 100%;background-position:130% 0;
transition:background-position 1.5s ease;
}
.diapo.cambia::before{background-position:-30% 0}
@media (prefers-reduced-motion:reduce){
.diapo__foto{transition-duration:1.6s,2s}
.diapo__foto.activa img{animation-duration:16s}
}
/* ── EL FORMULARIO DE CONTACTO ────────────────────────────────────────────
Usa las mismas clases que el del estimador, así que ya heredó el anillo
verde al enfocar y los selectores dibujados. Lo que le faltaba era el
marco: estaba suelto sobre el papel, al lado de una columna de datos, y
los dos bloques pesaban igual. Ahora el formulario es una tarjeta con
relieve —es donde se actúa— y la columna de datos se queda al lado, en su
sitio, sin caja.
------------------------------------------------------------------------ */
.ctc-grille form,form.form{
background:#fff;border:1px solid var(--trait);border-radius:8px;
padding:clamp(20px,3vw,30px);
box-shadow:0 1px 2px rgba(15,22,40,.04), 0 22px 46px -34px rgba(15,22,40,.5);
}
.ctc-et{
display:block;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
text-transform:uppercase;color:var(--encre3);margin-bottom:6px;
}
.ctc-grille .est-campos{gap:15px 14px}
/* El botón de envío, a ancho completo en su fila y con su sombra verde. */
.ctc-grille form .cta,form.form .cta{margin-top:4px}
/* ── EL RUIDO AL HACER SCROLL ─────────────────────────────────────────────
«Revisa que sigue habiendo el error de ruido y deterioro al hacer scroll.»
No era ruido de la imagen: era el navegador re-muestreando una foto que
está a la vez ampliada por `--z` (la parada al entrar) y por `--hz` (el
cursor), mientras la página se desplaza. Cuando una capa se escala en cada
fotograma sin estar promovida, Chrome la vuelve a rasterizar cada vez y se
ve granulada un instante.
La cura son dos líneas: promover a capa propia lo que se escala, y decirle
al navegador que va a cambiar, para que no lo descubra a mitad del gesto.
`backface-visibility` fuerza además el suavizado en el compositor.
------------------------------------------------------------------------ */
.galerie__foto img,.gal-pieza img,.diapo__foto,.diapo__foto img,
.heros-img .capa,.heros-img .capa img,.page-hero__img img,
.region__foto img,.apropos-grille figure img,[data-zoom]{
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style:preserve-3d;
}
/* Y el contenedor del héroe, que es el que más superficie escala. */
.heros-img,.page-hero__img,.galerie__fond{will-change:transform;contain:paint}
/* ══════════════════════════════════════════════════════════════════════════
LE PRIX À L'ÉCRAN, ET LE DEVIS SUR PAPIER
Voir js/tarifas.js (le barème, PROVISOIRE) et js/devis.js (le calcul et
le document).
══════════════════════════════════════════════════════════════════════════ */
/* ── à l'écran ─────────────────────────────────────────────────────────── */
.devis-precio{
margin-top:clamp(24px,3.5vw,38px);
border:1px solid var(--trait);border-radius:6px;overflow:hidden;background:#fff;
box-shadow:0 1px 2px rgba(15,22,40,.04), 0 22px 46px -34px rgba(15,22,40,.5);
}
.devis-precio__vacio{
margin:0;padding:26px 22px;text-align:center;
font-size:14px;color:var(--encre3);font-style:italic;
}
.devis-precio__alto{
background:var(--bleu);color:#fff;padding:22px 24px 20px;text-align:center;
position:relative;overflow:hidden;
}
.devis-precio__alto::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);
background-size:260% 100%;animation:panel-reflejo 9s ease-in-out infinite;
}
.devis-precio__et{
display:block;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:10px;
}
.devis-precio__v{
display:block;font:700 clamp(34px,5vw,50px)/1 "Familjen Grotesk",sans-serif;
letter-spacing:-.025em;
}
.devis-precio__horquilla{
display:block;margin-top:9px;font-size:12.5px;color:rgba(255,255,255,.78);
}
.devis-precio__lineas{padding:6px 0}
.devis-g{padding:10px 20px}
.devis-g + .devis-g{border-top:1px solid var(--papier3)}
.devis-g__t{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
text-transform:uppercase;color:var(--encre3);margin:0 0 8px;
}
.devis-g__t span{font-size:12px;color:var(--encre);letter-spacing:0}
.devis-l{
display:grid;grid-template-columns:minmax(0,1fr) 68px 78px 84px;
gap:10px;align-items:baseline;padding:4px 0;font-size:13.5px;
}
.devis-l__d{min-width:0;color:var(--encre2)}
.devis-l__d em{
display:block;font-style:normal;font-size:11.5px;line-height:1.4;
color:var(--encre3);margin-top:2px;
}
.devis-l__q,.devis-l__p,.devis-l__i{
text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12px;
font-variant-numeric:tabular-nums;color:var(--encre2);
}
.devis-l__i{color:var(--encre);font-weight:600}
.devis-precio__total{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:14px 20px;border-top:1px solid var(--trait);background:var(--papier2);
font-size:14px;color:var(--encre2);
}
.devis-precio__total b{
font:700 20px/1 "Familjen Grotesk",sans-serif;color:var(--encre);letter-spacing:-.02em;
}
.devis-precio__notas{
margin:0;padding:12px 20px 0;list-style:none;display:grid;gap:6px;
font-size:12.5px;color:var(--encre3);
}
.devis-precio__notas li{padding-left:15px;position:relative}
.devis-precio__notas li::before{content:"·";position:absolute;left:4px;color:var(--action);font-weight:700}
.devis-precio__aviso{
margin:0;padding:14px 20px;font-size:12.5px;line-height:1.55;color:var(--encre2);
background:var(--vert-pale);border-top:1px solid var(--trait);
}
.devis-precio__aviso b{color:var(--encre)}
.devis-precio__acciones{
display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;
border-top:1px solid var(--trait);
}
.devis-precio__acciones .cta{flex:1 1 190px;justify-content:center}
@media (max-width:640px){
.devis-l{grid-template-columns:minmax(0,1fr) 74px;gap:4px 10px}
.devis-l__p{display:none}
.devis-l__q{grid-column:1;font-size:11.5px;text-align:left;color:var(--encre3)}
.devis-l__i{grid-row:1;grid-column:2}
}
/* ── le document A4 ────────────────────────────────────────────────────── */
/* À l'écran il n'existe pas. À l'impression, c'est la seule chose qui existe. */
.devis-doc{display:none}
@media print{
/* `js/devis.js` saca el documento a la raíz antes de imprimir, así que aquí
basta con ocultar a sus hermanos. Intentar ocultar «todo menos él»
estando anidado ocultaba también a sus padres, y la hoja salía en blanco:
un elemento no se ve si su ancestro tiene `display:none`, por mucho
`!important` que lleve él. */
body.imprimiendo-devis > *{display:none !important}
body.imprimiendo-devis > .devis-doc{display:block !important}
@page{size:A4;margin:14mm 12mm}
}
/* Y si alguien imprime la página sin pulsar el botón, que no salga el
documento a medio hacer entre el contenido. */
@media print{
body:not(.imprimiendo-devis) .devis-doc{display:none !important}
}
/* La feuille. Les mesures sont en millimètres parce que c'est du papier :
raisonner en pixels pour un A4 donne des marges qui bougent d'une
imprimante à l'autre. */
.dv-hoja{
font-family:"IBM Plex Sans",Arial,sans-serif;color:#131A2B;font-size:9.6pt;line-height:1.45;
background:#fff;
}
.dv-cab{
display:flex;justify-content:space-between;align-items:flex-start;gap:14mm;
padding-bottom:5mm;border-bottom:2px solid #273282;
}
.dv-logo svg{width:46mm;height:auto;display:block}
.dv-emisor{text-align:right;font-size:8.6pt;line-height:1.5;color:#414D63}
.dv-emisor b{display:block;font-size:10pt;color:#131A2B;margin-bottom:1mm}
.dv-ide{display:block;margin-top:1.5mm;font-family:"IBM Plex Mono",monospace;font-size:7.6pt;color:#6E7A90}
.dv-titulo{display:flex;justify-content:space-between;align-items:flex-end;gap:10mm;margin:7mm 0 6mm}
.dv-titulo h1{
font-family:"Familjen Grotesk",Arial,sans-serif;font-weight:700;font-size:19pt;
letter-spacing:-.02em;margin:0;color:#131A2B;
}
.dv-meta{border-collapse:collapse;font-size:8.6pt}
.dv-meta th{
text-align:left;padding:.6mm 4mm .6mm 0;font-weight:600;color:#6E7A90;
font-family:"IBM Plex Mono",monospace;font-size:7.6pt;letter-spacing:.08em;text-transform:uppercase;
}
.dv-meta td{padding:.6mm 0;font-family:"IBM Plex Mono",monospace}
.dv-et{
font-family:"IBM Plex Mono",monospace;font-size:7.4pt;letter-spacing:.14em;
text-transform:uppercase;color:#6E7A90;margin:0 0 2mm;font-weight:600;
}
.dv-partes{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-bottom:6mm}
.dv-partes p{margin:0 0 .8mm}
.dv-vacio{color:#9AA5B8;font-style:italic}
.dv-resumen{
display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;
background:#F5F7FB;border:1px solid #DEE4EE;border-radius:1.5mm;
padding:4mm;margin-bottom:6mm;
}
.dv-resumen div{display:flex;flex-direction:column;gap:1mm;min-width:0}
.dv-resumen span{
font-family:"IBM Plex Mono",monospace;font-size:7.2pt;letter-spacing:.1em;
text-transform:uppercase;color:#6E7A90;
}
.dv-resumen b{font-size:11pt;font-family:"Familjen Grotesk",Arial,sans-serif;letter-spacing:-.01em}
.dv-tabla{width:100%;border-collapse:collapse;font-size:9pt}
.dv-tabla thead th{
text-align:left;padding:2mm 2mm;background:#131A2B;color:#fff;
font-family:"IBM Plex Mono",monospace;font-size:7.4pt;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;
}
.dv-tabla td{padding:2mm;border-bottom:.3mm solid #EAEFF7;vertical-align:top}
.dv-num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-grupo td{
background:#F5F7FB;font-family:"IBM Plex Mono",monospace;font-size:7.4pt;
letter-spacing:.12em;text-transform:uppercase;color:#414D63;font-weight:600;
padding-top:2.4mm;padding-bottom:2.4mm;
}
.dv-detalle{display:block;font-size:7.8pt;color:#6E7A90;margin-top:.6mm;line-height:1.35}
.dv-tabla tfoot td{padding:2mm;border-bottom:0}
.dv-total td{
border-top:.6mm solid #131A2B;font-weight:700;font-size:11.5pt;padding-top:3mm;
font-family:"Familjen Grotesk",Arial,sans-serif;
}
.dv-aviso{
margin:5mm 0 0;padding:3.5mm 4mm;background:#EAF5EE;border-left:1mm solid #1B8F3E;
font-size:8.6pt;line-height:1.5;
}
.dv-notas{margin:4mm 0 0;padding-left:5mm;font-size:8.4pt;color:#414D63}
.dv-notas li{margin-bottom:1mm}
.dv-inventario{margin-top:6mm;break-inside:avoid}
.dv-inventario ul{
margin:0;padding:0;list-style:none;columns:3;column-gap:8mm;font-size:8.4pt;
}
.dv-inventario li{
display:flex;justify-content:space-between;gap:3mm;
border-bottom:.3mm dotted #DEE4EE;padding:.8mm 0;break-inside:avoid;
}
.dv-inventario span{font-family:"IBM Plex Mono",monospace;color:#6E7A90}
.dv-condiciones{margin-top:6mm;break-inside:avoid}
.dv-condiciones ul{margin:0 0 4mm;padding-left:5mm;font-size:8.6pt;color:#414D63}
.dv-condiciones li{margin-bottom:1mm}
.dv-pie{
display:flex;justify-content:space-between;gap:8mm;margin-top:8mm;
padding-top:3mm;border-top:.3mm solid #DEE4EE;
font-size:7.6pt;color:#6E7A90;font-family:"IBM Plex Mono",monospace;
}
/* ══════════════════════════════════════════════════════════════════════════
27-08-2026 — LA PAGE « NOS SERVICES »
Une seule page avec les trois métiers en sections — demande du client :
« pour une personne âgée, mieux vaut tout voir sur le même écran que
chercher dans un sous-menu ». Les trois pages détaillées CONTINUENT
d'exister (positionnement + conversions Google Ads, voir
docs/producto/PLAN-URLS-Y-SEO.md) ; seul le menu mène désormais ici.
══════════════════════════════════════════════════════════════════════════ */
/* Les trois cartes-sommaire sont des liens : mêmes cellules que la home,
avec le geste de survol des recuadros pulsables. */
.svc-sommaire{padding-block:clamp(30px,4vw,48px)}
.svc-h__celda--lien{text-decoration:none;color:inherit;display:block;
position:relative;overflow:hidden;isolation:isolate;
transition:transform .28s var(--muelle),border-color .28s ease,box-shadow .28s ease}
.svc-h__celda--lien:hover,.svc-h__celda--lien:focus-visible{
transform:translateY(-2px);border-color:var(--action);
box-shadow:0 10px 26px -14px rgba(15,22,40,.25)}
.svc-h__celda--lien::after{
content:"";position:absolute;top:-45%;bottom:-45%;left:-80%;width:38%;
transform:skewX(-20deg);pointer-events:none;opacity:0;z-index:1;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.svc-h__celda--lien:hover::after,.svc-h__celda--lien:focus-visible::after{
opacity:1;animation:destello .85s ease forwards}
/* Les cellules du sommaire portent un (titre de section réel) là où la
home met un : même habit pour les deux. */
.svc-h__celda h2{font:600 17px/1.3 "Familjen Grotesk",sans-serif;color:var(--encre);margin:10px 0 4px}
/* L'ancre ne doit pas se cacher sous l'en-tête collant. */
#demenagement,#nettoyage,#debarras{scroll-margin-top:92px}
/* Le lien discret vers la page détaillée, sous le bouton de devis. */
.svc-detalle{font-size:14px;color:var(--encre2);text-decoration:underline;
text-underline-offset:3px}
.svc-detalle:hover{color:var(--bleu)}
/* Les groupes de la FAQ commune. */
.faq__grupo{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
text-transform:uppercase;color:var(--action);margin:clamp(26px,4vw,40px) 0 10px}
.faq__grupo:first-of-type{margin-top:clamp(14px,2vw,22px)}
/* ══════════════════════════════════════════════════════════════════════════
LA COSTURA INTERIOR, y EL FOCO DEL RATÓN — encargo del 28-08-2026
══════════════════════════════════════════════════════════════════════════ */
/* ---------- 1 · La costura interior -----------------------------------
Las costuras de más arriba separan SECCIONES. Pero dentro de una misma
sección hay cambios de franja —«Les bonnes raisons de nous choisir»,
«Deux façons de travailler avec nous», «Deux publics, deux façons de
faire»— que empezaban pegados al bloque anterior, sin nada que dijera
dónde acaba uno y empieza el otro. Son nueve en seis páginas.
Es el mismo huso verde de siempre, a media escala y alineado a la
izquierda con el título: separa sin competir con la costura de sección,
que es la que manda. El selector es genérico —un h2.tit que viene
detrás de un div hermano— así que una franja nueva nace con su costura
sin que haya que acordarse, igual que pasa con las secciones. */
.env > div + h2.tit{
position:relative;
margin-top:clamp(38px,5vw,64px);
padding-top:clamp(24px,3.2vw,38px);
}
.env > div + h2.tit::before{
content:"";position:absolute;top:0;left:0;
width:min(260px,32%);height:2px;
background:var(--action);opacity:.5;
clip-path:ellipse(50% 50% at 50% 50%);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);
}
/* ---------- 2 · El foco del ratón sobre lo que tiene recuadro ---------
Encargo literal: «muchas de las opciones con recuadros no tienen ningún
efecto visual al hacer foco con el ratón encima de ellas».
La regla que se sigue aquí distingue dos casos, porque no son lo mismo:
· lo PULSABLE reacciona de forma clara —cambia el fondo y el borde, y
se levanta un pixel: está prometiendo que al hacer clic pasa algo;
· lo que sólo es una FICHA reacciona apenas —el borde se tiñe y
aparece una sombra baja: acompaña al ojo sin prometer un clic que
no existe.
Prometer clic donde no lo hay es peor que no reaccionar: el visitante
pulsa, no pasa nada, y a partir de ahí desconfía de todo lo demás.
Todo lo de aquí lleva además su :focus-visible, porque quien navega con
el teclado necesita ver lo mismo que quien lleva ratón. */
/* 2.1 · Los botones del aviso de cookies. Son los únicos dos botones del
sitio que no reaccionaban, y están en las diecinueve páginas. */
.cookies .mini-btn{
transition:background .2s ease,border-color .2s ease,color .2s ease,
transform .2s var(--muelle),box-shadow .2s ease;
}
.cookies .mini-btn:hover{
border-color:var(--encre3);background:var(--papier2);transform:translateY(-1px);
}
.cookies .mini-btn.oui:hover{
background:color-mix(in srgb,var(--action) 86%,#000);
border-color:color-mix(in srgb,var(--action) 86%,#000);
color:var(--action-txt);
box-shadow:0 6px 16px -8px color-mix(in srgb,var(--action) 80%,transparent);
}
.cookies .mini-btn:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
/* 2.2 · Las fichas de las páginas de servicio («Les bonnes raisons…»,
«Deux façons de travailler…»). Van en una rejilla con separación de 1 px
que deja ver el fondo: por eso el gesto es el mismo que ya usa la rejilla
de la portada —cambiar el papel— y no un borde, que ahí no existe. */
.bloque{transition:background .28s ease}
.bloque:hover{background:var(--papier2)}
/* Sobre una sección ya gris, el mismo papel no se vería: se va al siguiente. */
.sec.gris .bloque:hover,.gris .bloque:hover{background:var(--papier3)}
/* 2.3 · Las fichas de la columna de los formularios de devis (los pasos,
la nota de Google, el teléfono) y la de la página de contacto. */
.dv-carta{transition:border-color .25s ease,box-shadow .25s ease}
.dv-carta:hover{
border-color:color-mix(in srgb,var(--bleu) 30%,var(--trait));
box-shadow:0 1px 2px rgba(15,22,40,.04),0 12px 26px -20px rgba(15,22,40,.5);
}
/* 2.4 · Las preguntas frecuentes. El botón ya cambiaba de color; lo que
faltaba era que el signo «+» —que es donde va el ojo— acompañara. */
.faq__item .faq__signo::before,.faq__item .faq__signo::after{transition:background .22s ease}
.faq__q:hover .faq__signo::before,.faq__q:hover .faq__signo::after{background:var(--bleu)}
/* 2.5 · Las regiones de la página de zonas. Son bloques de lectura, no
enlaces: sólo se tiñe el filete que las separa y su número. */
.region{transition:border-top-color .3s ease}
.region:hover{border-top-color:color-mix(in srgb,var(--action) 45%,var(--trait))}
.region__num{transition:color .3s ease}
.region:hover .region__num{color:var(--bleu)}
/* 2.6 · La casilla de los cartones del estimador: es una etiqueta, y una
etiqueta se pulsa. Tiene que decirlo. */
.est-check{transition:color .2s ease}
.est-check:hover{color:var(--encre)}
/* 2.7 · Los dos campos de «añadir un objeto no listado» del estimador.
El resto de campos del sitio ya reaccionaban; estos dos se quedaron
fuera porque no llevan la clase .est-campo. */
.est-anadir input{transition:border-color .2s ease}
.est-anadir input:hover{border-color:var(--bleu-clair)}
/* 2.8 · Las cifras de «Notre maison» y de «Qui sommes-nous». */
.cifra__num{transition:color .3s ease}
.cifra:hover .cifra__num{color:var(--bleu-clair)}
/* Con «reducir movimiento» no se quita la reacción —hace falta para saber
dónde está el ratón—: se quita el desplazamiento, que es lo que molesta. */
@media (prefers-reduced-motion:reduce){
.cookies .mini-btn:hover{transform:none}
}
/* ══════════════════════════════════════════════════════════════════════════
02-09-2026 · LA CABECERA EN MÓVIL, DE UNA SOLA FILA
Lo que Christopher vio en su teléfono la noche del corte: en la portada, un
bloque blanco de 230 px antes de la foto con dos pastillas invisibles
(idioma y teléfono, tinta blanca sobre fondo blanco, porque el héroe ya no
se mete bajo la cabecera en móvil y la cabecera seguía «transparente»); y
en las páginas interiores, esas mismas pastillas más el botón en una
segunda fila flotando sobre la foto.
La decisión: en móvil la cabecera es SIEMPRE una barra blanca de una sola
fila —logotipo, «Devis gratuit» y la hamburguesa—, con la costura verde
debajo. El idioma y el teléfono no desaparecen: viven dentro del menú, que
es donde un pulgar los busca. `.actions` pasa a `display:contents` para que
sus tres hijos se ordenen como hijos directos de la fila, sin tocar el HTML.
────────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
.entete,.entete.pleine{
background:rgba(255,255,255,.985);box-shadow:0 1px 20px rgba(15,22,40,.07);
--pastilla-borde:var(--trait);--pastilla-txt:var(--encre);--pastilla-lab:var(--encre3);--pastilla-fondo:transparent;
}
.entete::after{opacity:1;transform:scaleX(1)}
.entete .env,.entete.pleine .env{
height:auto;min-height:64px;padding-block:10px;flex-wrap:wrap;row-gap:0;gap:10px;align-items:center;
}
.logo,.entete.pleine .logo{filter:none}
.logo svg,.entete.pleine .logo svg{height:44px}
.burger,.entete:not(.pleine) .burger{order:3;margin-left:0;background:#fff;border-color:var(--trait);backdrop-filter:none;-webkit-backdrop-filter:none}
.entete:not(.pleine) .burger i{background:var(--encre);box-shadow:none}
.actions{display:contents}
.actions .lang,.actions > .pastilla:not(.plena){display:none}
.actions .pastilla.plena{order:2;margin-left:auto;height:40px;padding:0 14px;font-size:11.5px;letter-spacing:.06em;white-space:nowrap}
/* dentro del menú abierto: el teléfono, con su número, y el idioma */
.menu.ouvert ~ .actions > .pastilla:not(.plena){display:flex;order:10;flex:1 1 auto;height:44px;justify-content:center;margin-bottom:14px}
.menu.ouvert ~ .actions .lang{display:block;order:11;margin-bottom:14px}
.menu.ouvert ~ .actions .lang > .pastilla{height:44px}
.menu.ouvert{margin-bottom:12px}
/* el héroe interior tampoco se mete ya bajo la cabecera: la barra es opaca */
.page-hero{margin-top:0;padding-top:0}
}
@media (max-width:360px){
.actions .pastilla.plena{padding:0 10px;font-size:10.5px}
.logo svg,.entete.pleine .logo svg{height:40px}
}
/* ── 02-09-2026, segunda pasada en el teléfono de Christopher ──────────────
Lo que seguía chirriando una vez arreglada la cabecera. */
@media (max-width:900px){
/* La barra al 98,5 % dejaba ver el texto que pasaba por debajo: opaca del todo. */
.entete,.entete.pleine{background:#fff}
/* /services/ : tres servicios en una rejilla de dos columnas dejaban una celda
vacía, gris, abajo a la derecha. El tercero ocupa la fila entera. */
.svc-h__rejilla > :nth-child(3):last-child{grid-column:1 / -1}
/* /estimateur-de-volume/ : la burbuja de WhatsApp se montaba sobre el botón
«Devis gratuit» de la barra fija de abajo (63 px). Sube por encima. */
body:has(.est-movil) .wa-flotante{bottom:78px}
/* Portada, «Nos chantiers» : «Suivre les deux», Instagram y Facebook se
repartían en dos filas desiguales. En columna, centrados, uno por línea. */
.galerie__redes{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
}