:root { --sous-entete: calc(var(--haut-fixe) + var(--entete)); }
.postes-ecran h1, .mosaique-equipe h1, .carte-grand h1, .candidature-zone h2, .ecrire-zone h2, .poste-nom {
text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal;
}
.poste-nom { font-family: var(--titre); font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.015em; line-height: 1; }
.insecable { white-space: nowrap; }
.formulaire-l2 { padding: clamp(22px, 3vw, 40px); background: #FFFFFF; border: 1px solid var(--trait); }
.formulaire-l2 fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire-l2 .groupe { margin: 0; }
.formulaire-l2 .plein { grid-column: 1 / -1; }
.formulaire-l2 .case { margin-top: 0; min-height: 44px; }
.formulaire-l2 .puce:has(input:checked) { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); background: #F1FAFD; }
.formulaire-l2 .champ select, .formulaire-l2 .champ input[type="date"], .formulaire-l2 .champ input[type="file"] {
font: 400 17px/1.4 var(--titre); letter-spacing: 0; text-transform: none; color: var(--texte);
background: #FFFFFF; border: 1px solid #C9CFD3; border-radius: 2px; padding: 12px 14px; min-height: 52px; width: 100%;
}
.formulaire-l2 .champ input[type="file"] { padding: 10px; }
.formulaire-l2 [aria-invalid="true"] { border-color: #B42318; }
.formulaire-l2 fieldset[aria-invalid="true"] .puce { border-color: #B42318; }
.formulaire-l2 .legal { margin-top: 22px; }
.formulaire-l2 .a-valider { margin-top: 14px; }
.formulaire-l2 .pas-branche { margin-top: 14px; }
.formulaire-l2 .nav-form { margin-top: 22px; }
.message-formulaire:empty { display: none; }
.message-formulaire { margin: 16px 0 0; padding: 14px 16px; background: #E6F6FA; border-left: 3px solid var(--cyan); color: #2E2E2E; }
.message-formulaire.manque { background: #FDECEA; border-color: #B42318; }
.postes-ecran {
position: relative; padding: calc(var(--sous-entete) + clamp(28px, 6vh, 72px)) 0 clamp(44px, 8vh, 96px);
background: linear-gradient(180deg, var(--gris) 0%, var(--fond) 100%); border-bottom: 1px solid var(--trait);
}
.postes-cadre {
width: min(1600px, 100% - 2 * var(--marge)); margin-inline: auto;
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center;
}
.postes-texte .etiquette { margin-top: 22px; }
.postes-texte h1 { margin: 12px 0 0; font-size: clamp(36px, 4vw, 64px); }
.postes-texte p { margin: 22px 0 0; max-width: 42ch; color: var(--doux); font-size: clamp(17px, 1.35vw, 19px); }
.postes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.postes li { border-bottom: 1px solid var(--trait); }
.poste {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom aller" "detail aller";
align-content: center; gap: 10px 24px; min-height: clamp(150px, 24vh, 220px); padding: 24px clamp(18px, 2.4vw, 36px);
color: var(--texte); text-decoration: none; overflow: hidden; isolation: isolate;
}
.poste-photo { position: absolute; inset: 0; z-index: -1; clip-path: inset(0 0 0 100%); transition: clip-path .6s cubic-bezier(.2, .7, .2, 1); }
.poste-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.poste-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 20, 22, .88) 0%, rgba(18, 20, 22, .72) 100%); }
.poste-nom { grid-area: nom; font-size: clamp(28px, 3vw, 50px); transition: color .3s; }
.poste-detail { grid-area: detail; font-size: 17px; color: var(--doux); transition: color .3s; }
.poste-aller {
grid-area: aller; align-self: center; display: inline-flex; align-items: center; min-height: 44px;
font-weight: 700; color: #FFFFFF; border-bottom: 2px solid var(--cyan); opacity: 0; transition: opacity .3s;
}
.poste.on .poste-photo { clip-path: inset(0 0 0 0); }
.poste.on .poste-nom { color: #FFFFFF; }
.poste.on .poste-detail { color: #9FE3F3; }
.poste.on .poste-aller { opacity: 1; }
.poste:focus-visible { outline-offset: -3px; }
.postes-ecran .pastille { top: auto; bottom: 24px; }
@media (max-width: 1023px), (hover: none) {
.poste-photo { clip-path: none; transition: none; }
.poste .poste-nom { color: #FFFFFF; }
.poste .poste-detail { color: #9FE3F3; }
.poste .poste-aller { opacity: 1; }
}
@media (max-width: 1023px) {
.postes-cadre { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.postes { display: grid; gap: 10px; border: 0; }
.postes li { border: 0; }
.poste { min-height: 168px; }
}
@media (max-width: 699px) {
.postes-ecran { padding-top: calc(var(--sous-entete) + 24px); }
.poste { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nom" "detail" "aller"; gap: 8px; padding: 22px 18px; }
.poste-nom { font-size: clamp(26px, 7.6vw, 34px); }
.poste-aller { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .poste-photo, .poste-nom, .poste-detail, .poste-aller { transition: none; } }
.candidature-zone { padding: clamp(64px, 10vh, 120px) 0; background: var(--gris); }
.candidature-zone .cadre { width: min(1040px, 100% - 2 * var(--marge)); }
.candidature-zone h2 { margin-bottom: 28px; font-size: clamp(30px, 3.4vw, 50px); }
.mosaique-equipe {
position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: max(100dvh, 640px);
padding: calc(var(--sous-entete) + 8px) 8px 8px; background: var(--fond);
}
.mosaique-texte { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: clamp(26px, 3vw, 48px); }
.mosaique-texte h1 { margin: 16px 0 0; font-size: clamp(34px, 3.4vw, 58px); }
.mosaique-texte .sous-titre-page { margin: 14px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--texte); }
.mosaique-texte ul { list-style: none; margin: 0; padding: 0; }
.mosaique-texte li { margin-top: 12px; padding: 8px 0 8px 18px; border-left: 2px solid var(--cyan); font-size: 16px; line-height: 1.55; color: var(--texte); }
.tuile-equipe { position: relative; margin: 0; overflow: hidden; border-radius: 2px; background: #2E2E2E; min-height: 220px; }
.tuile-equipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile-equipe.grande { grid-row: 1 / 3; }
.tuile-equipe figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 1; padding: 4px 9px; background: rgba(18, 20, 22, .8); color: #FFFFFF; font-size: 14px; }
.mosaique-equipe .pastille { top: auto; bottom: 24px; }
@media (max-width: 1023px) {
.mosaique-equipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
.mosaique-texte { grid-row: auto; grid-column: 1 / -1; }
.tuile-equipe { min-height: 0; aspect-ratio: 1; }
.tuile-equipe.grande { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
@media (max-width: 699px) {
.mosaique-equipe { padding: calc(var(--sous-entete) + 6px) 6px 6px; gap: 6px; }
.mosaique-texte { padding: 26px 18px; }
.mosaique-texte h1 { font-size: clamp(32px, 9vw, 42px); }
.tuile-equipe.grande { aspect-ratio: 4 / 5; }
.tuile-equipe figcaption { left: 8px; right: 8px; bottom: 8px; font-size: 13px; }
}
.carte-grand {
position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
min-height: 100dvh; padding-top: var(--sous-entete); background: #F4F7F8;
}
.carte-grand-texte { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vh, 48px) var(--marge) clamp(28px, 4vh, 44px); }
.carte-grand-texte h1 { margin: 6px 0 0; font-size: clamp(34px, 3.3vw, 54px); }
.carte-grand-texte > p { margin: 0; color: var(--doux); font-size: 17px; max-width: 46ch; }
.coordonnees { list-style: none; margin: 4px 0 0; padding: 0; }
.coordonnees li { border-top: 1px solid var(--trait); }
.coordonnees a, .coordonnees div { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 11px 0; color: var(--texte); text-decoration: none; }
.coordonnees a:hover .v { color: var(--cyan-titre); }
.coordonnees .k { font: 500 12px/1.4 var(--titre); color: var(--cyan-texte); }
.coordonnees .v { font-weight: 700; font-variation-settings: "wdth" 112; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; overflow-wrap: anywhere; }
.carte-grand-texte .bouton { align-self: flex-start; margin-top: auto; }
.carte-grand-carte { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 3vw, 40px); }
.carte-grand .carte-secteurs { border: 0; width: 100%; height: auto; max-height: calc(100dvh - var(--sous-entete) - 110px); }
.carte-grand-carte figcaption { margin-top: 10px; color: var(--doux); font-size: 14px; line-height: 1.5; }
@media (min-width: 1024px) { .page-nous-joindre .carte-grand-carte figcaption { padding-right: 200px; } }
.carte-grand-carte .a-valider { margin-top: 8px; color: #00627A; border-color: #00627A; }
.carte-grand .pastille { top: auto; bottom: 24px; }
@media (max-width: 1023px) {
.carte-grand { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.carte-grand .carte-secteurs { max-height: none; }
}
@media (max-width: 699px) {
.carte-grand-texte { padding: 26px var(--marge) 30px; }
.carte-grand-texte h1 { font-size: clamp(30px, 8.6vw, 40px); }
.carte-grand-carte { padding: 16px 8px 22px; }
.carte-grand-carte figcaption, .carte-grand-carte .a-valider { margin-inline: 10px; }
.carte-grand .carte-secteurs .ville text { font-size: 22px; }
.carte-grand .carte-secteurs .base text { font-size: 21px; }
.carte-grand .carte-secteurs .base .fort { font-size: 27px; }
.carte-grand .carte-secteurs .region { font-size: 17px; letter-spacing: .08em; }
.carte-grand .carte-secteurs .lac-nom { font-size: 19px; }
.carte-grand .carte-secteurs .nord text, .carte-grand .carte-secteurs .echelle text { font-size: 19px; }
}
.ecrire-zone { padding: clamp(64px, 10vh, 120px) 0; background: var(--fond); border-top: 1px solid var(--trait); }
.ecrire-zone .cadre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ecrire-texte p { margin: 0; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.ecrire-texte h2 { margin-top: 28px; font-size: clamp(34px, 3.8vw, 60px); }
@media (max-width: 1023px) { .ecrire-zone .cadre { grid-template-columns: minmax(0, 1fr); } }
:is(.page-portes-fenetres, .page-revetement-residentiel, .page-revetement-commercial, .page-balcons-rampes, .page-gouttieres, .page-pliage) .l2s-raisons { padding-bottom: clamp(20px, 3vh, 32px); }
:is(.page-portes-fenetres, .page-revetement-residentiel, .page-revetement-commercial, .page-balcons-rampes, .page-gouttieres, .page-pliage) .service-contenu { padding: clamp(36px, 5vh, 52px) 0; }
:is(.page-portes-fenetres, .page-revetement-residentiel, .page-revetement-commercial, .page-balcons-rampes, .page-gouttieres, .page-pliage) .service-questions { padding-top: clamp(36px, 5vh, 52px); }
main:has(> #pose) .intro { padding-top: clamp(36px, 5vh, 56px); padding-bottom: clamp(28px, 4vh, 40px); }
main:has(> #pose) .sv-a { padding-top: clamp(36px, 3.4vw, 48px); padding-bottom: clamp(40px, 3.8vw, 56px); }
main:has(> #pose) .deroulement { padding-bottom: clamp(64px, 10vh, 120px); }
main:has(> #pose) .bande-points { padding-bottom: clamp(32px, 5vh, 48px); }
main:has(> #pose) .marques { padding-top: clamp(36px, 3.4vw, 48px); padding-bottom: clamp(36px, 3.4vw, 48px); }
main:has(> #pose) .realisation-accueil { padding-top: clamp(40px, 6vh, 64px); }
main:has(> #pose) .faq-accueil { padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(32px, 4vh, 44px); }
main:has(> #pose) .appel-final { padding-top: clamp(32px, 4vh, 44px); }
.page-soumission .tete-page { padding-bottom: clamp(24px, 3vh, 32px); }
.page-soumission .soumission { padding: clamp(28px, 3.6vh, 36px) 0 clamp(40px, 6vh, 64px); }
.page-faq .tete-page { padding-bottom: clamp(32px, 5vh, 48px); }
.page-faq .faq-page { padding-top: clamp(24px, 3vh, 32px); }
.page-carrieres .postes-ecran { padding-bottom: clamp(32px, 5vh, 48px); }
.page-carrieres .candidature-zone { padding-top: clamp(28px, 4vh, 40px); }
.page-nacelles .chantiers-nacelles { padding-bottom: clamp(36px, 5vh, 52px); }
.page-nacelles .questions-location { padding: clamp(36px, 5vh, 52px) 0 clamp(28px, 4vh, 40px); }
.page-nacelles .location { padding: clamp(36px, 5vh, 48px) 0; }
.page-realisations .aa-section { padding-bottom: clamp(32px, 4vh, 44px); }
.page-realisations .galerie { padding: clamp(28px, 4vh, 40px) 0 clamp(40px, 6vh, 64px); }
.page-realisations .tete-page { padding-bottom: clamp(16px, 2.4vh, 24px); }
@media (min-width: 1024px) and (min-height: 820px) { .page-realisations .rb-pied { padding-bottom: clamp(26px, calc(100vh - 820px), 110px); } }
.page-nous-joindre .ecrire-zone { padding-bottom: clamp(36px, 5vh, 52px); }
.page-nous-joindre .renvoi-emploi { padding-top: clamp(28px, 3vw, 40px); }
.page-renovations .renos { padding: clamp(40px, 4.4vw, 64px) 0; }
.page-a-propos .force { padding: clamp(56px, 9vh, 96px) 0; }
@media (max-width: 899px) {
.pied-services a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-bottom: 0; }
.tuile-materiau .essayer-sim { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding-top: 0; }
dd > a[href^="tel:"], dd > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
dd:has(> .copier) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
dd:has(> .copier) > a { margin-block: 0; }
dd:has(> .copier) > .copier { margin-left: 0; }
#simulateur .sim-bascule button { min-height: 44px; padding: 0 11px; border-block: 4px solid transparent; margin-block: -4px; background-clip: padding-box; }
#simulateur .sim-bascule button::after { content: none; }
.maquette button { position: relative; min-height: 44px; margin-block: -9px; padding: 0 9px; border: 0; background: none; }
.maquette button::before { content: ""; position: absolute; inset: 12px 0; z-index: -1; border: 1px solid #B9CBFF; border-radius: 2px; pointer-events: none; }
.maquette button[aria-pressed="true"] { background: none; }
.maquette button[aria-pressed="true"]::before { background: var(--note); border-color: var(--note); }
}
@media (min-width: 1024px) {
.pose:not(.pas-a-pas) .tete::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
top: calc(var(--haut-fixe) + 72px); bottom: -110px; left: calc(50% - 50vw); right: calc(50% - 50vw);
background: linear-gradient(to bottom, rgba(14, 16, 18, .8) 0%, rgba(14, 16, 18, .74) calc(100% - 150px), rgba(14, 16, 18, 0) 100%);
}
.pose:not(.pas-a-pas) .tete, .pose:not(.pas-a-pas) h1 { color: #FFFFFF; }
.pose:not(.pas-a-pas) .tete .etiquette { color: #9FE3F3; }
.pose:not(.pas-a-pas) .sous { color: rgba(255, 255, 255, .92); }
.pose:not(.pas-a-pas) .tete .bouton.sombre { background: #F2EFE9; border-color: #F2EFE9; color: #1E1E1E; }
.pose:not(.pas-a-pas) .tete .bouton.sombre:hover { background: #FFFFFF; color: #111; }
}
.service-choisi { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: #E6F6FA; color: #00576C;
font-weight: 650; font-size: 15px; line-height: 1.4; }
@media (max-width: 699px) {
.appel-projet, .service-contenu, .service-questions, .chantiers-nacelles, .candidature-zone, .galerie { padding-top: 40px; padding-bottom: 40px; }
.chantiers-nacelles { padding-top: 24px; }
footer, footer.anthracite { padding-top: 16px; }
}
.bande-emploi::after {
background: linear-gradient(90deg, rgba(20, 22, 24, .86) 0%, rgba(20, 22, 24, .72) 42%, rgba(20, 22, 24, .1) 72%),
linear-gradient(180deg, rgba(20, 22, 24, .35) 0%, rgba(20, 22, 24, .2) 45%, rgba(20, 22, 24, .65) 100%);
}
@media (max-width: 699px) { .bande-lente::after, .bande-emploi::after { background: linear-gradient(180deg, rgba(20, 22, 24, .66) 0%, rgba(20, 22, 24, .8) 30%, rgba(20, 22, 24, .88) 62%); } }
@media (min-width: 700px) {
.appel-projet { padding-top: clamp(48px, 7vh, 72px); padding-bottom: clamp(48px, 7vh, 72px); }
.service-contenu.service-contenu { padding-bottom: clamp(36px, 5vh, 56px); }
.service-questions.service-questions { padding-top: clamp(28px, 4vh, 44px); padding-bottom: clamp(33px, calc(5vh - 3px), 53px); }
.candidature-zone { padding-bottom: 36px; }
.page-nacelles .location { padding-bottom: 24px; }
footer, footer.anthracite { padding-top: 24px; }
}
.politique .cadre > * { max-width: 760px; }
.politique { padding-top: 24px; }
.politique h2 { margin: 40px 0 12px; font-size: clamp(24px, 2.2vw, 32px); }
.politique h3 { margin: 22px 0 6px; font-size: 18px; font-weight: 500; }
.politique p { margin: 0 0 12px; line-height: 1.65; }
.politique-date { color: var(--doux); font-size: 15px; }
.politique .a-completer { display: inline-block; padding: 6px 14px; border-radius: 8px; background: #FFF3C4; color: #5C4A00; font-weight: 500; }
.page-politique-de-confidentialite .tete-page { padding-bottom: clamp(16px, 2.4vh, 24px); }
.politique { padding-bottom: clamp(40px, 6vh, 72px); }
.page-soumission section.soumission { padding-bottom: 24px; }
.page-soumission .deroulement { padding-top: 40px; padding-bottom: 64px; }
.page-renovations .renos { padding-bottom: 24px; }
.page-renovations .appel-projet { padding-top: 48px; }
.page-pliage .service-questions { padding-bottom: 32px; }
@media (max-width: 699px) {
.page-soumission .deroulement { padding-top: 48px; padding-bottom: 56px; }
}
@media (min-width: 700px) {
.bande-lente:not(.bande-emploi)::after {
background: linear-gradient(90deg, rgba(20, 22, 24, .88) 0%, rgba(20, 22, 24, .74) 44%, rgba(20, 22, 24, .1) 74%),
linear-gradient(180deg, rgba(20, 22, 24, .1) 0%, rgba(20, 22, 24, .25) 45%, rgba(20, 22, 24, .72) 100%);
}
}
.page-nous-joindre .renvoi-emploi { padding-bottom: 44px; }
.page-accueil .appel-final { padding-bottom: 60px; }
.page-realisations .galerie { padding-bottom: 32px; }
@media (max-width: 699px) {
.page-accueil .appel-final { padding-bottom: 32px; }
}
.fiche-nacelle { padding: calc(var(--haut-fixe) + var(--entete) + clamp(24px, 4vh, 48px)) 0 clamp(40px, 6vh, 72px); background: linear-gradient(180deg, var(--gris) 0%, var(--fond) 100%); border-bottom: 1px solid var(--trait); }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 18px; }
.fiche-photo { margin: 0; }
.fiche-photo img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; border-radius: 6px; }
.fiche-texte h1 { margin: 14px 0 0; }
.fiche-sorte { margin: 18px 0 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--doux); }
.fiche-points { margin: 26px 0 30px; border-top: 1px solid var(--trait); }
.fiche-points > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.fiche-points dt { font: 500 12px/1.6 var(--titre); color: var(--cyan-texte); }
.fiche-points dd { margin: 0; font-size: 16px; line-height: 1.5; }
.fiche-texte .bouton { min-height: 44px; }
.remise-cueillette .champs-dates, .remise-livraison { margin-top: 4px; }
@media (max-width: 899px) {
.fiche-grille { grid-template-columns: 1fr; }
.fiche-photo img { max-height: 56vh; }
}
@media (max-width: 599px) {
.fiche-points > div { grid-template-columns: 1fr; gap: 2px; }
}
.candidature-grille { display: grid; grid-template-columns: minmax(0, 1fr); width: min(980px, 100%); }
.candidature-zone .formulaire-l2 .puces { gap: 8px; }
.candidature-zone .formulaire-l2 .puce { min-height: 44px; }
.duree-candidature { margin: 16px 0 0; color: var(--doux); font-size: 14px; line-height: 1.5; }
@media (min-width: 700px) {
.page-nous-joindre .ecrire-zone { padding-top: 40px; padding-bottom: 32px; }
.fiche-nacelle { padding-bottom: 24px; }
.page-nacelles .chantiers-nacelles { padding-top: 40px; }
}
.politique-fournisseurs { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.65; }
.consentement-loc { font: 400 15px/1.5 var(--titre); letter-spacing: 0; text-transform: none; color: var(--texte); }
.consentement-loc .case { margin: 0; }
.appel-final .etiquette, .appel-final .coordonnees-final dt { color: #005468; }