, no script; both answer layers stay in the page. Same look as the FAQ
further down: a row with the plus sign, mist and a cyan bar once open. */
.citable[data-acordeon] { margin: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--cc-ghost); }
.citable[data-acordeon]:first-of-type { border-top: 1px solid var(--cc-ghost); }
.citable[data-acordeon] > summary {
position: relative; display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 12px;
min-height: 76px; padding: 18px clamp(16px, 2vw, 26px) 18px clamp(18px, 2vw, 30px);
list-style: none; cursor: pointer;
}
.citable[data-acordeon] > summary::-webkit-details-marker { display: none; }
.citable[data-acordeon] > summary:focus-visible { outline: 3px solid var(--cc-blue-cta); outline-offset: -3px; }
.citable[data-acordeon] .citable__q { margin: 0; font-size: clamp(18px, 1.7vw, 23px); }
.citable[data-acordeon] > summary:hover .citable__q { color: var(--cc-blue-ink); }
.citable[data-acordeon][open] { background: var(--cc-mist); border-bottom-color: transparent; }
.citable[data-acordeon][open] > summary::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cc-cyan);
}
.citable[data-acordeon][open] .faq__sign::after { transform: rotate(90deg) scaleX(0); }
.citable[data-acordeon] > :not(summary) { margin-inline: clamp(18px, 2vw, 30px); }
/* On the open row's mist the short answer's own mist would vanish: it turns white. */
.citable[data-acordeon] .citable__court { background: var(--cc-white); }
.citable[data-acordeon] .citable__complet { padding-bottom: 10px; }
/* Service pages: « Lire la suite » (Iulian, 2026-09-27). The question and the short answer
stay in view; the complete answer folds under them in a native
, still in the
page and in the FAQPage data. The label swaps to « Réduire » once open. */
.citable__court + .citable__suite { margin-top: -8px; }
.citable__suite > summary {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
font-family: var(--ff-display); font-weight: 700; font-size: 16px;
color: var(--cc-blue-ink); list-style: none; cursor: pointer;
}
.citable__suite > summary::-webkit-details-marker { display: none; }
.citable__suite > summary::after {
content: ''; width: 8px; height: 8px; margin-top: -4px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .2s ease;
}
.citable__suite[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.citable__suite > summary:hover span, .citable__suite > summary:focus-visible span {
text-decoration: underline; text-decoration-color: var(--cc-cyan); text-underline-offset: 3px;
}
.citable__suite > summary:focus-visible { outline: 3px solid var(--cc-blue-cta); outline-offset: 3px; }
.citable__suite [data-ouvert], .citable__suite[open] [data-ferme] { display: none; }
.citable__suite[open] [data-ouvert] { display: inline; }
.citable__suite[open] > summary { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .citable__suite > summary::after { transition: none; } }
/* ---------- « À lire aussi » ---------- */
.alire { padding: clamp(40px, 5vw, 70px) 0; background: var(--cc-mist); }
.alire__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.alire__titre {
font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; font-size: 14px; color: var(--cc-blue-deep); margin: 0 0 18px;
}
.alire__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.alire__liste li { border-top: 2px solid var(--cc-cyan-deep); padding-top: 14px; }
.alire__liste a {
display: block; font-family: var(--ff-display); font-weight: 700; font-size: 17px;
color: var(--cc-ink); text-decoration: none; margin-bottom: 6px;
}
.alire__liste a:hover, .alire__liste a:focus-visible { color: var(--cc-blue-ink); text-decoration: underline; }
.alire__liste span { font-size: 15px; color: var(--cc-ink-soft); line-height: 1.55; }
@media (max-width: 900px) { .alire__liste { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
ANTET DE ORAS CU FOTOGRAFIE (probă pe /isolation-meaux)
Reia scena semnata a hero-ului de pe prima pagina — .hero__scene /
.hero__echo / .hero__media / .hero__shade — fara nicio clasa noua.
Fotografia pastreaza taietura diagonala a hero-ului; se schimba doar
voalul, fiindcă antetul de oras e mult mai scund decat hero-ul si
gradientul semnat s-ar stinge inainte sa ajunga la text.
========================================================================== */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head .hero__scene { inset: 0; }
/* The photo's fills the frame — here and, since the real photos (2026-09-28, poze.mjs
wraps the home hero's ![]()
in one), on the home page too. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.page-head .hero__shade {
background:
linear-gradient(180deg, color-mix(in srgb, var(--cc-navy) 92%, transparent) 0%, color-mix(in srgb, var(--cc-navy) 60%, transparent) 48%, color-mix(in srgb, var(--cc-navy) 30%, transparent) 100%),
linear-gradient(90deg, color-mix(in srgb, var(--cc-navy) 96%, transparent) 0%, color-mix(in srgb, var(--cc-navy) 74%, transparent) 40%, transparent 76%);
}
.page-head__inner { position: relative; z-index: 3; }
/* Pe ecran ingust foaia semnata intinde fotografia pe toata latimea SI stinge
sclipirea cyan (`.hero__echo { display: none }`) — deci voalul trebuie pus
pe `.hero__shade`, singurul strat care mai exista acolo. Fara el, textul alb
cade pe peretele luminos. */
@media (max-width: 900px) {
.page-head .hero__shade {
background: linear-gradient(180deg,
color-mix(in srgb, var(--cc-navy) 90%, transparent) 0%, color-mix(in srgb, var(--cc-navy) 78%, transparent) 40%, color-mix(in srgb, var(--cc-navy) 84%, transparent) 72%, color-mix(in srgb, var(--cc-navy) 94%, transparent) 100%);
}
}
/* ==========================================================================
BUTONUL DIN CASETA LATERALA
`.prose-aside a` (0,1,1) batea `.btn--primary` (0,1,0), deci textul butonului
iesea albastru-inchis pe albastru — practic necitibil. Se vede pe cele 20 de
pagini care au caseta.
========================================================================== */
.prose-aside .btn--primary,
.prose-aside .btn--primary:hover,
.prose-aside .btn--primary:focus-visible { color: var(--cc-white); }
/* ==========================================================================
SECTIUNEA DE INCHEIERE — DEGRADE DIN CULORILE FIRMEI
Fara fotografie: un degrade in diagonala, pe aceeasi inclinare ca taietura
semnata, din bleumarinul de subsol pana la albastrul-verzui al marcii.
Doar jetoane existente, nicio culoare scrisa in dur.
========================================================================== */
.cta {
background: linear-gradient(112deg,
var(--cc-deep) 0%, var(--cc-navy) 42%, var(--cc-blue-deep) 86%, var(--cc-cyan-deep) 118%);
}
.cta__inner h2 { color: var(--cc-white); }
.cta__inner > p { color: var(--cc-white); }
.cta__trust { color: var(--cc-ghost); }
/* Fundalul e acum inchis la culoare, deci butonul al doilea se intoarce la
varianta semnata pentru fundal inchis (era rescris pentru fundal deschis). */
.cta .btn--ghost {
background: transparent; color: var(--cc-white); border-color: color-mix(in srgb, var(--cc-white) 46%, transparent);
}
.cta .btn--ghost:hover, .cta .btn--ghost:focus-visible {
background: transparent; border-color: var(--cc-cyan); color: var(--cc-cyan);
}
/* Perechea de fotografii sta acum intre text si intrebari, nu lipita de
incheiere — deci ii trebuie aer si dedesubt, nu doar deasupra. */
.ville__rythme { padding-block: clamp(34px, 4.4vw, 66px); }
/* Sensul degradeului urmeaza subsolul, ca sa se continue una in alta.
Pe ecran lat subsolul are campul albastru deschis la STANGA, cu o muchie
aproape verticala — deci degradeul pleaca din acelasi albastru, tot din
stanga, si ajunge in inchisul lui. */
.cta {
background: linear-gradient(97deg,
var(--cc-blue) 0%, var(--cc-blue-deep) 20%, var(--cc-navy) 58%, var(--cc-deep) 100%);
}
/* Pe telefon subsolul se aseaza in coloana si INCEPE cu blocul albastru, deci
degradeul se intoarce pe verticala: inchis sus, albastrul subsolului jos. */
@media (max-width: 900px) {
.cta {
background: linear-gradient(0deg,
var(--cc-blue) 0%, var(--cc-blue-deep) 24%, var(--cc-navy) 62%, var(--cc-deep) 100%);
}
}
/* Titlul incheierii rupea semnul intrebarii singur pe al treilea rand la telefon
(«… À MEAUX» / «?»). `balance` imparte randurile egal si nu mai lasa orfani. */
.cta__inner h2 { text-wrap: balance; }
/* ==========================================================================
Paginile de meserie: raspunsul intai (proba 2026-09-22 pe pod, pe toate trei din 2026-09-23).
Benzile de triere isi scriu raspunsul ( sub intrebare), lista « ce
cuprinde » sta cu reperele pe fundal pal, zona are harta ei alaturi.
Prinderea e pe data-* si pe elemente sub clase semnate: nicio clasa noua.
========================================================================== */
/* Benzile cu raspuns: inaltimea o da textul, nu mai e fixa. Raspunsul are 19 px
ingrosat ca sa conteze drept « text mare » (prag 3:1): albul pe albastrul benzii
face 3,23:1, pe verde-albastru 3,97:1 — sub 4,5, deci nu poate fi text mic. */
.signals[data-reponses] .signal { height: auto; min-height: clamp(126px, 12vw, 178px); }
.signals[data-reponses] .signal__panel {
position: relative; min-height: inherit;
padding-top: clamp(22px, 2.4vw, 32px); padding-bottom: clamp(22px, 2.4vw, 32px);
}
.signals[data-reponses] .signal__text small {
display: block; max-width: 34ch; margin-top: 10px;
font-family: var(--ff-body); font-weight: 700; font-size: 19px; line-height: 1.4;
text-transform: none; letter-spacing: 0; color: var(--cc-white); text-wrap: pretty;
}
/* « L'aiguillage » (chosen by Iulian on 2026-09-24, on top of « Côté vous, côté nous »,
after the design verifier found no page-level hierarchy): the band that says « yes, this
is for you » (-> devis) is the main track — full width, no photo (the page header shows
the same one), bigger type. The two bands that send you to another trade branch off it
through one cyan line (the signed tick, made continuous), half width each. */
.signals[data-mod="aiguillage"] .signals__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(18px, 2vw, 26px); row-gap: 0;
}
/* flex: the panel fills its card, so the two branches share one row height */
.signals[data-mod="aiguillage"] .signal { width: 100%; margin: 0; display: flex; }
/* the main track */
.signals[data-mod="aiguillage"] .signal--1 { grid-column: 1 / -1; min-height: clamp(200px, 17vw, 260px); }
.signals[data-mod="aiguillage"] .signal--1 .signal__panel,
.signals[data-mod="aiguillage"] .signal--1:hover .signal__panel,
.signals[data-mod="aiguillage"] .signal--1:focus-visible .signal__panel { width: 100%; }
.signals[data-mod="aiguillage"] .signal--1 .signal__panel { padding-right: clamp(96px, 9vw, 150px); }
.signals[data-mod="aiguillage"] .signal--1 .signal__text { font-size: clamp(28px, 3vw, 42px); }
.signals[data-mod="aiguillage"] .signal--1 .signal__text small { max-width: 44ch; font-size: 22px; text-wrap: balance; }
.signals[data-mod="aiguillage"] .signal--1 .signal__arrow { font-size: 34px; }
/* Every band answers the pointer with its arrow, never by widening its panel: the signed sheet animated `width`,
which re-runs the layout on every frame (agency-btp motion.md; Iulian, 2026-09-27). */
.signals[data-mod="aiguillage"] .signal__panel { transition: none; }
.signals[data-mod="aiguillage"] .signal__arrow { transition: transform .25s var(--ease); }
.signals[data-mod="aiguillage"] .signal:hover .signal__arrow,
.signals[data-mod="aiguillage"] .signal:focus-visible .signal__arrow { transform: translateX(5px); }
/* the tick sits over the start of the text, whatever the width (not by the arrow) */
.signals[data-mod="aiguillage"] .signal--1 .signal__tick { left: clamp(24px, 3.4vw, 40px); right: auto; }
/* the two branches */
.signals[data-mod="aiguillage"] .signal--2 .signal__text,
.signals[data-mod="aiguillage"] .signal--3 .signal__text { font-size: clamp(19px, 1.6vw, 23px); }
.signals[data-mod="aiguillage"] .signal--2 .signal__panel,
.signals[data-mod="aiguillage"] .signal--3 .signal__panel { width: 78%; align-items: flex-start; }
.signals[data-mod="aiguillage"] .signal__text small { text-wrap: balance; }
.signals[data-mod="aiguillage"] .signal--2:hover .signal__panel,
.signals[data-mod="aiguillage"] .signal--2:focus-visible .signal__panel,
.signals[data-mod="aiguillage"] .signal--3:hover .signal__panel,
.signals[data-mod="aiguillage"] .signal--3:focus-visible .signal__panel { width: 78%; }
/* the switch: one stem out of the main track, splitting towards the two branches */
.signals[data-mod="aiguillage"] [data-aiguillage] {
grid-column: 1 / -1; position: relative; display: block; height: 52px;
}
.signals[data-mod="aiguillage"] [data-aiguillage]::before {
content: ''; position: absolute; left: calc(50% - 2.5px); top: 0;
width: 5px; height: 24px; background: var(--cc-cyan);
}
.signals[data-mod="aiguillage"] [data-aiguillage]::after {
content: ''; position: absolute; top: 24px; bottom: 0; left: 25%; right: 25%;
border: 5px solid var(--cc-cyan); border-bottom: 0;
}
@media (max-width: 1024px) {
/* half-width branches would leave ~160 px of text on a tablet: the bands stack */
.signals[data-mod="aiguillage"] .signals__grid {
grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 2vw, 26px);
}
.signals[data-mod="aiguillage"] [data-aiguillage] { display: none; }
}
@media (max-width: 700px) {
.signals[data-mod="aiguillage"] .signal .signal__panel,
.signals[data-mod="aiguillage"] .signal:hover .signal__panel,
.signals[data-mod="aiguillage"] .signal:focus-visible .signal__panel { width: 100%; }
/* no photo under the main track on phones either: a plain blue band, no fade */
.signals[data-mod="aiguillage"] .signal--1 .signal__panel {
display: block; margin-bottom: 0; padding: 30px 22px; background: var(--cc-blue);
}
/* the arrow goes to the bottom corner, so the question gets the whole width and keeps the
line break of the source (« Façade libre, / ravalement prévu ? ») down to 360 px */
.signals[data-mod="aiguillage"] .signal--1 .signal__arrow { position: absolute; right: 22px; bottom: 24px; }
.signals[data-mod="aiguillage"] .signal--1 .signal__text { font-size: 21px; }
.signals[data-mod="aiguillage"] .signal--1 .signal__text small { padding-right: 34px; }
.signals[data-mod="aiguillage"] .signal--1 .signal__text small { font-size: 19px; }
.signals[data-mod="aiguillage"] .signal--1 .signal__tick { left: auto; right: 0; }
.signals[data-mod="aiguillage"] .signal--2 .signal__photo,
.signals[data-mod="aiguillage"] .signal--3 .signal__photo { max-height: 170px; }
}
/* Reperele si lista « ce cuprinde », pe fundal pal (rupe albul de la mijloc). */
.guide[data-fond="pal"] { background: var(--cc-mist); }
/* « Côté vous, côté nous » (chosen by Iulian on 2026-09-24 out of three trials on the
attic page): the Vous / Nous code of the steps, carried up to the middle of the page.
Outlined tiles = what changes for you (the repères); filled tiles with the signed
oblique edge = what the work includes (the « comprend » points). The row labels are
the steps' own (« Vous », « Nous »), written the same way. */
.guide[data-mod="vous-nous"] [data-rang] {
display: grid; grid-template-columns: clamp(64px, 6vw, 96px) minmax(0, 1fr);
column-gap: clamp(12px, 1.4vw, 20px); padding: 28px 0;
}
.guide[data-mod="vous-nous"] [data-rang="nous"] { border-top: 2px dashed var(--cc-cyan-deep); }
.guide[data-mod="vous-nous"] [data-rang]::before {
grid-column: 1; grid-row: 1 / -1; padding-top: 20px;
font-family: var(--ff-display); font-weight: 800; font-size: 13px;
letter-spacing: .12em; text-transform: uppercase;
}
.guide[data-mod="vous-nous"] [data-rang="vous"]::before { content: 'Vous'; color: var(--cc-blue-ink); }
.guide[data-mod="vous-nous"] [data-rang="nous"]::before { content: 'Nous'; color: var(--cc-ink); padding-top: 4px; }
.guide[data-mod="vous-nous"] [data-rang] > h3 {
grid-column: 2; grid-row: 1; margin: 0 0 16px;
font-size: clamp(18px, 1.5vw, 21px); color: var(--cc-ink);
}
.guide[data-mod="vous-nous"] [data-qui] {
grid-column: 2; list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px);
}
.guide[data-mod="vous-nous"] [data-rang="nous"] [data-qui] { grid-row: 2; }
.guide[data-mod="vous-nous"] [data-qui="vous"] li {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-content: start;
padding: clamp(18px, 2vw, 26px); border: 1px solid var(--cc-blue-ink);
}
.guide[data-mod="vous-nous"] [data-qui="vous"] .guide__icon { grid-row: 1 / span 2; }
.guide[data-mod="vous-nous"] [data-qui="vous"] .guide__icon svg { width: 40px; }
.guide[data-mod="vous-nous"] [data-qui="vous"] .guide__title { font-size: clamp(18px, 1.5vw, 21px); }
/* same indent as the title, which sits after the signed cyan bar (styles.css .guide__title) */
.guide[data-mod="vous-nous"] [data-qui="vous"] .guide__text { line-height: 1.55; padding-left: clamp(18px, 2vw, 30px); }
.guide[data-mod="vous-nous"] [data-qui="nous"] li {
padding: clamp(16px, 1.8vw, 22px) clamp(30px, 2.8vw, 40px) clamp(16px, 1.8vw, 22px) clamp(18px, 1.8vw, 24px);
background: var(--cc-blue-ink); color: var(--cc-white); font-size: 16px; line-height: 1.5;
clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
@media (max-width: 900px) {
.guide[data-mod="vous-nous"] [data-qui] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
/* one column, in reading order: label, heading, tiles */
.guide[data-mod="vous-nous"] [data-rang] { display: block; }
.guide[data-mod="vous-nous"] [data-rang]::before { display: block; padding: 0 0 12px; }
.guide[data-mod="vous-nous"] [data-qui="vous"] .guide__text { padding-left: 16px; }
}
/* Zona cu harta alaturi: lista in stanga, harta in dreapta; pe ecran ingust harta vine
sub titlu, deasupra listei (ordinea din marcaj). Harta: cele trei departamente ale
zonei (colorate) si Ile-de-France, cu Parisul ca reper. Marimile de text sunt in
unitatile desenului (lat de 520): alese ca sa ramana >= 12 px la orice latime. */
.zones[data-carte] .zones__inner {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
column-gap: clamp(32px, 5vw, 88px);
}
.zones[data-carte] .sec-head { grid-column: 1; grid-row: 1; }
.zones[data-carte] .zones__stage { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.zones[data-carte] .zones__list {
grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zones[data-carte] .zones__more { grid-column: 1; grid-row: 3; }
.zones[data-carte] [data-ailleurs] { grid-column: 1; grid-row: 4; align-self: start; }
.zones[data-carte] .zones__stage svg {
display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto;
}
.zones[data-carte] [data-couche] path { stroke-linejoin: round; }
.zones[data-carte] [data-couche="voisins"] path {
fill: var(--cc-navy); stroke: var(--cc-cyan); stroke-opacity: .45; stroke-width: 1;
}
.zones[data-carte] [data-couche="zona"] path { fill: var(--cc-blue); stroke: var(--cc-deep); stroke-width: 1; }
.zones[data-carte] svg text {
font-family: var(--ff-body); font-size: 15px; dominant-baseline: central; fill: var(--cc-white);
}
.zones[data-carte] [data-couche="voisins"] text,
.zones[data-carte] [data-couche="zona"] text { font-family: var(--ff-display); font-weight: 800; }
.zones[data-carte] [data-couche="voisins"] text { fill-opacity: .75; }
/* Pe albastru, cerneala inchisa (5,2:1): albul ar fi dat doar 3,23:1. */
.zones[data-carte] [data-couche="zona"] text,
.zones[data-carte] [data-couche="atelier"] text { fill: var(--cc-deep); }
.zones[data-carte] [data-couche="paris"] circle { fill: var(--cc-white); }
.zones[data-carte] [data-couche="atelier"] circle:first-of-type {
fill: none; stroke: var(--cc-white); stroke-width: 1.5;
}
.zones[data-carte] [data-couche="atelier"] circle:last-of-type {
fill: var(--cc-deep); stroke: var(--cc-white); stroke-width: 2;
}
/* Granita dintre departamente trece chiar pe sub nume: un contur de culoarea fondului
o ascunde sub litere (paint-order pune conturul in spatele umpluturii). */
.zones[data-carte] [data-couche="atelier"] text {
font-weight: 800; paint-order: stroke; stroke: var(--cc-blue); stroke-width: 5px; stroke-linejoin: round;
}
@media (max-width: 1080px) {
.zones[data-carte] svg text { font-size: 18px; }
}
@media (max-width: 900px) {
.zones[data-carte] .zones__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.zones[data-carte] .sec-head, .zones[data-carte] .zones__stage, .zones[data-carte] .zones__list,
.zones[data-carte] .zones__more, .zones[data-carte] [data-ailleurs] { grid-column: 1; grid-row: auto; }
.zones[data-carte] .zones__stage { margin: 0 0 clamp(28px, 6vw, 40px); }
.zones[data-carte] .zones__stage svg { max-width: 440px; margin-inline: 0; }
.zones[data-carte] svg text { font-size: 17px; }
}
/* « Où intervenez-vous ? » sub intrebarile de pe /faq (Iulian, 2026-10-10): banda mai
joasa, harta micsorata in stanga, intrebarea in dreapta; pe ecran ingust harta vine
deasupra textului. La 320 px lat, 21 de unitati de desen dau ~13 px de text. */
.zones[data-carte][data-mod="mini"] { padding: clamp(48px, 6vw, 88px) 0; }
/* Randurile 1fr de sus si de jos iau inaltimea hartii: textul ramane un singur bloc,
centrat pe verticala langa ea. */
.zones[data-carte][data-mod="mini"] .zones__inner {
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
grid-template-rows: 1fr auto auto 1fr;
}
.zones[data-carte][data-mod="mini"] .zones__stage { grid-column: 1; grid-row: 1 / -1; }
.zones[data-carte][data-mod="mini"] .sec-head { grid-column: 2; grid-row: 2; margin-bottom: 18px; }
.zones[data-carte][data-mod="mini"] .zones__more { grid-column: 2; grid-row: 3; margin: 0; }
.zones[data-carte][data-mod="mini"] .zones__stage svg { max-width: 320px; margin-inline: 0; }
.zones[data-carte][data-mod="mini"] svg text { font-size: 21px; }
@media (max-width: 900px) {
.zones[data-carte][data-mod="mini"] .zones__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.zones[data-carte][data-mod="mini"] .sec-head,
.zones[data-carte][data-mod="mini"] .zones__more { grid-column: 1; grid-row: auto; }
.zones[data-carte][data-mod="mini"] .zones__stage { grid-column: 1; grid-row: auto; order: -1; }
}
/* Legenda hartii de pe /zone-intervention (Iulian, 2026-10-10): judetele zonei cu numarul de
comune care au pagina, Parisul si cercul atelierului. Semnele au culorile straturilor din
desen: albastru = judetele zonei, punct alb = Paris, cerc alb = imprejurimile atelierului. */
.zones[data-carte] [data-legende] {
margin: clamp(24px, 2.6vw, 36px) 0 0; padding: 0; list-style: none; max-width: 460px;
}
.zones[data-carte] [data-legende] li {
display: flex; align-items: center; gap: 14px; padding: 12px 0;
border-bottom: 1px solid color-mix(in srgb, var(--cc-white) 14%, transparent);
font-size: 16px; color: var(--cc-white);
}
.zones[data-carte] [data-legende] li:last-child { border-bottom: 0; }
.zones[data-carte] [data-legende] li::before { content: ""; flex: none; width: 18px; height: 18px; }
.zones[data-carte] [data-legende] [data-cle="zona"]::before { background: var(--cc-blue); }
.zones[data-carte] [data-legende] [data-cle="paris"]::before {
width: 9px; height: 9px; margin-inline: 4.5px; border-radius: 50%; background: var(--cc-white);
}
.zones[data-carte] [data-legende] [data-cle="atelier"]::before { border: 1.5px solid var(--cc-white); border-radius: 50%; }
.zones[data-carte] [data-legende] li span:first-child { font-family: var(--ff-display); font-weight: 700; }
.zones[data-carte] [data-legende] li span + span { margin-left: auto; font-size: 15px; color: var(--cc-ghost); }
@media (max-width: 700px) {
/* Pe telefon panoul nu mai sta peste poza (ar fi iesit din ea, cu raspunsul): vine
deasupra ei, iar ultimii 62 px — dizolvarea semnata — se intind peste poza. */
.signals[data-reponses] .signal { display: flex; flex-direction: column; min-height: 0; }
.signals[data-reponses] .signal__panel {
position: relative; order: -1; z-index: 1; min-height: 0; margin-bottom: -62px;
padding-top: 18px; padding-bottom: 62px;
}
.signals[data-reponses] .signal__text small { max-width: none; }
}
@media (max-width: 640px) {
.zones[data-carte] .zones__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
.zones[data-carte] svg text { font-size: 21px; }
}
/* ==========================================================================
Pasii — « Trois images » (decizia lui Iulian 2026-09-25, dupa probele
/_proba/acasa-pasi-c si /_proba/combles-pasi-c, fond bleumarin): pe prima
pagina si pe cele 3 meserii, trei coloane — poza pasului taiata pe diagonala
semnata, cu muchia cyan de-a lungul taieturii (tehnica usilor de pe
/services), titlul si textul. Inlocuieste cartile oblice ale paginii semnate
si asezarea « Vous / Nous » a meseriilor (2026-09-22). Cifrele pasilor (01–03,
in coltul alb de sub taietura) au iesit pe 2026-09-26, la cererea lui Iulian:
ordinea o da lista, titlurile spun pasul.
Nicio clasa noua: data-mod + elemente.
========================================================================== */
.process[data-mod="imagini"] .process__track--3 {
gap: clamp(18px, 2.2vw, 30px); align-items: stretch;
}
/* the signed step (oblique box, cyan ::after edge) is switched off: a clip-path
on .step would also crop the photo */
.process[data-mod="imagini"] .step {
display: flex; flex-direction: column;
min-height: 0; margin: 0; padding: 0; background: var(--cc-white); clip-path: none;
}
.process[data-mod="imagini"] .step::after { display: none; }
.process[data-mod="imagini"] .step picture {
position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
}
/* thermal echo edge: a cyan band parallel to the cut, drawn as a layer of the photo
frame (the cut itself is the frame's clip-path) */
.process[data-mod="imagini"] .step picture::after {
content: ''; position: absolute; inset: 0; background: var(--cc-cyan);
clip-path: polygon(0 95%, 100% 71%, 100% 76%, 0 100%);
}
/* no hover effect: the cards are not links (design review 2026-09-25) */
.process[data-mod="imagini"] .step img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ~20 px of air under the cut, as on the /services doors */
.process[data-mod="imagini"] .step__title {
order: 2; margin-top: 14px; padding: 0 clamp(18px, 1.8vw, 26px); color: var(--cc-ink);
}
.process[data-mod="imagini"] .step__text {
order: 3; max-width: none; margin: 10px 0 0;
padding: 0 clamp(18px, 1.8vw, 26px) clamp(22px, 2vw, 30px); color: var(--cc-ink-soft);
}
/* tablet (601–900 px, one step per row): the card turns sideways — photo on the left,
cut along its right edge with the cyan echo (as the /services doors), then title and
text on the right — so each row uses the full width, the lines stay short
and the 1100 px photos are not stretched (design review 2026-09-25: a 560 px column
left the right side of the section empty) */
@media (min-width: 601px) and (max-width: 900px) {
.process[data-mod="imagini"] .step {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 3.4vw, 30px);
}
.process[data-mod="imagini"] .step picture {
grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 220px;
clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}
.process[data-mod="imagini"] .step picture::after {
clip-path: polygon(calc(100% - 7px) 0, 100% 0, calc(100% - 30px) 100%, calc(100% - 37px) 100%);
}
.process[data-mod="imagini"] .step__title { grid-column: 2; grid-row: 2; margin-top: 26px; padding: 0 22px 0 0; }
.process[data-mod="imagini"] .step__text { grid-column: 2; grid-row: 3; padding: 0 22px 24px 0; }
}
/* Pasii generali (prima pagina, /services…): foaia semnata trece la 2 coloane sub 1024 px,
iar al treilea pas ramanea singur pe randul al doilea. Trei pasi = trei coloane pana la
901 px, apoi unul sub altul. */
@media (max-width: 1024px) {
.process__track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.process__track--3 { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Subsolul pe telefon, banda de sub hero, raspunsurile FAQ (verificarea de design,
2026-09-23). Foaia semnata ascundea sub 700 px a treia coloana a subsolului cand
aceea era « Identité »; acum e « Informations » — Mentions légales, Confidentialité,
Gérer mes cookies —, adica exact legaturile pe care bannerul le promite jos pe fiecare
pagina. Si banda de sub hero pastra pe telefon firma + orasul din demo, dar cu trei
meserii in loc de doua regula lasa « Façades » singura.
========================================================================== */
.faq__a > * { max-width: 58ch; }
@media (max-width: 700px) {
/* « Informations » sta langa « Navigation » (serviciile au trecut pe randuri orizontale
dedesubt, 2026-09-26), deci ramane coloana a doua, nu un rand intreg. */
.close__cols > div:nth-child(3) { display: block; }
}
@media (max-width: 640px) {
/* firma si orasul: tot ce sta intre ele (meseriile si punctele lor) se ascunde */
.hero__strip > :nth-child(n+3):nth-last-child(n+2) { display: none; }
}
/* ==========================================================================
CITY PAGES — EACH SECTION ON ITS OWN GROUND
Owner decision 2026-09-24, after the trial /_proba/meaux-ritm (_build/vocabular.md).
The 14 city pages carry : white text → light-blue bands →
white questions → light-blue « À lire aussi ». The signed diagonal cut, with its
cyan echo, marks the entry into the light-blue grounds only: two gestures per
page, never two on the same screen. Section rhythm 104 px, the bottom of the
signed desktop range (104–160 px). On phones the edge stays straight.
========================================================================== */
.ville { --edge-slope: clamp(28px, 3.6vw, 56px); }
.ville .prose-section,
.ville .faq { padding-block: clamp(56px, 7.2vw, 104px); }
.ville .routes {
position: relative; background: var(--cc-mist);
padding: calc(clamp(56px, 7.2vw, 104px) + var(--edge-slope)) 0 clamp(56px, 7.2vw, 104px);
}
.ville .alire {
position: relative;
padding-top: calc(clamp(40px, 5vw, 70px) + var(--edge-slope));
}
/* White wedge = the diagonal edge; the cyan band right under it = the echo. */
.ville .routes::before,
.ville .alire::before {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: var(--edge-slope); background: var(--cc-white);
}
.ville .routes::after,
.ville .alire::after {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: calc(var(--edge-slope) + 6px); background: var(--cc-cyan);
}
/* The bands' edge rises to the right, « À lire aussi »'s to the left. */
.ville .routes::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.ville .routes::after { clip-path: polygon(0 calc(100% - 6px), 100% 0, 100% 6px, 0 100%); }
.ville .alire::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ville .alire::after { clip-path: polygon(0 0, 100% calc(100% - 6px), 100% 100%, 0 6px); }
@media (max-width: 900px) {
.ville .routes::before, .ville .routes::after,
.ville .alire::before, .ville .alire::after { display: none; }
.ville .routes { padding-top: clamp(56px, 7.2vw, 104px); }
.ville .alire { padding-top: clamp(40px, 5vw, 70px); }
}
/* City pages « Nos métiers à » (Iulian, 2026-09-27, trial /_proba/paris-metiers), in
place of the two insulation bands: seven equal navy cards on the section's pale field, each
with its trade's home card photo on top (the diagonal cut and cyan seam come from the shared
photo rules above). Four per row on a computer (4 + 3), two on a tablet with the last one
full width, one below 420 px. The title link covers the whole card. Markup: `blocMetiersVille()`. */
#metiers [data-metiers] {
margin: 0; padding: 0; list-style: none;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px);
}
#metiers [data-metiers] > li {
--card-x: clamp(18px, 1.8vw, 26px);
position: relative; display: flex; flex-direction: column;
padding: 0 var(--card-x) clamp(20px, 2vw, 28px);
/* opacity + transform too: this id rule outranks `.reveal.is-in`, so without them the cards popped in (2026-09-27) */
background: var(--cc-navy);
transition: background-color .25s var(--ease), opacity .55s var(--ease), transform .55s var(--ease);
}
#metiers [data-metiers] > li:hover,
#metiers [data-metiers] > li:focus-within { background: var(--cc-blue-ink); }
#metiers [data-metiers] > li > picture { aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--card-x)) 16px; }
#metiers [data-metiers] h3 {
margin: 0 0 10px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(18px, 1.5vw, 22px); line-height: 1.12; color: var(--cc-white);
}
#metiers [data-metiers] h3 a { color: inherit; text-decoration: none; }
#metiers [data-metiers] h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#metiers [data-metiers] h3 a:focus-visible { outline: 3px solid var(--cc-cyan); outline-offset: 3px; }
#metiers [data-metiers] p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--cc-ghost); }
#metiers [data-plus] {
align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 4px 0;
font-family: var(--ff-display); font-size: 15.5px; font-weight: 700; white-space: nowrap;
color: var(--cc-white); border-bottom: 2px solid var(--cc-cyan);
}
#metiers [data-plus] span { display: inline-block; transition: transform .25s var(--ease); }
#metiers [data-metiers] > li:hover [data-plus] span { transform: translateX(5px); }
@media (max-width: 900px) {
#metiers [data-metiers] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#metiers [data-metiers] > li:last-child { grid-column: 1 / -1; }
/* Full width, a 3:2 photo would be twice as tall as its neighbours'. */
#metiers [data-metiers] > li:last-child > picture { aspect-ratio: 3 / 1; }
}
@media (max-width: 420px) {
#metiers [data-metiers] { grid-template-columns: minmax(0, 1fr); }
#metiers [data-metiers] > li:last-child > picture { aspect-ratio: 3 / 2; }
}
/* ==========================================================================
INTERIOR PAGES — ONE SHORT ENDING
Owner decision 2026-09-24, after the trial /_proba/meaux-final (_build/vocabular.md).
On every page that opens with `.page-head` (or the 404) the call band and the
closing section read as one block. The home page has no `.page-head`, so it keeps
the signed closing section. CSS only: the closing section is the shared footer
partial and its markup stays identical everywhere. The band is navy, left-aligned,
without its phone button (`blocCta(…, { tel: false })`: the number is right below).
Links keep ≥ 24 px targets on wide screens and go back to 44 px on touch screens.
========================================================================== */
.page-head ~ .cta { background: var(--cc-navy); padding: clamp(28px, 2.8vw, 40px) 0 clamp(24px, 2.4vw, 34px); }
/* The button + trust column takes at most 45%: at its full width the trust line would
squeeze the title into a narrow column on mid-size screens (code review 2026-09-24). */
.page-head ~ .cta .cta__inner {
display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); grid-template-rows: auto auto;
column-gap: clamp(24px, 4vw, 64px); align-items: end; text-align: left;
}
.page-head ~ .cta .cta__inner h2 { grid-column: 1; grid-row: 1; margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 34px); }
.page-head ~ .cta .cta__inner > p:not(.cta__trust) {
grid-column: 1; grid-row: 2; align-self: start; margin: 0; color: var(--cc-ghost);
}
.page-head ~ .cta .cta__actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.page-head ~ .cta .cta__inner > .cta__trust {
grid-column: 2; grid-row: 2; align-self: start; margin: 10px 0 0; text-align: right;
}
body:has(:is(.page-head, .page-404)) .close .close__left {
padding: clamp(28px, 2.8vw, 40px) clamp(32px, 4vw, 64px) clamp(28px, 2.8vw, 40px) var(--pad);
}
body:has(:is(.page-head, .page-404)) .close .close__logo { width: clamp(88px, 7.2vw, 104px); padding: 6px 8px; }
body:has(:is(.page-head, .page-404)) .close .close__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(22px, 1.9vw, 28px); }
body:has(:is(.page-head, .page-404)) .close .close__right {
padding: clamp(28px, 2.8vw, 40px) var(--pad) clamp(24px, 2.4vw, 36px) clamp(40px, 5vw, 80px);
}
body:has(:is(.page-head, .page-404)) .close .close__phone a { font-size: clamp(22px, 1.75vw, 25px); }
body:has(:is(.page-head, .page-404)) .close .close__phone svg { width: 24px; height: 24px; }
body:has(:is(.page-head, .page-404)) .close .close__addr { margin-top: 12px; }
body:has(:is(.page-head, .page-404)) .close .close__addr span { font-size: 16px; }
body:has(:is(.page-head, .page-404)) .close .close__rule { margin: 18px 0; }
body:has(:is(.page-head, .page-404)) .close .close__cols { gap: 14px; }
body:has(:is(.page-head, .page-404)) .close .close__col-title { margin-bottom: 6px; font-size: 13px; }
body:has(:is(.page-head, .page-404)) .close .close__cols li { margin-bottom: 0; }
body:has(:is(.page-head, .page-404)) .close .close__cols a { min-height: 32px; padding: 4px 0; font-size: 14px; }
/* Wide screens: contact on the left, the three link columns beside it, not under it. */
@media (min-width: 1181px) {
body:has(:is(.page-head, .page-404)) .close .close__right {
display: grid; grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr; column-gap: clamp(28px, 3vw, 48px);
}
body:has(:is(.page-head, .page-404)) .close .close__phone { grid-column: 1; grid-row: 1; }
body:has(:is(.page-head, .page-404)) .close .close__addr { grid-column: 1; grid-row: 2; align-self: start; }
body:has(:is(.page-head, .page-404)) .close .close__rule { display: none; }
body:has(:is(.page-head, .page-404)) .close .close__cols { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
body:has(:is(.page-head, .page-404)) .close .close__left,
body:has(:is(.page-head, .page-404)) .close .close__right { padding: clamp(30px, 6vw, 46px) var(--pad); }
body:has(:is(.page-head, .page-404)) .close .close__cols li { margin-bottom: 4px; }
body:has(:is(.page-head, .page-404)) .close .close__cols a { min-height: 44px; padding: 8px 0; }
}
@media (max-width: 640px) {
.page-head ~ .cta .cta__inner { grid-template-columns: minmax(0, 1fr); }
.page-head ~ .cta .cta__inner > p:not(.cta__trust) { margin-bottom: 18px; }
.page-head ~ .cta .cta__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
.page-head ~ .cta .cta__inner > .cta__trust { grid-column: 1; grid-row: auto; text-align: left; }
}
/* ==========================================================================
PLOMBERIE — « PROJET OU PANNE » + « ÉTAPE PAR ÉTAPE »
Iulian's pick on 2026-09-25 out of three trials (_build/page-plan.md): each new trade
page gets an element of its own, never another page's composition. No new class:
everything hangs on #fourche / #etapes and data-* attributes, colours are tokens.
========================================================================== */
/* « Projet ou panne »: two panels split by the signed diagonal. */
#fourche { padding: var(--sec-y) 0; background: var(--cc-white); }
#fourche [data-voies] { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
#fourche [data-voie] {
--biais: clamp(40px, 5vw, 72px); --marge: clamp(34px, 4vw, 64px);
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 20px; padding: var(--marge);
}
#fourche h3 {
margin: 0; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -.01em;
}
#fourche [data-voie] p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 46ch; }
#fourche [data-voie] ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
#fourche [data-voie] li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; }
#fourche [data-voie] li::before {
content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px;
background: var(--cc-cyan-deep); clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
}
#fourche [data-voie] .btn { margin-top: auto; }
#fourche [data-voie="projet"] {
background: var(--cc-navy); color: var(--cc-white);
clip-path: polygon(0 0, 100% 0, calc(100% - var(--biais)) 100%, 0 100%);
padding-right: calc(var(--marge) + var(--biais));
}
#fourche [data-voie="projet"] p { color: var(--cc-ghost); }
#fourche [data-voie="souci"] {
background: var(--cc-mist); color: var(--cc-ink);
margin-left: calc(-1 * var(--biais));
clip-path: polygon(var(--biais) 0, 100% 0, 100% 100%, 0 100%);
padding-left: calc(var(--marge) + var(--biais));
}
#fourche [data-voie="souci"] p { color: var(--cc-ink-soft); }
/* The cyan echo along the seam: a strip as wide as the slant, its 50 % line drawn from the
top-right to the bottom-left corner (the « to bottom right » corner rule). */
#fourche [data-couture] {
--biais: clamp(40px, 5vw, 72px);
position: absolute; top: 0; bottom: 0; left: calc(50% - var(--biais)); width: var(--biais);
background: linear-gradient(to bottom right, transparent calc(50% - 3px),
var(--cc-cyan) calc(50% - 3px), var(--cc-cyan) calc(50% + 3px), transparent calc(50% + 3px));
pointer-events: none;
}
@media (max-width: 900px) {
#fourche [data-voies] { grid-template-columns: 1fr; }
#fourche [data-voie="projet"] {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
padding-right: var(--marge); padding-bottom: 70px;
}
#fourche [data-voie="souci"] {
margin-left: 0; margin-top: -34px; padding-left: var(--marge); padding-top: 70px;
clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
}
#fourche [data-couture] { display: none; }
}
/* « Étape par étape »: the real stages of a bathroom, drawn as a pipe — a cyan line with
a fitting at every stage (no « chez vous » notes and no open « water cut » fitting since
2026-10-10). */
#etapes { padding: var(--sec-y) 0; background: var(--cc-navy); color: var(--cc-white); }
#etapes ol[data-tuyau] {
--noeud: 46px; --ecart: clamp(14px, 1.6vw, 26px);
position: relative; margin: 0; padding: 0; list-style: none; counter-reset: etape;
/* One column per stage, whatever their number: the pipe stays in one row. */
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ecart);
}
#etapes ol[data-tuyau] li { counter-increment: etape; position: relative; padding-top: calc(var(--noeud) + 22px); }
/* The pipe: one length per stage, from its fitting to the next one, so it stops at the last. */
#etapes ol[data-tuyau] li:not(:last-child)::after {
content: ""; position: absolute; z-index: 0;
top: calc(var(--noeud) / 2 - 4px); height: 8px;
left: calc(var(--noeud) / 2); right: calc(-1 * (var(--ecart) + var(--noeud) / 2));
background: var(--cc-cyan);
}
/* The fitting at each stage, with its number. */
#etapes ol[data-tuyau] li::before {
z-index: 1;
content: counter(etape, decimal-leading-zero); content: counter(etape, decimal-leading-zero) / "";
position: absolute; top: 0; left: 0; width: var(--noeud); height: var(--noeud);
display: grid; place-items: center; border-radius: 50%;
background: var(--cc-cyan); color: var(--cc-navy); border: 5px solid var(--cc-navy);
box-shadow: 0 0 0 3px var(--cc-cyan);
font-family: var(--ff-display); font-weight: 800; font-size: 16px;
}
#etapes h3 {
margin: 0 0 8px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(17px, 1.35vw, 21px); line-height: 1.15; color: var(--cc-white);
}
/* A stage whose trade has its own page links to it (the link appears once that page exists). */
#etapes h3 a { color: inherit; text-decoration-color: var(--cc-cyan); text-underline-offset: 4px; }
#etapes li p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cc-ghost); }
@media (max-width: 1024px) {
#etapes ol[data-tuyau] { --ecart: 26px; grid-auto-flow: row; grid-template-columns: 1fr; max-width: 640px; }
#etapes ol[data-tuyau] li { padding-top: 6px; padding-left: calc(var(--noeud) + 22px); min-height: var(--noeud); }
#etapes ol[data-tuyau] li:not(:last-child)::after {
top: calc(var(--noeud) / 2); bottom: calc(-1 * (var(--ecart) + var(--noeud) / 2));
left: calc(var(--noeud) / 2 - 4px); right: auto; width: 8px; height: auto;
}
}
@media (max-width: 600px) {
#etapes .sec-head h2 { text-wrap: balance; }
#etapes .sec-head h2 br { display: none; }
}
/* Plomberie photos (variant 4 of the photo trial, 2026-09-26): one at the top of each path
panel, a wide band between the two sections, one on every stage. All three carry the
signed cut of the home page's photo steps: the bottom edge rises to the right, with the
cyan echo drawn along it as a layer of the frame. Placeholders until /images. */
:is(#fourche [data-voie] > picture, #etapes ol[data-tuyau] li > picture,
#point [data-verdict] > picture, #onglets [data-panneau] > picture,
#services [data-metiers] > li > picture, #metiers [data-metiers] > li > picture) {
position: relative; display: block; overflow: hidden;
}
:is(#fourche [data-voie] > picture, #etapes ol[data-tuyau] li > picture,
#point [data-verdict] > picture, #onglets [data-panneau] > picture,
#services [data-metiers] > li > picture, #metiers [data-metiers] > li > picture, #bande) img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
:is(#fourche [data-voie] > picture, #etapes ol[data-tuyau] li > picture,
#point [data-verdict] > picture, #onglets [data-panneau] > picture,
#services [data-metiers] > li > picture, #metiers [data-metiers] > li > picture, #bande img) {
clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
:is(#fourche [data-voie] > picture, #etapes ol[data-tuyau] li > picture,
#point [data-verdict] > picture, #onglets [data-panneau] > picture,
#services [data-metiers] > li > picture, #metiers [data-metiers] > li > picture, #bande > picture)::after {
content: ""; position: absolute; inset: 0; background: var(--cc-cyan); pointer-events: none;
clip-path: polygon(0 95%, 100% 73%, 100% 78%, 0 100%);
}
/* The panel photo runs to the panel's edges (the panel's own clip-path cuts it on the seam). */
#fourche [data-voie] > picture {
align-self: stretch; height: clamp(170px, 16vw, 250px); margin-top: calc(-1 * var(--marge));
}
#fourche [data-voie="projet"] > picture {
margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * (var(--marge) + var(--biais)));
}
#fourche [data-voie="souci"] > picture {
margin-left: calc(-1 * (var(--marge) + var(--biais))); margin-right: calc(-1 * var(--marge));
}
#etapes ol[data-tuyau] li > picture { aspect-ratio: 3 / 2; margin-bottom: 14px; }
/* The band sits on navy, so its cut opens straight onto the stages below. */
/* Its own plain rule, outside the shared :is() above: the :is() takes the specificity of its
strongest branch, so a later #bande rule would silently lose to it. */
#bande { position: relative; display: block; overflow: hidden; background: var(--cc-navy); }
/* The band keeps the photo's own 3:1 proportion, as in the approved trial. Its photos are 1536 px
wide (the image generator's ceiling): above that the photo stops and centres on the band's ground
instead of being enlarged (Iulian, 2026-10-11). The cyan echo sits on the photo, so it ends with it. */
#bande picture { position: relative; display: block; aspect-ratio: 3 / 1; max-width: 1536px; margin-inline: auto; }
/* Since 2026-09-27 the band also sits above pale and white sections (the common order of the
service pages): it takes the background of the section under it, so the cut opens onto it. */
#bande:has(+ [data-fond="pal"]) { background: var(--cc-mist); }
#bande:has(+ #lieux) { background: var(--cc-white); }
/* Électricité, Menuiserie (2026-10-11): « Chez vous » / « Le jour de la pose » on white, so the
photos after it keep the pale ground. */
#bande:has(+ .guide:not([data-fond])) { background: var(--cc-white); }
@media (max-width: 1024px) {
#etapes ol[data-tuyau] li > picture { max-width: 360px; }
}
/* Phones (Iulian, 2026-10-10: the stage photos were too narrow beside the pipe): the title moves
up next to its number, the photo spans the full width under it, over the pipe, which runs on
behind it, and the text comes back beside the pipe. */
@media (max-width: 640px) {
#etapes ol[data-tuyau] li { display: flex; flex-direction: column; padding-top: 0; }
#etapes ol[data-tuyau] h3 { order: -1; display: flex; align-items: center; min-height: var(--noeud); margin-bottom: 12px; }
#etapes ol[data-tuyau] li > picture {
z-index: 1; max-width: none;
width: calc(100% + var(--noeud) + 22px); margin-left: calc(-1 * (var(--noeud) + 22px));
}
}
/* « Nos salles de bain, en photos » (Plomberie, 2026-10-11, the combination Iulian chose after
the A/B trials): the client's own photos after the stages in one row, the caption on a deep chip
with the cyan edge of the gallery; the last tile leads to /realisations. A wide photo (3:2) takes
two units and the 3:4 tiles one each (2fr 1fr…): 3:2 over two units is as tall as 3:4 over one. */
#realisees { padding: var(--sec-y) 0; background: var(--cc-mist); }
#realisees [data-mosaique] {
display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start;
}
#realisees [data-r] { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cc-navy); }
#realisees [data-r="lata"] { aspect-ratio: 3 / 2; }
#realisees figure picture, #realisees figure img { display: block; width: 100%; height: 100%; }
#realisees figure img { object-fit: cover; }
#realisees figcaption {
position: absolute; left: 0; bottom: 0; max-width: calc(100% - 24px); padding: 8px 12px;
border-left: 3px solid var(--cc-cyan); background: var(--cc-deep); color: var(--cc-white);
font-size: 14px; line-height: 1.35;
}
#realisees a[data-r] {
display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 22px;
color: var(--cc-white); text-decoration: none; transition: background-color .2s var(--ease);
}
#realisees a[data-r] strong { font-size: 21px; line-height: 1.2; }
#realisees a[data-r] > span { color: var(--cc-cyan); font-weight: 600; }
#realisees a[data-r]:hover, #realisees a[data-r]:focus-visible { background: var(--cc-deep); }
/* Tablets: one row of six units would leave tiles of ~100 px, so two rows of three. */
@media (max-width: 1024px) {
#realisees [data-mosaique] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#realisees [data-r="lata"] { grid-column: span 2; }
}
/* Spanning two columns, the wide photo also spans the gap, so a 3:2 box came out 8 px taller than
the 3:4 tile beside it: on tablets it takes the row's height instead, its photo laid over it. */
@media (min-width: 641px) and (max-width: 1024px) {
#realisees [data-r="lata"] { aspect-ratio: auto; align-self: stretch; }
#realisees [data-r="lata"] picture { position: absolute; inset: 0; }
}
@media (max-width: 640px) {
#realisees [data-mosaique] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#realisees [data-r="lata"] { grid-column: 1 / -1; }
#realisees figcaption { font-size: 13px; padding: 6px 10px; }
#realisees a[data-r] { padding: 16px; }
#realisees a[data-r] strong { font-size: 18px; }
}
/* Two photos (Électricité, 2026-10-11, variant B): from tablets up, one row of four units — the
wide photo on two, the 3:4 tile and the card on one each — instead of two rows of three. */
@media (min-width: 641px) {
#realisees [data-mosaique][data-n="2"] { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
#realisees [data-n="2"] [data-r="lata"] { grid-column: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
#realisees [data-n="2"] a[data-r] { padding: 16px; }
#realisees [data-n="2"] a[data-r] strong { font-size: 18px; }
}
@media (max-width: 900px) {
#fourche [data-voie="projet"] > picture { margin-right: calc(-1 * var(--marge)); }
#fourche [data-voie="souci"] > picture { margin-left: calc(-1 * var(--marge)); margin-top: -70px; }
}
/* Phones (Iulian, 2026-10-10: the two path photos were too low as 170 px strips): a plain 3:2
frame, like the stage photos below. */
@media (max-width: 640px) {
#fourche [data-voie] > picture { height: auto; aspect-ratio: 3 / 2; }
}
/* ==========================================================================
THE FIVE NEW TRADE PAGES (2026-09-26, _build/page-plan.md)
Each answers its own visitor's question with an element no other page has:
Carrelage « Couche par couche » + « Où poser », Électricité « Le point sur votre
installation », Peinture « Intérieur / Façade », Menuiserie « Pièce par pièce »,
Maçonnerie « Avant d’ouvrir ». No new class: #id + data-*, tokens only. The photo
frames (Électricité, Peinture) share the signed cut declared with Plomberie above.
========================================================================== */
/* The two drawings (tiling cross-section, house plan): numbered markers and their
numbered legend, then a closing line on the signed slant. */
:is(#couches, #pieces) figure { margin: 0; }
:is(#couches, #pieces) svg { display: block; width: 100%; height: auto; }
:is(#couches, #pieces) [data-l="repere"] circle { fill: var(--cc-blue-cta); stroke: var(--cc-white); stroke-width: 3; }
:is(#couches, #pieces) [data-l="repere"] text { fill: var(--cc-white); font-family: var(--ff-display); font-weight: 800; font-size: 18px; }
:is(#couches, #pieces) ol { margin: 0; padding: 0; list-style: none; counter-reset: repere; display: grid; gap: 22px; }
:is(#couches, #pieces) ol > li { counter-increment: repere; position: relative; padding-left: 58px; }
:is(#couches, #pieces) ol > li::before {
content: counter(repere); content: counter(repere) / "";
position: absolute; left: 0; top: -2px; width: 38px; height: 38px; display: grid; place-items: center;
background: var(--cc-blue-cta); color: var(--cc-white); border-radius: 50%;
font-family: var(--ff-display); font-weight: 800; font-size: 18px;
}
:is(#couches, #pieces) ol h3 { margin: 0 0 6px; font-family: var(--ff-display); font-size: 21px; line-height: 1.2; }
:is(#couches, #pieces) ol p { margin: 0; font-size: 16px; line-height: 1.6; }
:is(#couches, #pieces) [data-conclusion] {
margin: clamp(30px, 3.6vw, 52px) 0 0; padding: 20px 52px 20px 26px;
font-family: var(--ff-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3;
clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
width: fit-content; max-width: 100%; text-wrap: balance;
}
/* Carrelage — « Couche par couche »: a bathroom corner in section, wall and floor. */
#couches { padding: var(--sec-y) 0; background: var(--cc-mist); }
#couches [data-coupe] {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(28px, 4.4vw, 72px); align-items: center;
}
#couches [data-l="structure"] { fill: url(#hachure); stroke: var(--cc-grey); stroke-width: 2; }
#couches [data-l="hachure"] { stroke: var(--cc-grey); stroke-width: 2; }
#couches [data-l="etancheite"] { fill: none; stroke: var(--cc-cyan-deep); stroke-width: 4; }
#couches [data-l="colle"] { fill: none; stroke: var(--cc-ink-soft); stroke-width: 3; stroke-dasharray: 2 5; }
#couches [data-l="carreaux"] rect { fill: var(--cc-white); stroke: var(--cc-ink-soft); stroke-width: 1.5; }
#couches [data-l="joints"] rect { fill: var(--cc-ink-soft); }
#couches ol h3 { color: var(--cc-ink); }
#couches ol p { color: var(--cc-ink-soft); }
#couches [data-conclusion] { background: var(--cc-navy); color: var(--cc-white); }
/* Carrelage — « Où poser »: four tiles, the cyan edge on top, the signed corner cut. */
#lieux { padding: var(--sec-y) 0; background: var(--cc-white); }
#lieux [data-lieux] {
margin: 0; padding: 0; list-style: none;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px);
}
#lieux [data-lieux] > li {
display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px) clamp(34px, 3vw, 44px);
background: var(--cc-mist); border-top: 6px solid var(--cc-cyan);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
#lieux h3 {
margin: 0; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 1.6vw, 24px); line-height: 1.1; color: var(--cc-ink);
}
#lieux [data-lieux] p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cc-ink-soft); }
#lieux [data-lieux] a {
margin-top: auto; padding: 4px 0; font-weight: 600; color: var(--cc-blue-ink);
text-underline-offset: 4px; line-height: 1.45;
}
/* Électricité — « Le point sur votre installation »: the signs on the left; the answer on
the right changes as soon as one is ticked (:has, no script, nothing sent). */
#point { padding: var(--sec-y) 0; background: var(--cc-white); }
#point [data-point] {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px); align-items: start;
}
#point fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
#point legend {
padding: 0; margin: 0 0 14px; font-family: var(--ff-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; font-size: 16px; color: var(--cc-ink-soft);
}
#point label {
display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: center;
min-height: 58px; padding: 12px 16px; border-bottom: 1px solid var(--cc-ghost);
cursor: pointer; font-size: 16.5px; line-height: 1.5; color: var(--cc-ink);
}
#point label:has(input:checked) { background: var(--cc-mist); }
#point input { width: 22px; height: 22px; margin: 0; accent-color: var(--cc-blue-cta); }
#point input:focus-visible { outline: 2px solid var(--cc-blue-cta); outline-offset: 3px; }
#point [data-verdict] {
--marge: clamp(28px, 3vw, 44px);
position: sticky; top: 120px;
display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
padding: var(--marge) var(--marge) calc(var(--marge) + 18px);
background: var(--cc-navy); color: var(--cc-white);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
#point [data-verdict] > picture {
align-self: stretch; height: clamp(150px, 13vw, 200px);
margin: calc(-1 * var(--marge)) calc(-1 * var(--marge)) 0;
}
#point [data-si] {
margin: 0; font-family: var(--ff-display); font-weight: 700;
font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3;
}
#point [data-si="coche"] { display: none; color: var(--cc-cyan); }
#point [data-point]:has(input:checked) [data-si="aucun"] { display: none; }
#point [data-point]:has(input:checked) [data-si="coche"] { display: block; }
#point [data-travaux] { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cc-ghost); }
/* Peinture — « Intérieur / Façade »: two tabs, CSS only. The radios sit before the panels as
siblings (:checked ~), visually hidden but kept for the keyboard and screen readers. */
#onglets { padding: var(--sec-y) 0; background: var(--cc-mist); }
#onglets [data-onglets] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
#onglets [data-onglets] > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#onglets [data-onglets] > label {
cursor: pointer; line-height: 1.55; color: var(--cc-blue-ink); border-color: var(--cc-blue-ink);
}
#onglets [data-onglets] > input:checked + label { background: var(--cc-blue-ink); color: var(--cc-white); }
#onglets [data-onglets] > input:focus-visible + label { outline: 2px solid var(--cc-blue-cta); outline-offset: 2px; }
#onglets [data-panneau] {
display: none; flex-basis: 100%; margin-top: clamp(14px, 1.6vw, 22px);
/* photo + preparation; the « Chez vous » column moved to its own section on 2026-09-27 */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(24px, 3vw, 48px); padding: clamp(26px, 3vw, 44px); background: var(--cc-white);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
#onglet-interieur:checked ~ [data-panneau="interieur"],
#onglet-facade:checked ~ [data-panneau="facade"] { display: grid; }
#onglets [data-panneau] > picture { align-self: start; aspect-ratio: 4 / 3; }
#onglets [data-panneau] h3 {
margin: 0 0 14px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(19px, 1.5vw, 22px); color: var(--cc-ink);
}
#onglets [data-panneau] ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
#onglets [data-panneau] li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--cc-ink-soft); }
#onglets [data-panneau] li strong { color: var(--cc-ink); }
#onglets [data-panneau] ol { counter-reset: prepa; }
#onglets [data-panneau] ol > li { counter-increment: prepa; }
#onglets [data-panneau] ol > li::before {
content: counter(prepa); content: counter(prepa) / "";
position: absolute; left: 0; top: .1em; font-family: var(--ff-display); font-weight: 800; color: var(--cc-cyan-deep);
}
/* Menuiserie intérieure — « Pièce par pièce »: the house seen from above, as a white sheet
on navy, the four works numbered where they sit. */
#pieces { padding: var(--sec-y) 0; background: var(--cc-navy); color: var(--cc-white); }
#pieces [data-plan] {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(28px, 4.4vw, 72px); align-items: center;
}
#pieces figure {
padding: clamp(12px, 1.4vw, 20px); background: var(--cc-white);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
#pieces [data-l="sol"] { fill: var(--cc-white); }
#pieces [data-l="parquet"] { fill: url(#lames); }
#pieces [data-l="lame"] { fill: none; stroke: var(--cc-grey); stroke-width: 1.5; }
#pieces [data-l="mur"] { fill: none; stroke: var(--cc-navy); stroke-width: 10; stroke-linecap: square; }
#pieces [data-l="porte"] { fill: none; stroke: var(--cc-cyan-deep); stroke-width: 3; }
#pieces :is([data-l="placard"], [data-l="escalier"]) { fill: var(--cc-mist); stroke: var(--cc-ink); stroke-width: 2.5; }
#pieces [data-l="trait"] { fill: none; stroke: var(--cc-ink); stroke-width: 2; }
#pieces [data-l="fleche"] { fill: none; stroke: var(--cc-ink-soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#pieces [data-l="piece"] {
fill: var(--cc-ink-soft); font-family: var(--ff-display); font-weight: 800; font-size: 15px;
letter-spacing: .08em; text-transform: uppercase;
}
#pieces ol h3 { color: var(--cc-white); }
#pieces ol p { color: var(--cc-ghost); }
#pieces [data-piece] {
margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--cc-cyan);
}
#pieces [data-conclusion] { background: var(--cc-cyan); color: var(--cc-navy); }
/* Maçonnerie — « Avant d’ouvrir »: three questions on a dashed path, each node a diamond
(a decision, not a stage), the « oui » and « non » answers side by side. */
#avant { padding: var(--sec-y) 0; background: var(--cc-white); }
#avant [data-parcours] {
--losange: 46px; --pas: clamp(28px, 3vw, 44px);
margin: 0; padding: 0; list-style: none; counter-reset: question;
display: grid; gap: var(--pas); max-width: 1100px;
}
#avant [data-parcours] > li {
counter-increment: question; position: relative;
padding-left: calc(var(--losange) + clamp(20px, 2.4vw, 36px));
}
#avant [data-parcours] > li::before {
content: counter(question); content: counter(question) / "";
position: absolute; left: 0; top: 0; width: var(--losange); height: var(--losange);
display: grid; place-items: center; background: var(--cc-navy); color: var(--cc-cyan);
font-family: var(--ff-display); font-weight: 800; font-size: 18px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#avant [data-parcours] > li:not(:last-child)::after {
content: ""; position: absolute; left: calc(var(--losange) / 2 - 3px); width: 6px;
top: calc(var(--losange) + 6px); bottom: calc(-1 * var(--pas) + 6px);
background: repeating-linear-gradient(to bottom, var(--cc-cyan) 0 10px, transparent 10px 18px);
}
#avant h3 {
margin: 8px 0 16px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(22px, 2vw, 30px); line-height: 1.1; color: var(--cc-ink);
}
#avant [data-reponses] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#avant [data-reponse] { margin: 0; padding: 18px 22px; font-size: 16px; line-height: 1.6; }
#avant [data-reponse="oui"] { background: var(--cc-navy); color: var(--cc-ghost); }
#avant [data-reponse="non"] { background: var(--cc-mist); color: var(--cc-ink-soft); }
#avant [data-reponse] strong {
display: block; margin-bottom: 6px; font-family: var(--ff-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .06em; font-size: 15px;
}
#avant [data-reponse="oui"] strong { color: var(--cc-cyan); }
#avant [data-reponse="non"] strong { color: var(--cc-blue-ink); }
@media (max-width: 1100px) {
#lieux [data-lieux] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
:is(#couches [data-coupe], #point [data-point], #pieces [data-plan]) { grid-template-columns: 1fr; }
#onglets [data-panneau] { grid-template-columns: 1fr; }
#point [data-verdict] { position: static; }
}
@media (max-width: 700px) {
#avant [data-parcours] { --losange: 38px; }
#avant [data-reponses] { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#lieux [data-lieux] { grid-template-columns: 1fr; }
/* The drawings shrink to about half: the markers and room names grow back to be read. */
:is(#couches, #pieces) [data-l="repere"] { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
#pieces [data-l="piece"] { font-size: 24px; }
}
/* The common order of the service pages (Iulian, 2026-09-27, trial /_proba/maconnerie-systeme,
_build/page-plan.md): a photo beside the second own section — « Chez vous » on Menuiserie
and Maçonnerie, « Où poser » on Carrelage. Heading across, content on the left, the photo
on the right with the signed cut and its cyan echo; on a phone the photo comes first.
Hook: `data-foto` on the section, no new class. */
:is(.guide, #lieux)[data-foto] .wrap {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
column-gap: clamp(28px, 4vw, 64px); align-items: start;
}
:is(.guide, #lieux)[data-foto] .sec-head { grid-column: 1 / -1; }
:is(.guide, #lieux)[data-foto] .wrap > :not(.sec-head, picture) { grid-column: 1; }
:is(.guide, #lieux)[data-foto] .wrap > picture {
grid-column: 2; grid-row: 2; position: relative; display: block; overflow: hidden;
aspect-ratio: 4 / 3;
}
:is(.guide, #lieux)[data-foto] .wrap > picture img {
display: block; width: 100%; height: 100%; object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
:is(.guide, #lieux)[data-foto] .wrap > picture::after {
content: ""; position: absolute; inset: 0; background: var(--cc-cyan); pointer-events: none;
clip-path: polygon(0 95%, 100% 73%, 100% 78%, 0 100%);
}
/* Peinture: « Chez vous » comes right after the tabs, which already sit on the pale blue;
two pale sections in a row would read as one, so this one turns white. */
#onglets + .guide[data-fond="pal"] { background: var(--cc-white); }
/* the tiles stack beside the photo */
.guide[data-foto] [data-rang] { padding-top: 0; }
.guide[data-foto] [data-qui] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 561px) {
#lieux[data-foto] [data-lieux] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
:is(.guide, #lieux)[data-foto] .wrap { display: flex; flex-direction: column; }
:is(.guide, #lieux)[data-foto] .wrap > * { order: 2; }
:is(.guide, #lieux)[data-foto] .sec-head { order: 0; }
:is(.guide, #lieux)[data-foto] .wrap > picture { order: 1; width: 100%; margin-bottom: 24px; }
}
/* ==========================================================================
THE REWORK ON SEVEN TRADES — HOME AND /services (2026-09-26, _build/page-plan.md)
Home: the seven trades as photo cards, plumbing and tiling first and wider.
/services: the index of the seven trades, replacing the comparator.
No new class: #id + data-*, tokens only.
========================================================================== */
/* Home « Nos métiers » (Iulian, 2026-09-26, replacing the signed bands): the seven trades as
cards with the photo on top, the look of the Plomberie stages. A 10-column grid: plumbing
and tiling (data-avant) span 5 each on the first row, the five others span 2 each below.
Outlined cards, centred text, a filled button pinned to the bottom so every card of a row
ends on the same line. The title link stretches over the whole card (insulation, which has
three pages, goes to its row on /services). */
#services [data-metiers] {
margin: 0; padding: 0; list-style: none;
display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
gap: clamp(20px, 2.2vw, 32px) clamp(16px, 2vw, 28px);
}
#services [data-metiers] > li {
--card-x: clamp(14px, 1.6vw, 24px);
grid-column: span 2; position: relative; display: flex; flex-direction: column;
padding: 0 var(--card-x) clamp(18px, 1.8vw, 26px); text-align: center;
background: var(--cc-white); border: 2px solid var(--cc-ghost);
/* opacity + transform too: this id rule outranks `.reveal.is-in` (the cards popped in). On the home page the GSAP
layer deals them and animatii.css keeps only the colour here */
transition: border-color .25s var(--ease), opacity .55s var(--ease), transform .55s var(--ease);
}
#services [data-metiers] > li:hover,
#services [data-metiers] > li:focus-within { border-color: var(--cc-cyan); }
#services [data-metiers] > li[data-avant] { grid-column: span 5; }
/* The photo runs to the card's edges, inside the outline. */
#services [data-metiers] > li > picture { aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--card-x)) 16px; }
#services [data-metiers] > li[data-avant] > picture { aspect-ratio: 2 / 1; margin-bottom: 20px; }
#services [data-metiers] :is(h2, h3) {
margin: 0 0 8px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(17px, 1.35vw, 20px); line-height: 1.15; color: var(--cc-ink);
}
#services [data-metiers] > li[data-avant] :is(h2, h3) { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.08; }
#services [data-metiers] :is(h2, h3) a { color: inherit; text-decoration: none; }
#services [data-metiers] :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#services [data-metiers] > li:hover :is(h2, h3) a,
#services [data-metiers] :is(h2, h3) a:focus-visible { text-decoration: underline; text-decoration-color: var(--cc-cyan); text-underline-offset: 4px; }
#services [data-metiers] p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cc-ink-soft); }
#services [data-metiers] > li[data-avant] p { font-size: 16.5px; max-width: 46ch; margin-inline: auto; }
/* The way in: no fill (Iulian: a filled button was too big for the cards), brand blue text
on the cyan underline. Decorative (the card's link carries the name), so its hover
follows the card. */
#services [data-plus] {
align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin-top: auto; padding: 4px 0;
font-family: var(--ff-display); font-size: 15.5px; font-weight: 700; white-space: nowrap;
color: var(--cc-blue-ink); background: transparent; border-bottom: 2px solid var(--cc-cyan);
transition: color .25s var(--ease);
}
/* The text keeps at least this much air above the button when a card is the tallest of its row. */
#services [data-metiers] > li > p { margin-bottom: 18px; }
#services [data-plus] span { display: inline-block; transition: transform .25s var(--ease); }
#services [data-metiers] > li:hover [data-plus],
#services [data-metiers] > li:focus-within [data-plus] { color: var(--cc-navy); }
#services [data-metiers] > li:hover [data-plus] span { transform: translateX(5px); }
/* Home « Quel est votre projet ? » — « Vitrine » (Iulian, 2026-09-28, trial A of three, replacing the
2026-09-26 tiles): five tabs, each with
its photo, above a showcase panel: the chosen project's photo large and bright on the left,
its trades on navy on the right, edged in cyan. Radios + labels + panels are siblings in one
grid (the radios, absolutely placed, take no cell): tabs on row 1, panels share row 2.
Arrows on the photo step through the projects (script.js; hidden without JavaScript). */
#situations { padding: var(--sec-y) 0; background: var(--cc-mist); }
#situations [data-projets] {
position: relative;
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
}
#situations [data-projets] > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
/* the five invisible radios share one corner: the focused one goes on top, or it reads as covered (a11y-keyboard) */
#situations [data-projets] > input:focus { z-index: 1; }
/* The tab: a square thumbnail and the name; the chosen one navy with a cyan foot. */
#situations [data-projets] > label {
grid-row: 1; position: relative; display: flex; align-items: center; gap: clamp(10px, 1vw, 16px);
min-width: 0; padding: 10px clamp(10px, 1vw, 18px) 10px 10px; cursor: pointer;
font-family: var(--ff-display); font-weight: 800; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.15;
text-transform: uppercase; color: var(--cc-navy); background: var(--cc-white);
box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--cc-navy) 60%, transparent);
transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
#situations [data-projets] > label > picture { flex: 0 0 auto; width: clamp(46px, 4.2vw, 64px); aspect-ratio: 1; overflow: hidden; }
#situations [data-projets] > label img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
#situations [data-projets] > label::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cc-cyan);
transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
#situations [data-projets] > input:not(:checked) + label:hover { transform: translateY(-2px); }
#situations [data-projets] > label:hover img { transform: scale(1.08); }
#situations [data-projets] > input:not(:checked) + label:hover::after { transform: scaleX(.3); }
#situations [data-projets] > input:checked + label { color: var(--cc-white); background: var(--cc-navy); }
#situations [data-projets] > input:checked + label::after { transform: scaleX(1); }
#situations [data-projets] > input:focus-visible + label { outline: 3px solid var(--cc-blue-cta); outline-offset: 3px; }
/* The showcase: photo | text, the signed corner cut at the bottom right. */
#situations [data-projet] {
display: none; grid-column: 1 / -1; grid-row: 2;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: clamp(440px, 38vw, 560px);
color: var(--cc-white); background: var(--cc-navy);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%);
}
#projet-salle-de-bain:checked ~ [data-projet="salle-de-bain"],
#projet-interieur:checked ~ [data-projet="interieur"],
#projet-facade:checked ~ [data-projet="facade"],
#projet-combles:checked ~ [data-projet="combles"],
#projet-agrandir:checked ~ [data-projet="agrandir"] { display: grid; }
#situations [data-projet] > picture { position: relative; overflow: hidden; }
#situations [data-projet] > picture img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
animation: projet-photo .8s var(--ease) both;
}
#situations [data-projet] > div {
display: flex; flex-direction: column; align-items: flex-start;
padding: clamp(28px, 3.4vw, 56px); border-left: 4px solid var(--cc-cyan);
animation: projet-texte .55s var(--ease) .1s both;
}
#situations [data-projet] h3 {
margin: 0 0 12px; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(28px, 2.8vw, 42px); line-height: 1.02; color: var(--cc-white);
}
#situations [data-projet] > div > p:not([data-titre-liste]) { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--cc-ghost); max-width: 44ch; }
#situations [data-titre-liste] {
margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-cyan);
}
#situations [data-projet] ul { align-self: stretch; margin: 0 0 28px; padding: 0; list-style: none; }
#situations [data-projet] li + li { border-top: 1px solid color-mix(in srgb, var(--cc-ghost) 22%, transparent); }
#situations [data-projet] li a {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px;
padding: 13px 0; color: var(--cc-white); text-decoration: none;
}
#situations [data-projet] li strong { font-family: var(--ff-display); font-weight: 800; font-size: clamp(16px, 1.3vw, 19px); text-transform: uppercase; }
#situations [data-projet] li a > span:first-of-type { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--cc-ghost); }
#situations [data-projet] li a > span:last-child {
grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; color: var(--cc-cyan);
transition: transform .25s var(--ease);
}
#situations [data-projet] li a:hover strong,
#situations [data-projet] li a:focus-visible strong { text-decoration: underline; text-decoration-color: var(--cc-cyan); text-underline-offset: 4px; }
#situations [data-projet] li a:hover > span:last-child { transform: translateX(5px); }
#situations [data-projet] .btn { margin-top: auto; }
/* The arrows: white rounds at the photo's bottom left. */
#situations [data-projets] > [data-pas] {
grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: start; z-index: 3;
display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px; margin: 0 0 24px 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--cc-navy); background: var(--cc-white);
box-shadow: 0 8px 22px color-mix(in srgb, var(--cc-navy) 35%, transparent);
transition: background-color .25s var(--ease), transform .25s var(--ease);
}
#situations [data-projets] > [data-pas="1"] { margin-left: 86px; }
#situations [data-projets] > [data-pas][hidden] { display: none; }
#situations [data-projets] > [data-pas]:hover { background: var(--cc-cyan); }
#situations [data-projets] > [data-pas="-1"]:hover { transform: translateX(-3px); }
#situations [data-projets] > [data-pas="1"]:hover { transform: translateX(3px); }
#situations [data-projets] > [data-pas]:focus-visible { outline: 3px solid var(--cc-cyan); outline-offset: 3px; }
#situations [data-annonce] {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@keyframes projet-photo { from { opacity: .35; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes projet-texte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
#situations [data-projet] > picture img, #situations [data-projet] > div { animation: none; }
}
@media (max-width: 900px) {
/* Three tabs, then two; the showcase below them, photo on top. */
#situations [data-projets] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#situations [data-projets] > label { grid-row: auto; grid-column: span 2; }
#situations [data-projets] > label:nth-of-type(n+4) { grid-column: span 3; }
#situations [data-projet] { grid-row: 3; grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: 6px; }
#situations [data-projet] > picture { aspect-ratio: 3 / 2; }
#situations [data-projet] > div { border-left: 0; border-top: 4px solid var(--cc-cyan); padding-bottom: 44px; }
#situations [data-projets] > [data-pas] { grid-row: 3; align-self: start; justify-self: end; margin: 20px 76px 0 0; }
#situations [data-projets] > [data-pas="1"] { margin: 20px 14px 0 0; }
}
@media (max-width: 480px) {
#situations [data-projets] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#situations [data-projets] > label,
#situations [data-projets] > label:nth-of-type(n+4) { grid-column: span 1; }
#situations [data-projets] > label:nth-of-type(5) { grid-column: 1 / -1; }
#situations [data-projet],
#situations [data-projets] > [data-pas] { grid-row: 4; }
#situations [data-projets] > label { font-size: 13px; padding: 8px 10px 8px 8px; }
#situations [data-projets] > label > picture { width: 40px; }
#situations [data-projet] > div { padding: 24px 20px 44px; }
#situations [data-projets] > [data-pas] { width: 46px; height: 46px; margin: 16px 66px 0 0; }
#situations [data-projets] > [data-pas="1"] { margin: 16px 12px 0 0; }
}
/* Home « Bien préparer votre projet » (Iulian, 2026-09-26, trial 2): the clipboard
« Avant d'appeler » — a ruled sheet on a navy board, three questions to tick. With all
three ticked the ready line shows and the call button lights up (CSS :has, no script); a
counter says how many are ticked. Source order: title, board, button (headings in order;
on phones the button sits right under the board it answers). On desktop the board takes
the left column, title and button the right, centred on its height. */
.guide[data-mod="carnet"] [data-carnet-grille] {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
grid-template-areas: "carnet ." "carnet tete" "carnet actions" "carnet .";
grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(36px, 5.5vw, 96px);
}
.guide[data-mod="carnet"] .sec-head { grid-area: tete; }
.guide[data-mod="carnet"] [data-carnet] { grid-area: carnet; }
.guide[data-mod="carnet"] [data-actions] { grid-area: actions; }
.guide[data-mod="carnet"] [data-actions] p { margin: 16px 0 0; max-width: 36ch; font-size: 15.5px; line-height: 1.6; color: var(--cc-ink-soft); }
.guide[data-mod="carnet"] [data-actions] p a { font-weight: 600; color: var(--cc-blue-ink); text-underline-offset: 3px; }
/* The board, slightly tilted, and its clip. */
.guide[data-mod="carnet"] [data-carnet] {
position: relative; align-self: center; padding: 34px clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
background: var(--cc-navy); transform: rotate(-1.5deg); transition: opacity .55s var(--ease), transform .55s var(--ease);
}
/* The shared entrance (.reveal: 20px lower, then in place), with the tilt kept throughout. */
.js .guide[data-mod="carnet"] [data-carnet].reveal:not(.is-in) { transform: translateY(20px) rotate(-1.5deg); }
.guide[data-mod="carnet"] [data-carnet]::before {
content: ""; position: absolute; top: -14px; left: 50%; width: 132px; height: 34px; transform: translateX(-50%);
background: var(--cc-grey); box-shadow: inset 0 -6px 0 var(--cc-ink-soft);
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
/* The sheet: ruled lines and a cyan margin. */
.guide[data-mod="carnet"] [data-feuille] {
--marge-feuille: clamp(52px, 5vw, 70px);
counter-reset: coche; padding: 26px clamp(20px, 2.4vw, 34px) 24px var(--marge-feuille); color: var(--cc-ink);
background:
linear-gradient(to right, transparent calc(var(--marge-feuille) - 18px), var(--cc-cyan) 0 calc(var(--marge-feuille) - 16px), transparent 0),
repeating-linear-gradient(to bottom, var(--cc-white) 0 35px, var(--cc-ghost) 35px 36px);
}
.guide[data-mod="carnet"] [data-feuille] h3 {
margin: 0 0 18px; font-family: var(--ff-display); font-weight: 800; font-size: clamp(22px, 2vw, 28px); text-transform: uppercase; color: var(--cc-ink);
}
.guide[data-mod="carnet"] [data-feuille] ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
/* z-index: the invisible box sits above its own label, which otherwise reads as covering it at focus (a11y-keyboard,
2.4.11, 2026-10-12); the focus still shows on the label's square */
.guide[data-mod="carnet"] [data-feuille] input { position: absolute; z-index: 1; opacity: 0; width: 1px; height: 1px; margin: 0; }
.guide[data-mod="carnet"] [data-feuille] input:checked { counter-increment: coche; }
.guide[data-mod="carnet"] [data-feuille] label { position: relative; display: grid; gap: 2px; padding: 8px 0 8px 44px; cursor: pointer; }
/* The box, and its tick once checked. */
.guide[data-mod="carnet"] [data-feuille] label::before {
content: ""; position: absolute; left: 0; top: 10px; width: 26px; height: 26px;
border: 2.5px solid var(--cc-navy); background: var(--cc-white); transition: background-color .2s var(--ease);
}
.guide[data-mod="carnet"] [data-feuille] label::after {
content: ""; position: absolute; left: 7px; top: 15px; width: 12px; height: 6px; opacity: 0;
border-left: 3px solid var(--cc-navy); border-bottom: 3px solid var(--cc-navy); transform: rotate(-45deg);
transition: opacity .2s var(--ease);
}
.guide[data-mod="carnet"] [data-feuille] input:checked + label::before { background: var(--cc-cyan); border-color: var(--cc-cyan); }
.guide[data-mod="carnet"] [data-feuille] input:checked + label::after { opacity: 1; }
.guide[data-mod="carnet"] [data-feuille] input:focus-visible + label::before { outline: 3px solid var(--cc-blue-cta); outline-offset: 2px; }
.guide[data-mod="carnet"] [data-feuille] label:hover::before { border-color: var(--cc-cyan-deep); }
.guide[data-mod="carnet"] [data-feuille] strong { font-family: var(--ff-display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.guide[data-mod="carnet"] [data-feuille] label span { font-size: 15px; line-height: 1.5; color: var(--cc-ink-soft); }
/* The counter, then the ready line once all three are ticked. */
.guide[data-mod="carnet"] [data-compte] { margin: 18px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--cc-ink-soft); }
.guide[data-mod="carnet"] [data-compte]::after { content: " — " counter(coche) " / 3"; content: " — " counter(coche) " / 3" / ""; color: var(--cc-cyan-deep); }
.guide[data-mod="carnet"] [data-pret] {
display: none; margin: 14px 0 0; padding: 12px 16px; font-family: var(--ff-display); font-weight: 800; font-size: 18px;
color: var(--cc-navy); background: var(--cc-cyan);
}
/* The three ids come from blocAvantAppeler (_build/blocuri.mjs): renamed there, rename here. */
.guide[data-mod="carnet"] [data-carnet-grille]:has(#prep-travaux:checked):has(#prep-habitat:checked):has(#prep-lieu:checked) [data-pret] { display: block; }
.guide[data-mod="carnet"] [data-carnet-grille]:has(#prep-travaux:checked):has(#prep-habitat:checked):has(#prep-lieu:checked) [data-compte] { display: none; }
/* All ticked: the call button turns cyan and grows a little. */
.guide[data-mod="carnet"] [data-actions] .btn { transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.guide[data-mod="carnet"] [data-carnet-grille]:has(#prep-travaux:checked):has(#prep-habitat:checked):has(#prep-lieu:checked) [data-actions] .btn {
color: var(--cc-navy); background: var(--cc-cyan); transform: scale(1.06);
}
@media (max-width: 900px) {
.guide[data-mod="carnet"] [data-carnet-grille] {
grid-template-columns: 1fr; grid-template-areas: "tete" "carnet" "actions"; grid-template-rows: none;
}
.guide[data-mod="carnet"] [data-carnet] { margin: 10px 0 32px; transform: none; }
.js .guide[data-mod="carnet"] [data-carnet].reveal:not(.is-in) { transform: translateY(20px); }
}
@media (max-width: 1100px) {
/* 6 columns: the first two cards two to a row, the five others three to a row. */
#services [data-metiers] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#services [data-metiers] > li[data-avant] { grid-column: span 3; }
}
@media (max-width: 640px) {
/* Phone: the first two full width, the five others two to a row. */
#services [data-metiers] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#services [data-metiers] > li { --card-x: 10px; grid-column: span 1; }
#services [data-metiers] > li[data-avant] { --card-x: 16px; grid-column: span 2; }
/* Two cards to a row leave ~140px inside each: a notch smaller so the line never breaks. */
#services [data-metiers] > li:not([data-avant]) [data-plus] { font-size: 14.5px; gap: 6px; }
}
@media (max-width: 359px) {
#services [data-metiers] { grid-template-columns: 1fr; }
#services [data-metiers] > li, #services [data-metiers] > li[data-avant] { grid-column: auto; }
}
/* /services (Iulian, 2026-09-26): the same cards as the home page, in place of the row
list, and under them the isolation band — its three pages as smaller cards, three to a
row (one per row on phones). The « Isolation » card above and the home one lead here;
the offset keeps the band's title clear of the fixed header. */
#services [data-izolatii] { margin-top: clamp(48px, 6vw, 96px); scroll-margin-top: 110px; }
#services [data-izolatii] [data-metiers] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#services [data-izolatii] [data-metiers] > li { grid-column: auto; }
@media (max-width: 640px) {
#services [data-izolatii] [data-metiers] { grid-template-columns: minmax(0, 1fr); }
#services [data-izolatii] [data-metiers] > li { --card-x: 16px; }
}
/* ==========================================================================
Home « À propos » (Iulian, 2026-09-26, trials A + B at /_proba/accueil-apropos-*):
the facts on a white card headed by the owner's name, the quote form on the right (in
place of the trials' photo, same day) headed by the claim. The signed S08 claim
overflowed its box on desktop and the firm's name showed four times on one screen. The
blue band now hangs on the form, so it follows it at any width instead of drifting off
to the screen edge.
No new class: data-* under the signed .about, tokens only.
========================================================================== */
.about[data-mod="carte"] [data-grille] {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
align-items: center; gap: clamp(32px, 5vw, 88px);
}
.about[data-mod="carte"] [data-dirigeant] {
position: relative; z-index: 2;
padding: clamp(28px, 3.4vw, 52px);
background: var(--cc-white);
border-top: 6px solid var(--cc-blue);
box-shadow: 0 28px 60px -34px color-mix(in srgb, var(--cc-navy) 45%, transparent);
}
/* The signed diagonal, folded into the card's corner. */
.about[data-mod="carte"] [data-dirigeant]::after {
content: ""; position: absolute; right: 0; top: 0;
width: clamp(56px, 5vw, 76px); aspect-ratio: 1;
background: var(--cc-cyan);
clip-path: polygon(38% 0, 100% 0, 100% 62%);
}
.about[data-mod="carte"] [data-surtitre] {
display: flex; align-items: center; gap: 14px;
font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--cc-blue-ink);
}
.about[data-mod="carte"] [data-surtitre]::before {
content: ""; width: 44px; height: 4px; background: var(--cc-cyan); flex: none;
}
/* Sized so « COSMIN-GABRIEL » holds on one line inside the card at every width. */
.about[data-mod="carte"] .about__title {
margin-top: clamp(12px, 1.4vw, 18px);
font-size: clamp(28px, 3.2vw, 46px); line-height: 1; hyphens: none;
}
.about[data-mod="carte"] .about__lead { margin-top: 14px; line-height: 1.5; }
.about[data-mod="carte"] [data-lignes] { margin: clamp(22px, 2.6vw, 34px) 0 0; border-top: 1px solid var(--cc-ghost); }
.about[data-mod="carte"] [data-lignes] > div {
display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px;
align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cc-ghost);
}
.about[data-mod="carte"] [data-lignes] dt {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--cc-blue-ink);
}
.about[data-mod="carte"] [data-lignes] dt svg { width: 18px; height: 18px; fill: var(--cc-blue-ink); flex: none; }
.about[data-mod="carte"] [data-lignes] dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cc-ink); }
.about[data-mod="carte"] [data-tel] dd a {
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--ff-display); font-weight: 800; font-size: clamp(22px, 2vw, 28px);
color: var(--cc-ink); text-decoration: none; border-bottom: 2px solid transparent;
}
.about[data-mod="carte"] [data-tel] dd a:hover,
.about[data-mod="carte"] [data-tel] dd a:focus-visible { border-bottom-color: var(--cc-blue-ink); }
.about[data-mod="carte"] [data-plus] { margin-top: clamp(20px, 2.4vw, 30px); }
.about[data-mod="carte"] [data-plus] a {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
font-family: var(--ff-display); font-weight: 700; font-size: 17px;
color: var(--cc-blue-ink); text-decoration: none; border-bottom: 2px solid currentColor;
}
.about[data-mod="carte"] [data-plus] a span { transition: transform .25s var(--ease); }
.about[data-mod="carte"] [data-plus] a:hover span,
.about[data-mod="carte"] [data-plus] a:focus-visible span { transform: translateX(5px); }
/* The quote form (same as on Contact) on a white sheet headed in navy by the claim. The form
is about twice the card's height: the grid tops both columns and the card stays in view
while the form scrolls past (sticky, clear of the fixed header). */
/* `clip`, not the signed `hidden`: it still trims the band at the screen edge but is no
scroll container, so the sticky card sticks to the page (browsers without `clip` keep
`hidden`: the card just scrolls). */
.about[data-mod="carte"] { overflow: clip; }
.about[data-mod="carte"] [data-grille] { align-items: start; }
.about[data-mod="carte"] [data-dirigeant] { position: sticky; top: 124px; }
/* No background on the sheet itself: its header and form paint above the band (z 1),
the band stays below them (z 0) without a stacking context in between. */
.about[data-mod="carte"] [data-formulaire] {
position: relative;
box-shadow: 0 28px 60px -34px color-mix(in srgb, var(--cc-navy) 45%, transparent);
}
/* The band starts behind the sheet and runs to the screen edge; it shows on the right
and, cut on the signed diagonal, under the sheet, with the cyan edge along the cut,
12px off. */
.about[data-mod="carte"] [data-formulaire]::before {
content: ""; position: absolute; z-index: 0;
top: 64px; bottom: -48px; left: 42%; right: -50vw;
background: var(--cc-blue);
clip-path: polygon(110px 0, 100% 0, 100% 100%, 0 100%);
}
.about[data-mod="carte"] [data-formulaire]::after {
content: ""; position: absolute; z-index: 0;
top: 64px; bottom: -48px; left: calc(42% - 30px); width: 126px;
background: var(--cc-cyan);
clip-path: polygon(110px 0, 126px 0, 16px 100%, 0 100%);
}
.about[data-mod="carte"] [data-tag] {
position: relative; z-index: 1;
padding: clamp(20px, 2vw, 28px) clamp(24px, 3vw, 44px);
background: var(--cc-navy); color: var(--cc-white);
border-left: 6px solid var(--cc-cyan);
}
.about[data-mod="carte"] [data-tag] h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.1; }
.about[data-mod="carte"] [data-tag] p { margin-top: 6px; font-size: 15px; color: var(--cc-ghost); }
.about[data-mod="carte"] [data-formulaire] .formulaire {
position: relative; z-index: 1;
max-width: none; padding: clamp(24px, 3vw, 44px); background: var(--cc-white);
}
@media (max-width: 1180px) {
.about[data-mod="carte"] [data-lignes] > div { grid-template-columns: 124px minmax(0, 1fr); }
}
@media (max-width: 900px) {
.about[data-mod="carte"] [data-grille] { grid-template-columns: minmax(0, 1fr); }
.about[data-mod="carte"] [data-dirigeant] { position: relative; top: auto; }
.about[data-mod="carte"] [data-formulaire]::before { left: 30%; }
.about[data-mod="carte"] [data-formulaire]::after { left: calc(30% - 30px); }
}
@media (max-width: 560px) {
.about[data-mod="carte"] [data-lignes] > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.about[data-mod="carte"] [data-formulaire] .formulaire { padding: 22px 18px; }
}
/* ==========================================================================
Footer links in lines (Iulian, 2026-09-26). Ten trade links one under the other made
the link block the tallest thing in the footer, on every page. From 701px the three
lists (Navigation, Services, Informations) sit one under the other, each running in
lines split by small cyan dots (drawn, not typed, so screen readers don't read them):
the home footer goes from 970 to ~795px at 1440. On phones « Navigation » and
« Informations » stay two columns of links (in lines they'd save only ~40px) and the
trades run in lines underneath. Links keep their signed tap height.
No new class: data-services on the column, tokens only.
========================================================================== */
.close__cols ul { display: flex; flex-wrap: wrap; }
.close__cols li { display: flex; align-items: center; margin-bottom: 0; }
.close__cols li:not(:last-child)::after {
content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%;
background: var(--cc-cyan); flex: none;
}
/* The signed 44px minimum width left a gap after the short « FAQ »; the height stays. */
.close__cols a { min-width: 0; }
@media (min-width: 701px) {
.close__cols { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 2vw, 26px); }
.close__col-title { margin-bottom: 4px; }
}
@media (max-width: 700px) {
.close__cols > [data-services] { grid-column: 1 / -1; grid-row: 2; }
.close__cols > :not([data-services]) ul { display: block; }
.close__cols > :not([data-services]) li { margin-bottom: 4px; }
.close__cols > :not([data-services]) li::after { content: none; }
}
/* ==========================================================================
/services « Un projet, plusieurs métiers » (Iulian, 2026-10-10, trial A « cartes »; replaces
the 2026-09-26 matrix, which visitors could not read): one card per project — its photo, its
lead, then only the trades that take part, as filled navy links. Three cards over two on
desktop (the two wide ones crop 2:1), two per row on tablets with the last one wide (2:1),
one per row on phones (3:2). Under them, the
one person who runs them all.
No new class: #id + data-*, tokens only.
========================================================================== */
#projets-metiers { padding: var(--sec-y) 0; background: var(--cc-mist); }
#projets-metiers h3 { margin: 0; font-size: clamp(20px, 1.7vw, 25px); color: var(--cc-ink); }
#projets-metiers [data-cartes] {
margin: 0; padding: 0; list-style: none;
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
}
#projets-metiers [data-cartes] > li {
grid-column: span 2; display: flex; flex-direction: column;
background: var(--cc-white); border-top: 4px solid var(--cc-navy);
box-shadow: 0 10px 28px color-mix(in srgb, var(--cc-navy) 10%, transparent);
}
#projets-metiers [data-cartes] > li:nth-child(n+4) { grid-column: span 3; }
#projets-metiers [data-cartes] picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
#projets-metiers [data-cartes] > li:nth-child(n+4) picture { aspect-ratio: 2 / 1; }
#projets-metiers [data-cartes] img { display: block; width: 100%; height: 100%; object-fit: cover; }
#projets-metiers [data-cartes] > li > div { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
#projets-metiers [data-cartes] > li > div > p:not([data-titre-liste]) {
margin: 8px 0 18px; font-size: 15px; line-height: 1.55; color: var(--cc-ink-soft);
}
#projets-metiers [data-titre-liste] {
margin: auto 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-blue-ink);
}
#projets-metiers [data-cartes] ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#projets-metiers [data-cartes] ul a {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
font-size: 14px; font-weight: 700; color: var(--cc-white); text-decoration: none; background: var(--cc-navy);
transition: background-color .25s var(--ease);
}
#projets-metiers [data-cartes] ul a:hover,
#projets-metiers [data-cartes] ul a:focus-visible { background: var(--cc-blue-cta); }
#projets-metiers [data-interlocuteur] {
margin-top: clamp(24px, 3vw, 40px); padding: 18px 22px;
background: var(--cc-white); border-left: 6px solid var(--cc-cyan);
font-size: 17px; line-height: 1.6; color: var(--cc-ink);
}
#projets-metiers [data-interlocuteur] strong { font-family: var(--ff-display); }
#projets-metiers [data-interlocuteur] a {
font-family: var(--ff-display); font-weight: 800; white-space: nowrap;
color: var(--cc-blue-ink); text-decoration: none; border-bottom: 2px solid currentColor;
}
@media (max-width: 900px) {
#projets-metiers [data-cartes] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#projets-metiers [data-cartes] > li,
#projets-metiers [data-cartes] > li:nth-child(n+4) { grid-column: auto; }
#projets-metiers [data-cartes] > li:last-child { grid-column: 1 / -1; }
#projets-metiers [data-cartes] > li:nth-child(4) picture { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
#projets-metiers [data-cartes] { grid-template-columns: minmax(0, 1fr); }
#projets-metiers [data-cartes] > li:last-child picture { aspect-ratio: 3 / 2; }
}
/* ==========================================================================
One footer instead of two (Iulian, 2026-09-26: « too many containers »): the closing
section now sits inside the page