.aa.aa-cadre { width: min(100%, calc(var(--aa-l) * 1px), calc(78svh * var(--aa-l) / var(--aa-h))); justify-self: center; }
.aa.aa-cadre canvas, .aa.aa-cadre > img { aspect-ratio: var(--aa-l) / var(--aa-h); }
.aa-temps { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 6px; padding: 0 18px; border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; }
.aa-temps::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.aa-temps[aria-pressed="true"]::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--fond-temps, #FFFFFF); }
.aa-temps:hover { background: rgba(127, 127, 127, .12); }
.aa-temps:focus-visible { outline: 3px solid var(--cyan-texte, #0B6E8A); outline-offset: 3px; }
.anthracite .aa-temps { --fond-temps: var(--anthracite); }
.anthracite .aa-temps:focus-visible { outline-color: #9FE3F3; }
.projet-texte .aa-temps { margin-bottom: 18px; }
.mention-valider { display: inline-block; margin: 6px 0 14px; padding: 4px 12px; border-radius: 999px; background: #FFF3C4; color: #5C4A00; font-size: 13px; line-height: 1.45; }
.projet-texte .mention-valider { color: #5C4A00; }
.heros-photo.heros-julien { left: 50%; right: auto; bottom: auto; width: min(100%, 1280px); height: min(100%, 960px); transform: translateX(-50%); }
.trois-temps { padding: clamp(64px, 10vh, 120px) 0 clamp(20px, 3vh, 40px); }
.tt-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 32px; }
.tt-tete h2 { margin: 0; max-width: 14ch; font-size: clamp(34px, 4.4vw, 68px); color: var(--texte, #2E2E2E); }
.tt-tete p { margin: 14px 0 0; max-width: 36ch; color: var(--doux); font-size: 18px; }
.tt-fil { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tt-fil button {
display: grid; align-content: start; gap: 8px; min-width: 96px; min-height: 44px; margin: 0; padding: 0 0 6px; border: 0; background: none; cursor: pointer;
font: 650 15px/1.2 var(--titre); text-align: left; color: var(--doux); transition: color .3s;
}
.tt-fil button::before { content: ""; height: 3px; border-radius: 2px; background: var(--trait, #E1DDD6); transition: background-color .3s; }
.tt-fil button[aria-current="step"] { color: var(--texte, #2E2E2E); }
.tt-fil button[aria-current="step"]::before { background: var(--cyan, #00A8D0); }
.tt-fil button:hover { color: var(--texte, #2E2E2E); }
.tt-fil button:focus-visible { outline: 3px solid var(--cyan, #00A8D0); outline-offset: 4px; }
.tt-bande {
display: flex; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 4vh, 44px);
padding: 0 var(--marge) 8px max(var(--marge), (100% - var(--large)) / 2);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--marge), (100% - var(--large)) / 2);
scrollbar-width: none; cursor: grab;
}
.tt-bande::-webkit-scrollbar { display: none; }
.tt-bande:focus-visible { outline: 3px solid var(--cyan, #00A8D0); outline-offset: 6px; }
.tt-bande.tire { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tt-bande.tire img { pointer-events: none; }
.tt-bande figure { flex: 0 0 auto; width: max(min(38vw, 52vh), min(240px, 80vw)); margin: 0; scroll-snap-align: start; }
.tt-bande img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--gris); -webkit-user-drag: none; user-select: none; }
.tt-bande figcaption { margin-top: 14px; max-width: 34ch; color: var(--doux); font-size: 16px; line-height: 1.45; }
.tt-bande figcaption b { display: block; margin-bottom: 2px; color: var(--texte, #2E2E2E); font-weight: 750; font-variation-settings: "wdth" 112; font-size: 19px; }
.tt-bande figure:last-child figcaption b { color: var(--cyan-texte, #0B6E8A); }
@media (prefers-reduced-motion: reduce) { .tt-bande { scroll-snap-type: none; } .tt-fil button, .tt-fil button::before { transition: none; } }
@media (max-width: 699px) {
.tt-bande figure { width: 80vw; }
.tt-fil { width: 100%; }
.tt-fil li { flex: 1; }
.tt-fil button { min-width: 0; width: 100%; font-size: 13.5px; }
}
.photo-chantier { padding: clamp(40px, 7vh, 84px) 0; }
.pc-figure { max-width: 1100px; margin: 0 auto; aspect-ratio: 2 / 1; }
.pc-figure img { height: 100%; object-position: 50% 62%; }
@media (max-width: 699px) { .pc-figure { aspect-ratio: 4 / 3; } }
.renos-heros { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(24px, 4vw, 64px); padding-inline: var(--marge); padding-bottom: clamp(32px, 5vh, 56px); }
.renos-heros .aa.aa-cadre { order: 2; height: auto; width: min(100%, 588px, calc((100svh - var(--haut-fixe) - 140px) * 588 / 882)); }
.renos-heros .aa.aa-cadre canvas, .renos-heros .aa.aa-cadre > img { height: auto; }
.renos-heros .renos-texte { position: static; order: 1; color: var(--texte, #2E2E2E); pointer-events: auto; max-width: 640px; padding-bottom: 8px; }
.renos-heros .renos-texte::before { content: none; }
.renos-heros h1 { color: var(--anthracite, #2E2E2E); }
.renos-heros .renos-texte p { color: var(--doux, #5B6168); font-size: 16px; margin: 14px 0 18px; }
@media (max-width: 1023px) {
.renos-heros { grid-template-columns: minmax(0, 1fr); }
.renos-heros .aa.aa-cadre { order: 1; height: auto; justify-self: center; }
.renos-heros .renos-texte { order: 2; }
}
.nacelles-photos .n-julien img { position: absolute; inset: 0; width: 100%; }
.cadre-photo:has(img[src*="julien/"]) figcaption { background: linear-gradient(180deg, rgba(20, 22, 24, 0) 0, rgba(20, 22, 24, .86) 24px, rgba(20, 22, 24, .9) 100%); }
.tuile:has(img[src*="julien/"])::after { background: linear-gradient(0deg, rgba(18, 20, 22, .93) 0%, rgba(18, 20, 22, .82) 45%, rgba(18, 20, 22, .3) 80%, rgba(18, 20, 22, .05) 100%); }
.metier-panneau:has(> img[src*="julien/"])::after { background: linear-gradient(0deg, rgba(20, 22, 24, .94) 0%, rgba(20, 22, 24, .84) 50%, rgba(20, 22, 24, .35) 78%, rgba(20, 22, 24, .08) 100%); }
.heros:has(.heros-julien)::after {
background: linear-gradient(90deg, rgba(20, 22, 24, .86) 0%, rgba(20, 22, 24, .6) 46%, rgba(20, 22, 24, .12) 78%),
linear-gradient(0deg, rgba(20, 22, 24, .7) 0%, rgba(20, 22, 24, 0) 55%);
}
@media (max-width: 899px) {
.heros:has(.heros-julien)::after { background: linear-gradient(180deg, rgba(20, 22, 24, .45) 0%, rgba(20, 22, 24, .78) 30%, rgba(20, 22, 24, .92) 60%); }
}
@media (max-width: 699px) {
.metier-panneau:has(> img[src*="julien/"])::after { background: linear-gradient(0deg, rgba(20, 22, 24, .94) 0%, rgba(20, 22, 24, .86) 62%, rgba(20, 22, 24, .4) 88%, rgba(20, 22, 24, .1) 100%); }
}
@media (min-width: 1024px) {
.projet-grand > .aa.aa-cadre { justify-self: end; }
.projet-grand.inverse > .aa.aa-cadre { justify-self: start; }
}
@media (max-width: 899px) { .heros-photo.heros-julien { height: min(100%, 480px); } }
.service-photos .cadre-photo figcaption { background: linear-gradient(180deg, rgba(20, 22, 24, 0) 0, rgba(20, 22, 24, .86) 24px, rgba(20, 22, 24, .9) 100%); }
@media (min-width: 1024px) {
.renos-heros { grid-template-columns: minmax(0, 560px) auto; justify-content: center; align-items: center; padding-top: calc(var(--haut-fixe) + 40px); }
.renos-heros .aa.aa-cadre { width: min(100%, 588px, calc((100svh - var(--haut-fixe) - 80px) * 588 / 882)); }
}
@media (min-width: 1024px) {
.renos-heros { padding-top: calc(var(--haut-fixe) + var(--entete) + 28px); }
.renos-heros .aa.aa-cadre { width: min(100%, 588px, calc((100svh - var(--haut-fixe) - var(--entete) - 72px) * 588 / 882)); }
}
@media (max-width: 699px) {
.metier-panneau:has(> img[src*="julien/"])::after { background: linear-gradient(0deg, rgba(20, 22, 24, .94) 0%, rgba(20, 22, 24, .88) 75%, rgba(20, 22, 24, .5) 92%, rgba(20, 22, 24, .2) 100%); }
}
.metier-panneau:has(> img[src*="julien/"]) .etiquette { display: inline-block; padding: 3px 8px; background: rgba(20, 22, 24, .88); }
.metier-panneau.sans-photo { background: #24282B; justify-content: center; }
.metier-panneau.sans-photo::after { background: linear-gradient(160deg, rgba(0, 168, 208, .10) 0%, rgba(0, 168, 208, 0) 60%); }
:root .metier-panneau.sans-photo .sp-icone { position: absolute; left: clamp(24px, 3vw, 52px); top: clamp(24px, 3vw, 52px); z-index: 1; width: 64px; height: 64px; color: var(--cyan); stroke-width: 1.3; }
.metier-panneau .coches.commerciaux { margin-top: 18px; max-width: 520px; }
.metier-panneau .coches.commerciaux li { border-top-color: rgba(255, 255, 255, .18); color: #F1F3F4; font-size: 16px; }
.metier-panneau .coches.commerciaux li::before { border-color: #9FE3F3; }
@media (max-width: 899px) { .metier-panneau.sans-photo { min-height: 0; padding-top: 96px; } :root .metier-panneau.sans-photo .sp-icone { width: 48px; height: 48px; } }
@media (max-width: 1023px) and (max-height: 520px) {
.metier-panneau:not(.sans-photo)::after { background: linear-gradient(0deg, rgba(20, 22, 24, .94) 0%, rgba(20, 22, 24, .86) 60%, rgba(20, 22, 24, .76) 100%); }
}