:root {
color-scheme: light;
--fond: #F7F4EF;
--gris: #EEE9E1;
--texte: #2E2E2E;
--doux: #5C6165;
--discret: #6B7075;
--trait: #E3DDD3;
--anthracite: #252525;
--cyan: #00A8D0;
--cyan-titre: #008BB0;
--cyan-texte: #00728C;
--bois: #4A352B;
--note: #3D7BFF;
--marge: clamp(20px, 5vw, 72px);
--large: 1360px;
--barre-maquette: 30px;
--avis: 30px;
--sur: env(safe-area-inset-top, 0px);
--sous: env(safe-area-inset-bottom, 0px);
--haut-fixe: calc(var(--sur) + var(--avis) + var(--barre-maquette));
--titre: "Archivo", "Arial Narrow", sans-serif;
--affiche: "Fraunces", Georgia, serif;
--mono: var(--titre);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut-fixe) + 80px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
margin: 0; background: var(--fond); color: var(--texte);
font: 400 17px/1.6 var(--titre); font-variation-settings: "wdth" 100;
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
[hidden] { display: none !important; }
.cadre > *, .champs > *, .cartes > *, .etapes-form, .ecran, .champ input, .champ textarea { min-width: 0; }
a { color: inherit; }
.etiquette { font: 500 12px/1.4 var(--titre); color: var(--cyan-texte); }
.cadre { width: min(var(--large), 100% - 2 * var(--marge)); margin-inline: auto; }
h1, h2, h3 { margin: 0; color: var(--texte); }
h3 { font-family: var(--titre); letter-spacing: -.02em; }
h2 { font-size: clamp(38px, 6vw, 96px); }
h1, h2, .titre-l, .fin-titre, .histoire-ligne, .ecran h3, .projet-texte h3, .comparer-titre, .location-fin h3 {
font-family: var(--affiche); font-weight: 600; font-style: normal; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
letter-spacing: -.01em; line-height: .98;
text-wrap: balance;
}
.note-jt {
display: inline-block; margin-top: 18px; padding: 6px 10px;
border: 1px dashed var(--cyan-texte); color: var(--cyan-texte);
font: 500 11px/1.4 var(--titre);
}
.bouton {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 0 24px; border: 1px solid var(--cyan); border-radius: 2px;
background: var(--cyan); color: #232323; text-decoration: none;
font: 600 15px/1 var(--titre); letter-spacing: .02em; cursor: pointer;
transition: box-shadow .25s, color .25s, background .25s;
}
.bouton:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); color: #111; }
.bouton.avance { position: relative; overflow: hidden; cursor: progress; font-variant-numeric: tabular-nums; }
.bouton.avance::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--avance, 0) * 100%); background: #15181B; }
.bouton.sombre { background: var(--texte); border-color: var(--texte); color: #fff; }
.bouton.sombre:hover { background: #1C1C1C; color: #fff; }
.bouton.creux { background: transparent; border-color: var(--texte); color: var(--texte); }
.bouton.creux:hover { background: var(--gris); }
:focus-visible { outline: 3px solid var(--cyan-texte); outline-offset: 3px; }
.copier {
margin-left: 8px; padding: 4px 9px; border: 1px solid #C9CED1; border-radius: 2px; background: #FFFFFF; color: var(--texte);
font: 500 11px/1.4 var(--titre); cursor: pointer; vertical-align: middle;
}
.copier:hover { border-color: var(--texte); }
.avis-maquette {
position: fixed; top: 0; left: 0; right: 0; z-index: 71; height: calc(var(--sur) + var(--avis));
padding: var(--sur) var(--marge) 0; display: flex; align-items: center; justify-content: center; text-align: center;
background: #FFF4D1; color: #4D3B00; border-bottom: 1px solid #F0DB9A; font: 600 13px/1.3 var(--titre);
}
.maquette {
position: fixed; top: calc(var(--sur) + var(--avis)); left: 0; right: 0; z-index: 70; height: var(--barre-maquette);
display: flex; align-items: center; gap: 14px; padding-inline: var(--marge);
background: #EEF3FF; color: #2049B8; border-bottom: 1px solid #D5E0FF;
font: 500 11px/1 var(--titre);
}
.maquette b { font-weight: 600; }
.maquette .ver-court { display: none; white-space: nowrap; }
.maquette button {
margin-left: auto; background: none; border: 1px solid #B9CBFF; border-radius: 2px; color: inherit;
font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 4px 8px; cursor: pointer;
}
.maquette button + button { margin-left: 0; }
.maquette button[aria-pressed="true"] { background: var(--note); color: #fff; border-color: var(--note); }
.pastille {
position: absolute; z-index: 30; top: var(--t, 0); left: var(--l, 0); display: none;
width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: help;
background: var(--note); color: #fff; font: 600 13px/26px var(--titre); text-align: center;
box-shadow: 0 0 0 4px rgba(61, 123, 255, .22);
}
body.notes .pastille { display: block; }
.pastille .bulle {
position: absolute; left: 34px; top: -6px; width: 300px; padding: 12px 14px; display: none;
background: #fff; color: var(--texte); border: 1px solid #C9D7FF; border-radius: 4px; text-align: left;
font: 400 13px/1.5 var(--titre); letter-spacing: 0; text-transform: none; box-shadow: 0 12px 32px rgba(20, 40, 90, .14);
}
.pastille:hover .bulle, .pastille:focus .bulle { display: block; }
.pastille.gauche .bulle { left: auto; right: 34px; }
.entete {
position: fixed; top: var(--haut-fixe); left: 0; right: 0; z-index: 50; height: 72px;
display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); padding-inline: var(--marge);
transition: background .3s, border-color .3s, box-shadow .3s; border-bottom: 1px solid transparent;
}
.entete.plein { background: rgba(247, 244, 239, .94); backdrop-filter: blur(10px); border-color: var(--trait); }
.entete .logo img { height: 40px; width: auto; }
.entete nav { display: flex; gap: clamp(16px, 2vw, 28px); margin-left: auto; }
.entete nav a { text-decoration: none; font-size: 15px; color: var(--doux); transition: color .2s; }
.entete nav a:hover { color: var(--texte); }
.entete .tel { font: 500 15px/1 var(--titre); text-decoration: none; padding: 12px 16px; border: 1px solid var(--texte); border-radius: 2px; }
.entete .tel:hover { background: var(--texte); color: #fff; }
.entete .soumission-entete { min-height: 41px; padding: 0 18px; }
.bouton.laser { position: relative; overflow: hidden; isolation: isolate; }
.bouton.laser::after {
content: ""; position: absolute; left: 0; bottom: 3px; width: 38%; height: 2px; z-index: -1; pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF 50%, rgba(255, 255, 255, 0));
box-shadow: 0 0 6px rgba(255, 255, 255, .55);
transform: translateX(-110%); animation: niveau-laser 4s cubic-bezier(.3, 0, .7, 1) infinite;
}
@keyframes niveau-laser { 0%, 50% { transform: translateX(-110%); } 100% { transform: translateX(275%); } }
.pose { position: relative; height: 500vh; }
.pose .scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #fff; }
.pose canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pose .repli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sans-toile .scene { background: #fff url("../assets/accueil.webp") 50% 80% / cover no-repeat; }
.pose .tete {
position: relative; z-index: 2; max-width: 1480px; margin: 0 auto;
padding: calc(var(--haut-fixe) + 72px + clamp(14px, 3.5vh, 44px)) var(--marge) 0;
display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end;
}
.pose h1 { font-size: clamp(40px, min(5.8vw, 9.2vh), 106px); margin: 14px 0 0; }
.pose .sous { color: var(--doux); font-size: clamp(16px, 1.25vw, 19px); margin: 0 0 20px; max-width: 470px; }
.pose .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pose .bas-pose {
position: absolute; left: var(--marge); right: calc(var(--marge) + 200px); bottom: calc(20px + var(--sous)); z-index: 2;
display: flex; align-items: flex-end; gap: clamp(24px, 3vw, 48px);
}
.pose .etapes {
display: flex; gap: 26px;
list-style: none; margin: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--doux);
}
.pose .etapes li { padding-top: 10px; border-top: 2px solid var(--trait); transition: color .4s, border-color .4s; }
.pose .etapes li span { margin-right: 8px; }
.pose .etapes li.en-cours { color: var(--texte); border-color: var(--cyan); }
.pose .etapes li.en-cours span, .pose .etapes li.fait span { color: var(--cyan-texte); }
.pose .etapes li.fait { color: var(--texte); border-color: var(--texte); }
.pose .compteur {
text-align: left;
font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--doux);
}
.pose .compteur b { display: block; font-weight: 500; font-size: 26px; color: var(--texte); letter-spacing: 0; }
.pose .compteur #nom-etape { display: block; color: var(--texte); margin-bottom: 4px; }
.pose:not(.commence) .compteur #nom-etape { color: var(--cyan-texte); }
.repere { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.repere .point { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 5px rgba(0, 168, 208, .35); }
.repere .trait { position: absolute; left: 0; top: 0; height: 1px; background: var(--texte); transform-origin: 0 50%; }
.repere .mot {
position: absolute; left: 0; top: 0; translate: 0 -50%; white-space: nowrap; padding: 7px 10px 7px 12px;
background: rgba(255, 255, 255, .96); border-left: 2px solid var(--cyan); box-shadow: 0 8px 24px rgba(20, 30, 40, .14);
font: 500 11px/1.3 var(--titre); color: var(--texte);
}
.faits-pose { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px);
margin: 0; padding: clamp(28px, 4vh, 44px) var(--marge); background: #15181B; color: #F2EFE9; font-family: var(--titre); }
.fait { min-width: 0; }
.fait-grand { margin: 0; font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.015em; line-height: 1.02;
font-size: clamp(26px, 2.3vw, 36px); }
.fait-ligne { margin: 10px 0 0; max-width: 38ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; color: #DCD7CF; }
.fait-valider { display: inline-block; margin: 12px 0 0; padding: 3px 10px; border-radius: 999px; background: #FFE9A8; color: #4A3B00;
font: 600 13px/1.4 var(--titre); }
.nobr { white-space: nowrap; }
@media (max-width: 1023px) {
.faits-pose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px clamp(20px, 4vw, 40px); }
}
@media (max-width: 699px) {
.faits-pose { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px var(--marge) 20px; }
.fait { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.fait:first-child { border-top: 0; }
.fait-grand { font-size: clamp(30px, 8.8vw, 38px); }
.fait-ligne { font-size: 16px; }
}
.pose.faits-montent .fait { opacity: 0; transform: translateY(34px); transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
.pose.faits-montent .fait.vu { opacity: 1; transform: none; }
.maison-etapes .fait { margin-top: 18px; padding: 16px 0 0; border-top: 2px solid var(--cyan); color: var(--texte); font-family: var(--titre); }
.maison-etapes .fait-ligne { color: var(--doux); }
.pose.faits-scene .faits-pose { position: absolute; z-index: 3; left: var(--marge); bottom: calc(34px + var(--sous)); width: min(72vw, 1080px); height: 0;
margin: 0; padding: 0; display: block; background: none; color: #FFFFFF; pointer-events: none; }
.pose.faits-scene .fait { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; will-change: transform, opacity; }
.pose.faits-scene .fait-grand { font-size: clamp(40px, 3.6vw, 60px); line-height: 1; }
.pose.faits-scene .fait-ligne { margin-top: 14px; max-width: 40ch; font-size: clamp(19px, 1.4vw, 22px); font-weight: 500; color: rgba(255, 255, 255, .92); }
.pose.faits-scene .bas-pose { display: none; }
.pose.faits-scene .scene::after, .pose.runway.faits-scene .scene::after { height: 40%;
background: linear-gradient(to top, rgba(14, 16, 18, .8) 0%, rgba(14, 16, 18, .7) 45%, rgba(14, 16, 18, 0) 100%);
-webkit-mask-image: linear-gradient(to right, #000 58%, rgba(0, 0, 0, .35) 86%); mask-image: linear-gradient(to right, #000 58%, rgba(0, 0, 0, .35) 86%); }
.pose.fixe.faits-defilent { height: calc(100vh + 4200px); height: calc(100svh + 4200px); }
.pose.fixe.faits-defilent .scene { position: sticky; top: 0; }
.deroulement { position: relative; padding: clamp(80px, 13vh, 170px) 0; }
.etapes-projet { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 40px 0 0; }
.etapes-projet::before, .etapes-projet::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: #DDE2E5; }
.etapes-projet::after { background: var(--cyan); transform-origin: 0 50%; transform: scaleX(var(--avance, 1)); }
.etapes-projet li { position: relative; }
.etapes-projet li::before {
content: ""; position: absolute; left: 0; top: -36px; width: 12px; height: 12px; border-radius: 50%;
background: #FFFFFF; border: 2px solid #C5CCD0; transition: background .3s, border-color .3s;
}
.etapes-projet li.atteinte::before { background: var(--cyan); border-color: var(--cyan); }
.etapes-projet .no { display: block; font: 500 12px/1.4 var(--titre); color: var(--cyan-texte); }
.etapes-projet b { display: block; margin: 8px 0 8px; font-weight: 400; font-variation-settings: "wdth" 90; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.1; }
.etapes-projet p { margin: 0; color: var(--doux); font-size: 15px; line-height: 1.5; }
.etapes-projet li { display: grid; grid-template-rows: auto auto 1fr auto; }
.etapes-projet .etape-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 16px; background: #2E2E2E; align-self: end; }
.pied-deroulement { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: clamp(36px, 5vh, 56px); }
.pied-deroulement .note-jt { margin: 0; }
.intro { padding: clamp(96px, 15vh, 190px) 0 clamp(64px, 10vh, 120px); }
.intro .cadre { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 120px); align-items: end; }
.intro p { color: var(--doux); font-size: clamp(17px, 1.5vw, 20px); margin: 0; max-width: 560px; }
.intro p strong { color: var(--texte); font-weight: 600; }
#maison-runway, .pose .etapes-runway, .pose .mention-runway { display: none; }
.pose.runway #maison { visibility: hidden; }
.pose.runway #maison-runway { display: block; }
@property --voile { syntax: "<number>"; inherits: true; initial-value: 0; }
.pose.runway { --voile: 0; transition: --voile .5s; }
.pose.runway.de-nuit { --voile: 1; }
.pose.runway .scene::before { content: ""; position: absolute; inset: 0 0 auto; height: 60%; z-index: 1; pointer-events: none;
background:
linear-gradient(to bottom, rgba(8, 16, 34, calc(.80 * var(--voile, 0))), rgba(8, 16, 34, calc(.48 * var(--voile, 0))) 48%, rgba(8, 16, 34, 0)),
linear-gradient(to bottom, rgba(255, 255, 255, calc(.94 * (1 - var(--voile, 0)))), rgba(255, 255, 255, calc(.62 * (1 - var(--voile, 0)))) 48%, rgba(255, 255, 255, 0));
-webkit-mask-image: linear-gradient(to bottom, #000 130px, transparent 175px), linear-gradient(to right, #000 38%, rgba(0, 0, 0, .3) 44%, rgba(0, 0, 0, .3) 52%, #000 57%);
mask-image: linear-gradient(to bottom, #000 130px, transparent 175px), linear-gradient(to right, #000 38%, rgba(0, 0, 0, .3) 44%, rgba(0, 0, 0, .3) 52%, #000 57%); }
.pose.runway .scene::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 1; pointer-events: none;
background:
linear-gradient(to top, rgba(8, 16, 34, calc(.80 * var(--voile, 0))), rgba(8, 16, 34, 0)),
linear-gradient(to top, rgba(255, 255, 255, calc(.92 * (1 - var(--voile, 0)))), rgba(255, 255, 255, 0)); }
.pose.runway.de-nuit { --texte: #F2EFE9; --doux: #C9C3B9; --trait: rgba(255, 255, 255, .28); --cyan-texte: #63D2EF; --encre: #F2EFE9; }
.pose.runway.de-nuit .tete, .pose.runway.de-nuit .bas-pose { color: var(--texte); }
.pose.runway.de-nuit .mention-runway { background: rgba(8, 16, 34, .72); }
.pose.runway.de-nuit .bouton.sombre { background: #F2EFE9; border-color: #F2EFE9; color: #1E1E1E; }
.pose.runway.de-nuit .bouton.sombre:hover { background: #FFFFFF; color: #111; }
.pose.runway.bascule :is(.tete, h1, .etiquette, .sous, .bas-pose, .etapes li, .etapes li span, .compteur, .compteur b, #nom-etape, .phrase-etape, .faits-pose, .fait-ligne),
.pose.runway.bascule .bouton.sombre { transition: color 0s .205s, border-color 0s .205s, background-color 0s .205s; }
.pose.runway.bascule.de-nuit :is(.tete, h1, .etiquette, .sous, .bas-pose, .etapes li, .etapes li span, .compteur, .compteur b, #nom-etape, .phrase-etape, .faits-pose, .fait-ligne),
.pose.runway.bascule.de-nuit .bouton.sombre { transition: color 0s .1s, border-color 0s .1s, background-color 0s .1s; }
.pose.runway .sous { color: var(--texte); }
.pose.runway .etapes:not(.etapes-runway), .pose.runway .repere, .pose.runway .compteur .nb { display: none; }
.pose.runway .etapes-runway { display: flex; }
.pose.runway .mention-runway { display: block; position: absolute; left: var(--marge); bottom: calc(84px + var(--sous)); z-index: 2; margin: 0;
padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, .84);
font: 400 12px/1.5 var(--titre); color: var(--encre); }
.pose .phrase-etape, .maison-etapes { display: none; }
.pose.runway .phrase-etape { display: block; max-width: 440px; margin: 0 0 4px; font: 400 15px/1.45 var(--titre); letter-spacing: 0; text-transform: none; color: var(--doux); }
.pose.runway:not(.fixe) { height: 800vh; }
.pose.fixe .etapes-runway, .pose.fixe .compteur { display: none; }
.pose.fixe { height: auto; }
.pose.fixe .scene { position: relative; }
.pose.arret .maison-etapes li:not([data-fini]), .pose.arret .maison-etapes .no { display: none; }
.pose.arret.pas-a-pas .maison-etapes { margin-top: 0; }
.pose.arret.pas-a-pas .maison-etapes li { min-height: 0; justify-content: flex-start; padding-top: 0; border-top: 0; }
.pose.fixe .mention-runway { bottom: calc(24px + var(--sous)); }
.pose.pas-a-pas { height: auto; }
.pose.pas-a-pas .scene { position: relative; height: auto; overflow: visible; background: var(--fond); }
.pose.pas-a-pas canvas, .pose.pas-a-pas .bas-pose, .pose.pas-a-pas .repere { display: none; }
.pose.pas-a-pas .maison-etapes { display: block; margin: 26px 0 0; padding: 0; list-style: none; }
.pose.pas-a-pas .maison-etapes li {
display: flex; flex-direction: column; justify-content: center; min-height: 82vh; min-height: 82svh;
padding: 22px var(--marge); border-top: 1px solid var(--trait);
}
.maison-etapes img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--gris) center / cover no-repeat; }
.pose.pas-a-pas .maison-etapes img { width: calc(100% + 2 * var(--marge)); max-width: none; margin: 0 calc(-1 * var(--marge)); aspect-ratio: 1 / 1; object-position: 50% 58%; }
.maison-etape-texte { margin-top: 16px; }
.maison-etape-texte .no { font: 500 12px/1 var(--titre); color: var(--cyan-texte); }
.maison-etape-texte b { display: block; margin-top: 8px; font-weight: 400; font-variation-settings: "wdth" 90; font-size: 28px; line-height: 1.1; }
.maison-etape-texte p { margin: 8px 0 0; color: var(--doux); font-size: 16px; line-height: 1.5; }
.pose.pas-a-pas .mention-runway { display: block; margin: 0; padding: 14px var(--marge) 44px; font: 400 12px/1.5 var(--titre); color: var(--doux); }
.simulateur { position: relative; padding: clamp(84px, 13vh, 170px) 0; background: linear-gradient(180deg, var(--fond) 0%, var(--gris) 100%); }
.sim-tete { max-width: 780px; margin-bottom: clamp(28px, 4vh, 52px); }
.sim-tete p { margin: 18px 0 0; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.sim-corps { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.sim-scene { position: sticky; top: calc(var(--haut-fixe) + 92px); background: #FFFFFF; border: 1px solid #E1E5E8; box-shadow: 0 26px 64px rgba(30, 40, 50, .08); }
.sim-scene canvas { display: block; width: 100%; aspect-ratio: 16 / 10; background: #FFFFFF; }
.sim-toile { position: relative; }
.sim-toile canvas { touch-action: pan-y; }
.sim-toile.lentille canvas { cursor: none; }
.sim-indice {
position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 8px 12px 8px 32px; max-width: calc(100% - 28px);
background: rgba(255, 255, 255, .95); border: 1px solid #E1E5E8; box-shadow: 0 6px 18px rgba(30, 40, 50, .08);
font: 500 12px/1.4 var(--titre); color: var(--texte); pointer-events: none; transition: opacity .5s;
}
.sim-indice::before {
content: ""; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -6.5px;
border: 1.5px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 168, 208, .15);
}
.sim-indice.vu { opacity: 0; }
.sim-bascule { position: absolute; top: 12px; right: 12px; display: flex; background: #FFFFFF; border: 1px solid #C9CFD3; box-shadow: 0 6px 18px rgba(30, 40, 50, .08); }
.sim-bascule button {
position: relative; min-height: 36px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
font: 500 11px/1 var(--titre); color: var(--doux);
}
.sim-bascule button + button { border-left: 1px solid #C9CFD3; }
.sim-bascule button[aria-pressed="true"] { background: var(--texte); color: #FFFFFF; }
.sim-etiquette {
position: absolute; top: 12px; padding: 6px 10px; background: rgba(255, 255, 255, .95); border: 1px solid #E1E5E8;
font: 500 11px/1.3 var(--titre); color: var(--texte); pointer-events: none;
}
.sim-etiquette.avant { left: 12px; }
.sim-etiquette.apres { right: 12px; border-left: 3px solid var(--cyan); }
.sim-poignee { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.sim-toile.focus { outline: 3px solid var(--cyan-texte); outline-offset: -3px; }
.sim-toile.poignee .sim-bascule, .sim-toile.poignee .sim-indice { display: none; }
.sim-resume { margin: 0; padding: 14px 18px; border-top: 1px solid var(--trait); font: 500 12px/1.5 var(--titre); color: var(--texte); }
.sim-choix .groupe { margin: 0 0 22px; }
.sim-choix .puce svg { width: 22px; height: 22px; margin-right: 10px; fill: none; stroke: var(--texte); stroke-width: 1.4; stroke-linecap: round; }
.teintes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.teinte {
position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 4px 8px; border: 1px solid transparent;
border-radius: 2px; cursor: pointer; text-align: center; font-size: 13px; line-height: 1.25; color: var(--texte);
}
.teinte .rond {
width: 44px; height: 44px; border-radius: 50%; background: var(--c);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), inset 0 -9px 14px rgba(0, 0, 0, .18), inset 0 7px 10px rgba(255, 255, 255, .18);
}
.teinte:hover { border-color: #D3D9DC; }
.teinte.choisi { border-color: var(--cyan); background: #F1FAFD; }
.teinte.choisi .rond { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sim-choix .puce .point { flex: none; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.sim-choix .puce .point.telle { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #8F989E; }
.sim-choix .puce .point.meme { background: linear-gradient(90deg, #1C1D1F 50%, #EEEDE7 50%); }
.sim-teintes { margin-top: 14px; }
.sim-note { margin: 10px 0 0; color: var(--doux); font-size: 14px; line-height: 1.45; }
.sim-votre-photo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait); }
.teinte:focus-within { outline: 3px solid var(--cyan-texte); outline-offset: 2px; }
.avertissement { margin: 20px 0; padding: 12px 14px; background: #FFF8E6; border-left: 3px solid #E0B34A; color: #4D3B00; font-size: 14px; line-height: 1.5; }
.sim-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lien-externe::after { content: "↗"; }
.coupe { position: relative; background: var(--gris); padding: clamp(72px, 9vw, 112px) 0; }
.coupe .scene {
width: min(var(--large), 100% - 2 * var(--marge)); margin-inline: auto;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(28px, 4vw, 56px);
grid-template-areas: "tete tete" "vue legende";
}
.coupe .coupe-tete { grid-area: tete; }
.coupe .coupe-tete h2 { font-size: clamp(34px, 4vw, 60px); margin: 14px 0 24px; }
.coupe .vue {
grid-area: vue; position: sticky; top: calc(var(--haut-fixe) + 96px); align-self: start;
height: min(66vh, 480px); display: grid; place-items: center; perspective: 1500px;
}
.coupe .mur {
position: relative; width: min(26vw, 210px); aspect-ratio: 3 / 4; transform-style: preserve-3d;
transform: rotateX(12deg) rotateY(-30deg);
}
.coupe .mur .couche {
position: absolute; inset: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
transform: translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), calc(var(--z, 0) * 1px));
}
.couche.c-mur { background: #C8A979 url("../assets/coupe/mur.webp") 0 0 / 42.5% auto repeat; }
.couche.c-membrane { background: #F1F2F0 url("../assets/coupe/membrane.webp") 50% 50% / cover no-repeat; }
.couche.c-fourrures { background: url("../assets/coupe/fourrures.webp") 0 0 / 100% 100% no-repeat; }
.couche.c-revetement { background: #3A2A22 url("../assets/coupe/revetement.webp") 50% 0 / 100% auto repeat-y; }
.coupe .mur .couche.c-fourrures, .coupe .mur .couche.c-moulures { box-shadow: none; }
.couche.c-moulures::before, .couche.c-moulures::after { content: ""; position: absolute; }
.coupe .mur .couche.c-moulures { transform-style: preserve-3d; }
.couche.c-moulures::before, .couche.c-moulures::after { top: 0; bottom: 0; right: 0; width: 9%; }
.couche.c-moulures::before { background: linear-gradient(90deg, #0C0D0E 0%, #2C2E31 18%, #1A1B1D 30%, #121315 72%, #26282B 94%, #0C0D0E 100%); }
.couche.c-moulures::after { transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, #1E2022, #2E3134 40%, #141516); }
.coupe .vue .coupe-3d { display: block; width: 100%; height: 100%; min-height: 300px; }
.coupe .legende { grid-area: legende; position: relative; }
.coupe .legende ol { list-style: none; margin: 0; padding: 0; }
.coupe .legende li {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 0;
border-top: 1px solid #D9DCDE; border-left: 3px solid transparent; padding-left: 10px; transition: border-color .4s, background .4s;
}
.coupe .legende li.vu { border-left-color: var(--cyan); background: rgba(0, 168, 208, .05); }
.coupe .legende b { display: block; font-weight: 600; font-size: 19px; }
.coupe .legende span { color: var(--doux); font-size: 15px; }
.coupe .echantillon { display: none; }
@media (max-width: 699px) {
.coupe .scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "vue" "legende"; }
.coupe .vue { position: relative; top: auto; height: 340px; margin-bottom: 8px; perspective: 1100px; }
.coupe .vue:has(.coupe-3d) { height: auto; aspect-ratio: 991 / 792; }
.coupe .vue .coupe-3d { min-height: 0; }
.coupe .mur { width: min(44vw, 172px); transform: rotateX(10deg) rotateY(-24deg); }
.coupe .mur .couche { box-shadow: none; }
.coupe .legende li.vu { background: none; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
.coupe .scene { grid-template-areas: "tete" "piste"; }
.coupe .vue:has(.coupe-3d) {
grid-area: piste; align-self: start; position: sticky; top: calc(var(--haut-fixe) + var(--entete) + 8px); z-index: 2;
margin-bottom: 0; background: var(--gris); box-shadow: 0 -10px 0 var(--gris), 0 14px 12px -6px var(--gris);
}
.coupe .scene:has(.coupe-3d) .legende { grid-area: piste; padding-top: calc(100% * 792 / 991 + 22px); }
}
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) and (not ((hover: hover) and (pointer: fine) and (min-width: 1024px))) {
.coupe .scene:has(.coupe-3d) { grid-template-areas: "vue tete" "vue legende"; grid-template-rows: auto 1fr; }
.coupe .vue:has(.coupe-3d) { height: auto; aspect-ratio: 991 / 792; top: calc(var(--haut-fixe) + var(--entete) + 12px); }
.coupe .vue .coupe-3d { min-height: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.coupe { height: 240vh; padding: 0; }
.coupe .scene {
position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 40px;
grid-template-areas: "vue ." "vue tete" "vue legende" "vue .";
padding-top: calc(var(--haut-fixe) + 72px);
}
.coupe .vue { position: relative; top: auto; align-self: stretch; height: auto; perspective: 1800px; }
.coupe .mur { width: min(24vw, 300px); transform: rotateX(10deg) rotateY(-58deg); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (max-height: 820px) {
.coupe .scene { padding-top: calc(var(--haut-fixe) + 60px); }
.coupe .coupe-tete h2 { font-size: clamp(28px, 5.6vh, 46px); margin: 8px 0 14px; }
.coupe .legende li { padding-top: 8px; padding-bottom: 8px; }
.coupe .legende b { font-size: 17px; }
.coupe .legende span { font-size: 14px; line-height: 1.4; }
.coupe .legende .note-jt { margin-top: 10px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (max-height: 680px) {
.coupe .coupe-tete h2 { margin: 6px 0 10px; }
.coupe .legende li { padding-top: 6px; padding-bottom: 6px; }
.coupe .legende .note-jt { margin-top: 6px; }
}
.force { padding: clamp(80px, 14vh, 180px) 0; background: var(--gris); }
.force .cadre { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 120px); }
.force .lead { color: var(--doux); font-size: 19px; margin: 28px 0 0; max-width: 520px; }
.force ol { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.force li {
display: block;
padding: 20px 0; border-bottom: 1px solid #D9DCDE; font-size: clamp(19px, 1.8vw, 24px); font-weight: 300;
}
.bande-photo { height: clamp(220px, 42vw, 560px); overflow: hidden; }
.bande-photo img { width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.faq { padding: 0 0 clamp(96px, 16vh, 200px); }
.faq h2 { font-size: clamp(36px, 4.6vw, 72px); margin: 14px 0 40px; }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-of-type { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font-size: clamp(19px, 1.8vw, 24px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 30px/1 var(--titre); color: var(--cyan-texte); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--doux); max-width: 760px; }
.soumission { position: relative; padding: clamp(96px, 16vh, 200px) 0; background: var(--gris); }
.soumission .cadre { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(40px, 5vw, 100px); align-items: start; }
.soumission h2 { margin: 14px 0 34px; }
.etapes-form { background: #FFFFFF; border: 1px solid #E1E5E8; padding: clamp(22px, 3vw, 44px); box-shadow: 0 24px 60px rgba(30, 40, 50, .06); }
.etapes-form .progression { height: 3px; background: #E3E7EA; margin: 0 0 18px; overflow: hidden; }
.etapes-form .progression span { display: block; height: 100%; width: calc(var(--p, .143) * 100%); background: var(--cyan); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.compte-etape { margin: 0 0 10px; font: 500 12px/1.4 var(--titre); color: var(--cyan-texte); }
.etapes-form:not(.en-etapes) .progression, .etapes-form:not(.en-etapes) .compte-etape,
.etapes-form:not(.en-etapes) [data-retour], .etapes-form:not(.en-etapes) [data-suivant] { display: none; }
.etapes-form:not(.en-etapes) .ecran + .ecran { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--trait); }
.ecran { border: 0; margin: 0; padding: 0; min-width: 0; }
.ecran h3 { margin: 0 0 6px; font-size: clamp(28px, 2.8vw, 40px); outline: none; }
.ecran .aide { margin: 0 0 22px; color: var(--doux); }
.ecran .aide.petite { margin: 12px 0 0; font-size: 14px; }
.cache-champ { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.carte-choix {
position: relative; display: grid; align-content: start; gap: 4px; padding: 14px;
background: #FFFFFF; border: 1px solid #D3D9DC; border-radius: 2px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;
}
.carte-choix:hover { border-color: #8F989E; }
.carte-choix.choisi { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); background: #F1FAFD; }
.carte-choix svg { width: 36px; height: 36px; margin-bottom: 4px; fill: none; stroke: var(--texte); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.carte-choix svg .accent, .depot svg .accent { stroke: var(--cyan-texte); stroke-width: 1.8; }
.carte-choix b { font-weight: 600; font-size: 17px; line-height: 1.2; }
.carte-choix small { color: var(--doux); font-size: 14px; line-height: 1.35; }
.carte-choix::after {
content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px;
border: 1px solid #BFC7CB; border-radius: 50%; background: #FFFFFF;
}
.carte-choix.choisi::after {
border-color: var(--cyan);
background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%232E2E2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.carte-choix:focus-within, .puce:focus-within, .depot:focus-within { outline: 3px solid var(--cyan-texte); outline-offset: 2px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px;
background: #FFFFFF; border: 1px solid #D3D9DC; border-radius: 2px; cursor: pointer; font-size: 16px; color: var(--texte);
transition: border-color .2s, box-shadow .2s, background .2s;
}
.puce:hover { border-color: #8F989E; }
.puce.choisi { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); background: #F1FAFD; }
.groupe { margin: 0 0 22px; }
.groupe.plein { grid-column: 1 / -1; margin: 0; }
.titre-groupe { display: block; margin: 0 0 10px; font: 500 12px/1.4 var(--titre); color: var(--doux); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.champ { display: grid; gap: 7px; align-content: start; font: 500 12px/1.4 var(--titre); color: var(--doux); }
.champ.plein { grid-column: 1 / -1; }
.champ input, .champ textarea {
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: 13px 14px; min-height: 52px; width: 100%;
}
.champ textarea { min-height: 112px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--cyan-texte); outline-offset: 0; border-color: var(--cyan-texte); }
.champ input::placeholder, .champ textarea::placeholder { color: #8A9095; }
.champ [aria-invalid="true"] { border-color: #B42318; }
.erreur-champ { display: block; margin-top: 8px; color: #B42318; font: 500 14px/1.4 var(--titre); letter-spacing: 0; text-transform: none; }
.calcul { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--trait); }
.calcul summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--texte); }
.calcul .mur { display: grid; grid-template-columns: 72px 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 12px; }
.calcul .nom-mur { padding-bottom: 16px; font: 500 12px/1.4 var(--titre); color: var(--doux); }
.calcul output { display: block; margin: 16px 0 4px; font: 300 32px/1.1 var(--titre); color: var(--texte); }
.calcul output small { font: 400 14px var(--titre); color: var(--doux); }
.depot {
position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 168px; padding: 22px;
border: 1.5px dashed #AEB7BC; background: #FAFBFC; text-align: center; cursor: pointer; color: var(--texte);
}
.depot:hover { border-color: var(--cyan-texte); background: #F4FBFD; }
.depot svg { width: 48px; height: 48px; fill: none; stroke: var(--texte); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.depot small { color: var(--doux); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--trait); }
.photos .photo-simulateur { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; }
.photos .photo-simulateur img { aspect-ratio: 16 / 9; }
.photo-simulateur figcaption { font-size: 14px; line-height: 1.45; color: var(--doux); }
.photo-simulateur figcaption b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--texte); }
@media (max-width: 520px) { .photos .photo-simulateur { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 12px; } .photo-simulateur figcaption { font-size: 13px; } }
.photos .fichier-joint { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--doux); overflow-wrap: anywhere; }
.plans-joints { margin: 10px 0 14px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--doux); overflow-wrap: anywhere; }
.plans-joints li + li { margin-top: 2px; }
.photos .joint { display: grid; gap: 6px; align-content: start; min-width: 0; }
.photos .joint-nom { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.plans-joints li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.retirer-joint { justify-self: start; min-height: 40px; padding: 6px 12px; border: 1px solid var(--texte); border-radius: 999px; background: #FFFFFF; color: var(--texte); font: 600 13px/1.2 var(--titre); cursor: pointer; }
.retirer-joint:hover { background: var(--texte); color: #FFFFFF; }
.retirer-joint:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choix-sim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 28px; padding: 18px; background: #FFFFFF; border: 1px solid var(--trait); border-left: 3px solid var(--cyan); }
@media (min-width: 760px) { .choix-sim.avec-image { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; } }
.choix-sim-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--trait); }
.choix-sim .choix-sim-titre { margin: 0 0 10px; font: 600 18px/1.3 var(--titre); letter-spacing: 0; text-transform: none; color: var(--texte); }
.choix-sim-lignes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 15px; line-height: 1.4; }
.choix-sim-lignes dt { font: 500 11px/1.9 var(--titre); color: var(--doux); }
.choix-sim-lignes dd { margin: 0; color: var(--texte); }
.choix-sim-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--doux); }
.choix-sim .choix-sim-modifier { margin-top: 8px; }
.choix-sim-repli { display: none; }
@media (max-width: 699px) {
.choix-sim.repliable { position: relative; }
.choix-sim.repliable .choix-sim-repli { display: flex; align-items: center; gap: 12px; min-width: 0; }
.choix-sim-ligne { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.4 var(--titre); color: var(--texte); }
.choix-sim-resume { font-weight: 400; }
.choix-sim-bascule { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -6px -6px -6px 0; padding: 0 10px; background: none; border: 0;
color: var(--texte); font: 600 15px/1.2 var(--titre); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; cursor: pointer; }
.choix-sim.replie { padding-top: 8px; padding-bottom: 8px; margin-bottom: 20px; }
.choix-sim.replie .choix-sim-image, .choix-sim.replie .choix-sim-texte { display: none; }
.choix-sim.repliable:not(.replie) .choix-sim-ligne { display: none; }
.choix-sim.repliable:not(.replie):not(.avec-image) .choix-sim-repli { position: absolute; top: 6px; right: 8px; }
.choix-sim.repliable:not(.replie):not(.avec-image) .choix-sim-titre { padding-right: 84px; }
.choix-sim.repliable.avec-image:not(.replie) .choix-sim-repli { order: 3; justify-content: flex-end; margin-top: -8px; }
}
@media (max-width: 420px) { .choix-sim { padding: 14px; } .choix-sim-lignes { gap: 4px 10px; font-size: 14px; } .choix-sim-lignes dt { font-size: 10.5px; } }
.recap { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--trait); display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 15px; }
.recap dt { font: 500 12px/1.6 var(--titre); color: var(--doux); }
.recap dd { margin: 0; color: var(--texte); }
.case { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; line-height: 1.45; color: var(--texte); cursor: pointer; }
.case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cyan-texte); }
.nav-form { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.nav-form [data-suivant], .nav-form [data-envoyer] { margin-left: auto; }
.legal { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--trait); color: var(--doux); font-size: 13px; line-height: 1.6; }
.legal strong { color: var(--texte); font-weight: 600; }
.ecran-fin .coche { width: 66px; height: 66px; margin-bottom: 18px; fill: none; stroke: var(--cyan-texte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ecran-fin p { color: var(--doux); max-width: 560px; margin: 10px 0 24px; }
.champs .case { grid-column: 1 / -1; margin-top: 0; }
.apercu-marius { margin: 6px 0 28px; padding: 22px; background: #F2EEE7; border: 1px solid #E1E5E8; container-type: inline-size; }
.tete-apercu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.tete-apercu h4, .tete-apercu h3 { margin: 0; font-weight: 500; font-size: 18px; color: var(--texte); }
.pour-commerce { padding: 4px 8px; background: #FFF4D1; border: 1px solid #F0DB9A; color: #4D3B00; font: 500 11px/1.4 var(--titre); }
.apercu-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.fiche-marius { background: #FFFFFF; border: 1px solid #E1E5E8; box-shadow: 0 14px 34px rgba(30, 40, 50, .07); padding: 18px 20px 20px; }
.fiche-tete {
display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--trait);
font: 500 11px/1.4 var(--titre); color: var(--doux);
}
.fiche-tete .m { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: var(--texte); font: 700 13px/1 var(--titre); font-style: normal; letter-spacing: 0; }
.fiche-tete .statut { margin-left: auto; padding: 3px 8px; background: #E6F6FA; color: var(--cyan-texte); font-weight: 600; white-space: nowrap; }
.ecran-fin .fiche-nom { margin: 0; max-width: none; font-size: 24px; font-weight: 400; color: var(--texte); }
.ecran-fin .fiche-source { margin: 2px 0 14px; max-width: none; font-size: 14px; }
.fiche-marius dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 14px; line-height: 1.45; }
.fiche-marius dt { font: 500 11px/1.75 var(--titre); color: var(--doux); }
.fiche-marius dd { margin: 0; color: var(--texte); overflow-wrap: anywhere; white-space: pre-line; }
.ecran-fin .fiche-sous-titre { margin: 16px 0 8px; padding-top: 12px; max-width: none; border-top: 1px solid var(--trait); font-weight: 600; font-size: 14px; color: var(--texte); }
.fiche-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fiche-photos:empty { display: none; }
.fiche-photos img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--trait); }
.ecran-fin .note-apercu, .apercu-marius .note-apercu { margin: 14px 0 0; max-width: none; font: 500 11px/1.5 var(--titre); }
.lien-action {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; padding: 0 2px;
background: none; border: 0; border-bottom: 1px solid var(--cyan); color: var(--texte); font: 600 15px/1.2 var(--titre);
cursor: pointer; text-decoration: none;
}
.lien-action::after { content: none; }
.lien-action:hover::after { transform: translateX(4px); }
.lien-action[data-ajouter-mur]::after { content: "+"; }
.coord dl { margin: 0; }
.coord dt { font: 500 12px var(--titre); color: var(--cyan-texte); margin-top: 28px; }
.coord dd { margin: 8px 0 0; font-size: 20px; font-weight: 300; }
.coord dd a { text-decoration: none; }
.coord dd a:hover { color: var(--cyan-texte); }
footer { padding: 48px 0 120px; border-top: 1px solid var(--trait); color: var(--doux); font-size: 14px; }
footer .cadre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
footer .engagement { max-width: 720px; }
.capture *, .capture *::before, .capture *::after { transition: none !important; }
.marius { position: fixed; right: 24px; bottom: calc(24px + var(--sous)); z-index: 60; }
.marius .ouvrir {
display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 30px;
background: #fff; color: var(--texte); border: 1px solid var(--trait); cursor: pointer; font: 600 15px var(--titre);
box-shadow: 0 3px 8px -4px rgba(20, 30, 40, .14), 0 1px 2px rgba(20, 30, 40, .05);
}
.marius i.m {
width: 36px; height: 36px; border-radius: 50%; background: var(--cyan); color: var(--texte);
display: grid; place-items: center; font: 700 16px var(--titre); font-style: normal; flex: none;
}
.marius .panneau {
position: absolute; right: 0; bottom: 68px; width: 340px; background: #fff; color: var(--texte);
border: 1px solid var(--trait); border-radius: 14px; padding: 18px; box-shadow: 0 20px 50px rgba(20, 30, 40, .2); display: none;
}
.marius.ouvert .panneau { display: block; }
.marius .panneau header { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 14px; }
.marius .panneau header small { display: block; font-weight: 400; color: var(--doux); font-size: 13px; }
.marius .msg { background: var(--gris); padding: 12px 14px; border-radius: 12px 12px 12px 4px; font-size: 15px; line-height: 1.5; }
.marius .saisie { margin-top: 14px; display: flex; gap: 8px; }
.marius .saisie input { flex: 1; min-width: 0; padding: 10px 12px; font: 400 15px var(--titre); color: var(--texte); background: #FFFFFF; border: 1px solid #C9CFD3; border-radius: 2px; }
.marius .saisie button { border: 0; border-radius: 2px; background: var(--cyan); color: var(--texte); padding: 0 14px; font: 600 14px var(--titre); }
.marius .panneau small.m { display: block; margin-top: 10px; color: var(--discret); font: 400 11px var(--titre); }
.barre { display: none; }
@media (max-width: 1023px) {
.entete nav { display: none; }
.entete .tel { margin-left: auto; }
.entete .soumission-entete { display: none; }
.intro .cadre, .force .cadre, .soumission .cadre { grid-template-columns: 1fr; }
.etapes-projet { grid-template-columns: 1fr 1fr 1fr; row-gap: 56px; }
.sim-corps { grid-template-columns: 1fr; }
.sim-scene { top: calc(var(--haut-fixe) + 72px); z-index: 3; }
}
@media (min-width: 700px) and (max-width: 1023px) {
.entete .soumission-entete { display: inline-flex; align-items: center; }
}
@media (max-width: 699px) {
:root { --barre-maquette: 26px; --avis: 42px; }
.avis-maquette { font-size: 12px; }
body { font-size: 16px; }
.maquette { font-size: 10px; gap: 8px; }
.maquette .nom { display: none; }
.maquette .ver-court { display: inline; }
.maquette > span:first-child { white-space: nowrap; min-width: 0; }
.entete { height: 60px; gap: 12px; }
.entete .logo img { height: 30px; }
.entete .tel { padding: 10px 12px; font-size: 13px; }
.pose { height: 340vh; }
.pose .tete { grid-template-columns: 1fr; gap: 10px; padding-top: calc(var(--haut-fixe) + 60px + 18px); }
.pose h1 { font-size: clamp(38px, 11vw, 52px); }
.pose .sous { font-size: 15px; margin: 0; }
.pose .actions { display: none; }
.pose .etapes { display: none; }
.pose .bas-pose { right: var(--marge); bottom: calc(76px + var(--sous)); }
.pose .compteur { flex: 1; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.pose .compteur #nom-etape { display: block; font-size: 12px; max-width: 58%; margin: 0; }
.pose .compteur .nb { white-space: nowrap; text-align: right; }
.pose .compteur b { font-size: 20px; }
.champs, .recap { grid-template-columns: 1fr; }
.apercu-marius { padding: 14px; }
.fiche-marius { padding: 14px; }
.fiche-marius dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fiche-marius dd { margin-bottom: 8px; }
.cartes { grid-template-columns: 1fr 1fr; }
.carte-choix { min-height: 0; padding: 14px; }
.carte-choix small { display: none; }
.calcul .mur { grid-template-columns: 1fr 1fr; }
.calcul .nom-mur { grid-column: 1 / -1; padding: 0; }
.nav-form .bouton { padding: 0 18px; }
.marius { bottom: calc(72px + var(--sous)); right: 14px; }
.marius .ouvrir { display: none; }
.marius .panneau { bottom: 0; width: calc(100vw - 28px); }
.barre {
display: none; grid-template-columns: 1fr 1fr 52px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
background: #fff; border-top: 1px solid var(--trait); padding: 8px 8px calc(8px + var(--sous)); gap: 8px;
}
.barre .bouton { min-height: 48px; padding: 0 10px; white-space: nowrap; }
.barre .ecrire {
border: 0; border-radius: 50%; width: 48px; height: 48px; align-self: center; justify-self: center; cursor: pointer;
background: var(--cyan); color: var(--texte); font: 700 17px/1 var(--titre);
}
.pastille .bulle { width: min(260px, 70vw); }
.repere.secondaire { display: none; }
.repere .mot { font-size: 10px; padding: 6px 8px 6px 10px; }
.etapes-projet { grid-template-columns: 1fr; row-gap: 26px; padding: 0 0 0 34px; }
.etapes-projet::before, .etapes-projet::after { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.etapes-projet::after { transform-origin: 50% 0; transform: scaleY(var(--avance, 1)); }
.etapes-projet li::before { left: -34px; top: 3px; }
.sim-scene { top: calc(var(--haut-fixe) + 60px); }
.sim-scene canvas { aspect-ratio: 16 / 9; }
.sim-resume { padding: 10px 14px; font-size: 11px; }
.sim-indice { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 8px 5px 25px; font-size: 10px; letter-spacing: 0; }
.sim-indice::before { left: 8px; width: 9px; height: 9px; margin-top: -5.5px; }
.sim-indice { position: relative; left: auto; bottom: auto; max-width: none; border: 0; border-top: 1px solid var(--trait); box-shadow: none; }
.sim-bascule { top: 8px; right: 8px; }
.sim-bascule button { min-height: 30px; padding: 0 9px; font-size: 10px; }
.sim-bascule button::after { content: ""; position: absolute; inset: -7px 0; }
#simulateur .sim-bascule { position: static; display: flex; border-width: 1px 0 0; box-shadow: none; }
#simulateur .sim-bascule button { flex: 1; min-height: 44px; font-size: 11px; }
#simulateur .sim-bascule button::after { content: none; }
.sim-etiquette { top: 8px; padding: 4px 8px; font-size: 10px; }
.sim-etiquette.avant { left: 8px; }
.sim-etiquette.apres { right: 8px; }
.teinte { font-size: 12px; padding: 8px 2px; }
.teinte .rond { width: 38px; height: 38px; }
.pastille.p2 { --t: calc(var(--barre-maquette) + 76px) !important; --l: calc(100% - 46px) !important; }
.pastille.p2 .bulle { left: auto; right: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.pose { height: auto; }
.pose .scene { position: relative; }
.coupe .legende li { opacity: 1 !important; transform: none !important; }
.bande-photo img { transform: none !important; }
.phrase-piste { display: block; white-space: normal; transform: none !important; }
.phrase-piste > span + span { display: none; }
.phrase-defile { font-size: clamp(44px, 9vw, 140px); }
* { transition: none !important; }
.bouton.laser::after { animation: none; }
}
:root { --entete: 72px; }
.entete nav a[aria-current="page"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--cyan); }
.bouton-menu {
display: none; align-items: center; gap: 10px; min-height: 41px; padding: 0 14px; border: 1px solid var(--texte); border-radius: 2px;
background: #FFFFFF; color: var(--texte); font: 500 13px/1 var(--titre); cursor: pointer;
}
.bouton-menu .trois { position: relative; width: 16px; height: 11px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.bouton-menu .trois::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -.75px; border-top: 1.5px solid currentColor; }
.menu-joindre, .entete nav .accueil-menu { display: none; }
.tete-page {
position: relative; padding: calc(var(--haut-fixe) + var(--entete) + clamp(44px, 9vh, 112px)) 0 clamp(44px, 8vh, 96px);
background: linear-gradient(180deg, var(--gris) 0%, var(--fond) 100%); border-bottom: 1px solid var(--trait);
}
.tete-page h1 { max-width: 15em; margin: 18px 0 0; font-size: clamp(42px, 6vw, 96px); }
.tete-page .lead { max-width: 760px; margin: 26px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; color: var(--doux); }
.tete-page .pastille { top: auto; bottom: 28px; }
@media (max-width: 1199px) {
.entete nav { display: none; }
.bouton-menu { display: inline-flex; }
.entete .tel { margin-left: auto; }
body.menu-ouvert { overflow: hidden; }
body.menu-ouvert .entete nav {
display: flex; flex-direction: column; gap: 0; position: fixed; left: 0; right: 0; top: calc(var(--haut-fixe) + var(--entete)); bottom: 0;
margin: 0; padding: 10px var(--marge) calc(110px + var(--sous)); background: var(--fond); border-top: 1px solid var(--trait); overflow-y: auto; z-index: 49;
}
body.menu-ouvert .entete nav a { padding: 18px 0; border-bottom: 1px solid var(--trait); font-size: clamp(22px, 4.6vw, 30px); font-weight: 300; color: var(--texte); }
body.menu-ouvert .entete nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--cyan); padding-left: 16px; }
body.menu-ouvert .entete nav .accueil-menu { display: block; }
body.menu-ouvert .menu-joindre { display: block; margin-top: 26px; font: 500 13px/1.6 var(--titre); color: var(--doux); }
}
@media (max-width: 699px) {
:root { --entete: 60px; }
.entete .tel { display: none; }
.bouton-menu { margin-left: auto; min-height: 40px; padding: 0 12px; font-size: 12px; }
.tete-page h1 { font-size: clamp(36px, 10.5vw, 52px); }
}
.aa-section { padding: clamp(72px, 12vh, 150px) 0 clamp(48px, 8vh, 100px); }
.chapeau p { max-width: 640px; margin: 18px 0 0; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.projet-grand { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; margin-top: clamp(48px, 8vh, 96px); }
.projet-grand.inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.projet-grand.inverse .aa { order: 2; }
.aa { position: relative; background: var(--gris); box-shadow: 0 30px 70px rgba(30, 40, 50, .12); }
.aa canvas { display: none; width: 100%; aspect-ratio: 4 / 3; touch-action: pan-y; }
.aa > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.aa.pret canvas { display: block; }
.aa.pret > img { display: none; }
.aa.rideau canvas { cursor: ew-resize; }
.aa-etiquette {
position: absolute; top: 14px; padding: 6px 10px; background: rgba(255, 255, 255, .95); pointer-events: none;
font: 500 11px/1.3 var(--titre); color: #2E2E2E;
}
.aa-etiquette.avant { left: 14px; }
.aa-etiquette.apres { right: 14px; border-left: 3px solid var(--cyan); }
.aa-poignee { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.aa.rideau .aa-poignee { pointer-events: none; }
.aa.focus { outline: 3px solid var(--cyan-texte); outline-offset: 3px; }
.projet-texte h3 { margin: 12px 0 12px; font-size: clamp(30px, 3vw, 46px); }
.projet-texte p { margin: 0 0 16px; color: var(--doux); }
.etiquettes-service { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.etiquettes-service li { padding: 4px 9px; border: 1px solid #CFD5D8; font: 500 11px/1.3 var(--titre); color: var(--doux); }
.galerie { padding: clamp(56px, 10vh, 130px) 0 clamp(72px, 12vh, 150px); background: var(--gris); border-top: 1px solid var(--trait); }
.galerie .chapeau { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtres button {
min-height: 44px; padding: 0 16px; border: 1px solid #C9CFD3; border-radius: 22px; background: #FFFFFF; color: var(--texte);
font: 500 14px/1 var(--titre); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.filtres button span { margin-left: 7px; color: var(--discret); font: 500 12px var(--titre); }
.filtres button[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: #FFFFFF; }
.filtres button[aria-pressed="true"] span { color: #C9CFD3; }
.compte-photos { margin: 22px 0 0; font: 500 12px var(--titre); color: var(--doux); }
.galerie-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 0; }
.galerie-pied .compte-photos { margin: 0; }
.defile-boutons { display: flex; gap: 8px; }
.defile-boutons button {
display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #C9C2B6; border-radius: 50%;
background: #FFFFFF; color: var(--texte); cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.defile-boutons button:hover { background: var(--texte); border-color: var(--texte); color: #FFFFFF; }
.defile-boutons button[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.defile-boutons svg { width: 18px; height: 18px; }
.mosaique {
display: flex; gap: 14px; margin: 18px 0 0; padding: 0 max(var(--marge), (100% - var(--large)) / 2) 16px; list-style: none;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
scroll-padding-inline: max(var(--marge), (100% - var(--large)) / 2); scrollbar-width: thin; scrollbar-color: #C9C2B6 transparent;
}
.mosaique li { flex: none; margin: 0; height: clamp(260px, 52vh, 500px); scroll-snap-align: start; }
.mosaique.glisse { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.mosaique.glisse .vignette { cursor: grabbing; }
.vignette { position: relative; display: block; height: 100%; width: auto; padding: 0; border: 0; background: #E6EAEC; cursor: zoom-in; overflow: hidden; }
.vignette img { display: block; width: auto; height: 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.vignette:hover img { transform: scale(1.035); }
.vignette .moment {
position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; background: rgba(255, 255, 255, .95);
font: 500 11px/1.3 var(--titre); color: var(--texte);
}
.vignette .moment.apres { border-left: 3px solid var(--cyan); }
.visionneuse {
position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: minmax(0, 1fr); background: rgba(20, 22, 24, .96);
color: #FFFFFF; padding: calc(var(--sur) + 64px) 76px calc(var(--sous) + 24px); touch-action: pan-y;
}
.visionneuse figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; min-height: 0; }
.visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.visionneuse figcaption { max-width: 760px; margin-top: 16px; text-align: center; font-size: 15px; line-height: 1.5; color: #E6E8EA; }
.visionneuse .v-compte { position: absolute; top: calc(var(--sur) + 24px); left: 22px; margin: 0; font: 500 12px var(--titre); color: #C9CFD3; }
.visionneuse button {
position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50%; background: rgba(20, 22, 24, .6); color: #FFFFFF; font: 300 28px/1 var(--titre); cursor: pointer;
}
.visionneuse button:hover { background: rgba(255, 255, 255, .12); }
.visionneuse button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.visionneuse .v-fermer { top: calc(var(--sur) + 12px); right: 14px; }
.visionneuse .v-prec { left: 14px; top: 50%; margin-top: -26px; }
.visionneuse .v-suiv { right: 14px; top: 50%; margin-top: -26px; }
body.visionneuse-ouverte { overflow: hidden; }
.appel-projet { padding: clamp(72px, 12vh, 150px) 0; text-align: center; }
.appel-projet h2 { max-width: 13em; margin-inline: auto; }
.appel-projet h2 + .bouton { margin-top: 24px; }
.appel-projet p { max-width: 560px; margin: 20px auto 30px; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
@media (max-width: 1023px) {
.projet-grand, .projet-grand.inverse { grid-template-columns: minmax(0, 1fr); }
.projet-grand.inverse .aa { order: 0; }
}
@media (max-width: 699px) {
.mosaique li { height: clamp(180px, 29vh, 250px); }
.mosaique li { margin-bottom: 8px; }
.vignette .moment { left: 6px; bottom: 6px; padding: 4px 6px; font-size: 10px; }
.aa-etiquette { top: 8px; padding: 4px 7px; font-size: 10px; }
.aa-etiquette.avant { left: 8px; }
.aa-etiquette.apres { right: 8px; }
.visionneuse { padding: calc(var(--sur) + 60px) 12px calc(var(--sous) + 84px); }
.visionneuse .v-prec, .visionneuse .v-suiv { top: auto; bottom: calc(var(--sous) + 16px); margin-top: 0; }
.visionneuse .v-prec { left: calc(50% - 64px); }
.visionneuse .v-suiv { right: calc(50% - 64px); }
}
.sommaire-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.sommaire-services a {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #C9CFD3; border-radius: 20px;
background: #FFFFFF; color: var(--texte); font: 500 14px/1 var(--titre); text-decoration: none;
}
.sommaire-services a:hover { border-color: var(--texte); }
.services-defile { position: relative; overflow: hidden; overflow: clip; background: var(--fond); }
.service-ecran {
display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.4vw, 80px); align-items: center;
padding: clamp(56px, 9vh, 110px) var(--marge); border-bottom: 1px solid var(--trait);
}
.service-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gris); box-shadow: 0 30px 70px rgba(30, 40, 50, .12); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-num { font: 500 13px/1 var(--titre); color: var(--cyan-texte); }
.service-num span { color: var(--discret); }
.service-texte h2 { margin: 16px 0 0; font-size: clamp(36px, 4vw, 66px); }
.service-texte .sous { margin: 22px 0 12px; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--texte); }
.service-texte p { max-width: 660px; margin: 0 0 14px; color: var(--doux); }
.service-texte .cle-lead { margin-top: 22px; font-size: clamp(18px, 1.5vw, 22px); color: var(--texte); }
.choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; padding: 0; list-style: none; }
.choix li { padding: 8px 12px; background: #F1F6F8; border: 1px solid #DCE6EA; font-size: 14px; line-height: 1.3; color: var(--texte); }
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.service-actions .lien-action { margin-top: 0; }
.defile-progres { display: none; }
.services-defile.de-cote { height: 100vh; height: 100svh; }
.de-cote .defile-piste { display: flex; width: max-content; height: 100%; }
.de-cote .service-ecran {
flex: none; width: 100vw; height: 100%; border-bottom: 0; border-right: 1px solid var(--trait);
padding: calc(var(--haut-fixe) + var(--entete) + clamp(16px, 3vh, 34px)) var(--marge) clamp(52px, 8vh, 80px);
}
.de-cote .service-photo { justify-self: end; width: auto; height: min(66vh, 640px); }
.de-cote .service-photo img { width: 112%; max-width: none; margin-left: -6%; }
.de-cote .service-texte h2 { font-size: clamp(34px, 3.4vw, 58px); }
.de-cote .service-texte p { font-size: 16px; line-height: 1.6; }
.de-cote .defile-progres { display: block; position: absolute; left: var(--marge); right: var(--marge); bottom: 26px; height: 2px; background: var(--trait); }
.de-cote .defile-progres span { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 1023px) {
.service-ecran { grid-template-columns: minmax(0, 1fr); }
.service-photo { aspect-ratio: 4 / 3; max-height: 440px; }
}
@media (max-width: 699px) {
.service-ecran { gap: 22px; padding-block: 44px; }
.service-photo { aspect-ratio: 4 / 3; }
.sommaire-services a { min-height: 44px; }
}
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bouton.petit { min-height: 44px; padding: 0 16px; font-size: 14px; background: transparent; border-color: var(--texte); }
.bouton.petit:hover { background: var(--cyan); border-color: var(--cyan); }
.services-accueil { padding: clamp(72px, 12vh, 150px) 0; background: var(--gris); border-top: 1px solid var(--trait); }
.services-liste { position: relative; list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0 calc(42% + clamp(24px, 3vw, 56px)) 0 0; counter-reset: s; border-top: 1px solid var(--trait); }
.service-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 22px; align-items: center; padding: clamp(18px, 2.4vh, 26px) 12px clamp(18px, 2.4vh, 26px) 14px; border-bottom: 1px solid var(--trait); border-left: 3px solid transparent; transition: border-color .35s, background .35s; }
.service-ligne .no { align-self: start; padding-top: 12px; font: 500 12px/1 var(--titre); color: var(--discret); transition: color .35s; }
.service-ligne h3 { margin: 0; font-weight: 300; font-variation-settings: "wdth" 88; font-size: clamp(28px, 2.7vw, 44px); line-height: 1.05; transition: color .35s; }
.service-ligne p { margin: 8px 0 0; max-width: 560px; color: var(--doux); font-size: 15px; line-height: 1.5; }
.service-ligne-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.service-ligne-actions .lien-action { margin-top: 0; }
.service-ligne.actif { border-left-color: var(--cyan); background: #FFFFFF; }
.service-ligne.actif .no { color: var(--cyan-texte); }
.service-ligne.actif h3 { color: var(--cyan-titre); }
.service-ligne-photo { position: absolute; top: 0; right: 0; width: 42%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; background: var(--gris); pointer-events: none; }
.service-ligne.actif .service-ligne-photo { opacity: 1; }
.mention-photo { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 4px 8px; font: 500 11px/1.3 var(--titre); color: #FFFFFF; background: rgba(20, 24, 28, .62); border-radius: 4px; pointer-events: none; }
.service-ligne .mention-photo { left: calc(58% + 12px); opacity: 0; transition: opacity .6s ease; }
.service-ligne.actif .mention-photo { opacity: 1; }
.avant-gout { padding: clamp(72px, 12vh, 150px) 0; background: linear-gradient(180deg, var(--fond) 0%, var(--gris) 100%); }
.avant-gout .cadre { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.avant-gout-texte p { margin: 20px 0 30px; max-width: 470px; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.avant-gout-scene { background: #FFFFFF; border: 1px solid #E1E5E8; box-shadow: 0 26px 64px rgba(30, 40, 50, .08); }
.avant-gout-scene canvas, .avant-gout-scene noscript img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #FFFFFF; }
.realisation-accueil { padding: clamp(72px, 12vh, 150px) 0; }
.realisation-accueil .projet-grand { margin-top: clamp(32px, 5vh, 56px); }
.projet-texte .indice-aa { font: 500 12px/1.5 var(--titre); color: var(--discret); }
.actions-projet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.actions-projet .lien-action { margin-top: 0; }
.force .lien-action { margin-top: 24px; }
.faq-accueil { padding: clamp(72px, 12vh, 150px) 0; }
.faq-accueil h2 { max-width: 15em; }
.faq-accueil .faq-liste { margin-top: clamp(28px, 4vh, 44px); }
.toutes-questions { margin-top: 32px; }
.appel-final { position: relative; overflow: hidden; padding: clamp(56px, 10vh, 120px) 0 clamp(72px, 12vh, 140px); background: linear-gradient(180deg, #A9D2E4 0%, #C9E4EF 30%, #E6F2F7 58%, var(--fond) 100%); }
.phrase-defile { display: block; overflow: hidden; padding: .04em 0 .1em; color: var(--texte); text-decoration: none; font-weight: 300; font-variation-settings: "wdth" 84; font-size: clamp(64px, 14vw, 240px); line-height: 1; letter-spacing: -.02em; transition: color .3s; }
.phrase-defile:hover { color: #0B5568; }
.phrase-defile:focus-visible { outline: 3px solid var(--cyan-texte); outline-offset: -3px; }
.phrase-piste { display: inline-flex; white-space: nowrap; will-change: transform; }
.phrase-piste > span { padding-right: .6em; }
.phrase-piste .point { font-weight: 300; color: var(--cyan); }
.appel-final-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; margin-top: clamp(36px, 6vh, 72px); }
.appel-final-corps h2 { margin: 14px 0 0; }
.appel-final-corps p { max-width: 520px; margin: 20px 0 28px; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.appel-final-corps .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.coordonnees-final { margin: 0; border-top: 1px solid var(--trait); }
.coordonnees-final > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.coordonnees-final dt { font: 500 12px/1.7 var(--titre); color: var(--cyan-texte); }
.coordonnees-final dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
.avant-gout .cadre, .appel-final-corps { grid-template-columns: minmax(0, 1fr); }
.services-liste { padding-right: 0; }
.service-ligne { grid-template-columns: 96px minmax(0, 1fr); padding-left: 0; border-left: 0; background: none !important; }
.service-ligne-photo { position: static; grid-row: 1 / span 3; align-self: start; width: 96px; height: 120px; opacity: 1; }
.service-ligne .mention-photo { display: none; }
.service-ligne .no { display: none; }
.service-ligne-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.service-ligne.actif h3 { color: var(--texte); }
}
@media (max-width: 699px) {
.service-ligne { grid-template-columns: 76px minmax(0, 1fr); gap: 6px 14px; }
.service-ligne-photo { width: 76px; height: 96px; }
.service-ligne h3 { font-size: 24px; }
.coordonnees-final > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.sous-titre-page { margin: 18px 0 0; font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); color: var(--texte); }
.bande-lente { position: relative; min-height: 78vh; min-height: 78svh; display: grid; align-items: end; overflow: hidden; overflow: clip; color: #FFFFFF; }
.bande-lente-photo { position: absolute; inset: 0; }
.bande-lente-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; will-change: transform; }
.bande-lente::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(20, 22, 24, .82) 0%, rgba(20, 22, 24, .55) 38%, rgba(20, 22, 24, 0) 68%),
linear-gradient(180deg, rgba(20, 22, 24, 0) 45%, rgba(20, 22, 24, .6) 100%);
}
@media (max-width: 699px) { .bande-lente::after { background: linear-gradient(180deg, rgba(20, 22, 24, .15) 0%, rgba(20, 22, 24, .82) 62%); } }
.bande-lente .cadre { position: relative; z-index: 1; padding-block: clamp(48px, 9vh, 96px); }
.bande-lente-texte { max-width: 640px; }
.bande-lente .etiquette { color: #9FE3F3; }
.bande-lente h2 { color: #FFFFFF; }
.bande-lente p { margin: 18px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #F1F3F4; }
.cadre-photo { position: relative; margin: 0; overflow: hidden; background: var(--gris); }
.cadre-photo img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.equipe-photos { padding: clamp(72px, 12vh, 150px) 0 clamp(80px, 13vh, 160px); }
.equipe-photos .cadre { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.equipe-texte { grid-column: 1 / -1; }
.equipe-texte .trois-points { margin-top: 28px; }
.equipe-texte p { margin: 20px 0 0; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.cadre-photo.grande { aspect-ratio: 3 / 2; }
.cadre-photo.petite { aspect-ratio: 4 / 5; max-width: 393px; margin-top: clamp(40px, 9vh, 120px); justify-self: start; }
.cadre-photo.petite img { height: 100%; }
.cadre-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; background: linear-gradient(180deg, rgba(20, 22, 24, 0), rgba(20, 22, 24, .7)); color: #FFFFFF; font-size: 14px; line-height: 1.4; }
.cadre-photo figcaption a { color: #9FE3F3; }
@media (max-width: 1023px) {
.equipe-photos .cadre { grid-template-columns: minmax(0, 1fr); }
.cadre-photo.petite { margin-top: 0; max-width: 340px; }
}
.comparateur { padding: clamp(72px, 12vh, 150px) 0; background: var(--gris); border-top: 1px solid var(--trait); }
.choix-materiaux { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 18px; }
.choix-materiaux button {
min-height: 44px; padding: 0 16px; border: 1px solid #C9CFD3; border-radius: 22px; background: #FFFFFF; color: var(--texte);
font: 500 14px/1 var(--titre); cursor: pointer;
}
.choix-materiaux button[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: #FFFFFF; }
.tableau-defile { overflow-x: auto; background: #FFFFFF; border: 1px solid var(--trait); }
.tableau-materiaux { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tableau-materiaux th, .tableau-materiaux td { padding: 16px 18px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-materiaux thead th { font-weight: 300; font-variation-settings: "wdth" 90; font-size: clamp(22px, 2vw, 30px); color: var(--texte); border-bottom-color: #C9CFD3; }
.tableau-materiaux tbody th { width: 190px; font: 500 12px/1.5 var(--titre); color: var(--doux); }
.tableau-materiaux tbody tr:last-child > * { border-bottom: 0; }
.tableau-materiaux .a-valider, .tableau-materiaux .pas-encore { color: var(--discret); font-style: italic; }
.tableau-materiaux .a-valider::before { content: "◌ "; font-style: normal; color: #AEB5BA; }
.js .tableau-materiaux .cache-col { display: none; }
.essayer {
min-height: 40px; padding: 0 14px; border: 1px solid var(--cyan); border-radius: 2px; background: #FFFFFF; color: var(--texte);
font: 600 14px/1 var(--titre); cursor: pointer;
}
.essayer:hover { background: var(--cyan); }
.source-faits { max-width: 860px; margin: 18px 0 0; color: var(--doux); font-size: 14px; line-height: 1.55; }
.tete-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 32px; }
.tete-page .actions .lien-action { margin-top: 0; }
.comparer-titre { margin: clamp(32px, 5vh, 52px) 0 0; font-size: clamp(26px, 2.4vw, 36px); }
.comparer-aide { margin: 10px 0 0; color: var(--doux); font-size: 15px; }
.appel-projet .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.marches { padding: clamp(80px, 13vh, 160px) 0 clamp(40px, 7vh, 80px); }
.citation { max-width: 760px; margin: 22px 0 0; padding-left: 18px; border-left: 3px solid var(--cyan); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; color: var(--texte); }
.marches-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(36px, 6vh, 64px); }
.marche { padding: clamp(24px, 3vw, 44px); background: #FFFFFF; border: 1px solid var(--trait); box-shadow: 0 20px 50px rgba(30, 40, 50, .06); }
.marche h3 { margin: 0 0 14px; font-weight: 300; font-variation-settings: "wdth" 90; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; }
.marche p { margin: 0 0 18px; color: var(--doux); }
.coches { margin: 0; padding: 0; list-style: none; }
.coches li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--trait); }
.coches li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--cyan-texte); border-bottom: 2px solid var(--cyan-texte); transform: rotate(-45deg); }
@media (max-width: 1023px) {
.marches-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
.tableau-materiaux th, .tableau-materiaux td { padding: 12px 12px; font-size: 14px; }
.tableau-materiaux tbody th { width: 112px; font-size: 11px; }
}
.faq-page { padding: clamp(56px, 9vh, 110px) 0 clamp(72px, 12vh, 150px); }
.faq-outils { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; }
.faq-recherche label { display: block; margin-bottom: 8px; font: 500 12px/1.4 var(--titre); color: var(--doux); }
.faq-recherche input {
width: 100%; min-height: 56px; padding: 0 18px 0 50px; border: 1px solid #C9CFD3; border-radius: 2px; color: var(--texte);
font: 400 18px var(--titre);
background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2300809F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") no-repeat 18px 50%;
}
.faq-recherche input:focus { border-color: var(--cyan-texte); }
.faq-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-categories button {
min-height: 44px; padding: 0 16px; border: 1px solid #C9CFD3; border-radius: 22px; background: #FFFFFF; color: var(--texte);
font: 500 14px/1 var(--titre); cursor: pointer;
}
.faq-categories button span { margin-left: 7px; color: var(--discret); font: 500 12px var(--titre); }
.faq-categories button[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: #FFFFFF; }
.faq-categories button[aria-pressed="true"] span { color: #C9CFD3; }
.faq-compte { margin: 26px 0 0; font: 500 12px var(--titre); color: var(--doux); }
.faq-liste { margin: 14px 0 0; border-top: 1px solid var(--trait); }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
position: relative; display: flex; gap: 20px; align-items: baseline; padding: 26px 60px 26px 0; cursor: pointer; list-style: none;
font-weight: 300; font-variation-settings: "wdth" 92; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; color: var(--texte);
}
.question summary::-webkit-details-marker { display: none; }
.question summary .no { flex: none; font: 500 13px/1 var(--titre); color: var(--cyan-texte); }
.question summary::after { content: "+"; position: absolute; right: 10px; top: 22px; font: 300 32px/1 var(--titre); color: var(--cyan-texte); transition: transform .3s; }
.question[open] summary::after { transform: rotate(45deg); }
.question summary:hover { color: #111; }
.question .reponse { max-width: 900px; padding: 0 0 30px 52px; }
.question .categorie { display: inline-block; margin-bottom: 10px; font: 500 11px/1 var(--titre); color: var(--discret); }
.question .reponse p { margin: 0 0 14px; color: var(--doux); font-size: 17px; line-height: 1.65; }
.outil {
display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 16px 20px; background: #F1F8FA; border: 1px solid #D3E7EC;
color: var(--texte); text-decoration: none; transition: background .2s, border-color .2s;
}
.outil:hover { background: #E6F4F8; border-color: var(--cyan); }
.outil-icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); }
.outil-icone svg { width: 22px; height: 22px; fill: none; stroke: var(--texte); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.outil-texte { display: flex; flex-direction: column; gap: 3px; }
.outil-nom { font-weight: 600; font-size: 16px; }
.outil-phrase { color: var(--doux); font-size: 15px; line-height: 1.4; }
.outil::after { content: none; }
.outil:hover::after { transform: translateX(4px); }
.faq-vide { margin: 28px 0 0; padding: 24px; background: #FFFFFF; border: 1px dashed #C9CFD3; }
.faq-vide p { margin: 0; color: var(--doux); }
@media (max-width: 1023px) {
.faq-outils { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
.question summary { gap: 14px; padding-right: 44px; font-size: 20px; }
.question .reponse { padding-left: 0; }
}
.secteurs { padding: clamp(72px, 12vh, 150px) 0; background: var(--fond); border-top: 1px solid var(--trait); }
.secteurs .cadre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.secteurs-texte p { margin: 20px 0 0; max-width: 520px; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.secteurs-texte .secteurs-adresse { font-size: 17px; line-height: 1.6; color: var(--texte); }
.secteurs-texte .etiquettes-service { margin: 22px 0 6px; }
.secteurs-carte { margin: 0; }
.carte-secteurs { display: block; width: 100%; height: auto; border: 1px solid var(--trait); }
.carte-secteurs .region { font: 500 13px var(--titre); fill: var(--cyan-texte); }
.carte-secteurs .lac { fill: #CFE6EE; stroke: #A9D2DF; stroke-width: 1; }
.carte-secteurs .lac-nom { font: italic 400 13px var(--titre); fill: #36606D; }
.carte-secteurs .route-fond { fill: none; stroke: #DCE2E5; stroke-width: 9; stroke-linecap: round; }
.carte-secteurs .route { fill: none; stroke: #2E2E2E; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js:not(.doux) .carte-secteurs.a-tracer .route { stroke-dashoffset: 1; }
.js:not(.doux) .carte-secteurs.trace .route { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1); }
.carte-secteurs .ville circle { fill: #FFFFFF; stroke: #2E2E2E; stroke-width: 2; }
.carte-secteurs .ville.secteur circle { fill: var(--cyan); stroke: #2E2E2E; }
.carte-secteurs .ville text { font: 500 15px var(--titre); fill: var(--texte); paint-order: stroke; stroke: #F4F7F8; stroke-width: 6px; stroke-linejoin: round; }
.carte-secteurs .ville.secteur text { font-weight: 700; }
.carte-secteurs .base path { fill: var(--cyan); stroke: #2E2E2E; stroke-width: 2; }
.carte-secteurs .base text { font: 400 14px var(--titre); fill: var(--doux); paint-order: stroke; stroke: #F4F7F8; stroke-width: 4px; }
.carte-secteurs .base .fort { font-weight: 700; font-size: 17px; fill: var(--texte); }
.carte-secteurs .onde { fill: none; stroke: var(--cyan); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.js:not(.doux) .carte-secteurs .onde { animation: onde-secteur 2.6s ease-out infinite; }
@keyframes onde-secteur { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.carte-secteurs .nord path { fill: #2E2E2E; }
.carte-secteurs .nord text, .carte-secteurs .echelle text { font: 500 12px var(--titre); fill: var(--doux); }
.carte-secteurs .echelle path { fill: none; stroke: #2E2E2E; stroke-width: 2; }
.secteurs-carte figcaption { margin-top: 10px; color: var(--doux); font-size: 14px; line-height: 1.5; }
.emploi-form { padding: clamp(72px, 12vh, 150px) 0; background: var(--gris); border-top: 1px solid var(--trait); }
.emploi-form .cadre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.emploi-form .revele p { margin: 20px 0 18px; max-width: 520px; color: var(--doux); font-size: clamp(17px, 1.4vw, 20px); }
.candidature { padding: clamp(22px, 3vw, 40px); background: #FFFFFF; border: 1px solid var(--trait); }
.candidature fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.message-candidature:empty { display: none; }
.message-candidature { margin: 16px 0 0; padding: 14px 16px; background: #E6F6FA; border-left: 3px solid var(--cyan); color: var(--texte); }
@media (max-width: 1023px) {
.secteurs .cadre, .emploi-form .cadre { grid-template-columns: minmax(0, 1fr); }
}
.ancre-soumission { display: block; height: 0; scroll-margin-top: 8px; }
@media (max-width: 699px) { .carte-choix small { font-size: 13px; } .carte-choix svg { width: 30px; height: 30px; } .ecran .aide { margin-bottom: 8px; } }
@media (min-width: 700px) and (max-height: 780px) { .carte-choix { padding: 10px 12px; } .carte-choix svg { width: 28px; height: 28px; margin-bottom: 0; } .ecran .aide { margin-bottom: 6px; } }
.photo-vivante { position: relative; margin: 0; overflow: hidden; background: var(--gris); }
.photo-vivante > picture { display: block; width: 100%; height: 100%; }
.photo-vivante > img, .photo-vivante > picture > img, .photo-vivante > .pv-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pv-pos, 50% 50%); }
.photo-vivante > .pv-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.photo-vivante.joue > .pv-video { opacity: 1; }
.photo-vivante figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; color: #FFFFFF; font-size: 13px;
background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.bande-video { width: 100%; aspect-ratio: 5 / 2; max-height: 52vh; max-height: 52svh; margin: clamp(22px, 3.4vh, 40px) 0 0; }
@media (max-width: 699px) { .bande-video { aspect-ratio: 4 / 3; } }
.trois-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.trois-points li { padding-top: 16px; border-top: 2px solid var(--cyan); color: var(--doux); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
.trois-points.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tete-page .trois-points { margin-top: 30px; max-width: 1100px; }
@media (max-width: 899px) { .trois-points, .trois-points.deux { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.bande-points { padding: clamp(36px, 6vh, 72px) 0 clamp(64px, 11vh, 130px); }
.bande-points .trois-points li { color: var(--texte); font-size: clamp(18px, 1.55vw, 23px); line-height: 1.45; font-weight: 300; font-variation-settings: "wdth" 92; }
.bande-points .lien-action { margin-top: clamp(22px, 3vh, 34px); }
.bande-lente .lien-action { color: #FFFFFF; }
.bande-lente .bouton { margin-top: 26px; }
.bande-emploi ul { list-style: none; max-width: 540px; margin: 20px 0 22px; padding: 0; }
.bande-emploi ul li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .24); color: #FFFFFF; font-size: 19px; }
.bande-emploi ul li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .24); }
.bande-emploi ul small { color: #D6DBDE; font-size: 15px; }
.bande-emploi .ecrire-courriel a { color: #9FE3F3; }
.heros { position: relative; min-height: 92vh; min-height: 92svh; display: grid; align-items: end; overflow: hidden; overflow: clip; background: var(--anthracite); color: #FFFFFF; }
.heros-photo { position: absolute; inset: 0; margin: 0; }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.heros::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(20, 22, 24, .84) 0%, rgba(20, 22, 24, .52) 46%, rgba(20, 22, 24, .1) 78%),
linear-gradient(0deg, rgba(20, 22, 24, .62) 0%, rgba(20, 22, 24, 0) 52%);
}
.heros .cadre {
position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 24px clamp(32px, 4vw, 72px);
align-items: end; padding: calc(var(--haut-fixe) + var(--entete) + clamp(40px, 8vh, 96px)) 0 clamp(40px, 8vh, 88px);
}
.heros h1 { max-width: 14em; margin: 18px 0 0; color: #FFFFFF; font-size: clamp(40px, 5.4vw, 88px); }
.heros .lead { max-width: 640px; margin: 24px 0 0; color: #F1F3F4; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; }
.heros .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; }
.heros .lien-action { margin-top: 0; color: #FFFFFF; }
.heros .citation {
max-width: 440px; margin: 0; padding: 18px 20px; border-left: 3px solid var(--cyan); background: rgba(20, 22, 24, .55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F1F3F4; font-size: 17px; line-height: 1.55;
}
.heros .pastille { top: auto; bottom: 28px; z-index: 2; }
body:has(.heros, .tete-service) .entete { background: rgba(247, 244, 239, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--trait); }
@media (max-width: 899px) {
.heros { min-height: 0; }
.heros .cadre { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--haut-fixe) + var(--entete) + 34vh); }
.heros::after { background: linear-gradient(180deg, rgba(20, 22, 24, .12) 0%, rgba(20, 22, 24, .6) 34%, rgba(20, 22, 24, .9) 66%); }
}
.metiers { position: relative; display: flex; gap: 6px; padding: 6px; background: var(--anthracite); }
.metier-panneau {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0; min-width: 0;
min-height: clamp(480px, 78vh, 780px); overflow: hidden; color: #FFFFFF; cursor: pointer;
transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1);
}
.metier-panneau > img, .metier-panneau > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.metier-panneau::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(0deg, rgba(20, 22, 24, .9) 0%, rgba(20, 22, 24, .42) 46%, rgba(20, 22, 24, .06) 76%);
}
.metier-panneau.ouvert { cursor: default; }
.metier-panneau.ouvert::after { background: linear-gradient(0deg, rgba(20, 22, 24, .95) 0%, rgba(20, 22, 24, .82) 58%, rgba(20, 22, 24, .5) 100%); }
.metier-panneau-corps { position: relative; z-index: 1; max-width: 720px; padding: clamp(24px, 3vw, 52px); }
.metier-panneau .etiquette { display: inline-block; padding: 5px 9px; border-radius: 3px; background: rgba(20, 22, 24, .78); color: #9FE3F3; }
.metier-panneau h2 { margin: 12px 0 0; color: #FFFFFF; font-size: clamp(30px, 3vw, 50px); }
.metier-panneau .accroche { max-width: 560px; margin: 16px 0 0; color: #F1F3F4; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.metier-panneau .accroche { text-shadow: 0 1px 3px rgba(20, 22, 24, .7); }
.metier-ouvrir {
display: inline-flex; align-items: center; min-height: 46px; margin-top: 22px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .75);
border-radius: 2px; background: rgba(20, 22, 24, .3); color: #FFFFFF; font: 600 15px/1 var(--titre); cursor: pointer;
transition: background .2s, border-color .2s, color .2s;
}
.metier-ouvrir:hover, .metier-panneau:not(.ouvert):hover .metier-ouvrir { background: var(--cyan); border-color: var(--cyan); color: #111111; }
.metier-detail { margin-top: 24px; animation: metier-detail .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes metier-detail { from { opacity: 0; transform: translateY(12px); } }
.metier-detail .points { margin: 0; padding: 0; list-style: none; }
.metier-detail .points li { margin: 0 0 10px; padding: 2px 0 2px 16px; border-left: 2px solid var(--cyan); color: #F1F3F4; font-size: 16px; line-height: 1.55; }
.metier-detail .coches { margin-top: 14px; }
.metier-detail .coches li { border-top-color: rgba(255, 255, 255, .18); color: #F1F3F4; font-size: 15px; }
.metier-detail .coches li::before { border-color: #9FE3F3; }
.metier-detail .lien-action { margin-top: 18px; color: #FFFFFF; }
@media (hover: hover) and (min-width: 900px) {
.metiers:has(.ouvert) .metier-panneau:not(.ouvert) { flex-grow: .62; }
.metier-panneau.ouvert { flex-grow: 1.55; }
}
@media (max-width: 899px) {
.metiers { flex-direction: column; }
.metier-panneau { flex: none; min-height: 72vh; min-height: 72svh; }
}
@media (prefers-reduced-motion: reduce) {
.metier-panneau, .metier-panneau > img, .metier-panneau > picture > img { transition: none; }
.metier-detail { animation: none; }
}
.service-texte .points { max-width: 660px; margin: 18px 0 20px; padding: 0; list-style: none; }
.service-texte .points li { margin: 0 0 10px; padding: 2px 0 2px 16px; border-left: 2px solid var(--cyan); color: var(--doux); font-size: 16px; line-height: 1.55; }
.de-cote .service-texte .points li { font-size: 15.5px; line-height: 1.5; }
.anthracite .choix li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.anthracite .service-photo { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.tete-service .cadre {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center;
padding: calc(var(--haut-fixe) + var(--entete) + clamp(40px, 8vh, 96px)) 0 clamp(48px, 9vh, 104px);
}
.tete-service h1 { max-width: 14em; margin: 18px 0 0; font-size: clamp(40px, 5vw, 80px); }
.tete-service .lead { max-width: 620px; margin: 22px 0 0; color: var(--doux); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.tete-service .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.tete-service-photo { justify-self: end; width: 100%; max-width: 440px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #2E2E2E; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.tete-service-photo img { width: 100%; height: 100%; object-fit: cover; }
.tete-service .pastille { top: auto; bottom: 28px; }
@media (max-width: 899px) {
.tete-service .cadre { grid-template-columns: minmax(0, 1fr); }
.tete-service-photo { justify-self: start; max-width: 360px; aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
.tete-service.pleine { display: grid; align-items: center; min-height: min(92vh, 940px); }
.tete-service.pleine .cadre { display: block; }
.tete-service.pleine .tete-service-texte { position: relative; z-index: 1; max-width: min(620px, 46%); }
.tete-service.pleine .lead { max-width: min(480px, 34vw); }
.tete-service.pleine .tete-service-photo { position: absolute; inset: 0; z-index: 0; justify-self: stretch; align-self: stretch; width: auto; max-width: none; aspect-ratio: auto; box-shadow: none; }
.tete-service.pleine .tete-service-photo img { object-position: var(--pos, 50% 50%); }
.tete-service.pleine.bande { min-height: 0; }
.tete-service.pleine.bande .tete-service-photo img { object-position: 50% 40%; }
.tete-service.pleine .tete-service-photo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(17, 18, 20, .8) 0%, rgba(17, 18, 20, .72) 38%, rgba(17, 18, 20, .3) 52%, rgba(17, 18, 20, 0) 64%);
}
}
@media (max-width: 899px) {
.tete-service.pleine .cadre { padding-top: calc(var(--haut-fixe) + var(--entete)); gap: 26px; }
.tete-service.pleine .tete-service-photo { order: -1; justify-self: stretch; width: auto; max-width: none; margin: 0 calc(-1 * var(--marge)); aspect-ratio: 3 / 2; box-shadow: none; }
}
.service-contenu { padding: clamp(64px, 11vh, 140px) 0; }
.service-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: clamp(36px, 6vh, 64px); }
.service-photos .cadre-photo { aspect-ratio: 4 / 3; }
.service-photos .cadre-photo img { height: 100%; }
.service-photos:has(> figure:only-child) { grid-template-columns: minmax(0, 560px); }
.service-contenu h2, .service-questions h2 { margin: 14px 0 30px; font-size: clamp(32px, 3.6vw, 56px); max-width: 18em; }
.service-contenu .coches { max-width: 760px; margin-top: 34px; }
.service-contenu .choix { margin-top: 30px; }
.service-contenu-liens { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 26px; }
.service-questions { padding: clamp(64px, 11vh, 140px) 0; background: var(--gris); }
.service-questions .faq-liste { max-width: 980px; }
.service-questions .question .reponse { padding-left: 0; }
.service-questions .lien-action { margin-top: 26px; }
.a-valider {
margin: 12px 0 0; padding: 2px 0 2px 12px; border-left: 2px dashed var(--cyan-texte); color: var(--cyan-texte);
font: 500 14px/1.45 var(--titre);
}
.anthracite .a-valider { border-color: var(--cyan-texte); color: var(--cyan-texte); }
.guide-lien { margin: 18px 0 0; }
.materiaux { padding: clamp(56px, 9vh, 110px) 0; }
.materiaux h2 { margin: 14px 0 26px; font-size: clamp(32px, 3.6vw, 56px); }
.materiaux-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.tuile-materiau { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; background: #FFFFFF; border: 1px solid var(--trait); border-top: 3px solid var(--cyan); }
.tuile-materiau b { font-weight: 400; font-variation-settings: "wdth" 90; font-size: 24px; line-height: 1.1; }
.tuile-materiau a { color: var(--cyan-texte); font-size: 14px; font-weight: 600; text-decoration: none; }
.tuile-materiau a:hover { text-decoration: underline; }
.materiaux .materiaux-tuiles { display: block; columns: 3 300px; column-gap: 10px; }
.materiaux .tuile-materiau { break-inside: avoid; margin: 0 0 10px; }
.faits-fabricant { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.faits-fabricant li { padding-left: 12px; border-left: 2px solid var(--trait); color: var(--doux); font-size: 14.5px; line-height: 1.5; }
.tuile-materiau .a-valider { margin: 6px 0 4px; font-size: 13.5px; }
.tuile-materiau .essayer-sim { padding-top: 6px; }
a.source { font-size: 12.5px; font-weight: 500; color: var(--cyan-texte); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.note-garanties { max-width: 860px; margin: 8px 0 0; color: var(--doux); font-size: 14px; line-height: 1.55; }
.tableau-materiaux .fait-fabricant { display: block; margin-top: 6px; }
.tableau-materiaux .fait-fabricant:first-child { margin-top: 0; }
.appel-territoire { max-width: 640px; margin: 18px auto 0; color: var(--doux); font-size: 17px; line-height: 1.55; }
.pied-adresse { flex-basis: 100%; margin: 0; }
.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.pied-reseaux { flex-basis: 100%; margin: -8px 0 -8px -8px; }
.reseau { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
color: var(--texte); text-decoration: none; border-radius: 6px; }
.reseau img { display: block; width: 28px; height: 28px; }
.reseau-mot { padding: 0 8px; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.reseau:hover { color: var(--cyan-titre); }
.reseau:focus-visible { outline: 2px solid var(--cyan-texte); outline-offset: 2px; }
.coordonnees .reseaux { margin: 2px 0 0 -8px; }
.coordonnees .reseaux a.reseau { flex-direction: row; gap: 0; min-height: 44px; padding: 0 8px; }
.pied-services { display: block; flex-basis: 100%; text-wrap: balance; }
.pied-services a { display: inline-block; margin: 0 16px 8px 0; white-space: nowrap; color: var(--texte); text-decoration: none; font-size: 14px; }
.pied-services a:hover { color: var(--cyan-texte); }
.anthracite {
--texte: #F2EFE9; --doux: #C9C3B9; --discret: #A8A196; --trait: rgba(255, 255, 255, .14); --gris: #2E2E2E;
--cyan-titre: #4CC9EA; --cyan-texte: #63D2EF;
position: relative; isolation: isolate; background: var(--anthracite); color: var(--texte);
}
.anthracite::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
url("../assets/lumiere-anthracite.webp") 0 0 / 100% 100% no-repeat,
url("../assets/grain-1x.webp") 0 0 / 180px 180px;
background-image: url("../assets/lumiere-anthracite.webp"), image-set(url("../assets/grain-1x.webp") 1x, url("../assets/grain.webp") 2x);
}
.anthracite .bouton.sombre { background: #F2EFE9; border-color: #F2EFE9; color: #1E1E1E; }
.anthracite .bouton.sombre:hover { background: #FFFFFF; color: #111; }
.anthracite .bouton.creux:hover { background: rgba(255, 255, 255, .08); }
.anthracite .etapes-projet::before { background: rgba(255, 255, 255, .16); }
.anthracite .etapes-projet li::before { background: var(--anthracite); border-color: #6A6A6A; }
.anthracite .etapes-projet li.atteinte::before { background: var(--cyan); border-color: var(--cyan); }
.anthracite .note-jt { border-color: var(--cyan-texte); color: var(--cyan-texte); }
footer.anthracite { padding-top: 56px; }
.chapeau-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); max-width: 1100px; }
.chapeau-colonnes p { max-width: none; }
@media (max-width: 899px) { .chapeau-colonnes { grid-template-columns: minmax(0, 1fr); } }
body.menu-ouvert .entete { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tete-nacelles {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(48vw, 880px);
min-height: 100vh; min-height: 100svh; padding: calc(var(--haut-fixe) + var(--entete)) 0 0 max(var(--marge), (100% - var(--large)) / 2);
background: linear-gradient(180deg, var(--gris) 0%, var(--fond) 100%); border-bottom: 1px solid var(--trait);
}
.tete-nacelles-texte { align-self: center; padding: clamp(36px, 7vh, 88px) clamp(28px, 4vw, 72px) clamp(44px, 8vh, 96px) 0; }
.tete-nacelles h1 { max-width: 12em; margin: 18px 0 0; font-size: clamp(44px, 6vw, 104px); }
.tete-nacelles .lead { max-width: 560px; margin: 24px 0 0; color: var(--doux); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.tete-nacelles .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.tete-nacelles-photo { position: relative; margin: 0; overflow: hidden; background: #2E2E2E; }
.tete-nacelles-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tete-nacelles .pastille { top: auto; bottom: 28px; }
@media (min-width: 900px) {
.tete-nacelles {
grid-template-columns: minmax(0, 1fr); isolation: isolate; padding-left: clamp(24px, 5vw, 96px);
--texte: #F2EFE9; --doux: #DCD7CF; --trait: rgba(255, 255, 255, .2); --cyan-titre: #4CC9EA; --cyan-texte: #63D2EF;
}
.tete-nacelles-texte { position: relative; z-index: 1; max-width: min(480px, 27vw); padding-right: 0; }
.tete-nacelles h1 { font-size: clamp(44px, 5.2vw, 92px); }
.tete-nacelles .lead { max-width: min(420px, 24vw); }
.tete-nacelles .tarifs-demande { color: #2E2E2E; }
.tete-nacelles-photo { position: absolute; inset: calc(var(--haut-fixe) + var(--entete)) 0 0; z-index: 0; }
.tete-nacelles-photo img { object-position: 0% 30%; transform: scale(1.2); transform-origin: 0% 30%; }
.tete-nacelles-photo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(17, 18, 20, .88) 0%, rgba(17, 18, 20, .8) 24%, rgba(17, 18, 20, .42) 30%, rgba(17, 18, 20, 0) 37%);
}
}
.tarifs-demande {
display: inline-block; margin: 22px 0 0; padding: 8px 12px; border-left: 3px solid var(--cyan); background: #FFFFFF;
font: 500 12px/1.4 var(--titre); color: var(--texte);
}
@media (max-width: 899px) {
.tete-nacelles { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-left: 0; }
.tete-nacelles-photo { order: -1; aspect-ratio: 16 / 9; }
.tete-nacelles-photo img { object-position: 50% 0%; }
.tete-nacelles-texte { padding: 26px var(--marge) 44px; }
.tete-nacelles .pastille { top: calc(var(--haut-fixe) + var(--entete) + 14px); bottom: auto; }
}
.chantiers-nacelles { padding: clamp(72px, 12vh, 150px) 0; }
.chantiers-nacelles h2 { margin: 14px 0 30px; max-width: 15em; font-size: clamp(34px, 4.4vw, 68px); }
.nacelles-photos { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; margin-top: clamp(36px, 6vh, 64px); }
.nacelles-photos .cadre-photo { aspect-ratio: 3 / 2; }
.nacelles-photos .n-grande { aspect-ratio: auto; }
.services-liste .photo-nacelle { object-position: 28% 50%; }
.nacelles-photos .cadre-photo img:not(.lent-glisse) { height: 100%; }
@media (max-width: 899px) {
.nacelles-photos { grid-template-columns: minmax(0, 1fr); }
.nacelles-photos .n-grande { aspect-ratio: 3 / 2; }
.nacelles-photos .cadre-photo:not(.n-grande) { aspect-ratio: auto; background: #141516; }
.nacelles-photos .cadre-photo:not(.n-grande) img { height: auto; aspect-ratio: 4 / 3; }
.nacelles-photos .cadre-photo:not(.n-grande) figcaption { position: static; padding: 10px 14px 12px; background: #141516; }
}
.questions-location { padding: clamp(72px, 12vh, 150px) 0; }
.questions-location h2 { margin: 14px 0 0; font-size: clamp(34px, 4.4vw, 68px); }
.questions-location .a-valider { margin-top: 22px; }
.location { position: relative; padding: clamp(80px, 14vh, 180px) 0; background: var(--gris); border-top: 1px solid var(--trait); }
.location .cadre { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 100px); align-items: start; }
.location h2 { margin: 14px 0 30px; font-size: clamp(34px, 4.4vw, 68px); }
.form-location, .location-fin { background: #FFFFFF; border: 1px solid #E1E5E8; padding: clamp(22px, 3vw, 44px); box-shadow: 0 24px 60px rgba(30, 40, 50, .06); }
.form-location fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cartes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-location .champ label { cursor: pointer; }
.aide-champ { grid-column: 1 / -1; margin: -6px 0 0; color: var(--doux); font-size: 14px; line-height: 1.45; }
.champs-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.annonce-form { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid var(--cyan); background: #F1FAFD; color: var(--texte); font-size: 15px; line-height: 1.45; }
.annonce-form:empty { margin: 0; padding: 0; border: 0; }
.location-fin h3 { margin: 0 0 6px; font-size: clamp(28px, 2.8vw, 40px); outline: none; }
.location-coord .tarifs-demande { margin-top: 0; }
.insecable { white-space: nowrap; }
.location-fin .fiche-tete { flex-wrap: wrap; }
.location-coord-texte { margin: 16px 0 0; color: var(--doux); font-size: 17px; line-height: 1.55; }
@media (max-width: 1023px) { .location .cadre { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .champs-dates { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) and (max-width: 1439px) { .entete nav { gap: 16px; } .entete nav a { font-variation-settings: "wdth" 90; } }
@media (min-width: 1200px) and (max-width: 1279px) { .entete { gap: 20px; } .entete nav { gap: 14px; } .entete nav a { font-size: 14px; } }
.photos-trop { margin: 12px 0 0; color: #B42318; font: 500 15px/1.45 var(--titre); }
.envoi-refus { margin: 16px 0 0; padding: 14px 16px; background: #FDECEA; border-left: 3px solid #B42318; color: #2E2E2E; font: 500 15px/1.45 var(--titre); }
.envoi-refus[hidden] { display: none; }
@media (min-width: 700px) {
footer .pied-services, footer .pied-adresse { padding-right: max(0px, calc(220px - (100vw - min(var(--large), 100vw - 2 * var(--marge))) / 2)); }
}
.soumission-entete .cb-mot { white-space: nowrap; }
.soumission-entete .mot-court { display: none; }
@media (max-width: 899px) {
.soumission-entete .mot-long { display: none; }
.soumission-entete .mot-court { display: inline; }
}
@media (min-width: 700px) {
:root { --sous-bulle: max(0px, calc(220px - (100vw - min(var(--large), 100vw - 2 * var(--marge))) / 2)); }
.page-faq .faq-liste .reponse, .page-carrieres .candidature-grille, .page-revetement .comparateur .chapeau-colonnes, .page-revetement .tt-tete .tt-fil { padding-right: var(--sous-bulle); }
}
@media (min-width: 900px) { #commercial .metier-panneau-corps { padding-right: max(clamp(24px, 3vw, 52px), 200px); } }
#commercial::after { background: linear-gradient(90deg, rgba(20, 22, 24, .82) 0%, rgba(20, 22, 24, .8) 78%, rgba(20, 22, 24, .46) 94%, rgba(20, 22, 24, .3) 100%),
linear-gradient(0deg, rgba(20, 22, 24, .8) 0%, rgba(20, 22, 24, .4) 55%, rgba(20, 22, 24, 0) 90%); }
@media (max-width: 899px) {
#commercial::after { background: linear-gradient(0deg, rgba(20, 22, 24, .94) 0%, rgba(20, 22, 24, .82) 55%, rgba(20, 22, 24, .55) 72%, rgba(20, 22, 24, .12) 92%); }
#commercial .metier-panneau-corps h2 { text-shadow: 0 1px 14px rgba(20, 22, 24, .65); }
}
.source-q select { width: 100%; max-width: 100%; min-width: 0; }
.source-q .source-autre { display: block; margin-top: 8px; }
.source-q .source-autre[hidden] { display: none; }
.source-q .source-autre input { width: 100%; max-width: 100%; }