dans la liste
suffira, l'ecart est deja gere par le "gap" ci-dessous et le centrage
se recalcule tout seul. */
.topbar__social {
display: flex;
align-items: center;
gap: var(--sp-12);
list-style: none;
margin: 0;
margin-inline: auto;
padding: 0;
flex: none;
}
/* "display: flex" sur le
: sans lui, l'interligne du texte ajoute un
demi-pixel sous le logo et le decale d'1 px par rapport au badge voisin. */
.topbar__social li { margin: 0; display: flex; }
.topbar__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--r-pill);
}
.topbar__social a:hover { background: rgba(255,255,255,.12); }
/* Logo de marque plein : il porte ses propres couleurs, il ne suit donc pas
"currentColor" comme les icones au trait du site. 20 px dans une zone
cliquable de 28 px. */
.topbar__social .icon { width: 20px; height: 20px; flex: none; }
@media (min-width: 1100px) {
.topbar { display: block; }
.urgency-strip { display: none; }
}
/* --------------------------------------------------------------------------
7. HEADER ET NAVIGATION
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--surface-0);
border-bottom: 1px solid var(--border-1);
transition: box-shadow var(--t-move) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-16);
min-height: var(--header-h);
transition: min-height var(--t-move) var(--ease);
}
@media (min-width: 1100px) {
.site-header.is-scrolled .site-header__inner { min-height: 68px; }
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; transition: height var(--t-move) var(--ease); }
@media (min-width: 1100px) {
.brand img { height: 56px; }
.site-header.is-scrolled .brand img { height: 44px; }
}
.header-actions { display: flex; align-items: center; gap: var(--sp-8); }
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--border-2);
border-radius: var(--r-btn);
background: var(--surface-0);
color: var(--text-900);
cursor: pointer;
}
.icon-btn:hover { background: var(--surface-1); }
.icon-btn .icon { width: 22px; height: 22px; }
/* Navigation principale (desktop >= 1100px) */
.main-nav { display: none; }
.header-phone { display: none; }
@media (min-width: 1100px) {
.main-nav { display: block; margin-left: auto; }
.main-nav > ul {
display: flex;
align-items: center;
gap: var(--sp-24);
list-style: none;
margin: 0;
padding: 0;
}
.main-nav > ul > li { margin: 0; position: relative; }
.nav-link, .nav-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--text-900);
background: none;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: color var(--t-color) var(--ease), border-color var(--t-color) var(--ease);
}
.nav-link:hover, .nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
color: var(--wr-orange-action);
border-bottom-color: var(--wr-orange);
}
.nav-link[aria-current="page"] { border-bottom-color: var(--wr-orange); }
.nav-toggle .icon { width: 16px; height: 16px; transition: transform var(--t-move) var(--ease); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-panel {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
z-index: 120;
background: var(--surface-0);
border: 1px solid var(--border-1);
border-radius: var(--r-card);
box-shadow: var(--shadow-3);
padding: var(--sp-20);
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease), visibility var(--t-move);
}
.nav-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-panel--wide { width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.nav-panel--narrow { width: 360px; }
.nav-panel li { margin: 0; }
.nav-panel--wide .nav-panel__foot { grid-column: 1 / -1; border-top: 1px solid var(--border-1); padding-top: var(--sp-12); margin-top: var(--sp-8); }
.nav-panel a {
display: block;
min-height: 56px;
padding: var(--sp-8) var(--sp-12);
border-radius: var(--r-btn);
text-decoration: none;
color: var(--text-900);
}
.nav-panel a:hover { background: var(--surface-1); }
.nav-panel a strong { display: block; font-size: 1rem; font-weight: 600; }
.nav-panel a span { display: block; font-size: 0.875rem; color: var(--text-600); line-height: 1.4; }
.nav-panel a.is-urgency strong { color: var(--urgency); }
.nav-panel a.is-urgency strong::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--urgency);
margin-right: 8px;
vertical-align: middle;
}
.header-phone { display: inline-flex; min-height: 48px; }
.header-actions .icon-btn { display: none; }
}
/* --------------------------------------------------------------------------
CORRECTIF 03/09/2026 — NUMERO DE TELEPHONE DU HEADER SUR UNE SEULE LIGNE
Probleme : entre 1100px et ~1340px, la barre de navigation desktop occupe
presque toute la largeur ; le bouton telephone, dernier element flexible,
etait comprime et les derniers chiffres passaient a la ligne.
Correction en trois temps, sans jamais reduire la police en dessous de 15px :
1. le bouton et son numero ne peuvent plus etre coupes (nowrap) ;
2. le bloc d'actions ne peut plus etre comprime (flex: none) ;
3. sur la seule plage etroite 1100-1339px, les espacements de la
navigation et le padding du bouton sont resserres pour degager
la place necessaire.
Au-dela de 1340px, tout revient aux valeurs d'origine.
-------------------------------------------------------------------------- */
@media (min-width: 1100px) {
.header-actions { flex: none; }
.header-phone {
flex: none;
white-space: nowrap;
word-spacing: normal;
}
.header-phone .icon { flex: none; }
}
@media (min-width: 1100px) and (max-width: 1339px) {
.site-header__inner { gap: var(--sp-12); }
.main-nav > ul { gap: var(--sp-16); }
.nav-link, .nav-toggle { font-size: 0.9375rem; }
.header-phone { padding: 0 16px; font-size: 0.9375rem; gap: 8px; }
.header-phone .icon { width: 18px; height: 18px; }
}
/* Plage etroite 1100-1339 px : l'ecran ne permet pas d'elargir le header.
On y degage les ~30 px manquants sans toucher a la taille du texte :
marges laterales du header un peu plus courtes, ecart entre entrees
resserre, bouton telephone legerement plus compact.
Sans cela, le "nowrap" ci-dessus ferait DEBORDER la page a 1100 px
(mesure : 1126 px de contenu pour 1100 px d'ecran). */
@media (min-width: 1100px) and (max-width: 1339px) {
.topbar .container,
.site-header .container { padding-inline: var(--sp-20); }
.site-header__inner { gap: var(--sp-8); }
.main-nav > ul { gap: 10px; }
.header-phone { padding: 0 14px; }
/* Logo a 44 px de haut sur cette seule plage — la meme taille qu'en mobile,
donc toujours parfaitement lisible. Il retrouve ses 56 px des 1340 px. */
.brand img,
.site-header.is-scrolled .brand img { height: 44px; }
}
/* --------------------------------------------------------------------------
CORRECTIF 04/09/2026 — LIBELLES DU MENU D'ORDINATEUR SUR UNE SEULE LIGNE
Probleme mesure : trois entrees s'affichaient sur deux lignes
("Peinture & boiseries", "Services complementaires", "Contact & devis").
Mesures reelles dans le navigateur, en 1440px :
- les six entrees, sans coupure, ont besoin de 858 px ;
- la barre de navigation n'en avait que 778.
Il manquait donc environ 80 px. La cause n'est pas la taille du texte :
c'est que le header partage la largeur de la colonne de contenu (1200 px),
alors que l'ecran, lui, est bien plus large.
Correction, sans rapetisser ni le texte ni le logo :
1. les libelles ne peuvent plus etre coupes (nowrap) ;
2. le header et la barre du haut recoivent leur PROPRE largeur, plus
large que la colonne de contenu, des que l'ecran le permet.
Le contenu des pages, lui, garde ses 1200 px : rien d'autre ne bouge ;
3. l'ecart entre les entrees passe de 24 a 20 px, ajustement discret.
Le correctif du numero de telephone ci-dessus reste entierement valable :
le bouton garde son nowrap et son flex: none.
-------------------------------------------------------------------------- */
@media (min-width: 1100px) {
.nav-link, .nav-toggle { white-space: nowrap; }
.main-nav > ul { flex-wrap: nowrap; }
/* Le chevron des menus deroulants etait ecrase a 0 px de large des que la
barre manquait de place (mesure a 1100 px : 0x16 au lieu de 16x16) : le
visiteur ne voyait plus qu'un sous-menu existait. Comme toutes les autres
icones du site (.btn, .crosslink, .action-link), il devient incompressible. */
.nav-toggle .icon { flex: none; }
}
@media (min-width: 1340px) {
.main-nav > ul { gap: var(--sp-20); }
}
/* Largeur propre au header : elle ne s'applique qu'a la barre du haut et a
l'en-tete, jamais au contenu editorial, qui garde ses 1200 px.
Elle demarre au meme seuil que le retour du texte a 16 px (1340 px), pour
que la navigation dispose tout de suite d'une marge confortable : sans elle,
la place necessaire et la place disponible seraient exactement egales. */
@media (min-width: 1340px) {
.topbar .container,
.site-header .container { max-width: 1360px; }
}
/* Menu mobile plein ecran */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 150;
display: none;
background: var(--surface-0);
overflow-y: auto;
transform: translateX(100%);
transition: transform var(--t-panel) var(--ease);
}
.mobile-menu.is-open { display: block; transform: translateX(0); }
.mobile-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-16);
min-height: 60px;
border-bottom: 1px solid var(--border-1);
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { margin: 0; border-bottom: 1px solid var(--border-1); }
.mobile-menu__list a, .mobile-menu__list button {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-12);
width: 100%;
min-height: 56px;
padding: var(--sp-8) 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--text-900);
background: none;
border: 0;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.mobile-menu__list .is-urgency { color: var(--urgency); }
.mobile-menu__list .is-urgency .icon { color: var(--urgency); }
.mobile-menu__list button .icon { transition: transform var(--t-move) var(--ease); flex: none; width: 20px; height: 20px; }
.mobile-menu__list button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-submenu { list-style: none; margin: 0 0 var(--sp-8); padding: 0 0 0 var(--sp-16); }
.mobile-submenu[hidden] { display: none; }
.mobile-submenu li { border: 0; }
.mobile-submenu a { font-weight: 400; min-height: 48px; }
.mobile-menu__foot {
background: var(--surface-1);
padding: var(--sp-24) 0 var(--sp-32);
margin-top: var(--sp-24);
}
.mobile-menu__foot .btn { margin-bottom: var(--sp-12); }
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }
/* --------------------------------------------------------------------------
8. BARRE D'ACTION FIXE MOBILE (decision UI n. 4)
-------------------------------------------------------------------------- */
.action-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 140;
display: flex;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-12) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
min-height: var(--actionbar-h);
background: var(--surface-0);
border-top: 1px solid var(--border-1);
box-shadow: 0 -8px 24px rgba(15,30,46,.14);
}
.action-bar .btn {
min-height: 52px;
padding-inline: var(--sp-12);
font-size: 1rem;
font-weight: 700;
}
.action-bar__call { flex: 0 0 58%; }
.action-bar__quote {
flex: 1 1 42%;
background: var(--wr-orange-tint);
color: var(--wr-orange-action-active);
border: 2px solid var(--wr-orange-action);
}
.action-bar__quote:hover { background: #FAE3D2; color: var(--wr-orange-action-active); }
.action-bar--urgency .btn { flex: 1 1 100%; }
@media (min-width: 1100px) { .action-bar { display: none; } }
/* --------------------------------------------------------------------------
9. HERO
-------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink-900); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; }
.hero__veil {
position: absolute;
inset: 0;
background: rgba(15,30,46,.65);
}
.hero__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 420px;
padding-block: var(--sp-32);
color: #FFFFFF;
}
.hero__content { max-width: 100%; }
.hero h1 {
color: #FFFFFF;
font-size: 2rem;
line-height: 1.1;
text-shadow: 0 1px 2px rgba(15,30,46,.5);
margin-top: var(--sp-16);
}
.hero__chapo {
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(255,255,255,.88);
margin-bottom: var(--sp-24);
}
.hero .btn-row { flex-direction: column; }
.hero .btn-row .btn { width: 100%; }
.hero__urgency {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-12);
min-height: 48px;
margin-top: var(--sp-16);
padding: 0 var(--sp-16);
border-radius: var(--r-card);
background: rgba(211,47,47,.92);
color: #FFFFFF;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.hero__urgency:hover { background: var(--urgency-hover); color: #FFFFFF; }
.hero__urgency .icon { width: 20px; height: 20px; flex: none; }
.hero__mention {
margin-top: var(--sp-16);
font-size: 0.875rem;
color: rgba(255,255,255,.9);
}
/* Reseaux sociaux du hero — 08/09/2026.
Rappel discret sous la mention "Devis et deplacement gratuits...", destine aux
ecrans ou la barre superieure et ses logos sont masques (en dessous de 1100 px).
Le bloc est place APRES les boutons Appeler / Demander un devis : ceux-ci ne
sont ni deplaces ni reduits, et la barre d'action fixe du bas (.action-bar)
n'est pas concernee.
Zone tactile de 44 px (recommandation d'accessibilite) pour un logo de 20 px.
Le retrait de 10 px a gauche aligne le premier logo sur le texte au-dessus :
sans lui, la zone tactile decalerait visuellement les logos vers la droite. */
.hero__social {
display: flex;
align-items: center;
gap: var(--sp-4);
list-style: none;
margin: var(--sp-8) 0 0 -10px;
padding: 0;
}
/* "display: flex" sur le
: evite le demi-pixel d'interligne sous le logo. */
.hero__social li { margin: 0; display: flex; }
.hero__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--r-pill);
}
.hero__social a:hover { background: rgba(255,255,255,.14); }
/* Logos de marque pleins : ils portent leurs propres couleurs et ne suivent donc
pas "currentColor" comme les icones au trait du site. */
.hero__social .icon { width: 20px; height: 20px; flex: none; opacity: .92; }
@media (min-width: 1100px) {
/* Au-dela de 1100 px, la barre superieure affiche deja ces deux logos. */
.hero__social { display: none; }
}
.hero__trades {
margin-top: var(--sp-16);
font-size: 0.875rem;
color: rgba(255,255,255,.85);
}
.hero__trades .sep { color: var(--wr-orange-light); padding-inline: 4px; }
/* CORRECTIF 03/09/2026 — DEBORDEMENT HORIZONTAL DE LA PAGE D'ACCUEIL SUR MOBILE
La liste des metiers du hero est ecrite sans espace autour des separateurs
("Toiture·Couverture…") : le navigateur la lisait
comme UN SEUL mot insecable de 558 px, ce qui rendait toute la page d'accueil
deroulable lateralement en dessous de 768 px (constate a 360 px et 390 px).
On insere un espace de largeur nulle apres chaque separateur : cela cree un
point de retour a la ligne SANS rien changer a l'apparence de la ligne.
Le HTML n'est pas touche. */
.hero__trades .sep::after { content: "\200B"; }
@media (min-width: 768px) {
.hero__inner { min-height: 460px; }
.hero__content { max-width: 640px; }
.hero .btn-row { flex-direction: row; }
.hero .btn-row .btn { width: auto; }
.hero__urgency { display: inline-flex; margin-top: var(--sp-20); min-height: 52px; }
.hero__trades { font-size: 0.9375rem; }
}
@media (min-width: 1024px) {
.hero__inner { min-height: 520px; }
.hero__content { max-width: 58.33%; }
.hero__veil {
background: linear-gradient(to right, rgba(15,30,46,.78), rgba(15,30,46,.35));
}
.hero h1 { font-size: 3.25rem; letter-spacing: -0.01em; }
.hero__chapo { font-size: 1.25rem; }
}
/* En-tete de page interne */
.page-head { background: var(--surface-1); padding-block: var(--sp-32); }
@media (min-width: 768px) { .page-head { padding-block: var(--sp-48); } }
.page-head h1 { margin-bottom: var(--sp-16); }
.page-head .lead { margin-bottom: var(--sp-24); }
.breadcrumb { font-size: 0.875rem; color: var(--text-600); padding-block: var(--sp-12); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--border-2); }
.breadcrumb a { color: var(--text-600); }
/* --------------------------------------------------------------------------
10. BANDEAU DE REASSURANCE (4 arguments)
-------------------------------------------------------------------------- */
.trust { background: var(--ink-900); color: #FFFFFF; padding-block: var(--sp-32); }
@media (min-width: 1024px) { .trust { padding-block: var(--sp-40); } }
.trust__grid { display: grid; gap: 0; }
.trust__item {
display: flex;
align-items: center;
gap: var(--sp-16);
padding-block: var(--sp-16);
border-top: 1px solid var(--ink-700);
}
.trust__item:first-child { border-top: 0; }
.trust__item .icon { width: 28px; height: 28px; flex: none; color: var(--wr-orange-light); }
.trust__item strong { display: block; font-size: 1rem; font-weight: 600; color: #FFFFFF; }
.trust__item span { display: block; font-size: 0.875rem; color: var(--text-invert-soft); }
@media (min-width: 768px) {
.trust__grid { grid-template-columns: 1fr 1fr; }
.trust__item:nth-child(2) { border-top: 0; }
}
@media (min-width: 1024px) {
.trust__grid { grid-template-columns: repeat(4, 1fr); }
.trust__item { border-top: 0; border-left: 1px solid var(--ink-700); padding: 0 var(--sp-20); }
.trust__item:first-child { border-left: 0; padding-left: 0; }
}
/* --------------------------------------------------------------------------
11. CARTES DE PRESTATIONS
-------------------------------------------------------------------------- */
.card-grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 1fr;
}
@media (min-width: 560px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-0);
border: 1px solid var(--border-1);
border-radius: var(--r-card);
box-shadow: var(--shadow-1);
overflow: hidden;
transition: transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--border-2); }
.card:hover .card__title { color: var(--wr-orange-action); }
.card:hover .card__media img { transform: scale(1.03); }
.card:focus-within { outline: 2px solid var(--text-900); outline-offset: 2px; }
.card__media { overflow: hidden; background: var(--surface-1); }
.card__media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform var(--t-move) var(--ease);
}
.card__body { padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-8); flex: 1; }
@media (min-width: 768px) { .card__body { padding: var(--sp-24); } }
.card__title { font-size: 1.25rem; font-weight: 600; margin: 0; transition: color var(--t-color) var(--ease); }
@media (min-width: 1024px) { .card__title { font-size: 1.375rem; } }
.card__title a { color: inherit; text-decoration: none; }
/* Lien etendu : la carte entiere est cliquable, un seul lien reel par carte */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; box-shadow: none; }
.card__text { font-size: 0.9375rem; line-height: 1.5; color: var(--text-600); margin: 0; }
.card__action { margin-top: auto; }
/* Carte sans photo disponible */
.card--noimg { border-top: 4px solid var(--wr-orange); }
.card--noimg .card__icon { width: 32px; height: 32px; color: var(--wr-orange-action); }
/* Bloc urgence de la grille toiture */
.urgency-cell {
display: flex;
flex-direction: column;
gap: var(--sp-12);
align-items: flex-start;
background: var(--urgency);
color: #FFFFFF;
border-radius: var(--r-card);
padding: var(--sp-24);
order: -1;
}
.urgency-cell h3 { color: #FFFFFF; margin: 0; }
.urgency-cell p { color: rgba(255,255,255,.9); font-size: 0.9375rem; margin: 0; }
.urgency-cell .icon-lg { width: 32px; height: 32px; }
@media (min-width: 560px) {
.urgency-cell { order: 0; grid-column: span 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
.urgency-cell .urgency-cell__text { flex: 1 1 300px; }
}
/* --------------------------------------------------------------------------
12. BLOC PETITES REPARATIONS
-------------------------------------------------------------------------- */
.repairs {
background: var(--surface-1);
border-left: 4px solid var(--wr-orange);
border-radius: var(--r-card);
padding: var(--sp-24);
display: flex;
gap: var(--sp-16);
align-items: flex-start;
}
@media (min-width: 768px) { .repairs { padding: var(--sp-32); } }
.repairs .icon-lg { width: 32px; height: 32px; flex: none; color: var(--wr-orange-action); }
.repairs h3 { margin-bottom: var(--sp-8); }
/* --------------------------------------------------------------------------
13. BLOC PROCESSUS
-------------------------------------------------------------------------- */
.process { display: grid; gap: var(--sp-24); }
@media (min-width: 1024px) { .process { grid-template-columns: 1fr 1fr; gap: var(--sp-48); align-items: start; } }
.process__card { background: var(--ink-900); color: #FFFFFF; border-radius: var(--r-card); padding: var(--sp-24); }
@media (min-width: 768px) { .process__card { padding: var(--sp-32); } }
.process__card h2 { color: #FFFFFF; }
.process__card p { color: var(--text-invert-soft); }
.steps { list-style: none; margin: var(--sp-24) 0 0; padding: 0; counter-reset: step; }
.steps li {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-16);
padding-bottom: var(--sp-20);
color: #FFFFFF;
font-weight: 600;
margin: 0;
}
.steps li:last-child { padding-bottom: 0; }
/* ==========================================================================
V1.3 — CELLULE URGENCE DE L'ACCUEIL (grille Toiture)
Remplace le gros rectangle rouge plein par un bandeau compact sur photo.
Texte et bouton en HTML/CSS, jamais incrustes dans l'image.
========================================================================== */
.urgency-cell--media {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255,122,69,.35);
background: #0B1622;
padding: 0; /* annule le padding de .urgency-cell */
display: block;
min-height: 200px;
}
.urgency-cell__bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 45%;
}
.urgency-cell__veil {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg, rgba(8,14,22,.93) 0%, rgba(8,14,22,.78) 55%, rgba(8,14,22,.40) 100%),
linear-gradient(180deg, rgba(160,26,26,.26) 0%, rgba(8,14,22,0) 62%);
}
.urgency-cell__content {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--sp-20);
padding: var(--sp-24);
min-height: 200px;
}
.urgency-cell--media .urgency-cell__text { color: #FFFFFF; }
.urgency-cell__kicker {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 6px;
font-family: var(--font-title, inherit);
font-weight: 700; font-size: .875rem;
letter-spacing: .14em; text-transform: uppercase;
color: #FF7A45;
}
.urgency-cell__kicker .icon { width: 17px; height: 17px; }
.urgency-cell__title {
margin: 0;
color: #FFFFFF;
font-size: clamp(1.625rem, 3.6vw, 2.125rem);
line-height: 1.06;
text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.urgency-cell__zone {
margin: 6px 0 0;
color: #DCE3EB;
font-size: .9375rem; font-weight: 600;
}
@media (max-width: 767px) {
.urgency-cell--media, .urgency-cell__content { min-height: 0; }
.urgency-cell__bg { object-position: 45% 45%; }
.urgency-cell__veil { background: linear-gradient(180deg, rgba(8,14,22,.70) 0%, rgba(8,14,22,.90) 100%); }
.urgency-cell__content { flex-direction: column; align-items: stretch; text-align: center; gap: var(--sp-16); padding: var(--sp-20); }
.urgency-cell__kicker { justify-content: center; }
.urgency-cell--media .urgency-band__cta { width: 100%; }
}
/* ==========================================================================
V1.3 — SECTION URGENCE FUITE : bandeau compact sur image
Remplace l'ancien grand bloc rouge plein. Texte et bouton en HTML/CSS,
jamais incrustes dans l'image.
========================================================================== */
.urgency-band { padding: var(--sp-32) 0 var(--sp-24); }
.urgency-band__card {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255,107,107,.30);
box-shadow: 0 14px 40px rgba(9,16,26,.28);
min-height: 260px;
display: flex;
align-items: center;
}
.urgency-band__bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 45%;
}
.urgency-band__veil {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg, rgba(8,14,22,.93) 0%, rgba(8,14,22,.80) 52%, rgba(8,14,22,.42) 100%),
linear-gradient(180deg, rgba(160,26,26,.28) 0%, rgba(8,14,22,0) 60%);
}
.urgency-band__content {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--sp-24);
width: 100%;
/* P1-11 — etait `var(--sp-28)`, variable qui n'existe pas : le padding
tombait a 0 et le contenu touchait les bords sur ordinateur.
32px est la valeur de l'echelle immediatement superieure. */
padding: var(--sp-32) var(--sp-32);
}
.urgency-band__text { color: #FFFFFF; }
.urgency-band__kicker {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 8px;
font-family: var(--font-title, inherit);
font-weight: 700; font-size: .9375rem;
letter-spacing: .14em; text-transform: uppercase;
color: #FF7A45; /* orange chaud, pas de pave rouge */
}
.urgency-band__kicker .icon { width: 18px; height: 18px; }
.urgency-band__title {
margin: 0;
color: #FFFFFF;
/* P1-05 : legerement reduit pour laisser la place a la ligne de
disponibilite juste en dessous, sans cesser de dominer le bloc. */
font-size: clamp(1.625rem, 3.8vw, 2.375rem);
line-height: 1.1;
letter-spacing: .01em;
text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
/* P1-05 : la disponibilite recupere le poids visuel qu'avait le H1. */
.urgency-band__avail {
margin: 6px 0 0;
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(1.5rem, 3.4vw, 2rem);
line-height: 1.1;
color: #FFFFFF;
text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.urgency-band__zone {
margin: 8px 0 0;
color: #DCE3EB;
font-size: 1rem; font-weight: 600;
}
.urgency-band__cta {
display: inline-flex; flex-direction: column; align-items: center;
gap: 2px;
padding: 14px var(--sp-24);
border-radius: 12px;
text-decoration: none;
color: #FFFFFF;
background: linear-gradient(180deg, #E23A2E 0%, #C1231A 100%);
border: 1px solid rgba(255,160,120,.55);
box-shadow: 0 10px 26px rgba(200,35,25,.42);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.urgency-band__cta:hover, .urgency-band__cta:focus-visible {
color: #FFFFFF; text-decoration: none;
filter: brightness(1.06);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(200,35,25,.55);
}
.urgency-band__cta:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.urgency-band__cta-label {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-title, inherit);
font-weight: 700; font-size: .875rem;
letter-spacing: .08em; text-transform: uppercase;
}
.urgency-band__cta-label .icon { width: 18px; height: 18px; }
.urgency-band__cta-number {
font-family: var(--font-title, inherit);
font-weight: 700;
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
line-height: 1.15;
white-space: nowrap;
}
@media (max-width: 767px) {
.urgency-band__card { min-height: 0; }
.urgency-band__bg { object-position: 45% 45%; }
.urgency-band__veil { background: linear-gradient(180deg, rgba(8,14,22,.72) 0%, rgba(8,14,22,.90) 100%); }
.urgency-band__content { flex-direction: column; align-items: stretch; text-align: center; padding: var(--sp-24) var(--sp-20); gap: var(--sp-20); }
.urgency-band__kicker { justify-content: center; }
.urgency-band__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.urgency-band__cta { transition: none; }
.urgency-band__cta:hover { transform: none; }
}
/* ==========================================================================
V1.2 — HERO ACCUEIL : bloc rouge urgence distinct
Specification conception-ui-ux-wr.md 7.1 : bloc rouge separe des deux
boutons commerciaux, jamais un troisieme bouton de meme nature.
========================================================================== */
.hero__urgency--block {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: var(--sp-20); /* separation nette des 2 CTA */
min-height: 52px;
padding: 0 var(--sp-20);
border-radius: 8px;
background: rgba(211, 47, 47, .92);
border: 1px solid rgba(255, 107, 107, .55);
color: #FFFFFF;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 6px 20px rgba(211, 47, 47, .38);
transition: background-color .18s ease, transform .18s ease;
}
.hero__urgency--block .icon { width: 20px; height: 20px; flex: none; }
.hero__urgency--block:hover,
.hero__urgency--block:focus-visible {
background: #B71C1C;
color: #FFFFFF;
transform: translateY(-1px);
text-decoration: none;
}
.hero__urgency--block:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 767px) {
.hero__urgency--block { display: flex; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.hero__urgency--block { transition: none; }
.hero__urgency--block:hover { transform: none; }
}
/* ==========================================================================
V1.1 — WATERMARK DES PHOTOS DE REALISATIONS
Le logo est superpose en CSS, JAMAIS incruste dans le fichier image :
les originaux et les copies web restent intacts.
Il est purement decoratif : non cliquable, invisible pour les lecteurs
d'ecran. C'est la CARTE du projet qui reste cliquable, pas le watermark.
Pour l'activer : ajouter la classe .is-watermarked sur la figure.
========================================================================== */
.ba__item, .figure, .project-card figure { position: relative; }
.is-watermarked::after {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
width: clamp(64px, 18%, 110px);
aspect-ratio: 2 / 1;
background-image: url("../img/logo/wr-couverture-wiss-logo.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
opacity: .42; /* assez discret pour ne pas gener la photo */
filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
pointer-events: none; /* jamais cliquable */
z-index: 2;
}
/* Sur une photo tres claire, on renforce legerement la lisibilite */
.is-watermarked--light::after { opacity: .55; }
/* Position alternative si le sujet occupe le coin bas-droit */
.is-watermarked--bl::after { right: auto; left: 10px; background-position: left bottom; }
@media (max-width: 480px) {
.is-watermarked::after { width: clamp(52px, 24%, 80px); right: 8px; bottom: 8px; opacity: .38; }
}
@media print { .is-watermarked::after { display: none; } }
/* --------------------------------------------------------------------------
P1-12 — VISIONNEUSE (lightbox)
Specification conception-ui-ux-wr.md 13.4. Jamais implementee jusqu'ici :
aucune photo du site n'etait agrandissable, alors que le seul avantage
concurrentiel du site est la preuve photo. A 375px, une image de
comparatif ne fait que 163px de large.
-------------------------------------------------------------------------- */
/* Indice visuel : sans cela, personne ne devine qu'une image est cliquable. */
.ba__item, .photo-grid figure, .photo-solo { cursor: zoom-in; }
.ba__item::before, .photo-grid figure::before, .photo-solo::before {
content: "";
position: absolute;
right: 10px; top: 10px;
width: 32px; height: 32px;
border-radius: 999px;
background-color: rgba(15,30,46,.72);
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
opacity: 0;
transition: opacity var(--t-color) var(--ease);
z-index: 3;
pointer-events: none;
}
.ba__item:hover::before, .photo-grid figure:hover::before, .photo-solo:hover::before,
.ba__item:focus-visible::before, .photo-grid figure:focus-visible::before, .photo-solo:focus-visible::before { opacity: 1; }
/* Sur tactile, aucun survol : la pastille reste visible en permanence. */
@media (hover: none) {
.ba__item::before, .photo-grid figure::before, .photo-solo::before { opacity: .6; }
}
.photo-grid figure, .photo-solo { position: relative; }
.lightbox {
position: fixed; inset: 0; z-index: 200;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: rgba(9,16,25,.94);
padding: 24px;
opacity: 0;
transition: opacity var(--t-panel) var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; }
.lightbox__figure {
position: relative;
margin: 0;
max-width: 100%;
transform: scale(.98);
transition: transform var(--t-panel) var(--ease);
}
.lightbox[data-open="true"] .lightbox__figure { transform: scale(1); }
.lightbox__img {
max-width: 100%;
max-height: calc(100vh - 190px);
width: auto; height: auto;
border-radius: var(--r-card);
}
/* D-12 : le watermark est conserve dans la visionneuse, mais plus discret
(30 % contre 42 % dans la page). Il n'est pose QUE si la figure d'origine
le portait : une photo sans watermark ne doit pas en gagner un.
Le logo reste en CSS : jamais incruste dans les fichiers image. */
.lightbox__figure.is-watermarked::after { opacity: .30; }
.lightbox__tag {
position: absolute; top: 10px; left: 10px;
height: 24px; padding: 0 10px;
display: inline-flex; align-items: center;
border-radius: var(--r-badge);
font-size: .75rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: #FFFFFF;
background: rgba(15,30,46,.85);
}
.lightbox__legende {
margin: 12px 0 0; max-width: 900px;
color: #FFFFFF; text-align: center; font-size: .9375rem;
}
.lightbox__compteur { margin: 8px 0 0; color: var(--text-invert-soft); font-size: .875rem; }
.lightbox__fermer, .lightbox__prec, .lightbox__suiv {
position: absolute;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.12);
border: 0; border-radius: 999px;
color: #FFFFFF; cursor: pointer;
transition: background var(--t-color) var(--ease);
}
.lightbox__fermer:hover, .lightbox__prec:hover, .lightbox__suiv:hover { background: rgba(255,255,255,.24); }
.lightbox__fermer { top: 16px; right: 16px; width: 44px; height: 44px; }
.lightbox__prec, .lightbox__suiv { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__prec { left: 16px; }
.lightbox__suiv { right: 16px; }
.lightbox__fermer .icon, .lightbox__prec .icon, .lightbox__suiv .icon { width: 24px; height: 24px; }
/* Sur mobile, les fleches passent sous l'image pour ne pas la recouvrir. */
@media (max-width: 767px) {
.lightbox__prec, .lightbox__suiv { top: auto; bottom: 20px; transform: none; }
.lightbox__prec { left: 20%; }
.lightbox__suiv { right: 20%; }
.lightbox__img { max-height: calc(100vh - 240px); }
}
@media (prefers-reduced-motion: reduce) {
.lightbox, .lightbox__figure { transition: none; }
}
/* --- Localisation d'une realisation ---
La commune n'est affichee QUE si elle est connue.
Un champ vide ne doit produire AUCUN texte de remplacement.
Pour afficher :